/* =============================================================
   Limbo — landing surface. World: THE TRANSIT.

   A lab instrument bench under a low lamp. Graphite and slate, bone
   legend, steel for quiet type. Two signals, each with one job:

     --live    cool blue: qubit activity, gates executing, packets
               moving. The machine working.
     --signal  amber: cross-chip operations and the figures that
               count them. The cost. Nothing else is amber.

   The page's spine is four canvas scenes scrubbed by scroll. Each
   viewport clips its own drawing, so no scene can spill over the
   text beside it. Captions and read-outs are real HTML and complete
   without JavaScript.
   ============================================================= */

:root {
    --ground:     #16181c;
    --raised:     #22252b;
    --sunk:       #0f1114;
    --ink:        #e8e6e2;
    --ink-quiet:  #8d9199;
    --line:       #343841;
    --line-soft:  #24272d;

    --live:       #7cc4ff;   /* qubit activity */
    --live-ink:   var(--live);   /* accent used as text */

    /* One identity colour per chip, used wherever a chip appears. */
    --chip-0:     #4fd1a5;
    --chip-1:     #ff7a8a;
    --chip-2:     #5ad1f0;
    --chip-3:     #c3e66b;
    --signal:     #f0a92e;   /* cross-chip only */
    --signal-ink: var(--signal);
    --mark-signal: transparent;  /* highlight band behind accent text */
    --mark-live:   transparent;
    --focus:      #6fd0aa;
    --alert:      #ff7070;

    /* Soft sans for all type and figures; monospace only for code. */
    --font-legend: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-data:   "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-code:   "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --keyline: 2px;
    --rule: 1px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --nav-h: 58px;
}

[data-theme="light"] {
    /* Cool neutral lab-white, not ivory. Crisp blue and a true orange. */
    --ground:     #f6f7f9;
    --raised:     #eceef2;
    --sunk:       #ffffff;
    --ink:        #0e1116;
    --ink-quiet:  #525a66;
    --line:       #9aa1ab;
    --line-soft:  #d5d9df;

    /* Light mode keeps dark mode's luminous hues for fills, bars and
       glows. They can't carry text at 4.5:1 on near-white, so accented
       text is set in ink over a highlight band of the same hue. */
    --live:        #38bdf8;
    --signal:      #f0a92e;   /* same amber as dark mode */
    --live-ink:    #0e1116;
    --signal-ink:  #0e1116;
    --mark-signal: rgb(240 169 46 / 0.5);
    --mark-live:   rgb(56 189 248 / 0.38);
    --focus:      #0e7a55;
    --alert:      #c62828;

    --chip-0:     #0e9f76;
    --chip-1:     #d93c56;
    --chip-2:     #0a8fbf;
    --chip-3:     #5f8f0f;
}

.board-page *,
.board-page *::before,
.board-page *::after { box-sizing: border-box; }

.board-page {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-legend);
    font-variation-settings: "wght" 400, "wdth" 100;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---- Browser surfaces ---- */
.board-page ::selection { background: var(--signal); color: #14100a; }
.board-page { caret-color: var(--signal); accent-color: var(--live); }
.board-page { scrollbar-color: var(--line) var(--sunk); scrollbar-width: thin; }
.board-page ::-webkit-scrollbar { width: 12px; height: 12px; }
.board-page ::-webkit-scrollbar-track { background: var(--sunk); }
.board-page ::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--sunk); }
.board-page ::-webkit-scrollbar-thumb:hover { background: var(--ink-quiet); }
.board-page :focus-visible { outline: var(--keyline) solid var(--focus); outline-offset: 3px; }
.board-page a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

.fig { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.wrap { width: min(1320px, 100% - 48px); margin-inline: auto; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =============================================================
   Edge / nav
   ============================================================= */

.edge {
    position: sticky; top: 0; z-index: 80;
    background: color-mix(in srgb, var(--ground) 86%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: var(--rule) solid var(--line-soft);
}
.edge__inner { display: flex; align-items: center; gap: 32px; height: var(--nav-h); }
.edge__mark { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.edge__mark svg { width: 22px; height: 22px; display: block; }
.edge__name {
    font-variation-settings: "wght" 700, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8125rem;
}
.edge__links { display: flex; gap: 26px; }
.edge__links a { text-decoration: none; color: var(--ink-quiet); transition: color 180ms var(--ease); }
.edge__links a:hover, .edge__links a[aria-current="page"] { color: var(--ink); }
.edge__actions { display: flex; align-items: center; gap: 14px; }

.pad-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; min-height: 44px;
    border: var(--keyline) solid var(--line);
    background: transparent; color: var(--ink);
    font-family: var(--font-legend);
    font-variation-settings: "wght" 600, "wdth" 92;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem;
    text-decoration: none; cursor: pointer;
    transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.pad-btn:hover { border-color: var(--ink); }
.pad-btn--quiet { color: var(--ink-quiet); }
.pad-btn--quiet:hover { color: var(--ink); }

.lamp {
    width: 44px; height: 44px; display: grid; place-items: center;
    border: var(--rule) solid var(--line); background: transparent;
    color: var(--ink-quiet); cursor: pointer;
    transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.lamp:hover { color: var(--ink); border-color: var(--ink-quiet); }
.lamp svg { width: 17px; height: 17px; }
.lamp__moon { display: none; }
[data-theme="light"] .lamp__sun { display: none; }
[data-theme="light"] .lamp__moon { display: block; }

/* =============================================================
   The journey — four pinned, scrubbed canvas scenes
   ============================================================= */

.scene { position: relative; }
.scene--long { height: 360vh; }

.scene__stage {
    position: sticky; top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    min-height: 600px;
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    /* More air under the nav than above the fold line. */
    padding-block: clamp(32px, 6vh, 64px) clamp(16px, 3vh, 36px);
}

/* The viewport: a lit instrument window. overflow: hidden is the rule
   that keeps every drawing inside its own frame. */
.scene__art {
    position: relative;
    margin: 0;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    border: var(--rule) solid var(--line-soft);
    background:
        radial-gradient(ellipse 70% 60% at 50% 52%,
            color-mix(in srgb, var(--live) 7%, var(--sunk)) 0%,
            var(--sunk) 72%);
}
.scene__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__mark {
    position: absolute; top: 14px; left: 16px; z-index: 2;
    font-family: var(--font-data);
    font-size: 0.75rem; color: var(--ink-quiet); letter-spacing: 0.08em;
}
.scene__fallback {
    position: absolute; inset: auto 16px 16px 16px;
    font-size: 0.875rem; color: var(--ink-quiet); max-width: 60ch;
}
.js .scene__fallback { display: none; }

.scene__panel { min-width: 0; align-self: center; }
.scene__title {
    margin: 0 0 18px;
    font-variation-settings: "wght" 700, "wdth" 87;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
    line-height: 1.02; letter-spacing: -0.02em;
    max-width: 16ch; text-wrap: balance;
}
.scene--hero .scene__title { font-size: clamp(2.2rem, 3.9vw, 3.7rem); line-height: 0.96; letter-spacing: -0.028em; }
.scene__title em { font-style: normal; color: var(--signal-ink); }

/* Captions advance with the scene. Without JS they read as a list. */
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.beat { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-quiet); max-width: 44ch; }
.beat strong { color: var(--ink); font-variation-settings: "wght" 600; }
.js .beats { gap: 0; }
.js .beat {
    grid-area: 1 / 1;
    opacity: 0; transform: translateY(10px);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
    pointer-events: none;
}
.js .beat.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* Instrument read-out: live figures from the scene. */
.hud {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 26px 0 0; border-top: var(--keyline) solid var(--line);
}
.hud > div { padding: 12px 12px 12px 0; border-bottom: var(--rule) solid var(--line-soft); }
.hud dt {
    font-variation-settings: "wght" 600, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem;
    color: var(--ink-quiet);
}
.hud dd {
    margin: 4px 0 0;
    font-family: var(--font-data); font-variant-numeric: tabular-nums;
    font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.1; font-weight: 500;
}
.hud dd.is-signal { color: var(--signal-ink); }

.quicklinks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; font-size: 0.875rem; }
.quicklinks a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); }
.quicklinks a:hover { text-decoration-color: var(--signal); }

.counter { margin-bottom: 18px; }
.counter__value {
    font-family: var(--font-data); font-variant-numeric: tabular-nums;
    font-size: clamp(3rem, 6vw, 5rem); line-height: 0.9;
    font-weight: 500; color: var(--signal-ink); letter-spacing: -0.035em;
}
.counter__unit { margin: 10px 0 0; font-size: 0.875rem; color: var(--ink-quiet); max-width: 40ch; line-height: 1.5; }
.counter__unit strong { color: var(--ink); font-variation-settings: "wght" 600; }
.counter__cell { display: block; margin-top: 6px; font-family: var(--font-data); font-size: 0.75rem; color: var(--ink-quiet); }

/* =============================================================
   Interleaved content bands
   ============================================================= */

.band { padding: clamp(72px, 10vw, 136px) 0; border-top: var(--rule) solid var(--line-soft); }
.band--sunk { background: var(--sunk); }
.band h2 {
    margin: 0 0 22px;
    font-variation-settings: "wght" 700, "wdth" 87;
    text-transform: uppercase;
    font-size: clamp(2rem, 4.4vw, 3.6rem);
    line-height: 0.98; letter-spacing: -0.02em;
    max-width: 18ch; text-wrap: balance;
}
.band p { max-width: 66ch; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-quiet); }
.band p strong { color: var(--ink); font-variation-settings: "wght" 600; }

/* The asymmetry, drawn to scale. */
.scale { margin-top: 48px; display: grid; gap: 18px; }
.scale__row {
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 5.5rem;
    align-items: center; gap: 20px;
}
.scale__label {
    font-variation-settings: "wght" 600, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem;
}
.scale__bar { height: 26px; background: var(--raised); border: var(--rule) solid var(--line-soft); }
.scale__fill { display: block; height: 100%; background: var(--live); }
.scale__row--cross .scale__fill { background: var(--signal); }
.scale__val {
    font-family: var(--font-data); font-variant-numeric: tabular-nums;
    font-size: 1.75rem; font-weight: 500; text-align: right;
}
.scale__row--cross .scale__val { color: var(--signal-ink); }
.scale__note { margin: 4px 0 0; font-size: 0.875rem; }

.cost { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        margin-top: 56px; border-top: var(--keyline) solid var(--line); }
.cost__item { padding: 26px 24px 26px 0; border-bottom: var(--rule) solid var(--line-soft); }
.cost__value {
    font-family: var(--font-data); font-variant-numeric: tabular-nums;
    font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; font-weight: 500; letter-spacing: -0.03em;
}
.cost__value--cross { color: var(--signal-ink); }
.cost__label { margin-top: 12px; color: var(--ink-quiet); font-size: 0.9375rem; max-width: 30ch; line-height: 1.45; }

.limit { margin-top: 48px; padding: 24px 0 0; border-top: var(--keyline) solid var(--signal); }
.limit p { margin: 0; max-width: 76ch; color: var(--ink); font-size: 0.9375rem; }

/* ---- The matrix ---- */

.matrix-scroll { overflow-x: auto; margin-top: 44px; }
.matrix-scroll:focus-visible { outline: var(--keyline) solid var(--focus); outline-offset: 4px; }
.matrix { border-collapse: collapse; width: 100%; }
.matrix caption {
    caption-side: bottom; text-align: left; padding-top: 18px;
    color: var(--ink-quiet); font-size: 0.8125rem; max-width: 76ch; line-height: 1.5;
}
.matrix th {
    text-align: left; padding: 12px 14px 12px 0;
    border-bottom: var(--keyline) solid var(--line);
    font-variation-settings: "wght" 600, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem;
    color: var(--ink-quiet); white-space: nowrap;
}
.matrix td { padding: 10px 14px 10px 0; border-bottom: var(--rule) solid var(--line-soft); font-size: 0.875rem; }
.matrix tbody tr:hover { background: var(--raised); }
.matrix .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.matrix .cut-limbo { color: var(--signal-ink); font-variation-settings: "wght" 600; }
.matrix__topo { display: none; color: var(--ink-quiet); font-size: 0.75rem; }

/* Track = TKET's count, fill = Limbo's, on the same circuit. */
.redbar { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.redbar__track { flex: 1; height: 12px; background: var(--raised); border: var(--rule) solid var(--line); }
.redbar__fill { height: 100%; background: var(--signal); display: block; }
.redbar__pct { font-family: var(--font-data); font-size: 0.8125rem; min-width: 5ch; text-align: right; }

/* ---- Evidence rail + listing ---- */

.rail { border-top: var(--keyline) solid var(--line); margin-top: 32px; }
.rail__row {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center; gap: 18px; padding: 16px 0;
    border-bottom: var(--rule) solid var(--line-soft);
    text-decoration: none; color: var(--ink);
}
.rail__row > * { transition: transform 260ms var(--ease); }
.rail__row:hover > :not(.rail__take) { transform: translateX(8px); }
.rail__hole {
    width: 22px; height: 22px; border: var(--keyline) solid var(--signal);
    border-radius: 50%; display: grid; place-items: center;
}
.rail__hole::after {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--ground); transition: background 260ms var(--ease);
}
.rail__row:hover .rail__hole::after { background: var(--signal); }
.rail__name {
    display: block;
    font-variation-settings: "wght" 600, "wdth" 92;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem;
}
.rail__note { display: block; color: var(--ink-quiet); font-size: 0.875rem; margin-top: 3px; }
.rail__take {
    font-variation-settings: "wght" 600, "wdth" 92;
    text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 0.75rem; color: var(--signal-ink); white-space: nowrap;
}

.listing {
    margin-top: 40px; background: var(--sunk); color: var(--ink);
    border: var(--keyline) solid var(--line); padding: 24px 26px; overflow-x: auto;
}
.listing pre { margin: 0; font-family: var(--font-code); font-size: 0.875rem; line-height: 1.7; tab-size: 4; }
.listing .c { color: var(--ink-quiet); }
.listing .k { color: var(--live-ink); }
.listing__note { margin-top: 14px; font-size: 0.875rem; color: var(--ink-quiet); }

/* ---- Footer ---- */

.foot { background: var(--sunk); color: var(--ink-quiet); padding: 56px 0 40px; border-top: var(--rule) solid var(--line-soft); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 36px; }
.foot h3 {
    margin: 0 0 14px;
    font-variation-settings: "wght" 600, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6875rem; color: var(--ink-quiet);
}
.foot a { display: block; margin-bottom: 9px; text-decoration: none; color: var(--ink-quiet); }
.foot a:hover { color: var(--ink); }
.foot__base {
    margin-top: 46px; padding-top: 20px; border-top: var(--rule) solid var(--line-soft);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8125rem;
}

/* =============================================================
   Responsive
   ============================================================= */

@media (max-width: 1000px) {
    .scene__stage {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 46vh) auto;
        align-content: start; gap: 18px;
    }
    .scene__art { height: 100%; }
    .beat { max-width: none; font-size: 1rem; }
    .hud { margin-top: 16px; }
    .hud > div { padding-block: 8px; }
    .scene--hero .scene__title { font-size: clamp(1.8rem, 6vw, 2.6rem); }
    .scene__title { margin-bottom: 12px; }
    .counter__value { font-size: clamp(2.4rem, 10vw, 3.4rem); }
    .quicklinks { display: none; }
}

@media (max-width: 860px) {
    .wrap { width: min(1320px, 100% - 32px); }
    .edge__links { display: none; }
    .edge__inner { gap: 14px; }
    .rail__row { grid-template-columns: 24px minmax(0, 1fr); }
    .rail__take { grid-column: 2; }
    .scale__row { grid-template-columns: 1fr auto; gap: 8px 14px; }
    .scale__label { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .matrix__topo { display: block; }
    .matrix .col-topo { display: none; }
    .matrix th, .matrix td { padding-right: 8px; font-size: 0.8125rem; }
    .matrix th { font-size: 0.6875rem; letter-spacing: 0.05em; }
    .redbar { min-width: 96px; gap: 6px; }
    .redbar__pct { font-size: 0.75rem; }
    .scene__stage { grid-template-rows: minmax(0, 40vh) auto; }
}

@media (max-width: 560px) {
    .edge__actions .pad-btn--quiet { display: none; }
    .cost__item { padding-right: 0; }
}

/* =============================================================
   Reduced motion — scenes unpin and draw their finished frame;
   every caption shows at once.
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    .scene--long { height: auto; }
    .scene__stage { position: static; height: auto; min-height: 0; padding: 48px 0; }
    .scene__art { height: 56vh; min-height: 320px; }
    .js .beats { gap: 12px; }
    .js .beat { grid-area: auto; opacity: 1; transform: none; transition: none; }
    .rail__row > *, .pad-btn, .edge__links a { transition: none !important; }
    .rail__row:hover > :not(.rail__take) { transform: none; }
}

/* ---- Under construction ---- */

.build__list { list-style: none; margin: 40px 0 0; padding: 0; border-top: var(--keyline) solid var(--line); }
.build__row {
    display: grid; grid-template-columns: 11rem minmax(0, 16rem) minmax(0, 1fr);
    gap: 8px 28px; align-items: baseline;
    padding: 20px 0; border-bottom: var(--rule) solid var(--line-soft);
}
.build__status {
    justify-self: start;
    padding: 4px 10px; border: var(--rule) solid var(--live); color: var(--live-ink);
    font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.04em; white-space: nowrap;
}
.build__item {
    font-variation-settings: "wght" 600, "wdth" 92;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem;
}
.build__note { color: var(--ink-quiet); font-size: 0.9375rem; line-height: 1.5; max-width: 60ch; }
.band p.build__contact { margin-top: 32px; font-size: 0.9375rem; }
.build__contact a { color: var(--ink); }

@media (max-width: 860px) {
    .build__row { grid-template-columns: 1fr; }
}

/* =============================================================
   Benchmarks page — the same bench, laid out for reading data.
   Amber = cross-chip cut counts. Blue = fidelity and wins that
   mean quality. Tables are drill tables; bars are paired.
   ============================================================= */

.bhead { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); }
.bhead__title {
    margin: 0 0 22px;
    font-variation-settings: "wght" 700, "wdth" 87;
    text-transform: uppercase;
    font-size: clamp(2.6rem, 6.4vw, 5.2rem);
    line-height: 0.94; letter-spacing: -0.03em;
}
.bhead__title em { font-style: normal; color: var(--signal-ink); }
.bhead__lede { max-width: 64ch; font-size: 1.125rem; line-height: 1.6; color: var(--ink-quiet); margin: 0; }
.bhead__lede strong { color: var(--ink); font-variation-settings: "wght" 600; }

.bsum {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 40px 0 0; border-top: var(--keyline) solid var(--line);
}
.bsum > div { padding: 18px 20px 18px 0; border-bottom: var(--rule) solid var(--line-soft); }
.bsum dt {
    font-variation-settings: "wght" 600, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; color: var(--ink-quiet);
}
.bsum dd {
    margin: 8px 0 0;
    font-family: var(--font-data); font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; font-weight: 500; letter-spacing: -0.03em;
}
.bsum--small { margin-top: 20px; }
.bsum--small dd { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.is-signal { color: var(--signal-ink) !important; }
.is-live { color: var(--live-ink) !important; }
.muted { color: var(--ink-quiet); }

.paper {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
    margin-top: 44px; padding: 26px 28px;
    background: var(--raised); border-top: var(--keyline) solid var(--live);
}
.paper__kind { margin: 0 0 8px; font-family: var(--font-data); font-size: 0.75rem; color: var(--live-ink); letter-spacing: 0.06em; text-transform: uppercase; }
.paper__title { margin: 0 0 8px; font-variation-settings: "wght" 650, "wdth" 92; font-size: 1.2rem; line-height: 1.35; max-width: 60ch; }
.paper__meta { margin: 0; font-size: 0.9rem; color: var(--ink-quiet); }
.paper__meta a { color: var(--ink-quiet); }
.paper__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Section index, pinned under the edge. */
.bnav {
    position: sticky; top: var(--nav-h); z-index: 60;
    background: color-mix(in srgb, var(--ground) 90%, transparent);
    backdrop-filter: blur(10px);
    border-top: var(--rule) solid var(--line-soft); border-bottom: var(--rule) solid var(--line-soft);
}
.bnav__inner { display: flex; gap: 6px 26px; overflow-x: auto; padding-block: 12px; scrollbar-width: none; }
.bnav__inner::-webkit-scrollbar { display: none; }
.bnav a {
    white-space: nowrap; text-decoration: none; color: var(--ink-quiet);
    font-variation-settings: "wght" 600, "wdth" 92;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem;
    padding-block: 6px;
}
.bnav a:hover { color: var(--ink); }
.bench-page .band { scroll-margin-top: calc(var(--nav-h) + 52px); }

.variant { margin-top: 52px; }
.variant__title {
    margin: 48px 0 6px;
    font-variation-settings: "wght" 700, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.15rem;
}
.variant > .variant__title { margin-top: 0; }
.variant__sub { margin: 0; font-size: 0.9375rem; }

/* Drill tables. */
.tscroll { overflow-x: auto; margin-top: 24px; }
.tscroll:focus-visible { outline: var(--keyline) solid var(--focus); outline-offset: 4px; }
.dt { border-collapse: collapse; width: 100%; min-width: 640px; }
.dt th {
    text-align: left; padding: 12px 16px 12px 0;
    border-bottom: var(--keyline) solid var(--line);
    font-variation-settings: "wght" 600, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem;
    color: var(--ink-quiet); white-space: nowrap;
}
.dt td { padding: 11px 16px 11px 0; border-bottom: var(--rule) solid var(--line-soft); font-size: 0.9rem; vertical-align: middle; }
.dt .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; text-align: right; }
.dt th.num { text-align: right; font-family: var(--font-legend); }
.dt tbody tr:hover { background: var(--raised); }
.dt tr.is-us td { color: var(--ink); font-variation-settings: "wght" 650; background: var(--raised); }

/* Paired bar: track = the comparison, fill = Limbo. */
.pbar { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.pbar__track { flex: 1; height: 10px; background: var(--raised); border: var(--rule) solid var(--line); }
.pbar__fill { display: block; height: 100%; background: var(--signal); }
.pbar--live .pbar__fill { background: var(--live); }
.pbar__val { font-family: var(--font-data); font-size: 0.8125rem; min-width: 5ch; text-align: right; }

.fbar { display: grid; grid-template-columns: 3.4rem minmax(80px, 1fr) 3.6rem; align-items: center; gap: 10px; min-width: 240px; }
.fbar + .fbar { margin-top: 5px; }
.fbar__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-quiet); }
.fbar__track { height: 8px; background: var(--raised); border: var(--rule) solid var(--line-soft); }
.fbar__fill { display: block; height: 100%; background: var(--ink-quiet); }
.fbar__fill--limbo { background: var(--live); }
.fbar__val { font-family: var(--font-data); font-size: 0.8125rem; text-align: right; }

.tag {
    display: inline-block; padding: 3px 9px;
    border: var(--rule) solid var(--line); color: var(--ink-quiet);
    font-family: var(--font-data); font-size: 0.75rem; white-space: nowrap;
}
.tag--win { border-color: var(--signal); color: var(--signal-ink); }
.tag--live { border-color: var(--live); color: var(--live-ink); }
.tag--loss { border-color: var(--ink); color: var(--ink); }

.note { font-size: 0.9375rem !important; margin-top: 20px; }

.hbars { margin-top: 20px; display: grid; gap: 12px; }
.hbars__row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 12rem); gap: 18px; align-items: center; }
.hbars__label { font-size: 0.9rem; }
.hbars__track { height: 18px; background: var(--raised); border: var(--rule) solid var(--line-soft); }
.hbars__fill { display: block; height: 100%; background: var(--signal); }
.hbars__val { font-family: var(--font-data); font-size: 0.8125rem; color: var(--ink-quiet); }

.parts { margin-top: 32px; border-top: var(--keyline) solid var(--line); }
.parts__row {
    display: grid; grid-template-columns: 11rem 9rem minmax(0, 1fr); gap: 8px 28px; align-items: baseline;
    padding: 22px 0; border-bottom: var(--rule) solid var(--line-soft);
}
.parts__name { font-variation-settings: "wght" 650, "wdth" 87; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem; }
.parts__fig { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 1.9rem; font-weight: 500; line-height: 1; }
.parts__body { color: var(--ink-quiet); font-size: 0.9875rem; line-height: 1.55; max-width: 60ch; }

.methods { margin: 32px 0 0; border-top: var(--keyline) solid var(--line); }
.methods > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 8px 28px; padding: 20px 0; border-bottom: var(--rule) solid var(--line-soft); }
.methods dt { font-variation-settings: "wght" 650, "wdth" 87; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; }
.methods dd { margin: 0; color: var(--ink-quiet); line-height: 1.6; max-width: 70ch; }

.embed { margin-top: 28px; border: var(--keyline) solid var(--line); background: var(--sunk); }
.embed iframe { display: block; width: 100%; height: 880px; border: 0; }

@media (max-width: 860px) {
    .paper { grid-template-columns: 1fr; }
    .hbars__row, .parts__row, .methods > div { grid-template-columns: 1fr; }
    .embed iframe { height: 70vh; }
}

/* ---- Nav: account actions ---- */
.edge__form { margin: 0; display: inline-flex; }
/* Scoped under .board-page so the generic link colour can't override it. */
.board-page .pad-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.board-page .pad-btn--primary:hover { background: transparent; color: var(--ink); }
.edge__links { gap: 22px; }

.flash { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; }
.flash__item {
    padding: 12px 16px; background: var(--raised);
    border-top: var(--keyline) solid var(--live); font-size: 0.9375rem;
}
.flash__item--error { border-top-color: var(--alert); }
.flash__item--success { border-top-color: var(--focus); }

@media (max-width: 1080px) { .edge__links { gap: 16px; font-size: 0.9375rem; } }

/* =============================================================
   Account pages — dashboard, keys, credentials, billing, auth.
   The same bench: drill rows instead of floating cards, keylines,
   tabular figures. Blue = your live resources; red = errors.
   ============================================================= */

.acct {
    /* The account templates' inline styles still name the old palette;
       point those names at the new tokens. */
    --accent: var(--live);
    --ink-soft: var(--ink-quiet);
    --ink-muted: var(--ink-quiet);
}

.acct .container { width: min(1100px, 100% - 48px); margin-inline: auto; }
.acct .section { padding: clamp(32px, 5vw, 64px) 0 clamp(64px, 8vw, 104px); }
.acct .section__heading {
    margin: 28px 0 12px;
    font-variation-settings: "wght" 700, "wdth" 87;
    text-transform: uppercase;
    font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 0.98; letter-spacing: -0.02em;
}
.acct .section__subheading { margin: 0 0 32px; max-width: 64ch; color: var(--ink-quiet); font-size: 1.0625rem; line-height: 1.6; }
.acct h2 { font-variation-settings: "wght" 700, "wdth" 87; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.15rem !important; margin: 0; }
.acct .acct-h { margin-bottom: 8px; }
.acct p { line-height: 1.6; }
.acct a { color: var(--ink); }

/* Account tabs. */
.acct-tabs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px;
    padding-bottom: 12px; border-bottom: var(--rule) solid var(--line-soft);
}
.acct-tabs a {
    text-decoration: none; color: var(--ink-quiet); padding: 6px 0;
    font-variation-settings: "wght" 600, "wdth" 92;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem;
    border-bottom: var(--keyline) solid transparent;
}
.acct-tabs a:hover { color: var(--ink); }
.acct-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--live); }
.acct-tabs__who { margin-left: auto; font-size: 0.8125rem; color: var(--ink-quiet); }
.acct-tabs__who strong { color: var(--ink); font-variation-settings: "wght" 600; }

/* Stats as one ruled strip, not four cards. */
.acct .stat-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    border-top: var(--keyline) solid var(--line);
}
.acct .stat-card { padding: 18px 20px 18px 0; border-bottom: var(--rule) solid var(--line-soft); background: none; border-radius: 0; text-align: left !important; }
.acct .stat-card__label {
    font-variation-settings: "wght" 600, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; color: var(--ink-quiet);
}
.acct .stat-card__value {
    margin-top: 8px;
    font-family: var(--font-data); font-variant-numeric: tabular-nums;
    font-size: clamp(1.7rem, 3vw, 2.4rem) !important; line-height: 1; font-weight: 500; letter-spacing: -0.03em;
}
.acct .stat-card__delta { margin-top: 8px; font-size: 0.8125rem; color: var(--ink-quiet); }
.acct .stat-card__delta a { color: var(--live-ink); }

/* Keys and credentials as drill rows. */
.acct .key-row {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px 24px; align-items: center;
    padding: 16px 0; border-bottom: var(--rule) solid var(--line-soft);
}
.acct .key-row:first-of-type { border-top: var(--keyline) solid var(--line); }
.acct .key-row__name { font-variation-settings: "wght" 650, "wdth" 92; font-size: 0.9375rem; }
.acct .key-row__token { margin-top: 4px; font-family: var(--font-data); font-size: 0.8125rem; color: var(--ink-quiet); word-break: break-all; }
.acct .key-row__meta { font-size: 0.8125rem; color: var(--ink-quiet); line-height: 1.5; }

/* Panels: empty states, the new-key banner, pack choices. */
.acct .feature {
    padding: 24px 26px; background: var(--raised);
    border: 0; border-top: var(--keyline) solid var(--line); border-radius: 0; box-shadow: none;
}
.acct .feature:hover { transform: none; }

/* Buttons. */
.acct .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; min-height: 44px;
    border: var(--keyline) solid var(--line); border-radius: 0;
    background: transparent; color: var(--ink);
    font-family: var(--font-legend); font-variation-settings: "wght" 600, "wdth" 92;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem;
    text-decoration: none; cursor: pointer;
    transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.acct .btn:hover { border-color: var(--ink); }
.acct .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.acct .btn--primary:hover { background: transparent; color: var(--ink); }
.acct .btn--ghost { background: transparent; }
.acct .btn--small { min-height: 36px; padding: 6px 14px; }
.acct .btn--block { width: 100%; }
.acct .btn--danger { border-color: var(--alert); color: var(--alert); }
.acct .btn--danger:hover { background: var(--alert); color: var(--ground); }

/* Forms. */
.acct .form {
    width: min(440px, 100%); margin: clamp(40px, 8vw, 96px) auto;
    padding: 32px 30px; background: var(--raised); border-top: var(--keyline) solid var(--live);
}
.acct .form__title {
    margin: 0 0 24px;
    font-variation-settings: "wght" 700, "wdth" 87; text-transform: uppercase;
    font-size: 1.9rem; letter-spacing: -0.015em;
}
.acct .form__field { display: grid; gap: 6px; margin-bottom: 18px; }
.acct .form__field label {
    font-variation-settings: "wght" 600, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; color: var(--ink-quiet);
}
.acct input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.acct select, .acct textarea {
    width: 100%; min-height: 44px; padding: 10px 12px;
    background: var(--sunk); color: var(--ink);
    border: var(--rule) solid var(--line); border-radius: 0;
    font: inherit; font-size: 0.9375rem;
    transition: border-color 160ms var(--ease);
}
.acct textarea { min-height: 120px; font-family: var(--font-data); font-size: 0.8125rem; }
.acct input:focus, .acct select:focus, .acct textarea:focus { outline: none; border-color: var(--live); box-shadow: 0 0 0 1px var(--live); }
.acct .form__hint { font-size: 0.8125rem; color: var(--ink-quiet); }
.acct .form__alt { margin-top: 18px; font-size: 0.875rem; color: var(--ink-quiet); text-align: center; }
.acct .form__alt a { color: var(--ink); }
.acct .form__errors { color: var(--alert); font-size: 0.8125rem; }
.acct .form__errors ul { margin: 0; padding-left: 1.1em; }

/* Tags, tables, code. */
.acct .tag {
    display: inline-block; padding: 3px 9px; border: var(--rule) solid var(--line);
    font-family: var(--font-data); font-size: 0.75rem; color: var(--ink-quiet); border-radius: 0; background: none;
}
.acct .tag--good { border-color: var(--live); color: var(--live-ink); }
.acct .tag--bad { border-color: var(--alert); color: var(--alert); }
.acct .data-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.acct .data-table th {
    text-align: left; padding: 12px 14px 12px 0; border-bottom: var(--keyline) solid var(--line);
    font-variation-settings: "wght" 600, "wdth" 87;
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; color: var(--ink-quiet);
}
.acct .data-table td { padding: 11px 14px 11px 0; border-bottom: var(--rule) solid var(--line-soft); font-size: 0.875rem; }
.acct .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; text-align: right; }
.acct th.num { font-family: var(--font-legend); }
.acct .mono { font-family: var(--font-code); font-size: 0.8125rem; }
.acct .inline-code {
    font-family: var(--font-code); font-size: 0.85em;
    padding: 1px 6px; border: var(--rule) solid var(--line-soft); background: var(--sunk);
}
.acct pre.code {
    margin: 0; padding: 20px 22px; overflow-x: auto;
    background: var(--sunk); color: var(--ink); border: var(--keyline) solid var(--line);
    font-family: var(--font-code); font-size: 0.8125rem; line-height: 1.7; border-radius: 0;
}
.acct pre.code .k { color: var(--live-ink); }
.acct pre.code .c { color: var(--ink-quiet); }

@media (max-width: 860px) {
    .acct .container { width: min(1100px, 100% - 32px); }
    .acct .key-row { grid-template-columns: 1fr; }
    .acct-tabs__who { margin-left: 0; width: 100%; }
}

/* =============================================================
   Ambient field — slow floating colour behind every page.
   Two fixed layers of soft radial light in the site's own hues
   (the four chip colours and live blue) drift on long, offset
   loops. Transform-only animation, so it stays on the compositor.
   It sits under all content (z-index -1 on the root canvas) and
   holds still for reduced motion.
   ============================================================= */

:root {
    --field-a: 0.30;   /* dark theme strength */
    --field-b: 0.24;
}
[data-theme="light"] {
    --field-a: 0.32;
    --field-b: 0.24;
}

.board-page::before,
.board-page::after {
    content: "";
    position: fixed;
    inset: -25vmax;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

.board-page::before {
    background:
        radial-gradient(38vmax 38vmax at 22% 28%, rgb(79 209 165 / var(--field-a)), transparent 70%),
        radial-gradient(34vmax 34vmax at 78% 18%, rgb(124 196 255 / var(--field-a)), transparent 70%),
        radial-gradient(30vmax 30vmax at 60% 82%, rgb(255 122 138 / var(--field-b)), transparent 70%);
    animation: field-drift-a 46s ease-in-out infinite alternate;
}

.board-page::after {
    background:
        radial-gradient(32vmax 32vmax at 84% 64%, rgb(90 209 240 / var(--field-b)), transparent 70%),
        radial-gradient(28vmax 28vmax at 16% 76%, rgb(195 230 107 / var(--field-b)), transparent 70%),
        radial-gradient(26vmax 26vmax at 46% 40%, rgb(124 196 255 / calc(var(--field-b) * 0.8)), transparent 70%);
    animation: field-drift-b 62s ease-in-out infinite alternate;
}

@keyframes field-drift-a {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(6vmax, -4vmax, 0) rotate(8deg) scale(1.08); }
    100% { transform: translate3d(-5vmax, 5vmax, 0) rotate(-6deg) scale(0.96); }
}
@keyframes field-drift-b {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04); }
    50%  { transform: translate3d(-7vmax, 3vmax, 0) rotate(-10deg) scale(0.95); }
    100% { transform: translate3d(5vmax, -6vmax, 0) rotate(7deg) scale(1.1); }
}

/* Let the field show through the big surfaces instead of stopping at them. */
.band--sunk { background: color-mix(in srgb, var(--sunk) 72%, transparent); }
.foot       { background: color-mix(in srgb, var(--sunk) 78%, transparent); }
.acct .feature, .acct .form, .paper { background: color-mix(in srgb, var(--raised) 82%, transparent); }
.scene__art {
    background:
        radial-gradient(ellipse 70% 60% at 50% 52%,
            color-mix(in srgb, var(--live) 7%, color-mix(in srgb, var(--sunk) 80%, transparent)) 0%,
            color-mix(in srgb, var(--sunk) 80%, transparent) 72%);
    backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
    .board-page::before, .board-page::after { animation: none; }
}


/* =============================================================
   Soft-sans pass. Manrope replaces the condensed sans everywhere
   outside the canvas scenes. Headlines drop to sentence case and a
   softer weight; small labels keep tracked capitals as wayfinding.
   ============================================================= */

.board-page {
    font-optical-sizing: auto;
    font-variation-settings: normal;
}
.board-page h1, .board-page h2, .board-page h3,
.scene__title, .band h2, .bhead__title, .ask h2, .acct .section__heading,
.acct .form__title, .acct h2, .variant__title, .paper__title {
    text-transform: none;
    font-variation-settings: normal;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.scene--hero .scene__title, .bhead__title { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.scene__title em, .bhead__title em { font-style: normal; font-weight: inherit; }
.band h2 { max-width: 22ch; line-height: 1.06; }
.scene__title { max-width: 20ch; line-height: 1.08; }
.scene--hero .scene__title { max-width: 16ch; }

/* Figures: serif lining numerals, tabular so columns stay aligned. */
.fig, .hud dd, .cost__value, .counter__value, .bsum dd, .scale__val,
.redbar__pct, .pbar__val, .fbar__val, .hbars__val, .dt .num, .matrix .num,
.acct .num, .acct .stat-card__value, .parts__fig, .readout td {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    font-weight: 500;
}
.counter__value, .cost__value, .bsum dd { letter-spacing: -0.02em; }

/* Tracked small labels stay capitals, set lighter for a serif. */
.edge__name, .pad-btn, .rail__name, .rail__take, .hud dt, .readout th,
.matrix th, .dt th, .bsum dt, .acct .btn, .acct-tabs a, .scale__label,
.build__item, .parts__name, .methods dt, .foot h3, .bnav a, .film-row__name {
    font-variation-settings: normal;
    font-weight: 600;
    letter-spacing: 0.07em;
}
.edge__links a { font-size: 1rem; }


/* ---- Light mode: accent text as ink on a highlight band ---- */
[data-theme="light"] .scene__title em,
[data-theme="light"] .bhead__title em {
    background: linear-gradient(transparent 58%, var(--mark-signal) 58%, var(--mark-signal) 92%, transparent 92%);
    padding: 0 0.06em;
}
[data-theme="light"] .counter__value,
[data-theme="light"] .cost__value--cross,
[data-theme="light"] .scale__row--cross .scale__val,
[data-theme="light"] .bsum dd.is-signal,
[data-theme="light"] .hud dd.is-signal,
[data-theme="light"] .acct .stat-card__value.is-signal {
    display: inline-block;
    background: linear-gradient(transparent 62%, var(--mark-signal) 62%);
    padding: 0 0.08em;
}
[data-theme="light"] .bsum dd.is-live,
[data-theme="light"] .hud dd.is-live {
    display: inline-block;
    background: linear-gradient(transparent 62%, var(--mark-live) 62%);
    padding: 0 0.08em;
}
/* Small accented figures in tables: ink, weight, and a thin bright rule. */
[data-theme="light"] .dt .num.is-signal,
[data-theme="light"] .matrix .cut-limbo,
[data-theme="light"] .readout td.is-signal {
    font-weight: 700;
    text-decoration: underline; text-decoration-color: var(--signal);
    text-decoration-thickness: 3px; text-underline-offset: 3px;
}
[data-theme="light"] .dt .num.is-live {
    font-weight: 700;
    text-decoration: underline; text-decoration-color: var(--live);
    text-decoration-thickness: 3px; text-underline-offset: 3px;
}
[data-theme="light"] .ask__mail,
[data-theme="light"] .rail__take { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.parts__fig--word { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }