/* GENERATED by scripts/sync-waxio-site.mjs from tools/waxio/styles.css — do not edit this copy.
   Edit the app's file, then run: node scripts/sync-waxio-site.mjs */
/* wax i/o — an eyecüe room, printed.

   The law it follows is eyecüe's own (conceptlog, 6 Aug 2026): a new eyecüe
   surface extends the rewind-wheel language — paper ground, 2px ink borders,
   hard offset shadows, radial and vinyl geometry, mono ink readouts, brand
   colour fills. No glass, no blur, no gradients on surfaces.

   Kyoto sets the record (a 70s sleeve serif), Mori reads to you (eyecüe's
   human voice), Fraktion Mono is the catalogue. The sleeves are the only
   things in full colour; everything else is ink on oat card. */

@font-face { font-family: 'Kyoto'; src: url('assets/fonts/PPKyoto-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Kyoto'; src: url('assets/fonts/PPKyoto-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Kyoto'; src: url('assets/fonts/PPKyoto-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mori'; src: url('assets/fonts/PPMori-Book.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mori'; src: url('assets/fonts/PPMori-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Fraktion'; src: url('assets/fonts/PPFraktionMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fraktion'; src: url('assets/fonts/PPFraktionMono-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --paper: #EEE2D1;
  --paper-hi: #F6EEE2;
  --paper-lo: #E2D3BE;
  --paper-warm: #DBC9B4;
  --ink: #120A06;
  --ink-2: #4B3B2F;
  --ink-3: #75604F;
  --rule: rgba(18, 10, 6, 0.2);
  --rule-2: rgba(18, 10, 6, 0.38);
  --flame: #ED4E15;
  --flame-ink: #B5360A;
  --mustard: #ECB400;
  --vinyl: #0E0806;

  --on-ink: #EEE2D1;
  --on-ink-2: rgba(238, 226, 209, 0.68);
  --on-ink-3: rgba(238, 226, 209, 0.46);
  --rule-ink: rgba(238, 226, 209, 0.18);

  --display: 'Kyoto', 'Souvenir', 'Bookman Old Style', Georgia, serif;
  --text: 'Mori', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Fraktion', ui-monospace, 'SF Mono', Menlo, monospace;

  --line: 2px solid var(--ink);

  /* Controls are cut into the deck, not stuck on it. A key sits in a slot
     cut through the surface, the way the buttons sit in an old record
     player's or a mixer's panel: the slot's near walls are in shadow, its
     floor shows round the key, its cut edge is ink and its far lip catches
     the light. The key stands proud of the floor and goes down when pressed.
     Fields are wells cut into the surface. What would sit on the deck (a
     record, a sleeve, a print, the player) keeps its hard shadow and stands
     on it. Hard edges throughout, no blur, no gradients. */
  --slot-floor: #C3B099;
  --slot-cut: var(--ink);
  --slot-lip: var(--paper-hi);
  --slot-wall: rgba(18, 10, 6, 0.55);
  --slot: -2px -2px 0 4px var(--slot-wall), 0 0 0 4px var(--slot-floor), 0 0 0 6px var(--slot-cut), 1px 1px 0 6px var(--slot-lip);
  --tray: inset 3px 3px 0 var(--slot-wall), 0 0 0 2px var(--slot-cut), 1px 1px 0 2px var(--slot-lip);
  --key-edge: var(--ink);
  --key-lit: rgba(255, 255, 255, 0.55);
  --key-side: rgba(18, 10, 6, 0.24);
  --key: inset 0 0 0 2px var(--key-edge), inset 3px 3px 0 var(--key-lit), inset -4px -4px 0 var(--key-side);
  --key-down: inset 0 0 0 2px var(--key-edge), inset 4px 4px 0 rgba(18, 10, 6, 0.32), inset -1px -1px 0 rgba(255, 255, 255, 0.18);
  --well: inset 0 0 0 2px var(--ink), inset 4px 4px 0 rgba(18, 10, 6, 0.26), 1px 1px 0 var(--slot-lip);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --detent: cubic-bezier(0.34, 1.5, 0.64, 1);
  --gutter: clamp(16px, 4.4vw, 64px);
  --sw: clamp(230px, 24vw, 360px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.booting main, body.booting .foot { opacity: 0; }
main, .foot { transition: opacity 0.4s var(--ease); }

/* card stock: a fixed tooth over everything, sleeves included */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.5'/></svg>");
}

::selection { background: var(--mustard); color: var(--ink); }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kick {
  font: 400 12px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--ink-3);
}
.fl { color: var(--flame); }
.quiet { color: var(--ink-3); font-size: 16px; margin: 0; }
.warn {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1.5px solid currentColor;
  font: 400 13px/1.4 var(--mono);
}

.link {
  background: none;
  border: 0;
  padding: 0;
  font: 400 13px/1.2 var(--mono);
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.link:hover { color: var(--flame-ink); }

/* a key in a slot (see --slot, --key): it stands proud and goes down when pressed */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 20px;
  margin: 6px;
  border: 0;
  background: var(--paper-hi);
  color: var(--ink);
  font: 600 15px/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--key), var(--slot);
  transition: box-shadow 0.08s var(--ease), background 0.15s;
}
.btn:hover { background: #FFF9F0; }
.btn:active, .btn[aria-pressed='true'] { box-shadow: var(--key-down), var(--slot); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; box-shadow: var(--key-down), var(--slot); }
.btn-ink { background: var(--ink); color: var(--paper); --key-lit: rgba(255, 255, 255, 0.16); --key-side: rgba(0, 0, 0, 0.5); }
.btn-ink:hover { background: #24170F; }

.sq {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 6px;
  border: 0;
  background: var(--paper-hi);
  font: 400 24px/1 var(--display);
  box-shadow: var(--key), var(--slot);
  transition: box-shadow 0.08s var(--ease);
}
.sq:active { box-shadow: var(--key-down), var(--slot); }
.sq:disabled { cursor: default; color: var(--ink-3); box-shadow: var(--key-down), var(--slot); }

/* ---------- the top ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px var(--gutter);
  background: var(--paper);
  border-bottom: var(--line);
}
.mark {
  font: 500 30px/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.mark span { color: var(--flame); }
.tag { font: 400 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-3); white-space: nowrap; }
/* the rooms: a bank of keys in one slot, like the input selector on an amp.
   The room you're in stays down with its light on. On a phone the bank runs
   along the foot of the screen, under the thumb (smaller rooms, below). */
.rooms { display: flex; gap: 4px; margin-left: auto; padding: 4px; background: var(--slot-floor); box-shadow: var(--tray); }
.rooms a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  background: var(--paper-hi);
  color: var(--ink);
  font: 600 14px/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--key);
  transition: box-shadow 0.08s var(--ease), background 0.15s;
}
.rooms a:active { box-shadow: var(--key-down); }
.rooms a:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.rooms a[aria-selected='true'] { background: var(--ink); color: var(--paper); --key-lit: rgba(255, 255, 255, 0.14); box-shadow: var(--key-down); padding-left: 24px; }
.rooms a[aria-selected='true']::before { content: ''; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.rooms .n { display: none; }
.who { display: flex; align-items: center; gap: 14px; font: 400 12px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.who [data-demo-tag] { padding: 5px 8px; border: 1.5px solid var(--ink-3); }
.btn-in { min-height: 40px; padding: 9px 14px; font-size: 14px; background: var(--flame); color: var(--ink); }
.btn-in .plus { font: 500 18px/1 var(--display); margin-top: -2px; }
.btn-in .short { display: none; }

/* ---------- sections ---------- */

.sec { padding: clamp(36px, 5vw, 72px) var(--gutter) clamp(56px, 7vw, 104px); scroll-margin-top: var(--top-h, 0px); }
.rack { padding-top: clamp(22px, 2.6vw, 40px); }
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(22px, 3vw, 40px);
}
.sec-title {
  margin: 10px 0 0;
  font: 500 clamp(40px, 5.4vw, 84px)/0.94 var(--display);
  letter-spacing: -0.025em;
}
.set .sec-head { flex-direction: column; align-items: flex-start; gap: 0; }

.tally { display: flex; gap: 26px; font: 400 12px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }
.tally b { font: 400 30px/1 var(--display); color: var(--ink); margin-right: 6px; letter-spacing: -0.02em; }

/* ---------- the crate ---------- */

.rack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: start;
}
.crate-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.find { flex: 1; max-width: 340px; }
.find input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 0;
  background: var(--paper-lo);
  box-shadow: var(--well);
  font: 400 15px/1 var(--mono);
  letter-spacing: 0.02em;
  outline: none;
}
.find input::placeholder { color: var(--ink-3); }
.find input:focus { outline: 2px solid var(--flame); outline-offset: 3px; }
.crate-nav { display: flex; align-items: center; gap: 12px; }
.pos { font: 400 13px/1 var(--mono); letter-spacing: 0.06em; min-width: 66px; text-align: center; }

.crate-stage { position: relative; height: calc(var(--sw) * 1.58); }
.crate {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% -30%;
  outline: none;
  touch-action: pan-y;
  cursor: grab;
}
.crate:active { cursor: grabbing; }
.crate:focus-visible { outline: 3px solid var(--mustard); outline-offset: 6px; }

.sleeve {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sw) * 0.1);
  width: var(--sw);
  height: var(--sw);
  margin-left: calc(var(--sw) / -2);
  transform-origin: 50% 100%;
  transition: transform 0.46s var(--ease), opacity 0.36s var(--ease), filter 0.46s var(--ease), box-shadow 0.3s;
  box-shadow: 0 0 0 1px rgba(18, 10, 6, 0.4);
  background: var(--c, var(--paper-warm));
  will-change: transform;
}
.sleeve.cur { box-shadow: 0 0 0 1px rgba(18, 10, 6, 0.6), 8px 8px 0 var(--ink); cursor: pointer; }
.sleeve .face { position: absolute; inset: 0; overflow: hidden; background: var(--c, var(--paper-warm)); }
.sleeve .face img, .sleeve-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* ring wear: the shape of the disc, rubbed into the board over the years */
.sleeve .face::after, .sleeve-big::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 44.2%, rgba(255, 248, 235, 0.11) 45%, transparent 46.4%),
    linear-gradient(115deg, rgba(255, 248, 235, 0.06), transparent 38%);
  mix-blend-mode: screen;
}
.typeset {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9%;
  background: var(--paper-hi);
  color: var(--ink);
  border-top: 14px solid var(--c, var(--flame));
}
.typeset b { font: 400 clamp(11px, 1vw, 14px)/1.3 var(--mono); letter-spacing: 0.04em; }
.typeset em { font: 500 clamp(26px, 2.6vw, 44px)/0.98 var(--display); font-style: normal; letter-spacing: -0.02em; }

.crate-front {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 350;
  width: calc(var(--sw) * 1.14);
  height: calc(var(--sw) * 0.34);
  margin-left: calc(var(--sw) * -0.57);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  padding: 0 18px 16px;
  background: var(--paper-warm);
  border: var(--line);
  box-shadow: 8px 8px 0 var(--ink);
  pointer-events: none;
}
.crate-front::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--rule-2);
  pointer-events: none;
}
.cf-name { font: 500 22px/1 var(--display); letter-spacing: -0.01em; }
.cf-slot {
  align-self: start;
  margin-top: 22px;
  width: calc(var(--sw) * 0.3);
  height: 26px;
  border-radius: 13px;
  background: var(--ink);
  box-shadow: inset 0 3px 0 rgba(238, 226, 209, 0.08);
}
.cf-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 400 11px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); }

.empty {
  position: absolute;
  inset: 0 0 calc(var(--sw) * 0.4);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 20px;
}
.empty p { margin: 0; color: var(--ink-2); max-width: 30ch; }
.empty .empty-big { font: 500 clamp(30px, 3vw, 44px)/1 var(--display); color: var(--ink); margin-bottom: 8px; }
.empty .btn { margin-top: 18px; }

.dividers {
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin-top: 30px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-2);
}
.dividers button {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 1.5px solid transparent;
  background: transparent;
  font: 400 12px/1 var(--mono);
  color: var(--ink);
}
.dividers button:disabled { color: var(--ink-3); opacity: 0.4; cursor: default; }
.dividers button:not(:disabled):hover { border-color: var(--ink); }
.dividers button.on { background: var(--ink); color: var(--paper); }

/* on top: the back of the sleeve */
.ontop { padding-top: 6px; min-width: 0; }
.ot-title {
  margin: 12px 0 10px;
  font: 500 clamp(40px, 4.3vw, 70px)/0.95 var(--display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.ot-artist { font: 400 clamp(19px, 1.6vw, 24px)/1.25 var(--text); color: var(--ink-2); }
.ot-read { margin-top: 14px; font: 400 12px/1.6 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.ot-blurb { margin: 16px 0 0; max-width: 40ch; font: 400 17px/1.5 var(--text); color: var(--ink-2); }
.ot-blurb:empty { display: none; }
.ot-strip {
  display: flex;
  gap: 1px;
  height: 22px;
  margin-top: 26px;
  border: var(--line);
  background: var(--ink);
}
.ot-strip:empty { display: none; }
.ot-strip i { display: block; height: 100%; min-width: 3px; background: var(--c); }
.ot-strip i.gap { flex: 0 0 5px !important; background: var(--ink); }
.ot-moods { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font: 400 12px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--ink-2); }
.ot-moods span { display: inline-flex; align-items: center; gap: 6px; }
.ot-moods i, .sw { display: inline-block; width: 10px; height: 10px; background: var(--c); box-shadow: 0 0 0 1.5px var(--ink); flex: none; }
.ot-sides { margin-top: 22px; border-top: 1px solid var(--rule-2); }
.ot-sides:empty, .ot-moods:empty { display: none; }
.ot-sides div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font: 400 13px/1.2 var(--mono);
  letter-spacing: 0.03em;
}
.ot-sides b { font: 500 19px/1 var(--display); letter-spacing: -0.01em; }
.ot-sides .lead { flex: 1; border-bottom: 1.5px dotted var(--rule-2); transform: translateY(-4px); }
.ot-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ---------- the set ---------- */

.set-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.mood-col { min-width: 0; }
.mood-top { display: flex; justify-content: flex-start; margin-bottom: 22px; }
/* a bank of keys in one slot, like a turntable's speed selector: the chosen
   key stays down and its light is on */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--slot-floor); box-shadow: var(--tray); }
.seg button {
  position: relative;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  background: var(--paper-hi);
  font: 600 14px/1 var(--text);
  box-shadow: var(--key);
  transition: box-shadow 0.08s var(--ease), background 0.15s;
}
.seg button:active { box-shadow: var(--key-down); }
.seg button[aria-checked='true'] { background: var(--ink); color: var(--paper); --key-lit: rgba(255, 255, 255, 0.14); box-shadow: var(--key-down); padding-left: 24px; }
.seg button[aria-checked='true']::before { content: ''; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }

/* the wheel is the label of a record */
.wheel {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 210deg, rgba(238, 226, 209, 0) 0deg, rgba(238, 226, 209, 0.07) 28deg, rgba(238, 226, 209, 0) 60deg, rgba(238, 226, 209, 0) 180deg, rgba(238, 226, 209, 0.05) 208deg, rgba(238, 226, 209, 0) 240deg),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyl) 0 2px, #1A110C 2px 2.6px, var(--vinyl) 2.6px 4px);
  box-shadow: 10px 10px 0 var(--ink);
}
.wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel.spin { animation: turn 1.5s var(--ease) 1; }
.wheel .cell { cursor: pointer; transition: fill-opacity 0.18s; }
.wheel .cell:hover { fill-opacity: 0.85; }
.wheel .lab { font: 400 13px/1 var(--mono); letter-spacing: 0.08em; fill: var(--on-ink-2); pointer-events: none; }
.wheel .cell:focus-visible { outline: none; stroke: var(--mustard); stroke-width: 3; }
.wheel .lab.on { fill: var(--on-ink); font-weight: 700; }

.mood-read { margin-top: 30px; min-height: 92px; }
.set-word {
  margin: 0;
  font: 500 clamp(32px, 3.4vw, 50px)/1 var(--display);
  letter-spacing: -0.02em;
}
.set-word em { font-style: normal; }
.set-word .to { color: var(--flame); margin: 0 0.25em; }
.set-gloss { margin: 10px 0 0; font: 400 17px/1.45 var(--text); color: var(--ink-2); }

.ctl-col { display: flex; flex-direction: column; gap: 42px; min-width: 0; padding-top: 4px; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-2); }
.field-head b { font: 500 clamp(22px, 2vw, 28px)/1 var(--display); letter-spacing: -0.015em; }
.field-note { margin: 16px 0 0; font: 400 16px/1.45 var(--text); color: var(--ink-2); }

/* getting up: an input selector off a 70s amplifier. A small knob at the
   left, the five settings printed down an arc on its right, so it reads as
   a list and takes the height of one. */
.knob-wrap { position: relative; height: 184px; margin-top: 14px; }
.knob {
  position: absolute;
  left: 4px;
  top: 50%;
  width: 104px;
  height: 104px;
  margin-top: -52px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--ink) 0 4deg, #3A2A20 4deg 8deg);
  border: var(--line);
  box-shadow: 5px 5px 0 var(--ink);
  touch-action: none;
  cursor: grab;
  outline-offset: 8px;
}
.knob-face {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--paper-hi), var(--paper-lo) 72%);
  border: var(--line);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.42s var(--detent);
}
.knob-face::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: var(--line);
  background: var(--paper);
}
.knob-tick { position: absolute; left: 50%; top: 6px; width: 5px; height: 26px; margin-left: -2.5px; background: var(--flame); box-shadow: 0 0 0 1.5px var(--ink); }
.knob-stops { position: absolute; inset: 0; pointer-events: none; } /* the knob under it still turns */
.knob-stops .stop {
  position: absolute;
  transform: translate(0, -50%);
  padding: 5px 8px;
  border: 1.5px solid transparent;
  background: transparent;
  font: 400 12px/1.15 var(--mono);
  letter-spacing: 0.03em;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;
  pointer-events: auto;
}
.knob-stops .stop:hover { border-color: var(--ink); color: var(--ink); }
.knob-stops .stop.on { background: var(--ink); color: var(--paper); }
.knob-stops .pip { position: absolute; width: 3px; height: 10px; margin: -5px 0 0 -1.5px; background: var(--ink); transform-origin: 50% 50%; }

.deck { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.deck .seg[hidden] { display: none; }

.lengths {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 16px;
  padding: 4px;
  background: var(--slot-floor);
  box-shadow: var(--tray);
}
.lengths button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px 10px;
  border: 0;
  background: var(--paper-hi);
  box-shadow: var(--key);
  transition: box-shadow 0.08s var(--ease), background 0.15s;
}
.lengths button:active { box-shadow: var(--key-down); }
.lengths button b { font: 400 28px/1 var(--display); letter-spacing: -0.02em; }
.lengths button span { font: 400 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-3); }
.lengths button:hover { background: var(--paper); }
.lengths button[aria-checked='true'] { background: var(--ink); color: var(--paper); --key-lit: rgba(255, 255, 255, 0.14); box-shadow: var(--key-down); }
.lengths button[aria-checked='true'] span { color: var(--on-ink-2); }

.btn-cut {
  width: 100%;
  min-height: 78px;
  padding: 18px 26px;
  justify-content: space-between;
  background: var(--flame);
  font: 500 clamp(26px, 2.4vw, 34px)/1 var(--display);
  letter-spacing: -0.02em;
  width: calc(100% - 12px);
  --key-lit: rgba(255, 255, 255, 0.4);
  --key-side: rgba(18, 10, 6, 0.3);
}
.btn-cut::after { content: '→'; font-family: var(--display); }
.btn-cut:hover { background: #F2602A; }
.btn-cut:disabled { background: var(--paper-lo); opacity: 0.6; }

/* ---------- the running order: lights down ---------- */

.order {
  background:
    linear-gradient(112deg, #2F180F 0%, var(--ink) 58%, #23100F 100%);
  color: var(--on-ink);
  border-top: var(--line);
}
.order .kick { color: var(--on-ink-3); }
.order .quiet { color: var(--on-ink-2); font-size: 18px; }
.order .warn { color: var(--mustard); }
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, auto));
  gap: 1px;
  background: var(--rule-ink);
  border: 1px solid var(--rule-ink);
}
.stats div { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; background: #160C08; }
.stats b { font: 400 34px/1 var(--display); letter-spacing: -0.02em; font-weight: 400; }
.stats span { font: 400 11px/1.3 var(--mono); letter-spacing: 0.05em; color: var(--on-ink-3); max-width: 24ch; }

/* the night runs edge to edge so its light is never cut; the words inside line up with the page */
.night {
  display: block;
  width: calc(100% + 2 * var(--gutter));
  height: clamp(260px, 30vw, 460px);
  margin: 0 calc(-1 * var(--gutter)) 4px;
}
.curve { display: block; width: 100%; height: auto; margin: 6px 0 26px; }

.steps { width: 100%; border-collapse: collapse; }
.steps thead th {
  padding: 0 10px 12px 0;
  text-align: left;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--on-ink-3);
  border-bottom: 1px solid var(--rule-ink);
}
.steps tbody tr { cursor: pointer; transition: background 0.15s; }
.steps tbody tr:hover { background: rgba(238, 226, 209, 0.045); }
.steps tbody tr.now { background: rgba(237, 78, 21, 0.1); }
.steps td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--rule-ink); vertical-align: middle; }
.steps .n { width: 64px; font: 300 34px/1 var(--display); color: var(--on-ink-3); letter-spacing: -0.02em; }
.steps .art {
  display: block;
  width: 64px;
  height: 64px;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(238, 226, 209, 0.25), 4px 4px 0 var(--flame);
  position: relative;
  overflow: hidden;
}
.steps .art img { width: 100%; height: 100%; object-fit: cover; }
.steps .art-td { width: 88px; }
.steps .verb { font: 500 clamp(22px, 2vw, 28px)/1.05 var(--display); letter-spacing: -0.015em; }
.steps .verb .k { color: var(--flame); }
.steps .what { margin-top: 5px; font: 400 15px/1.35 var(--text); color: var(--on-ink-2); }
.steps .what b { font-weight: 600; color: var(--on-ink); }
.steps .range { width: 150px; font: 400 13px/1.35 var(--mono); letter-spacing: 0.03em; }
.steps .range span { display: block; color: var(--on-ink-3); font-size: 11px; margin-top: 3px; }
.steps .time { width: 90px; font: 400 14px/1 var(--mono); }
.steps .mood-td { width: 170px; font: 400 12px/1.3 var(--mono); letter-spacing: 0.03em; color: var(--on-ink-2); }
.steps .mood { display: inline-flex; align-items: center; gap: 8px; }
.steps .mood .sw { box-shadow: 0 0 0 1.5px var(--on-ink); }

.result-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.order { --slot-floor: #050302; --slot-cut: #000000; --slot-lip: rgba(238, 226, 209, 0.22); --slot-wall: rgba(0, 0, 0, 0.7); }
.order .btn { background: var(--paper); color: var(--ink); }
.order .btn.ghost { background: #2A1C14; color: var(--on-ink); --key-edge: rgba(238, 226, 209, 0.3); --key-lit: rgba(255, 255, 255, 0.1); --key-side: rgba(0, 0, 0, 0.45); }

/* ---------- the foot ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px 24px;
  padding: 26px var(--gutter) calc(30px + var(--mini-h, 0px));
  border-top: var(--line);
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.foot-mark { font: 500 22px/1 var(--display); color: var(--ink); letter-spacing: -0.02em; }
.foot-mark span { color: var(--flame); }

/* ---------- 04 · the dig ---------- */

.dig .sec-head { flex-direction: column; align-items: flex-start; gap: 0; }
.dig-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(26px, 3vw, 44px); }
.dig-lede { margin: 0; max-width: 54ch; font: 400 18px/1.5 var(--text); color: var(--ink-2); }
.dig-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* the dig is a row of sleeves to flip through sideways, like the crate, not a column to scroll */
.dig-grid {
  display: flex;
  gap: clamp(18px, 2.2vw, 32px);
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.dig-grid::-webkit-scrollbar { display: none; }
.dig-grid > .quiet { margin: 0; }
.dug { flex: 0 0 clamp(260px, 21vw, 310px); scroll-snap-align: start; display: flex; flex-direction: column; background: var(--paper-hi); border: var(--line); box-shadow: 6px 6px 0 var(--ink); transition: box-shadow 0.2s var(--ease); }
.dug.now-playing { box-shadow: 6px 6px 0 var(--flame); }
.dug-sleeve { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--c, var(--paper-warm)); border-bottom: var(--line); }
.dug-sleeve img, .digit-sleeve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.dug-play {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  background: var(--flame);
  border: 0;
  box-shadow: var(--key), var(--slot);
  cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.dug-play svg { width: 16px; height: 16px; margin-left: 3px; fill: var(--ink); }
.dug-play:hover { transform: scale(1.06); }
.dug-play:active { transform: scale(0.92); }
.dug-copy { display: flex; flex: 1; flex-direction: column; padding: 18px 18px 20px; }
.dug-because { font: 400 11.5px/1.35 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.dug-because b { color: var(--flame-ink); font-weight: 700; }
.dug h3 { margin: 10px 0 4px; font: 500 clamp(26px, 2.2vw, 32px)/1 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.dug-artist { font: 400 16px/1.3 var(--text); color: var(--ink-2); }
.dug-why { margin: 12px 0 0; font: 400 15px/1.45 var(--text); color: var(--ink-2); }
.dug-track { margin-top: 10px; font: 400 11.5px/1.3 var(--mono); letter-spacing: 0.03em; color: var(--ink-3); }
.dug-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; }
.dug-actions .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.dug-pass { margin-left: auto; font-size: 12px; color: var(--ink-3); }

/* ---------- 05 · the numbers: four plates after Brik's carousel ---------- */

.numbers { padding-top: 0; }
/* the head and the frame fit the screen together; the fine print follows */
.numbers-fit { display: flex; flex-direction: column; height: calc(100svh - var(--top-h, 0px) - var(--rooms-h, 0px)); min-height: 520px; padding-top: clamp(18px, 2.4vw, 32px); }
.numbers .sec-head { flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; margin-bottom: clamp(16px, 2vw, 26px); }
.numbers .sec-title { font-size: clamp(34px, 3.8vw, 58px); white-space: nowrap; }
.numbers-lede { margin: clamp(22px, 3vw, 36px) 0 0; max-width: 56ch; font: 400 18px/1.5 var(--text); color: var(--ink-2); }
/* the reel: one frame, full-bleed, the stats come and go inside it (reel.js).
   The frame's ground is the plate's own, so a plate fills it edge to edge.
   Without .reel-live (reduced motion) it's a plain row to swipe. */
.reel { position: relative; display: flex; flex: 1 1 auto; min-height: 0; margin: 0 calc(var(--gutter) * -1); }
.reel-stage { display: grid; flex: 1; min-height: 0; }
.reel-frame {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
  border-block: var(--line);
  outline-offset: -4px;
}
.reel-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.reel-track::-webkit-scrollbar { display: none; }
/* a flex box, so the plate's height is the frame's and its width follows */
.slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; padding: 24px 0 84px; box-sizing: border-box; }
.slide-art { height: 100%; width: auto; aspect-ratio: 4 / 5; max-width: 100%; flex: none; }
/* side by side, each plate's ground stops at its own edge */
.reel:not(.reel-live) .slide { overflow: hidden; }
.slide-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.reel-save { position: absolute; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 24px); z-index: 5; min-height: 38px; padding: 8px 14px; font-size: 13px; }
.reel-pager {
  position: absolute;
  right: clamp(20px, 2.4vw, 32px);
  bottom: clamp(20px, 2.4vw, 30px);
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--slot-floor);
  box-shadow: var(--tray);
}
.reel-pager button {
  min-width: 40px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  background: var(--paper-hi);
  color: var(--ink);
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: var(--key);
}
.reel-pager button[aria-current='true'] { background: var(--ink); color: var(--paper); --key-lit: rgba(255, 255, 255, 0.14); box-shadow: var(--key-down); }

/* live: the plates are layers in one frame, and a swipe or a key swaps them
   (reel.js); up and down on the frame is still the page's */
.reel-live .reel-track { position: relative; height: 100%; overflow: visible; scroll-snap-type: none; touch-action: pan-y; }
.reel-live .slide { position: absolute; inset: 0; padding: clamp(18px, 3vh, 36px) 0 clamp(70px, 9vh, 96px); visibility: hidden; will-change: transform, opacity, clip-path; }

/* dig it? — the ways out */
.digit { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.digit-art { padding: clamp(28px, 4vw, 56px); background: var(--paper-lo); border-right: var(--line); }
.digit-sleeve { position: sticky; top: 0; aspect-ratio: 1; overflow: hidden; background: var(--c, var(--paper-warm)); border: var(--line); box-shadow: 8px 8px 0 var(--ink); }
.digit-sleeve .typeset em { font-size: clamp(30px, 3.4vw, 56px); }
.digit-copy { padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 56px) 48px; }
.digit-copy h2 { margin: 12px 0 8px; font: 500 clamp(38px, 4vw, 64px)/0.95 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.digit-hear { margin-top: 20px; }
.digit-hear svg { width: 12px; height: 12px; fill: currentColor; }
.digit-group { margin-top: 28px; }
.digit-group ul { margin: 10px 0 0; padding: 0; list-style: none; border-top: var(--line); }
.digit-group a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.digit-group a b { font: 500 21px/1.1 var(--display); letter-spacing: -0.01em; }
.digit-group a span { font: 400 12px/1.35 var(--mono); color: var(--ink-3); }
.digit-group a i { grid-column: 3; font: 400 16px/1 var(--mono); font-style: normal; color: var(--flame-ink); }
.digit-group a:hover b { color: var(--flame-ink); }
.digit-got { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 22px; border-top: var(--line); }
.digit-fine { margin: 22px 0 0; font: 400 11.5px/1.45 var(--mono); color: var(--ink-3); }

/* ---------- sheets ---------- */

.sheet { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; padding: 24px; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(18, 10, 6, 0.55); }
.sheet-body {
  position: relative;
  width: min(1200px, 100%);
  max-height: calc(100svh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: var(--line);
  box-shadow: 12px 12px 0 var(--ink);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.34s var(--ease), opacity 0.24s var(--ease);
}
.sheet.open .sheet-body { transform: none; opacity: 1; }
.x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--paper-hi);
  font: 400 26px/1 var(--display);
  box-shadow: var(--key), var(--slot);
}
.x:active { box-shadow: var(--key-down), var(--slot); }

/* a record, pulled out */
.pull { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.pull-art { background: var(--paper-warm); border-right: var(--line); }
.pull-stage {
  position: sticky;
  top: 0;
  padding: clamp(28px, 4vw, 56px);
  padding-right: calc(40% + 12px);
  overflow: hidden;
}
.sleeve-big {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1;
  background: var(--c, var(--paper-hi));
  box-shadow: 0 0 0 1px rgba(18, 10, 6, 0.5), 10px 10px 0 var(--ink);
  overflow: hidden;
}
.sleeve-big .typeset em { font-size: clamp(30px, 3.4vw, 56px); }
.disc {
  position: absolute;
  z-index: 1;
  top: clamp(28px, 4vw, 56px);
  left: clamp(28px, 4vw, 56px);
  width: calc(60% - 12px - clamp(28px, 4vw, 56px));
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 200deg, rgba(238, 226, 209, 0) 0deg, rgba(238, 226, 209, 0.08) 26deg, rgba(238, 226, 209, 0) 58deg, rgba(238, 226, 209, 0) 180deg, rgba(238, 226, 209, 0.06) 206deg, rgba(238, 226, 209, 0) 238deg),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyl) 0 1.6px, #1C120C 1.6px 2.2px, var(--vinyl) 2.2px 3.4px);
  box-shadow: 0 0 0 1px rgba(18, 10, 6, 0.8);
  transform: translateX(0) rotate(0deg);
  transition: transform 0.9s var(--ease) 0.12s;
}
.sheet.open .disc { transform: translateX(64%) rotate(140deg); }
.disc.spin { animation: turn 1.8s linear infinite; }
.sheet.open .disc.spin { animation: turnout 1.8s linear infinite; }
.disc-label { position: absolute; inset: 31%; border-radius: 50%; overflow: hidden; }
.disc-label svg { width: 100%; height: 100%; display: block; }

.pull-spec { position: relative; z-index: 2; width: 100%; margin-top: 40px; }
.ps-strip { display: flex; gap: 1px; height: 18px; border: var(--line); background: var(--ink); }
.ps-strip i { display: block; height: 100%; min-width: 3px; background: var(--c); }
.ps-strip i.gap { flex: 0 0 5px !important; }
.pull-spec dl { margin: 18px 0 0; }
.pull-spec dl div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-2); }
.pull-spec dt { font: 400 11px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--ink-3); }
.pull-spec dd { margin: 0; font: 400 13px/1.4 var(--mono); letter-spacing: 0.03em; color: var(--ink); }
.pull-copy { padding: clamp(28px, 4vw, 56px); padding-top: clamp(40px, 4.6vw, 64px); min-width: 0; }
.pull-copy h2 { margin: 12px 0 8px; font: 500 clamp(38px, 4vw, 64px)/0.95 var(--display); letter-spacing: -0.025em; text-wrap: balance; }
.pull-artist { font: 400 21px/1.3 var(--text); color: var(--ink-2); }
.pull-read { margin-top: 12px; font: 400 12px/1.6 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.pull-blurb { margin: 16px 0 0; max-width: 46ch; font: 400 17px/1.5 var(--text); color: var(--ink-2); }
.pull-note { margin: 14px 0 0; }
.stamp {
  display: inline-block;
  padding: 4px 8px;
  border: 1.5px solid currentColor;
  font: 400 11px/1.3 var(--mono);
  letter-spacing: 0.05em;
  color: var(--flame-ink);
  transform: rotate(-1deg);
}
.side { margin-top: 30px; }
.side-head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: var(--line); }
.side-head b { font: 500 28px/1 var(--display); letter-spacing: -0.02em; }
.side-head .len { font: 400 12px/1 var(--mono); color: var(--ink-3); margin-right: auto; }
.side-play { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.trk {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 50px 34px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  text-align: left;
}
.trk:hover { background: rgba(18, 10, 6, 0.035); }
.trk-n { font: 400 12px/1 var(--mono); color: var(--ink-3); }
.trk-t { font: 400 16px/1.3 var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-m { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1 var(--mono); letter-spacing: 0.03em; color: var(--ink-2); white-space: nowrap; }
.trk-l { font: 400 12px/1 var(--mono); color: var(--ink-3); text-align: right; }
.trk-p { width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--ink); }
.trk-p svg { width: 11px; height: 11px; fill: currentColor; }
.trk:hover .trk-p, .trk.now-playing .trk-p { background: var(--ink); color: var(--paper); }
.trk.now-playing .trk-t { font-weight: 600; }
.trk.now-playing .trk-n { color: var(--flame-ink); }
.pull-foot { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.btn.danger { color: var(--flame-ink); --key-edge: var(--flame-ink); }

/* in: photo → rack */
.in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: 'head finder' 'type finder' 'stage stage'; gap: 0 clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 56px); }
.in-head { grid-area: head; }
.in-head h2 { margin: 12px 0 14px; font: 500 clamp(40px, 4.6vw, 72px)/0.94 var(--display); letter-spacing: -0.025em; }
.in-head p { margin: 0; max-width: 34ch; font: 400 17px/1.5 var(--text); color: var(--ink-2); }
.type-one { grid-area: type; align-self: end; margin-top: 30px; }
.type-row { display: flex; gap: 12px; margin-top: 10px; }
.type-row input {
  flex: 1;
  min-width: 0;
  height: 46px;
  margin: 6px 0;
  padding: 0 12px;
  border: 0;
  background: var(--paper-lo);
  box-shadow: var(--well);
  font: 400 17px/1 var(--text);
  outline: none;
}
.type-row input:focus { outline: 2px solid var(--flame); outline-offset: 3px; }

/* eyecüe's viewfinder: the frame, the thirds, the reticle, the shutter */
.finder {
  grid-area: finder;
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: linear-gradient(112deg, #2F180F, var(--ink) 58%, #23100F);
  border: var(--line);
  box-shadow: 8px 8px 0 var(--flame);
  cursor: pointer;
  overflow: hidden;
}
.finder input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.finder::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(238, 226, 209, 0.55); pointer-events: none; transition: border-color 0.2s; }
.finder.over::before { border-color: var(--flame); border-width: 2px; }
.finder-thirds {
  position: absolute;
  inset: 14px;
  background:
    linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(238, 226, 209, 0.14) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(238, 226, 209, 0.14) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
    linear-gradient(0deg, transparent calc(33.33% - 0.5px), rgba(238, 226, 209, 0.14) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(238, 226, 209, 0.14) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.finder-reticle { position: absolute; left: 50%; top: 44%; width: clamp(90px, 14vw, 170px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(238, 226, 209, 0.45); border-radius: 50%; }
.finder-reticle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--flame); }
.shutter {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 78px;
  height: 78px;
  margin-left: -39px;
  border-radius: 50%;
  background: var(--flame);
  --slot-floor: #050302;
  --slot-cut: #000000;
  --slot-lip: rgba(238, 226, 209, 0.3);
  --key-lit: rgba(255, 255, 255, 0.4);
  --key-side: rgba(0, 0, 0, 0.35);
  box-shadow: var(--key), var(--slot);
  transition: box-shadow 0.08s var(--ease);
}
.shutter { z-index: 2; padding: 0; border: 0; cursor: pointer; }
.shutter:hover { background: #F2602A; }
.shutter:active { box-shadow: var(--key-down), var(--slot); }
.shutter:focus-visible { outline: 3px solid var(--mustard); outline-offset: 8px; }
.finder-cap { position: absolute; left: 28px; top: 26px; max-width: calc(100% - 230px); font: 400 12px/1.3 var(--mono); letter-spacing: 0.06em; color: var(--on-ink-2); }
.finder-cap b { color: var(--on-ink); font-weight: 700; }

/* the live window: the camera under the frame, everything printed over it */
.finder { cursor: default; }
.finder::before, .finder > :not(video) { z-index: 1; }
.finder-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s var(--ease); }
.finder.live .finder-video { opacity: 1; }
.finder.live .finder-thirds { opacity: 0.7; }
.finder.live .finder-cap { padding: 6px 9px; background: var(--ink); }
.finder.live .finder-reticle { width: clamp(150px, 46%, 320px); top: 46%; }
.finder-reticle svg { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); overflow: visible; }
.hold-ring { fill: none; stroke: var(--flame); stroke-width: 4; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--hold, 0)); transition: stroke-dashoffset 0.16s linear; }
.finder:not(.auto) .hold-ring, .finder:not(.live) .hold-ring { display: none; }
.finder::after { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--paper-hi); opacity: 0; pointer-events: none; }
.finder.flash::after { animation: flash 0.34s var(--ease); }
.finder-auto {
  position: absolute;
  right: 26px;
  top: 22px;
  padding: 8px 10px;
  background: #2A1C14;
  color: var(--on-ink-2);
  border: 0;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  --slot-floor: #050302;
  --slot-cut: #000000;
  --slot-lip: rgba(238, 226, 209, 0.22);
  --key-edge: rgba(238, 226, 209, 0.3);
  --key-lit: rgba(255, 255, 255, 0.1);
  --key-side: rgba(0, 0, 0, 0.45);
  box-shadow: var(--key), var(--slot);
}
.finder-auto[aria-pressed='true'] { background: var(--flame); color: var(--ink); --key-edge: var(--ink); --key-lit: rgba(255, 255, 255, 0.35); box-shadow: var(--key-down), var(--slot); }
.finder-roll {
  position: absolute;
  left: 26px;
  bottom: 36px;
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  background: var(--paper-hi);
  color: var(--ink);
  border: 0;
  --slot-floor: #050302;
  --slot-cut: #000000;
  --slot-lip: rgba(238, 226, 209, 0.22);
  box-shadow: var(--key), var(--slot);
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.finder-roll:active { box-shadow: var(--key-down), var(--slot); }
.finder-roll span::before { content: '+ '; color: var(--flame-ink); }
.finder-roll:focus-within { outline: 3px solid var(--mustard); outline-offset: 3px; }
.finder-count { position: absolute; right: 26px; bottom: 44px; font: 400 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--on-ink); }
.finder-read {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 124px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.finder-read li {
  max-width: 100%;
  padding: 7px 10px;
  background: var(--paper);
  color: var(--ink-2);
  border: var(--line);
  box-shadow: 3px 3px 0 var(--flame);
  font: 400 12px/1.3 var(--mono);
  animation: callin 0.3s var(--ease);
}
.finder-read li b { margin-right: 6px; font: 500 16px/1.1 var(--display); color: var(--ink); letter-spacing: -0.01em; }

/* the bank: every shot this sitting, read in the background */
.bank { display: flex; gap: 12px; overflow-x: auto; padding: 0 6px 14px 0; margin-bottom: 22px; }
.bank:empty { display: none; }
.shot { position: relative; flex: 0 0 auto; width: 116px; padding: 0; border: var(--line); background: var(--ink); box-shadow: 3px 3px 0 var(--ink); text-align: left; cursor: default; overflow: hidden; }
.shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot-st { display: block; min-height: 3.6em; padding: 5px 7px; border-top: var(--line); background: var(--paper-hi); color: var(--ink-2); font: 400 10.5px/1.25 var(--mono); letter-spacing: 0.02em; }
.shot.queued img, .shot.reading img { opacity: 0.55; }
.shot.reading::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--flame); animation: scanline 1.8s var(--ease) infinite; }
.shot.done .shot-st { color: #2E6B3F; }
.shot.empty .shot-st { color: #8A6800; }
.shot.failed { cursor: pointer; }
.shot.failed .shot-st { color: var(--flame-ink); }

.in-stage-cell { grid-area: stage; margin-top: 40px; padding-top: 28px; border-top: var(--line); }
.scan { position: relative; width: min(420px, 100%); border: var(--line); overflow: hidden; margin-bottom: 22px; }
.scan img { width: 100%; height: auto; filter: saturate(0.85); }
.scan::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--flame); box-shadow: 0 0 0 1px rgba(237, 78, 21, 0.3); animation: scanline 1.8s var(--ease) infinite; }
.scan.done::after { display: none; }
.scan-msg { position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; background: var(--ink); color: var(--paper); font: 400 12px/1 var(--mono); letter-spacing: 0.04em; }
.found { width: 100%; border-collapse: collapse; }
.found td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.found td:first-child { width: 36px; }
.found input[type='checkbox'] {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 0;
  background: var(--paper-lo);
  box-shadow: var(--well);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.found input[type='checkbox']:checked { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 1px 1px 0 var(--slot-lip); }
.found input[type='checkbox']:checked::after { content: ''; width: 9px; height: 5px; border: 2.5px solid var(--paper); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.found input[type='checkbox']:disabled { opacity: 0.5; cursor: default; }
.found input[type='text'] {
  width: 100%;
  height: 38px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1.5px solid var(--rule-2);
  background: transparent;
  font: 400 16px/1 var(--text);
  outline: none;
}
.found input[type='text']:focus { border-bottom-color: var(--flame); }
.found input[type='text']:disabled { border-bottom-color: transparent; color: var(--ink-2); }
.found .f-st { width: 190px; text-align: right; }
.found .stamp { color: var(--ink-2); }
.found .stamp.ok { color: #2E6B3F; }
.found .stamp.bad { color: var(--flame-ink); }
.found .stamp.low { color: #8A6800; }
.in-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.in-foot p { margin: 0; max-width: 46ch; color: var(--ink-2); }

/* ---------- the door ---------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: auto;
  background: var(--paper);
  display: grid;
  place-items: center;
  padding: 32px var(--gutter);
}
.gate-inner {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.gate-disc {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  background:
    conic-gradient(from 210deg, rgba(238, 226, 209, 0) 0deg, rgba(238, 226, 209, 0.08) 28deg, rgba(238, 226, 209, 0) 60deg, rgba(238, 226, 209, 0) 180deg, rgba(238, 226, 209, 0.06) 208deg, rgba(238, 226, 209, 0) 240deg),
    repeating-radial-gradient(circle at 50% 50%, var(--vinyl) 0 2px, #1C120C 2px 2.6px, var(--vinyl) 2.6px 4px);
  box-shadow: 12px 12px 0 var(--flame);
  animation: turn 6s linear infinite;
}
.gd-label {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background: var(--flame);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 9px var(--flame), inset 0 0 0 10px rgba(18, 10, 6, 0.6);
}
.gd-label span { font: 500 clamp(20px, 2.6vw, 34px)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); transform: translateY(-46%); }
.gd-label i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--ink); }
/* the name in the master's chrome (metal.js); the printed one stays for a browser without WebGL */
.gd-metal { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.gd-label.metal span { visibility: hidden; }
.gd-label i { z-index: 1; }
.gate-copy h1 { margin: 14px 0 32px; font: 500 clamp(40px, 4.8vw, 74px)/0.98 var(--display); letter-spacing: -0.025em; }
.gate-copy h1 span { color: var(--flame); }
.gate-form { display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.gate-form input {
  height: 56px;
  padding: 0 16px;
  border: 0;
  background: var(--paper-lo);
  font: 400 18px/1 var(--text);
  outline: none;
  box-shadow: var(--well);
}
.gate-form input:focus { outline: 2px solid var(--flame); outline-offset: 3px; }
.gate-form .btn { min-height: 56px; margin: 12px 6px 6px; font-size: 16px; }
.gate-msg { min-height: 1.4em; margin: 6px 0 0; font: 400 13px/1.4 var(--mono); color: var(--ink-2); }
.gate-demo { display: inline-block; margin-top: 18px; }

/* ---------- the player: eyecüe's, word for word, set in wax i/o's type ---------- */

.player { position: fixed; right: 24px; bottom: 24px; z-index: 700; pointer-events: none; }
.mini-player {
  position: relative;
  width: min(440px, calc(100vw - 48px));
  padding: 5px 12px 11px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--paper);
  box-shadow: 8px 8px 0 var(--flame);
  transform: translateY(calc(100% + 48px));
  opacity: 0;
  pointer-events: none;
  transition: width 0.24s var(--ease), height 0.24s var(--ease), transform 0.28s var(--ease), opacity 0.2s;
}
.mini-player.show { transform: none; opacity: 1; pointer-events: auto; }
.mp-grab { height: 18px; display: flex; align-items: center; gap: 10px; color: var(--on-ink-3); }
.mp-grip { width: 38px; height: 4px; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }
.mp-src { font: 400 11px/1 var(--mono); letter-spacing: 0.05em; color: var(--on-ink-3); }
.mp-actions { margin-left: auto; display: flex; gap: 4px; }
.mp-icon { width: 22px; height: 22px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; font: 400 15px/1 var(--text); }
.mp-icon:hover { color: var(--paper); }
.mp-deck { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 2px; }
.mp-art-wrap { position: relative; width: 58px; height: 58px; }
.mp-art { width: 58px; height: 58px; object-fit: cover; border: 1px solid rgba(238, 226, 209, 0.54); background: var(--paper); }
.mp-disc { display: none; }
.mp-copy { min-width: 0; display: flex; flex-direction: column; }
.mp-copy strong, .mp-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-copy strong { font: 500 19px/1.05 var(--display); letter-spacing: -0.01em; }
.mp-copy span { margin-top: 4px; font: 400 13px/1.2 var(--text); color: rgba(238, 226, 209, 0.72); }
.mp-copy em { margin-top: 5px; font: 400 11px/1 var(--mono); font-style: normal; letter-spacing: 0.05em; }
.mp-copy em:empty { display: none; }
.mp-ctl { display: flex; gap: 6px; }
.mp-btn { width: 38px; height: 38px; display: grid; place-items: center; background: transparent; color: var(--paper); border: 1px solid rgba(238, 226, 209, 0.56); }
.mp-btn:hover { background: var(--paper); color: var(--ink); }
.mp-btn svg { width: 12px; height: 12px; fill: currentColor; }
.mp-play { border-color: var(--paper); }
.mp-wave { height: 26px; margin-top: 10px; display: flex; align-items: center; gap: 2px; cursor: pointer; touch-action: none; }
.mp-wave i { display: block; flex: 1; min-width: 1px; height: calc(var(--h) * 1%); min-height: 4px; background: rgba(238, 226, 209, 0.23); transition: background 0.12s, transform 0.12s; }
.mp-wave i.on { background: var(--bar, var(--flame)); box-shadow: 0 0 6px color-mix(in srgb, var(--bar, var(--flame)) 52%, transparent); }
.mp-time { display: flex; justify-content: space-between; margin-top: 4px; font: 400 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--on-ink-3); }
.mp-portals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 9px; background: rgba(238, 226, 209, 0.28); border: 1px solid rgba(238, 226, 209, 0.28); }
.mp-portals a { padding: 6px 7px; background: var(--ink); color: var(--paper); text-decoration: none; text-align: center; font: 400 11px/1 var(--mono); letter-spacing: 0.04em; }
.mp-portals a:hover { background: var(--paper); color: var(--ink); }
.mp-unfold { display: none; }

/* folded: a 68px puck, and the record in it turns */
.mini-player.puck { width: 68px; height: 68px; padding: 0; border-radius: 50%; box-shadow: 4px 4px 0 var(--flame); overflow: visible; }
.mini-player.puck .mp-grab, .mini-player.puck .mp-copy, .mini-player.puck .mp-wave, .mini-player.puck .mp-time, .mini-player.puck .mp-portals, .mini-player.puck .mp-art, .mini-player.puck [data-prev], .mini-player.puck [data-next] { display: none; }
.mini-player.puck .mp-deck, .mini-player.puck .mp-art-wrap { display: block; width: 100%; height: 100%; margin: 0; }
.mini-player.puck .mp-disc {
  display: block;
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 3px, var(--ink) 3.5px 4.5px, var(--tone, var(--flame)) 5px 13px, transparent 13.5px),
    repeating-radial-gradient(circle, var(--vinyl) 0 1.4px, #2A1C14 1.4px 2px);
}
.mini-player.puck.playing .mp-disc { animation: turn 3s linear infinite; }
.mini-player.puck .mp-ctl { position: absolute; right: -6px; bottom: -6px; z-index: 3; }
.mini-player.puck .mp-play { width: 26px; height: 26px; border-radius: 50%; background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); }
.mini-player.puck .mp-play svg { width: 9px; height: 9px; }
.mini-player.puck .mp-unfold { display: block; position: absolute; inset: 0; z-index: 2; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }

/* ---------- toast ---------- */

.toast {
  visibility: hidden;
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 950;
  max-width: min(420px, calc(100vw - 48px));
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font: 400 13px/1.4 var(--mono);
  letter-spacing: 0.02em;
  box-shadow: 4px 4px 0 var(--flame);
  transform: translateY(calc(100% + 40px));
  transition: transform 0.28s var(--ease);
}
.toast.show { transform: none; visibility: visible; }

@keyframes turn { to { transform: rotate(360deg); } }
@keyframes turnout { from { transform: translateX(64%) rotate(140deg); } to { transform: translateX(64%) rotate(500deg); } }
@keyframes flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes callin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes scanline { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }

/* ---------- smaller rooms ---------- */

@media (max-width: 1280px) {
  .tag { display: none; }
}

@media (max-width: 1080px) {
  :root { --sw: clamp(220px, 52vw, 380px); }
  :root { --rooms-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: var(--rooms-h); }
  .rack-grid, .set-grid { grid-template-columns: minmax(0, 1fr); }
  .who { margin-left: auto; }
  .rooms {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    margin: 0;
    padding: 7px max(8px, calc(var(--gutter) - 4px)) calc(7px + env(safe-area-inset-bottom, 0px));
    border-top: var(--line);
    box-shadow: inset 0 3px 0 var(--slot-wall);
  }
  .rooms a { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 5px; min-height: 46px; padding: 0 4px; font-size: 13px; }
  .rooms a[aria-selected='true'] { padding-left: 4px; }
  .rooms a[aria-selected='true']::before { left: 8px; top: 9px; margin-top: 0; }
  .rooms .n { display: block; font: 400 10px/1 var(--mono); letter-spacing: 0.06em; opacity: 0.6; }
  .player { bottom: calc(var(--rooms-h) + 16px); }
  .toast { bottom: calc(var(--rooms-h) + 16px); }
  .ontop { max-width: 640px; }
  .wheel { margin: 0 auto; }
  /* one column: the controls join the wheel's grid so "cut the set" can wait
     at the foot of the screen the whole way down, not two screens below */
  .ctl-col { display: contents; }
  .set-grid > .field { width: 100%; max-width: 640px; }
  .btn-cut { position: sticky; bottom: calc(var(--rooms-h) + 12px); z-index: 5; max-width: 640px; }
  .btn-cut:disabled { opacity: 1; color: var(--ink-3); }
  .pull { grid-template-columns: minmax(0, 1fr); }
  .pull-art { border-right: 0; border-bottom: var(--line); }
  .pull-stage { position: relative; padding-right: 40%; }
  .disc { width: calc(60% - clamp(28px, 4vw, 56px)); }
  .in { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'finder' 'stage' 'type'; }
  .digit { grid-template-columns: minmax(0, 1fr); }
  .digit-art { border-right: 0; border-bottom: var(--line); }
  .digit-sleeve { position: relative; width: min(100%, 380px); }
  .finder { margin-top: 26px; }
}

@media (max-width: 760px) {
  :root { --sw: min(72vw, 330px); }
  .top { gap: 10px; padding: 12px 16px; }
  .mark { font-size: 26px; }
  .tag { display: none; }
  .who { margin-left: auto; gap: 10px; }
  .who [data-email], .who [data-signin-link] { display: none !important; }
  .who [data-demo-tag] { white-space: nowrap; padding: 4px 6px; }
  .btn-in .long { display: none; }
  .btn-in .short { display: inline; }
  .btn-in { min-height: 38px; padding: 8px 11px; font-size: 13px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .numbers .sec-head { align-items: flex-start; gap: 12px; }
  .tally b { font-size: 26px; }
  .crate-bar { flex-wrap: wrap; }
  .find { max-width: none; flex-basis: 100%; }
  .crate-nav { margin-left: auto; }
  .dividers { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .dividers::-webkit-scrollbar { display: none; }
  .dividers button { flex: 0 0 34px; height: 36px; font-size: 13px; }
  .ot-actions .btn { flex: 1; }
  .lengths button b { font-size: 24px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .stats div:last-child { grid-column: span 2; flex-direction: row; align-items: baseline; gap: 12px; }
  .stats div { padding: 12px; }
  .stats b { font-size: 26px; }
  .night { height: clamp(220px, 72vw, 320px); }
  .steps thead { display: none; }
  .steps, .steps tbody { display: block; }
  .steps tbody tr {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas: 'art main time' 'art range mood';
    gap: 6px 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule-ink);
  }
  .steps td { display: block; padding: 0; border: 0; width: auto !important; }
  .steps .n { display: none; }
  .steps .art-td { grid-area: art; }
  .steps .art { width: 52px; height: 52px; box-shadow: 0 0 0 1px rgba(238, 226, 209, 0.25), 3px 3px 0 var(--flame); }
  .steps .main { grid-area: main; min-width: 0; }
  .steps .range { grid-area: range; }
  .steps .range span { display: inline; margin: 0 0 0 6px; }
  .steps .time { grid-area: time; text-align: right; }
  .steps .mood-td { grid-area: mood; text-align: right; }
  .steps .verb { font-size: 22px; }
  .result-actions .btn { flex: 1; }
  .sheet { padding: 0; place-items: end stretch; }
  .sheet-body { max-height: 94svh; box-shadow: none; border-width: 2px 0 0; }
  .x { top: 10px; right: 10px; }
  .pull-stage { padding: 22px 38% 22px 22px; }
  .pull-spec { display: none; }
  .disc { top: 22px; left: 22px; width: calc(62% - 22px); }
  .pull-copy { padding: 26px 18px 120px; }
  .trk { grid-template-columns: 30px minmax(0, 1fr) auto 30px; }
  .trk-l { display: none; }
  .in { padding: 26px 18px 40px; }
  .in-head h2 { font-size: 38px; }
  .in-head p { display: none; }
  .finder { aspect-ratio: 3 / 4; max-height: 64svh; }
  .finder-cap { left: 20px; top: 20px; max-width: calc(100% - 170px); }
  .finder-auto { right: 18px; top: 18px; }
  .finder-roll { left: 18px; bottom: 30px; }
  .finder-count { right: 18px; bottom: 38px; }
  .finder-read { left: 18px; right: 18px; bottom: 112px; }
  .in-stage-cell { margin-top: 26px; padding-top: 20px; }
  .shutter { width: 66px; height: 66px; margin-left: -33px; }
  .digit-art { padding: 22px 18px; }
  .digit-sleeve { width: 62%; box-shadow: 6px 6px 0 var(--ink); }
  .digit-copy { padding: 22px 18px 120px; }
  .digit-group a { grid-template-columns: minmax(0, 1fr) auto; }
  .digit-group a span { grid-column: 1; grid-row: 2; }
  .digit-group a i { grid-column: 2; grid-row: 1; }
  .dug-pass { margin-left: 0; }
  .dug { flex-basis: min(80vw, 330px); }
  .dig-nav { display: none; }
  .slide-art, .reel-live .slide-art { height: auto; width: 100%; max-height: 100%; }
  .reel-live .slide { padding: 12px 0 76px; }
  .found tr { display: grid; grid-template-columns: 36px 1fr; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .found td { border: 0; padding: 0; }
  .found td:nth-child(3), .found td:nth-child(4) { grid-column: 2; }
  .found .f-st { text-align: left; width: auto; }
  .gate { place-items: start center; padding-top: 28px; }
  .gate-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gate-disc { width: min(62vw, 300px); }
  .player { right: 16px; bottom: calc(var(--rooms-h) + 12px); }
  .mini-player { width: calc(100vw - 32px); box-shadow: 5px 5px 0 var(--flame); }
  .toast { left: 16px; bottom: calc(var(--rooms-h) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}