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

/* Desktop: fill in on the left, poster on the right.
   Phone: poster goes first — the first thing you should see is the result, not a stack of inputs. */
.wrap2{display:flex;gap:22px;align-items:flex-start;margin-bottom:var(--gap)}
.pane.form{flex:1 1 380px;min-width:0}
.pane.paper{flex:0 0 430px;max-width:430px}
canvas{display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 10px 34px rgba(80,60,40,.16);background:#fffdfa}

textarea{resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92rem;line-height:1.75}
.lbl{display:flex;align-items:baseline;gap:10px;font-size:.9rem;color:var(--ink);margin-bottom:8px;flex-wrap:wrap}
.lbl .hint{color:var(--soft);font-size:.82rem;font-weight:400}

.readout{display:flex;gap:18px;justify-content:flex-end;padding:10px 2px 0;color:var(--soft);font-size:.88rem;flex-wrap:wrap}
.readout b{color:var(--accent);font-weight:700;font-size:1.02rem}

/* Palette buttons look like the palette they pick (paper colour behind, accent on the edge) */
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{padding:8px 16px;border-radius:10px;border:2px solid;font-size:.9rem;font-weight:600;
  opacity:.62;transition:opacity .18s,transform .18s}
.sw.on{opacity:1;transform:translateY(-1px);box-shadow:0 4px 14px rgba(80,60,40,.16)}

.mt{margin-top:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
/* ⚠️ 7.2em, not the 5.6em the Chinese version uses: "Bottom line" and "Subtitle"
   wrap onto two lines at 5.6em. Field labels are the first thing to break in translation. */
.grid2 label{display:grid;grid-template-columns:7.2em 1fr;align-items:center;gap:8px;margin:0;font-size:.9rem}
.grid2 label.full{grid-column:1/-1}
.grid2 .k{color:var(--soft)}
.grid2 input,.grid2 select{padding:7px 10px;font-size:.9rem}

.controls{justify-content:flex-start;flex-wrap:wrap}
.note code{background:rgba(0,0,0,.05);padding:1px 5px;border-radius:5px;font-size:.9em}

@media(max-width:860px){
  .wrap2{flex-direction:column}
  .pane.paper{order:-1;flex:1 1 auto;max-width:none;width:100%}
  .grid2{grid-template-columns:1fr}
}