@font-face { font-family: "Anton"; src: url("/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root {
  --g: #22E07A; --b: #8A5A2B; --r: #E5322D; --mut: #a3a3a3; --dim: #6f6f6f; --rule: #2a2a2a; --line: 3px solid #fff;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --disp: "Anton", Impact, "Arial Narrow", sans-serif;
  /* one spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --gut: 16px; --sec: var(--s6); --radius: 14px;
}
@media (min-width: 600px) { :root { --gut: 24px; --sec: var(--s7); } }
@media (min-width: 1200px) { :root { --gut: 32px; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: #000; }
body { margin: 0; background: #000; color: #fff; font: 500 15px/1.5 var(--mono); overflow-x: clip; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--g); outline-offset: 2px; }

/* header */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--gut); background: #000; border-bottom: var(--line); }
.wm { display: inline-flex; align-items: center; gap: var(--s3); font: 400 28px/1 var(--disp); letter-spacing: .01em; text-decoration: none; }
.wm img { display: block; border-radius: 10px; }
.toplinks { display: flex; gap: var(--s2); }
.pill { display: inline-flex; align-items: center; gap: var(--s2); min-height: 34px; padding: 0 var(--s3); border: 2px solid #fff; border-radius: 999px; font: 700 13px/1 var(--mono); text-decoration: none; }
.pill:hover:not([aria-disabled="true"]) { background: #fff; color: #000; }
/* pre-launch links: an intentional "soon" state, not a broken one */
[data-link][aria-disabled="true"] { border-color: #3d3d3d; color: #d6d6d6; cursor: default; }
[data-link][aria-disabled="true"]::after { content: "soon"; padding: 3px 6px; border-radius: 999px; background: #1d1d1d; color: var(--mut); font: 700 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* hero */
.hero { display: grid; }
.show { border-bottom: var(--line); }
.stagewrap { position: relative; container-type: inline-size; overflow: hidden; }
#stage { display: block; width: 100%; height: auto; }
.status { position: absolute; top: 5%; left: 55%; right: 6%; pointer-events: none; }
.s1 { font: 400 7.2cqw/.92 var(--disp); text-transform: uppercase; letter-spacing: .005em; }
.s1.is-g { color: var(--g); }
.s2 { margin-top: 2cqw; max-width: 34ch; font: 700 clamp(12px, 2.6cqw, 17px)/1.35 var(--mono); overflow-wrap: anywhere; text-wrap: balance; }
.s2 b { color: var(--g); font-weight: 800; }
.s2 a { color: #fff; }
.s2 .ex { color: var(--mut); font-weight: 500; }
.ctrl { position: absolute; left: var(--gut); bottom: var(--s4); display: flex; gap: var(--s2); align-items: center; font: 700 11px/1 var(--mono); }
.tag { padding: 6px 9px; border: 2px solid #fff; border-radius: 999px; background: #000; }
.tag.is-live { border-color: var(--g); color: var(--g); }
.pause { padding: 6px 10px; border: 2px solid #fff; border-radius: 999px; background: #000; color: #fff; font: inherit; cursor: pointer; }
.pause:hover { background: #fff; color: #000; }
.readout { padding: var(--s3) var(--gut); border-top: var(--line); font: 700 14px/1.4 var(--mono); }
.readout b { color: var(--g); }
.readout .red { color: var(--r); }
.mut { color: var(--mut); font-weight: 500; }
/* phones: the status gets its own row under the scene (never on the ape's head); fixed height = no layout jump */
@media (max-width: 599px) {
  .status { position: static; display: flex; flex-direction: column; justify-content: center; min-height: 104px; padding: var(--s3) var(--gut); border-top: var(--line); }
  .s1 { font-size: 30px; }
  .s1 br { display: none; }
  .s2 { margin-top: var(--s2); font-size: 13px; max-width: none; }
  .ctrl { bottom: auto; top: calc(100cqw - var(--s4)); transform: translateY(-100%); } /* stays on the art, not on the status row */
}

.copy { container-type: inline-size; display: grid; align-content: center; gap: var(--s5); padding: var(--sec) var(--gut); border-bottom: var(--line); }
h1 { margin: 0; font: 400 clamp(40px, 11.5cqw, 104px)/.9 var(--disp); text-transform: uppercase; letter-spacing: .005em; }
h1 span { display: block; color: var(--g); }
.lines { margin: 0; padding: 0; list-style: none; counter-reset: l; display: grid; gap: var(--s3); max-width: 62ch; }
.lines li { counter-increment: l; display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); align-items: baseline; }
.lines li::before { content: counter(l); font: 400 28px/1 var(--disp); color: var(--b); }
.lines b { color: var(--g); }
.ca { display: flex; align-items: stretch; max-width: 640px; border: var(--line); border-radius: var(--radius); overflow: hidden; }
.ca__k { display: grid; place-items: center; padding: 0 var(--s3); border-right: var(--line); font: 400 20px/1 var(--disp); }
.ca code { flex: 1; min-width: 0; padding: var(--s3); font: 700 13px/1.35 var(--mono); overflow-wrap: anywhere; color: var(--mut); }
.ca.is-set code { color: #fff; }
.ca button { padding: 0 var(--s4); border: 0; border-left: var(--line); background: var(--g); color: #000; font: 800 14px/1 var(--mono); cursor: pointer; }
.ca button:disabled { background: #1d1d1d; color: var(--dim); cursor: default; }
.links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 46px; padding: 0 var(--s4); border: var(--line); border-radius: 12px; background: #fff; color: #000; font: 800 15px/1 var(--mono); text-decoration: none; cursor: pointer; }
.btn:hover:not([aria-disabled="true"]) { background: var(--g); }
.btn--ghost { background: #000; color: #fff; }
.btn--ghost:hover { background: #fff !important; color: #000; }
a.btn[aria-disabled="true"] { background: #000; }

/* stats row */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: var(--line); }
.stat { display: grid; gap: var(--s2); align-content: start; padding: var(--s5) var(--gut); min-width: 0; }
.stat:nth-child(odd) { border-right: var(--line); }
.stat:nth-child(-n+2) { border-bottom: var(--line); }
.stat__k { font: 700 11px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
.stat__v { font: 400 clamp(34px, 8vw, 60px)/1 var(--disp); letter-spacing: .005em; white-space: nowrap; }
.stat__v .u { color: var(--mut); } /* the unit: same font + size as the number, so the baselines match */
.stat:first-child .stat__v { color: var(--g); }
.stat__s { font-size: 12px; color: #cfcfcf; }
.stats__note { padding: var(--s3) var(--gut); font-size: 11px; color: var(--mut); border-bottom: var(--line); }

/* sections */
.ladder, .log { padding: var(--sec) var(--gut); border-bottom: var(--line); }
.sech { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.ladder h2, .log h2 { margin: 0; font: 400 clamp(30px, 7vw, 52px)/1 var(--disp); text-transform: uppercase; }
.tag--draft { font: 700 11px/1 var(--mono); border-color: var(--b); color: #d7a26b; }
.lede { max-width: 62ch; color: #cfcfcf; font-size: 14px; margin-bottom: var(--s5); }
.lede b { color: var(--g); }

/* blast ladder */
.rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.rung { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: var(--line); border-radius: var(--radius); }
.rung__n { font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
.rung__goal { font: 400 24px/1 var(--disp); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rung__st { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: 13px; min-width: 0; }
.rung__st svg { width: 15px; height: 15px; }
.rung.is-done { border-color: var(--g); }
.rung.is-done .rung__goal, .ok { color: var(--g); }
.rung.is-cur { background: #0d0d0d; box-shadow: 4px 4px 0 var(--b); }
.rung.is-cur .rung__n { color: #fff; }
.rung.is-locked { border-color: #333; color: var(--dim); }
.rung.is-locked .rung__goal { color: #8a8a8a; }
.bar { position: relative; flex: 1 1 140px; height: 14px; border: 2px solid #fff; border-radius: 999px; overflow: hidden; background: #000; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--b); }
.rung__p { font-weight: 800; white-space: nowrap; }

/* flush log + watch a flush */
.log { display: grid; gap: var(--s6); }
.log__main { min-width: 0; }
.log__head h2 { margin-bottom: var(--s3); }
.log__head .lede { margin-bottom: 0; }
.tblwrap { overflow-x: auto; border: var(--line); border-radius: var(--radius); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 2px solid var(--rule); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { font: 400 15px/1 var(--disp); letter-spacing: .03em; text-transform: uppercase; color: var(--mut); }
.tbl td.sol { color: var(--g); font-weight: 800; }
.tbl tr.is-wait td { color: var(--dim); }
.empty { color: var(--mut); }
.watch { margin: 0; display: grid; gap: var(--s3); align-content: start; max-width: 480px; }
.watch figcaption { font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--mut); }
.watch video { display: block; width: 100%; height: auto; aspect-ratio: 1; border: var(--line); border-radius: var(--radius); background: #000; }

.foot { display: grid; gap: var(--s1); padding: var(--s5) var(--gut) var(--s6); color: var(--mut); font-size: 12px; }
.foot__s { color: var(--dim); }

/* the shake */
.page.is-shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%,90% { transform: translate(-2px,1px); } 20%,80% { transform: translate(5px,-3px); } 30%,50%,70% { transform: translate(-9px,4px); } 40%,60% { transform: translate(9px,-4px); } }
@media (prefers-reduced-motion: reduce) { .page.is-shake { animation: none; } .pause { display: none; } }

/* desktop: one shared column system — the stats dividers sit on the hero's split line */
@media (min-width: 900px) {
  :root { --stageW: min(54vw, calc(100svh - 120px)); }
  .hero { grid-template-columns: minmax(0, 1fr) var(--stageW); }
  .copy { order: -1; border-bottom: 0; border-right: var(--line); }
  .show { border-bottom: 0; }
  .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) calc(var(--stageW) / 2) calc(var(--stageW) / 2); border-top: var(--line); }
  .stat:nth-child(odd) { border-right: 0; }
  .stat:not(:last-child) { border-right: var(--line); }
  .stat:nth-child(-n+2) { border-bottom: 0; }
  .rung { grid-template-columns: 110px 120px minmax(0, 1fr); padding: var(--s4) var(--s5); }
  .rung__goal { font-size: 30px; }
  .log { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); align-items: start; column-gap: var(--s6); row-gap: var(--s5); }
  .log__head { grid-column: 1 / -1; }
  .show { display: flex; flex-direction: column; }
  .readout { flex: 1; }
}

/* very narrow phones: keep the header on one line */
@media (max-width: 419px) {
  .wm { font-size: 24px; gap: var(--s2); }
  .wm img { width: 36px; height: 36px; }
  .toplinks .pill[aria-disabled="true"]::after { content: none; }
  .pill { padding: 0 10px; }
}

.ladder__more { margin-top: var(--s4); font-size: 13px; color: var(--mut); }
.stats__note .red { color: var(--r); }