/* Royale — the console.
 *
 * TWO RULES, and every declaration below obeys both.
 *
 * 1. NOTHING ABOVE THE FOLD CHANGES SIZE. Explicit heights, reserved widths for
 *    numbers, content swapped inside boxes that were already there. All motion
 *    lives in the stage canvas, where a pixel can go anywhere and the layout
 *    never hears about it.
 *
 * 2. EVERY VALUE COMES FROM A TOKEN. This is the one that was missing, and its
 *    absence was the arithmetic reason nothing lined up: an audit of the
 *    previous version found 18 distinct spacing values (12px and 10px competing
 *    at near-equal weight), 11 font sizes inside a 6px range — nine of them
 *    within half a pixel of a neighbour — and 9 letter-spacings doing one job.
 *    Half-pixel steps convey no hierarchy and guarantee no two labels share a
 *    baseline. A literal that is not a token is a bug.
 */

:root{
  /* ---- spacing: a 4px scale, and nothing between the steps -------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* ---- type ------------------------------------------------------------
     Rebuilt on a bigger base. 14px body is a dashboard size, and on a page
     that has to sell something before it shows anything it reads as cramped
     however well the rest is spaced.

     --t-micro deliberately did NOT move: those labels sit in slots whose width
     was measured at 10px, and growing them buys nothing but ellipses. */
  --t-micro:10px;   /* every uppercase label, everywhere */
  --t-small:13px;   /* mono values, fine print, table cells */
  --t-body:17px;    /* prose, inputs, buttons */
  --t-stat:20px;    /* bar numerals, odds */
  --t-display:28px; /* the hoard, the prize */
  --t-card:24px;    /* the three cards, the lore beats */
  --t-section:clamp(30px,4.6vw,56px);  /* every section heading */
  --t-hero:clamp(40px,7.6vw,88px);     /* the one headline */

  /* ---- layout dimensions -----------------------------------------------
     Not spacing steps — the measured widths and heights the composition is
     built on. Declared here so the rule "a raw px literal is a bug" holds
     without exception, and so the console and the bar cannot drift apart. */
  --w-page:1280px;
  --w-left:248px;   /* hoard column */
  --w-right:288px;  /* log column, and the winner beneath it */
  --w-input-min:180px;
  --w-table-min:620px;
  --h-bar-wrapped:88px;      /* two rows, under 620px */
  --h-bar-value:26px;        /* the line box a bar numeral occupies, at any size */
  --w-nav:59.5rem;           /* the floating pill */
  --h-nav:56px;
  --h-hud:58px;              /* the readout row, label + value + note */
  --h-prompt:44px;           /* the line at the foot of the window */

  /* ---- the air ---------------------------------------------------------
     The single biggest thing separating this page from one that looks
     finished. Every top-level section pays it; nothing else does. */
  --pad-section:7rem;
  --pad-section-x:7vw;
  --gap-heading:4.5rem;

  /* ---- one tracking for micro-labels, one for display ------------------ */
  --track:.16em;
  --track-display:-.02em;

  /* Four radii, with a rule: --radius-pill for anything you press or that
     floats, --radius-lg for a section-sized surface, --radius for a panel,
     --radius-sm for a track nested inside one. The old pair topped out at 4px,
     which is the difference between a control and a rectangle. */
  --radius-pill:999px;
  --radius-lg:24px;
  --radius:8px;
  --radius-sm:4px;
  /* The inset that every unboxed block used to pay is gone with the shell
     that needed it: nothing sits directly against a panel edge any more, and
     the section padding is now what lines the page up. */

  /* Ink is CREAM, not blue-white. Gold against a cool white is two different
     temperatures fighting; gold against cream is one warm family, and it is
     most of why the reference reads as designed rather than as a dashboard. */
  --bg:#070a14;
  --panel:#111a2c;
  --panel-in:#0a0f1c;   /* recessed: inputs, meter track, contract box */
  --line:#1e2b47;
  --line-2:#334764;
  --ink:#fff4df;
  --dim:#c9bda9;
  --dimmer:#8a7f6f;
  --gold:#ffb524;
  --gold-hi:#ffd97a;
  --gold-ink:#160f02;
  --gold-dk:#8a5a08;    /* the hard shadow under a pressed control */
  --good:#3ddc97;
  --bad:#ff5d47;
  --live:#4fd2ff;
  --tint:rgba(255,181,36,.1);   /* one gold wash, used everywhere it is used */
  --tint-line:rgba(255,181,36,.28);
  --shadow:rgba(0,0,0,.5);

  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Anton, served from src/static. The fallback is the stack the reference
     itself uses, so the swap lands on a poster face rather than on a
     body face pretending to be one. */
  --display:"Anton","Arial Black",Impact,var(--sans);

  /* The state colour travels: LED, stage frame, clock. A COLOUR only — no
     phase is permitted to change a size. */
  --state:var(--live);
}
body.st-arming{--state:var(--gold)}
body.st-alarm {--state:var(--bad)}
/* One left: gold, because the room is dark and it is the only thing lit. */
body.st-lastone{--state:var(--gold-hi)}
body.st-royale{--state:var(--bad)}
body.st-win   {--state:var(--gold-hi)}
body.st-paused{--state:var(--bad)}

/* Self-hosted, so it is covered by `font-src 'self'` and there is no third
   party in the critical path of the headline. `swap` on purpose: the fallback
   is a poster face too, so the first paint is never wrong-looking, only
   slightly-different-looking. */
@font-face{
  font-family:"Anton";
  src:url("/static/anton.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{
  color:var(--ink);font-family:var(--sans);font-size:var(--t-body);
  line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
  /* Three washes over the base. Flat #05070c read as an empty terminal; the
     gradients give the page a light source without costing an image. */
  background:
    linear-gradient(120deg,rgba(255,181,36,.10),transparent 34rem),
    linear-gradient(250deg,rgba(79,210,255,.06),transparent 40rem),
    linear-gradient(180deg,rgba(30,43,71,.5),transparent 26rem),
    var(--bg);
  background-attachment:fixed;
}
/* The vault has stars in it because it is a memecoin, not because it is space.
   Fixed, non-interactive, and cheap: four radial dots, no image, no repaint. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.3;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(255,244,223,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 47% 28%,rgba(255,181,36,.44) 0 1px,transparent 2px),
    radial-gradient(circle at 81% 34%,rgba(255,244,223,.38) 0 1px,transparent 2px),
    radial-gradient(circle at 63% 83%,rgba(255,181,36,.36) 0 1px,transparent 2px);
  background-size:38rem 30rem;
}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

/* ============================================================== sections == */
/* The air. One rule, paid by every top-level block and by nothing else — which
   is what stops the page being a stack of things 12px apart. */
.section{position:relative;z-index:1;
  padding:var(--pad-section) var(--pad-section-x);
  max-width:var(--w-page);margin:0 auto}
@media (max-width:720px){
  .section{padding:5.5rem 1.25rem}
}
.section-h{margin:0 0 var(--gap-heading);max-width:54rem}
.section-h h2{margin:0;font-family:var(--display);font-size:var(--t-section);
  line-height:1.02;font-weight:400;letter-spacing:var(--track-display);
  text-transform:uppercase}
.section-h p{margin:var(--s4) 0 0;color:var(--dim);max-width:52ch}
.eyebrow{margin:0 0 var(--s3);color:var(--gold);font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  font-weight:700}

/* Every number is monospaced AND tabular. A counter falling from 1,204 to 8
   must not drag its neighbours across the screen on the way. */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
/* One recipe for every uppercase micro-label on the page. */
.lbl,.pane-h,.b-i small,th,.st,.stage-hud,.strip-l,.led,.w-round,.badge,.zzz,
.feedresume,.meter-l,.chip,.replaybar b{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track);
  text-transform:uppercase;font-weight:700;
}

.wrap{position:relative;z-index:1}

/* ============================================================== the pill == */
/* Floating, fixed, blurred. The old bar was a rectangle welded to the top of
   the content; this one sits over the page and lets the headline start at the
   very top of the viewport, which is the whole reason the reference reads as a
   site rather than as an app. */
.marquee{
  position:fixed;z-index:20;top:1.35rem;left:50%;transform:translateX(-50%);
  width:min(var(--w-nav),calc(100% - 2rem));height:var(--h-nav);
  display:flex;align-items:center;gap:var(--s3);padding:0 var(--s2) 0 var(--s3);
  color:var(--dim);background:rgba(7,10,20,.78);border:1px solid var(--line);
  border-radius:var(--radius-pill);
  box-shadow:0 1rem 3rem var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:var(--s2);font-family:var(--display);
  font-size:var(--t-stat);font-weight:400;letter-spacing:.02em;
  color:var(--ink);white-space:nowrap;text-transform:uppercase}
.brand img{width:32px;height:32px;flex:none;border-radius:50%;display:block}
.tick{color:var(--gold);font-weight:700;font-size:var(--t-small);
  min-width:7ch;white-space:nowrap}
.marquee .sep{width:1px;height:var(--s4);background:var(--line-2);flex:none}
.marquee .grow{flex:1}
/* The LED absorbs the squeeze, because it is the least important thing in the
   bar AND it says the same word the stage already says. */
.led{display:flex;align-items:center;gap:var(--s2);color:var(--state);
  flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.led i{width:var(--s2);height:var(--s2);flex:none;border-radius:50%;
  background:var(--state)}
.chip{color:var(--dim);background:none;border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:var(--s2) var(--s3);cursor:pointer;
  white-space:nowrap;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--track);text-transform:uppercase;font-weight:700}
.chip:hover{color:var(--ink);border-color:var(--line-2)}
.chip.on{color:var(--gold);border-color:var(--gold)}
/* The nav CTA: gold pill with a hard shadow under it, the one control on the
   page that is meant to be pressed before anything is understood. */
.chip.cta{color:var(--gold-ink);background:var(--gold);border-color:transparent;
  box-shadow:0 .3rem 0 var(--gold-dk)}
.chip.cta:hover{background:var(--gold-hi);color:var(--gold-ink);
  text-decoration:none}
/* Below this the pill cannot hold everything, so the things said elsewhere give
   way and the NAVIGATION never does. The LED text is the same word the stage
   prints in its own corner; the ticker is on the buy button and in the contract
   box further down. */
@media (max-width:720px){
  .led span{display:none}
  .marquee .sep,.marquee .tick{display:none}
}
@media (max-width:460px){
  .marquee .led{display:none}
  .brand span{display:none}
}

/* =============================================================== replay === */
.replaybar{display:none}
/* Clears the floating pill, which is fixed and would otherwise sit on top of
   it. On a replay this is the first thing the page has to say. */
body.replay .replaybar{
  display:flex;align-items:center;gap:var(--s3);height:var(--s7);
  max-width:var(--w-page);margin:calc(var(--h-nav) + 3rem) auto 0;
  padding:0 var(--s5);font-size:var(--t-small);border-radius:var(--radius-pill);
  color:var(--live);background:rgba(79,210,255,.08);
  border:1px solid rgba(79,210,255,.35);
}
/* And the hero stops paying for the pill twice. */
body.replay .hero{padding-top:3rem}
.replaybar b{color:var(--live)}
.replaybar .grow-link{margin-left:auto;font-weight:700;color:var(--live);
  white-space:nowrap}

/* ================================================================= hero === */
/* Unboxed. The old one was a bordered card, which is the single tell of a page
   assembled out of panels: the first thing a visitor sees should be type and
   art on the background, not another rectangle. */
.hero{display:grid;gap:2.5rem;align-items:center;
  grid-template-columns:minmax(0,1fr);
  padding-top:9.5rem;padding-bottom:5.25rem}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(18rem,.8fr);gap:4.5rem;
    min-height:88vh}
}
.hero-copy{max-width:46rem;min-width:0}
.hero h1{margin:0;font-family:var(--display);font-size:var(--t-hero);
  line-height:.98;font-weight:400;letter-spacing:var(--track-display);
  text-transform:uppercase}
.hero h1 .hl{color:var(--gold)}
.hero .lede{margin:var(--s5) 0 0;line-height:1.6;color:var(--dim);max-width:46ch}
.herorisk b{color:var(--ink)}

/* The mascot, and the halo it stands in. The halo is a blurred circle rather
   than part of the image, so the artwork stays a clean cut-out and the glow
   follows whatever the page background happens to be. */
.hero-art{position:relative;display:grid;place-items:center;min-width:0}
.hero-art::before{content:"";position:absolute;width:78%;aspect-ratio:1;
  border-radius:50%;background:rgba(255,181,36,.16);filter:blur(2.5rem)}
.hero-art img{position:relative;display:block;width:min(100%,26rem);height:auto}
@media (max-width:899px){
  .hero{text-align:center;padding-top:8.5rem}
  /* NOT `margin:0 auto` on .hero-copy. An auto margin on a grid item turns off
     `justify-self:stretch`, so the item stops filling its track and sizes to
     its own max-content instead — which here is the headline, 377px wide in a
     335px track, and that overflow propagated out to the document. The
     centring wanted was of the TEXT, and `text-align` above already does it. */
  .hero .lede{margin-left:auto;margin-right:auto}
  .hero .actions{justify-content:center}
  /* Art first on a phone: the headline alone above the fold is a wall of
     letters with nothing to look at. */
  .hero-art{order:-1}
  .hero-art img{width:min(72%,17rem)}
}

/* ================================================================ steps === */
/* Deliberately NOT three more bordered panels — a rule down the left and a big
   numeral is what stops this page reading as a stack of identical boxes. */
.steps{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)} }
.step{padding-left:var(--s5);border-left:2px solid var(--line-2)}
.step-n{display:block;font-family:var(--display);font-size:var(--t-section);
  font-weight:400;color:var(--gold);letter-spacing:var(--track-display);
  line-height:.9}
.step h3{margin:var(--s3) 0;font-size:var(--t-card);font-weight:800;
  color:var(--ink);letter-spacing:var(--track-display);line-height:1.15}
/* Four lines reserved. Step 01's sentence is rewritten from /api/state the
   moment the entry floor is known, and a paragraph that grows a line on the
   first poll would push the whole page down one frame in. */
.step p{margin:0;line-height:1.6;color:var(--dim);
  min-height:calc(var(--t-body) * 1.6 * 4)}

/* ================================================================ cards === */
.cards{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.card{padding:2rem;border:1px solid var(--tint-line);border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(255,181,36,.06),transparent 60%),
    rgba(17,26,44,.8);
  box-shadow:0 2rem 4rem rgba(0,0,0,.22)}
.card b{display:block;font-family:var(--display);font-size:var(--t-card);
  font-weight:400;letter-spacing:var(--track-display);text-transform:uppercase;
  margin:var(--s4) 0 var(--s2)}
.card p{margin:0;color:var(--dim);line-height:1.55}
.card .glyph{font-size:2rem;line-height:1}

/* ================================================================= lore === */
.lore{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr);
  counter-reset:beat}
@media (min-width:760px){ .lore{grid-template-columns:repeat(3,minmax(0,1fr))} }
.beat{position:relative;padding-top:var(--s5);border-top:1px solid var(--line)}
.beat h3{margin:0 0 var(--s3);font-family:var(--display);font-size:var(--t-card);
  font-weight:400;letter-spacing:var(--track-display);text-transform:uppercase;
  color:var(--gold)}
.beat p{margin:0;color:var(--dim);line-height:1.6}

/* ================================================================= foot === */
.foot{max-width:var(--w-page);margin:0 auto;
  padding:0 var(--pad-section-x) var(--pad-section)}
@media (max-width:720px){ .foot{padding:0 1.25rem 5.5rem} }
.actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:2.5rem}
/* Pills with a hard shadow under them, not rectangles with a border. Height and
   the shadow are tokens too, so the gold button cannot hang 3px below the flat
   controls beside it — which it did, in both CTA rows. */
.btn{display:inline-flex;align-items:center;height:var(--s7);padding:0 var(--s5);
  background:var(--gold);color:var(--gold-ink);font-weight:800;
  font-size:var(--t-body);border:0;border-radius:var(--radius-pill);cursor:pointer;
  font-family:inherit;box-shadow:0 .35rem 0 var(--gold-dk);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 .5rem 0 var(--gold-dk)}
.btn:active{transform:translateY(2px);box-shadow:0 .15rem 0 var(--gold-dk)}
.btn:hover{background:var(--gold-hi)}
.btn:active{background:var(--gold-hi)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);
  border-bottom:3px solid var(--line-2)}
.btn.ghost:hover{background:#16203a}
.btn[aria-disabled]{background:var(--line);color:var(--dim);
  border-bottom-color:var(--line-2);cursor:default}
/* `flex:1 1 0` and `min-width:0` together, and both are load-bearing.
   This is a <button> holding 45 reserved characters — a 377px intrinsic width,
   wider than a phone. Its content-based flex basis dragged the hero, and with
   it the whole document, past the right edge at 375px; `max-width:100%` cannot
   help, because the 100% it resolves against is the box its own width just
   widened. A zero basis takes the content out of the sizing entirely and lets
   the ellipsis do its job. */
.ca{flex:1 1 0;height:var(--s7);font-family:var(--mono);font-size:var(--t-small);
  color:var(--dim);background:var(--panel-in);cursor:pointer;text-align:left;
  border:1px dashed var(--line-2);border-radius:var(--radius-pill);
  padding:0 var(--s4);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ca:hover{color:var(--ink);border-color:var(--gold)}
.ca.copied{color:var(--good);border-color:var(--good);border-style:solid}
.herorisk{margin:var(--s4) 0 0;font-size:var(--t-small);color:var(--dimmer)}

/* ============================================================== the room == */
/* Everything from here down is the INSTRUMENT, and it stays dense on purpose.
 * The page around it breathes; this does not. A live machine that reads like a
 * marketing section stops looking like a machine, and the contrast is what
 * makes the arena feel like the product rather than another block of content.
 *
 * The one thing it takes from the new system is the radius and the shadow, so
 * it sits on the page instead of being welded to it. */
.room-body{display:flex;flex-direction:column;gap:var(--s3)}

/* ---- the window ------------------------------------------------------------
   One frame around the whole instrument, so it reads as a machine somebody left
   running rather than as three cards that happen to be near each other. The
   shape is lifted from token-ops' board: titlebar, readouts, body, prompt. */
.term{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;font-family:var(--mono);
  box-shadow:0 2rem 4rem rgba(0,0,0,.35)}

.titlebar{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);
  border-bottom:1px solid var(--line);background:var(--panel-in);flex-wrap:wrap}
.dots{display:flex;gap:6px;flex:none}
.dots i{width:11px;height:11px;border-radius:50%;display:block}
.dots .r{background:var(--bad)} .dots .y{background:var(--gold)} .dots .g{background:var(--good)}
.tb-name{font-size:var(--t-small);letter-spacing:.02em;color:var(--dim)}
.titlebar .grow{flex:1}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--good)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.pill.paused{color:var(--bad)} .pill.paused i{background:var(--bad)}

/* ---- the readouts ----------------------------------------------------------
   Label over value over a note, and the note is what makes the row readable
   without knowing anything: "the survivor takes" means nothing on its own, and
   "too small to pay out yet" means everything.

   Scrolls sideways rather than wrapping. A row that wraps changes height, and
   this one sits directly above a canvas whose size is computed from the space
   left over. */
.hud{display:flex;align-items:flex-start;gap:var(--s5);padding:var(--s4);
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin;
  background:linear-gradient(180deg,rgba(255,181,36,.05),transparent)}
.hud .kv{display:flex;flex-direction:column;gap:3px;flex:none;white-space:nowrap;
  min-height:var(--h-hud)}
.hud .k{font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--dimmer);font-weight:700}
.hud .v{font-size:var(--t-stat);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.hud .v small{font-size:var(--t-micro);color:var(--dim);margin-left:var(--s1)}
.hud .s{font-size:var(--t-small);color:var(--dim);font-family:var(--sans)}
.hud .kv.gold .v{color:var(--gold)}
.hud .sep{flex:none;width:1px;align-self:stretch;background:var(--line)}

/* ---- the body -------------------------------------------------------------
   No borders and no radius on the two halves: they are panes of one window, so
   a single hairline between them is the whole separation needed. */
.console{flex:none;display:grid;gap:1px;background:var(--line);
  grid-template-columns:minmax(0,1fr);grid-template-rows:320px 224px}
.stage,.log{background:var(--panel);min-width:0;min-height:0;position:relative;
  contain:layout paint}
.log{display:flex;flex-direction:column;padding:0}
/* On a phone the scene comes first. Static CSS order — nothing reorders at
   runtime. */
.stage{order:-1;padding:0;overflow:hidden}
@media (min-width:900px){
  .stage{order:0}
  .console{grid-template-columns:minmax(0,1fr) var(--w-right);
    grid-template-rows:420px}
}

/* ---- the prompt -----------------------------------------------------------
   One line, rewritten in place, never appended to. This is where the ceremony
   narrates itself — which is what let the countdown above go back to meaning
   exactly one thing. */
.prompt{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-top:2px solid color-mix(in srgb,var(--state) 45%,var(--line));
  background:linear-gradient(0deg,color-mix(in srgb,var(--state) 7%,var(--panel-in)),var(--panel-in));
  font-size:var(--t-small);color:var(--ink);min-height:var(--h-prompt)}
.prompt .ps1{color:var(--good);flex:none}
.prompt .spin{color:var(--state);flex:none;width:1ch;text-align:center}
.prompt .stxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  body.st-royale .prompt,body.st-alarm .prompt{animation:promptPulse 1.1s ease-in-out infinite}
  @keyframes promptPulse{50%{background:color-mix(in srgb,var(--state) 18%,var(--panel-in))}}
}

.pane{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s3);position:relative;
  min-width:0;min-height:0;contain:layout paint;
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.28)}
.pane-h{color:var(--dimmer)}
.fine{margin:var(--s3) 0 0;font-size:var(--t-small);line-height:1.5;
  color:var(--dimmer)}

/* The meter and the chip row are gone with the panel that held them. The meter
   needed the visitor to already know what a payout minimum was before it said
   anything at all; the sentence under the value says it outright. */
.big{font-size:var(--t-display);font-weight:800;color:var(--gold);
  letter-spacing:var(--track-display);margin-top:var(--s2);line-height:1.1}
.big small{font-size:var(--t-micro);color:var(--dim);margin-left:var(--s2);
  font-weight:400;letter-spacing:var(--track)}

/* ================================================================ stage === */
.stage canvas{display:block;width:100%;height:100%}
.stage-hud{position:absolute;top:var(--s3);left:var(--s3);right:var(--s3);
  display:flex;justify-content:space-between;gap:var(--s2);pointer-events:none}
.stage-hud .st-l{color:var(--state)}
/* Reserved, and right-aligned inside the reservation. As free-width text in a
   space-between row, "1,204 of 1,204" shrinking to "8 of 1,204" moved itself
   every elimination — the only measurable layout shift left on the page. */
.stage-hud .st-r{color:var(--dim);font-weight:400;letter-spacing:0;
  min-width:15ch;text-align:right}
.strip{position:absolute;left:0;right:0;bottom:0;height:var(--s6);display:flex;
  align-items:center;gap:var(--s2);padding:0 var(--s3);
  background:rgba(5,8,15,.82);border-top:1px solid var(--line);overflow:hidden}
.strip-l{color:var(--dimmer);flex:none}
.strip-v{font-family:var(--mono);font-size:var(--t-micro);color:var(--gold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-v em{font-style:normal;background:var(--gold);color:var(--gold-ink);
  padding:0 2px}
.strip-v .off{color:var(--dimmer)}

/* ================================================================== log === */
/* THREE COLUMNS, and the middle one is a fixed 8ch. Without it every tag was
   its own width and no two lines started their message in the same place, so a
   feed of forty entries read as forty ragged sentences rather than as a log.
   The header row above them is the same three widths, so the column names sit
   over their columns. */
.feedhead{flex:none;display:flex;gap:var(--s2);padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line);background:var(--panel-in);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--dimmer)}
.feedhead .ts{flex:none;width:9ch}
.feedhead .tg{flex:none;width:8ch}
.feedlines{flex:1;min-height:0;overflow-y:auto;padding:var(--s2) var(--s3);
  font-family:var(--mono);font-size:var(--t-small);line-height:var(--s5);
  display:flex;flex-direction:column}
/* Line-height is a token and rows have no gap, so the scroll viewport is always
   a whole number of rows and the bottom line is never sliced in half. */
.fl{display:flex;gap:var(--s2);color:var(--ink);word-break:break-word}
.fl .ts{flex:none;color:var(--dimmer)}
.fl .tg{flex:none;width:8ch;font-weight:800;letter-spacing:0}
.fl .tx{flex:1;min-width:0}
.fl.i .tg{color:var(--live)} .fl.g .tg{color:var(--good)}
.fl.w .tg{color:var(--gold)} .fl.b .tg{color:var(--bad)}
.fl.a{color:var(--dimmer)} .fl.a .tg{color:var(--dimmer)}
/* `lead`, not `big`. There is already a `.big` on the page — the display-sized
   numerals — and a feed line carrying that class inherited a 28px timestamp,
   which pushed its whole row two columns to the right. Two classes with the
   same name doing different jobs in one stylesheet is a collision waiting for
   exactly this. */
.fl.lead .tx{color:#fff;font-weight:700}
.feedresume{flex:none;margin:0 var(--s3) var(--s2);color:var(--gold);
  background:var(--tint);border:1px solid var(--tint-line);
  border-radius:var(--radius-pill);padding:var(--s1);cursor:pointer}

/* The strip of four readouts under the console is gone: it became the HUD row
   inside the window, where a label and a value can sit together and where two
   of the four could be replaced by ones a visitor can act on. */

/* =============================================================== columns == */
.cols{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr);
  /* Not stretch: the winner pane holds 133px of content and was being pulled to
     288px, leaving a 155px hole in one contiguous block. */
  align-items:start}
@media (min-width:900px){ .cols{grid-template-columns:minmax(0,1fr) var(--w-right)} }

.entry .rule{font-size:var(--t-body);color:var(--dim);
  margin:var(--s2) 0 var(--s3);line-height:1.6;
  /* Exactly two lines at this size and leading. It reserved 63px for 41.6px. */
  min-height:calc(var(--t-body) * 1.6 * 2)}
.entry .rule b{color:var(--ink);font-family:var(--mono);font-size:var(--t-small)}
.row{display:flex;gap:var(--s2);flex-wrap:wrap}
input[type=text]{flex:1;min-width:var(--w-input-min);height:var(--s7);
  background:var(--panel-in);border:1px solid var(--line);color:var(--ink);
  padding:0 var(--s3);font-family:var(--mono);font-size:var(--t-small);
  border-radius:var(--radius)}
input[type=text]:focus{outline:none;border-color:var(--line-2)}
/* Reserved for the TALLEST state it can hold — the not-eligible answer, which
   carries a badge, a line of odds and a 48px button. It reserved 76px for
   content measured at 94-104px, so the panel still jumped when used. */
.result{margin-top:var(--s3);font-size:var(--t-body);min-height:124px}
.badge{display:inline-block;padding:var(--s1) var(--s2);border-radius:var(--radius-sm)}
.badge.in{background:rgba(61,220,151,.12);color:var(--good);
  border:1px solid rgba(61,220,151,.38)}
.badge.out{background:rgba(255,93,71,.12);color:var(--bad);
  border:1px solid rgba(255,93,71,.38)}
.odds{margin-top:var(--s2);font-family:var(--mono);font-size:var(--t-small)}
.odds b{color:var(--gold);font-size:var(--t-stat)}
.muted{color:var(--dimmer)}

/* =============================================================== winner === */
.winner{display:flex;flex-direction:column}
.w-round{color:var(--dimmer);margin-top:var(--s2)}
.w-addr{font-family:var(--mono);font-size:var(--t-small);margin-top:var(--s1);
  color:var(--ink);word-break:break-all;
  /* Two lines of a 44-character address at this width. Reserved, because this
     pane no longer stretches and would otherwise resize when a winner lands. */
  min-height:calc(var(--t-small) * 1.4 * 2)}
.winner .links{margin-top:var(--s3);font-size:var(--t-small);display:flex;
  gap:var(--s3);flex-wrap:wrap;font-family:var(--mono)}
.winner .links a[hidden]{display:none}

/* ============================================================== history === */
.hist{overflow:hidden}
.tablewrap{overflow-x:auto;margin-top:var(--s2)}
table{width:100%;min-width:var(--w-table-min);border-collapse:collapse;
  font-size:var(--t-small);table-layout:fixed}
th{text-align:left;color:var(--dimmer);padding:0 var(--s2) var(--s2) 0}
td{padding:var(--s2) var(--s2) var(--s2) 0;border-top:1px solid var(--line);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.st{font-weight:800}
.st.done{color:var(--good)} .st.skipped{color:var(--dim)} .st.failed{color:var(--bad)}
.st.claiming,.st.drawing,.st.paying{color:var(--live)}
/* Same height as a real row, so the table does not jump 16px when the first
   round lands. */
.empty{color:var(--dimmer);text-align:center;padding:var(--s2) 0;
  white-space:normal;height:var(--s6)}

/* The old rule lived here too and put `max-width:74ch` on the footer BOX, so
   the rule above it that centres the footer on the page had no effect and the
   whole thing sat in a 519px column against the left edge. The measure belongs
   on the text, not on the container. */
.foot p{margin:0;font-size:var(--t-small);line-height:1.65;color:var(--dimmer);
  max-width:74ch}
.foot::before{content:"";display:block;height:1px;background:var(--line);
  margin-bottom:var(--s5)}

/* =============================================================== motion === */
/* All that is left in CSS. Nothing here moves layout: the LED pulses and the
   meter fills. Every other moving thing on this page is a pixel in the stage. */
@media (prefers-reduced-motion:no-preference){
  .led i{animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  body.st-alarm .led i,body.st-royale .led i{animation-duration:.5s}
}
@media (prefers-reduced-motion:reduce){ .meter i{transition:none} }

/* Launch composition override: the DOM was rebuilt around one compact vault
   window. These rules deliberately supersede the retired HUD/log layout above. */
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.brand img{width:31px;height:31px;border-radius:50%}.brand span{font-family:var(--display);font-size:21px}
.hero{grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr);min-height:620px;padding-top:5rem}
.vault-proof{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:end;max-width:430px;margin-top:28px;padding:14px 0;border-top:1px solid var(--line)}
.vault-proof .lbl{grid-column:1/-1}.vault-proof b{font-size:1.5rem;color:var(--gold-hi)}.vault-proof span:last-child{color:var(--dim);font-size:12px}
.terminal-link{display:inline-flex;margin-top:26px;border-bottom:1px solid var(--gold);padding-bottom:3px;font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.room-section{padding-top:1.5rem}.hl-row{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:linear-gradient(100deg,rgba(255,181,36,.08),transparent 70%)}
.hl-row .kv{display:flex;flex-direction:column;gap:4px;min-width:0;padding:18px 20px;border-right:1px solid var(--line)}.hl-row .kv:last-child{border:0}
.hl-row .k{color:var(--dimmer)}.hl-row .v{overflow:hidden;font-size:clamp(23px,3vw,34px);line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.hl-row .gold .v{color:var(--gold)}
/* The ◎ unit is a symbol on the number, not part of it: give it air so it does
   not read as "0.000583◎" glued, and dim it so the figure stays dominant. */
.hl-row .v small,.sub-row .seg .num small{font-size:.6em;font-weight:600;color:var(--dim);margin-inline-start:.16em;vertical-align:baseline}
.hl-row .s{min-height:18px;color:var(--dim);font-size:12px;font-family:var(--sans)}
.sub-row{display:flex;gap:10px;align-items:center;overflow:hidden;padding:10px 20px;border-bottom:1px solid var(--line);color:var(--dim);font:12px var(--mono);white-space:nowrap}.sub-row b{color:var(--ink)}.sub-row .dot{color:var(--gold)}
.console{grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:415px;min-height:415px}.roster{display:flex;flex-direction:column;min-width:0;background:var(--panel)}
.roster-h{display:flex;justify-content:space-between;padding:13px 14px;border-bottom:1px solid var(--line);font:700 var(--t-micro) var(--mono);letter-spacing:var(--track);text-transform:uppercase}.roster-h small{color:var(--dimmer);font-weight:400}
.roster-list{display:flex;flex:1;flex-direction:column;gap:7px;overflow:hidden;padding:10px 14px;color:var(--dim);font:12px var(--mono)}.roster-list>*{margin:0}
.log{position:relative;display:flex;min-height:136px;border-top:1px solid var(--line);background:var(--panel)}.feedhead{display:flex;flex-direction:column;justify-content:center;gap:2px;width:190px;padding:13px 16px;border-right:1px solid var(--line);font:700 var(--t-micro) var(--mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--gold)}
.feedhead span:last-child{color:var(--dimmer);font-size:10px;letter-spacing:0}.feedlines{justify-content:flex-end;gap:5px;padding:12px 16px;font:12px/1.35 var(--mono)}
.fl .tg{color:var(--live)}.fl.g .tg{color:var(--good)}.fl.w .tg{color:var(--gold)}.fl.b .tg{color:var(--bad)}.fl.a{color:var(--dimmer)}
.feedresume{position:absolute;right:14px;bottom:10px;margin:0}.prompt{border-top:2px solid color-mix(in srgb,var(--state) 45%,var(--line))}
.cols{grid-template-columns:minmax(0,1fr) 270px}.entry .rule{min-height:45px}.result{min-height:67px}.winner{min-height:0}.w-addr{min-height:37px}.steps,.lore{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:0;padding-top:4rem}.hero-copy{order:0}.hero-art{order:1;margin-top:-1rem}.hero-art img{width:min(90vw,430px)}.hl-row{grid-template-columns:repeat(2,1fr)}.hl-row .kv{padding:14px 16px}.hl-row .kv:nth-child(odd){border-right:1px solid var(--line)}.hl-row .kv:nth-child(even){border-right:0}.hl-row .kv:nth-child(-n+2){border-bottom:1px solid var(--line)}.hl-row .v{font-size:clamp(17px,4.9vw,22px)}.sub-row{padding:10px 16px}.console{grid-template-columns:1fr;grid-template-rows:310px 172px}.roster{border-top:1px solid var(--line)}.roster-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:126px}.log{min-height:145px}.feedhead{width:125px}.cols{grid-template-columns:1fr}.steps,.lore{grid-template-columns:1fr}.step,.beat{min-height:0}}
@media(max-width:470px){.brand span,.tick,.marquee .sep,.led span{display:none}.hero{padding-top:3rem}.hero h1{font-size:clamp(50px,16vw,72px)}.actions{flex-direction:column}.ca{flex:none;width:100%;max-width:100%;height:48px;min-width:0}.console{grid-template-rows:260px 160px}.log{display:block;min-height:165px}.feedhead{width:auto;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;justify-content:space-between}.feedlines{height:112px}.sub-row span:nth-of-type(n+5){display:none}.room-section{padding-left:12px;padding-right:12px}.term{border-radius:12px}}

/* Activity is a compact, full-width conversation inside the vault window —
   never a detached sidebar. The two utility panes below are one joined slab. */
.log{display:flex;flex-direction:column;min-height:218px}
.feedhead{width:auto;min-height:43px;padding:0 16px;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;justify-content:space-between}
.feedlines{height:174px;flex:none;justify-content:flex-end;padding:12px 20px}
.cols{gap:0;align-items:stretch;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--line)}
.cols .pane{height:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:var(--panel)}
.cols .winner{border-left:1px solid var(--line)}
@media(max-width:800px){.log{min-height:200px}.feedlines{height:156px}.cols{gap:0}.cols .winner{border-top:1px solid var(--line);border-left:0}}
@media(max-width:470px){.log{min-height:210px}.feedlines{height:157px}}

/* Landing: explanation first, then a deliberate preview. The cat's full arena
   belongs to /terminal; this is only enough live state to invite a visitor in. */
.how-section{padding-top:2rem}.how-section .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:var(--s5);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line)}
.how-section .step{min-height:220px;padding:var(--s4);background:var(--panel)}.how-section .step>b{color:var(--gold);font:700 var(--t-small) var(--mono)}.how-section .step h3,.proof-card h3{margin:var(--s3) 0 var(--s2);font-size:var(--t-body);color:var(--ink)}.how-section .step p,.proof-card p{margin:0;color:var(--dim);line-height:1.6}
/* ---- how a round works: four beats, one strip ----------------------------
   Numbered list, not cards: the beats are a SEQUENCE, and four boxes side by
   side say "four features" rather than "this, then this". Each beat carries
   its own mechanics in its body text, which is what let the second explanatory
   section go away entirely. */
.beats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  margin:var(--s5) 0 0;padding:0;list-style:none;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--line)}
.beats li{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);
  background:var(--panel)}
.beats b{color:var(--gold);font:700 var(--t-small) var(--mono);
  letter-spacing:var(--track)}
.beats h3{margin:0;font-size:var(--t-body);color:var(--ink)}
.beats p{margin:0;color:var(--dim);line-height:1.6}
/* The two payout bounds, once, under the four beats — instead of a dim
   paragraph repeating them inside two of them. */
.beats-fine{margin:var(--s3) 0 0;color:var(--dimmer);font-size:var(--t-small)}
@media(max-width:800px){.beats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:470px){.beats{grid-template-columns:1fr}}

.proof-card{margin-top:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(105deg,rgba(255,181,36,.08),transparent 48%),var(--panel)}.proof-card p:last-child{max-width:66ch}
.preview-section{padding-top:5rem}.vault-preview{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);min-height:310px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(105deg,rgba(255,181,36,.08),transparent 60%),var(--panel);box-shadow:0 1.5rem 3rem rgba(0,0,0,.28)}.preview-copy{display:flex;flex-direction:column;align-items:flex-start;padding:var(--s5)}.preview-status{display:flex;gap:8px;align-items:center;color:var(--good);font:700 var(--t-micro) var(--mono);letter-spacing:var(--track);text-transform:uppercase}.preview-status i{width:7px;height:7px;border-radius:50%;background:currentColor}.preview-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);width:100%;margin:var(--s5) 0}.preview-stats div{display:flex;min-width:0;flex-direction:column;gap:4px}.preview-stats span{color:var(--dimmer);font:700 var(--t-micro) var(--mono);letter-spacing:var(--track);text-transform:uppercase}.preview-stats b{overflow:hidden;color:var(--ink);font:700 clamp(22px,3vw,34px) var(--mono);text-overflow:ellipsis;white-space:nowrap}.preview-stats div:first-child b{color:var(--gold)}.preview-stats small{color:var(--dim);font-size:12px;line-height:1.4}.vault-preview>img{align-self:end;justify-self:center;width:min(100%,340px);height:auto;margin:-14px 0 -38px;image-rendering:auto}
.terminal-page .room-section{padding-top:9rem}.terminal-page .runtime-buy{display:none!important}.terminal-page .section-h h1{margin:0;font:clamp(42px,6vw,70px)/.95 var(--display);text-transform:uppercase}.terminal-page .log{min-height:218px}
@media(max-width:800px){.how-section .steps{grid-template-columns:repeat(2,minmax(0,1fr))}.vault-preview{grid-template-columns:1fr}.vault-preview>img{display:none}.preview-stats{gap:var(--s3)}.terminal-page .room-section{padding-top:7.5rem}}
@media(max-width:470px){.how-section .steps{grid-template-columns:1fr}.how-section .step{min-height:0}.preview-section{padding-top:4rem}.preview-copy{padding:var(--s4)}.preview-stats{grid-template-columns:1fr;gap:var(--s3);margin:var(--s4) 0}.preview-stats div{padding-bottom:var(--s2);border-bottom:1px solid var(--line)}.preview-stats div:last-child{border:0;padding-bottom:0}}

/* Final layout rhythm: top-level sections share the same air. The Terminal's
   first section gets only the extra clearance needed by the fixed navigation. */
:root{--section-rhythm:var(--pad-section);--section-heading-gap:var(--s6);--terminal-nav-clearance:9rem}
.section-h{margin-bottom:var(--section-heading-gap)}
.how-section,.preview-section{padding-top:var(--section-rhythm)}
.vault-preview{display:block;min-height:0}
.vault-preview .preview-copy{width:100%;padding:var(--s6)}
.vault-preview>img{display:none}
.terminal-page .room-section{padding-top:var(--terminal-nav-clearance)}
.terminal-page .terminal-divider{display:block;height:var(--s6);min-height:var(--s6);pointer-events:none}
.terminal-page .terminal-tools{padding-top:0}
.terminal-page .log{min-height:340px}
.terminal-page .feedlines{height:292px}
@media(max-width:800px){.terminal-page .room-section{padding-top:7.5rem}.terminal-page .log{min-height:294px}.terminal-page .feedlines{height:246px}}
@media(max-width:470px){.how-section,.preview-section{padding-top:var(--section-rhythm)}.terminal-page .terminal-divider{height:var(--s5);min-height:var(--s5)}.terminal-page .log{min-height:278px}.terminal-page .feedlines{height:230px}}

/* Page foundation. This is the single layout pattern for the landing: every
   section uses one vertical rhythm, while the hero only adds room for the
   fixed navigation. It deliberately replaces the earlier launch overrides. */
:root{
  --page-gutter:clamp(1.25rem,7vw,5.5rem);
  --section-space:clamp(4.5rem,8vw,7rem);
  --hero-clearance:clamp(7.5rem,11vw,9.5rem);
  --content-gap:var(--s6);
}
.section{padding:var(--section-space) var(--page-gutter)}
.section-h{margin-bottom:var(--content-gap)}
.hero{
  min-height:0;
  grid-template-columns:minmax(0,1.1fr) minmax(19rem,.9fr);
  gap:var(--content-gap);
  padding-top:var(--hero-clearance);
  padding-bottom:var(--section-space);
}
.hero-copy{max-width:42rem}
.hero-art{justify-self:end}
.hero-art img{width:min(100%,24rem);max-width:24rem}
.how-section,.preview-section{padding-top:var(--section-space)}
.preview-section{padding-bottom:var(--section-space)}
/* Adjacent sections share one interval: the preceding section owns the space
   below it, so the next one begins with content instead of another empty band. */
.wrap>.section+.section{padding-top:0}
@media(max-width:800px){
  .section{padding:var(--section-space) var(--page-gutter)}
  .hero{grid-template-columns:1fr;padding-top:var(--hero-clearance);gap:var(--s5)}
  .hero-art{justify-self:center;margin:0}
  .hero-art img{width:min(78vw,22rem)}
}
@media(max-width:470px){
  :root{--section-space:var(--s7);--hero-clearance:7rem}
  .hero-art img{width:min(84vw,20rem)}
}

/* ═══════════════════════ the vault / terminal split ═══════════════════════
   Two sibling frames now: the vault panel is the VISUAL — one full-width
   canvas, nothing else — and the terminal window below it is the TECHNICAL
   layer. They were one window, and the cat fought the log for space while the
   readouts captioned pixel art. These rules supersede the stacked overrides
   above; this is the last word on the terminal page's layout. */

/* ---- the readouts: their own panel, above the machine ---- */
.readouts{margin-bottom:var(--s4);overflow:hidden;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.28);font-family:var(--mono)}
.readouts .sub-row{border-bottom:0}

/* ---- the vault, INSIDE the terminal window ---- */
.term .stage-view{position:relative;height:clamp(280px,34vw,440px);
  overflow:hidden;border-bottom:1px solid var(--line);contain:layout paint}
.term .stage-view canvas{display:block;width:100%;height:100%}
.term .stage-view .stage-hud{position:absolute;top:var(--s3);left:var(--s3);
  right:var(--s3);display:flex;justify-content:space-between;gap:var(--s2);
  pointer-events:none;font:700 var(--t-micro) var(--mono);
  letter-spacing:var(--track);text-transform:uppercase}

/* ---- the readout rows ---- */
/* The sub-row sits on the SAME three columns as the highlights above it, so
   each secondary figure lives under its headline neighbour. It was one flex
   line of unspaced spans, all of it pushed into the left corner. */
.sub-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:0;
  white-space:nowrap}
.sub-row .dot{display:none}
.sub-row .seg{display:flex;align-items:baseline;gap:8px;min-width:0;
  overflow:hidden;padding:9px 20px;border-right:1px solid var(--line)}
.sub-row .seg:last-child{border-right:0}
.sub-row .seg i{font-style:normal;color:var(--dimmer);flex:none;
  font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase}
.sub-row .seg b{color:var(--ink);flex:none}
.sub-row .seg em{font-style:normal;color:var(--dim);min-width:0;
  overflow:hidden;text-overflow:ellipsis}

/* ---- the terminal body: log wide, roster beside it ---- */
.console{display:grid;grid-template-columns:minmax(0,1fr) 270px;
  grid-template-rows:280px;min-height:280px}
.console .log{position:static;display:flex;flex-direction:column;min-height:0;
  border-top:0;border-right:1px solid var(--line)}
.console .feedhead{width:auto;min-height:0;height:auto;padding:10px 16px;
  border-right:0;border-bottom:1px solid var(--line);flex-direction:row;
  align-items:center;justify-content:space-between}
.console .feedlines{flex:1;height:auto;min-height:0;justify-content:flex-end;
  padding:10px 16px}
.console .log{position:relative}
.console .feedresume{position:absolute;right:14px;bottom:10px;margin:0}
.terminal-page .log{min-height:0}
.terminal-page .feedlines{height:auto}
/* Full action names in the tag column — SNAPSHOT, COLLECT, PAYOUT — need more
   than the 8ch the old two-word tags were given. */
.fl .tg{width:10ch}
/* The roster scrolls rather than clipping: a header that says "24 OF 1,200"
   over a list showing fourteen would be the panel lying about itself. */
.roster-list{overflow-y:auto;scrollbar-width:thin}
.roster-list .ra{display:flex;justify-content:space-between;gap:8px;flex:none}
.roster-list .ra.me{color:var(--gold)}
.roster-list .ra b{font-weight:700;color:var(--gold);letter-spacing:var(--track);
  text-transform:uppercase;font-size:var(--t-micro)}

/* ---- the coin receipt: a terminal row, not a canvas caption ---- */
.term .strip{position:static;height:auto;display:flex;align-items:center;
  gap:var(--s2);padding:9px 16px;background:var(--panel-in);
  border-top:1px solid var(--line);overflow:hidden;
  font:700 var(--t-micro) var(--mono);letter-spacing:var(--track);
  text-transform:uppercase}
.term .strip-v{letter-spacing:0;text-transform:none;font-weight:400}

/* ---- the tools below: separate panes that stay separate ---- */
/* The slab (`gap:0`, no borders) welded CHECK YOUR PLACE to LAST WALK-AWAY,
   and the collapsible divider let the whole row ride up under the prompt in
   some states. Real margin, real gap, real borders — and every pane reserves
   the height of its TALLEST state, so no terminal state can move them. */
.terminal-page .terminal-divider{display:none}
.terminal-tools{margin-top:var(--s5)}
.cols{gap:var(--s3);align-items:stretch;overflow:visible;border:0;
  border-radius:0;background:none}
.cols .pane{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);box-shadow:0 1.5rem 3rem rgba(0,0,0,.28)}
.entry .rule{min-height:45px}
.result{min-height:124px}
.w-addr{min-height:37px}

/* ---- narrow ---- */
@media(max-width:800px){
  .term .stage-view{height:clamp(240px,48vw,320px)}
  .console{grid-template-columns:1fr;grid-template-rows:250px auto;min-height:0}
  .console .log{border-right:0}
  .roster{border-top:1px solid var(--line)}
  .roster-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:126px;overflow:hidden}
  .sub-row{grid-template-columns:1fr;white-space:nowrap}
  .sub-row .seg{border-right:0;border-bottom:1px solid var(--line)}
  .sub-row .seg:last-child{border-bottom:0}
}
@media(max-width:470px){
  .term .stage-view{height:230px}
  .console{grid-template-rows:220px auto}
}

/* ═════════════════════ premium-minimal landing ═══════════════════════════
   The landing sells one idea, then proves it. These final rules deliberately
   keep the terminal's dense information design untouched. */
body:not(.terminal-page) .hero{min-height:clamp(35rem,78vh,44rem);align-content:center}
body:not(.terminal-page) .hero-copy{max-width:39rem}
body:not(.terminal-page) .hero h1{max-width:10ch;letter-spacing:-.035em}
body:not(.terminal-page) .hero .lede{max-width:37ch;font-size:clamp(1.05rem,1.55vw,1.22rem);line-height:1.55}
/* Editorial labels give the short explanatory lines a clear role instead of
   letting them read like unstructured body copy. */
.hero-dek,.terminal-dek{display:grid;gap:.65rem}
.dek-label{display:block;color:var(--gold);font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
body:not(.terminal-page) .hero .hero-dek{margin-top:var(--s5);padding-left:var(--s4);border-left:2px solid var(--gold);max-width:39ch}
body:not(.terminal-page) .hero-art::before{width:86%;background:radial-gradient(circle,rgba(255,181,36,.19),rgba(255,181,36,0) 68%)}
body:not(.terminal-page) .hero-art img{width:min(100%,25.5rem);filter:drop-shadow(0 1.8rem 2.8rem rgba(0,0,0,.38))}
body:not(.terminal-page) .actions{margin-top:var(--s5)}
body:not(.terminal-page) .btn{box-shadow:0 .8rem 1.75rem rgba(255,181,36,.18)}
body:not(.terminal-page) .herorisk{margin-top:var(--s3);font-size:11px;letter-spacing:.025em}
body:not(.terminal-page) .terminal-link{margin-top:var(--s4);color:var(--gold-hi)}

/* The terminal header has two jobs: identity on the left, explanation on the
   opposite edge. Keeping them as peers makes the short copy feel deliberate
   and preserves the vault's wide, editorial opening. */
.terminal-page .terminal-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(17rem,.75fr);gap:clamp(2rem,6vw,7rem);align-items:end;max-width:none;padding-bottom:clamp(1.25rem,2.5vw,2rem);border-bottom:1px solid var(--line)}
.terminal-page .terminal-title .eyebrow{margin-bottom:var(--s3)}
.terminal-page .terminal-title h1{max-width:9ch}
.terminal-page .terminal-title h1 span{color:var(--gold)}
.terminal-page .terminal-dek{margin:0 0 .15rem;padding-left:var(--s4);border-left:1px solid var(--gold);max-width:31ch;color:var(--dim);font-size:clamp(.93rem,1.3vw,1.08rem);line-height:1.55}
.terminal-page .terminal-dek .dek-label{font-size:9px}

body:not(.terminal-page) .section-h{max-width:34rem}
body:not(.terminal-page) .section-h h2{max-width:12ch;font-size:clamp(2.4rem,5vw,4.5rem);letter-spacing:-.035em}
body:not(.terminal-page) .section-h p:not(.eyebrow){max-width:34ch;line-height:1.55}
body:not(.terminal-page) .preview-section{padding-bottom:var(--section-space)}
body:not(.terminal-page) .vault-preview{border-color:color-mix(in srgb,var(--gold) 20%,var(--line));background:linear-gradient(110deg,rgba(255,181,36,.12),rgba(255,181,36,.025) 58%,transparent),var(--panel);box-shadow:none}
body:not(.terminal-page) .vault-preview .preview-copy{padding:clamp(1.5rem,4vw,3rem)}
body:not(.terminal-page) .preview-stats{margin:clamp(1.5rem,3.4vw,2.6rem) 0;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body:not(.terminal-page) .preview-stats div{padding:1rem clamp(.75rem,2vw,1.6rem);border-right:1px solid var(--line)}
body:not(.terminal-page) .preview-stats div:first-child{padding-left:0}
body:not(.terminal-page) .preview-stats div:last-child{border-right:0}
body:not(.terminal-page) .preview-stats b{font-size:clamp(1.45rem,3.2vw,2.25rem)}
body:not(.terminal-page) .preview-status{font-size:10px}

body:not(.terminal-page) .how-section{padding-top:0}
body:not(.terminal-page) .beats{border:0;border-radius:0;background:none;gap:clamp(.75rem,2vw,1.4rem)}
body:not(.terminal-page) .beats li{min-height:0;padding:0;background:none}
body:not(.terminal-page) .beats li+li{border-left:1px solid var(--line);padding-left:clamp(.75rem,2vw,1.4rem)}
body:not(.terminal-page) .beats h3{font-size:clamp(1.05rem,1.6vw,1.25rem)}
body:not(.terminal-page) .beats p{font-size:.91rem;line-height:1.5}
body:not(.terminal-page) .beats-fine{font-size:11px}
body:not(.terminal-page) .proof-card{padding:clamp(1.25rem,3vw,2rem);background:linear-gradient(100deg,rgba(255,181,36,.09),transparent 58%),var(--panel);box-shadow:none}
body:not(.terminal-page) .proof-line{display:grid;grid-template-columns:minmax(11rem,.8fr) minmax(0,1.55fr) auto;gap:var(--s4);align-items:center}
body:not(.terminal-page) .proof-card h3{margin:0;font-size:clamp(1.3rem,2vw,1.7rem)}
body:not(.terminal-page) .proof-points{display:flex;flex-wrap:wrap;gap:.5rem}
body:not(.terminal-page) .proof-points span{padding:.38rem .55rem;border:1px solid var(--line);border-radius:999px;color:var(--dim);font:700 10px var(--mono);letter-spacing:.055em;text-transform:uppercase}
body:not(.terminal-page) .proof-card a{justify-self:end;white-space:nowrap;font:700 11px var(--mono);letter-spacing:.055em;text-transform:uppercase;color:var(--gold-hi)}
body:not(.terminal-page) .foot{padding-top:0}

@media(max-width:800px){
  body:not(.terminal-page) .hero{min-height:0;text-align:center}
  body:not(.terminal-page) .hero h1{margin-inline:auto}
  body:not(.terminal-page) .hero .lede{margin-inline:auto}
  body:not(.terminal-page) .hero .hero-dek{text-align:left}
  .terminal-page .terminal-intro{grid-template-columns:1fr;gap:var(--s4);align-items:start}
  .terminal-page .terminal-dek{margin-bottom:0;max-width:38ch}
  body:not(.terminal-page) .preview-stats div:first-child{padding-left:.75rem}
  body:not(.terminal-page) .proof-line{grid-template-columns:1fr;gap:var(--s3)}
  body:not(.terminal-page) .proof-card a{justify-self:start}
}
@media (min-width:471px) and (max-width:800px){
  /* In the two-column layout, only the right-hand cells get the vertical
     divider. Without this reset, item 03 inherited item 02's left padding and
     its number no longer aligned with 01. */
  body:not(.terminal-page) .beats li:nth-child(odd){border-left:0;padding-left:0}
  body:not(.terminal-page) .beats li:nth-child(even){border-left:1px solid var(--line);padding-left:clamp(.75rem,2vw,1.4rem)}
}
@media(max-width:470px){
  body:not(.terminal-page) .preview-stats{grid-template-columns:1fr;margin:var(--s4) 0}
  body:not(.terminal-page) .preview-stats div{padding:.8rem 0;border-right:0;border-bottom:1px solid var(--line)}
  body:not(.terminal-page) .preview-stats div:first-child{padding-left:0}
  body:not(.terminal-page) .preview-stats div:last-child{border-bottom:0}
  body:not(.terminal-page) .beats{grid-template-columns:1fr;gap:0}
  body:not(.terminal-page) .beats li{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
  body:not(.terminal-page) .beats li+li{padding-left:0;border-left:0}
  body:not(.terminal-page) .beats li:last-child{border-bottom:0}
}