/* ─── knoll / lab ──────────────────────────────────────────────────────────
   A workbench page for features that aren't ready. Same paper, ink and pink
   as the coming-soon page; gizmos are absolutely positioned inside #bench and
   moved around by lab.js.

   Everything below is drawn out of the token sheet in :root. The values here
   ARE the knoll look — cream paper, aubergine ink, pink. themes.css re-points
   the same tokens to dress the bench as a different genre of game; nothing in
   this file knows or cares which theme is on. If a colour is worth a genre
   having an opinion about, it belongs up here rather than inline below. */

:root{
  /* ── the paper and the ink ───────────────────────────────────────────── */
  --paper:#faf7f9; --paper-2:#f1e7ee; --card:#fdfbfd;
  --ink:#26212a; --ink-2:#2e2636; --ink-3:#3d3346;
  --mute:#8b7f92; --mute-2:#bcaebf; --line:#e2d4df;
  --pink:#c93b82; --pink-2:#ef4d98; --pink-soft:#f9d3e6;
  --blue:#5871f5; --green:#2fae76; --amber:#f59321;

  /* ── type ────────────────────────────────────────────────────────────── */
  --display:'Sora',sans-serif;              /* plates, headings, names       */
  --body:'Public Sans',sans-serif;          /* everything else               */
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  /* ── surfaces sitting on the paper ───────────────────────────────────── */
  --field:#fff;                             /* cards, inputs, buttons        */
  --field-2:#fffdfe;                        /* a softer sheet than a card    */
  --card-2:#f6eef2;                         /* a second card tone            */
  --tint:#fff4f9;                           /* accent-washed hover           */
  --tint-2:#fff7fb;                         /* the same, a shade cooler      */
  --chip:#faf5f8;                           /* little secondary buttons, kbd */
  --trough:#efe6ec;                         /* the empty half of a bar       */
  --desk-a:#fdfbfd; --desk-b:#f6eff4;       /* the diagonal-stripe desk mats */
  --ring:#e9dde6;                           /* behind a big round button     */
  --off:#d8cdd5;                            /* a lamp that is not lit        */
  --hard-edge:#0f0c12;                      /* the heavy black on machines   */
  --strip-bg:rgba(253,251,253,.85);         /* the role strip over the bench */
  --screen-bg:#2a2330; --screen-deep:#17121c;   /* the little lit screens    */
  --board:#efdcc0; --board-line:#a97e50;    /* the bug farm's notice board   */
  --wall:#f6ede4; --wall-line:#efe4d8; --wall-sill:#e6d8c7;  /* museum walls */
  --tank:#eef7f1;                           /* the vivarium glass           */
  --book-a:#e2d2ab;                         /* the law book's cover          */

  /* verdicts and notices — the same three washes wherever they turn up */
  --green-soft:#dff5ea; --red-soft:#fde3e1; --amber-soft:#fff7e8;
  --red-soft-2:#f6d2d2;                     /* the against half of a tally   */
  --amber-ink:#a4761a;
  --parchment:#fdf6e3; --parchment-line:#d8c59a;   /* the law book pages     */
  /* the sticky pad. Four colours and the underside of the fold — a sticky has
     to be a paper THIS skin's ink reads on, so these flip with the paper the
     way --parchment does rather than staying lemon on a black bench. */
  --sticky-a:#ffe27a; --sticky-b:#ffb3c9; --sticky-c:#a9d7f2; --sticky-d:#c2e6a2;
  --sticky-edge:rgba(0,0,0,.15);
  /* the terminal's case: putty plastic, sun-yellowed down one side */
  --crt-shell:#e6dfd0; --crt-shell-2:#cfc5b2; --crt-vent:#b3a894; --crt-ink:#5b5245;

  /* ── the bench: the sheet of paper and the table it lies on ──────────── */
  --bench-bg:#efe7ed;                       /* outside the sheet             */
  --bench-dot:rgba(38,33,42,.06);           /* the table's dot grid          */
  --sheet-dot:#e8dee5;                      /* the sheet's dot grid          */
  --drop-rgb:38,33,42;                      /* what every soft shadow is of  */

  /* ── the gizmo chassis ───────────────────────────────────────────────── */
  --gz-radius:22px; --gz-radius-in:20px;    /* the case, then its handle bar */
  --gz-face:#fdfbfd; --gz-face-2:#f4ecf1;   /* the case's top-to-bottom wash */
  --gz-sheen:#fff;                          /* the lit lip inside the case   */
  --gz-handle-bg:#2e2636; --gz-handle-ink:#fff;
  --grip:#4a3f54;                           /* the ribbed bit you drag by    */
  --plate-bg:#f6f0f4; --plate-ink:#26212a;  /* the engraved name plate       */
  --plate-line:#c9bcc6; --plate-shade:#d9ccd5;
  --serial-ink:#bdb0c2;
  --rivet-hi:#fff; --rivet-lo:#b8abb7; --rivet-line:#8f8296;
  --min-bg:#3a3143; --min-line:#5a4d64; --min-ink:#cfc2d4;   /* the – button */

  /* ── the world the gizmos are about ──────────────────────────────────── */
  --sky-a:#eaf3ff; --sky-b:#f7fbff;         /* behind the hill               */
  --timber:#f3e6d8;                         /* the workshop shed             */
  --gn-boot:#4a3524; --gn-coat:#3d55c9;     /* the help gnome, head to toe   */
  --gn-skin:#f6cdb0; --gn-nose:#eeb896; --gn-beard:#fff;
  --gn-hat:#d93b4a; --gn-brim:#b02f3c;
}

*{box-sizing:border-box}
[hidden]{display:none!important}   /* the hidden attribute must beat any author display */
html,body{margin:0;padding:0;height:100%}
/* the page itself never scrolls — the header sits on top, the bench fills the
   rest and the camera in lab.js moves the sheet inside it */
body{background:var(--paper);font-family:var(--body);color:var(--ink);
  height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:none}
a{color:var(--pink)}a:hover{color:#a52c68}
::selection{background:var(--pink-soft)}
button,input{font-family:inherit}

/* header */
.lab-head{display:flex;align-items:center;gap:22px;padding:14px 22px;border-bottom:1.5px dashed var(--line);background:var(--card);flex-wrap:wrap;
  flex:none;position:relative;z-index:20;max-height:42vh;overflow:auto}
.lab-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-0.01em}
.lab-brand img{display:block}
.lab-slash{color:var(--mute-2);font-weight:600;margin:0 -2px}
.lab-name{color:var(--pink)}
.lab-hint{margin:0;flex:1 1 320px;font-size:13px;color:var(--mute);line-height:1.5;text-wrap:pretty}
.lab-tools{display:flex;gap:14px;align-items:center}
.lab-link{background:none;border:0;padding:0;font-size:12.5px;font-weight:600;color:var(--pink);cursor:pointer;text-decoration:none}
.lab-link:hover{color:#a52c68;text-decoration:underline}

/* role switcher: a segmented control, one colour per role */
.role-switch{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--ink-2);border-radius:10px;background:var(--field);padding:3px;box-shadow:0 2px 0 var(--ink-2)}
.role-switch-label{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2);padding:0 8px 0 6px}
.role-switch button{border:0;background:none;border-radius:7px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--mute);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .12s,color .12s}
.role-switch button i{font-style:normal;font-family:var(--mono);font-size:9.5px;color:var(--mute-2);border:1px solid var(--line);border-radius:3px;padding:0 4px;line-height:1.5}
.role-switch button:hover{color:var(--ink)}
.role-switch button[aria-selected="true"]{color:#fff}
.role-switch button[aria-selected="true"] i{color:#fff;border-color:rgba(255,255,255,.45)}
.role-switch button[data-role-btn="user"][aria-selected="true"]{background:var(--blue)}
.role-switch button[data-role-btn="moderator"][aria-selected="true"]{background:var(--amber)}
.role-switch button[data-role-btn="owner"][aria-selected="true"]{background:var(--pink)}

.role-strip{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:6px 22px;font-size:12px;color:var(--mute);
  background:var(--strip-bg);border-bottom:1.5px dashed var(--line);z-index:1;pointer-events:none}
.role-badge{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:999px;background:var(--blue)}
body[data-role="moderator"] .role-badge{background:var(--amber)}
body[data-role="owner"] .role-badge{background:var(--pink)}

/* the bench is the viewport — a fixed window onto an endless canvas, and its
   grid IS the paper now: there is no sheet laid on top of it, just squares
   that carry on for ever. lab.js keeps --gs (one cell, in screen pixels) and
   --gx/--gy (where world 0,0 has got to) in step with the camera, so the grid
   pans and zooms with the work sitting on it instead of holding still like
   wallpaper — and because the cells are world units, they can be drawn in.
   Nothing here scrolls; the camera moves. */
.bench{position:relative;flex:1 1 auto;min-height:0;background:var(--bench-bg);cursor:default;
  background-image:radial-gradient(var(--bench-dot) 1px,transparent 1px);
  background-size:var(--gs,20px) var(--gs,20px);background-position:var(--gx,0) var(--gy,0);
  overflow:hidden;overflow:clip}
/* no will-change here on purpose — lab.js puts it on while the camera moves and
   takes it off when it stops, because a permanently composited sheet is only
   ever rasterised once and goes soft the moment you zoom into it */
/* the world is the frame the gizmos hang in and the thing the camera moves.
   It is deliberately NOT painted: it used to be a sheet of paper with an edge
   and a drop shadow, which read as one big box sitting on the bench. The grid
   below shows through it instead, so the canvas has no edges. */
.bench-world{position:absolute;left:0;top:0;transform-origin:0 0;cursor:grab}
.bench-world .gz{cursor:auto}

/* the hand: space held, or the H tool. Panning grabs the whole window. */
body.lab-hand .bench,body.lab-hand .bench *{cursor:grab!important}
body.lab-panning,body.lab-panning .bench,body.lab-panning .bench *{cursor:grabbing!important}
body.lab-panning{user-select:none;-webkit-user-select:none}
body.lab-panning .bench-world{pointer-events:none}
/* PIXEL MODE — the grid stops being a texture and becomes the cells you fill,
   so the skins whose bench is dotted rule themselves into squares while it is
   on. The ones that already draw lines (adventure, shooter) beat this on
   specificity and keep their own. */
body.wall-pixel .bench{background-image:
  linear-gradient(var(--bench-dot) 1px,transparent 1px),
  linear-gradient(90deg,var(--bench-dot) 1px,transparent 1px)}

/* ─── gizmo chassis ─────────────────────────────────────────────────────── */
.gz{position:absolute;left:0;top:0;width:min(780px,calc(100vw - 20px));border-radius:var(--gz-radius);
  background:linear-gradient(180deg,var(--gz-face) 0%,var(--gz-face-2) 100%);border:2px solid var(--ink-2);
  box-shadow:0 26px 50px -22px rgba(var(--drop-rgb),.5),0 2px 0 var(--gz-sheen) inset;user-select:none;
  transition:box-shadow .18s}
.gz.dragging{box-shadow:0 38px 70px -24px rgba(var(--drop-rgb),.6),0 2px 0 var(--gz-sheen) inset;transition:none}
.gz.dragging .gz-handle{cursor:grabbing}

.gz-handle{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;border-radius:var(--gz-radius-in) var(--gz-radius-in) 0 0;
  background:var(--gz-handle-bg);color:var(--gz-handle-ink);cursor:grab;touch-action:none;border-bottom:2px solid var(--ink)}
.gz-grip{flex:1;height:14px;border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--grip) 0 3px,transparent 3px 7px);opacity:.9}
.gz-plate{font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.16em;white-space:nowrap;
  background:var(--plate-bg);color:var(--plate-ink);padding:4px 12px;border-radius:6px;border:1px solid var(--plate-line);box-shadow:inset 0 -2px 0 var(--plate-shade)}
.gz-plate b{color:var(--pink)}
.gz-serial{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--serial-ink);white-space:nowrap}

.gz-body{display:grid;grid-template-columns:196px 1fr 224px;gap:18px;padding:16px 18px 14px;position:relative}
/* rivets */
.gz-body::before,.gz-body::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--rivet-hi),var(--rivet-lo) 70%);border:1px solid var(--rivet-line);top:8px}
.gz-body::before{left:8px}.gz-body::after{right:8px}
.gz-feet{display:flex;justify-content:space-between;padding:0 34px;height:10px;margin-top:-1px}
.gz-feet span{width:56px;height:10px;background:var(--gz-handle-bg);border-radius:0 0 8px 8px}

.gz-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.gz-label{font-size:10.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2);display:flex;align-items:center;gap:8px}
.gz-label i{font-style:normal;font-family:var(--mono);color:var(--pink);background:var(--pink-soft);padding:1px 6px;border-radius:4px}
.gz-label::after{content:"";flex:1;height:1px;background:var(--line)}
.gz-fine{margin:2px 0 0;font-size:10.5px;color:var(--mute-2);line-height:1.4}

.gz-btn{border:1.5px solid var(--ink-2);background:var(--field);color:var(--ink);border-radius:8px;font-weight:700;cursor:pointer;
  box-shadow:0 2px 0 var(--ink-2);transition:transform .08s,box-shadow .08s}
.gz-btn:hover:not(:disabled){background:var(--tint)}
.gz-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 var(--ink-2)}
.gz-btn:disabled{opacity:.4;cursor:not-allowed}
.gz-btn-sm{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px}

/* ─── 01 intake ─────────────────────────────────────────────────────────── */
.hopper{position:relative;display:block;height:164px;border:2px dashed #cdbfca;border-radius:14px;background:var(--field);cursor:pointer;
  overflow:hidden;transition:border-color .15s,background .15s}
.hopper:hover,.hopper.over{border-color:var(--pink);background:var(--tint-2)}
.hopper.bad{animation:hopShake .4s;border-color:#d9453f}
@keyframes hopShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.hopper-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mute-2);text-align:center;padding:0 10px}
.hopper:hover .hopper-empty{color:var(--pink)}
.hopper-empty strong{font-size:12.5px;color:var(--ink);margin-top:4px}
.hopper-empty span{font-size:11px}
.hopper-full{position:absolute;inset:0}
.hopper-full img{width:100%;height:100%;object-fit:cover;display:block}
.hopper-tag{position:absolute;left:8px;top:8px;background:var(--ink-2);color:#fff;font-size:9px;font-weight:800;letter-spacing:.16em;padding:3px 7px;border-radius:4px}
.hopper-slot{position:absolute;left:14px;right:14px;bottom:0;height:6px;background:var(--ink-2);border-radius:3px 3px 0 0;opacity:.85}
.intake-row{display:flex;gap:8px}
.intake-row .gz-btn{flex:1}

.readout{margin:0;padding:10px 12px;border-radius:10px;background:var(--screen-bg);color:#d8f5e6;font-family:var(--mono);font-size:11px;
  display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 0 0 1px #463b4d,inset 0 0 18px rgba(0,0,0,.5)}
.readout div{display:flex;justify-content:space-between;gap:10px}
.readout dt{color:#8e7f96;letter-spacing:.1em}
.readout dd{margin:0;color:#9ff0c4;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.readout .readout-status{color:#ffd1e6}

/* ─── 02 analysis ────────────────────────────────────────────────────────── */
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gauge{margin:0;background:var(--field);border:1.5px solid var(--ink-2);border-radius:10px;padding:6px 4px 4px;text-align:center;box-shadow:inset 0 -3px 0 #eadfe6}
.gauge svg{display:block;width:100%;height:auto}
.gauge-arc{fill:none;stroke:#e6d9e2;stroke-width:6;stroke-linecap:round}
.gauge-ticks line{stroke:var(--ink-2);stroke-width:1.5}
.gauge-needle{stroke:var(--pink);stroke-width:2.5;stroke-linecap:round;transform-origin:40px 44px;transform:rotate(-82deg);
  transition:transform 1.1s cubic-bezier(.2,.9,.2,1.15)}
.gauge-pin{fill:var(--ink-2)}
.gauge figcaption{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute);margin-top:2px}

.leds{display:grid;grid-template-columns:repeat(4,auto 1fr);align-items:center;gap:4px 6px;padding:8px 10px;background:var(--field);border:1.5px solid var(--ink-2);border-radius:10px}
.leds small{font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--mute-2)}
.led{width:11px;height:11px;border-radius:50%;background:var(--off);border:1px solid #a99bab;box-shadow:inset 0 1px 2px rgba(0,0,0,.25);transition:background .2s,box-shadow .2s}
.led-green.on{background:#3fd18f;box-shadow:0 0 8px #3fd18f,inset 0 1px 2px rgba(0,0,0,.15)}
.led-amber.on{background:#ffb23d;box-shadow:0 0 8px #ffb23d,inset 0 1px 2px rgba(0,0,0,.15)}
.led-pink.on{background:#ff5aa8;box-shadow:0 0 8px #ff5aa8,inset 0 1px 2px rgba(0,0,0,.15)}
.led-blue.on{background:#6c86ff;box-shadow:0 0 8px #6c86ff,inset 0 1px 2px rgba(0,0,0,.15)}
.led.blink{animation:ledBlink .32s steps(1) infinite}
@keyframes ledBlink{50%{background:var(--off);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}}

.forge-well{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 0 8px;
  border-radius:14px;background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 11px,var(--desk-b) 11px,var(--desk-b) 22px);border:1.5px dashed var(--line)}
.forge-btn{width:112px;height:112px;border-radius:50%;border:0;cursor:pointer;position:relative;padding:0;
  background:radial-gradient(circle at 40% 32%,#ff8cc3,var(--pink-2) 55%,#c93b82 100%);
  box-shadow:0 8px 0 #8f2a5d,0 14px 24px -8px rgba(201,59,130,.6),inset 0 2px 2px rgba(255,255,255,.6);
  transition:transform .07s,box-shadow .07s,filter .2s}
.forge-btn::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--ink-2);z-index:-1;background:var(--ring)}
.forge-btn span{font-family:var(--display);font-weight:800;letter-spacing:.2em;font-size:15px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.forge-btn:hover:not(:disabled){filter:brightness(1.06)}
.forge-btn:active:not(:disabled),.forge-btn.pressed{transform:translateY(7px);box-shadow:0 1px 0 #8f2a5d,0 4px 8px -4px rgba(201,59,130,.6),inset 0 2px 2px rgba(255,255,255,.6)}
.forge-btn:disabled{filter:grayscale(.8) brightness(1.05);cursor:not-allowed;opacity:.7}
.forge-sub{font-size:10.5px;color:var(--mute-2);text-align:center;max-width:180px;line-height:1.4}
/* under the big button: put it all back, or shake the bench. Same chip as the
   warp row's own buttons, because they do the same kind of job */
.forge-well-row{display:flex;gap:6px}
.forge-well-row button{border:1px solid var(--line);background:var(--chip);color:var(--mute);border-radius:5px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:4px 10px;cursor:pointer}
.forge-well-row button:hover{border-color:var(--pink);color:var(--pink)}

.odometer{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:8px;background:var(--field);border:1.5px solid var(--ink-2)}
.odometer span{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2)}
.odometer b{font-family:var(--mono);font-size:13px;letter-spacing:.2em;background:var(--screen-bg);color:#fff;padding:2px 8px;border-radius:4px;box-shadow:inset 0 0 8px rgba(0,0,0,.6)}

/* DETAIL: grid resolution, a three-way switch */
.detail{display:flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:8px;background:var(--field);border:1.5px solid var(--ink-2)}
.detail span{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2);flex:1}
.detail button{border:1px solid var(--line);background:var(--chip);color:var(--mute);border-radius:5px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 7px;cursor:pointer}
.detail button[aria-pressed="true"]{background:var(--ink-2);color:#9ff0c4;border-color:var(--ink-2);box-shadow:inset 0 0 6px rgba(0,0,0,.5)}

/* ─── 03 output ─────────────────────────────────────────────────────────── */
.screen{position:relative;aspect-ratio:170/220;max-height:280px;border-radius:12px;border:3px solid var(--ink-2);background:var(--screen-deep);overflow:hidden;
  box-shadow:inset 0 0 34px rgba(0,0,0,.7),0 0 0 3px #d9ccd5}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.screen-glass{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(0,0,0,.45) 100%)}
.screen-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--mono);font-size:13px;letter-spacing:.22em;line-height:1.7;color:#6fe2a4;text-shadow:0 0 8px rgba(111,226,164,.8)}
.screen-idle .cursor{animation:cursorBlink 1s steps(1) infinite}
@keyframes cursorBlink{50%{opacity:0}}
.screen.lit{box-shadow:inset 0 0 34px rgba(0,0,0,.7),0 0 0 3px #d9ccd5,0 0 22px rgba(111,226,164,.25)}

.nameplate{background:var(--field);border:1.5px solid var(--ink-2);border-radius:10px;padding:10px 12px 10px;animation:platePop .35s cubic-bezier(.2,.9,.2,1.2)}
@keyframes platePop{0%{transform:translateY(6px);opacity:0}100%{transform:none;opacity:1}}
.nameplate h3{margin:0;font-family:var(--display);font-size:15px;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance}
.name-row{display:flex;align-items:center;gap:4px}
.name-in{flex:1;min-width:0;margin:-3px -6px;padding:3px 6px;border:1.5px solid transparent;border-radius:7px;background:transparent;
  font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;letter-spacing:-0.01em;color:var(--ink);
  text-overflow:ellipsis;cursor:text}
.name-in::placeholder{color:var(--mute-2);font-weight:600}
.nameplate:hover .name-in{border-color:var(--line)}
.name-in:hover{border-color:var(--mute-2)!important;background:var(--card)}
.name-in:focus{outline:none;border-color:var(--pink)!important;background:var(--field);box-shadow:0 0 0 3px var(--pink-soft)}
#name-roll{flex:none;border:1px solid var(--line);background:var(--chip);color:var(--mute-2);border-radius:6px;
  width:22px;height:22px;line-height:1;font-size:13px;cursor:pointer;padding:0}
#name-roll:hover{border-color:var(--pink);color:var(--pink)}
#name-roll:active{transform:translateY(1px)}
.nameplate p{margin:4px 0 8px;font-size:11px;color:var(--mute);line-height:1.45}
.stats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.stats li{display:grid;grid-template-columns:44px 1fr 30px;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--mute-2)}
.stats i{display:block;height:7px;border-radius:4px;background:var(--trough);overflow:hidden;border:1px solid #e2d4df}
.stats b{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--pink-2),var(--blue));transition:width .9s cubic-bezier(.2,.9,.2,1)}
.stats em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink);text-align:right}
.out-row{display:flex;gap:8px;margin-top:10px}
.out-row .gz-btn{flex:1}

/* ─── narrow screens: columns stack, the gizmo hugs the viewport ─────────── */
@media (max-width:720px){
  .lab-head{gap:10px 16px}
  .gz-body{grid-template-columns:1fr}
  .gz-serial{display:none}
  .gz-plate{font-size:11px;letter-spacing:.12em}
  .screen{max-height:none;max-width:260px}
}

/* ─── shared: hill canvases, small action buttons, cards ────────────────── */
.hill{border:2px solid var(--ink-2);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,var(--sky-a),var(--sky-b));box-shadow:0 2px 0 var(--ink-2)}
.hill canvas{display:block;width:100%;height:auto;cursor:crosshair}
.shed{border:2px solid var(--ink-2);border-radius:12px;overflow:hidden;background:var(--timber);box-shadow:0 2px 0 var(--ink-2)}
.shed canvas{display:block;width:100%;height:auto;cursor:crosshair}
.hill-cap{margin:-2px 0 0;font-size:11px;color:var(--mute);line-height:1.4;min-height:15px;font-style:italic}
.pb-act{border:1px solid var(--line);background:var(--field);color:var(--mute);border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;cursor:pointer}
.pb-act:hover{border-color:var(--pink);color:var(--pink)}
.pb-act.ok{border-color:var(--green);color:var(--green)}
.pb-mod{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);align-items:center}
.pb-empty{font-size:12px;color:var(--mute-2);padding:10px 4px;list-style:none;font-style:italic}

/* ─── 02 the petition board ───────────────────────────────────────────── */
.gz-petition{width:min(740px,calc(100vw - 20px))}
.pb-body{grid-template-columns:1fr 300px}
.pb-loop{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-2)}
.pb-loop i{font-style:normal;color:#d5c8d2}
.pb-loop span{padding:2px 7px;border-radius:999px;border:1px solid transparent}
.pb-loop span.on{background:var(--pink-soft);color:var(--pink);border-color:#f3b9d6}
.pb-ask{display:flex;gap:8px}
.pb-ask input{flex:1;min-width:0;border:1.5px solid var(--ink-2);border-radius:8px;padding:7px 10px;font-size:13px;background:var(--field);color:var(--ink)}
.pb-ask input:focus{outline:2px solid var(--pink-soft);border-color:var(--pink)}
.pb-review{display:flex;flex-direction:column;gap:5px}
.pb-review:empty{display:none}
.pb-review-h{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--amber)}
.pb-review-h.quiet{color:var(--mute-2)}
.pb-review-item{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:8px;background:var(--amber-soft);border:1.5px dashed var(--amber);font-size:12px}
.pb-review-item span{flex:1;min-width:0}
.pb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:430px;overflow-y:auto;padding-right:2px}
.pb-card{background:var(--field);border:1.5px solid var(--ink-2);border-radius:10px;padding:9px 11px;box-shadow:0 2px 0 var(--ink-2);position:relative}
.pb-card::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--pink-2);border:1.5px solid var(--ink-2);transform:translateX(-50%)}
.pb-card[data-status="passed"]{border-color:var(--green);box-shadow:0 2px 0 var(--green)}
.pb-card[data-status="failed"],.pb-card[data-status="drained"]{opacity:.7}
.pb-card[data-status="removed"]{opacity:.5;border-style:dashed}
.pb-card[data-status="pending"]{border-style:dashed;border-color:var(--amber)}
.pb-card-top{display:flex;gap:8px;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.pb-num{font-family:var(--mono);color:var(--pink)}
.pb-kind{color:var(--mute-2)}
.pb-status{margin-left:auto;padding:1px 6px;border-radius:4px;background:var(--chip)}
.pb-card[data-status="passed"] .pb-status{background:var(--green-soft);color:#1d7a52}
.pb-card[data-status="open"] .pb-status{background:var(--pink-soft);color:var(--pink)}
.pb-qtext{margin:5px 0 7px;font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.3;text-wrap:pretty}
.pb-qtext small{font-family:var(--body);font-weight:500;color:var(--mute);font-size:11px}
.pb-tally{position:relative;height:8px;border-radius:4px;background:var(--red-soft-2);overflow:visible;border:1px solid var(--line)}
.pb-tally i{display:block;height:100%;border-radius:4px 0 0 4px;background:var(--green);transition:width .5s}
.pb-tally.empty{background:var(--trough)}.pb-tally.empty i{opacity:0}
.pb-tally b{position:absolute;top:-4px;width:2px;height:14px;background:var(--ink-2);transform:translateX(-1px)}
.pb-row{display:flex;align-items:center;gap:6px;margin-top:8px}
.pb-vote{border:1.5px solid var(--ink-2);background:var(--field);border-radius:7px;padding:4px 9px;font-size:11px;font-weight:800;letter-spacing:.08em;cursor:pointer;box-shadow:0 2px 0 var(--ink-2)}
.pb-vote b{font-family:var(--mono);font-weight:700;margin-left:3px}
.pb-vote.yes{color:#1d7a52}.pb-vote.no{color:#b3362f}
.pb-vote.mine.yes{background:var(--green-soft)}.pb-vote.mine.no{background:var(--red-soft)}
.pb-vote:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.pb-vote:disabled{opacity:.45;cursor:default;box-shadow:none}
.pb-line{margin-left:auto;font-size:10.5px;color:var(--mute);font-style:italic;text-align:right}
.lawbook{margin:0;padding:10px 12px;background:var(--parchment);border:1.5px solid var(--parchment-line);border-radius:10px;list-style:none;font-size:11.5px;line-height:1.45;max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #e8dcbb}
.lawbook li b{font-family:var(--display);color:var(--ink)}
.lawbook li span{color:var(--mute)}
.lawbook li.repealed{text-decoration:line-through;opacity:.6}
.pb-desk{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 11px,var(--desk-b) 11px,var(--desk-b) 22px);border:1.5px dashed var(--line)}
.pb-range{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--mute)}
.pb-range input{flex:1;accent-color:var(--pink)}
.pb-range b{font-family:var(--mono);font-size:11px;color:var(--ink);white-space:nowrap}
.pb-check{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mute);font-weight:600}
.pb-check input{accent-color:var(--pink)}

/* ─── 03 the workshop shed ────────────────────────────────────────────── */
.gz-shed{width:min(760px,calc(100vw - 20px))}
.sh-body{grid-template-columns:390px 1fr}
.sh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto;padding-right:2px}
.sh-card{background:var(--field);border:1.5px solid var(--ink-2);border-radius:10px;padding:9px 11px;box-shadow:0 2px 0 var(--ink-2)}
.sh-card[data-stage="tarp"]{background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 8px,var(--desk-b) 8px,var(--desk-b) 16px);border-style:dashed}
.sh-card[data-stage="shipped"]{border-color:var(--green);box-shadow:0 2px 0 var(--green)}
.sh-card-top{display:flex;gap:8px;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.sh-peek{margin-left:auto;color:var(--amber)}
.sh-title{margin:4px 0 6px;font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.3}
.sh-card[data-stage="tarp"] .sh-title{color:var(--mute)}
.sh-bar{height:7px;border-radius:4px;background:var(--trough);border:1px solid var(--line);overflow:hidden}
.sh-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .3s}
.sh-vague{display:block;margin-top:4px;font-size:10.5px;color:var(--mute);font-style:italic}
.sh-slider{display:block;flex-basis:100%}
.sh-slider input{width:100%;accent-color:var(--pink)}
.sh-note{width:100%;margin-top:6px;border:1px dashed var(--amber);border-radius:6px;background:var(--amber-soft);font-size:11px;padding:4px 6px;resize:vertical;min-height:24px;color:var(--ink);font-family:inherit}
.sh-notep{margin:6px 0 0;font-size:11px;color:#9a6a1a;background:var(--amber-soft);border-radius:6px;padding:4px 6px}

@media (max-width:720px){
  .pb-body,.sh-body{grid-template-columns:1fr}
  .pb-list,.sh-list{max-height:none}
}

/* ─── 04 warp bench ─────────────────────────────────────────── */
.gz-warp{grid-column:1/-1;display:flex;flex-direction:column;gap:9px;margin-top:2px;padding-top:12px;border-top:1.5px dashed var(--line)}
.warp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:8px 14px}
.warp-set{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 10px;border-radius:8px;background:var(--field);
  border:1.5px solid var(--ink-2);cursor:ew-resize}
.warp-set>span{width:56px;flex:none;font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--mute-2)}
.warp-set input{flex:1;min-width:0;margin:0;accent-color:var(--mute-2);cursor:ew-resize}
.warp-set b{width:30px;flex:none;text-align:right;font-family:var(--mono);font-size:10px;color:var(--mute-2)}
.warp-set.on{border-color:var(--pink);box-shadow:inset 0 -3px 0 var(--pink-soft)}
.warp-set.on>span{color:var(--pink)}
.warp-set.on input{accent-color:var(--pink)}
.warp-set.on b{color:var(--ink)}
.warp-row{display:flex;align-items:center;gap:10px}
.warp-row .gz-fine{flex:1;margin:0}
.warp-row button{border:1px solid var(--line);background:var(--chip);color:var(--mute);border-radius:5px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:4px 9px;cursor:pointer}
.warp-row button:hover{border-color:var(--pink);color:var(--pink)}

/* gauges are grabbable dials */
.gauge{cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none}
.gauge:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.gauge:hover .gauge-arc{stroke:#f0dae7}
.gauge.set{border-color:var(--pink);box-shadow:inset 0 -3px 0 var(--pink-soft)}
.gauge.set .gauge-needle{stroke:var(--blue)}
.gauge.set figcaption{color:var(--pink)}
.gauge figcaption{font-variant-numeric:tabular-nums}
.dial-note{display:flex;align-items:center;gap:8px;margin-top:-4px}
.dial-note span{flex:1;font-size:10px;color:var(--mute-2);line-height:1.35}
.dial-note button{border:1px solid var(--line);background:var(--chip);color:var(--mute);border-radius:5px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:3px 7px;cursor:pointer}
.dial-note button:hover{border-color:var(--pink);color:var(--pink)}

/* ─── the help gnome ──────────────────────────────────────────────────────
   Stands in the bottom-right corner of every gizmo looking baffled. Click him
   for a speech bubble on what the thing does. */
.gnome-help{position:absolute;right:6px;bottom:-14px;z-index:20}
.gnome-btn{border:0;background:none;padding:0;cursor:pointer;display:block;line-height:0;
  filter:drop-shadow(0 6px 8px rgba(var(--drop-rgb),.28))}
.gnome-art{display:block;overflow:visible;transform-origin:50% 100%;transition:transform .18s}
.gnome-btn:hover .gnome-art,.gnome-btn:focus-visible .gnome-art{transform:translateY(-2px) rotate(-4deg)}
.gnome-btn:focus-visible{outline:none}
.gnome-btn:focus-visible .gnome-art{filter:drop-shadow(0 0 0 var(--pink))}
.gn-boot{fill:var(--gn-boot)}
.gn-coat{fill:var(--gn-coat);stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round}
.gn-belt{fill:var(--gn-boot)}
.gn-skin{fill:var(--gn-skin);stroke:var(--ink-2);stroke-width:2}
.gn-beard{fill:var(--gn-beard);stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round}
.gn-nose{fill:var(--gn-nose);stroke:var(--ink-2);stroke-width:1.6}
.gn-eye{fill:var(--ink)}
.gn-brow{stroke:var(--ink);stroke-width:2;stroke-linecap:round;fill:none}
.gn-hat{fill:var(--gn-hat);stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round}
.gn-brim{fill:var(--gn-brim);stroke:var(--ink-2);stroke-width:2}
.gn-arm{stroke:var(--gn-skin);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.gnome-head{transform:rotate(-7deg);transform-origin:32px 50px}
.gnome-marks text{font-family:var(--display);font-weight:800;fill:var(--pink)}
.gnome-q1{font-size:16px}
.gnome-q2{font-size:10px;opacity:.7}
.gnome-marks{animation:gnomeWonder 2.6s ease-in-out infinite}
@keyframes gnomeWonder{0%,100%{transform:translateY(0);opacity:.95}50%{transform:translateY(-3px);opacity:.55}}
.gnome-help.open .gnome-marks{animation:none;opacity:0}

.gnome-say{position:absolute;right:-4px;bottom:74px;width:min(346px,80vw);max-height:min(64vh,520px);overflow-y:auto;
  background:var(--field);border:2px solid var(--ink-2);border-radius:16px;padding:12px 14px 13px;user-select:text;cursor:auto;
  box-shadow:0 22px 44px -18px rgba(var(--drop-rgb),.55);animation:gnomePop .16s ease-out}
@keyframes gnomePop{from{transform:translateY(6px) scale(.97);opacity:0}}
.gnome-say::after{content:"";position:absolute;right:26px;bottom:-9px;width:14px;height:14px;background:var(--field);
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);border-radius:0 0 3px 0}
.gnome-say-top{display:flex;align-items:center;gap:8px}
.gnome-say-top b{flex:1;font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2)}
.gnome-x{border:0;background:none;color:var(--mute-2);font-size:17px;line-height:1;cursor:pointer;padding:0 2px}
.gnome-x:hover{color:var(--pink)}
.gnome-say h4{margin:4px 0 5px;font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.01em}
.gnome-lead{margin:0 0 9px;font-size:12px;line-height:1.5;color:var(--ink-3)}
.gnome-lead em{color:var(--pink);font-style:normal;font-weight:700}
.gnome-steps{margin:0;display:flex;flex-direction:column;gap:7px}
.gnome-steps>div{display:grid;grid-template-columns:76px 1fr;gap:8px;align-items:start}
.gnome-steps dt{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pink);background:var(--pink-soft);border-radius:4px;padding:3px 5px;text-align:center}
.gnome-steps dd{margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.gnome-steps dd b{color:var(--ink);font-weight:700}
.gnome-tip{margin:10px 0 0;padding-top:8px;border-top:1.5px dashed var(--line);font-size:11px;line-height:1.45;color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  .gnome-marks{animation:none}
  .gnome-say{animation:none}
}

/* ─── the bin ─────────────────────────────────────────────────────────────
   Sits at the foot of the intake column. Drag one of the loose critters onto
   it and the lid flies open; press it to send the whole bench in. */
.bin{margin-top:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:10px 8px 9px;border:2px dashed #cdbfca;border-radius:14px;background:var(--field);cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s}
.bin:hover,.bin:focus-visible{border-color:var(--pink);background:var(--tint-2);outline:none}
.bin.over{border-color:var(--pink);border-style:solid;background:#fff2f8;box-shadow:0 0 0 4px var(--pink-soft)}
.bin-stage{position:relative;display:grid;place-items:center}
.bin-can{display:block;overflow:visible;transform-origin:50% 92%}
.bin.chomp .bin-can{animation:binShake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes binShake{
  0%,100%{transform:translateX(0) rotate(0)}
  15%{transform:translateX(-3px) rotate(-5deg)}
  35%{transform:translateX(3px) rotate(5deg)}
  55%{transform:translateX(-2px) rotate(-3deg)}
  78%{transform:translateX(2px) rotate(2deg)}
}
.bin-body{fill:#e9dfe8;stroke:var(--ink-2);stroke-width:2.5;stroke-linejoin:round}
.bin-lid{fill:#d8ccd8;stroke:var(--ink-2);stroke-width:2.5;stroke-linejoin:round;
  transform-origin:8px 20px;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.bin-knob{fill:#d8ccd8}
.bin.over .bin-lid,.bin:hover .bin-lid{transform:translateY(-5px) rotate(-24deg)}
.bin.chomp .bin-lid{animation:binFlap .55s ease-out}
@keyframes binFlap{
  0%{transform:translateY(-9px) rotate(-38deg)}
  55%{transform:translateY(-2px) rotate(6deg)}
  100%{transform:none}
}
.bin-ribs line{stroke:#c3b4c4;stroke-width:2;stroke-linecap:round}
.bin.over .bin-body{fill:#f7dcec}
.bin-puff{position:absolute;left:50%;top:38%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  border:3px solid var(--pink);opacity:0;pointer-events:none}
.bin.chomp .bin-puff{animation:binPuff .55s ease-out}
@keyframes binPuff{0%{transform:scale(.25);opacity:.85}100%{transform:scale(1.9);opacity:0}}
.bin-cap{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.bin-cap b{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2)}
.bin:hover .bin-cap b,.bin.over .bin-cap b{color:var(--pink)}
.bin-cap span{font-size:10.5px;color:var(--mute-2);line-height:1.3}
.bin.used .bin-cap span{font-family:var(--mono);font-size:9.5px;color:var(--mute)}

/* ─── loose on the bench ─────────────────────────────────────────────────── */
.critter-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4000}
.critter{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;transition:opacity .5s}
.critter.gone{opacity:0}
/* the fx sleeve: no size of its own, so it changes nothing until something
   is animated on it. The sprite keeps its own centring transform inside. */
.critter-fx{position:absolute;left:0;bottom:0;width:0;height:0}
.critter-art{position:absolute;left:50%;bottom:0;transform:translateX(-50%);transform-origin:50% 100%;
  display:block;image-rendering:pixelated;image-rendering:crisp-edges;
  pointer-events:auto;touch-action:none;cursor:grab}
.critter.held .critter-art{cursor:grabbing;filter:drop-shadow(0 8px 10px rgba(var(--drop-rgb),.35))}
.critter-shadow{position:absolute;left:50%;bottom:-3px;height:7px;margin-left:0;transform:translateX(-50%);
  border-radius:50%;background:rgba(46,38,54,.2);filter:blur(1.5px)}
.critter-tag{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:var(--ink-2);padding:2px 7px;border-radius:999px;opacity:0;transition:opacity .3s}
.critter-tag.show{opacity:.94}
.critter-tag b{font-weight:400;opacity:.65}

@media (max-width:720px){
  .warp-grid{grid-template-columns:1fr}
}

/* ─── the shelf: minimized gizmos go back on it ──────────────────────────── */
.shelf{position:fixed;left:14px;top:76px;z-index:5500;width:198px;max-height:calc(100vh - 160px);
  display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink-2);border-radius:14px;
  box-shadow:0 2px 0 var(--ink-2),0 18px 36px -18px rgba(var(--drop-rgb),.45)}
.shelf-top{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-bottom:1.5px dashed var(--line)}
.shelf-top b{flex:1;font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2)}
#shelf-fold{border:0;background:none;color:var(--mute-2);font-size:15px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
#shelf-fold:hover{color:var(--pink);background:var(--pink-soft)}
.shelf-list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.shelf-list button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;border-radius:8px;
  padding:6px 8px;font-size:12px;font-weight:600;color:var(--ink-3);cursor:pointer;text-align:left}
.shelf-list button:hover{background:var(--tint);color:var(--pink)}
.shelf-list span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shelf-list small{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--mute-2)}
.shelf-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 5px rgba(47,174,118,.6)}
.shelf-list li.away .shelf-dot{background:var(--off);box-shadow:none}
.shelf-list li.away button{color:var(--mute)}
.shelf-list li.away span{font-style:italic}
.shelf-fine{margin:0;padding:7px 12px 9px;border-top:1.5px dashed var(--line);font-size:10px;color:var(--mute-2);line-height:1.4}
.shelf-tab{position:fixed;left:0;top:96px;z-index:5500;border:2px solid var(--ink-2);border-left:0;border-radius:0 10px 10px 0;
  background:var(--card);color:var(--mute);font-size:9px;font-weight:800;letter-spacing:.18em;padding:10px 7px;cursor:pointer;
  writing-mode:vertical-rl;text-orientation:mixed;box-shadow:0 2px 0 var(--ink-2)}
.shelf-tab:hover{color:var(--pink);background:var(--tint)}

/* the – on every handle, and the coming / going of a shelved gizmo */
.gz-min{flex:none;width:22px;height:22px;border:1px solid var(--min-line);border-radius:6px;background:var(--min-bg);color:var(--min-ink);
  font-size:15px;line-height:1;font-weight:700;cursor:pointer;padding:0}
.gz-min:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.gz.shelved{display:none}
.gz.going{transform:scale(.92);opacity:0;transition:transform .18s ease-in,opacity .18s ease-in;pointer-events:none}
.gz.coming{animation:gzComing .26s cubic-bezier(.2,.9,.2,1.2)}
@keyframes gzComing{0%{transform:scale(.92);opacity:0}100%{transform:none;opacity:1}}
.gz.ping{animation:gzPing .9s ease-out}
@keyframes gzPing{0%,60%{box-shadow:0 0 0 4px var(--pink-soft),0 26px 50px -22px rgba(var(--drop-rgb),.5)}100%{box-shadow:0 26px 50px -22px rgba(var(--drop-rgb),.5)}}

/* ─── the zoom dock ──────────────────────────────────────────────────────── */
.zoom-dock{position:fixed;right:16px;bottom:16px;z-index:6000;display:flex;align-items:center;gap:2px;padding:4px;
  background:var(--card);border:2px solid var(--ink-2);border-radius:12px;box-shadow:0 2px 0 var(--ink-2),0 14px 30px -14px rgba(var(--drop-rgb),.4)}
.zoom-dock button{border:0;background:none;border-radius:8px;cursor:pointer;color:var(--ink)}
#zoom-in,#zoom-out{width:28px;height:28px;font-size:16px;font-weight:700;line-height:1}
#zoom-in:hover,#zoom-out:hover{background:var(--pink-soft);color:var(--pink)}
#zoom-val{font-family:var(--mono);font-size:11px;min-width:46px;height:28px;color:var(--mute);font-weight:700}
#zoom-val:hover{color:var(--pink)}
#zoom-fit,#zoom-keys{width:28px;height:28px;font-size:13px;font-weight:700;line-height:1;color:var(--mute)}
#zoom-fit:hover,#zoom-keys:hover,#zoom-keys[aria-expanded="true"]{background:var(--pink-soft);color:var(--pink)}
.zoom-dock .dock-rule{width:1px;height:18px;background:var(--line);margin:0 3px}

/* the keymap card — how to move about, on a ? */
.keymap{position:fixed;right:16px;bottom:62px;z-index:6000;width:266px;padding:10px 12px 11px;
  background:var(--card);border:2px solid var(--ink-2);border-radius:12px;
  box-shadow:0 2px 0 var(--ink-2),0 18px 36px -18px rgba(var(--drop-rgb),.5)}
.keymap b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2);margin-bottom:7px}
.keymap dl{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:0;align-items:baseline}
.keymap dt{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.keymap dd{margin:0;font-size:11.5px;color:var(--mute);line-height:1.35}
.keymap kbd{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);
  background:var(--chip);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;white-space:nowrap}
.keymap hr{border:0;border-top:1.5px dashed var(--line);margin:9px 0}

/* ─── the SIZE knob (character forge) ────────────────────────────────────── */
.size-set{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 10px;border-radius:8px;background:var(--field);
  border:1.5px solid var(--ink-2);cursor:ew-resize}
.size-set>span{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--mute-2)}
.size-set input{flex:1;min-width:0;margin:0;accent-color:var(--mute-2);cursor:ew-resize}
.size-set b{width:38px;flex:none;text-align:right;font-family:var(--mono);font-size:10px;color:var(--mute-2)}
.size-set.on{border-color:var(--pink);box-shadow:inset 0 -3px 0 var(--pink-soft)}
.size-set.on>span{color:var(--pink)}
.size-set.on input{accent-color:var(--pink)}
.size-set.on b{color:var(--ink)}

/* ─── the drawing pad ────────────────────────────────────────────────────── */
.pad{display:flex;flex-direction:column;gap:6px}
.pad-canvas{display:block;width:100%;max-width:190px;border:2px solid var(--ink-2);border-radius:10px;background:#fff;
  cursor:crosshair;touch-action:none;box-shadow:0 2px 0 var(--ink-2)}
.pad-tools{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.pad-ink{width:19px;height:19px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;padding:0}
.pad-ink[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink-2)}
.pad-rubber{background:var(--field);position:relative}
.pad-rubber::after{content:"";position:absolute;inset:4px;border-radius:2px;background:#f6cdb0;border:1px solid var(--mute-2)}
.pad-wipe{margin-left:auto;border:1px solid var(--line);background:var(--chip);color:var(--mute);border-radius:5px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:3px 8px;cursor:pointer}
.pad-wipe:hover{border-color:var(--pink);color:var(--pink)}

@media (max-width:900px){
  .shelf{width:172px;max-height:min(50vh,380px)}
}

/* ─── 04 the museum ─────────────────────────────────────────────────────── */
.gz-museum{width:min(760px,calc(100vw - 20px))}
.mu-body{grid-template-columns:1fr 280px}
.mu-cycle-n{font-family:var(--mono);font-weight:700;letter-spacing:.08em;color:var(--mute)}
/* the easels */
.mu-easels{list-style:none;margin:0;padding:2px 2px 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px 10px;max-height:330px;overflow-y:auto}
.mu-easels .pb-empty{grid-column:1/-1}
.mu-easel{background:var(--field);border:1.5px solid var(--ink-2);border-radius:10px;padding:9px 9px 8px;box-shadow:0 2px 0 var(--ink-2);display:flex;flex-direction:column;gap:3px;min-width:0}
.mu-art{position:relative;margin:0 auto 15px;width:86%}
.mu-art img{position:relative;z-index:1;display:block;width:100%;border:2px solid var(--ink-2);border-radius:3px;background:#fff}
.mu-easel:nth-child(odd) .mu-art img{transform:rotate(-1.1deg)}
.mu-art::before{content:"";position:absolute;left:-6%;right:-6%;bottom:-5px;height:5px;background:#b98a5a;border:1.5px solid #7a4a22;border-radius:2px;z-index:2}
.mu-art::after{content:"";position:absolute;left:50%;bottom:-15px;width:66px;height:14px;transform:translateX(-50%);z-index:0;
  background:linear-gradient(72deg,transparent calc(50% - 2px),#7a4a22 calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px)),
             linear-gradient(-72deg,transparent calc(50% - 2px),#7a4a22 calc(50% - 2px) calc(50% + 2px),transparent calc(50% + 2px))}
.mu-title{margin:0;font-family:var(--display);font-weight:700;font-size:12px;line-height:1.25;text-wrap:balance}
.mu-sig{margin:0;font-size:10.5px;color:var(--mute);font-style:italic}
.mu-row{display:flex;align-items:center;margin-top:auto;padding-top:5px}
.mu-vote{border:1.5px solid var(--ink-2);background:var(--field);color:var(--mute);border-radius:7px;padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:.06em;cursor:pointer;box-shadow:0 2px 0 var(--ink-2)}
.mu-vote b{font-family:var(--mono);font-weight:700;margin-left:4px;color:var(--ink)}
.mu-vote:hover{border-color:var(--pink);color:var(--pink)}
.mu-vote.mine{background:var(--pink-soft);color:var(--pink);border-color:var(--pink)}
.mu-vote:active{transform:translateY(2px);box-shadow:none}
/* cycle close: the chosen and the fading */
.mu-easel.mu-chosen{border-color:var(--pink);box-shadow:0 2px 0 var(--pink),0 0 0 4px var(--pink-soft)}
.mu-easel.mu-fading{animation:muFade 1.2s ease forwards;pointer-events:none}
@keyframes muFade{55%{opacity:.55;filter:grayscale(.6)}100%{opacity:0;transform:translateY(10px) scale(.94);filter:grayscale(1)}}
/* submit */
.mu-submit{display:flex;gap:12px;align-items:flex-start}
.mu-pad-host{flex:none;width:150px}
.mu-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.mu-fields input{border:1.5px solid var(--ink-2);border-radius:8px;padding:7px 10px;font-size:13px;background:var(--field);color:var(--ink);min-width:0}
.mu-fields input:focus{outline:2px solid var(--pink-soft);border-color:var(--pink)}
.mu-shake{animation:muShake .4s}
@keyframes muShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.mu-status{margin:2px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--mute);min-height:14px}
/* the wall */
.mu-wall{border:2px solid var(--ink-2);border-radius:12px;box-shadow:0 2px 0 var(--ink-2),inset 0 -9px 0 var(--wall-sill);
  background:repeating-linear-gradient(90deg,var(--wall) 0 26px,var(--wall-line) 26px 27px);
  padding:16px 12px 18px;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;align-content:start;min-height:130px;max-height:430px;overflow-y:auto}
.mu-wall .pb-empty{grid-column:1/-1}
.mu-frame{margin:0;position:relative;background:linear-gradient(135deg,#caa25c,#b98a4b 60%,#a8793c);border:2px solid var(--ink-2);border-radius:3px;padding:6px 6px 5px;box-shadow:0 2px 0 var(--ink-2)}
.mu-frame::before{content:"";position:absolute;left:50%;top:-7px;width:5px;height:5px;border-radius:50%;background:#8f8296;border:1px solid var(--ink-2);transform:translateX(-50%)}
.mu-glass{position:relative;border:2px solid #7a5a26;box-shadow:inset 0 0 0 2px #e2c684;background:var(--field-2)}
.mu-glass img{display:block;width:100%;height:auto}
.mu-glass::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.5),rgba(255,255,255,0) 42%),linear-gradient(295deg,rgba(255,255,255,.2),transparent 28%)}
.mu-plaque{margin:6px auto 0;max-width:100%;width:max-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.03em;color:#4a3524;
  background:linear-gradient(180deg,#f0d48e,#cfa657);border:1px solid #8a6a2a;border-radius:2px;padding:1px 6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.mu-frame.mu-swing{animation:muSwing .8s cubic-bezier(.2,.9,.2,1.2);transform-origin:50% -7px}
@keyframes muSwing{0%{opacity:0;transform:translateY(-12px) rotate(-4deg)}55%{opacity:1;transform:rotate(2.2deg)}80%{transform:rotate(-1deg)}100%{transform:none}}
.mu-fallen{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--mute-2)}
/* owner's desk */
.mu-desk{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;border:1.5px dashed var(--line);
  background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 11px,var(--desk-b) 11px,var(--desk-b) 22px)}
.mu-desk-row{display:flex;gap:8px}
.mu-desk-row .gz-btn{flex:1}
@media (max-width:720px){
  .mu-body{grid-template-columns:1fr}
  .mu-easels,.mu-wall{max-height:none}
  .mu-submit{flex-wrap:wrap}
}

/* ─── 05 the naming ceremony ──────────────────────────────────────────── */
.gz-naming{width:min(700px,calc(100vw - 20px))}
.nm-body{grid-template-columns:1fr 248px}
.nm-banner{border:1.5px solid var(--pink);border-radius:10px;background:var(--field);box-shadow:0 2px 0 var(--pink);padding:7px 12px;text-align:center}
.nm-banner b{display:block;font-size:8.5px;font-weight:800;letter-spacing:.22em;color:var(--mute-2)}
.nm-banner span{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--pink);text-wrap:balance}
.nm-banner.pop{animation:nmPop .45s cubic-bezier(.2,.9,.2,1.25)}
@keyframes nmPop{0%{transform:scale(.82);opacity:0}55%{transform:scale(1.05)}100%{transform:none;opacity:1}}
.nm-list{list-style:none;margin:0;padding:0 2px 0 0;display:flex;flex-direction:column;gap:8px;max-height:330px;overflow-y:auto}
.nm-card{background:var(--field);border:1.5px solid var(--ink-2);border-radius:10px;padding:9px 11px;box-shadow:0 2px 0 var(--ink-2)}
.nm-card-top{display:flex;gap:8px;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.nm-kind{font-family:var(--mono);color:var(--pink)}
.nm-need{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute);font-style:italic;text-align:right}
.nm-what{margin:4px 0 0;font-family:var(--display);font-weight:700;font-size:13px;line-height:1.3;text-wrap:pretty}
.nm-props{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.nm-prop{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.nm-vote{border:1.5px solid var(--ink-2);background:var(--field);color:var(--ink);border-radius:7px;padding:3px 8px;font-size:10px;font-weight:800;letter-spacing:.08em;cursor:pointer;box-shadow:0 2px 0 var(--ink-2)}
.nm-vote b{font-family:var(--mono);font-weight:700;margin-left:4px;color:var(--pink)}
.nm-vote.mine{background:var(--pink-soft);border-color:var(--pink);color:var(--pink)}
.nm-vote:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.nm-vote:disabled{opacity:.4;cursor:default;box-shadow:none}
.nm-pname{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm-prop.struck .nm-pname{text-decoration:line-through;color:var(--mute-2)}
.nm-struckby{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--mute-2);border:1px dashed var(--mute-2);border-radius:4px;padding:1px 5px}
.nm-none{margin:7px 0 0;font-size:11px;color:var(--mute-2);font-style:italic}
.nm-put{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.nm-put input{font-size:12.5px}
.nm-more{font-size:11px;color:var(--mute-2);font-style:italic;padding:2px 4px}
.nm-register{list-style:none;margin:0;padding:0 2px 0 0;display:flex;flex-direction:column;gap:6px;max-height:330px;overflow-y:auto}
.nm-register li{background:var(--field);border:1.5px solid var(--line);border-radius:8px;padding:6px 9px;font-size:11px;line-height:1.45;color:var(--mute)}
.nm-register li b{font-family:var(--display);font-size:12.5px;color:var(--ink)}
.nm-register li.pb-empty{border:0;background:none;box-shadow:none}
.nm-desk{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 11px,var(--desk-b) 11px,var(--desk-b) 22px);border:1.5px dashed var(--line)}
.nm-desk-row{display:flex;gap:8px}
.nm-desk-row .gz-btn{flex:1}
@media (max-width:720px){
  .nm-body{grid-template-columns:1fr}
  .nm-list,.nm-register{max-height:none}
}

/* ─── 06 the elections ──────────────────────────────────────────────────── */
.gz-elections{width:min(640px,calc(100vw - 20px))}
.el-body{grid-template-columns:248px 1fr}
.el-portrait{border:2px solid var(--ink-2);border-radius:12px;background:linear-gradient(180deg,var(--field) 0%,var(--tint) 100%);
  box-shadow:0 2px 0 var(--ink-2);padding:10px 8px 4px;display:grid;place-items:center}
.el-portrait svg{display:block;width:100%;max-width:176px;height:auto}
.el-plaque{background:var(--field);border:1.5px solid var(--ink-2);border-radius:10px;padding:9px 11px;box-shadow:0 2px 0 var(--ink-2)}
.el-mname{margin:0;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.25;text-wrap:balance}
.el-mslogan{margin:3px 0 0;font-size:11.5px;color:var(--mute);font-style:italic;line-height:1.4}
.el-mwon{margin:7px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mute-2)}
.el-mext{margin:7px 0 0;font-size:10.5px;line-height:1.4;color:#9a6a1a;background:var(--amber-soft);border:1px dashed var(--amber);border-radius:6px;padding:3px 7px}
.el-vacant{margin:0;font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink-3)}
.el-term{display:flex;flex-direction:column;gap:5px}
.el-term-top{display:flex;align-items:center;justify-content:space-between}
.el-term-top span{font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2)}
.el-term-top b{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink)}
.el-term-bar{height:7px;border-radius:4px;background:var(--trough);border:1px solid var(--line);overflow:hidden}
.el-term-bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--pink-2),var(--blue));transition:width .5s}
.el-list{list-style:none;margin:0;padding:0 2px 0 0;display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}
.el-card{background:var(--field);border:1.5px solid var(--ink-2);border-radius:10px;padding:9px 11px;box-shadow:0 2px 0 var(--ink-2)}
.el-card.struck{opacity:.55;border-style:dashed;box-shadow:none}
.el-card.struck .el-cname,.el-card.struck .el-cslogan{text-decoration:line-through}
.el-card-top{display:flex;gap:8px;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.el-cnum{font-family:var(--mono);color:var(--pink)}
.el-you{background:var(--pink-soft);color:var(--pink);padding:1px 6px;border-radius:4px}
.el-cross{margin-left:auto;background:var(--red-soft);color:#b3362f;padding:1px 6px;border-radius:4px}
.el-cname{margin:5px 0 1px;font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.3}
.el-cslogan{margin:0;font-size:11px;color:var(--mute);font-style:italic;line-height:1.4}
.el-cslogan i{color:var(--mute-2)}
.el-crow{display:flex;align-items:center;gap:6px;margin-top:8px}
.el-vote{border:1.5px solid var(--ink-2);background:var(--field);color:var(--pink);border-radius:7px;padding:4px 9px;font-size:11px;font-weight:800;letter-spacing:.08em;cursor:pointer;box-shadow:0 2px 0 var(--ink-2)}
.el-vote b{font-family:var(--mono);font-weight:700;margin-left:3px;color:var(--ink)}
.el-vote.mine{background:var(--pink-soft)}
.el-vote:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.el-vote:disabled{opacity:.45;cursor:default;box-shadow:none}
.el-stand{display:flex;flex-direction:column;gap:6px}
.el-stand input{border:1.5px solid var(--ink-2);border-radius:8px;padding:7px 10px;font-size:13px;background:var(--field);color:var(--ink)}
.el-stand input:focus{outline:2px solid var(--pink-soft);border-color:var(--pink)}
.el-stand .gz-btn{align-self:flex-start}
.el-standing{margin:0;padding:8px 11px;border:1.5px dashed var(--pink);border-radius:10px;background:var(--tint-2);font-size:12px;font-weight:600;color:var(--pink)}
.el-desk{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;
  background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 11px,var(--desk-b) 11px,var(--desk-b) 22px);border:1.5px dashed var(--line)}
.el-desk-row{display:flex;flex-wrap:wrap;gap:6px}
.el-desk-row .gz-btn{flex:1;white-space:nowrap}

/* the wanderer: the sitting mayor, loose on the bench */
.el-mayor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform}   /* under the gizmos (they start at 10): the mayor walks the paper, never over the controls */
.el-mayor-flip{display:block}
.el-mayor.flip .el-mayor-flip{transform:scaleX(-1)}
.el-mayor svg{display:block;pointer-events:auto;cursor:help;transform-origin:50% 100%;filter:drop-shadow(0 4px 5px rgba(var(--drop-rgb),.28))}
.el-mayor.walking svg{animation:elWaddle .46s ease-in-out infinite alternate}
@keyframes elWaddle{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.el-mayor-tag{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;
  font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:var(--ink-2);padding:2px 7px;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none}
.el-mayor-tag.show{opacity:.94}

@media (max-width:720px){
  .el-body{grid-template-columns:1fr}
  .el-list{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .el-mayor.walking svg{animation:none}
}

/* ─── 07 the law book ───────────────────────────────────────────────────── */
.gz-lawbook{width:min(700px,calc(100vw - 20px))}
.lb-body{grid-template-columns:1fr}
.lb-book{display:grid;grid-template-columns:1fr 20px 1fr;align-items:stretch;padding:12px 14px 15px;border-radius:14px;
  border:2px solid var(--ink-2);background:linear-gradient(180deg,var(--book-a),var(--parchment-line));box-shadow:0 2px 0 var(--ink-2)}
.lb-page{min-width:0;display:flex;flex-direction:column;gap:8px;background:var(--parchment);border:1.5px solid var(--parchment-line);padding:12px 13px 11px;
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #e8dcbb,0 2px 0 var(--parchment-line),0 4px 0 -2px #cbb98d}
.lb-page-left{border-radius:12px 3px 3px 12px}
.lb-page-right{border-radius:3px 12px 12px 3px}
.lb-spine{position:relative;background:linear-gradient(90deg,#cbb98d,#b9a67a 50%,#cbb98d)}
.lb-spine::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:2px;transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,#8a7748 0 7px,transparent 7px 14px)}   /* the stitches */
.lb-ph{margin:0;font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.12em;font-variant:small-caps;
  color:#8a7748;text-align:center;border-bottom:1.5px solid #e8dcbb;padding-bottom:6px}
.lb-scroll{max-height:420px;min-height:60px;overflow-y:auto;padding-right:4px}
.lb-preamble{margin:0 0 10px;font-style:italic;font-size:11.5px;line-height:1.55;color:#6b5a35;text-wrap:pretty}
.lb-art{margin:0 0 9px;font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.lb-art b{font-family:var(--display);font-size:11px;color:var(--ink)}
.lb-carried{color:#8a7748}
.lb-clause{color:#8a7748}
.lb-repealed .lb-arttext{text-decoration:line-through;text-decoration-color:#b3362f;opacity:.62}
.lb-rep{font-family:var(--display);font-size:10px;letter-spacing:.08em;color:#b3362f;white-space:nowrap}
.lb-log-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.lb-log{display:grid;grid-template-columns:14px 1fr auto;gap:7px;align-items:start;font-size:11px;line-height:1.5;color:var(--ink-3);
  border-bottom:1px dashed #ecdfb9;padding-bottom:6px}
.lb-log i{font-style:normal;font-family:var(--mono);font-weight:700;text-align:center}
.lb-log-carried i{color:var(--green)}
.lb-log-repealed i{color:#b3362f}
.lb-log-shipped i{color:var(--blue)}
.lb-log span b{font-family:var(--display);font-size:10.5px;color:var(--ink)}
.lb-when{font-family:var(--mono);font-size:9.5px;color:#a08e5f;white-space:nowrap;padding-top:1px}
/* the foot of the left page: where the wax lands */
.lb-sealfoot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;border-top:1.5px dashed #e8dcbb;min-height:36px}
.lb-sealfoot:empty{display:none}
.lb-blob{position:relative;flex:none;width:38px;height:38px;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 30%,#e8626f,#c8303f 55%,#8f2430 100%);
  border-radius:47% 53% 44% 56% / 55% 46% 54% 45%;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.35),inset 0 -3px 4px rgba(0,0,0,.3),0 1px 0 #cbb98d}
.lb-blob::after{content:"";position:absolute;right:-5px;bottom:4px;width:10px;height:10px;background:#a02534;
  border-radius:60% 40% 55% 45% / 50% 60% 40% 50%}   /* a drip that got away */
.lb-blob b{font-family:var(--display);font-weight:800;font-size:13px;color:#7d1d2a;text-shadow:0 1px 0 rgba(255,255,255,.28)}
.lb-squish{animation:lbSquish .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes lbSquish{0%{transform:scale(1.7,.45)}45%{transform:scale(.8,1.2)}70%{transform:scale(1.12,.92)}100%{transform:scale(1,1)}}
.lb-sealed-cap{font-size:10.5px;font-style:italic;color:#8a7748;line-height:1.35}
/* the owner's desk: one red button */
.lb-desk{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.lb-seal-row{display:flex;align-items:center;gap:16px;padding:12px 14px;border-radius:12px;
  background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 11px,var(--desk-b) 11px,var(--desk-b) 22px);border:1.5px dashed var(--line)}
.lb-seal{position:relative;flex:none;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:radial-gradient(circle at 38% 30%,#e8626f,#d93b4a 55%,#a02534 100%);
  box-shadow:0 5px 0 #7d1d2a,0 10px 16px -8px rgba(160,37,52,.55),inset 0 2px 2px rgba(255,255,255,.4);
  transition:transform .07s,box-shadow .07s,filter .2s}
.lb-seal::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:2.5px solid var(--ink-2);z-index:-1;background:var(--ring)}
.lb-seal span{font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.2em;color:#ffd9dd;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.lb-seal:hover{filter:brightness(1.06)}
.lb-seal:active{transform:translateY(4px);box-shadow:0 1px 0 #7d1d2a,0 4px 8px -4px rgba(160,37,52,.55),inset 0 2px 2px rgba(255,255,255,.4)}
.lb-seal-row .gz-fine{margin:0}

@media (max-width:720px){
  .lb-book{grid-template-columns:1fr;gap:10px}
  .lb-spine{display:none}
  .lb-page-left,.lb-page-right{border-radius:10px}
  .lb-scroll{max-height:260px}
}
@media (prefers-reduced-motion:reduce){
  .lb-squish{animation:none}
}

/* ─── 08 the monument ─────────────────────────────────────────────────── */
.gz-monument{width:min(640px,calc(100vw - 20px))}
.mo-body{grid-template-columns:316px 1fr}
.mo-yard{border:2px solid var(--ink-2);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,var(--sky-a),var(--sky-b));box-shadow:0 2px 0 var(--ink-2)}
.mo-yard canvas{display:block;width:100%;height:auto;cursor:crosshair}
.mo-bar{height:16px;border:1.5px solid var(--ink-2);border-radius:8px;background:var(--trough);overflow:hidden;box-shadow:inset 0 1px 3px rgba(46,38,54,.18)}
.mo-bar i{display:block;height:100%;width:0;border-radius:6px 0 0 6px;
  background:repeating-linear-gradient(90deg,#c98a4b 0 13px,#b97c3f 13px 15px,#d19556 15px 28px,#b97c3f 28px 30px);
  box-shadow:inset 0 -3px 0 rgba(122,74,34,.35);transition:width .45s cubic-bezier(.2,.9,.2,1)}
.mo-count{margin:-2px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--mute)}
.mo-crew{display:flex;flex-direction:column;gap:8px}
.mo-crew input{border:1.5px solid var(--ink-2);border-radius:8px;padding:7px 10px;font-size:13px;background:var(--field);color:var(--ink)}
.mo-crew input:focus{outline:2px solid var(--pink-soft);border-color:var(--pink)}
.mo-crew input:disabled{opacity:.5}
.mo-btn{border:0;border-radius:12px;padding:12px 10px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;cursor:pointer;
  background:radial-gradient(circle at 38% 28%,#ff8cc3,var(--pink-2) 60%,var(--pink) 100%);
  box-shadow:0 5px 0 #8f2a5d,0 10px 18px -8px rgba(201,59,130,.55),inset 0 2px 2px rgba(255,255,255,.5);
  transition:transform .07s,box-shadow .07s,filter .15s;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.mo-btn:hover:not(:disabled){filter:brightness(1.06)}
.mo-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #8f2a5d,inset 0 2px 2px rgba(255,255,255,.5)}
.mo-btn:disabled{filter:grayscale(.75) brightness(1.03);opacity:.7;cursor:not-allowed;box-shadow:0 2px 0 #8f8296}
.mo-shift{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--mute);min-height:13px}
.mo-safety{display:flex;flex-direction:column;gap:8px}
.mo-safety .pb-act{align-self:flex-start}
.mo-desk{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;
  background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 11px,var(--desk-b) 11px,var(--desk-b) 22px);border:1.5px dashed var(--line)}
.mo-plaque{position:relative;border:2px solid var(--ink-2);border-radius:10px;padding:12px 18px 10px;text-align:center;
  background:linear-gradient(155deg,#f3d98b 0%,#dfb95e 38%,#c99b3f 62%,#e8c877 100%);
  box-shadow:0 2px 0 var(--ink-2),inset 0 0 0 3px rgba(255,248,220,.55),inset 0 0 18px rgba(122,74,34,.35);
  animation:moUnveil .5s cubic-bezier(.2,.9,.2,1.2)}
@keyframes moUnveil{0%{transform:translateY(8px) scale(.96);opacity:0}100%{transform:none;opacity:1}}
.mo-plaque::before,.mo-plaque::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff6d8,#a97f2e 75%);border:1px solid #7a5a1c}
.mo-plaque::before{left:6px;top:6px}
.mo-plaque::after{right:6px;bottom:6px}
.mo-plaque-top{display:block;font-size:9.5px;font-weight:800;letter-spacing:.22em;color:#5c431a;margin-bottom:6px}
.mo-plaque-names{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px 0;
  font-family:var(--display);font-weight:700;font-size:11.5px;color:#4a3524;text-shadow:0 1px 0 rgba(255,248,220,.6)}
.mo-plaque-names i{font-style:normal;margin:0 6px;color:#8a6a30}
.mo-plaque-names b{font-family:var(--mono);font-weight:700;font-size:10px;color:#6d5122}
.mo-plaque-date{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#5c431a}
@media (max-width:720px){
  .mo-body{grid-template-columns:1fr}
  .mo-yard{max-width:320px}
}

/* ─── 09 the time capsule ───────────────────────────────────────────────── */
.gz-capsule{width:min(690px,calc(100vw - 20px))}
.tc-body{grid-template-columns:340px 1fr}
.tc-dig{border:2px solid var(--ink-2);border-radius:12px;overflow:hidden;background:var(--sky-a);box-shadow:0 2px 0 var(--ink-2)}
.tc-dig canvas{display:block;width:100%;height:auto;cursor:crosshair}
.tc-dig.tc-shaking{animation:tcShake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes tcShake{0%,100%{transform:translate(0,0) rotate(0)}18%{transform:translate(-3px,1px) rotate(-.6deg)}38%{transform:translate(3px,-1px) rotate(.6deg)}58%{transform:translate(-2px,1px) rotate(-.4deg)}80%{transform:translate(2px,0) rotate(.3deg)}}
.tc-dig.tc-plop{animation:tcPlop .5s ease-out}
@keyframes tcPlop{0%{transform:translateY(0)}35%{transform:translateY(3px)}70%{transform:translateY(-1px)}100%{transform:translateY(0)}}
.tc-listen{display:flex;align-items:center;gap:8px}
.tc-rattle{flex:1;min-width:0;font-family:var(--mono);font-size:10.5px;color:var(--mute);min-height:14px}
.tc-form{display:flex;flex-direction:column;gap:8px}
.tc-tabs{display:flex;gap:6px}
.tc-tab{flex:1;border:1.5px solid var(--ink-2);background:var(--field);color:var(--mute);border-radius:8px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;cursor:pointer;box-shadow:0 2px 0 var(--ink-2)}
.tc-tab:hover{color:var(--ink)}
.tc-tab[aria-pressed="true"]{background:var(--pink-soft);color:var(--pink);border-color:var(--pink);box-shadow:0 2px 0 var(--pink)}
.tc-tab:active{transform:translateY(2px);box-shadow:none}
.tc-well{display:flex;flex-direction:column;gap:8px;border:1.5px solid var(--ink-2);border-radius:10px;background:var(--field);padding:10px;box-shadow:0 2px 0 var(--ink-2)}
.tc-note{width:100%;border:1.5px dashed var(--line);border-radius:8px;background:var(--field-2);font-family:inherit;font-size:12.5px;line-height:1.45;padding:7px 9px;min-height:60px;resize:vertical;color:var(--ink)}
.tc-note:focus{outline:2px solid var(--pink-soft);border-color:var(--pink)}
.tc-nope{animation:tcNope .4s}
@keyframes tcNope{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tc-signrow{display:flex;align-items:center;gap:8px}
.tc-signrow span{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--mute-2)}
.tc-signrow input{flex:1;min-width:0;border:1.5px solid var(--ink-2);border-radius:8px;padding:6px 9px;font-size:12px;background:var(--field);color:var(--ink)}
.tc-signrow input:focus{outline:2px solid var(--pink-soft);border-color:var(--pink)}
.tc-lower{display:flex}
.tc-lower .gz-btn{flex:1}
.tc-shut{margin:0;padding:12px;border:1.5px dashed var(--line);border-radius:10px;background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 9px,var(--desk-b) 9px,var(--desk-b) 18px);font-size:12px;color:var(--mute);font-style:italic;line-height:1.5}
.tc-count{margin:2px 0 0;font-family:var(--mono);font-size:11px;color:var(--mute)}
.tc-desk{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:10px;background:repeating-linear-gradient(135deg,var(--desk-a),var(--desk-a) 11px,var(--desk-b) 11px,var(--desk-b) 22px);border:1.5px dashed var(--line)}
.tc-date{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--mute)}
.tc-date span{white-space:nowrap}
.tc-date input{flex:1;min-width:0;border:1.5px solid var(--ink-2);border-radius:8px;padding:5px 8px;font-size:11.5px;font-family:var(--mono);background:var(--field);color:var(--ink)}
.tc-deskrow{display:flex;gap:8px}
.tc-deskrow .gz-btn{flex:1}
.tc-spill{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;margin-top:2px;padding-top:12px;border-top:1.5px dashed var(--line)}
.tc-spill-grid{display:flex;flex-wrap:wrap;gap:14px 12px;align-items:flex-start;padding:4px 2px 6px}
.tc-scrap{position:relative;max-width:230px;margin:0;background:var(--field-2);border:1.5px solid var(--ink-2);border-radius:4px 14px 6px 12px;padding:12px 12px 8px;box-shadow:0 2px 0 var(--ink-2);transform:rotate(-1.2deg)}
.tc-scrap::before{content:"";position:absolute;left:50%;top:-7px;width:34px;height:12px;transform:translateX(-50%) rotate(-2deg);background:rgba(249,211,230,.85);border:1px solid #f3b9d6;border-radius:1px}
.tc-scrap p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-3);white-space:pre-wrap;word-break:break-word}
.tc-frame{margin:0;background:var(--field);border:1.5px solid var(--ink-2);border-radius:6px;padding:7px 7px 5px;box-shadow:0 2px 0 var(--ink-2);transform:rotate(1deg)}
.tc-frame img{display:block;width:118px;height:118px;border:1px solid var(--line);border-radius:3px;background:#fff}
.tc-spill-grid>*:nth-child(2n)>*{transform:rotate(1.3deg)}
.tc-spill-grid>*:nth-child(3n)>*{transform:rotate(-.5deg)}
.tc-by{display:block;margin-top:6px;font-size:10px;color:var(--mute);font-style:italic;text-align:right}
.tc-form[hidden],.tc-listen[hidden],.tc-desk[hidden],.tc-spill[hidden]{display:none}
@media (max-width:720px){
  .tc-body{grid-template-columns:1fr}
}


/* ═══ DRESS IT UP ═════════════════════════════════════════════════════════
   Click anything somebody made and pick one of five animations and one of
   five effects. The animation rides the STAGE (the [data-fx] element, which
   must have no transform of its own); the effect rides the SKIN (its first
   child), because both want the `animation` property and one element only
   has the one. See fx.js. */

[data-fx]{cursor:pointer}
[data-fx]:not(.critter-fx):hover{outline:1.5px dashed var(--pink-2);outline-offset:4px;border-radius:3px}

/* ─── the five animations ─────────────────────────────────────────────── */

/* bob — hangs about, breathing */
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.fx-a-bob{animation:fxBob 2.7s ease-in-out infinite}

/* hop — crouch, spring, squash on the landing */
@keyframes fxHop{
  0%,54%,100%{transform:translateY(0) scale(1,1)}
  60%{transform:translateY(0) scale(1.15,.85)}
  72%{transform:translateY(-19px) scale(.9,1.13)}
  84%{transform:translateY(0) scale(1.12,.88)}
  92%{transform:translateY(0) scale(.97,1.03)}
}
.fx-a-hop{animation:fxHop 2s cubic-bezier(.3,0,.35,1) infinite;transform-origin:50% 100%}

/* wobble — rocks on its base, never quite goes over */
@keyframes fxWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-5.5deg)}75%{transform:rotate(5.5deg)}}
.fx-a-wobble{animation:fxWobble 2.3s ease-in-out infinite;transform-origin:50% 100%}

/* shimmer — the hand-drawn boil: stepped, so it snaps between drawings
   instead of sliding, the way a thing traced four times does */
@keyframes fxShimmer{
  0%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(.9px,-.8px) rotate(.5deg)}
  40%{transform:translate(-.8px,.7px) rotate(-.55deg)}
  60%{transform:translate(.7px,.9px) rotate(.35deg)}
  80%{transform:translate(-.6px,-.5px) rotate(-.4deg)}
  100%{transform:translate(0,0) rotate(0)}
}
.fx-a-shimmer{animation:fxShimmer .48s steps(1,end) infinite}

/* spin — a slow turntable, edge-on halfway round */
@keyframes fxSpin{0%,56%{transform:perspective(520px) rotateY(0)}100%{transform:perspective(520px) rotateY(360deg)}}
.fx-a-spin{animation:fxSpin 3.6s cubic-bezier(.45,0,.5,1) infinite;transform-origin:50% 50%}

/* ─── the five effects ────────────────────────────────────────────────── */

/* lantern — a warm halo, and a lit lantern never sits perfectly still */
@keyframes fxLantern{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,186,84,.95)) drop-shadow(0 0 13px rgba(245,147,33,.62)) brightness(1.05)}
  28%{filter:drop-shadow(0 0 6px rgba(255,186,84,1)) drop-shadow(0 0 20px rgba(245,147,33,.74)) brightness(1.13)}
  54%{filter:drop-shadow(0 0 3px rgba(255,186,84,.88)) drop-shadow(0 0 10px rgba(245,147,33,.52)) brightness(.99)}
  76%{filter:drop-shadow(0 0 5px rgba(255,186,84,.97)) drop-shadow(0 0 16px rgba(245,147,33,.68)) brightness(1.09)}
}
.fx-e-lantern{animation:fxLantern 3.2s ease-in-out infinite}

/* ghost — see-through, soft at the edges, slowly breathing */
@keyframes fxGhost{0%,100%{opacity:.42}50%{opacity:.62}}
.fx-e-ghost{filter:blur(.7px) saturate(.5) brightness(1.1);animation:fxGhost 3.8s ease-in-out infinite}

/* neon — pink tube, blue spill, and the occasional bad contact */
@keyframes fxNeon{
  0%,96%,100%{filter:saturate(1.7) contrast(1.12) brightness(1.04)
    drop-shadow(0 0 2px rgba(239,77,152,.95)) drop-shadow(0 0 9px rgba(239,77,152,.7)) drop-shadow(0 0 19px rgba(88,113,245,.55))}
  97%{filter:saturate(1.7) contrast(1.12) brightness(.86)
    drop-shadow(0 0 1px rgba(239,77,152,.5)) drop-shadow(0 0 4px rgba(239,77,152,.3)) drop-shadow(0 0 8px rgba(88,113,245,.2))}
  98.5%{filter:saturate(1.7) contrast(1.12) brightness(1.1)
    drop-shadow(0 0 3px rgba(239,77,152,1)) drop-shadow(0 0 12px rgba(239,77,152,.8)) drop-shadow(0 0 22px rgba(88,113,245,.6))}
}
.fx-e-neon{animation:fxNeon 5.4s steps(200,end) infinite}

/* sticker — six chained shadows build a white die-cut edge, then one soft
   one lifts the whole thing off the paper */
.fx-e-sticker{filter:
  drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
  drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff)
  drop-shadow(0 4px 5px rgba(var(--drop-rgb),.36))}

/* stone — grey, cool, and chiselled at the bottom edge */
.fx-e-stone{filter:grayscale(1) sepia(.16) contrast(.88) brightness(1.07)
  drop-shadow(0 1px 0 rgba(255,255,255,.75)) drop-shadow(0 -1px 0 rgba(var(--drop-rgb),.3)) drop-shadow(0 3px 2px rgba(var(--drop-rgb),.28))}

/* somebody who would rather things held still still gets the effects */
@media (prefers-reduced-motion:reduce){
  .fx-a-bob,.fx-a-hop,.fx-a-wobble,.fx-a-shimmer,.fx-a-spin,.fx-e-lantern,.fx-e-ghost,.fx-e-neon{animation:none}
  .fx-e-lantern{filter:drop-shadow(0 0 5px rgba(255,186,84,.95)) drop-shadow(0 0 16px rgba(245,147,33,.66)) brightness(1.06)}
  .fx-e-ghost{opacity:.5}
  .fx-e-neon{filter:saturate(1.7) contrast(1.12)
    drop-shadow(0 0 2px rgba(239,77,152,.95)) drop-shadow(0 0 9px rgba(239,77,152,.7)) drop-shadow(0 0 19px rgba(88,113,245,.55))}
}

/* ─── the picker card ─────────────────────────────────────────────────── */
/* screen space, not bench space: it stays the same size whatever the camera
   is zoomed to, and follows its creation while the canvas moves under it */
.fx-card{position:fixed;left:0;top:0;z-index:6200;width:252px;padding:9px 11px 11px;
  background:var(--card);border:2px solid var(--ink-2);border-radius:13px;
  box-shadow:0 2px 0 var(--ink-2),0 20px 40px -20px rgba(var(--drop-rgb),.55)}
.fx-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fx-top b{flex:1;font-size:9.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2)}
.fx-x{width:20px;height:20px;flex:none;border:1px solid var(--line);border-radius:6px;background:var(--chip);
  color:var(--mute-2);font-size:13px;line-height:1;cursor:pointer;padding:0}
.fx-x:hover{border-color:var(--pink);color:var(--pink)}
.fx-grp{margin-bottom:9px}
.fx-grp i{display:block;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--mute-2);margin-bottom:5px}
.fx-chips{display:flex;flex-wrap:wrap;gap:4px}
.fx-chip{border:1.5px solid var(--line);background:var(--field);color:var(--mute);border-radius:7px;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.03em;padding:4px 8px;transition:background .12s,color .12s,border-color .12s}
.fx-chip:hover{border-color:var(--pink);color:var(--pink);background:var(--tint)}
.fx-chip[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff}
.fx-off{width:100%;margin-top:2px;border:0;border-top:1.5px dashed var(--line);background:none;cursor:pointer;
  font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--mute-2);padding:8px 0 0}
.fx-off:hover{color:var(--pink)}


/* ─── 10 the bug farm ─────────────────────────────────────────────────────
   Moved out. The farm is a sticker-press machine now — a barn, a fenced
   field and DOM animals — and everything it needs lives in sticker.css
   under KN-0010. The old vivarium, its ledger and its two-faced user
   view were all built around a canvas that no longer exists. */


/* ─── 11 the dispensary ───────────────────────────────────────────────────
   A vending machine that takes time instead of money. */
.gz-vending{width:min(820px,calc(100vw - 20px))}
.vm-body{grid-template-columns:316px 1fr 250px}
.vm-machine{border:2px solid var(--ink-2);border-radius:12px;overflow:hidden;background:var(--card-2);box-shadow:0 2px 0 var(--ink-2)}
.vm-machine canvas{display:block;width:100%;height:auto}
.vm-led{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--mute);text-align:center}
.vm-pull{width:100%;padding:9px 12px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.vm-pull:disabled{opacity:.45}

/* what came out */
.vm-prize{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:12px 10px 13px;
  border:1.5px dashed var(--line);border-radius:12px;background:var(--field-2);min-height:150px;justify-content:center}
.vm-prize.got{border-style:solid;border-color:var(--ink-2);box-shadow:0 2px 0 var(--ink-2)}
.vm-prize.waiting{border-color:var(--pink);background:var(--tint-2)}
.vm-shut{font-size:12px;font-style:italic;color:var(--mute-2)}
.vm-shot{display:block;width:104px;height:104px}
.vm-tier{align-self:center;font-size:8.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  padding:2px 9px;border-radius:999px}
.vm-name{font-family:var(--display);font-size:14px;color:var(--ink)}
.vm-flav{font-size:11px;font-style:italic;color:var(--mute);line-height:1.4;max-width:210px}
.vm-dupe{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--mute-2)}

/* the odds */
.vm-odds-head{margin-top:4px}
.vm-odds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.vm-odds li{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--mute)}
.vm-odds i{flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-2)}
.vm-odds span{flex:1}
.vm-odds b{font-family:var(--mono);font-size:10.5px;color:var(--ink)}
.vm-pity{margin:2px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--pink)}
.vm-peek{margin:0;font-size:11px;font-style:italic;color:var(--amber-ink,#a4761a);background:var(--amber-soft);
  border:1px dashed #e8d3a4;border-radius:7px;padding:5px 8px}

/* the cabinet */
.vm-cabinet{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.vm-slot{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  border:1.5px solid var(--line);border-radius:9px;background:var(--field)}
.vm-slot[data-fx]{border-color:var(--tc,var(--ink-2));box-shadow:inset 0 0 0 2px #fff,0 1px 0 rgba(var(--drop-rgb),.12)}
.vm-slot canvas{display:block;width:100%;height:100%}
.vm-slot.none{background:repeating-linear-gradient(135deg,#faf6f9,#faf6f9 5px,#f3edf3 5px,#f3edf3 10px);border-style:dashed}
.vm-q{font-family:var(--mono);font-size:13px;color:#d3c6d0}
.vm-n{position:absolute;right:2px;bottom:1px;font-family:var(--mono);font-style:normal;font-size:8.5px;font-weight:700;
  color:#fff;background:var(--ink-2);border-radius:4px;padding:0 3px}
.vm-have{margin:2px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--mute-2)}
.vm-desk{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding-top:9px;border-top:1.5px dashed var(--line)}
.vm-modrow{margin-top:2px}

@media (max-width:900px){
  .vm-body{grid-template-columns:1fr}
  .vm-cabinet{grid-template-columns:repeat(8,1fr)}
}


/* ═══ THE NOTE ════════════════════════════════════════════════════════════
   A bubble that hangs off something painted into a canvas. Screen space, so
   it stays the same size whatever the bench is zoomed to. See note.js. */
.note{position:fixed;left:0;top:0;z-index:6300;width:236px;padding:11px 13px 12px;
  background:var(--card);border:2px solid var(--ink-2);border-radius:13px;
  box-shadow:0 2px 0 var(--ink-2),0 20px 40px -20px rgba(var(--drop-rgb),.55)}
.note::after,.note::before{content:"";position:absolute;left:var(--tail,50%);width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;transform:translateX(-9px)}
.note::before{bottom:-13px;border-top:13px solid var(--ink-2)}
.note::after{bottom:-9px;border-top:13px solid var(--card)}
.note.below::before{bottom:auto;top:-13px;border-top:0;border-bottom:13px solid var(--ink-2)}
.note.below::after{bottom:auto;top:-9px;border-top:0;border-bottom:13px solid var(--card)}
.note-x{position:absolute;right:7px;top:6px;width:19px;height:19px;border:1px solid var(--line);border-radius:6px;
  background:var(--chip);color:var(--mute-2);font-size:12px;line-height:1;cursor:pointer;padding:0}
.note-x:hover{border-color:var(--pink);color:var(--pink)}

/* a bug's note */
.bf-note-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.bf-note-top i{flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink-2)}
.bf-note-top span{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.bf-note-what{margin:0 0 5px;font-size:13px;line-height:1.4;color:var(--ink);word-break:break-word;padding-right:14px}
.bf-note-who{margin:0 0 8px;font-size:11px;color:var(--mute-2)}
.bf-note-who b{color:var(--mute);font-weight:700}
.bf-note-size{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:6px 8px;border-radius:8px;background:var(--pink-soft);margin-bottom:8px}
.bf-note-size b{font-family:var(--display);font-size:12px;color:var(--pink)}
.bf-note-size span{font-family:var(--mono);font-size:10px;color:var(--mute)}
.bf-note-dead{margin:0;font-size:11px;font-style:italic;color:var(--mute-2);line-height:1.4}
.bf-note-me{width:100%;border:1.5px solid var(--ink-2);background:var(--field);color:var(--ink);border-radius:9px;
  box-shadow:0 2px 0 var(--ink-2);cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:700;padding:7px 8px}
.bf-note-me:hover{border-color:var(--pink);color:var(--pink);background:var(--tint)}
.bf-note-me.mine{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 2px 0 #a52c68}
.note .pb-mod{margin-top:8px;padding-top:7px}

/* a trinket's note */
.vm-note{width:206px;text-align:center}
.vm-note .vm-tier{display:inline-block;margin-bottom:4px}
.vm-note-shot{display:block;margin:0 auto}
.vm-note .vm-name{display:block;font-family:var(--display);font-size:13.5px;color:var(--ink)}
.vm-note .vm-flav{display:block;font-size:11px;font-style:italic;color:var(--mute);line-height:1.4;margin-top:3px}
.vm-note .vm-dupe{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;color:var(--mute-2)}
.vm-dress{margin-top:9px;border:1.5px solid var(--line);background:var(--field);color:var(--mute);border-radius:8px;
  cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:5px 10px}
.vm-dress:hover{border-color:var(--pink);color:var(--pink);background:var(--tint)}

/* ═══ USER VIEW: the place, not the panel ═════════════════════════════════
   A visitor should meet a fenced farm and a machine, not a workbench with
   ledgers on it. Same markup, different room — the tools are simply not
   there for them, and what is left is arranged as the thing itself. */

/* ── the bug farm's user view moved with it ──
   It no longer HAS two faces: the farm is the farm for everybody, and
   staff simply get a ledger under it. See sticker.css. */

/* ── the dispensary, as a machine you walk up to ── */
body[data-role="user"] .gz-vending{width:min(660px,calc(100vw - 20px))}
body[data-role="user"] .gz-vending .vm-body{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:0;padding:14px;
  background:linear-gradient(180deg,#3a3143,#2b2430);border-radius:16px;border:2px solid var(--ink-2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.09)}
body[data-role="user"] .gz-vending .vm-body::before,
body[data-role="user"] .gz-vending .vm-body::after{display:none}
body[data-role="user"] .gz-vending .vm-col-prize{display:none}
body[data-role="user"] .gz-vending .gz-label{display:none}
body[data-role="user"] .gz-vending .vm-col-machine{gap:8px;padding-right:14px}
body[data-role="user"] .gz-vending .vm-machine{border-color:var(--hard-edge);box-shadow:0 3px 0 var(--hard-edge)}
body[data-role="user"] .gz-vending .vm-led{color:#c9b6c6}
body[data-role="user"] .gz-vending .bf-status{color:#a495a8;text-align:center}
/* the case bolted to its side */
body[data-role="user"] .gz-vending .vm-col-cabinet{gap:7px;padding:11px;border-radius:11px;
  background:#211b27;border:2px solid var(--hard-edge);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body[data-role="user"] .gz-vending .vm-cabinet{grid-template-columns:repeat(4,1fr);gap:6px}
body[data-role="user"] .gz-vending .vm-slot{background:#171220;border-color:#3d3545}
body[data-role="user"] .gz-vending .vm-slot.none{background:repeating-linear-gradient(135deg,#1b1622,#1b1622 5px,#211b28 5px,#211b28 10px)}
body[data-role="user"] .gz-vending .vm-q{color:#4b4257}
body[data-role="user"] .gz-vending .vm-have{color:#a495a8;text-align:center}
body[data-role="user"] .gz-vending .vm-sticker{background:var(--card-2);border-color:var(--hard-edge)}

/* the printed sticker of odds, on both views */
.vm-sticker{margin-top:4px;padding:8px 10px 9px;border:1.5px dashed var(--line);border-radius:9px;background:var(--field-2)}
.vm-sticker>.vm-odds-head{display:block;font-size:8.5px;font-weight:800;letter-spacing:.18em;color:var(--mute-2);margin-bottom:5px}
.vm-printed{margin:5px 0 0;font-size:9.5px;font-style:italic;color:var(--mute-2);line-height:1.35}

@media (max-width:820px){
  body[data-role="user"] .gz-vending .vm-body{grid-template-columns:1fr}
  body[data-role="user"] .gz-vending .vm-col-machine{padding-right:0;padding-bottom:12px}
}


/* ─── 12 the sound desk ───────────────────────────────────────────────────
   Staff only. Six knobs, four switches, a needle, and a playlist beside it. */
.gz-sound{width:min(720px,calc(100vw - 20px))}
.sd-body{grid-template-columns:minmax(0,1fr) 244px}
.sd-deck{display:flex;flex-direction:column;gap:11px;padding:13px 14px 14px;border-radius:13px;
  background:linear-gradient(180deg,#413849,#2f2836);border:2px solid var(--ink-2);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.09),0 2px 0 var(--ink-2)}
.sd-top{display:flex;align-items:stretch;gap:11px}

/* the little screen */
.sd-screen{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center;
  padding:9px 11px;border-radius:9px;background:#171220;border:2px solid var(--hard-edge);
  box-shadow:inset 0 0 14px rgba(0,0,0,.6)}
.sd-now{font-family:var(--display);font-size:13px;color:#7fe0b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 0 9px rgba(127,224,176,.5)}
.gz-sound.sd-live .sd-now{animation:sdGlow 3.4s ease-in-out infinite}
@keyframes sdGlow{0%,100%{opacity:.86}50%{opacity:1}}
.sd-by{font-style:normal;font-size:10.5px;color:#5c8f77;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-prog{height:4px;border-radius:3px;background:#2a2438;overflow:hidden;margin-top:3px}
.sd-prog span{display:block;height:100%;width:0;background:linear-gradient(90deg,#2fae76,#7fe0b0);transition:width .35s linear}
.sd-time{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#4f6f60}
.sd-vu{flex:none;display:block;border-radius:7px}

/* the knobs */
.sd-knobs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.knob{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:ns-resize;
  padding:4px 2px 3px;border-radius:9px;user-select:none;-webkit-user-select:none;touch-action:none}
.knob:hover{background:rgba(255,255,255,.05)}
.knob.turning{background:rgba(239,77,152,.16)}
.knob:focus-visible{outline:2px solid var(--pink);outline-offset:1px}
.knob svg{display:block;width:44px;height:44px;overflow:visible}
.knob-shadow{fill:rgba(0,0,0,.45)}
.knob-face{fill:var(--trough);stroke:var(--hard-edge);stroke-width:2}
.knob-cap{fill:#d9ccd6;stroke:rgba(15,12,18,.25);stroke-width:1}
.knob-mark{stroke:#c93b82;stroke-width:3;stroke-linecap:round}
.knob-ticks line{stroke:#7c6f86;stroke-width:1.4;stroke-linecap:round}
.knob.turning .knob-face{fill:#fff}
.knob.off .knob-mark{stroke:#7c6f86}
.knob b{font-size:7.5px;font-weight:800;letter-spacing:.12em;color:#a495a8}
.knob i{font-family:var(--mono);font-style:normal;font-size:8.5px;color:#e6dbe6;min-height:11px}

/* the switches */
.sd-flips{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sd-flip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 5px;cursor:pointer;
  border:1.5px solid var(--hard-edge);border-radius:9px;background:#241e2c;font-family:inherit}
.sd-flip:hover{background:#2c2536}
.sd-flip-slot{width:26px;height:15px;border-radius:4px;background:#15111c;border:1.5px solid var(--hard-edge);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);display:flex;align-items:center;padding:1px}
.sd-flip-slot i{display:block;width:11px;height:11px;border-radius:2px;background:#8d8095;
  transition:transform .12s cubic-bezier(.3,0,.3,1.4),background .12s;box-shadow:0 1px 0 rgba(0,0,0,.5)}
.sd-flip[aria-pressed="true"] .sd-flip-slot{background:#3a1d2c;border-color:var(--hard-edge)}
.sd-flip[aria-pressed="true"] .sd-flip-slot i{transform:translateX(11px);background:var(--pink)}
.sd-flip b{font-size:7.5px;font-weight:800;letter-spacing:.1em;color:#a495a8}
.sd-flip[aria-pressed="true"] b{color:#f7b9d6}

/* transport */
.sd-transport{display:flex;align-items:center;justify-content:center;gap:9px}
.sd-tp{width:34px;height:30px;border:1.5px solid var(--hard-edge);border-radius:8px;background:var(--trough);color:#26212a;
  font-size:12px;line-height:1;cursor:pointer;box-shadow:0 2px 0 var(--hard-edge);font-family:inherit}
.sd-tp:hover{background:var(--field)}
.sd-tp:active{transform:translateY(2px);box-shadow:0 0 0 var(--hard-edge)}
.sd-tp-big{width:52px;height:34px;font-size:14px;background:var(--pink);color:#fff;border-color:var(--hard-edge)}
.sd-tp-big:hover{background:#ff62a8}

/* the playlist */
.pl-list{list-style:none;margin:0;padding:2px;display:flex;flex-direction:column;gap:3px;max-height:296px;overflow-y:auto}
.pl-track{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;cursor:pointer;
  border:1.5px solid transparent;background:var(--field)}
.pl-track:hover{border-color:var(--line);background:var(--tint)}
.pl-track.playing{border-color:var(--pink);background:var(--tint);box-shadow:0 2px 0 var(--pink-soft)}
.pl-n{font-family:var(--mono);font-size:9.5px;color:var(--mute-2)}
.pl-track.playing .pl-n{color:var(--pink)}
.pl-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.pl-meta b{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-meta i{font-style:normal;font-size:10px;color:var(--mute-2)}
.pl-d{font-family:var(--mono);font-size:9.5px;color:var(--mute-2)}
.pl-bars{display:none;gap:1.5px;align-items:flex-end;height:12px;width:12px}
.pl-track.playing .pl-bars{display:flex}
.pl-bars i{display:block;width:3px;background:var(--pink);border-radius:1px;height:4px}
.gz-sound.sd-live .pl-track.playing .pl-bars i{animation:sdBar .9s ease-in-out infinite}
.gz-sound.sd-live .pl-track.playing .pl-bars i:nth-child(2){animation-delay:.18s}
.gz-sound.sd-live .pl-track.playing .pl-bars i:nth-child(3){animation-delay:.36s}
@keyframes sdBar{0%,100%{height:3px}50%{height:12px}}

@media (max-width:820px){
  .sd-body{grid-template-columns:1fr}
  .sd-knobs{grid-template-columns:repeat(3,1fr)}
}

/* ─── the volume in the dock: all a visitor gets ─────────────────────────── */
.vol-btn{width:26px;height:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--mute)}
.vol-btn:hover{background:var(--pink-soft);color:var(--pink)}
.vol-cone{fill:currentColor}
.vol-wave{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.vol-cross{display:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}
.vol-btn.muted{color:#c9bcc6}
.vol-btn.muted .vol-wave{display:none}
.vol-btn.muted .vol-cross{display:block}
.vol-btn.humming{color:var(--green)}
.vol-btn.humming .vol-w2{animation:volPulse 1.8s ease-in-out infinite}
@keyframes volPulse{0%,100%{opacity:.35}50%{opacity:1}}
.vol-slider{width:52px;height:20px;margin:0 2px;accent-color:var(--pink);cursor:pointer;background:none}
@media (max-width:560px){.vol-slider{display:none}}

/* ─── 13 the zoetrope ──────────────────────────────────────────────────────
   Search a provider for a moving picture and pin it to the paper. Everything
   here is drawn from the token sheet, so the drum, the strips and the pins
   follow whichever genre skin is on. */
.gz-zoetrope{width:min(860px,calc(100vw - 20px))}
.zt-body{grid-template-columns:1fr 250px 224px}

/* the drum: one target for all three ways in — the button, a file dropped on
   it, and paste. It lights up while something is being dragged over it, and
   .zt-catching does the same for the bare paper while a file is over that. */
.zt-drop{display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 14px 16px;
  border:2px dashed var(--line);border-radius:12px;background:var(--field-2);cursor:pointer;
  transition:border-color .14s,background .14s}
.zt-drop:hover{border-color:var(--pink);background:var(--tint-2)}
.zt-drop.zt-over{border-color:var(--pink);border-style:solid;background:var(--tint);
  box-shadow:inset 0 0 0 3px var(--pink-soft)}
.zt-drop-icon{display:block;fill:none;stroke:var(--mute-2);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.zt-drop.zt-over .zt-drop-icon,.zt-drop:hover .zt-drop-icon{stroke:var(--pink)}
.zt-drop-word{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-3);line-height:1.3}
.zt-drop-word small{display:block;margin-top:3px;font-family:var(--mono);font-size:8.5px;font-weight:400;
  letter-spacing:.06em;color:var(--mute-2);text-transform:lowercase}
.zt-drop .gz-btn{flex:none}
.zt-status{margin:0;min-height:15px;font-size:11px;line-height:1.4;color:var(--mute);font-style:italic}
.zt-status.zt-good{color:var(--green);font-style:normal}
.zt-status.zt-warn{color:var(--amber-ink);font-style:normal}
.zt-status.zt-bad{color:var(--pink);font-style:normal}
.zt-room{margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--mute-2)}
/* the whole sheet is a target while a file is over it */
body.zt-catching .bench{box-shadow:inset 0 0 0 3px var(--pink)}
.zt-mark{margin:0;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2);text-align:right}
.zt-mark a{color:var(--mute);text-decoration:none}
.zt-mark a:hover{color:var(--pink);text-decoration:underline}

/* what is up, as a list */
.zt-count{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mute-2)}
.zt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:250px;overflow-y:auto}
.zt-row{display:flex;align-items:center;gap:8px;padding:5px 7px;border:1.5px solid var(--line);border-radius:9px;background:var(--field)}
.zt-row img{flex:none;width:34px;height:34px;object-fit:cover;border-radius:5px;border:1px solid var(--line);background:var(--trough)}
.zt-row-t{flex:1;min-width:0;font-size:11.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zt-row-t small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--mute-2)}

/* the works */
.zt-field{display:flex;flex-direction:column;gap:3px}
.zt-field>span{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--mute-2)}
.zt-field select,.zt-field input{border:1.5px solid var(--ink-2);border-radius:8px;padding:6px 8px;font-size:11.5px;
  background:var(--field);color:var(--ink);outline:none;font-family:inherit}
.zt-field input:disabled{opacity:.45;cursor:not-allowed}
.zt-field input:focus,.zt-field select:focus{border-color:var(--pink)}
.zt-note{margin:0;font-size:10.5px;line-height:1.45;color:var(--mute)}
.zt-note a{white-space:nowrap;font-weight:700}
.zt-check{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);cursor:pointer}
.zt-check input{accent-color:var(--pink);cursor:pointer}

/* ─── pinned to the paper ──────────────────────────────────────────────────
   A layer over the sheet, in world coordinates, so a pin zooms and pans with
   everything else. The layer takes no pointer — only the pins do. */
.zt-layer{position:absolute;inset:0;pointer-events:none;z-index:3900}
.zt-pin{position:absolute;left:0;top:0;pointer-events:auto;filter:drop-shadow(0 10px 14px rgba(var(--drop-rgb),.34))}
/* the frame is the fx STAGE: it must carry no transform of its own, because
   an animation needs it. .zt-pin-art is the SKIN and takes the effect. */
.zt-pin-frame{position:relative;padding:7px 7px 6px;border:2px solid var(--ink-2);border-radius:6px;background:var(--field);
  cursor:grab;touch-action:none}
.zt-pin-art{overflow:hidden;border-radius:3px;background:var(--trough)}
.zt-pin-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px}
.zt-held .zt-pin-frame{cursor:grabbing}
.zt-held{filter:drop-shadow(0 18px 22px rgba(var(--drop-rgb),.45))}
.zt-tack{position:absolute;left:50%;top:-7px;width:13px;height:13px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle at 34% 32%,var(--pink-2),var(--pink) 68%);border:1.5px solid var(--ink-2);
  box-shadow:0 2px 3px rgba(var(--drop-rgb),.4)}
.zt-cap{display:block;margin-top:3px;font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;color:var(--mute);
  text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zt-off{position:absolute;right:-9px;top:-9px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink-2);
  background:var(--field);color:var(--mute);font-size:13px;line-height:1;cursor:pointer;padding:0;
  opacity:0;transition:opacity .14s}
.zt-pin:hover .zt-off,.zt-off:focus-visible{opacity:1}
.zt-off:hover{background:var(--pink);border-color:var(--pink);color:#fff}
.zt-ping .zt-pin-frame{animation:ztPing .95s ease-out}
@keyframes ztPing{0%,60%{box-shadow:0 0 0 5px var(--pink-soft)}100%{box-shadow:0 0 0 0 transparent}}

@media (max-width:900px){.zt-body{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.zt-ping .zt-pin-frame{animation:none}}

/* ─── the tool dock ────────────────────────────────────────────────────────
   The hero's dock, on the bench. A dark pill at the bottom centre with the
   four tools, five colours, undo and clear; a second pill above it carries
   whatever options the chosen tool has and is simply not there in move mode.
   Both are fixed, in screen space, so they hold still while the camera moves. */
.tool-dock,.tool-opts{position:fixed;left:50%;transform:translateX(-50%);z-index:6000;
  display:flex;align-items:center;gap:4px;padding:5px;border-radius:14px;
  background:var(--gz-handle-bg);border:2px solid var(--hard-edge);
  box-shadow:0 2px 0 var(--hard-edge),0 16px 34px -16px rgba(var(--drop-rgb),.6)}
.tool-dock{bottom:16px}
.tool-opts{bottom:70px;padding:4px 8px;gap:5px;border-radius:12px}
.dock-grp{display:flex;align-items:center;gap:3px}
.dock-rule{width:1px;height:20px;background:var(--grip);margin:0 3px}

.dock-btn{display:inline-flex;flex-direction:column;align-items:center;gap:1px;border:0;background:none;
  border-radius:9px;padding:5px 9px 4px;color:var(--gz-handle-ink);cursor:pointer;opacity:.62;
  transition:background .12s,opacity .12s}
.dock-btn svg{fill:currentColor;display:block}
.dock-btn span{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.dock-btn:hover{opacity:1;background:rgba(255,255,255,.09)}
.dock-btn[aria-pressed="true"]{opacity:1;background:var(--pink);color:#fff}
.dock-mini{opacity:.5}

/* the five inks. Each swatch paints the token it stands for, so the palette
   re-mixes itself with the genre skin instead of going invisible on dark paper */
.dock-sw{width:22px;height:22px;padding:0;border-radius:50%;cursor:pointer;background:var(--sw);
  border:2px solid rgba(255,255,255,.28);transition:transform .1s,border-color .12s}
.dock-sw:hover{transform:scale(1.12)}
.dock-sw[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px var(--gz-handle-bg),0 0 0 4px var(--pink)}
/* … and each swatch is also its own mixing pot: press the one already chosen
   and the system picker opens on it. That picker is a single input shared by
   all five — it cannot live inside a button, and it should not be five more
   tab stops — parked under the swatches so the dialog opens next to them. */
.dock-pal{position:relative}
#dock-mix{position:absolute;left:50%;bottom:0;width:1px;height:1px;opacity:0;
  border:0;padding:0;background:none;pointer-events:none}

.opt-lab{font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--serial-ink)}
.opt-rule{width:1px;height:16px;background:var(--grip);margin:0 2px}
.opt-btn{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;
  border:0;border-radius:7px;background:none;color:var(--gz-handle-ink);cursor:pointer;opacity:.6;
  font-size:10.5px;transition:background .12s,opacity .12s}
.opt-btn:hover{opacity:1;background:rgba(255,255,255,.09)}
.opt-btn[aria-pressed="true"]{opacity:1;background:var(--pink);color:#fff}
/* a group of options that belong together, so one of them can be faded when
   the other's setting has taken over (width, once the pen is squared off) */
.opt-set{display:inline-flex;align-items:center;gap:5px;transition:opacity .14s}
.opt-set.opt-moot{opacity:.32}
.opt-px svg{display:block}
.opt-pw i,.opt-po i{display:block;border-radius:50%;background:currentColor}
.opt-po i{width:14px;height:14px}
.opt-sk svg{display:block;color:var(--pink-2)}
.opt-sk[aria-pressed="true"] svg{color:#fff}
/* the stamps are drawn against paper, so on the dock's dark pill their outlines
   would vanish. Re-point the few tokens the artwork uses, button-locally. */
.opt-sk{--ink-2:rgba(255,255,255,.6);--paper:transparent;
  --gn-skin:var(--gz-handle-ink);--gn-beard:rgba(255,255,255,.85);--amber:var(--amber)}

/* the stickies have the same problem as the stamps, and one of their own: a
   pad has to be a paper the skin's ink reads on, which in the cellar makes it
   nearly black — and four nearly-black buttons on a near-black pill would be
   a colour picker you cannot see the colours in. So on the DOCK ONLY the four
   pads are pinned to fixed washes that keep their hue and read on the dark.
   The artwork is unchanged; only the tokens under it are swapped. */
.opt-sc svg{display:block;overflow:visible}
.opt-sc{--sticky-a:#ffdf85;--sticky-b:#ffabc2;--sticky-c:#a3d3ef;--sticky-d:#bfe3a0;
  --sticky-edge:rgba(0,0,0,.22);--ink-2:rgba(255,255,255,.72)}
.opt-sc[aria-pressed="true"]{--ink-2:#fff}

/* ─── the ink on the paper ────────────────────────────────────────────────
   One svg in world units under the gizmos. It only takes the pointer when a
   tool is up; in move mode the layer steps back and the pieces take it. */
.wall-ink{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.wall-ink.wall-live{pointer-events:auto;cursor:crosshair}
body.lab-hand .wall-ink,body.lab-panning .wall-ink{pointer-events:none!important}
.wall-item{pointer-events:none}
.wall-picking .wall-item{pointer-events:auto;cursor:grab}
.wall-picking .wall-item:hover{outline:none;filter:drop-shadow(0 0 3px var(--pink))}
/* a stroke is a hairline to the hit-tester unless it is given some girth */
.wall-picking path.wall-item{stroke-linecap:round}
.wall-item.wall-held{cursor:grabbing;filter:drop-shadow(0 4px 6px rgba(var(--drop-rgb),.45))}

/* ── writing a note ───────────────────────────────────────────────
   A box the width the note will be, in the face and size it will be, growing
   downwards as the words wrap. It lives inside the world, so it is already at
   the zoom you are working at. The tab on the right edge reshapes it. */
.wall-note{position:absolute;transform:translate(-4px,-50%);z-index:60;padding:9px 12px;
  border:2px solid var(--pink);border-radius:11px;background:var(--field);
  box-shadow:0 10px 26px -10px rgba(var(--drop-rgb),.55)}
.wall-note-in{display:block;width:260px;margin:0;padding:0;border:0;background:none;outline:none;
  resize:none;overflow:hidden;color:var(--ink);font-size:22px;line-height:1.32}
.wall-note-in::placeholder{color:var(--mute-2)}
.wall-note-grip{position:absolute;right:-9px;top:50%;transform:translateY(-50%);width:14px;height:38px;
  padding:0;border:2px solid var(--pink);border-radius:7px;background:var(--field);cursor:ew-resize;
  display:grid;place-items:center;touch-action:none}
.wall-note-grip::before{content:"";width:2px;height:16px;border-radius:2px;background:var(--pink);opacity:.75}

/* a note being written onto a sticky: the box wears the pad while you type,
   so you are looking at the piece rather than at a form about it. --pad is set
   inline by askNote, and the ink is already the colour you picked. The corners
   go square, because that is the shape it is about to become. */
.wall-note.on-sticky{background:var(--pad);border-color:var(--ink-2);border-radius:3px;
  box-shadow:inset 0 3px 0 var(--sticky-edge),0 10px 26px -10px rgba(var(--drop-rgb),.55)}
.wall-note.on-sticky .wall-note-in::placeholder{color:var(--ink-2);opacity:.45}
.wall-note.on-sticky .wall-note-grip{background:var(--pad);border-color:var(--ink-2);border-radius:3px}
.wall-note.on-sticky .wall-note-grip::before{background:var(--ink-2)}

/* and the tab that reshapes a note once it is on the paper: nothing at all
   until the move tool is up, then a hint of one until you are on it */
.wall-grip{fill:var(--pink);opacity:0;pointer-events:none}
.wall-picking .wall-grip{opacity:.3;pointer-events:auto;cursor:ew-resize}
.wall-picking .wall-grip:hover{opacity:.95}

/* ─── the + tool, and its sheet ───────────────────────────────────────────
   The plus puts a picture up. Its options row is the two ways in and then the
   pictures already up this session, so a second copy of one is a click; the
   sheet is where the choosing happens and is dressed as the dock rather than
   as a panel, because it belongs to the dock and sits directly over it. */
.opt-wide{gap:5px;padding:0 9px;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.12em}
.opt-wide svg{display:block;flex:none}
.opt-pic{width:26px;padding:0;overflow:hidden;opacity:.85}
.opt-pic img{display:block;width:26px;height:26px;object-fit:cover;border-radius:6px}
.opt-pic[aria-pressed="true"]{opacity:1;background:none;box-shadow:0 0 0 2px var(--pink)}
.opt-say{opacity:.8}

.pic-sheet{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);z-index:6001;
  width:min(440px,calc(100vw - 24px));display:flex;flex-direction:column;gap:9px;padding:10px;
  border-radius:14px;background:var(--gz-handle-bg);border:2px solid var(--hard-edge);
  color:var(--gz-handle-ink);
  box-shadow:0 2px 0 var(--hard-edge),0 22px 46px -18px rgba(var(--drop-rgb),.72)}
.pic-top{display:flex;align-items:center;gap:6px}
.pic-tabs{display:flex;gap:4px;flex:1}
.pic-tab{border:0;border-radius:8px;padding:6px 11px;background:rgba(255,255,255,.07);
  color:var(--gz-handle-ink);cursor:pointer;opacity:.62;font-family:var(--mono);font-size:9px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .12s,opacity .12s}
.pic-tab:hover{opacity:1;background:rgba(255,255,255,.13)}
.pic-tab[aria-selected="true"]{opacity:1;background:var(--pink);color:#fff}
.pic-shut{width:24px;height:24px;flex:none;border:0;border-radius:50%;background:rgba(255,255,255,.08);
  color:var(--gz-handle-ink);font-size:15px;line-height:1;cursor:pointer;opacity:.6}
.pic-shut:hover{opacity:1;background:var(--pink);color:#fff}
.pic-pane{display:flex;flex-direction:column;gap:8px}

/* the square you drop a file on. The bare paper takes a drop too — that one
   is the drum's, and older than this — so this is a target, not the only one */
.pic-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px 14px;
  border:2px dashed var(--grip);border-radius:11px;background:rgba(255,255,255,.04);cursor:pointer;
  transition:border-color .12s,background .12s}
.pic-drop:hover,.pic-drop.pic-over{border-color:var(--pink);background:rgba(255,255,255,.09)}
.pic-drop.pic-over{border-style:solid}
.pic-drop-icon{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;opacity:.5}
.pic-drop:hover .pic-drop-icon,.pic-drop.pic-over .pic-drop-icon{opacity:.95;stroke:var(--pink)}
.pic-drop b{font-size:12px;font-weight:700}
.pic-drop small{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--serial-ink)}
.pic-go{border:0;border-radius:8px;padding:6px 12px;background:var(--pink);color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.pic-go:hover{filter:brightness(1.12)}
.pic-fine{margin:0;font-size:10px;line-height:1.5;color:var(--serial-ink)}
.pic-fine a{color:var(--gz-handle-ink);text-decoration:underline}

.pic-search{display:flex;gap:6px}
.pic-q{flex:1;min-width:0;border:2px solid var(--grip);border-radius:8px;padding:6px 9px;
  background:rgba(255,255,255,.06);color:var(--gz-handle-ink);font-size:12px;outline:none}
.pic-q::placeholder{color:var(--serial-ink)}
.pic-q:focus{border-color:var(--pink)}

/* the results, in the order giphy sent them. Four across, and the box scrolls
   rather than growing — the sheet must not push itself off the top of a laptop */
.pic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-height:210px;overflow-y:auto}
.pic-grid:empty{display:none}
.pic-hit{padding:0;border:0;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.06);
  aspect-ratio:1;cursor:pointer}
.pic-hit img{display:block;width:100%;height:100%;object-fit:cover}
.pic-hit:hover{box-shadow:0 0 0 2px var(--pink)}

.pic-key{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;padding:8px;border-radius:9px;
  background:rgba(255,255,255,.05)}
.pic-key label{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:var(--serial-ink)}
.pic-keyin{border:2px solid var(--grip);border-radius:8px;padding:5px 8px;background:rgba(255,255,255,.06);
  color:var(--gz-handle-ink);font-family:var(--mono);font-size:11px;outline:none}
.pic-keyin:focus{border-color:var(--pink)}
.pic-key .pic-fine{flex-basis:100%}

/* their mark, wherever their results are — it is a condition of using them */
.pic-mark{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--serial-ink)}
.pic-mark a{color:var(--gz-handle-ink);text-decoration:none;font-weight:700}
.pic-mark a:hover{color:var(--pink)}
.pic-linky{margin-left:auto;border:0;background:none;padding:0;cursor:pointer;color:var(--serial-ink);
  font:inherit;text-decoration:underline}
.pic-linky:hover{color:var(--pink)}
.pic-say{margin:0;min-height:14px;font-size:10.5px;line-height:1.4;color:var(--serial-ink);font-style:italic}
.pic-say.pic-good{color:var(--green);font-style:normal}
.pic-say.pic-warn{color:var(--amber);font-style:normal}
.pic-say.pic-bad{color:var(--pink);font-style:normal}

@media (max-width:760px){
  /* the hero folds to one row down here; so does this, and it gets out of the
     zoom dock's way rather than sitting on top of it */
  .tool-dock{bottom:60px;gap:2px;padding:4px;max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:center}
  /* the dock wraps to two rows down here, so the options row has to clear both */
  .tool-opts{bottom:142px;max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:center}
  .dock-btn span{display:none}
  .dock-btn{padding:6px 8px}
}
@media (prefers-reduced-motion:reduce){.dock-sw{transition:none}}

/* ─── KN-0014 · THE TERMINAL ───────────────────────────────────────────────
   A beige monitor from about 1987: a deep hood with the glass sunk into it,
   vents cut across the front of the case, a neck, and the slab of a keyboard
   under it that you actually type the board into. The shell is --crt-shell,
   which the skins re-point, so it is putty on the knoll and grim in the
   cellar rather than being beige everywhere and wrong three times.

   The glass is the same --screen-deep the forge's screen uses, under the same
   scanlines, because they are the same make of machine. */
/* two columns, not the usual three: the set is the point of this gizmo and a
   third of 780px is not a large monitor. So the case takes the whole left and
   the two panels stack down the right of it. */
.crt-body{grid-template-columns:1fr 232px}
.crt-set-col{min-width:0;grid-row:1/3}

/* the case, and the notes taped to it, share one positioning context */
.crt-rig{position:relative;display:flex;flex-direction:column;align-items:center;padding-right:74px}
.crt-set{width:100%;max-width:430px;padding:13px 13px 0;border-radius:16px 16px 7px 7px;
  background:linear-gradient(168deg,var(--crt-shell),var(--crt-shell-2));
  border:2px solid var(--ink-2);box-shadow:0 3px 0 var(--ink-2),inset 0 2px 0 rgba(255,255,255,.35)}
/* the hood: the glass sits INSIDE the plastic, so the bezel gets an inner
   shadow rather than a border — that is what makes it read as a recess */
.crt-hood{border-radius:12px 12px 4px 4px;padding:10px 10px 6px;
  background:linear-gradient(180deg,var(--crt-shell-2),var(--crt-shell))}
.crt-glass{position:relative;height:232px;border-radius:16px/12px;overflow:hidden;
  background:var(--screen-deep);box-shadow:inset 0 0 0 2px var(--ink-2),inset 0 0 30px rgba(0,0,0,.85)}
/* the phosphor. A board is a list, so it scrolls; the bar is taken away
   because a chrome scrollbar on a CRT is the one thing that gives it away */
.crt-log{position:absolute;inset:0;margin:0;padding:9px 10px;list-style:none;overflow-y:auto;
  font-family:var(--mono);font-size:11px;line-height:1.5;color:#6fe2a4;
  text-shadow:0 0 7px rgba(111,226,164,.55);scrollbar-width:none}
.crt-log::-webkit-scrollbar{width:0;height:0}
.crt-line{display:flex;align-items:baseline;gap:6px;padding:1px 0}
.crt-line time{flex:none;opacity:.42;font-size:9.5px}
.crt-line b{flex:none;font-weight:700;opacity:.85}
.crt-line b i{margin-left:4px;padding:0 3px;border-radius:3px;font-style:normal;font-size:8px;
  letter-spacing:.1em;text-transform:uppercase;background:rgba(111,226,164,.22)}
.crt-line span{flex:1;min-width:0;word-break:break-word;color:#b8f5d4}
.crt-me b,.crt-staff b{color:#f6e39a}
.crt-me b i,.crt-staff b i{background:rgba(246,227,154,.26)}
.crt-x{flex:none;border:0;background:none;padding:0 2px;cursor:pointer;color:#6fe2a4;opacity:0;
  font-size:12px;line-height:1}
.crt-line:hover .crt-x,.crt-x:focus-visible{opacity:.75}
.crt-x:hover{opacity:1;color:#ff9a86}
.crt-empty{opacity:.5;font-style:italic}

/* the two things laid over the glass: the raster lines, and the bulge of a
   tube that was never flat. Neither takes the pointer. */
.crt-scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.crt-bulge{position:absolute;inset:0;pointer-events:none;border-radius:16px/12px;
  background:radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.07) 0 42%,transparent 62%),
             radial-gradient(ellipse at 50% 50%,transparent 52%,rgba(0,0,0,.55) 100%)}

.crt-badge{display:flex;align-items:center;gap:8px;padding:5px 3px 1px}
.crt-brand{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--crt-ink)}
.crt-brand b{opacity:.6;font-weight:400}
.crt-count{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  color:var(--crt-ink);opacity:.6}
/* the power lamp: lit when another window is listening, dark when you are alone */
.crt-led{width:7px;height:7px;flex:none;border-radius:50%;background:var(--off);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.crt-led.on{background:#5fdc93;box-shadow:0 0 7px rgba(95,220,147,.9)}

.crt-vents{display:flex;gap:3px;justify-content:center;padding:7px 0 8px}
.crt-vents i{width:22px;height:3px;border-radius:2px;background:var(--crt-vent)}
.crt-neck{width:86px;height:13px;border:2px solid var(--ink-2);border-top:0;border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,var(--crt-shell-2),var(--crt-shell))}

/* the keyboard slab. Typing is the keyboard's job, so the line you type on
   sits where the keys would start, with the dead ones ruled under it. */
.crt-deck{width:100%;max-width:452px;padding:8px 10px 9px;border-radius:8px 8px 11px 11px;
  background:linear-gradient(180deg,var(--crt-shell),var(--crt-shell-2));
  border:2px solid var(--ink-2);box-shadow:0 3px 0 var(--ink-2)}
.crt-type{display:flex;align-items:center;gap:6px}
.crt-caret{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--crt-ink);opacity:.6}
#crt-say{flex:1;min-width:0;border:2px solid var(--ink-2);border-radius:6px;padding:5px 8px;
  background:var(--screen-deep);color:#8ff0bb;font-family:var(--mono);font-size:11px;outline:none}
#crt-say::placeholder{color:rgba(143,240,187,.4)}
#crt-say:focus{box-shadow:0 0 0 2px var(--pink)}
#crt-say:disabled{opacity:.5;cursor:not-allowed}
.crt-keys{margin-top:7px;height:7px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--crt-vent) 0 14px,transparent 14px 17px)}

/* ── the notes taped down the side ───────────────────────────────────────
   Stuck to the case rather than laid beside it: they overlap the hood's right
   edge and sit at a couple of degrees, which is the whole difference between
   a sticky note and a text box. A visitor gets the same box, readonly — so
   nothing shifts when the role changes, and it is plainly not theirs to type
   in. The pad and the glue strip are the dock's own --sticky tokens. */
.crt-stickies{position:absolute;right:0;top:6px;width:78px;margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:9px}
.crt-note{position:relative;transform:rotate(var(--tilt,-2deg));
  filter:drop-shadow(0 5px 7px rgba(var(--drop-rgb),.34))}
.crt-note-t{display:block;width:100%;padding:9px 7px 8px;border:1.5px solid var(--ink-2);border-radius:2px;
  background:var(--pad);color:var(--ink);font-family:var(--body);font-size:9.5px;line-height:1.35;
  resize:none;outline:none;box-shadow:inset 0 4px 0 var(--sticky-edge)}
.crt-note-t:focus{box-shadow:inset 0 4px 0 var(--sticky-edge),0 0 0 2px var(--pink)}
.crt-note-t[readonly]{cursor:default}
.crt-note-c,.crt-note-x{position:absolute;width:15px;height:15px;padding:0;border-radius:50%;
  border:1.5px solid var(--ink-2);cursor:pointer;font-size:10px;line-height:1;opacity:0;
  transition:opacity .12s}
.crt-note-c{left:-7px;bottom:-5px;background:var(--pad)}
.crt-note-x{right:-7px;top:-6px;background:var(--field);color:var(--ink)}
.crt-note:hover .crt-note-c,.crt-note:hover .crt-note-x,
.crt-note-c:focus-visible,.crt-note-x:focus-visible{opacity:1}
.crt-note-x:hover{background:var(--pink);border-color:var(--pink);color:#fff}

/* ── who is on ───────────────────────────────────────────────────────────── */
.crt-field{display:flex;flex-direction:column;gap:3px}
.crt-field>span{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--mute-2)}
.crt-field input{border:1.5px solid var(--ink-2);border-radius:8px;padding:6px 8px;font-size:11.5px;
  background:var(--field);color:var(--ink);outline:none}
.crt-field input:focus{border-color:var(--pink)}
.crt-who{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;
  max-height:190px;overflow-y:auto}
.crt-who li{display:flex;align-items:center;gap:6px;padding:4px 7px;border-radius:8px;
  border:1.5px solid var(--line);background:var(--field);font-size:11px}
.crt-who .crt-you{border-color:var(--pink)}
.crt-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--green)}
.crt-who i{padding:0 4px;border-radius:3px;font-style:normal;font-family:var(--mono);font-size:8px;
  letter-spacing:.1em;text-transform:uppercase;background:var(--tint);color:var(--amber-ink)}
.crt-who em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.1em;color:var(--mute-2)}
.crt-check{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);cursor:pointer}
.crt-check input{accent-color:var(--pink);cursor:pointer}
.crt-status{margin:0;min-height:15px;font-size:11px;line-height:1.4;color:var(--mute);font-style:italic}
.crt-status.crt-good{color:var(--green);font-style:normal}
.crt-status.crt-warn{color:var(--amber-ink);font-style:normal}
.crt-status.crt-bad{color:var(--pink);font-style:normal}

@media (max-width:900px){
  .crt-body{grid-template-columns:1fr}
  .crt-set-col{grid-row:auto}
  .crt-rig{padding-right:0}
  /* no case to tape them to at this width, so they lie in a row under it */
  .crt-stickies{position:static;width:100%;flex-direction:row;flex-wrap:wrap;margin-top:10px}
  .crt-note{width:88px}
}

/* ─── 16 the tracing table ────────────────────────────────────────────── */
.gz-vectorize{width:min(820px,calc(100vw - 20px))}
.vz-body{grid-template-columns:210px 180px 1fr}
.vz-row{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;color:var(--mute-2)}
.vz-row span{width:70px;flex:none;letter-spacing:.06em}
.vz-row input[type=range]{flex:1;accent-color:var(--pink)}
.vz-row b{width:20px;flex:none;text-align:right;font-family:var(--mono);font-size:11px;color:var(--ink);font-weight:700}
.vz-actions{display:flex;gap:8px}
.vz-actions .gz-btn{flex:1}
.vz-tabs{display:flex;gap:6px}
.vz-tabs .gz-btn{flex:1}
.vz-tabs .gz-btn.on{background:var(--pink);border-color:var(--pink);color:#fff}
.vz-preview{position:relative;aspect-ratio:4/3;border:1.5px solid var(--ink-2);border-radius:10px;overflow:hidden;
  background:repeating-conic-gradient(var(--field) 0% 25%,var(--tint) 0% 50%) 0 0/18px 18px}
#vz-original{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#vz-traced{position:absolute;inset:6px;display:flex;align-items:center;justify-content:center}
#vz-traced svg{display:block;max-width:100%;max-height:100%}
.vz-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 18px;font-size:11.5px;color:var(--mute-2)}

@media (max-width:720px){
  .vz-body{grid-template-columns:1fr}
}

/* ─── 17 the leaderboard ──────────────────────────────────────────────── */
.gz-leaderboard{width:min(760px,calc(100vw - 20px))}
.lb-body{grid-template-columns:190px 1fr}
.lb-field{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:800;letter-spacing:.1em;
  color:var(--mute-2);text-transform:uppercase}
.lb-field input,.lb-field select{border:1.5px solid var(--ink-2);border-radius:8px;padding:7px 9px;font-size:12px;
  font-weight:500;text-transform:none;letter-spacing:normal;font-family:inherit;background:var(--field);color:var(--ink)}
.lb-field input:focus,.lb-field select:focus{outline:none;border-color:var(--pink)}
.lb-tabs{display:flex;gap:6px}
.lb-tabs .gz-btn{flex:1;padding:6px 4px}
.lb-tabs .gz-btn.on{background:var(--pink);border-color:var(--pink);color:#fff}

.lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;
  max-height:440px;overflow-y:auto;padding-right:2px}
.lb-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--field)}
.lb-row:nth-child(1){border-color:#e8b923;box-shadow:0 0 0 1px #e8b923 inset}
.lb-row:nth-child(2){border-color:#b9c0c9;box-shadow:0 0 0 1px #b9c0c9 inset}
.lb-row:nth-child(3){border-color:#c98a52;box-shadow:0 0 0 1px #c98a52 inset}
.lb-rank{flex:none;width:22px;text-align:center;font-family:var(--mono);font-weight:800;font-size:12px;color:var(--mute-2)}
.lb-avatar{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:12.5px;color:#fff}
.lb-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lb-name{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:13px;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-badge{flex:none;font-size:8.5px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:4px;
  background:var(--pink-soft);color:var(--pink);text-transform:uppercase}
.lb-sub{font-size:10px;color:var(--mute-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-stats{flex:none;display:flex;gap:14px}
.lb-stat{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.lb-stat b{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:800;white-space:nowrap}
.lb-stat span{font-size:8.5px;color:var(--mute-2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.lb-empty{padding:22px 10px;text-align:center;color:var(--mute-2);font-size:12px}

@media (max-width:640px){
  .lb-body{grid-template-columns:1fr}
  .lb-sub,.lb-stats{display:none}
}