/* flashback — the entry page.

   Paper carries the argument; plates carry the data. Every dark box on this
   page is a plate, and every plate takes the stage palette back off base.css,
   so a cook tile and the replay page it opens are literally the same surface at
   two sizes. Nothing on the paper is rounded and nothing on it glows. */

/* ============================ the white sheet ============================
   2026-09-14: the entry pages are white and blue. The paper went from warm
   concrete to white, and the blue is the logo's own ring (#0D04B8 — which is
   the flood the system always had, to the digit). Every token keeps its name
   — the rules below still say paper, ink, rule — and only the values move,
   and only on the two pages that load this file. The replay page and the
   result card keep the concrete, which the card is printed on.
   Three tokens are this file's own: --vio is the blue as type, --vio-line is
   the blue held down for the hairlines that build the page. (The names are
   left over from an afternoon the pages were black; the values are not.) */
:root{
  --pg:#FFFFFF;
  --pg-2:#F4F4F7;
  --pg-3:#E9E9EF;
  --pi:#0B0B0C;
  --pi-2:#45454F;
  --pi-3:#7A7A86;
  --rule:rgba(11,11,12,.22);
  --rule-2:rgba(11,11,12,.1);
  --sheet-rule:rgba(13,4,184,.06);
  --pg-down:#C41E10;
  --flood:#0D04B8;
  --flood-2:#09037F;
  --flood-rgb:13,4,184;
  --vio:#0D04B8;
  --vio-line:rgba(13,4,184,.34);
}
/* The logo in the bar. Over the flood it goes to a white silhouette, since a
   blue ring on the blue is not there. */
.top-logo{display:block;flex:none;width:22px;height:22px}
body.on-flood .top-logo{filter:brightness(0) invert(1)}
/* The rules that go with these tokens are at the foot of this file: they have
   to come after the ones they override. */

/* Lenis drives the scroll; these three rules are its whole footprint. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body.paper{overflow-x:hidden}

/* The ruled sheet, fixed behind everything. It is held so far down that it
   reads as tooth in the stock rather than as a grid you could measure with. */
.sheet{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--sheet);
  background-position:calc(50% + .5px) 0;
  mask-image:linear-gradient(180deg,transparent,#000 12vh);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12vh);
}
main{position:relative;z-index:1}

/* ============================ the top bar ============================
   Fixed, hairline, and it changes colour with whatever is behind it rather
   than sitting over both surfaces in one. */
.top{
  position:fixed;top:0;left:0;right:0;z-index:40;
  /* Flex, not grid: hiding the middle line on a narrow screen shifts every
     grid child up a column, and the last one walks off the right edge. */
  display:flex;align-items:center;gap:18px;
  height:46px;padding:0 var(--gut);
  border-bottom:1px solid var(--rule);
  background:var(--pg);
  color:var(--pi);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
body.on-flood .top{background:var(--flood);color:#fff;border-bottom-color:rgba(255,255,255,.22)}
.top-mark{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.24em;
}
/* The recording light. It is the only thing on the paper that moves on its
   own, and it is telling the truth: the board behind it is running tapes. */
.top-rec{width:7px;height:7px;background:var(--down);display:block;animation:rec 1.9s steps(1,end) infinite}
@keyframes rec{0%,55%{opacity:1}56%,100%{opacity:.15}}
.top-mid{flex:1;min-width:0;color:var(--pi-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-mid span{opacity:.45;padding:0 4px}
body.on-flood .top-mid{color:rgba(255,255,255,.6)}
.top-ca{
  display:inline-flex;align-items:center;gap:8px;padding:5px 9px;flex:none;margin-left:auto;
  border:1px solid var(--rule);color:var(--pi-2);
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.top-ca:hover{border-color:var(--pi);color:var(--pi)}
.top-ca .k{color:var(--pi-3)}
.top-ca.done{background:var(--flood);border-color:var(--flood);color:#fff}
.top-ca.done .k{color:rgba(255,255,255,.7)}
body.on-flood .top-ca{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}
body.on-flood .top-ca:hover{border-color:#fff;color:#fff}
.top-ca .short{display:none}
/* The door to the app: a block of ink with mono set into it, the site's own
   button at bar height. It turns the colour of whatever it is about to open. */
.top-go{
  display:inline-flex;align-items:center;gap:10px;height:30px;padding:0 13px;flex:none;margin-left:auto;
  background:var(--pi);border:1px solid var(--pi);color:var(--pg);white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),gap .2s var(--ease);
}
.top-go:hover{background:var(--flood);border-color:var(--flood);color:#fff;gap:14px}
.top-go svg{flex:none}
/* The way back, on the app page: the same door drawn in outline. */
.top-go-ghost{background:transparent;color:var(--pi-2);border-color:var(--rule)}
.top-go-ghost:hover{background:transparent;border-color:var(--pi);color:var(--pi)}
body.on-flood .top-go{background:#fff;border-color:#fff;color:var(--flood)}
body.on-flood .top-go:hover{background:var(--pi);border-color:var(--pi);color:var(--pg)}
.top-x{display:grid;place-items:center;width:26px;height:26px;flex:none;border:1px solid transparent;transition:border-color .16s}
.top-x svg{width:13px;height:13px;fill:currentColor}
.top-x:hover{border-color:var(--rule)}

@media (max-width:900px){
  .top{gap:12px}
  .top-mid{display:none}
  .top-ca .full{display:none}
  .top-ca .short{display:inline}
}

/* ============================== the hero ==============================
   Two columns that do not agree about their baseline: the statement runs to
   the bottom of the fold, the note sits at the top of the right column. That
   disagreement is the composition. */
.hero{
  padding:calc(46px + clamp(38px,9vh,110px)) var(--gut) clamp(30px,6vh,70px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,26vw);
  gap:clamp(20px,4vw,64px);align-items:end;
}
.hero-h{margin:0;font-size:clamp(40px,10.6vw,178px);letter-spacing:-.045em;line-height:.845}
.hero-ln{display:block;overflow:hidden}
.hero-ln > i{display:block;font-style:normal;will-change:transform}
.hero-ln-tape{overflow:visible;line-height:0}
.hero-ln-tape > i{line-height:.845}
.hero-mark{display:block;width:100%;height:auto}

.hero-side{
  display:flex;flex-direction:column;gap:22px;
  padding-bottom:clamp(4px,1vh,14px);
}
.hero-p{
  font-size:clamp(13px,1.02vw,15px);line-height:1.5;color:var(--pi-2);
  max-width:38ch;text-wrap:pretty;
}
.facts{margin:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.facts > div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--rule-2)}
.facts dt{color:var(--pi-3)}
.facts dd{margin:0;color:var(--pi)}
.hero-jump{
  display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  color:var(--pi-2);transition:color .16s var(--ease),gap .2s var(--ease);
}
.hero-jump:hover{color:var(--vio);gap:16px}
.hero-jump svg{opacity:.55}

@media (max-width:840px){
  .hero{grid-template-columns:1fr;align-items:start;gap:28px}
  .hero-h{font-size:clamp(38px,13vw,86px)}
}

/* ============================== the band ==============================
   A plate laid across the paper at full bleed. It is the first dark thing on
   the page and it is running a real coin off the board. */
.band{
  position:relative;display:block;
  height:clamp(160px,25vh,272px);
  margin:0 0 clamp(48px,10vh,120px);
  background-color:var(--bg);background-image:var(--grid-bg);background-size:var(--grid-px) var(--grid-px);
  border-top:1px solid var(--pi);border-bottom:1px solid var(--pi);
  color:var(--ink);overflow:hidden;
  transition:filter .3s var(--ease);
}
.band:hover{filter:brightness(.97)}
.band-tape{position:absolute;inset:0;width:100%;height:100%;display:block}
.band-hd,.band-ft{
  position:absolute;left:0;right:0;display:flex;align-items:center;gap:12px;
  padding:11px var(--gut);pointer-events:none;
}
.band-hd{top:0}
.band-ft{bottom:0;justify-content:space-between;color:var(--faint)}
.band-rec{width:6px;height:6px;background:var(--down);animation:rec 1.9s steps(1,end) infinite;flex:none}
.band-hd b{font-weight:400;letter-spacing:.18em}
.band-hd em{font-style:normal;color:var(--faint)}
.band-ft .num{letter-spacing:.1em}

/* ============================= section heads ============================= */
.sec-hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:clamp(22px,3vw,40px);
  border-bottom:1px solid var(--pi);
}
.sec-t{font-size:clamp(26px,4.4vw,64px);letter-spacing:-.04em}
.sec-k{color:var(--pi-3)}
.sec-dot{opacity:.4;padding:0 3px}

/* ============================== the console ============================== */
.console{padding:0 var(--gut) clamp(56px,11vh,130px)}
.plate{
  position:relative;border:1px solid var(--pi);background:var(--pg-2);
}
/* Registration marks, the way a plate is marked for the press. */
.plate-reg{
  position:absolute;inset:10px;pointer-events:none;color:var(--pi-3);
  background:var(--reg-bg);background-repeat:no-repeat;opacity:.7;
}

.step{
  display:grid;grid-template-columns:minmax(200px,26%) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);
  padding:clamp(20px,3vw,34px) clamp(20px,3vw,38px);
  border-bottom:1px solid var(--rule);
}
.step-l{display:flex;flex-direction:column;gap:7px}
.step-n{
  display:inline-grid;place-items:center;width:26px;height:26px;
  border:1px solid var(--pi);color:var(--pi);font-size:9px;letter-spacing:.06em;
}
.step-t{color:var(--pi);font-size:11px;letter-spacing:.2em}
.step-d{font-size:11.5px;line-height:1.45;color:var(--pi-3);max-width:26ch}
.step-r{min-width:0}
.field.addr{letter-spacing:-.005em}

/* The rail: a hairline under the field that runs while something is reading
   the chain. It is the only progress indicator on this page. */
.rail{height:1px;background:var(--rule-2);overflow:hidden;position:relative;top:-1px}
.rail i{
  position:absolute;inset:0;display:block;background:var(--vio);
  transform:translateX(-100%);
}
.rail.on i{animation:rail 1.15s var(--ease) infinite}
@keyframes rail{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.status{
  min-height:16px;margin-top:10px;font-size:11.5px;line-height:1.45;color:var(--pi-3);
}
.status.ok{color:var(--pi-2)}
.status.err{color:var(--pg-down)}
.status.work{color:var(--vio)}

/* ---- result rows ----
   A register, not a list of cards: one ruled line each, the number on the
   right edge, and the selected one goes solid. */
.rows{display:flex;flex-direction:column;margin-top:14px}
.rows:empty{margin-top:0}
.prow{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  align-items:baseline;gap:14px;width:100%;text-align:left;
  padding:10px 10px 10px 12px;border-top:1px solid var(--rule-2);
  color:var(--pi-2);
  transition:background .14s var(--ease),color .14s var(--ease);
}
.prow:last-child{border-bottom:1px solid var(--rule-2)}
.prow:hover{background:var(--pg-3);color:var(--pi)}
.prow.on{background:var(--flood);color:#fff;border-top-color:var(--flood)}
.prow.on + .prow{border-top-color:var(--flood)}
.rsym{
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.01em;color:var(--pi);
  white-space:nowrap;
}
.prow.on .rsym{color:#fff}
.rsym em{font-style:normal;color:var(--pi-3)}
.prow.on .rsym em{color:rgba(255,255,255,.65)}
.rmeta{
  display:flex;flex-wrap:wrap;gap:5px 12px;min-width:0;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pi-3);
}
.prow.on .rmeta{color:rgba(255,255,255,.72)}
.rcap{color:var(--pi-2)}
.prow.on .rcap{color:#fff}
.rtag{border:1px solid currentColor;padding:1px 5px;line-height:1.3}
.rn{
  font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums;
  color:var(--pi);white-space:nowrap;
}
.prow.on .rn{color:#fff}
.rn em{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pi-3)}
.prow.on .rn em{color:rgba(255,255,255,.6)}
.rn-dead{color:var(--pi-3)}

/* ---- the commit bar ----
   Dead it is a hairline on paper. Armed it floods, and the flood is exactly
   the colour the replay page opens in. */
.commit{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:16px clamp(20px,3vw,38px);
  background:var(--pg-2);
  transition:background .5s var(--ease),color .5s var(--ease);
}
.commit.armed{background:var(--flood);color:#fff}
.note{font-size:11.5px;color:var(--pi-3);max-width:56ch}
.commit.armed .note{color:rgba(255,255,255,.78)}
.note.warn{color:var(--pg-down)}
.commit.armed .note.warn{color:#FFD9D5}
.commit.armed .btn-primary{background:#fff;border-color:#fff;color:var(--flood)}
.commit.armed .btn-primary:hover{background:var(--pi);border-color:var(--pi);color:var(--pg)}
.btn svg{opacity:.85}

@media (max-width:760px){
  .step{grid-template-columns:1fr;gap:14px}
  .step-l{flex-direction:row;align-items:center;gap:12px}
  .step-d{display:none}
  .commit{flex-direction:column;align-items:stretch}
  .commit .btn{width:100%}
}

/* ============================== the launch ==============================
   Where the console stood on the landing page: the console's plate, its
   numbered steps, and the flood as a handle. The whole plate is the link, and
   hovering it arms it the way the commit bar arms over on /app. */
.launch{padding:0 var(--gut) clamp(56px,11vh,130px)}
.launch-plate{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;
  border:1px solid var(--pi);background:var(--pg-2);color:var(--pi);
  transition:background .4s var(--ease);
}
.launch-plate:focus-visible{outline:2px solid var(--flood);outline-offset:3px}
.launch-l{position:relative;display:block;padding:clamp(26px,3.4vw,46px) clamp(20px,3vw,38px)}
.launch-steps{display:flex;flex-wrap:wrap;align-items:center;gap:14px 0}
.launch-step{display:inline-flex;align-items:center;gap:12px;color:var(--pi-2)}
/* A rule between the steps, drawn rather than typed, so the three read as one
   run from left to right. */
.launch-step + .launch-step::before{
  content:"";display:block;width:clamp(18px,4vw,64px);height:1px;background:var(--rule);
  margin:0 clamp(10px,1.6vw,22px) 0 clamp(4px,1vw,10px);
}
.launch-go{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);
  padding:0 clamp(22px,3.2vw,46px);background:var(--flood);color:#fff;
  transition:background .3s var(--ease),gap .3s var(--ease);
}
.launch-go b{font-weight:400;font-size:clamp(26px,3.6vw,56px);letter-spacing:-.04em;line-height:1;white-space:nowrap}
.launch-go svg{flex:none}
.launch-plate:hover{background:var(--pg-3)}
.launch-plate:hover .launch-go{background:var(--pi);color:var(--pg);gap:clamp(20px,2.6vw,36px)}
.launch-plate:hover .launch-step{color:var(--pi)}

@media (max-width:760px){
  .launch-plate{grid-template-columns:1fr}
  .launch-steps{flex-direction:column;align-items:flex-start;gap:12px}
  .launch-step + .launch-step::before{display:none}
  .launch-go{justify-content:space-between;padding:20px}
}

/* =============================== the app ===============================
   /app is the console and nothing else, so the console is the hero: the
   heading takes the landing statement's scale, the plate the full column,
   and the foot sits on the floor of the window however little is loaded. */
body.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
body.app main{flex:1}
.app-console{padding-top:calc(46px + clamp(40px,9vh,110px))}
.app .sec-t{font-size:clamp(44px,9.4vw,152px);letter-spacing:-.045em;line-height:.86}
.app .foot{margin-top:0}

@media (max-width:900px){
  .top-go{height:28px;padding:0 10px;gap:8px}
}
@media (max-width:420px){
  /* On the narrowest bar the door keeps its word and loses the arrow, so the
     wordmark and the X link are never pushed off the edge. */
  .top-go svg{display:none}
}

/* ============================== the method ==============================
   The flood: one full-bleed ultramarine plate carrying the three claims the
   product rests on. */
.method{
  background:var(--flood);color:#fff;
  padding:clamp(56px,12vh,150px) var(--gut);
  border-top:1px solid var(--pi);border-bottom:1px solid var(--pi);
}
.method-h{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,6.6vw,102px);letter-spacing:-.042em;line-height:.9;
  max-width:16ch;margin-bottom:clamp(36px,7vh,90px);
}
.claims{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid rgba(255,255,255,.28)}
.claim{
  padding:22px clamp(16px,2vw,30px) 26px;
  border-right:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28);
  display:flex;flex-direction:column;gap:11px;
}
.claim:first-child{padding-left:0}
.claim:last-child{border-right:0}
.claim-n{color:rgba(255,255,255,.55)}
.claim-t{font-size:clamp(17px,1.7vw,25px);letter-spacing:-.03em;line-height:1.02;font-weight:400}
.claim-p{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.74);text-wrap:pretty}
.claim-p code{
  font-family:var(--font-mono);font-size:11.5px;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4);
}

/* ============================= the tape room ============================= */
.board{padding:clamp(56px,11vh,130px) var(--gut) clamp(40px,7vh,80px)}
.board[hidden]{display:none}

/* ---- the roll call ----
   Paper, not plate: these are names on a sheet, not tapes running. Set in the
   same hairline grid as the board so the two read as one section, but light —
   a row of entries on the page rather than a wall of screens. */
.names{margin-bottom:clamp(26px,4vw,48px)}
.names-cap{display:flex;align-items:center;gap:9px;color:var(--pi-3);margin-bottom:12px}
/* Not the lamp. The lamp means "picked out for you"; this is a list of who is
   here, so its mark is a plain ink rule rather than a lit one. */
.tick{width:26px;height:1px;background:var(--pi-3);display:block;flex:none}
/* Hairlines drawn per cell, not by a dark ground showing through the gaps.
   The board can use the gap trick because its grid is always full; this one
   rarely is — seven names in a five-wide grid left three cells of black
   punched into the page. Top-and-left on the frame, right-and-bottom on each
   entry, so an empty track is just paper. */
.names-g{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  border-top:1px solid var(--pi);border-left:1px solid var(--pi);
}
.who-e{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:var(--pg);min-width:0;
  border-right:1px solid var(--pi);border-bottom:1px solid var(--pi);
}
.who-pfp{
  width:34px;height:34px;flex:none;object-fit:cover;background:var(--pg-3);
  /* The one picture on the page that is a person. It keeps its own colour. */
}
.who-pfp.letter{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--pi-3);
}
.who-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.who-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
/* A name is a person's, so it is set in the text face, not the mono one. */
.who-n{
  font-size:13px;line-height:1.25;color:var(--pi);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* One line, always. A fifteen-character handle beside a truncated address
   wrapped the cell to two lines and pushed its neighbours out of square — the
   handle gives up its tail first, since the address is already a stub and a
   half-printed address is worse than a half-printed name. */
.who-l{
  display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
}
.who-l a{color:var(--pi-3);text-decoration:none;border-bottom:1px solid var(--rule-2);padding-bottom:1px}
.who-l a:hover{color:var(--pi);border-bottom-color:var(--pi)}
.who-l a:focus-visible{outline:2px solid var(--pi);outline-offset:2px}
/* Both links give ground before either disappears. A cell squeezed by a long
   score used to collapse the handle alone, printing "@mi…" beside a whole
   address — which loses the half a reader recognises. The handle keeps a
   floor of seven characters; past that the address starts truncating too. */
/* Never re-case a handle. X routes case-insensitively but writes it the way the
   account does, and @neocallss for @NeoCallss is somebody else's spelling of a
   real person's name. It is printed exactly as the source recorded it. */
.who-x{overflow:hidden;text-overflow:ellipsis;min-width:7ch}
.who-w{text-transform:none;opacity:.85;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* What they took, beside the name — the reason the name is here at all. */
.who-p{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;flex:none;color:var(--pi-2)}
/* .pos / .neg keep the paper palette set in base.css — ink-blue for a gain,
   darkened red for a loss. Nothing here re-picks those. */

.spotlight{margin-bottom:clamp(26px,4vw,48px)}
.spot-cap{display:flex;align-items:center;gap:9px;color:var(--pi-3);margin-bottom:12px}
/* Signal never glows on paper: the lamp is a lime rule, not a light. */
.lamp{width:26px;height:2px;background:var(--up);display:block}
.board-spot{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--pi);border:1px solid var(--pi)}
.board-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px;background:var(--pi);border:1px solid var(--pi)}

/* ---- a tile ----
   A plate: the stage palette, at 178px. Nothing about it is a card — no
   radius, no shadow, no gap between it and its neighbour but the hairline of
   the board showing through. */
.cook{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background-color:var(--bg);background-image:var(--grid-bg);background-size:var(--grid-px) var(--grid-px);
  color:var(--ink);
  transition:background-color .2s var(--ease);
}
.cook.spot{aspect-ratio:16/10}
.cook:hover{background-color:var(--bg-2)}
.cook:focus-visible{outline:2px solid var(--up);outline-offset:-2px}
.cook-tape{position:absolute;inset:0;width:100%;height:100%;display:block}
.cook-live,.cook-run{
  position:absolute;top:8px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--font-mono);display:flex;align-items:center;gap:5px;
}
.cook-live{left:9px;color:var(--dim)}
.cook-live i{width:4px;height:4px;background:var(--down);display:block;animation:rec 1.9s steps(1,end) infinite}
.cook-run{right:9px;color:var(--faint)}
.cook-h{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:8px 9px;background:linear-gradient(0deg,rgba(247,247,249,.94) 55%,rgba(247,247,249,0));
}
.cook-pfp{width:20px;height:20px;object-fit:cover;flex:none;background:var(--bg-3);filter:grayscale(1) contrast(1.1)}
.cook-pfp.who{filter:none}
.cook-pfp.letter{
  display:grid;place-items:center;font-family:var(--font-mono);font-size:8px;
  letter-spacing:.04em;color:var(--faint);border:1px solid var(--line-2);background:none;
}
.cook-t{display:flex;flex-direction:column;min-width:0;gap:1px;flex:1}
.cook-t b{
  font-family:var(--font-display);font-weight:400;font-size:14px;letter-spacing:-.02em;
  line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cook-t em{
  font-style:normal;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cook-p{
  font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--up);white-space:nowrap;letter-spacing:-.01em;
}
.cook .neg,.cook-p.neg{color:var(--down)}
.cook.spot .cook-t b{font-size:19px}
.cook.spot .cook-p{font-size:16px}
.cook.spot .cook-pfp{width:26px;height:26px}

/* ---- the register ---- */
.register{margin-top:clamp(34px,5vw,60px)}
.reg-cap{color:var(--pi-3);margin-bottom:10px}
.reg-scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.reg-scroll .reg{min-width:640px}
.reg{width:100%;border-collapse:collapse;font-size:11.5px}
.reg th{
  text-align:right;padding:0 10px 8px;color:var(--pi-3);font-weight:400;white-space:nowrap;
  border-bottom:1px solid var(--pi);cursor:pointer;user-select:none;
}
.reg th:first-child,.reg th:nth-child(2),.reg th:nth-child(3),.reg th:last-child{text-align:left}
.reg th:nth-child(9),.reg td:nth-child(9){padding-right:26px}
.reg th:last-child,.reg td:last-child{padding-left:0;width:1%}
.reg th:hover{color:var(--pi)}
.reg th[aria-sort]{color:var(--pi)}
.reg th[aria-sort]::after{content:"↓";padding-left:5px;font-size:9px}
.reg th[aria-sort="ascending"]::after{content:"↑"}
.reg td{
  padding:9px 10px;border-bottom:1px solid var(--rule-2);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right;color:var(--pi-2);
}
.reg td:first-child,.reg td:nth-child(2),.reg td:nth-child(3),.reg td:last-child{text-align:left}
.reg tbody tr{cursor:pointer;transition:background .12s var(--ease)}
.reg tbody tr:hover{background:var(--pg-2)}
.reg tbody tr:hover td{color:var(--pi)}
.reg .r-i{color:var(--pi-3);font-size:10px}
.reg .r-sym{font-family:var(--font-display);font-size:14px;letter-spacing:-.02em;color:var(--pi)}
.reg .r-w{color:var(--pi-3);font-size:10.5px}
.reg .neg{color:var(--pg-down)}
.reg .pos{color:var(--vio)}
/* The grade is a stamp, not a letter. */
.r-g{
  display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 5px;
  border:1px solid var(--pi);font-size:10px;letter-spacing:.06em;color:var(--pi);
}
.r-g.g-S{background:var(--flood);border-color:var(--flood);color:#fff}
.r-g.g-A{background:var(--pi);color:var(--pg)}
@media (max-width:900px){
  .reg th:nth-child(4),.reg td:nth-child(4),
  .reg th:nth-child(6),.reg td:nth-child(6),
  .reg th:nth-child(7),.reg td:nth-child(7){display:none}
}

/* =============================== the foot =============================== */
.foot{border-top:1px solid var(--pi);margin-top:clamp(30px,5vh,60px)}
.ticker{overflow:hidden;border-bottom:1px solid var(--rule);padding:9px 0;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker-run{display:inline-flex;gap:0;white-space:nowrap;will-change:transform;animation:tick 46s linear infinite}
.ticker-run span{
  display:inline-flex;align-items:baseline;gap:8px;padding:0 20px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pi-3);
  border-right:1px solid var(--rule-2);
}
.ticker-run b{font-family:var(--font-display);font-size:13px;letter-spacing:-.02em;color:var(--pi);font-weight:400}
.ticker-run .pos{color:var(--vio)}
.ticker-run .neg{color:var(--pg-down)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.foot-b{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:16px var(--gut) 22px;color:var(--pi-3);
}
.foot-r a{color:var(--pi-2);border-bottom:1px solid var(--rule)}
.foot-r a:hover{color:var(--vio);border-color:var(--vio)}
kbd{
  font:inherit;border:1px solid var(--rule);padding:1px 5px;color:var(--pi-2);
}

@media (prefers-reduced-motion:reduce){
  .ticker-run{animation:none}
  .top-rec,.cook-live i,.band-rec{animation:none}
}

/* ============================ the dark sheet, cont. ============================
   The rules for the black pages (tokens at the top of the file). Last, because
   every one of them overrides a rule above at the same specificity. */
.paper .pos{color:var(--vio)}
.field:focus{border-color:var(--vio)}
/* The hairlines that build the page carry the violet, held down; the type
   stays ink. On concrete these were all drawn in ink and read as structure;
   in white on black they read as a wireframe. */
.top,.band,.sec-hd,.plate,.launch-plate,.names-g,.who-e,.foot,.method,.reg th,.step,.ticker{border-color:var(--vio-line)}
/* The board's grid was ink showing through 1px gaps, which also painted any
   empty track solid ink — a white slab, now. Each tile rules its own right
   and bottom edge instead, so an empty track is just the page. */
.board-g,.board-spot{gap:0;background:var(--pg);border:1px solid var(--vio-line);border-right:0;border-bottom:0}
.cook{border-right:1px solid var(--vio-line);border-bottom:1px solid var(--vio-line)}

/* ============================== the intro ==============================
   The tape rewinding to zero before the site opens. A plate over the whole
   window in the replay page's own frame — grid, scanlines, viewfinder
   corners — that cuts to the flood at zero and then wipes up off the page.
   intro.js owns the timing; the only motion here is the wipe. */
.intro{
  position:fixed;inset:0;z-index:100;overflow:hidden;color:var(--ink);
  background-color:var(--bg);background-image:var(--grid-bg);background-size:var(--grid-px) var(--grid-px);
  font-family:var(--font-mono);cursor:pointer;
}
.intro::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--scan-bg)}
.intro::after{content:'';position:absolute;inset:14px;pointer-events:none;z-index:2;background:var(--vf-bg);background-repeat:no-repeat;opacity:.7}
.intro.zero{background-color:var(--flood)}
.intro-tape{
  position:absolute;left:0;right:0;top:50%;width:100%;height:min(46vh,440px);transform:translateY(-50%);
  display:block;transition:opacity .25s var(--ease);
}
.intro.zero .intro-tape{opacity:.2}
.intro-osd,.intro-blk,.intro-cap,.intro-x{
  position:absolute;z-index:3;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
}
.intro-osd{top:22px;left:var(--gut);display:flex;align-items:center;gap:12px}
.intro-osd b{color:var(--ink);font-weight:400;animation:rec 1.9s steps(1,end) infinite}
.intro-osd i{font-style:normal;color:var(--ink)}
.intro-blk{top:22px;right:var(--gut)}
.intro-blk b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.intro-cap{bottom:22px;left:var(--gut)}
.intro-x{bottom:22px;right:var(--gut);color:var(--faint)}
/* The timecode, over the tape, in the display face at the hero's size; at
   zero the logo tile lands above it, the way the stamp lands on the card. */
.intro-mid{
  position:absolute;z-index:3;left:var(--gut);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,3vh,28px);
}
.intro-clock{
  margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(64px,14vw,220px);
  letter-spacing:-.045em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--ink);
}
.intro-logo{display:none;width:clamp(56px,9vw,96px);height:auto}
.intro.zero .intro-logo{display:block;animation:intro-pop .38s var(--snap) both}
@keyframes intro-pop{from{transform:scale(1.4);opacity:0}}
.intro.zero .intro-clock{color:#fff}
.intro.zero .intro-osd,.intro.zero .intro-blk,.intro.zero .intro-cap,.intro.zero .intro-x,
.intro.zero .intro-osd b,.intro.zero .intro-osd i,.intro.zero .intro-blk b{color:rgba(255,255,255,.72)}
.intro.zero::after{--vf-c:#fff}
.intro.out{clip-path:inset(0 0 100% 0);transition:clip-path .72s var(--snap);pointer-events:none}
@media (max-width:560px){.intro-osd span{display:none}.intro-x{display:none}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}