/* ─── knoll / lab — THE STICKER PRESS ──────────────────────────────────────
   The look the new machines are cut from: cream paper, one hard black line
   round everything, one hard drop shadow down and to the right, and nothing
   quite square. It is a different art direction from lab.css and it is meant
   to be — where the two disagree, this file wins, which is why it loads last.

   Anything wearing .gz-st gets the sticker chassis: a black handle bar with a
   VT323 plate on it instead of the engraved one, and a body that is a machine
   rather than a card. The gizmo still registers, drags, shelves and gates by
   role exactly as before — only the skin below the chassis has changed.

   The tokens are here rather than inline so a genre skin can re-point them
   later. Nothing in this file reads lab.css's --paper/--ink; the two palettes
   sit side by side on the bench on purpose. */

:root{
  /* ── the paper and the one black line ────────────────────────────────── */
  --st-paper:#f2e9cf;                       /* the ground these machines sit on */
  --st-card:#f4ecd5;                        /* a panel face                     */
  --st-card-2:#fdf7e3;                      /* a lit panel, or paper in a tray  */
  --st-ink:#17120b;                         /* every line, everywhere           */
  --st-drop:rgba(23,18,11,.82);             /* the hard shadow                  */
  --st-drop-soft:rgba(23,18,11,.4);
  --st-ink-55:rgba(23,18,11,.55);

  /* ── the four colours that are allowed ───────────────────────────────── */
  --st-yellow:#ffd23f; --st-yellow-2:#f7c01f;
  --st-red:#e8484a; --st-red-2:#f05a5c; --st-red-3:#b8302f;
  --st-green:#7bc264; --st-green-2:#5fae4e;
  --st-blue:#7fa8c9;

  /* ── metal, in four weights ──────────────────────────────────────────── */
  --st-metal:#b8ac97; --st-metal-2:#c5bba9; --st-metal-3:#d9d0c1; --st-metal-4:#8a7f6a;

  /* ── anything lit from behind ────────────────────────────────────────── */
  --st-screen:#17120b;                      /* the dark inside a chamber        */
  --st-phos:#7ce38b;                        /* the phosphor the screens print in*/
  --st-phos-dim:rgba(124,227,139,.55);

  /* ── type ────────────────────────────────────────────────────────────── */
  --st-face:'Kalam',cursive;                /* the hand: labels, notes, copy    */
  --st-mono:'VT323',monospace;              /* the machine: plates, readouts    */

  /* the standard line and shadow, so a panel is one declaration */
  --st-line:4px solid var(--st-ink);
  --st-line-3:3px solid var(--st-ink);
  --st-shadow:10px 11px 0 var(--st-drop);
  --st-shadow-sm:6px 7px 0 var(--st-drop);
}

/* ═══ THE MOVING PARTS ══════════════════════════════════════════════════
   One set of keyframes for the whole press. Named st-* so they cannot
   collide with lab.css's. */
@keyframes st-spin   { to { transform:rotate(360deg) } }
@keyframes st-blink  { 0%,60%{opacity:1} 61%,100%{opacity:.2} }
@keyframes st-puff   { 0%{transform:translate(-50%,0) scale(.45);opacity:0}
                       18%{opacity:.95}
                       100%{transform:translate(-50%,-110px) scale(1.3);opacity:0} }
@keyframes st-flick  { 0%,100%{transform:scaleY(1) rotate(2deg)} 50%{transform:scaleY(.72) rotate(-4deg)} }
@keyframes st-busy   { 0%,100%{transform:rotate(-38deg)} 30%{transform:rotate(24deg)}
                       55%{transform:rotate(-8deg)} 80%{transform:rotate(38deg)} }
@keyframes st-pop    { 0%{transform:scale(0)} 70%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes st-shake  { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-2px,1px)}
                       50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,-2px)} }
@keyframes st-land   { 0%{transform:translateY(-60px);opacity:0} 60%{transform:translateY(6px);opacity:1}
                       100%{transform:translateY(0)} }
@keyframes st-belt   { from{background-position:0 0} to{background-position:36px 0} }
@keyframes st-ride   { from{left:-4px} to{left:238px} }
@keyframes st-sway   { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} }
@keyframes st-bob    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* ═══ NO CHASSIS ════════════════════════════════════════════════
   The other gizmos are PANELS: a case, a handle bar with a plate on it, two
   little feet. These are not. A press machine is an OBJECT lying on the
   bench — the boiler, the barn, the monitor, the press — and an object has
   no window round it. So .gz-st takes everything the .gz case gave it back
   off again: no background, no border, no shadow, no corner. What you see is
   the machine, standing on the bench's own paper.

   IT IS STILL DRAGGED, though. A gizmo with no [data-handle] inside it is its
   own handle (see register() in lab.js), so the machine is picked up by
   itself, anywhere that is not a control or marked data-nodrag. There is
   nothing to grab but the thing, which is the point.

   The name is not missing either — every one of these designs prints its own
   name ON the machine (the console's chip, the barn's sign, the monitor's
   bezel, the press's header), which is where a real one would have it. The
   serial stays in the markup, hidden, because the shelf reads it. */
.gz-st{
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-family:var(--st-face);
  color:var(--st-ink);
  padding:0;
}
.gz-st.dragging{box-shadow:none}
.gz-st .gz-body{display:block;padding:0;background:none;border-radius:0;position:relative}
.gz-st .gz-body::before,.gz-st .gz-body::after{display:none}   /* no rivets, no grain */

/* the shelf reads a gizmo's serial off .gz-serial, so it stays in the DOM and
   goes to the screen readers rather than to the bench */
.st-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* the – that puts it back on the shelf. lab.js hangs it off the handle, which
   for these IS the machine, so it floats at the top-left corner of whatever
   the machine happens to be, and only when you are near it. */
.gz-st > .gz-min{
  position:absolute;top:0;left:0;z-index:30;
  width:26px;height:26px;border-radius:50%;
  background:var(--st-card);border:3px solid var(--st-ink);color:var(--st-ink);
  font-family:var(--st-mono);font-size:17px;line-height:1;padding:0;
  box-shadow:3px 4px 0 var(--st-drop);
  opacity:0;transition:opacity .12s;
}
.gz-st:hover > .gz-min,.gz-st > .gz-min:focus-visible{opacity:1}
.gz-st > .gz-min:hover{background:var(--st-red);color:var(--st-card)}

/* while it is being carried, the whole machine lifts a little */
.gz-st.dragging{cursor:grabbing}
.gz-loose{cursor:grab}
.gz-loose :where(button,a,input,select,textarea,[data-nodrag]){cursor:auto}
.gz-loose :where(button,a,[role="button"]){cursor:pointer}
.gz-loose :where(input[type="range"]){cursor:pointer}

/* ═══ THE PARTS BIN ═════════════════════════════════════════════════════
   Every machine below is built out of these. */

/* a stamped label, black on cream — what a machine calls its own bits */
.st-plate{
  font-family:var(--st-mono);font-size:19px;letter-spacing:.16em;line-height:1.2;
  color:var(--st-ink);background:var(--st-card);border:var(--st-line-3);
  border-radius:6px 4px 7px 5px;padding:0 10px;white-space:nowrap;display:inline-block;
}
/* the reverse: cream on black. Used for the numbered section tabs. */
.st-tab{
  font-family:var(--st-mono);font-size:18px;letter-spacing:.18em;line-height:1.25;
  color:var(--st-card);background:var(--st-ink);border-radius:4px;padding:0 10px;
  white-space:nowrap;display:inline-block;
}
.st-tab-float{position:absolute;top:-13px;left:14px;z-index:3}

/* a panel: cream, one line, one shadow, corners that do not agree */
.st-panel{background:var(--st-card);border:var(--st-line);border-radius:12px 10px 11px 13px;
  box-shadow:var(--st-shadow);position:relative}

/* a button that presses INTO the page — the shadow is the travel */
.st-btn{
  font-family:var(--st-mono);font-size:19px;letter-spacing:.14em;line-height:1.3;
  color:var(--st-ink);background:var(--st-card);border:var(--st-line-3);
  border-radius:8px 5px 9px 6px;padding:3px 12px 1px;cursor:pointer;
  box-shadow:4px 5px 0 var(--st-drop);transition:background .12s;
}
.st-btn:hover:not(:disabled){background:var(--st-yellow)}
.st-btn:active:not(:disabled){transform:translate(4px,5px);box-shadow:0 0 0 var(--st-drop)}
.st-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:2px 3px 0 var(--st-drop-soft)}
.st-btn-dark{background:var(--st-ink);color:var(--st-card)}
.st-btn-dark:hover:not(:disabled){background:var(--st-red);color:var(--st-card)}
.st-btn-red{background:var(--st-red);color:var(--st-card-2)}
.st-btn-red:hover:not(:disabled){background:var(--st-red-2)}
.st-btn-on{background:var(--st-ink);color:var(--st-card)}

/* a lamp */
.st-lamp{width:18px;height:18px;border-radius:50%;border:var(--st-line-3);
  background:var(--st-metal-3);opacity:.32;display:inline-block;flex:none}
.st-lamp.on{opacity:1}
.st-lamp-y{background:var(--st-yellow)} .st-lamp-r{background:var(--st-red)}
.st-lamp-g{background:var(--st-green)} .st-lamp-b{background:var(--st-blue)}

/* a readout: phosphor digits in a black window */
.st-digits{font-family:var(--st-mono);font-size:26px;letter-spacing:.16em;line-height:1.25;
  color:var(--st-phos);background:var(--st-ink);border-radius:5px;padding:0 10px}

/* a strip of rivets down both sides of a case */
.st-rivets::before,.st-rivets::after{
  content:"";position:absolute;top:14%;bottom:14%;width:9px;border-radius:5px;
  background:radial-gradient(circle at 50% 12px,var(--st-ink) 0 4.5px,transparent 4.6px) 0 0/9px 100px repeat-y;
  opacity:.55;pointer-events:none;
}
.st-rivets::before{left:11px}.st-rivets::after{right:11px}

/* the hand-written fine print under a control */
.st-fine{font-family:var(--st-face);font-size:14px;line-height:1.35;color:var(--st-ink);
  opacity:.62;margin:0}
.st-fine b{opacity:1}

/* a sticky note pinned to a machine — the instructions nobody reads */
.st-sticky{
  background:var(--st-yellow);border:var(--st-line);border-radius:4px 12px 6px 14px;
  box-shadow:8px 9px 0 var(--st-drop);padding:24px 15px 14px;position:relative;
  font-family:var(--st-face);font-weight:700;font-size:15px;line-height:1.4;color:var(--st-ink);
}
.st-sticky::before{                                   /* the strip of tape */
  content:"";position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-4deg);
  width:84px;height:24px;background:rgba(244,236,205,.95);border:var(--st-line-3);border-radius:3px;
}
.st-sticky small{font-weight:400;font-size:13.5px;display:block;margin-top:5px}

/* a puff of steam. Sits on a stack; the -go variant is the hard chug. */
.st-puff{position:absolute;left:50%;background:var(--st-card);border:var(--st-line-3);
  opacity:0;pointer-events:none;animation:st-puff 3s ease-out infinite}
.st-puff-1{top:-20px;width:32px;height:28px;border-radius:55% 62% 50% 65%}
.st-puff-2{top:-14px;width:22px;height:19px;border-radius:60% 50% 65% 55%;animation-delay:1.5s}
.st-puff-3{top:-22px;width:36px;height:31px;border-radius:62% 50% 58% 52%;animation-delay:.7s}
.st-puff-go{background:var(--st-card-2);animation-duration:1.1s}

/* a cog, drawn out of eight teeth and two discs */
.st-cog{position:absolute;animation:st-spin 9s linear infinite}
.st-cog i{position:absolute;top:50%;left:50%;width:24px;height:24px;margin:-12px 0 0 -12px;
  background:var(--st-metal-2);border:var(--st-line);border-radius:6px}
.st-cog i:nth-child(1){transform:rotate(0deg) translateY(-62px)}
.st-cog i:nth-child(2){transform:rotate(45deg) translateY(-62px)}
.st-cog i:nth-child(3){transform:rotate(90deg) translateY(-62px)}
.st-cog i:nth-child(4){transform:rotate(135deg) translateY(-62px)}
.st-cog i:nth-child(5){transform:rotate(180deg) translateY(-62px)}
.st-cog i:nth-child(6){transform:rotate(225deg) translateY(-62px)}
.st-cog i:nth-child(7){transform:rotate(270deg) translateY(-62px)}
.st-cog i:nth-child(8){transform:rotate(315deg) translateY(-62px)}
.st-cog b{position:absolute;inset:14px;background:var(--st-metal-2);border:5px solid var(--st-ink);border-radius:50%}
.st-cog u{position:absolute;inset:48px;background:var(--st-card);border:var(--st-line);border-radius:50%}

/* a tuft of grass, for the ground under a machine */
.st-tuft{display:flex;align-items:flex-end;position:absolute;bottom:0}
.st-tuft i{display:block;border:var(--st-line-3);background:var(--st-green);
  border-radius:60% 60% 20% 20% / 90% 90% 5% 5%;width:11px;margin-left:-7px}
.st-tuft i:first-child{margin-left:0}
.st-tuft i:nth-child(2n){background:var(--st-green-2)}

/* a form field, in the hand */
.st-in{
  font-family:var(--st-face);font-size:16px;color:var(--st-ink);
  background:var(--st-card-2);border:var(--st-line-3);border-radius:7px 5px 8px 6px;
  padding:5px 10px;width:100%;
}
.st-in::placeholder{color:var(--st-ink);opacity:.42}
.st-in:focus{outline:3px solid var(--st-yellow);outline-offset:1px}
.st-in.bad{border-color:var(--st-red)}

/* a slider, in the hand */
.st-range{accent-color:var(--st-red);cursor:pointer;flex:1;min-width:0;height:20px}

/* scanlines over anything lit */
.st-scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 3px 4px)}

/* ═══════════════════════════════════════════════════════════════════════
   № KN-0001 · THE SPAWN-O-MATIC MK.II
   The forge's second chassis. Every id forge.js reaches for is still here —
   the hopper, the three dials, the screen, the eight warp sliders, the bin —
   they are simply bolted to a steam engine now. The boiler IS the bin: drag
   a critter off the bench into the firebox and it goes up as fuel.
   ═══════════════════════════════════════════════════════════════════════ */
.gz-spawner{width:min(1240px,calc(100vw - 20px))}
.gz-st .sp-body{display:flex;flex-direction:column;gap:18px}

/* the machine: boiler, console, chamber, belt — all standing on one floor */
.sp-rig{display:flex;align-items:flex-end;position:relative;padding-top:74px}
.sp-rig.chugging{animation:st-shake .18s linear infinite}

/* ── the stacks, up behind the console ────────────────────────────────── */
.sp-stacks{position:absolute;top:8px;left:250px;width:420px;display:flex;
  justify-content:center;align-items:flex-end;gap:30px;z-index:0;pointer-events:none}
.sp-stack{position:relative;width:40px;display:flex;flex-direction:column;align-items:center}
.sp-stack-cap{width:52px;height:13px;background:var(--st-metal);border:var(--st-line);
  border-radius:5px;position:relative;z-index:1}
.sp-stack-pipe{width:34px;background:var(--st-metal);border:var(--st-line);border-top-width:0;margin-top:-2px}
.sp-stack-a .sp-stack-pipe{height:80px}
.sp-stack-b .sp-stack-pipe{height:104px}
.sp-stack-c .sp-stack-pipe{height:66px}
.sp-rig:not(.chugging) .st-puff-go{display:none}

/* ── the boiler, on the left. This is the bin. ────────────────────────── */
.sp-boiler-col{display:flex;flex-direction:column;align-items:center;position:relative;
  z-index:1;margin-right:-6px}
.sp-boiler-col .st-cog{top:-58px;left:-44px;width:132px;height:132px;z-index:-1}
.sp-boiler{
  width:250px;height:392px;background:var(--st-metal);border:5px solid var(--st-ink);
  border-radius:64px 64px 20px 20px;box-shadow:12px 14px 0 var(--st-drop);
  position:relative;cursor:pointer;
}
.sp-boiler:focus-visible{outline:4px solid var(--st-yellow);outline-offset:6px}
.sp-boiler.over{outline:4px dashed var(--st-red);outline-offset:7px}  /* a critter is held over it */
.sp-boiler-band{position:absolute;top:44px;left:16px;right:16px;height:0;
  border-top:var(--st-line);opacity:.55}
/* the big pressure dial. Decoration — the three that mean something are on
   the console. This one only ever says "hot". */
.sp-dial{position:absolute;top:64px;left:50%;transform:translateX(-50%);width:110px;height:110px;
  background:var(--st-card);border:var(--st-line);border-radius:50%;
  box-shadow:5px 6px 0 var(--st-drop-soft)}
.sp-dial i{position:absolute;background:var(--st-ink);width:4px}
.sp-dial i:nth-child(1){top:11px;left:50%;height:10px;transform:translateX(-50%)}
.sp-dial i:nth-child(2){top:24px;left:18px;height:9px;transform:rotate(-48deg)}
.sp-dial i:nth-child(3){top:24px;right:18px;height:9px;background:var(--st-red);transform:rotate(48deg)}
.sp-dial b{position:absolute;bottom:50%;left:50%;width:5px;height:40px;margin-left:-2.5px;
  background:var(--st-red);border-radius:3px;transform-origin:bottom center;transform:rotate(-34deg)}
.sp-rig.chugging .sp-dial b{animation:st-busy .65s ease-in-out infinite}
.sp-dial u{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  background:var(--st-ink);border-radius:50%}
.sp-boiler .st-plate{position:absolute;top:188px;left:50%;transform:translateX(-50%)}
.sp-hatch{position:absolute;bottom:92px;left:50%;transform:translateX(-50%);width:120px;height:88px;
  background:var(--st-metal-3);border:var(--st-line);border-radius:12px 10px 11px 13px}
.sp-hatch i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--st-ink);opacity:.6}
.sp-hatch i:nth-child(1){top:8px;left:8px} .sp-hatch i:nth-child(2){top:8px;right:8px}
.sp-hatch i:nth-child(3){bottom:8px;left:8px} .sp-hatch i:nth-child(4){bottom:8px;right:8px}
.sp-hatch b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:12px;
  background:var(--st-metal);border:var(--st-line-3);border-radius:6px}
/* the firebox */
.sp-fire{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:142px;height:58px;
  background:var(--st-ink);border-radius:10px 10px 6px 6px;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;gap:4px}
.sp-fire i{transform-origin:bottom center;animation:st-flick .5s ease-in-out infinite}
.sp-fire i:nth-child(1){width:30px;height:38px;background:var(--st-red);border-radius:50% 50% 8px 8px}
.sp-fire i:nth-child(2){width:24px;height:50px;background:var(--st-yellow);border-radius:50% 50% 6px 6px;
  animation-duration:.4s;animation-delay:.15s}
.sp-fire i:nth-child(3){width:28px;height:32px;background:var(--st-red);border-radius:50% 50% 8px 8px;
  animation-duration:.55s;animation-delay:.28s}
.sp-flare{position:absolute;inset:0;opacity:0;transition:opacity .2s;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,210,63,.55) 0%,rgba(232,72,74,.4) 55%,rgba(23,18,11,0) 82%)}
.sp-boiler.burning .sp-flare{opacity:1}
.sp-boiler.burning .sp-fire i{animation-duration:.16s}
.sp-boiler-cap{font-family:var(--st-mono);font-size:17px;letter-spacing:.14em;text-align:center;
  color:var(--st-ink);opacity:.65;margin:8px 0 0;max-width:250px}
/* the plinth the boiler stands on */
.sp-plinth-1,.sp-plinth-2,.sp-plinth-3{border:var(--st-line);margin-top:-4px}
.sp-plinth-1{width:206px;height:16px;background:var(--st-metal-2)}
.sp-plinth-2{width:238px;height:16px;background:var(--st-metal)}
.sp-plinth-3{width:270px;height:18px;background:var(--st-metal-2);border-radius:6px 6px 10px 10px;
  box-shadow:10px 10px 0 var(--st-drop)}

/* ── the console, in the middle ───────────────────────────────────────── */
.sp-console-col{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.sp-console{
  width:470px;box-sizing:border-box;background:var(--st-metal-3);border:5px solid var(--st-ink);
  border-radius:22px 26px 14px 18px;box-shadow:14px 16px 0 var(--st-drop);
  padding:14px 16px;display:flex;flex-direction:column;gap:11px;position:relative;
}
.sp-lamps{display:flex;gap:9px;align-items:center;justify-content:flex-end}
.sp-lamps small{font-family:var(--st-mono);font-size:13px;letter-spacing:.12em;opacity:.55;
  margin-right:2px}
.sp-rig.chugging .sp-lamps .st-lamp{animation:st-blink .55s steps(1) infinite}
.sp-rig.chugging .sp-lamps .st-lamp:nth-of-type(2){animation-delay:.25s}
.sp-rig.chugging .sp-lamps .st-lamp:nth-of-type(3){animation-delay:.5s}
.sp-grille{height:22px;border:var(--st-line-3);border-radius:6px;
  background:repeating-linear-gradient(90deg,var(--st-metal) 0 8px,var(--st-ink) 8px 12px)}

/* 01 the intake hopper — the forge's <label class="hopper"> restyled */
.gz-spawner .hopper{
  border:3px dashed var(--st-ink);border-radius:12px;background:var(--st-card);
  min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;cursor:pointer;padding:14px 10px 10px;position:relative;transition:background .12s;
  box-shadow:none;
}
.gz-spawner .hopper:hover{background:var(--st-card-2)}
.gz-spawner .hopper.over{background:var(--st-card-2);border-color:var(--st-red);border-style:dashed}
.gz-spawner .hopper-empty{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.gz-spawner .hopper-empty svg{width:44px;height:38px;border:var(--st-line-3);border-radius:8px;
  background:var(--st-card-2);padding:3px;color:var(--st-ink)}
.gz-spawner .hopper-empty strong{font-family:var(--st-face);font-weight:700;font-size:17px;
  color:var(--st-ink);line-height:1.3}
.gz-spawner .hopper-empty span{font-family:var(--st-face);font-size:14px;color:var(--st-ink);opacity:.7}
.gz-spawner .hopper-full{display:flex;flex-direction:column;align-items:center;gap:9px}
.gz-spawner .hopper-full img{max-height:96px;max-width:200px;object-fit:contain;
  filter:drop-shadow(4px 5px 0 var(--st-drop-soft))}
.gz-spawner .hopper-tag{font-family:var(--st-mono);font-size:18px;letter-spacing:.14em;
  color:var(--st-ink);background:var(--st-yellow);border:var(--st-line-3);
  border-radius:6px 4px 7px 5px;padding:0 10px}
.gz-spawner .hopper-slot{display:none}

/* the two little buttons under the hopper */
.sp-intake-row{display:flex;gap:8px;align-items:center}
.sp-intake-row .gz-btn{font-family:var(--st-mono);font-size:17px;letter-spacing:.12em;
  text-transform:none;background:var(--st-card);border:var(--st-line-3);color:var(--st-ink);
  border-radius:7px 5px 8px 6px;padding:2px 10px 0;box-shadow:3px 4px 0 var(--st-drop)}
.sp-intake-row .gz-btn:hover:not(:disabled){background:var(--st-yellow)}
.sp-intake-row .gz-btn:active:not(:disabled){transform:translate(3px,4px);box-shadow:none}

/* 02 the three dials. Real ones: drag a needle to overrule the picture. The
   svg keeps its 80×48 viewBox and its pin at 40,44 — forge.js does the
   pointer maths in that space — so only the paint has changed. */
.sp-gauges{display:flex;gap:10px}
.gz-spawner .gauge{flex:1;background:var(--st-card);border:var(--st-line-3);
  border-radius:10px 6px 9px 7px;padding:7px 6px 4px;display:flex;flex-direction:column;
  align-items:center;gap:2px;margin:0;cursor:ew-resize;touch-action:none;position:relative}
.gz-spawner .gauge svg{width:74px;height:46px;overflow:visible}
.gz-spawner .gauge-arc{fill:none;stroke:var(--st-ink);stroke-width:3.5;stroke-linecap:round}
.gz-spawner .gauge-ticks line{stroke:var(--st-ink);stroke-width:2.5;opacity:.5}
.gz-spawner .gauge-needle{stroke:var(--st-red);stroke-width:4.5;stroke-linecap:round;
  transform-origin:40px 44px;transition:transform .18s}
.gz-spawner .gauge.set .gauge-needle{stroke:var(--st-ink)}
.gz-spawner .gauge-pin{fill:var(--st-ink)}
.gz-spawner .gauge figcaption{font-family:var(--st-mono);font-size:15px;letter-spacing:.16em;
  color:var(--st-ink)}
.gz-spawner .gauge.set figcaption{color:var(--st-red)}
.gz-spawner .gauge:focus-visible{outline:3px solid var(--st-yellow);outline-offset:2px}

.sp-dial-note{display:flex;align-items:center;gap:8px;justify-content:space-between}
.sp-dial-note span{font-family:var(--st-face);font-size:13px;opacity:.62;line-height:1.3}

/* the readout strip: seed, pixels, hue, what the machine is doing */
.gz-spawner .readout{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;
  background:var(--st-ink);border-radius:6px;overflow:hidden}
.gz-spawner .readout > div{padding:2px 8px 1px;display:flex;flex-direction:column;
  border-right:2px solid var(--st-metal-4)}
.gz-spawner .readout > div:last-child{border-right:0}
.gz-spawner .readout dt{font-family:var(--st-mono);font-size:12px;letter-spacing:.16em;
  color:var(--st-metal);margin:0}
.gz-spawner .readout dd{font-family:var(--st-mono);font-size:16px;letter-spacing:.08em;
  color:var(--st-phos);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gz-spawner .readout-status{color:var(--st-yellow)!important}

/* detail — how many cells across the creature is cut at */
.gz-spawner .detail{display:flex;align-items:center;gap:6px}
.gz-spawner .detail > span{font-family:var(--st-mono);font-size:16px;letter-spacing:.16em}
.gz-spawner .detail button{font-family:var(--st-mono);font-size:16px;letter-spacing:.1em;
  padding:1px 9px 0;border:var(--st-line-3);border-radius:6px 4px 7px 5px;background:var(--st-card);
  color:var(--st-ink);cursor:pointer;flex:1}
.gz-spawner .detail button[aria-pressed="true"]{background:var(--st-ink);color:var(--st-card)}
.gz-spawner .detail button:hover[aria-pressed="false"]{background:var(--st-yellow)}

/* the lever, and the batch counter beside it */
.sp-go-row{display:flex;gap:12px;align-items:stretch}
.gz-spawner .forge-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:16px;
  background:var(--st-red);border:var(--st-line);border-radius:12px 16px 10px 14px;
  padding:9px 12px;cursor:pointer;box-shadow:6px 7px 0 var(--st-drop);
}
.gz-spawner .forge-btn:hover:not(:disabled){background:var(--st-red-2)}
.gz-spawner .forge-btn:active:not(:disabled){transform:translate(5px,6px);box-shadow:1px 1px 0 var(--st-drop)}
.gz-spawner .forge-btn:disabled{opacity:.5;cursor:not-allowed}
.gz-spawner .forge-btn span{font-family:var(--st-mono);font-size:32px;letter-spacing:.14em;color:#fdf3d9}
.sp-lever{width:14px;height:54px;background:var(--st-ink);border-radius:7px;position:relative;flex:none}
.sp-lever i{position:absolute;left:50%;top:4px;width:8px;height:46px;margin-left:-4px;
  background:var(--st-metal);border:2px solid var(--st-ink);border-radius:5px;
  transform-origin:bottom center;transform:rotate(-26deg);transition:transform .3s}
.sp-rig.chugging .sp-lever i{transform:rotate(30deg)}
.sp-lever i::after{content:"";position:absolute;top:-13px;left:50%;width:22px;height:22px;
  margin-left:-11px;background:var(--st-yellow);border:var(--st-line-3);border-radius:50%}
.sp-batch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:var(--st-card);border:var(--st-line-3);border-radius:8px 11px 7px 10px;padding:5px 12px}
.sp-batch > span{font-family:var(--st-mono);font-size:16px;letter-spacing:.18em}
.gz-spawner .odometer{display:contents}

/* the console's little legs */
.sp-legs{display:flex;gap:210px}
.sp-legs i{width:60px;height:26px;background:var(--st-metal);border:5px solid var(--st-ink);
  border-top-width:0;box-shadow:8px 8px 0 var(--st-drop)}

/* ── 02 the spawn chamber, on the right ───────────────────────────────── */
.sp-chamber-col{display:flex;flex-direction:column;align-items:center;position:relative;
  z-index:1;margin-left:-6px}
.sp-chamber-hood{width:66px;height:60px;border:var(--st-line);border-radius:8px 8px 0 0;
  margin-bottom:-5px;position:relative;z-index:1;
  background:repeating-linear-gradient(180deg,var(--st-metal) 0 8px,var(--st-metal-4) 8px 12px)}
.sp-chamber-hood::before{content:"";position:absolute;top:-14px;left:-8px;right:-8px;height:14px;
  background:var(--st-metal-2);border:var(--st-line);border-radius:6px}
.gz-spawner .screen{
  width:300px;height:372px;background:var(--st-ink);border:5px solid var(--st-ink);
  border-radius:18px;box-shadow:12px 14px 0 var(--st-drop);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.gz-spawner .screen::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,#262010 0%,#17120b 70%)}
.gz-spawner .screen::after{content:"02 SPAWN CHAMBER";position:absolute;top:8px;left:12px;
  font-family:var(--st-mono);font-size:16px;letter-spacing:.18em;color:var(--st-phos);opacity:.8}
.gz-spawner #forge-canvas{position:relative;max-width:100%;max-height:100%;image-rendering:pixelated}
.gz-spawner .screen-idle{
  position:absolute;font-family:var(--st-mono);font-size:28px;letter-spacing:.18em;line-height:1.3;
  color:var(--st-phos);text-align:center;
}
.gz-spawner .screen-idle .cursor{display:inline-block;width:11px;height:22px;
  background:var(--st-phos);vertical-align:-3px;margin-left:6px;animation:st-blink 1s steps(1) infinite}
.gz-spawner .screen-glass{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 3px 4px)}
.sp-chamber-foot{width:320px;height:26px;background:var(--st-metal-2);border:5px solid var(--st-ink);
  border-radius:8px 8px 12px 12px;margin-top:-6px;box-shadow:10px 11px 0 var(--st-drop);position:relative}
.sp-chamber-foot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:120px;height:8px;background:var(--st-ink);border-radius:4px;opacity:.5}

/* ── the belt, running off the end ────────────────────────────────────── */
.sp-belt-col{display:flex;flex-direction:column;align-items:center;align-self:flex-end;
  position:relative;z-index:0;margin-left:-12px}
.sp-belt{position:relative;width:300px;height:150px}
.sp-belt-strap{position:absolute;bottom:52px;left:0;width:300px;height:44px;box-sizing:border-box;
  border:5px solid var(--st-ink);border-radius:24px;box-shadow:10px 11px 0 var(--st-drop);
  background:repeating-linear-gradient(90deg,var(--st-metal) 0 14px,var(--st-ink) 14px 18px);
  animation:st-belt 2.6s linear infinite}
.sp-rig.chugging .sp-belt-strap{animation-duration:.55s}
.sp-belt-wheel{position:absolute;bottom:60px;width:28px;height:28px;background:var(--st-card);
  border:var(--st-line);border-radius:50%;animation:st-spin 4s linear infinite}
.sp-rig.chugging .sp-belt-wheel{animation-duration:.8s}
.sp-belt-wheel::after{content:"";position:absolute;top:3px;left:50%;width:6px;height:6px;
  margin-left:-3px;background:var(--st-ink);border-radius:50%}
.sp-belt-wheel-l{left:10px}.sp-belt-wheel-r{right:10px}
.sp-belt-leg{position:absolute;bottom:0;width:16px;height:52px;background:var(--st-metal);border:var(--st-line)}
.sp-belt-leg-l{left:46px}.sp-belt-leg-r{right:46px}
.sp-belt-foot{position:absolute;bottom:0;width:64px;height:12px;background:var(--st-metal-2);
  border:var(--st-line);border-radius:4px}
.sp-belt-foot-l{left:26px}.sp-belt-foot-r{right:26px}

/* ── 03 the warp bench: the plank under the whole machine ─────────────── */
.gz-spawner .gz-warp{
  border:none;padding:20px 20px 12px;margin-top:0;display:block;
  background:var(--st-metal-3);border:5px solid var(--st-ink);border-radius:16px 20px 14px 18px;
  box-shadow:12px 14px 0 var(--st-drop);transform:rotate(-.4deg);position:relative;
}
.gz-spawner .gz-warp .gz-label{display:none}
.gz-spawner .warp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px}
.gz-spawner .warp-set{display:flex;align-items:center;gap:10px;background:var(--st-card);
  border:var(--st-line-3);border-radius:9px 6px 8px 7px;padding:4px 12px}
.gz-spawner .warp-set span{font-family:var(--st-mono);font-size:17px;letter-spacing:.12em;
  width:74px;flex:none;color:var(--st-ink)}
.gz-spawner .warp-set input[type=range]{accent-color:var(--st-red);cursor:pointer;flex:1;min-width:0}
.gz-spawner .warp-set b{font-family:var(--st-mono);font-size:15px;color:var(--st-ink);opacity:.55;
  width:34px;text-align:right;flex:none}
.gz-spawner .warp-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:9px}
.gz-spawner .warp-row .gz-fine{font-family:var(--st-face);font-size:14px;color:var(--st-ink);opacity:.62}
.gz-spawner #warp-reset{font-family:var(--st-mono);font-size:17px;letter-spacing:.12em;
  background:var(--st-card);border:var(--st-line-3);border-radius:7px 5px 8px 6px;padding:2px 12px 0;
  cursor:pointer;color:var(--st-ink);flex:none}
.gz-spawner #warp-reset:hover{background:var(--st-yellow)}

/* ── the output: what came out, and how big it walks ──────────────────── */
.sp-out{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.sp-out > .st-panel{padding:12px 14px 10px;flex:1;min-width:300px}
.gz-spawner .nameplate{display:flex;flex-direction:column;gap:8px}
.gz-spawner .name-row{display:flex;align-items:center;gap:8px;margin:0}
.gz-spawner .name-in{font-family:var(--st-face);font-weight:700;font-size:21px;color:var(--st-ink);
  background:transparent;border:none;border-bottom:3px dashed var(--st-ink);flex:1;min-width:0;padding:0 2px 2px}
.gz-spawner .name-in:focus{outline:none;border-bottom-style:solid;background:var(--st-yellow)}
.gz-spawner #name-roll{font-family:var(--st-mono);font-size:19px;background:var(--st-card-2);
  border:var(--st-line-3);border-radius:6px;width:30px;height:30px;cursor:pointer;color:var(--st-ink);flex:none}
.gz-spawner #name-roll:hover{background:var(--st-yellow)}
.gz-spawner #char-traits{font-family:var(--st-face);font-size:15px;margin:0;opacity:.75}
.gz-spawner .stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}
.gz-spawner .stats li{display:flex;align-items:center;gap:8px}
.gz-spawner .stats li span{font-family:var(--st-mono);font-size:15px;letter-spacing:.14em;width:56px;flex:none}
.gz-spawner .stats li i{flex:1;height:12px;background:var(--st-card-2);border:2.5px solid var(--st-ink);
  border-radius:6px;overflow:hidden;display:block}
.gz-spawner .stats li i b{display:block;height:100%;background:var(--st-green)}
.gz-spawner .stats li em{font-family:var(--st-mono);font-size:14px;font-style:normal;width:34px;
  text-align:right;flex:none;opacity:.7}
.gz-spawner .out-row{display:flex;gap:8px}
.gz-spawner .size-set{display:flex;align-items:center;gap:10px;background:var(--st-card);
  border:var(--st-line-3);border-radius:9px 6px 8px 7px;padding:5px 12px;min-width:250px}
.gz-spawner .size-set span{font-family:var(--st-mono);font-size:17px;letter-spacing:.14em;flex:none}
.gz-spawner .size-set input[type=range]{accent-color:var(--st-red);cursor:pointer;flex:1;min-width:0}
.gz-spawner .size-set b{font-family:var(--st-mono);font-size:17px;width:34px;text-align:right;flex:none}

/* ── the ground the herd stands on ────────────────────────────────────── */
.sp-ground{position:relative;height:34px;margin-top:2px}
.sp-ground .st-tuft:nth-child(1){left:20px}
.sp-ground .st-tuft:nth-child(2){left:44%}
.sp-ground .st-tuft:nth-child(3){right:36px;left:auto}
.sp-ground p{position:absolute;left:50%;bottom:0;transform:translateX(-50%);margin:0;
  font-family:var(--st-mono);font-size:16px;letter-spacing:.1em;opacity:.5;white-space:nowrap}

/* the note taped to the side of the machine */
.sp-note{position:absolute;top:64px;left:-14px;width:178px;transform:rotate(-5deg);z-index:4}

@media (max-width:1300px){
  .sp-rig{flex-wrap:wrap;justify-content:center;gap:14px}
  .sp-stacks{display:none}
  .sp-belt-col{margin-left:0}
  .sp-note{position:static;transform:rotate(-1.5deg);width:auto;margin-bottom:8px}
}

/* ═══════════════════════════════════════════════════════════════════════
   № KN-0002 · THE BALLOT-O-TRON 3000
   The petition board's new front end. Voting is no longer a button on a
   card — you mark a paper ballot and physically post it into the machine,
   which counts it, prints the tally and (if it carried) digs the hill and
   writes the law book, exactly as the old buttons did. The board itself —
   asking, the review queue, the hill, the law book, the owner's desk — is
   still underneath; only the act of voting moved into the machine.
   ═══════════════════════════════════════════════════════════════════════ */
.gz-ballot{width:min(1080px,calc(100vw - 20px))}
.gz-st .bo-body{display:flex;flex-direction:column;gap:22px}
.bo-rig{display:flex;align-items:flex-end;gap:44px;flex-wrap:wrap}

/* ── the left column: what is being asked, and your ballot ────────────── */
.bo-left{display:flex;flex-direction:column;gap:26px;width:400px;flex:1 1 360px;padding-bottom:22px}
.bo-note{width:178px;transform:rotate(-5deg);align-self:flex-start;margin-bottom:-6px}

.bo-issue{background:var(--st-metal-3);border:5px solid var(--st-ink);
  border-radius:18px 22px 14px 20px;box-shadow:12px 14px 0 var(--st-drop);
  padding:20px 20px 16px;position:relative;transform:rotate(-.6deg)}
.bo-issue-n{position:absolute;top:-13px;right:18px;font-family:var(--st-mono);font-size:17px;
  letter-spacing:.14em;color:var(--st-ink);background:var(--st-yellow);border:var(--st-line-3);
  border-radius:6px 4px 7px 5px;padding:0 10px}
.bo-issue-q{font-weight:700;font-size:25px;line-height:1.3;color:var(--st-ink);margin:0}
.bo-issue-q small{display:block;font-weight:400;font-size:15px;opacity:.6;margin-top:6px}

/* the stage the ballot stands on — a fixed height, so the machine does not
   jump about between marking, counting and the result */
.bo-stage{min-height:290px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;position:relative}

/* ── 02 the ballot itself ─────────────────────────────────────────────── */
.bo-ballot{
  width:330px;box-sizing:border-box;background:var(--st-card);border:var(--st-line);
  border-radius:10px 6px 12px 8px;padding:24px 20px 14px;position:relative;
  transform:rotate(1.2deg);box-shadow:var(--st-shadow);
  animation:st-land .45s ease-out;touch-action:none;
  transition:transform .2s,box-shadow .2s;
}
.bo-ballot.armed{cursor:grab;transform:rotate(1.2deg) scale(1.03);
  box-shadow:14px 16px 0 var(--st-drop),0 0 0 5px var(--st-yellow)}
.bo-ballot.lifted{cursor:grabbing;transition:none;animation:none;z-index:20;
  box-shadow:20px 24px 0 var(--st-drop-soft)}
.bo-ballot > .st-tab{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:2}
.bo-grip{display:flex;flex-direction:column;gap:4px;align-items:center;margin:2px 0 10px;opacity:.5}
.bo-ballot.armed .bo-grip{opacity:1}
.bo-grip i{width:120px;height:5px;background:var(--st-ink);border-radius:3px;opacity:.35}
.bo-boxes{display:flex;flex-direction:column;gap:11px}
.bo-box{display:flex;align-items:center;gap:14px;background:var(--st-card-2);
  border:var(--st-line-3);border-radius:9px 6px 8px 7px;padding:7px 13px;cursor:pointer;
  font-family:var(--st-face);text-align:left;width:100%}
.bo-box:nth-child(2){border-radius:7px 9px 6px 10px}
.bo-box:hover{background:#fffcef}
.bo-box i{width:40px;height:40px;flex:none;background:#fff;border:var(--st-line-3);
  border-radius:6px 4px 7px 5px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:32px;line-height:1;color:var(--st-red);font-style:normal}
.bo-box b{font-weight:700;font-size:22px;color:var(--st-ink)}
.bo-box u{margin-left:auto;width:20px;height:20px;border-radius:50%;border:var(--st-line-3);
  text-decoration:none}
.bo-box-yes u{background:var(--st-green)} .bo-box-no u{background:var(--st-red)}
.bo-hint{border-top:3px dashed var(--st-ink-55);margin-top:13px;padding-top:8px;text-align:center;
  font-size:15px;color:var(--st-ink);opacity:.75}
.bo-ballot.armed .bo-hint{font-weight:700;color:var(--st-red);opacity:1}

.bo-casting{font-family:var(--st-mono);font-size:21px;letter-spacing:.16em;opacity:.6}
.bo-done{display:flex;flex-direction:column;align-items:center;gap:22px}
.bo-stamp{font-family:var(--st-mono);font-size:28px;letter-spacing:.18em;color:var(--st-red);
  border:4px solid var(--st-red);border-radius:8px 5px 9px 6px;padding:5px 18px 2px;
  transform:rotate(-8deg);animation:st-stamp .4s ease-out both}
@keyframes st-stamp{0%{transform:rotate(-14deg) scale(2.4);opacity:0}
                    60%{transform:rotate(-8deg) scale(.92);opacity:1}
                    100%{transform:rotate(-8deg) scale(1)}}
.bo-next{font-family:var(--st-mono);font-size:28px;letter-spacing:.18em;color:#fdf3d9;
  background:var(--st-red);border:var(--st-line);border-radius:12px 16px 10px 14px;
  padding:8px 24px 5px;cursor:pointer;box-shadow:var(--st-shadow-sm)}
.bo-next:hover{background:var(--st-red-2)}
.bo-next:active{transform:translate(5px,6px);box-shadow:1px 1px 0 var(--st-drop)}
.bo-empty{font-family:var(--st-mono);font-size:20px;letter-spacing:.14em;opacity:.55;
  text-align:center;line-height:1.4;max-width:300px}

/* ── the machine ──────────────────────────────────────────────────────── */
.bo-machine-col{display:flex;flex-direction:column;align-items:center;position:relative;flex:0 0 auto}
.bo-machine-col .sp-stack{align-self:flex-start;margin-left:70px}
.bo-machine-col .sp-stack .sp-stack-pipe{height:51px}
.bo-machine{
  width:440px;box-sizing:border-box;background:var(--st-metal-3);border:5px solid var(--st-ink);
  border-radius:22px 26px 14px 18px;box-shadow:14px 16px 0 var(--st-drop);
  padding:14px 16px;display:flex;flex-direction:column;gap:11px;position:relative;z-index:1;margin-top:-5px;
}
.bo-machine.counting{animation:st-shake .18s linear infinite}
.bo-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bo-top .st-plate{font-size:22px}
.bo-lamps{display:flex;gap:9px;align-items:center}
.bo-lamps .st-lamp:nth-child(3){opacity:1}
.bo-machine.counting .bo-lamps .st-lamp{opacity:1;animation:st-blink .55s steps(1) infinite}
.bo-machine.counting .bo-lamps .st-lamp:nth-child(2){animation-delay:.25s}
.bo-machine.counting .bo-lamps .st-lamp:nth-child(3){animation-delay:.5s}
.bo-machine-col .st-puff-go{display:none}
.bo-machine-col.counting .st-puff-go{display:block}

/* 03 the tally screen */
.bo-screen{height:250px;background:var(--st-ink);border:var(--st-line);border-radius:14px;
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.bo-screen::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,#262010 0%,#17120b 70%)}
.bo-screen::after{content:"03 TALLY SCREEN";position:absolute;top:8px;left:12px;z-index:2;
  font-family:var(--st-mono);font-size:16px;letter-spacing:.18em;color:var(--st-phos);opacity:.8}
.bo-screen-in{position:relative;z-index:1;width:100%;box-sizing:border-box}
.bo-say{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;text-align:center}
.bo-say p{font-family:var(--st-mono);font-size:28px;letter-spacing:.18em;line-height:1.3;
  color:var(--st-phos);margin:0;white-space:pre-line}
.bo-say.warn p{color:var(--st-red)}
.bo-say i{width:12px;height:24px;background:var(--st-phos);flex:none;
  animation:st-blink 1s steps(1) infinite}
.bo-say.warn i{background:var(--st-red)}
.bo-results{padding:34px 22px 14px;display:flex;flex-direction:column;gap:13px;
  animation:st-pop .35s ease-out}
.bo-results > b{font-family:var(--st-mono);font-size:18px;letter-spacing:.18em;color:var(--st-phos);
  opacity:.7;font-weight:400}
.bo-bar{display:flex;align-items:center;gap:12px}
.bo-bar > span{width:44px;font-family:var(--st-mono);font-size:22px;letter-spacing:.14em}
.bo-bar > i{flex:1;height:22px;background:#2a2416;border:2px solid #4a4130;border-radius:4px;
  overflow:hidden;display:block}
.bo-bar > i > b{display:block;height:100%;width:0;transition:width .8s ease-out}
.bo-bar > em{width:70px;text-align:right;font-family:var(--st-mono);font-size:22px;font-style:normal}
.bo-bar-yes span,.bo-bar-yes em{color:var(--st-phos)} .bo-bar-yes i b{background:var(--st-phos)}
.bo-bar-no span,.bo-bar-no em{color:var(--st-red)} .bo-bar-no i b{background:var(--st-red)}
.bo-verdict{text-align:center;font-family:var(--st-mono);font-size:24px;letter-spacing:.18em;
  color:var(--st-yellow);margin-top:2px}
.bo-yours{text-align:center;font-family:var(--st-mono);font-size:16px;letter-spacing:.14em;
  color:var(--st-phos);opacity:.55}

/* 04 the slot */
.bo-slot-wrap{position:relative;padding-top:10px}
.bo-slot-wrap > .st-tab{position:absolute;top:-3px;left:12px;z-index:2}
.bo-slot{height:54px;background:var(--st-metal);border:var(--st-line);
  border-radius:10px 8px 11px 9px;position:relative;display:flex;align-items:center;
  justify-content:center}
.bo-slot.over{outline:4px dashed var(--st-red);outline-offset:5px;background:var(--st-metal-2)}
.bo-slot i{width:250px;height:14px;background:var(--st-ink);border-radius:7px;position:relative;z-index:1}
.bo-slot em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;
  font-family:var(--st-mono);font-size:15px;letter-spacing:.14em;opacity:.55}
.bo-suck{position:absolute;left:50%;top:22px;width:180px;height:54px;background:var(--st-card);
  border:var(--st-line-3);border-radius:6px 4px 7px 5px;transform-origin:bottom center;z-index:0;
  animation:st-suck .7s ease-in forwards}
@keyframes st-suck{0%{transform:translate(-50%,-66px) scaleY(1);opacity:1}
                   75%{opacity:1}
                   100%{transform:translate(-50%,-6px) scaleY(.15);opacity:0}}

.bo-cast-row{display:flex;gap:14px;align-items:center;justify-content:space-between}
.bo-cast{display:flex;align-items:center;gap:10px;background:var(--st-card);border:var(--st-line-3);
  border-radius:8px 11px 7px 10px;padding:5px 12px}
.bo-cast > span{font-family:var(--st-mono);font-size:16px;letter-spacing:.18em}
.bo-cast-row > p{margin:0;font-size:14px;opacity:.55;text-align:right;line-height:1.3}

/* ── the board underneath ─────────────────────────────────────────────── */
.bo-board{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.bo-board > .bo-board-col{display:flex;flex-direction:column;gap:11px;min-width:0}
.gz-ballot .gz-label{font-family:var(--st-mono);font-size:17px;letter-spacing:.16em;
  color:var(--st-ink);opacity:.75}
.gz-ballot .gz-label i{font-family:var(--st-mono);font-style:normal;background:var(--st-ink);
  color:var(--st-card);border-radius:4px;padding:0 7px}
.gz-ballot .gz-label::after{background:var(--st-ink);opacity:.25}
.gz-ballot .gz-fine{font-family:var(--st-face);font-size:14px;color:var(--st-ink);opacity:.62}

.gz-ballot .pb-loop{display:flex;align-items:center;gap:7px;font-family:var(--st-mono);font-size:17px;
  letter-spacing:.14em;background:var(--st-card);border:var(--st-line-3);border-radius:9px 6px 8px 7px;
  padding:4px 12px}
.gz-ballot .pb-loop span{opacity:.4;padding:0 4px;border-radius:4px}
.gz-ballot .pb-loop span.on{opacity:1;background:var(--st-yellow);color:var(--st-ink)}
.gz-ballot .pb-loop i{opacity:.35;font-style:normal}

.gz-ballot .pb-ask{display:flex;gap:8px}
.gz-ballot .pb-ask input{flex:1;min-width:0;font-family:var(--st-face);font-size:16px;
  color:var(--st-ink);background:var(--st-card-2);border:var(--st-line-3);
  border-radius:7px 5px 8px 6px;padding:5px 10px}
.gz-ballot .pb-ask input::placeholder{color:var(--st-ink);opacity:.42}
.gz-ballot .pb-ask input:focus{outline:3px solid var(--st-yellow);outline-offset:1px}
.gz-ballot .pb-ask .gz-btn{font-family:var(--st-mono);font-size:17px;letter-spacing:.12em;
  text-transform:uppercase;background:var(--st-yellow);border:var(--st-line-3);color:var(--st-ink);
  border-radius:7px 5px 8px 6px;padding:2px 12px 0;box-shadow:3px 4px 0 var(--st-drop)}
.gz-ballot .pb-ask .gz-btn:active{transform:translate(3px,4px);box-shadow:none}

.gz-ballot .pb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;
  max-height:340px;overflow:auto}
.gz-ballot .pb-card{background:var(--st-card);border:var(--st-line-3);border-radius:10px 6px 9px 7px;
  padding:9px 12px 10px;display:flex;flex-direction:column;gap:7px;box-shadow:5px 6px 0 var(--st-drop-soft)}
.gz-ballot .pb-card[data-status="passed"]{background:#e9f3dd}
.gz-ballot .pb-card[data-status="failed"],.gz-ballot .pb-card[data-status="removed"]{opacity:.6}
.gz-ballot .pb-card[data-status="drained"]{opacity:.55}
.gz-ballot .pb-card.on-machine{outline:4px solid var(--st-yellow);outline-offset:2px}
.gz-ballot .pb-card-top{display:flex;align-items:center;gap:8px;font-family:var(--st-mono);
  font-size:15px;letter-spacing:.12em}
.gz-ballot .pb-num{color:var(--st-ink);opacity:.55}
.gz-ballot .pb-kind{background:var(--st-ink);color:var(--st-card);border-radius:4px;padding:0 7px}
.gz-ballot .pb-status{margin-left:auto;opacity:.55}
.gz-ballot .pb-qtext{margin:0;font-size:17px;font-weight:700;line-height:1.3}
.gz-ballot .pb-qtext small{font-weight:400;opacity:.6}
.gz-ballot .pb-tally{position:relative;height:12px;background:var(--st-card-2);border:2.5px solid var(--st-ink);
  border-radius:6px;overflow:hidden}
.gz-ballot .pb-tally i{display:block;height:100%;background:var(--st-green)}
.gz-ballot .pb-tally.empty i{background:var(--st-metal)}
.gz-ballot .pb-tally b{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--st-ink);
  transform:translateX(-50%)}
.gz-ballot .pb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gz-ballot .pb-vote{font-family:var(--st-mono);font-size:16px;letter-spacing:.12em;
  border:2.5px solid var(--st-ink);border-radius:6px 4px 7px 5px;padding:0 9px;background:var(--st-card-2)}
.gz-ballot .pb-vote.yes.mine{background:var(--st-green);color:var(--st-ink)}
.gz-ballot .pb-vote.no.mine{background:var(--st-red);color:var(--st-card)}
.gz-ballot .pb-line{font-size:14px;opacity:.6;margin-left:auto}
.gz-ballot .pb-mod{display:flex;gap:6px;flex-wrap:wrap}
.gz-ballot .pb-act{font-family:var(--st-mono);font-size:15px;letter-spacing:.1em;cursor:pointer;
  background:var(--st-card-2);border:2.5px solid var(--st-ink);border-radius:6px 4px 7px 5px;
  padding:1px 9px 0;color:var(--st-ink)}
.gz-ballot .pb-act:hover{background:var(--st-yellow)}
.gz-ballot .pb-act.ok{background:var(--st-green)}
.gz-ballot .pb-act.load{background:var(--st-yellow)}
.gz-ballot .pb-empty{font-size:15px;opacity:.55;list-style:none;padding:6px 0}
.gz-ballot .pb-review{display:flex;flex-direction:column;gap:6px}
.gz-ballot .pb-review-h{font-family:var(--st-mono);font-size:16px;letter-spacing:.16em;opacity:.7}
.gz-ballot .pb-review-item{display:flex;align-items:center;gap:8px;background:var(--st-card);
  border:2.5px dashed var(--st-ink);border-radius:8px;padding:5px 10px;font-size:15px}
.gz-ballot .pb-review-item span{flex:1;min-width:0}

.gz-ballot .hill{background:var(--st-card-2);border:var(--st-line);border-radius:12px 10px 11px 13px;
  overflow:hidden;box-shadow:var(--st-shadow-sm)}
.gz-ballot .hill canvas{display:block;width:100%;height:auto}
.gz-ballot .hill-cap{font-size:14px;opacity:.65;margin:0;min-height:2.4em;line-height:1.3}
.gz-ballot .lawbook{list-style:none;margin:0;padding:10px 12px;background:var(--st-card-2);
  border:var(--st-line-3);border-radius:9px 6px 8px 7px;display:flex;flex-direction:column;gap:7px;
  max-height:200px;overflow:auto;font-size:15px;line-height:1.35}
.gz-ballot .lawbook li b{font-family:var(--st-mono);letter-spacing:.06em}
.gz-ballot .lawbook li span{opacity:.62}
.gz-ballot .lawbook li.repealed{text-decoration:line-through;opacity:.5}
.gz-ballot .pb-desk{display:flex;flex-direction:column;gap:9px;background:var(--st-metal-3);
  border:var(--st-line-3);border-radius:10px 7px 9px 8px;padding:10px 12px}
.gz-ballot .pb-range{display:flex;align-items:center;gap:9px;font-family:var(--st-mono);font-size:16px;
  letter-spacing:.12em}
.gz-ballot .pb-range input{accent-color:var(--st-red);flex:1;min-width:0}
.gz-ballot .pb-check{display:flex;align-items:center;gap:8px;font-size:14px}
.gz-ballot .pb-check input{accent-color:var(--st-red);width:16px;height:16px}
.gz-ballot .intake-row{display:flex;gap:8px}
.gz-ballot .intake-row .gz-btn{font-family:var(--st-mono);font-size:16px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--st-card);border:2.5px solid var(--st-ink);
  color:var(--st-ink);border-radius:7px 5px 8px 6px;padding:2px 10px 0}
.gz-ballot .intake-row .gz-btn:hover{background:var(--st-yellow)}

@media (max-width:1000px){
  .bo-rig{flex-direction:column;align-items:stretch}
  .bo-left{width:auto}
  .bo-board{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   № KN-0010 · THE BUG FARM
   A place, not a panel. A red barn behind a fenced pen, a silo counting the
   backlog, and every reported bug loose in the field at the size of how many
   people have hit it. The bugs are DOM now rather than painted into a canvas
   — they have to grow limbs, spikes and a third eye as they mutate, and CSS
   does that better than a bitmap does.

   THE PEN IS A SANDWICH: the back fence paints first (z 0), then the ground
   dressing (z 1), the barn and silo (z 2), the bugs (z 3), and the front
   fence LAST (z 5) — so the animals are genuinely between the two fences. A
   bug you have tapped lifts to z 9 so its bubble clears the front rail.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes bf-pace  { from{transform:translateX(-34px)} to{transform:translateX(34px)} }
@keyframes bf-leg   { from{transform:rotate(-12deg)} to{transform:rotate(14deg)} }
@keyframes bf-leg-r { from{transform:rotate(12deg)} to{transform:rotate(-14deg)} }
@keyframes bf-egg   { 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} }
@keyframes bf-die   { 0%{transform:rotate(0) translateY(0);opacity:1}
                      35%{transform:rotate(180deg) translateY(-26px);opacity:1}
                      100%{transform:rotate(180deg) translateY(28px);opacity:0} }
@keyframes bf-wing-l{ 0%,100%{transform:rotate(-26deg)} 50%{transform:rotate(-50deg)} }
@keyframes bf-wing-r{ 0%,100%{transform:rotate(26deg)} 50%{transform:rotate(50deg)} }

.gz-bugfarm{width:min(1240px,calc(100vw - 20px))}
.gz-st .bf-body2{display:flex;flex-direction:column;gap:16px}

/* the field itself */
.bf-scene{position:relative;width:1180px;max-width:100%;height:700px;overflow:hidden;
  border-radius:10px}

/* ── the fences ───────────────────────────────────────────────────────── */
.bf-fence{position:absolute;left:0;right:0}
.bf-fence i{position:absolute;bottom:0;background:var(--st-metal-2);border:var(--st-line);
  border-radius:7px 7px 2px 2px}
.bf-fence b{position:absolute;left:0;right:0;height:13px;background:var(--st-metal);
  border:var(--st-line);border-radius:7px}
.bf-fence-back{bottom:452px;height:84px;z-index:0}
.bf-fence-back i{width:18px;height:84px}
.bf-fence-back b:nth-of-type(1){top:16px} .bf-fence-back b:nth-of-type(2){top:48px}
.bf-fence-front{bottom:0;height:88px;z-index:5;pointer-events:none}
.bf-fence-front i{width:20px;height:88px}
.bf-fence-front b{height:14px}
.bf-fence-front b:nth-of-type(1){top:14px} .bf-fence-front b:nth-of-type(2){top:50px}
.bf-fence-front > .st-tab{position:absolute;top:-12px;left:400px}

/* ── the silo, counting the backlog ───────────────────────────────────── */
.bf-silo{position:absolute;left:180px;bottom:210px;z-index:2;display:flex;
  flex-direction:column;align-items:center}
.bf-silo-cap{width:180px;height:78px;background:var(--st-red);border:5px solid var(--st-ink);
  border-radius:100px 100px 10px 10px;position:relative;z-index:1;
  background-image:repeating-linear-gradient(90deg,transparent 0 30px,rgba(23,18,11,.14) 30px 35px)}
.bf-silo-cap::after{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  width:24px;height:20px;background:var(--st-red);border:var(--st-line);border-radius:50%}
.bf-silo-tube{width:156px;height:272px;background:var(--st-metal);border:5px solid var(--st-ink);
  border-top-width:0;margin-top:-8px;box-shadow:10px 12px 0 var(--st-drop);box-sizing:border-box;
  background-image:repeating-linear-gradient(180deg,transparent 0 44px,rgba(23,18,11,.16) 44px 49px);
  display:flex;flex-direction:column;align-items:center;padding-top:16px;gap:9px}
.bf-silo-num{display:flex;flex-direction:column;align-items:center;background:var(--st-ink);
  border-radius:6px;padding:2px 14px 4px}
.bf-silo-num b{font-family:var(--st-mono);font-size:30px;letter-spacing:.14em;color:var(--st-phos);
  line-height:1;font-weight:400}
.bf-silo-num span{font-family:var(--st-mono);font-size:13px;letter-spacing:.2em;color:var(--st-phos);opacity:.7}
.bf-gauge{width:30px;height:112px;background:var(--st-card);border:var(--st-line);border-radius:14px;
  position:relative;overflow:hidden}
.bf-gauge i{position:absolute;bottom:0;left:0;right:0;background:var(--st-green);transition:height .6s ease}

/* ── the barn ─────────────────────────────────────────────────────────── */
.bf-barn{position:absolute;left:372px;bottom:210px;z-index:2;display:flex;
  flex-direction:column;align-items:center}
.bf-roof{width:480px;height:128px;background:var(--st-metal-4);border:5px solid var(--st-ink);
  border-radius:66px 66px 0 0;position:relative;z-index:1;
  background-image:repeating-linear-gradient(180deg,transparent 0 22px,rgba(23,18,11,.18) 22px 26px)}
.bf-chimney{position:absolute;top:-40px;right:84px;width:22px;height:46px;background:var(--st-metal-2);
  border:var(--st-line);border-radius:6px 6px 0 0}
.bf-hayloft{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:54px;
  background:var(--st-ink);border:var(--st-line-3);border-color:var(--st-card);border-bottom-width:0;
  border-radius:10px 10px 0 0;overflow:hidden}
.bf-hayloft::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  width:64px;height:32px;background:var(--st-yellow);border:var(--st-line-3);border-radius:50% 50% 0 0}
.bf-front{width:440px;height:250px;background:var(--st-red);border:5px solid var(--st-ink);
  margin-top:-5px;box-shadow:12px 14px 0 var(--st-drop);position:relative;
  background-image:repeating-linear-gradient(90deg,transparent 0 34px,rgba(23,18,11,.1) 34px 38px)}
.bf-front::before,.bf-front::after{content:"";position:absolute;top:0;bottom:0;width:13px;
  background:var(--st-card)}
.bf-front::before{left:0;border-right:var(--st-line-3)}
.bf-front::after{right:0;border-left:var(--st-line-3)}
.bf-window{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:50px;height:50px;
  background:var(--st-card);border:var(--st-line);border-radius:50%}
.bf-window::before,.bf-window::after{content:"";position:absolute;background:var(--st-ink)}
.bf-window::before{top:50%;left:4%;right:4%;height:3px;margin-top:-1.5px}
.bf-window::after{left:50%;top:4%;bottom:4%;width:3px;margin-left:-1.5px}

.bf-swat-tag{position:absolute;bottom:172px;left:28px;z-index:4;background:var(--st-yellow);
  border:var(--st-line-3);border-radius:5px 8px 4px 7px;padding:2px 10px;transform:rotate(-3deg);
  cursor:pointer;box-shadow:4px 5px 0 rgba(23,18,11,.7);text-align:left}
.bf-swat-tag:hover{background:#ffe27a}
.bf-swat-tag b{display:block;font-family:var(--st-mono);font-size:17px;letter-spacing:.14em;
  color:var(--st-ink);line-height:1.2;white-space:nowrap;font-weight:400}
.bf-swat-tag span{display:block;font-size:11.5px;opacity:.65;line-height:1.3;white-space:nowrap}

.bf-doors{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:190px;height:170px;
  display:flex;cursor:pointer;border:5px solid var(--st-ink);border-bottom-width:0;
  background:var(--st-card);box-sizing:border-box;z-index:2;padding:0}
.bf-doors:hover{outline:3px dashed var(--st-yellow);outline-offset:3px}
.bf-doors i{flex:1;background:#cf4345;position:relative;overflow:hidden;border:var(--st-line-3)}
.bf-doors i:first-child{margin:6px 3px 0 6px}
.bf-doors i:last-child{margin:6px 6px 0 3px}
.bf-doors i::before,.bf-doors i::after{content:"";position:absolute;top:50%;left:50%;width:220px;
  height:9px;background:var(--st-card);border:2.5px solid var(--st-ink)}
.bf-doors i::before{transform:translate(-50%,-50%) rotate(60deg)}
.bf-doors i::after{transform:translate(-50%,-50%) rotate(-60deg)}
.bf-doors i:last-child::before{transform:translate(-50%,-50%) rotate(-60deg)}
.bf-doors i:last-child::after{transform:translate(-50%,-50%) rotate(60deg)}

/* what is inside the barn once the doors are open */
.bf-inside{position:absolute;inset:18px 20px 10px;background:var(--st-ink);border-radius:10px;
  z-index:3;display:flex;flex-direction:column;padding:9px 12px 7px;box-sizing:border-box;
  animation:st-pop .3s ease-out}
.bf-inside-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bf-inside-top b{font-family:var(--st-mono);font-size:20px;letter-spacing:.16em;color:var(--st-phos);
  font-weight:400}
.bf-inside-top button{font-family:var(--st-mono);font-size:15px;letter-spacing:.12em;color:var(--st-ink);
  background:var(--st-card);border:none;border-radius:5px;padding:1px 8px;cursor:pointer}
.bf-inside-top button:hover{background:var(--st-yellow)}
.bf-swatted{flex:1;overflow-y:auto;margin-top:6px;display:flex;flex-direction:column;gap:6px;
  min-height:0;list-style:none;padding:0}
.bf-swatted li{display:flex;align-items:center;gap:10px;background:rgba(244,236,213,.07);
  border:2px solid rgba(244,236,213,.22);border-radius:8px;padding:4px 9px;flex-shrink:0}
.bf-swatted .bf-corpse{position:relative;width:28px;height:28px;flex:none}
.bf-swatted .bf-corpse i{position:absolute;bottom:2px;left:0;right:0;height:17px;
  border:2.5px solid var(--st-card);border-radius:50%}
.bf-swatted .bf-corpse u{position:absolute;top:0;width:2.5px;height:9px;background:var(--st-card);
  text-decoration:none}
.bf-swatted .bf-corpse u:nth-of-type(1){left:5px;transform:rotate(-28deg)}
.bf-swatted .bf-corpse u:nth-of-type(2){left:12px;transform:rotate(-6deg)}
.bf-swatted .bf-corpse u:nth-of-type(3){right:12px;transform:rotate(6deg)}
.bf-swatted .bf-corpse u:nth-of-type(4){right:5px;transform:rotate(28deg)}
.bf-swatted p{flex:1;min-width:0;font-size:13.5px;color:var(--st-card);text-decoration:line-through;
  opacity:.85;line-height:1.25;margin:0}
.bf-swatted em{font-family:var(--st-mono);font-size:15px;letter-spacing:.08em;color:var(--st-phos);
  white-space:nowrap;font-style:normal}
.bf-inside > small{font-size:12px;color:rgba(244,236,213,.55);margin-top:4px}
.bf-none{font-family:var(--st-mono);font-size:17px;color:rgba(244,236,213,.5);letter-spacing:.14em;
  padding-top:8px;list-style:none}

/* ── the ground ───────────────────────────────────────────────────────── */
.bf-dirt{position:absolute;background:#ddd3c0;border:3px solid var(--st-drop-soft);
  border-radius:50%;z-index:1}
.bf-scene .st-tuft{z-index:1;bottom:auto}
.bf-scene .st-tuft i{border-width:3px}

/* ── a bug ────────────────────────────────────────────────────────────── */
.bf-bug{position:absolute;z-index:3}
.bf-bug.picked{z-index:9}
.bf-pace{position:relative;animation:bf-pace var(--dur,7s) ease-in-out var(--delay,0s) infinite alternate}
.bf-bug.picked .bf-pace,.bf-bug.hatching .bf-pace,.bf-bug.dying .bf-pace{animation-play-state:paused}

/* freshly reported: an egg that wobbles for a moment before it hatches */
.bf-egg{position:relative;width:36px;height:46px;background:var(--st-card-2);
  border:3.5px solid var(--st-ink);border-radius:50% 50% 46% 46%;
  animation:bf-egg .45s ease-in-out infinite;transform-origin:bottom center}
.bf-egg i{position:absolute;height:3px;background:var(--st-ink)}
.bf-egg i:nth-child(1){top:42%;left:20%;width:28%;transform:rotate(24deg)}
.bf-egg i:nth-child(2){top:50%;left:46%;width:28%;transform:rotate(-20deg)}

.bf-cre{position:relative;width:var(--s);height:var(--s);cursor:pointer;
  transition:width .5s ease,height .5s ease;animation:st-pop .45s ease-out;
  background:none;border:0;padding:0;display:block}
.bf-bug.dying .bf-cre{animation:bf-die .9s ease-in forwards}
.bf-cre-body{position:absolute;left:9%;right:9%;top:29%;bottom:3%;background:var(--hue);
  border:3px solid var(--st-ink);border-radius:48% 48% 46% 46%;z-index:1}
.bf-cre-body::before{content:"";position:absolute;top:8%;left:50%;transform:translateX(-50%);
  width:3px;height:80%;background:rgba(23,18,11,.3)}
.bf-cre-body i{position:absolute;background:rgba(23,18,11,.28)}
.bf-mark-spots i:nth-of-type(1){top:24%;left:20%;width:15%;height:15%;border-radius:50%}
.bf-mark-spots i:nth-of-type(2){top:48%;right:18%;width:13%;height:13%;border-radius:50%}
.bf-mark-stripes i:nth-of-type(1){top:34%;left:7%;right:7%;height:9%;border-radius:6px;
  background:rgba(23,18,11,.26)}
.bf-mark-stripes i:nth-of-type(2){top:58%;left:5%;right:5%;height:9%;border-radius:6px;
  background:rgba(23,18,11,.26)}

.bf-leg{position:absolute;height:3.5px;background:var(--st-ink);border-radius:2px;z-index:0;
  animation:bf-leg .36s ease-in-out infinite alternate}
.bf-leg-l{left:-15%;width:32%;transform-origin:right center}
.bf-leg-r{right:-15%;width:32%;transform-origin:left center;animation-name:bf-leg-r}
.bf-leg-1{top:36%} .bf-leg-2{top:55%;width:34%;animation-delay:.12s}
.bf-leg-3{top:74%;animation-delay:.24s}
.bf-leg-l.bf-leg-2{left:-17%} .bf-leg-r.bf-leg-2{right:-17%}

.bf-wing{position:absolute;top:14%;width:48%;height:42%;background:var(--st-card);
  border:3px solid var(--st-ink);border-radius:60% 60% 50% 50%;z-index:0}
.bf-wing-l{left:-22%;transform-origin:right bottom;animation:bf-wing-l .4s ease-in-out infinite}
.bf-wing-r{right:-22%;transform-origin:left bottom;animation:bf-wing-r .4s ease-in-out infinite}

.bf-spike{position:absolute;background:var(--st-yellow);border:3px solid var(--st-ink);
  transform:rotate(45deg);z-index:2}
.bf-spike:nth-of-type(1){top:26%;left:23%;width:13%;height:13%}
.bf-spike:nth-of-type(2){top:21%;left:43%;width:15%;height:15%}
.bf-spike:nth-of-type(3){top:26%;left:63%;width:13%;height:13%}

.bf-head{position:absolute;top:0;left:50%;transform:translateX(-50%);width:46%;height:38%;
  background:var(--hue);border:3px solid var(--st-ink);border-radius:50%;z-index:2}
.bf-ant{position:absolute;bottom:88%;width:3px;height:42%;background:var(--st-ink);
  transform-origin:bottom center}
.bf-ant-l{left:16%;transform:rotate(-24deg)} .bf-ant-r{right:16%;transform:rotate(24deg)}
.bf-eye{position:absolute;top:22%;width:32%;height:36%;background:var(--st-card-2);
  border:2px solid var(--st-ink);border-radius:50%}
.bf-eye::after{content:"";position:absolute;top:28%;left:32%;width:38%;height:40%;
  background:var(--st-ink);border-radius:50%}
.bf-eye-l{left:10%} .bf-eye-r{right:10%}
.bf-eye-3{top:-20%;left:50%;transform:translateX(-50%);width:28%;height:32%;
  background:var(--st-yellow);right:auto}

/* a bug on its back — a moderator could not reproduce it */
.bf-bug.out .bf-cre{transform:rotate(180deg);opacity:.75}
.bf-bug.out .bf-pace{animation-play-state:paused}

/* ── the bubble that opens when you tap one ───────────────────────────── */
.bf-bubble{position:absolute;width:264px;background:var(--st-card);border:var(--st-line);
  border-radius:12px 9px 13px 10px;box-shadow:8px 9px 0 var(--st-drop);padding:10px 12px 12px;
  z-index:9;text-align:left;cursor:default}
.bf-bubble::after{content:"";position:absolute;bottom:-10px;left:var(--tail,calc(50% - 9px));
  width:14px;height:14px;background:var(--st-card);border-right:var(--st-line);
  border-bottom:var(--st-line);transform:rotate(45deg)}
.bf-bub-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.bf-bub-top b{font-weight:700;font-size:16px;line-height:1.25}
.bf-bub-x{font-family:var(--st-mono);font-size:17px;background:none;border:none;cursor:pointer;
  padding:0;line-height:1;color:var(--st-ink)}
.bf-bub-meta{font-family:var(--st-mono);font-size:16px;letter-spacing:.06em;opacity:.65;margin:2px 0 0}
.bf-bub-tier{display:flex;gap:7px;margin-top:6px;align-items:center;flex-wrap:wrap}
.bf-bub-tier b{font-family:var(--st-mono);font-size:15px;letter-spacing:.14em;color:var(--st-ink);
  background:var(--st-yellow);border:var(--st-line-3);border-radius:5px 4px 6px 4px;padding:0 8px;
  white-space:nowrap;font-weight:400}
.bf-bub-tier span{font-family:var(--st-mono);font-size:15px;letter-spacing:.08em;opacity:.55;
  white-space:nowrap}
.bf-ev{display:flex;gap:6px;margin-top:8px}
.bf-ev img{width:54px;height:54px;object-fit:cover;border:var(--st-line-3);border-radius:6px;
  cursor:zoom-in;background:var(--st-card-2);display:block}
.bf-bub-row{display:flex;gap:8px;margin-top:10px}
.bf-metoo{flex:1;font-family:var(--st-mono);font-size:19px;letter-spacing:.14em;color:#fdf3d9;
  background:var(--st-red);border:var(--st-line-3);border-radius:8px 6px 9px 7px;padding:3px 0 1px;
  cursor:pointer;box-shadow:4px 5px 0 var(--st-drop)}
.bf-metoo:hover{background:var(--st-red-2)}
.bf-metoo:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--st-drop)}
.bf-metoo.mine{background:var(--st-ink);color:var(--st-yellow)}
.bf-bub-act{font-family:var(--st-mono);font-size:19px;letter-spacing:.14em;color:var(--st-card);
  background:var(--st-ink);border:var(--st-line-3);border-radius:7px 9px 6px 8px;padding:3px 11px 1px;
  cursor:pointer;box-shadow:4px 5px 0 var(--st-drop)}
.bf-bub-act:hover{color:var(--st-yellow)}
.bf-bub-act:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--st-drop)}

/* ── 01 the wanted poster ─────────────────────────────────────────────── */
.bf-poster{position:absolute;z-index:6;width:300px}
.bf-poster-in{box-sizing:border-box;width:100%;background:var(--st-card);border:var(--st-line);
  border-radius:6px 10px 8px 12px;box-shadow:10px 12px 0 var(--st-drop);padding:26px 15px 11px;
  position:relative;transform:rotate(-1.6deg);display:flex;flex-direction:column;gap:7px}
.bf-pin{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:15px;height:15px;
  background:var(--st-metal);border:var(--st-line-3);border-radius:50%;cursor:grab;padding:0;
  touch-action:none}
.bf-poster.lifted .bf-pin{cursor:grabbing}
.bf-wanted{font-family:var(--st-mono);font-size:44px;letter-spacing:.32em;text-indent:.32em;
  text-align:center;line-height:1;border-bottom:3px solid var(--st-ink);padding-bottom:4px;
  cursor:grab;user-select:none;touch-action:none;margin:0}
.bf-wanted-sub{font-family:var(--st-mono);font-size:15px;letter-spacing:.28em;opacity:.6;
  text-align:center;margin:-4px 0 0;cursor:grab;user-select:none;touch-action:none}
.bf-poster-mid{display:flex;gap:10px;align-items:stretch}
.bf-mugshot{width:112px;height:120px;background:var(--st-card-2);border:var(--st-line-3);
  border-radius:6px;position:relative;display:flex;align-items:center;justify-content:center;
  flex:none;background-image:repeating-linear-gradient(180deg,transparent 0 20px,rgba(23,18,11,.08) 20px 23px)}
.bf-mugshot .bf-cre{width:72px;height:72px;margin-bottom:12px;cursor:default;animation:none;
  transition:none}
.bf-mugshot > span{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  font-family:var(--st-mono);font-size:13px;letter-spacing:.16em;opacity:.6;white-space:nowrap}
.bf-drop{flex:1;min-width:0;border:3px dashed var(--st-ink);border-radius:8px;
  background:var(--st-card-2);cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;padding:8px}
.bf-drop:hover,.bf-drop.over{background:#fffbe9}
.bf-drop-q{width:32px;height:26px;border:var(--st-line-3);border-radius:6px;background:var(--st-card);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.bf-drop-cap{font-weight:700;font-size:12.5px;text-align:center;line-height:1.35}
.bf-drop-cap span{font-weight:400;font-size:11px;opacity:.7}
.bf-thumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center}
.bf-thumb{position:relative}
.bf-thumb img{width:42px;height:42px;object-fit:cover;border:var(--st-line-3);border-radius:5px;
  display:block;background:var(--st-card-2)}
.bf-thumb button{position:absolute;top:-8px;right:-8px;width:18px;height:18px;border-radius:50%;
  background:var(--st-red);color:#fdf3d9;border:2px solid var(--st-ink);font-family:var(--st-mono);
  font-size:11px;line-height:1;cursor:pointer;padding:0}
.bf-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.bf-row > span{font-family:var(--st-mono);font-size:16px;letter-spacing:.14em;opacity:.7;width:56px;
  flex:none}
.bf-sw{width:21px;height:21px;border-radius:50%;border:var(--st-line-3);cursor:pointer;padding:0}
.bf-sw.on{box-shadow:0 0 0 3px var(--st-yellow)}
.bf-chip{font-family:var(--st-mono);font-size:15px;letter-spacing:.14em;color:var(--st-ink);
  background:var(--st-card);border:var(--st-line-3);border-radius:6px 4px 7px 5px;padding:0 8px;
  cursor:pointer}
.bf-chip:hover{background:var(--st-yellow)}
.bf-chip.on{background:var(--st-ink);color:var(--st-card)}
.bf-what{font-family:var(--st-face);font-size:15px;color:var(--st-ink);background:var(--st-card-2);
  border:var(--st-line-3);border-radius:8px 6px 9px 7px;padding:6px 10px;outline:none;width:100%;
  box-sizing:border-box}
.bf-what.bad{border-color:var(--st-red)}
.bf-who{flex:1;min-width:60px;font-family:var(--st-face);font-size:14px;color:var(--st-ink);
  background:var(--st-card-2);border:var(--st-line-3);border-radius:7px 5px 8px 6px;padding:3px 9px;
  outline:none}
.bf-loose{font-family:var(--st-mono);font-size:19px;letter-spacing:.14em;color:#fdf3d9;
  background:var(--st-red);border:var(--st-line);border-radius:9px 12px 8px 11px;padding:3px 12px 1px;
  cursor:pointer;box-shadow:5px 6px 0 var(--st-drop);white-space:nowrap}
.bf-loose:hover{background:var(--st-red-2)}
.bf-loose:active{transform:translate(4px,5px);box-shadow:1px 1px 0 var(--st-drop)}
.bf-reward{font-family:var(--st-mono);font-size:14px;letter-spacing:.14em;opacity:.55;text-align:center}
.bf-say{font-family:var(--st-face);font-size:14px;text-align:center;min-height:1.3em;
  color:var(--st-red);font-weight:700}

/* ── under the field ──────────────────────────────────────────────────── */
.bf-stats{display:flex;gap:20px;font-family:var(--st-mono);font-size:19px;letter-spacing:.14em;
  opacity:.75;flex-wrap:wrap}
.bf-tip{font-size:14px;opacity:.55;margin:-10px 0 0}
.bf-ledger{display:flex;flex-direction:column;gap:9px}
.bf-ledger ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  max-height:250px;overflow:auto}
.bf-ledger li{display:flex;align-items:center;gap:10px;background:var(--st-card);
  border:var(--st-line-3);border-radius:9px 6px 8px 7px;padding:6px 11px;
  box-shadow:5px 6px 0 var(--st-drop-soft)}
.bf-ledger .bf-dot{width:16px;height:16px;border-radius:50%;border:var(--st-line-3);flex:none}
.bf-ledger .bf-l-meta{flex:1;min-width:0}
.bf-ledger .bf-l-meta p{margin:0;font-size:15px;font-weight:700;line-height:1.25}
.bf-ledger .bf-l-meta span{font-family:var(--st-mono);font-size:14px;letter-spacing:.08em;opacity:.6}
.bf-ledger li.out{opacity:.55}
.bf-ledger li.out .bf-l-meta p{text-decoration:line-through}
.bf-tools{display:flex;gap:8px;flex-wrap:wrap}

/* the evidence, blown up */
.bf-lightbox{position:fixed;inset:0;background:rgba(23,18,11,.72);z-index:60;display:flex;
  align-items:center;justify-content:center;cursor:zoom-out;border:0;padding:0}
.bf-lightbox > div{background:var(--st-card);border:5px solid var(--st-ink);
  border-radius:8px 12px 6px 10px;box-shadow:14px 16px 0 rgba(23,18,11,.6);padding:13px 13px 9px;
  transform:rotate(-1deg);max-width:70vw}
.bf-lightbox img{max-width:100%;max-height:66vh;display:block;border:var(--st-line-3);
  border-radius:4px;background:var(--st-card-2)}
.bf-lightbox p{font-family:var(--st-mono);font-size:16px;letter-spacing:.14em;opacity:.6;
  margin:6px 0 0;text-align:center}

@media (max-width:1240px){
  .bf-scene{transform-origin:top left}
}

/* ═══════════════════════════════════════════════════════════════════════
   № KN-0014 · THE CHATTER-TRON 2000
   A wide putty monitor with a blue board on it and a bank of sticky notes
   taped down the left of the case. The board is the same board — every
   window of this page open on this machine is a person on it, synced
   through the storage event, exactly as before. What changed is that a line
   is a speech bubble now: yours cream and on the right, everybody else's
   yellow and on the left, which is the one thing the old ledger could not
   say at a glance.
   ═══════════════════════════════════════════════════════════════════════ */
.gz-crt{width:min(1180px,calc(100vw - 20px))}
.gz-st .crt-body2{display:flex;flex-direction:column;gap:18px}
.crt-rig2{display:flex;align-items:flex-start;gap:0}

/* ── the notes taped down the side of the case ───────────────────────── */
.gz-crt .crt-stickies{
  /* the press's own four pads, standing in for the dock's */
  --sticky-a:#ffd23f; --sticky-b:#8fd0ff; --sticky-c:#ff8f7a; --sticky-d:#a8e08f;
  list-style:none;margin:34px -22px 0 0;padding:0;display:flex;flex-direction:column;gap:26px;
  width:186px;flex:none;position:relative;z-index:2;
}
.gz-crt .crt-note{background:var(--pad,var(--st-yellow));border:var(--st-line);
  border-radius:4px 12px 6px 14px;box-shadow:8px 9px 0 var(--st-drop);padding:24px 14px 14px;
  transform:rotate(var(--tilt,-3deg));position:relative}
.gz-crt .crt-note::before{content:"";position:absolute;top:-14px;left:50%;
  transform:translateX(-50%) rotate(-4deg);width:84px;height:24px;
  background:rgba(244,236,205,.95);border:var(--st-line-3);border-radius:3px}
.gz-crt .crt-note-t{width:100%;background:none;border:none;resize:none;outline:none;
  font-family:var(--st-face);font-weight:700;font-size:17px;line-height:1.35;color:var(--st-ink);
  padding:0;overflow:hidden}
.gz-crt .crt-note-t:focus{background:rgba(255,255,255,.4);border-radius:4px}
.gz-crt .crt-note-t[readonly]{cursor:default}
.gz-crt .crt-note-c,.gz-crt .crt-note-x{position:absolute;width:20px;height:20px;
  border:2.5px solid var(--st-ink);border-radius:50%;cursor:pointer;padding:0;
  font-family:var(--st-mono);font-size:12px;line-height:1}
.gz-crt .crt-note-c{bottom:5px;right:26px;background:var(--st-card)}
.gz-crt .crt-note-x{bottom:5px;right:4px;background:var(--st-red);color:#fdf3d9}

/* ── the set ─────────────────────────────────────────────────────────── */
.crt-col{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.gz-crt .crt-set{background:var(--st-metal-3);border:5px solid var(--st-ink);
  border-radius:34px 30px 24px 22px;box-shadow:15px 17px 0 var(--st-drop);
  padding:20px 22px 14px;width:100%;box-sizing:border-box;position:relative}
.gz-crt .crt-hood{background:var(--st-metal);border:var(--st-line);
  border-radius:22px 18px 20px 24px;padding:11px}
.gz-crt .crt-glass{position:relative;border:var(--st-line);border-radius:16px 12px 14px 18px;
  overflow:hidden;background:#1b2a6b}
.gz-crt .crt-log{height:420px;overflow-y:auto;padding:16px 14px 12px;box-sizing:border-box;
  margin:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.gz-crt .crt-scan{position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,0) 3px 4px)}
.gz-crt .crt-bulge{display:none}

/* a line is a bubble. Everybody else on the left in yellow, you on the
   right in cream — the side is the whole of "who said this". */
.gz-crt .crt-line{display:flex;flex-direction:column;align-items:flex-start;max-width:78%;
  position:relative;padding:0}
.gz-crt .crt-line.crt-me{align-self:flex-end;align-items:flex-end}
.gz-crt .crt-line time{font-family:var(--st-mono);font-size:14px;letter-spacing:.1em;
  color:rgba(244,236,213,.4);margin:0 6px}
.gz-crt .crt-line b{font-family:var(--st-mono);font-size:16px;letter-spacing:.14em;
  color:var(--st-phos);margin:0 6px 3px;font-weight:400;display:flex;gap:6px;align-items:baseline}
.gz-crt .crt-line.crt-me b{color:#8fd0ff}
.gz-crt .crt-line b i{font-style:normal;font-size:13px;letter-spacing:.1em;background:var(--st-yellow);
  color:var(--st-ink);border-radius:3px;padding:0 5px}
.gz-crt .crt-line span{background:var(--st-yellow);border:var(--st-line-3);
  border-radius:14px 14px 14px 4px;box-shadow:5px 6px 0 rgba(9,7,25,.6);padding:6px 13px 5px;
  font-family:var(--st-mono);font-size:21px;line-height:1.2;color:var(--st-ink);
  overflow-wrap:anywhere;display:block}
.gz-crt .crt-line.crt-me span{background:var(--st-card);border-radius:14px 14px 4px 14px}
.gz-crt .crt-x{position:absolute;top:22px;right:-22px;width:20px;height:20px;border-radius:50%;
  background:var(--st-ink);color:var(--st-card);border:2px solid rgba(244,236,213,.35);
  font-family:var(--st-mono);font-size:12px;line-height:1;cursor:pointer;padding:0;opacity:0;
  transition:opacity .12s}
.gz-crt .crt-line.crt-me .crt-x{right:auto;left:-22px}
.gz-crt .crt-line:hover .crt-x,.gz-crt .crt-x:focus{opacity:1}
.gz-crt .crt-empty{font-family:var(--st-mono);font-size:20px;letter-spacing:.14em;
  color:rgba(244,236,213,.45);align-self:center;margin:auto;list-style:none}

/* the bezel under the glass */
.gz-crt .crt-badge{display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding:0 6px;gap:12px}
.crt-vent2{width:104px;height:22px;border:var(--st-line-3);border-radius:6px;flex:none;
  background:repeating-linear-gradient(90deg,var(--st-metal) 0 7px,var(--st-ink) 7px 10px)}
.gz-crt .crt-brand{font-family:var(--st-mono);font-size:22px;letter-spacing:.16em;
  color:var(--st-ink);background:var(--st-card);border:var(--st-line-3);
  border-radius:8px 4px 9px 5px;padding:1px 14px 0;white-space:nowrap}
.gz-crt .crt-brand b{font-weight:400}
.crt-right{display:flex;gap:10px;align-items:center}
.crt-online{display:flex;align-items:center;gap:8px;background:var(--st-ink);
  border:var(--st-line-3);border-radius:9px 5px 8px 6px;padding:2px 12px 1px}
.crt-online i{width:10px;height:10px;border-radius:50%;background:var(--st-phos);
  box-shadow:0 0 6px var(--st-phos);flex:none}
.crt-online span{font-family:var(--st-mono);font-size:19px;letter-spacing:.14em;color:var(--st-phos)}
.gz-crt .crt-count{font-family:var(--st-mono);font-size:17px;letter-spacing:.12em;opacity:.55}
.gz-crt .crt-led{width:16px;height:16px;border-radius:50%;background:var(--st-metal-2);
  border:var(--st-line-3);flex:none}
.gz-crt .crt-led.on{background:var(--st-red);animation:st-blink 1.6s steps(1) infinite}

/* the stand */
.crt-neck2{width:240px;height:40px;background:var(--st-metal-2);border:5px solid var(--st-ink);
  border-top-width:0;box-shadow:12px 12px 0 var(--st-drop)}
.crt-foot2{width:460px;max-width:90%;height:34px;background:var(--st-metal-3);
  border:5px solid var(--st-ink);border-radius:10px 12px 16px 14px;box-shadow:13px 14px 0 var(--st-drop)}

/* ── the keyboard slab ───────────────────────────────────────────────── */
.gz-crt .crt-deck{margin-top:28px;width:100%;box-sizing:border-box;background:var(--st-metal-3);
  border:5px solid var(--st-ink);border-radius:16px 20px 22px 18px;
  box-shadow:12px 14px 0 var(--st-drop);padding:13px 15px;transform:rotate(-.6deg);position:relative}
.gz-crt .crt-type{display:flex;gap:12px}
.gz-crt #crt-say{flex:1;min-width:0;background:var(--st-card);border:var(--st-line);
  border-radius:12px 8px 10px 8px;padding:7px 13px 5px;font-family:var(--st-mono);font-size:21px;
  color:var(--st-ink);outline:none;box-shadow:4px 5px 0 rgba(23,18,11,.55) inset}
.gz-crt #crt-say:focus{background:var(--st-card-2)}
.gz-crt #crt-say::placeholder{color:var(--st-ink);opacity:.4}
.gz-crt #crt-send{background:var(--st-red);color:#fdf3d9;border:var(--st-line);
  border-radius:10px 14px 8px 12px;padding:5px 22px 3px;font-family:var(--st-mono);font-size:25px;
  letter-spacing:.14em;cursor:pointer;box-shadow:5px 6px 0 var(--st-drop);text-transform:none}
.gz-crt #crt-send:hover:not(:disabled){background:var(--st-red-2)}
.gz-crt #crt-send:active:not(:disabled){transform:translate(4px,5px);box-shadow:1px 1px 0 var(--st-drop)}
.gz-crt .crt-caret{display:none}
.gz-crt .crt-keys{display:none}

/* the weeds and the little visitors round the slab */
.crt-weeds{position:absolute;bottom:-10px;display:flex;align-items:flex-end;pointer-events:none}
.crt-weeds-l{left:-96px} .crt-weeds-r{right:-96px}
.crt-alien{display:flex;flex-direction:column;align-items:center;margin:0 -6px}
.crt-alien i{width:48px;height:28px;background:var(--st-red);border:var(--st-line-3);
  border-radius:26px 26px 8px 8px;position:relative;z-index:1;display:block}
.crt-alien i::before,.crt-alien i::after{content:"";position:absolute;border-radius:50%;
  background:#fdf3d9}
.crt-alien i::before{top:6px;left:9px;width:9px;height:9px}
.crt-alien i::after{top:10px;left:27px;width:6px;height:6px}
.crt-alien u{width:16px;height:14px;background:var(--st-card);border:var(--st-line-3);
  border-top-width:0;border-radius:0 0 6px 6px;margin-top:-2px;text-decoration:none;display:block}
.crt-alien-y i{background:var(--st-yellow);width:38px;height:24px}

/* ── who is on, and the works ────────────────────────────────────────── */
.crt-under{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.gz-crt .crt-field{display:flex;align-items:center;gap:10px;background:var(--st-card);
  border:var(--st-line-3);border-radius:9px 6px 8px 7px;padding:5px 12px}
.gz-crt .crt-field span{font-family:var(--st-mono);font-size:16px;letter-spacing:.16em;flex:none}
.gz-crt #crt-name{flex:1;min-width:0;font-family:var(--st-face);font-size:16px;color:var(--st-ink);
  background:none;border:none;border-bottom:2.5px dashed var(--st-ink);outline:none;padding:0 2px 2px}
.gz-crt .crt-who{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.gz-crt .crt-who li{display:flex;align-items:center;gap:7px;background:var(--st-card);
  border:2.5px solid var(--st-ink);border-radius:7px 5px 8px 6px;padding:2px 10px;font-size:15px}
.gz-crt .crt-who .crt-you{background:var(--st-yellow)}
.gz-crt .crt-dot{width:9px;height:9px;border-radius:50%;background:var(--st-green);
  border:2px solid var(--st-ink);flex:none}
.gz-crt .crt-who i{font-style:normal;font-family:var(--st-mono);font-size:13px;letter-spacing:.1em;
  background:var(--st-ink);color:var(--st-card);border-radius:3px;padding:0 5px}
.gz-crt .crt-who em{font-family:var(--st-mono);font-size:13px;letter-spacing:.1em;opacity:.55;
  font-style:normal}
.gz-crt .crt-status{font-family:var(--st-face);font-size:14px;min-height:1.3em;margin:0;opacity:.7}
.gz-crt .crt-status.crt-bad{color:var(--st-red);font-weight:700;opacity:1}
.gz-crt .crt-works{display:flex;flex-direction:column;gap:9px;background:var(--st-metal-3);
  border:var(--st-line-3);border-radius:10px 7px 9px 8px;padding:11px 13px}
.gz-crt .crt-check{display:flex;align-items:center;gap:8px;font-size:15px}
.gz-crt .crt-check input{accent-color:var(--st-red);width:16px;height:16px}
.gz-crt .pb-act{font-family:var(--st-mono);font-size:17px;letter-spacing:.12em;cursor:pointer;
  background:var(--st-card);border:2.5px solid var(--st-ink);border-radius:7px 5px 8px 6px;
  padding:2px 10px 0;color:var(--st-ink)}
.gz-crt .pb-act:hover:not(:disabled){background:var(--st-yellow)}
.gz-crt .pb-act:disabled{opacity:.45;cursor:not-allowed}
.gz-crt .gz-label{font-family:var(--st-mono);font-size:17px;letter-spacing:.16em;
  color:var(--st-ink);opacity:.75}
.gz-crt .gz-label i{font-family:var(--st-mono);font-style:normal;background:var(--st-ink);
  color:var(--st-card);border-radius:4px;padding:0 7px}
.gz-crt .gz-label::after{background:var(--st-ink);opacity:.25}
.gz-crt .gz-fine{font-family:var(--st-face);font-size:14px;color:var(--st-ink);opacity:.62}

@media (max-width:1000px){
  .crt-rig2{flex-direction:column}
  .gz-crt .crt-stickies{flex-direction:row;flex-wrap:wrap;width:auto;margin:0 0 14px}
  .gz-crt .crt-note{width:186px}
  .crt-under{grid-template-columns:1fr}
  .crt-weeds{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   № KN-0015 · THE KNOLL TIMES PRINTING PRESS
   The lab's own history, printed. Everything that has happened on the bench
   — a petition carried, a thing shipped, a mayor elected, a drawing
   varnished, a landmark named, a bug swatted — is sorted into days, and
   each day that had news is an issue. The freshest one sits on the press;
   the rest go on the newsstand. Click any paper and it unfolds.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes pr-stamp { 0%,50%{transform:translateY(0)} 62%,72%{transform:translateY(20px)}
                      84%,100%{transform:translateY(0)} }
@keyframes pr-needle{ 0%,50%,100%{transform:rotate(-28deg)} 66%{transform:rotate(30deg)} }
@keyframes pr-bob   { 0%,50%,100%{transform:translateY(0)} 66%{transform:translateY(14px)} }
@keyframes pr-sway  { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(3deg)} }

.gz-press{width:min(1180px,calc(100vw - 20px))}
.gz-st .pr-body{display:flex;flex-direction:column;gap:14px}
:root{ --pr-wood:#9c7648; --pr-wood-2:#8a6a45; --pr-wood-3:#7a5a36; --pr-wood-4:#b08a58;
       --pr-paper:#f6eed8; --pr-paper-2:#efe4c8; --pr-wax:#8f2430; --pr-gold:#d9a94e; }

.pr-head{display:flex;flex-direction:column;align-items:center;gap:6px}
.pr-head-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.pr-head-row .st-plate{font-size:26px;box-shadow:7px 8px 0 var(--st-drop);border-width:4px;
  padding:2px 20px 0}
.pr-lamps{display:flex;gap:9px;align-items:center}
.pr-lamps .st-lamp{opacity:1;animation:st-blink 1.4s steps(1) infinite}
.pr-lamps .st-lamp:nth-child(2){animation-delay:.3s}
.pr-lamps .st-lamp:nth-child(3){animation-delay:.6s}
.pr-head > p{margin:0;font-size:16px;opacity:.65}

.pr-floor{display:flex;justify-content:center;align-items:flex-start;gap:44px;margin-top:20px;
  flex-wrap:wrap}

/* ── the press itself ─────────────────────────────────────────────────── */
.pr-machine{position:relative;width:560px;height:530px;flex:none}
.pr-wheel{position:absolute;left:194px;top:-6px;width:174px;height:174px;z-index:1;
  animation:st-spin 9s linear infinite}
.pr-wheel i{position:absolute;left:80px;top:0;width:14px;height:174px;background:var(--pr-wood-4);
  border:var(--st-line);border-radius:8px;box-sizing:border-box}
.pr-wheel i:nth-child(2){transform:rotate(45deg)}
.pr-wheel i:nth-child(3){transform:rotate(90deg)}
.pr-wheel i:nth-child(4){transform:rotate(135deg)}
.pr-wheel b{position:absolute;inset:60px;background:var(--pr-wood-2);border:var(--st-line);
  border-radius:50%}
.pr-screw{position:absolute;left:266px;top:162px;width:28px;height:130px;box-sizing:border-box;
  border:var(--st-line);z-index:1;
  background:repeating-linear-gradient(35deg,var(--st-metal-2) 0 6px,var(--st-metal-4) 6px 12px)}
.pr-post{position:absolute;top:136px;width:46px;height:360px;box-sizing:border-box;
  background:var(--pr-wood);border:5px solid var(--st-ink);border-radius:6px;z-index:1}
.pr-post-l{left:86px} .pr-post-r{left:428px}
.pr-post i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--st-ink);opacity:.5}
.pr-post-l i:nth-child(1){top:40px;left:6px} .pr-post-l i:nth-child(2){top:150px;left:6px}
.pr-post-l i:nth-child(3){top:260px;left:6px}
.pr-post-r i:nth-child(1){top:40px;right:6px} .pr-post-r i:nth-child(2){top:150px;right:6px}
.pr-post-r i:nth-child(3){top:260px;right:6px}
.pr-lintel{position:absolute;left:58px;top:124px;width:444px;height:48px;box-sizing:border-box;
  background:var(--pr-wood-2);border:5px solid var(--st-ink);border-radius:10px;
  box-shadow:8px 9px 0 var(--st-drop-soft);z-index:2;display:flex;align-items:center;justify-content:center}
.pr-platen{position:absolute;left:176px;top:288px;width:212px;height:32px;box-sizing:border-box;
  background:var(--pr-wood-3);border:5px solid var(--st-ink);border-radius:6px;z-index:2;
  animation:pr-stamp 2.6s ease-in-out infinite}
.pr-platen::before{content:"";position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  width:60px;height:16px;background:var(--pr-wood-3);border:var(--st-line);border-radius:5px 5px 0 0;
  box-sizing:border-box}
.pr-sheet{position:absolute;left:228px;top:342px;width:146px;height:46px;box-sizing:border-box;
  background:var(--st-card-2);border:var(--st-line);border-radius:3px;z-index:2}
.pr-sheet::after{content:"";position:absolute;inset:7px;
  background:repeating-linear-gradient(180deg,transparent 0 6px,rgba(23,18,11,.45) 6px 8px)}
.pr-inkblock{position:absolute;left:152px;top:352px;width:46px;height:36px;background:var(--st-ink);
  border-radius:5px 5px 10px 10px;z-index:2}
.pr-inkblock::after{content:"";position:absolute;top:6px;left:8px;right:8px;height:7px;
  background:var(--st-red);border-radius:3px}
.pr-bed{position:absolute;left:66px;top:386px;width:428px;height:38px;box-sizing:border-box;
  background:var(--pr-wood);border:5px solid var(--st-ink);border-radius:8px;
  box-shadow:8px 9px 0 var(--st-drop-soft);z-index:2}
.pr-legs{position:absolute;left:146px;top:420px;width:272px;height:74px;box-sizing:border-box;
  border:5px solid var(--st-ink);z-index:1;
  background:repeating-linear-gradient(180deg,var(--pr-wood-2) 0 12px,var(--pr-wood-3) 12px 16px)}
.pr-base{position:absolute;left:28px;top:488px;width:504px;height:34px;box-sizing:border-box;
  background:var(--pr-wood-4);border:5px solid var(--st-ink);border-radius:8px 10px 12px 9px;
  box-shadow:10px 11px 0 var(--st-drop);z-index:2}
.pr-cog{position:absolute;z-index:1;animation:st-spin 5s linear infinite}
.pr-cog i{position:absolute;left:50%;top:0;width:12px;height:100%;margin-left:-6px;
  background:var(--st-metal-2);border:var(--st-line-3);border-radius:5px;box-sizing:border-box}
.pr-cog i:nth-child(2){transform:rotate(60deg)} .pr-cog i:nth-child(3){transform:rotate(120deg)}
.pr-cog b{position:absolute;inset:26%;background:var(--st-card);border:var(--st-line-3);border-radius:50%}
.pr-cog-1{left:60px;top:288px;width:60px;height:60px}
.pr-cog-2{left:98px;top:338px;width:52px;height:52px;animation-direction:reverse}
.pr-dial{position:absolute;left:88px;top:190px;width:42px;height:42px;box-sizing:border-box;
  background:var(--st-card);border:var(--st-line);border-radius:50%;
  box-shadow:4px 5px 0 var(--st-drop-soft);z-index:2}
.pr-dial i{position:absolute;width:3px;height:6px;background:var(--st-ink)}
.pr-dial i:nth-child(1){top:8px;left:50%;transform:translateX(-50%)}
.pr-dial i:nth-child(2){top:14px;left:8px;transform:rotate(-46deg)}
.pr-dial i:nth-child(3){top:14px;right:8px;background:var(--st-red);transform:rotate(46deg)}
.pr-dial b{position:absolute;bottom:50%;left:50%;width:4px;height:13px;margin-left:-2px;
  background:var(--st-red);border-radius:2px;transform-origin:bottom center;
  animation:pr-needle 2.6s ease-in-out infinite}
.pr-dial u{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
  background:var(--st-ink);border-radius:50%;text-decoration:none}
.pr-ink{position:absolute;left:480px;top:392px;width:34px;height:96px;box-sizing:border-box;
  background:var(--st-metal);border:var(--st-line);border-radius:8px 8px 4px 4px;z-index:2}
.pr-ink::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:44px;height:14px;background:var(--st-metal-2);border:var(--st-line-3);border-radius:5px;
  box-sizing:border-box}
.pr-ink i{position:absolute;inset:8px 7px;background:var(--st-ink);border-radius:4px;overflow:hidden}
.pr-ink i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:var(--st-red)}
.pr-ink span{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  font-family:var(--st-mono);font-size:12px;letter-spacing:.08em;opacity:.6}
.pr-pend{position:absolute;left:398px;top:170px;width:14px;height:112px;z-index:1;display:flex;
  flex-direction:column;align-items:center}
.pr-pend i{width:8px;height:100%;background:var(--st-metal-4);border:var(--st-line-3);box-sizing:border-box}
.pr-pend b{position:absolute;bottom:-6px;width:22px;height:22px;background:var(--st-yellow);
  border:var(--st-line-3);border-radius:50%;box-sizing:border-box;animation:pr-bob 2.6s ease-in-out infinite}
.pr-switches{position:absolute;left:438px;top:190px;width:26px;height:98px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:5px;z-index:2;background:var(--st-metal-3);
  border:var(--st-line);border-radius:7px 5px 8px 6px;padding:6px 0}
.pr-switches .st-lamp{width:12px;height:12px;opacity:1;animation:st-blink 1.4s steps(1) infinite}
.pr-switches .st-lamp:nth-child(2){animation-delay:.4s}
.pr-switches .st-lamp:nth-child(3){animation-delay:.8s}
.pr-switches u{width:14px;height:20px;background:var(--st-ink);border-radius:3px;position:relative;
  text-decoration:none}
.pr-switches u::after{content:"";position:absolute;left:2px;right:2px;top:2px;height:7px;
  background:var(--st-red);border-radius:2px}

/* ── a paper ─────────────────────────────────────────────────────────── */
.pr-out{display:flex;align-items:flex-end;gap:20px;margin-top:22px;flex-wrap:wrap}
.pr-out > p{font-size:15px;opacity:.6;max-width:170px;line-height:1.35;padding-bottom:6px;margin:0}
.pr-paper{position:relative;box-sizing:border-box;background:var(--pr-paper);border:var(--st-line);
  border-radius:6px 9px 5px 8px;box-shadow:8px 9px 0 var(--st-drop-soft);padding:13px 15px 11px;
  cursor:pointer;transform:rotate(-1.5deg);text-align:left;transition:transform .16s;
  font-family:var(--st-face);color:var(--st-ink);width:240px}
.pr-paper:hover{transform:rotate(0deg) translateY(-5px)}
.pr-paper-name{font-family:'Pirata One',var(--st-face);font-size:25px;text-align:center;line-height:1;
  margin:0}
.pr-rule{border-top:3px solid var(--st-ink);margin-top:5px}
.pr-rule-thin{border-top:2px solid var(--st-ink);margin-top:2px;opacity:.6}
.pr-paper-meta{display:flex;justify-content:space-between;font-family:var(--st-mono);font-size:14px;
  letter-spacing:.08em;margin-top:4px}
.pr-paper-head{font-weight:700;font-size:16px;line-height:1.25;margin:3px 0 0}
.pr-paper-lines{height:26px;margin-top:8px;
  background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(23,18,11,.3) 5px 7px)}
.pr-paper::after{content:"";position:absolute;left:0;right:0;top:58%;
  border-top:3px dashed rgba(23,18,11,.25)}
.pr-wax{position:absolute;bottom:8px;right:10px;width:30px;height:30px;
  background:radial-gradient(circle at 38% 32%,#b23438 0%,var(--pr-wax) 70%);
  border:var(--st-line-3);border-radius:52% 60% 55% 48%;box-sizing:border-box;display:flex;
  align-items:center;justify-content:center;font-family:'Pirata One',serif;font-size:14px;
  color:var(--pr-gold);z-index:1}
.pr-hot{position:absolute;top:-16px;right:-22px;font-family:var(--st-mono);font-size:17px;
  letter-spacing:.12em;color:var(--st-ink);background:var(--st-yellow);border:var(--st-line-3);
  border-radius:6px 4px 7px 5px;padding:1px 10px 0;animation:pr-sway 2.6s ease-in-out infinite;z-index:2}

/* ── the newsstand ───────────────────────────────────────────────────── */
.pr-stand{width:420px;flex:0 1 420px;display:flex;flex-direction:column;position:relative}
.pr-awning{height:44px;box-sizing:border-box;border:5px solid var(--st-ink);
  border-radius:12px 14px 6px 6px;box-shadow:8px 8px 0 var(--st-drop-soft);position:relative;z-index:2;
  background:repeating-linear-gradient(90deg,var(--st-red) 0 34px,var(--st-card) 34px 68px)}
.pr-stand-name{align-self:center;margin-top:-14px;font-family:var(--st-mono);font-size:23px;
  letter-spacing:.18em;color:var(--st-ink);background:var(--st-yellow);border:var(--st-line);
  border-radius:8px 4px 9px 5px;box-shadow:5px 6px 0 rgba(23,18,11,.7);padding:1px 18px 0;
  position:relative;z-index:3}
.pr-rack{box-sizing:border-box;background:var(--st-metal-3);border:5px solid var(--st-ink);
  border-radius:6px 6px 14px 16px;box-shadow:12px 14px 0 var(--st-drop);margin-top:-12px;
  padding:32px 22px 18px;position:relative;z-index:1}
.pr-rack > .st-tab{position:absolute;top:14px;left:16px;font-size:16px}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;margin-top:14px}
.pr-grid .pr-paper{width:auto;padding:10px 11px 8px}
.pr-grid .pr-paper-name{font-size:18px}
.pr-grid .pr-paper-meta{font-size:12px}
.pr-grid .pr-paper-head{font-size:13px;min-height:33px}
.pr-grid .pr-paper-lines{height:16px;
  background:repeating-linear-gradient(180deg,transparent 0 4px,rgba(23,18,11,.3) 4px 5px)}
.pr-grid .pr-wax{width:20px;height:20px;font-size:10px;border-width:2px;bottom:5px;right:6px}
.pr-peg{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:16px;height:20px;
  background:var(--pr-wood-4);border:var(--st-line-3);border-radius:4px 4px 2px 2px;box-sizing:border-box}
.pr-rack > p{font-family:var(--st-mono);font-size:15px;letter-spacing:.14em;opacity:.5;
  text-align:center;margin:16px 0 0}
.pr-weeds{position:absolute;right:-24px;bottom:-20px;display:flex;align-items:flex-end}

.pr-note{position:absolute;top:70px;left:0;width:172px;transform:rotate(-5deg);z-index:2}

/* ── the paper, unfolded ─────────────────────────────────────────────── */
.pr-read{position:fixed;inset:0;z-index:100;background:rgba(23,18,11,.55);display:flex;
  align-items:flex-start;justify-content:center;padding:44px 20px 60px;overflow:auto;border:0}
.pr-issue{position:relative;width:780px;max-width:94vw;perspective:1600px;
  animation:st-pop .3s ease-out;transform:rotate(-.4deg);font-family:var(--st-face);color:var(--st-ink);
  text-align:left}
.pr-x{position:absolute;top:-18px;right:-18px;z-index:6;width:44px;height:44px;background:var(--st-red);
  border:var(--st-line);border-radius:50%;box-shadow:4px 5px 0 rgba(23,18,11,.7);cursor:pointer;
  font-family:var(--st-mono);font-size:25px;color:#fdf3d9;line-height:1;padding:0}
.pr-x:hover{background:var(--st-red-2)}
.pr-x:active{transform:translate(3px,4px);box-shadow:none}
.pr-fold-top{position:relative;box-sizing:border-box;background:var(--pr-paper);
  border:5px solid var(--st-ink);border-bottom:none;border-radius:10px 12px 0 0;
  box-shadow:14px 0 0 var(--st-drop-soft);padding:28px 34px 18px;z-index:2}
.pr-masthead{position:relative;padding:0 70px}
.pr-vol{position:absolute;left:0;top:8px;font-family:var(--st-mono);font-size:16px;letter-spacing:.12em;
  line-height:1.3}
.pr-name{font-family:'Pirata One',var(--st-face);font-size:58px;text-align:center;line-height:1;margin:0}
.pr-seal{position:absolute;right:-24px;top:-22px;width:92px;height:92px;
  background:radial-gradient(circle at 38% 32%,#b23438 0%,var(--pr-wax) 72%);border:var(--st-line);
  border-radius:52% 60% 55% 48%;box-sizing:border-box;box-shadow:5px 6px 0 var(--st-drop-soft);
  transform:rotate(9deg);z-index:3;display:flex;align-items:center;justify-content:center}
.pr-seal span{width:60px;height:60px;border:3px solid var(--pr-gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:'Pirata One',serif;font-size:32px;
  color:var(--pr-gold);text-shadow:2px 2px 0 rgba(23,18,11,.4)}
.pr-rule-4{border-top:4px solid var(--st-ink);margin-top:10px}
.pr-strap{display:flex;justify-content:space-between;gap:12px;font-family:var(--st-mono);font-size:16px;
  letter-spacing:.12em;margin-top:6px}
.pr-headline{font-weight:700;font-size:38px;line-height:1.1;margin:14px 0 0;text-wrap:pretty}
.pr-kicker{font-size:17px;opacity:.65;margin:4px 0 0}
.pr-lead{font-size:17px;line-height:1.55;margin:12px 0 0;text-wrap:pretty}
.pr-fold-bottom{transform-origin:top center;transform:rotateX(-89deg);
  transition:transform .9s cubic-bezier(.32,1.15,.42,1);box-sizing:border-box;
  background:var(--pr-paper);border:5px solid var(--st-ink);border-top:none;
  border-radius:0 0 12px 10px;box-shadow:14px 14px 0 var(--st-drop-soft);padding:4px 34px 24px;
  position:relative;z-index:1}
.pr-issue.open .pr-fold-bottom{transform:rotateX(0deg)}
.pr-perf{border-top:3px dashed rgba(23,18,11,.25);margin:0 -12px}
.pr-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin-top:14px}
.pr-col h4{font-family:var(--st-mono);font-size:20px;letter-spacing:.16em;font-weight:400;
  border-bottom:3px solid var(--st-ink);padding-bottom:2px;margin:0}
.pr-col p{font-size:15px;line-height:1.55;margin:7px 0 0;text-wrap:pretty}
.pr-notes{box-sizing:border-box;background:var(--pr-paper-2);border:var(--st-line-3);
  border-radius:9px 6px 8px 7px;padding:18px 15px 11px;margin-top:18px;position:relative}
.pr-notes > .st-tab{position:absolute;top:-12px;left:14px;font-size:17px}
.pr-notes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pr-notes li{display:flex;align-items:baseline;gap:10px;font-size:15px;line-height:1.4}
.pr-notes li::before{content:"";width:10px;height:10px;background:var(--st-red);
  border:2px solid var(--st-ink);flex:none;transform:rotate(45deg);box-sizing:border-box}
.pr-colophon{font-family:var(--st-mono);font-size:14px;letter-spacing:.14em;opacity:.5;
  text-align:center;margin:18px 0 0}

@media (max-width:1080px){
  .pr-floor{flex-direction:column;align-items:center}
  .pr-note{position:static;transform:rotate(-2deg);margin-bottom:10px}
  .pr-stand{width:100%;flex:1 1 auto}
}

/* ═══════════════════════════════════════════════════════════════════════
   THE CAUTION TAPE — a prop on the bench, not a gizmo
   Strips of hazard tape pinned to the SHEET, so they stay over whatever
   they are cordoning off while the camera moves. Each strip is rotated to
   span two points; both striped ends and the printed middle are handles.
   The layer itself takes no pointer, so only the tape is grabbable and
   everything under it still works.
   ═══════════════════════════════════════════════════════════════════════ */
.tape-layer{position:absolute;inset:0;pointer-events:none;z-index:6}
.tape-layer .tape{pointer-events:auto}
.tape{position:absolute;height:46px;transform-origin:0 50%;font-family:var(--st-mono)}
.tape-strip{display:flex;align-items:stretch;height:46px;background:var(--st-yellow);
  border:var(--st-line);box-shadow:10px 11px 0 var(--st-drop);box-sizing:border-box}
.tape-end{width:30px;flex:none;cursor:ew-resize;touch-action:none;border:0;padding:0;
  background:repeating-linear-gradient(45deg,var(--st-ink) 0 11px,var(--st-yellow) 11px 22px)}
.tape-end-l{border-right:3.5px solid var(--st-ink)}
.tape-end-r{border-left:3.5px solid var(--st-ink);
  background:repeating-linear-gradient(-45deg,var(--st-ink) 0 11px,var(--st-yellow) 11px 22px)}
.tape-end:hover,.tape-end:focus-visible{outline:3px dashed var(--st-red);outline-offset:2px}
.tape-mid{display:flex;align-items:stretch;overflow:hidden;flex:1;min-width:0;cursor:grab;
  touch-action:none}
.tape-layer.pulling .tape-mid{cursor:grabbing}
.tape-seg{display:flex;align-items:center;gap:14px;padding:0 14px;flex:none;
  border-right:3px dashed rgba(23,18,11,.35)}
.tape-seg b{font-family:var(--st-mono);font-size:30px;letter-spacing:.2em;color:var(--st-ink);
  white-space:nowrap;line-height:1;font-weight:400}
.tape-seg i{width:13px;height:13px;background:var(--st-ink);transform:rotate(45deg);flex:none}
/* the ✕ only turns up when you are near the strip — a permanent one on every
   piece of tape would be a page covered in little red buttons */
.tape-x{position:absolute;top:-13px;right:-13px;width:24px;height:24px;border-radius:50%;
  background:var(--st-red);color:#fdf3d9;border:3px solid var(--st-ink);font-family:var(--st-mono);
  font-size:13px;line-height:1;cursor:pointer;padding:0;opacity:0;transition:opacity .12s}
.tape:hover .tape-x,.tape-x:focus-visible{opacity:1}

/* the farm's own name, over the field. It used to be on the chassis plate;
   with no chassis it goes where the design had it all along. */
.bf-sign{position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(-.6deg);z-index:4;
  background:var(--st-card);border:5px solid var(--st-ink);border-radius:10px 14px 8px 12px;
  box-shadow:var(--st-shadow);padding:2px 24px 4px;display:flex;align-items:baseline;gap:16px}
.bf-sign b{font-family:var(--st-mono);font-size:38px;letter-spacing:.16em;color:var(--st-ink);
  font-weight:400;line-height:1.1}
.bf-sign span{font-family:var(--st-mono);font-size:19px;letter-spacing:.14em;opacity:.55}

/* a scroller or a note has to keep its text selectable — .gz turns selection
   off for the whole case, which is right for a panel and wrong for a board
   you are meant to read */
.gz-st [data-nodrag]{user-select:text}
.gz-st .bo-slot,.gz-st .sp-boiler,.gz-st .hopper,.gz-st .gauge{user-select:none}