main{max-width:940px}
.lede{color:var(--soft);font-size:.95rem}

.panel{background:#0a0710;border:1px solid #241a30;border-radius:var(--radius);
  box-shadow:0 10px 34px rgba(30,10,45,.24);padding:10px 10px 4px;margin-bottom:var(--gap)}
canvas{display:block;width:100%;height:auto;border-radius:9px;background:#0a0710;
  touch-action:none;cursor:grab}
canvas.dragging{cursor:grabbing}

.readout{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;
  padding:9px 6px 8px;color:#9a8aa2;font-size:.85rem}
.readout b{color:#ffb9cf;font-weight:600}

/* The box is a textarea pretending to be one line (why is in app.js): its
   height is pinned here, and scrolling is blocked, otherwise pressing Enter
   scrolls half a line before the script catches it */
.wishrow{justify-content:center;flex-wrap:nowrap;gap:10px;margin-bottom:12px}
.wishrow textarea{flex:1 1 auto;max-width:24em;height:2.65em;line-height:1.45;
  padding:.55em .75em;resize:none;overflow:hidden;white-space:nowrap;
  font-family:inherit;font-size:1rem}

.chips{justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:var(--gap)}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--soft);
  border-radius:999px;padding:.42em 1.05em;font-size:.9rem;cursor:pointer;
  font-family:inherit;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

.controls{justify-content:center;flex-wrap:wrap;margin-bottom:var(--gap)}

/* ⚠️ The first column is 6.6em, not the 4.6em the Chinese version uses:
   the width is set by the longest label ("Thickness"). Copy the Chinese
   numbers over and the labels get clipped. */
.knobs label{display:grid;grid-template-columns:6.6em 1fr 5.4em;align-items:center;
  gap:12px;margin-bottom:13px;color:var(--ink);font-size:.92rem}
.knobs label:last-child{margin-bottom:0}
.knobs .k{color:var(--ink);white-space:nowrap}
.knobs input[type=range]{padding:0;border:none;background:transparent;box-shadow:none;accent-color:var(--accent)}
.knobs span:last-child{color:var(--soft);font-size:.85rem;text-align:right;white-space:nowrap}

@media(max-width:600px){
  .wishrow{flex-wrap:wrap}
  .wishrow textarea{max-width:none;flex:1 1 100%}
  .knobs label{grid-template-columns:6em 1fr 5em;gap:8px;font-size:.86rem}
  .readout{gap:12px;font-size:.8rem}
  .chip{padding:.4em .85em;font-size:.85rem}
}