* { margin:0; padding:0; box-sizing:border-box; }
  body { background:#05070a; color:#dfe7ee; font:14px/1.45 system-ui,sans-serif;
         overflow-x:hidden; height:100vh; display:flex; flex-direction:column; }
  header { flex:0 0 auto; display:flex; gap:14px; align-items:baseline; padding:12px 18px;
            border-bottom:1px solid #1c2733; }
  header h1 { font-size:16px; }
  header .muted { color:#7b8ea1; }
  /* S6: two panes that each scroll on their own. The canvas used to scroll
     away the moment you worked down the controls (align-items:flex-start on a
     wrapping flex row), so half of every edit was made blind. */
  main { flex:1 1 auto; min-height:0; display:flex; gap:18px; padding:18px;
         align-items:stretch; }
  .stage { flex:1 1 640px; min-width:0; overflow:auto; }
  /* The scaled canvas keeps its 1280px layout box under a transform, so the
     wrapper is what gets the real (scaled) size - otherwise the pane reserves
     1280px of scroll width and grows a horizontal scrollbar (min-width:0 alone
     fixed the flex floor, not this). */
  .canvasbox { position:sticky; top:0; }
  .canvas { position:absolute; left:0; top:0; width:1280px; height:720px;
             transform-origin:0 0; box-shadow:0 8px 30px rgba(0,0,0,.5); }
  .canvas img.base { position:absolute; inset:0; width:1280px; height:720px; display:block; }
  .headline { position:absolute; left:48px; top:36px; width:760px; height:400px;
               display:flex; align-items:center; }
  /* The Detailed design's writing band (owner 2026-10-19): the preview must
     use the SAME box the card has, or the owner judges the writing in the
     wrong place and at the wrong size - and that size judgement then fights
     the card's real neighbours. */
  .canvas.classic .headline { left:48px; top:150px; width:620px; height:220px; }
  /* S1: THE preview font. The base64 Anton/Impact faces above were declared and
     never referenced, so every judgement made while editing was about the
     browser's default sans while the delivered card was drawn by the
     pipeline's chromium in Anton. Same face, same weight, same metrics. */
  .headline .txt { width:100%; line-height:1.0; letter-spacing:2px;
                    text-transform:uppercase; overflow-wrap:break-word; overflow:hidden;
                    font-family:"CardFace", "Arial Black", sans-serif;
                    font-weight:400; }
  .headline .run { display:inline-block; text-shadow:10px 10px 0 rgba(0,0,0,.9);
                    -webkit-text-stroke:5px #000; paint-order:stroke fill; }
  .controls { flex:0 1 380px; display:flex; flex-direction:column; gap:12px;
               background:#0a121a; border:1px solid #1c2733; border-radius:10px;
               padding:14px; overflow-y:auto; }
  label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:#9fb2c4; }
  /* The design toggle's active state (owner 2026-10-19) - the page's own
     accent blue, same as the pool's "used elsewhere" badge. */
  #designrow .btn.on { color:#05070a; background:#7dd3fc; border-color:#7dd3fc; }
  textarea { background:#05070a; color:#fff; border:1px solid #243444; border-radius:8px;
              padding:8px; font:15px/1.4 system-ui; resize:vertical; }
  #chips { display:flex; flex-wrap:wrap; gap:8px; }
  .chip { display:flex; align-items:center; gap:5px; background:#101c26;
           border:1px solid #243444; border-radius:8px; padding:4px 7px; font-size:12px; }
  .chip input[type=color] { width:26px; height:26px; border:none; background:none; padding:0; }
  .chip button { background:#182634; color:#cfe2f2; border:1px solid #2b3f52;
                  border-radius:6px; cursor:pointer; padding:2px 7px; font-size:11px; }
  /* The hero-art picker: the pool's own files, the selected one outlined.
     Clicking one re-renders the wordless base with that art (a few seconds),
     so the preview always shows exactly what Apply will draw. */
  #pool { display:flex; flex-wrap:wrap; gap:8px; max-height:180px; overflow:auto; }
  #pool .art { width:84px; height:84px; border-radius:8px; border:2px solid #243444;
                background:#05070a center/contain no-repeat; cursor:pointer;
                position:relative; }
  #pool .art.active { border-color:#16a34a; box-shadow:0 0 0 2px rgba(22,163,74,.35); }
  #pool .art.loading { opacity:.4; cursor:wait; }
  /* S7: how many other recordings already pinned this art (reuse beats
     rediscovery), and the pin marker for the owner's own favourite. */
  #pool .art .used { position:absolute; right:3px; bottom:3px; font-size:9px;
                      background:#0b1018e6; color:#7dd3fc; border-radius:4px;
                      padding:0 3px; }
  #pool .art.pinned::after { content:"★"; position:absolute; left:3px; top:1px;
                             color:#fbbf24; font-size:13px; text-shadow:0 1px 3px #000; }
  .poolbar { display:flex; gap:8px; align-items:center; }
  .poolbar input { flex:1 1 auto; min-width:0; }
  /* S4: the undo filmstrip - every finished render, newest first. */
  .hist { display:flex; gap:8px; overflow-x:auto; padding:8px 0; }
  .hist figure { margin:0; flex:0 0 auto; width:112px; }
  .hist img { width:112px; height:63px; object-fit:cover; border-radius:6px;
               border:1px solid #243444; display:block; cursor:pointer; }
  .hist .meta { font-size:10px; color:#7b8ea1; display:flex; gap:4px;
                 align-items:center; }
  .hist button { background:#182634; color:#cfe2f2; border:1px solid #2b3f52;
                  border-radius:5px; cursor:pointer; font-size:10px; padding:1px 5px; }
  .hist figure.latest img { border-color:#16a34a; }
  /* S8: judge the card at the size a feed shows it, not only full screen. */
  .sizerow { display:flex; gap:6px; align-items:center; }
  .sizerow button { flex:1 1 auto; }
  #histhead { font-size:11px; letter-spacing:.08em; text-transform:uppercase;
               color:#7b8ea1; margin:14px 0 0; }
  input[type=range] { width:100%; }
  .row { display:flex; gap:10px; align-items:center; }
  #apply { background:#16a34a; color:#fff; border:none; border-radius:8px; padding:10px 18px;
            font-size:14px; font-weight:600; cursor:pointer; }
  #apply:disabled { background:#155e2d; cursor:wait; }
  #cancel { background:#182634; color:#cfe2f2; border:1px solid #2b3f52;
            border-radius:8px; padding:10px 12px; font-size:13px; cursor:pointer; }
  #cancel[hidden] { display:none; }
  #status { font-size:12px; color:#7b8ea1; }
  /* S5: the unsaved draft, offered back on open. */
  .draft { display:none; gap:8px; align-items:center; background:#241c10;
            border:1px solid #5c4620; border-radius:8px; padding:7px 9px;
            font-size:12px; color:#fbbf24; }
  .draft.show { display:flex; }
  .draft button { background:#182634; color:#cfe2f2; border:1px solid #2b3f52;
                   border-radius:6px; cursor:pointer; font-size:11px; padding:2px 7px; }
  :focus-visible { outline:2px solid #7dd3fc; outline-offset:2px; }
  .result { margin-top:14px; display:none; }
  /* The applied card is proof, not the working surface: capped so the history
     filmstrip stays reachable without a long scroll. */
  .result img { width:auto; max-width:100%; max-height:320px; border-radius:8px;
                 border:1px solid #243444; display:block; }
  .btn { display:inline-block; background:#182634; color:#cfe2f2; border:1px solid #2b3f52;
          border-radius:8px; padding:7px 12px; text-decoration:none; font-size:13px;
          margin-top:8px; }