/* Keep the three personalisation steps prominent in both interfaces. */
.control-panel .steps,
.book-interface .notebook-paper .control-panel .steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:8px 0 24px;
  padding:10px;
  border:1.5px solid #9b8a68;
  border-radius:12px;
  background:transparent;
}
.control-panel .steps button,
.book-interface .notebook-paper .control-panel .steps button {
  flex-direction:column;
  gap:8px;
  min-height:88px;
  padding:10px 4px;
  border:1px solid #b7c3ce;
  border-radius:8px;
  background:transparent;
  color:#213347;
  font-size:13px;
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere;
  box-shadow:none;
}
.control-panel .steps button::before{content:none}
.designer-step-icon{display:flex;align-items:center;justify-content:center;gap:5px;height:32px;color:#806c46}
.designer-step-icon svg{display:block;width:30px;height:30px;flex:none}
.control-panel .steps button[aria-selected=true] .designer-step-icon{color:#f3dfb4}
.control-panel .steps button[aria-selected=true],
.book-interface .notebook-paper .control-panel .steps button[aria-selected=true] {
  background:#1b3045;color:#fff;border-color:#1b3045;
  box-shadow:0 3px 8px #1b304526;
}

.control-panel .steps button:hover{border-color:#9b762f;box-shadow:0 0 0 1px #9b762f}
@media(max-width:400px){.control-panel .steps,.book-interface .notebook-paper .control-panel .steps{gap:5px;padding:7px}.control-panel .steps button{font-size:12px}}