/* =============================================================================
ALPHA OMEGA LABS · INVESTOR DECK v3 · DESIGN SYSTEM
-----------------------------------------------------------------------------
ONE component set, TWO grounds. Nothing below hardcodes a colour: every
component paints with per-master flip tokens, so `.slide.light` and
`.slide.dark` render the same markup correctly with no per-master overrides.
---------------------------------------------------------------------------
MARKUP CONTRACT — what index.html must author
---------------------------------------------------------------------------
the one mono kicker
Title
standfirst
…
All presenter chrome (progress bar, HUD, index, notes, help, toast) is BUILT
BY deck.js. index.html must not author it.
.slide MUST carry `light` or `dark`. .head / .body / .foot are the three grid
rows (auto / minmax(0,1fr) / auto): head and foot cannot collide with body,
structurally. A slide with no header text still needs an (empty) .head.
---------------------------------------------------------------------------
TOKENS
---------------------------------------------------------------------------
PALETTE OF RECORD (from the brief, verbatim — use these for fills, strokes,
swatches and bars, i.e. anywhere that is NOT text):
--paper #fbfaf8 --paper-2 #f2f0ec --ink #101418 --ink-2 #4a5260
--ink-3 #767f8d --rule #e4e2dd
--deep #0b0e13 --deep-2 #141922 --deep-fg #f2f0ec
--deep-dim #98a1b0 --deep-rule rgba(242,240,236,.10)
--mint #12a594 / --mint-hi #5fe3c8 Cortex / shipping
--amber #b8801f / --amber-hi #f0c96a in development / caution
--violet #5b52d9 / --violet-hi #a99cff omegaXiv / extension
--rose #c4453a / --rose-hi #ff9b8b risk / absent
TEXT-WEIGHT DERIVATIVES. tools/audit.mjs fails any text under 4.5:1 against
its composited backdrop, in both media. Four of the light-master values above
do not clear that bar as TEXT (mint 2.95:1, amber 3.28:1 and ink-3 3.88:1 on
paper; rose 4.33:1 on paper-2), so each has a darkened text twin, solved
against the worst backdrop in the system (its own tint wash over --paper-2):
--ink-3t #5b626d from --ink-3 worst 4.79:1
--mint-t #0c6e62 from --mint worst 4.78:1
--amber-t #825a16 from --amber worst 4.78:1
--violet-t #574fd0 from --violet worst 4.76:1
--rose-t #ab3c32 from --rose worst 4.78:1
Dark-master values all clear the bar unchanged; only --deep-dim's tertiary
companion is derived (--deep-dim-2 #8f96a1, worst 4.78:1).
PER-MASTER FLIP TOKENS — the only colours a component may name:
--ground --ground-2 slide ground, inset surface
--fg --fg-2 --fg-3 primary / secondary / tertiary text
--line --line-2 hairline / stronger hairline
--accent accent TEXT colour
--accent-solid accent fill / stroke
--accent-wash accent tint wash (the only allowed fill tint)
--plate-edge --elev capture frame hairline / elevation
Four tone modifiers re-point --accent* on any element and cascade to every
component inside it — this is how one component set gets four meanings:
.tone-ship (mint) .tone-dev (amber) .tone-ext (violet) .tone-risk (rose)
--accent defaults to the ship tone on both masters.
TYPE. --display Newsreader (h1/h2/h3, numerals, quotes) · --sans IBM Plex
Sans (all body copy) · --mono IBM Plex Mono, reserved for DATA and the single
.kick per slide. Scale at the 1920 stage: --fs-hero 116 / --fs-h1 78 /
--fs-h2 52 / --fs-h3 31 / --fs-h4 23 / --fs-lede 27 / --fs-body 22 /
--fs-sm 19.5 / --fs-cap 17 / --fs-foot 15.5 · mono --fs-kick 16.5 /
--fs-data 20 / --fs-data-sm 17 · numerals --fs-num-xl 88 / -l 56 / -m 38.
---------------------------------------------------------------------------
COMPONENTS (see deck.js header for the attribute contract)
COMPONENT INNER PARTS MODIFIERS
.stat .n (.u) .l .s .tint .mid-size .sm .data
.stats (wraps .stat) .s2 .s3 .s4 .plain
.steps > li h3/h4 + p .row .tight (--step-w)
.tbl caption thead tbody .compact .wide
th.lead td.lead td.val(.r) tr.hl span.mk(.yes/.part/.no)
.bars > .bar .lb(+small) .vv .tk>i .tight .loose · .bar.ghost
fill:
.say p + p.who .big .quiet
.statement (wraps .say) —
.chips > .chip i + text .ship .dev .ext .risk .plain
.legend > .st i + text .ship .dev .ext .risk
.proto .planned
.pts > li inline markup .sm .tight .loose .ruled .off
.rail any stack .accent .thick (--rail-pad)
.note two children .one .flip .tall
.plate img|video .tagl .over .ar(--ar) .grow .contain
.plates (wraps .plate) .p2 .p3
.folk .por>img .nm .ro .ach .wide(--por-w) · crop: --pos
.bleed img|video — (behind head/body/foot)
.mark α → ω vector (--mark-h) .arw inline arrow (--arw-h)
.model svg[data-build] (from tools/bricks.mjs) —
Head/foot: .head(.ruled) · .body(.flush/.roomy/.mid/.grid) · .foot(.bare)
Layout: .cols + .c2 .c3 .c4 .c5 .c32 .c23 .c21 .c12 (+.split .stretch .mid)
.rows(.between) · .grow · .hr · .center .right .fill .nowrap .hide
Spacing: .gap-xs/-s/-l/-xl on .cols / .rows / .body only — they set --cg
(column) and --rg (row), which nothing else reads. Component spacing is a
component class: .pts.tight/.loose, .bars.tight/.loose, .steps.tight.
Text tone: .t-ship .t-dev .t-ext .t-risk .t-dim .t-fg · .mono .num
Motion: .frag (+ data-frag="N" to group, + .from-l/.from-r/.fade)
[data-count="10,000"] · svg[data-build="N"] with [data-step]
NO component defines a border unless the border is load-bearing (a capture
needs a frame; a table needs row rules). Everything else separates with
whitespace, a hairline, one tint wash, or elevation.
========================================================================== */
/* ---- fonts · self-hosted, offline-safe ----------------------------------- */
/* Only the latin subsets are vendored, which is why the α → ω mark and every
arrow in this deck are DRAWN (see .mark / .arw and deck.js): U+03B1, U+03C9
and U+2192 are absent from all five files, so as text they would silently
fall back to a system font with different metrics — or to tofu in the PDF. */
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-normal.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:block}
@font-face{font-family:"Newsreader";src:url("fonts/newsreader-latin-italic.woff2") format("woff2");font-weight:200 700;font-style:italic;font-display:block}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/ibm-plex-sans-latin.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:block}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:block}
:root{
/* palette of record */
--paper:#fbfaf8; --paper-2:#f2f0ec;
--ink:#101418; --ink-2:#4a5260; --ink-3:#767f8d; --rule:#e4e2dd;
--deep:#0b0e13; --deep-2:#141922; --deep-fg:#f2f0ec; --deep-dim:#98a1b0;
--deep-rule:rgba(242,240,236,.10);
--mint:#12a594; --mint-hi:#5fe3c8;
--amber:#b8801f; --amber-hi:#f0c96a;
--violet:#5b52d9; --violet-hi:#a99cff;
--rose:#c4453a; --rose-hi:#ff9b8b;
/* text-weight derivatives (see header) */
--ink-3t:#5b626d; --deep-dim-2:#8f96a1;
--mint-t:#0c6e62; --amber-t:#825a16; --violet-t:#574fd0; --rose-t:#ab3c32;
--display:"Newsreader",ui-serif,Georgia,serif;
--sans:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
--fs-hero:116px; --fs-h1:78px; --fs-h2:52px; --fs-h3:31px; --fs-h4:23px;
--fs-lede:27px; --fs-body:22px; --fs-sm:19.5px; --fs-cap:17px; --fs-foot:15.5px;
--fs-kick:16.5px; --fs-data:20px; --fs-data-sm:17px;
--fs-num-xl:88px; --fs-num-l:56px; --fs-num-m:38px;
--pad-x:120px; --pad-t:80px; --pad-b:60px;
--r-1:3px; --r-2:5px;
--ease:cubic-bezier(.16,1,.3,1);
--dur:.52s; --dur-fast:.22s;
/* page ground behind the stage — warm neutral, never pure grey */
--desk:#d9d5cd;
/* chrome, outside the slide masters */
--chrome-bg:rgba(251,250,248,.93); --chrome-fg:#4a5260;
--chrome-line:#c9c5bd; --chrome-hi:#0c6e62; --chrome-dim:#767f8d;
--chrome-panel:rgba(251,250,248,.975);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
html,body{height:100%;overflow:hidden;background:var(--desk);color:var(--ink);
font-family:var(--sans);font-size:22px;-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility}
img,svg,video{max-width:100%}
b,strong{font-weight:600;color:var(--fg,var(--ink))}
em,i{font-style:italic}
/* the audit's tiny-type floor is 14px at this stage, so a footnote marker inside
the 15.5px footer must not scale below it */
sup{font-size:max(15px,.68em);line-height:0;vertical-align:super}
::selection{background:rgba(18,165,148,.24)}
/* =============================================================================
1 · STAGE
========================================================================== */
#deck{position:fixed;inset:0;background:var(--desk);
transition:background .6s var(--ease)}
body[data-master="dark"]{--desk:#1a1d22}
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;
transform:translate(-50%,-50%);transform-origin:center;
background:var(--paper);
box-shadow:0 2px 6px rgba(11,14,19,.14),0 54px 130px -46px rgba(11,14,19,.55)}
body[data-master="dark"] #stage{background:var(--deep)}
/* =============================================================================
2 · SLIDE MASTERS — the flip
========================================================================== */
.slide{
--ground:var(--paper); --ground-2:var(--paper-2);
--fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3t);
--line:var(--rule); --line-2:#cfccc5;
--ship:var(--mint-t); --ship-solid:var(--mint); --ship-wash:rgba(18,165,148,.09);
--dev:var(--amber-t); --dev-solid:var(--amber); --dev-wash:rgba(184,128,31,.09);
--ext:var(--violet-t); --ext-solid:var(--violet); --ext-wash:rgba(91,82,217,.09);
--risk:var(--rose-t); --risk-solid:var(--rose); --risk-wash:rgba(196,69,58,.09);
--plate-edge:rgba(16,20,24,.11);
--elev:0 1px 2px rgba(16,20,24,.05),0 14px 34px -16px rgba(16,20,24,.20);
--bleed-filter:saturate(.4) brightness(1.08) contrast(.97);
--bleed-scrim:linear-gradient(180deg,rgba(251,250,248,.95) 0%,rgba(251,250,248,.90) 44%,rgba(251,250,248,.98) 100%);
--swatch-off:#c4c0b8;
/* the brick drawing reads these; BrickModel's SVG falls back if absent */
--brick-key:rgba(16,20,24,.55); --brick-ghost-t:#e8e5df; --brick-ghost-l:#ded9d1;
--brick-ghost-r:#d2ccc2; --brick-ghost-key:#b9b3a8;
--tag-bg:#fbfaf8; --tag-fg:#101418; --tag-key:#101418;
}
.slide.dark{
--ground:var(--deep); --ground-2:var(--deep-2);
--fg:var(--deep-fg); --fg-2:var(--deep-dim); --fg-3:var(--deep-dim-2);
--line:var(--deep-rule); --line-2:rgba(242,240,236,.20);
--ship:var(--mint-hi); --ship-solid:var(--mint-hi); --ship-wash:rgba(95,227,200,.10);
--dev:var(--amber-hi); --dev-solid:var(--amber-hi); --dev-wash:rgba(240,201,106,.10);
--ext:var(--violet-hi); --ext-solid:var(--violet-hi); --ext-wash:rgba(169,156,255,.10);
--risk:var(--rose-hi); --risk-solid:var(--rose-hi); --risk-wash:rgba(255,155,139,.10);
--plate-edge:rgba(242,240,236,.14);
--elev:0 1px 2px rgba(0,0,0,.5),0 18px 44px -18px rgba(0,0,0,.72);
--bleed-filter:saturate(.5) brightness(.45) contrast(1.04);
--bleed-scrim:linear-gradient(180deg,rgba(11,14,19,.92) 0%,rgba(11,14,19,.82) 44%,rgba(11,14,19,.96) 100%);
--swatch-off:#3a4150;
--brick-key:rgba(242,240,236,.42); --brick-ghost-t:#141821; --brick-ghost-l:#0e1117;
--brick-ghost-r:#0a0c11; --brick-ghost-key:#4e5665;
--tag-bg:#0b0e13; --tag-fg:#f2f0ec; --tag-key:#f2f0ec;
}
/* accent defaults to the ship tone; a tone modifier re-points it for any subtree */
.slide{--accent:var(--ship);--accent-solid:var(--ship-solid);--accent-wash:var(--ship-wash)}
.tone-ship{--accent:var(--ship);--accent-solid:var(--ship-solid);--accent-wash:var(--ship-wash)}
.tone-dev {--accent:var(--dev); --accent-solid:var(--dev-solid); --accent-wash:var(--dev-wash)}
.tone-ext {--accent:var(--ext); --accent-solid:var(--ext-solid); --accent-wash:var(--ext-wash)}
.tone-risk{--accent:var(--risk);--accent-solid:var(--risk-solid);--accent-wash:var(--risk-wash)}
/* tone as a text colour, for a word inside a sentence */
.t-ship{color:var(--ship)} .t-dev{color:var(--dev)}
.t-ext{color:var(--ext)} .t-risk{color:var(--risk)}
.t-dim{color:var(--fg-3)} .t-fg{color:var(--fg)}
/* =============================================================================
3 · SLIDE SKELETON — head / body / foot can never collide
========================================================================== */
.slide{
position:absolute;inset:0;overflow:hidden;
display:grid;grid-template-rows:auto minmax(0,1fr) auto;
padding:var(--pad-t) var(--pad-x) var(--pad-b);
background:var(--ground);color:var(--fg);
opacity:0;pointer-events:none;transform:translateY(14px);
transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.slide.active{opacity:1;pointer-events:auto;transform:none;z-index:2}
.slide.leaving{opacity:0;transform:translateY(-10px);z-index:1}
.slide>.head,.slide>.body,.slide>.foot{position:relative;z-index:1;min-width:0}
.head{display:flex;flex-direction:column;align-items:flex-start}
.head.ruled{padding-bottom:26px;border-bottom:1px solid var(--line)}
.body{display:flex;flex-direction:column;gap:var(--rg,30px);min-height:0;padding-top:40px}
.body.mid{justify-content:center}
.body.grid{display:grid}
.body.flush{padding-top:22px}
.body.roomy{padding-top:60px}
.foot{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;
padding-top:22px;border-top:1px solid var(--line);
font-family:var(--mono);font-size:var(--fs-foot);line-height:1.45;
color:var(--fg-3);letter-spacing:.02em}
.foot .src{max-width:112ch}
.foot .src b{font-weight:500;color:var(--fg-2)}
.foot .pg{flex:0 0 auto;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.foot.bare,.slide.cover .foot{border-top-color:transparent}
/* =============================================================================
4 · TYPOGRAPHY
========================================================================== */
h1{font-family:var(--display);font-weight:400;font-size:var(--fs-h1);
line-height:1.03;letter-spacing:-.022em;color:var(--fg);max-width:30ch;
text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:var(--fs-h2);
line-height:1.1;letter-spacing:-.018em;color:var(--fg);max-width:34ch;
text-wrap:balance}
h3{font-family:var(--display);font-weight:500;font-size:var(--fs-h3);
line-height:1.2;letter-spacing:-.01em;color:var(--fg)}
h4{font-family:var(--sans);font-weight:600;font-size:var(--fs-h4);
line-height:1.28;letter-spacing:-.004em;color:var(--fg)}
h1+.lede,h2+.lede,h1+h2{margin-top:20px}
h2+h1{margin-top:6px}
/* NOTE ON MARKERS · a grid or flex container BLOCKIFIES every child, so a or
inside a bullet would become its own grid item and drop to a new row.
Every marked component below therefore places its marker as an inline-block
with a hanging indent, never as a grid column. Inline markup then flows. */
.kick{font-family:var(--mono);font-weight:500;font-size:var(--fs-kick);
letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
margin-bottom:24px;line-height:1.3}
.kick .sep{display:inline-block;width:26px;height:1px;margin-right:14px;
background:var(--accent-solid);opacity:.6;vertical-align:.3em}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--fg-2);max-width:74ch}
.lede b{color:var(--fg)}
p{font-size:var(--fs-body);line-height:1.55;color:var(--fg-2)}
p+p{margin-top:.7em}
p.sm{font-size:var(--fs-sm);line-height:1.5}
p.cap,.cap{font-size:var(--fs-cap);line-height:1.45;color:var(--fg-3)}
.cap b{font-weight:500;color:var(--fg-2)}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-wash)}
.mono{font-family:var(--mono);font-size:var(--fs-data)}
.num,[data-count]{font-variant-numeric:tabular-nums lining-nums}
.nowrap{white-space:nowrap}
.center{text-align:center}
.right{text-align:right}
.fill{width:100%}
.hide{display:none}
/* ---- the mark: α → ω, drawn (see fonts note) ----------------------------- */
/* LOWERCASE ALPHA (U+03B1) → LOWERCASE OMEGA (U+03C9), kerned optically.
--mark-h is the SVG BOX height, not a font-size. Both glyphs are x-height
forms, so the reference is an X-HEIGHT, not a cap height: the x-height the box
produces is --mark-h × 0.7294, and the box also carries 0.1272 of its height below
the baseline for the descender overshoots. The default 0.584em therefore puts
the mark's x-height at 0.426em, which is Newsreader's own x-height (OS/2
sxHeight 852 / upm 2000) — leave --mark-h alone and the mark sits in running
text at its true size. To hit a target x-height X, set
--mark-h:calc(X / 0.7294). The baseline offset is derived from --mark-h with
calc(), so an override such as --mark-h:110px still sits correctly. */
.mark{display:inline-block;line-height:0;color:inherit;
vertical-align:calc(var(--mark-h,0.584em) * -0.1272)}
.mark svg{display:block;height:var(--mark-h,0.584em);width:auto}
.arw{display:inline-block;line-height:0;color:var(--accent);vertical-align:.055em;
margin:0 .18em}
.arw svg{display:block;height:var(--arw-h,.5em);width:auto}
/* =============================================================================
5 · LAYOUT HELPERS
========================================================================== */
.cols{display:grid;gap:var(--cg,40px);align-items:start;min-width:0}
.cols.top{align-items:start} .cols.mid{align-items:center} .cols.base{align-items:end}
.cols.stretch{align-items:stretch}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.c32{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.c23{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.c21{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr)}
.c12{grid-template-columns:minmax(0,1fr) minmax(0,2.1fr)}
.rows{display:flex;flex-direction:column;gap:var(--rg,26px);min-width:0;min-height:0}
.rows.between{justify-content:space-between;height:100%}
.grow{flex:1 1 auto;min-height:0}
/* Gap modifiers drive ONLY .cols / .rows / .body. Custom properties inherit, so
a single shared --gap would silently retune every nested component that read
it; --cg / --rg are consumed by the layout helpers alone. Component spacing is
part of the component, and is set with a component class (.pts.tight, …). */
.gap-xs{--cg:14px;--rg:14px} .gap-s{--cg:22px;--rg:22px}
.gap-l{--cg:56px;--rg:56px} .gap-xl{--cg:80px;--rg:80px}
.hr{height:1px;background:var(--line);border:0}
/* a hairline that divides grid columns without drawing a box */
.cols.split>*+*{border-left:1px solid var(--line);padding-left:var(--cg,40px)}
.cols.split{gap:0}
.cols.split>*{padding-right:var(--cg,40px)}
.cols.split>*:last-child{padding-right:0}
/* =============================================================================
6 · COMPONENTS
========================================================================== */
/* ---- metric ---------------------------------------------------------------
No box. A display numeral, an editorial label, a caption. Grouped by .stats,
which separates with vertical hairlines rather than cards. */
.stat{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.stat .n{display:block;font-family:var(--display);font-weight:400;font-size:var(--fs-num-xl);
line-height:.92;letter-spacing:-.03em;color:var(--fg);white-space:nowrap;
font-variant-numeric:tabular-nums lining-nums}
.stat .n .u{display:inline-block;font-size:.4em;letter-spacing:-.01em;
color:var(--fg-2);margin-left:.08em;font-family:var(--sans);font-weight:400}
.stat .l{margin-top:16px;font-size:var(--fs-h4);font-weight:600;line-height:1.26;
color:var(--fg);letter-spacing:-.004em}
.stat .s{margin-top:9px;font-size:var(--fs-cap);line-height:1.45;color:var(--fg-3);
max-width:32ch}
.stat.tint .n{color:var(--accent)}
.stat.mid-size .n{font-size:var(--fs-num-l)}
.stat.sm .n{font-size:var(--fs-num-m)}
.stat.sm .l{margin-top:11px;font-size:var(--fs-sm);font-weight:600}
.stat.data .n{font-family:var(--mono);font-weight:500;font-size:calc(var(--fs-num-xl)*.76);letter-spacing:-.02em}
.stats{display:grid;gap:0;align-items:start}
.stats>*{padding-inline:var(--stat-gap,44px);border-left:1px solid var(--line);min-width:0}
.stats>*:first-child{padding-inline-start:0;border-left:0}
.stats>*:last-child{padding-inline-end:0}
.stats.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats.plain>*{border-left:0;padding-inline:0}
.stats.plain{gap:var(--cg,40px)}
/* ---- numbered steps -------------------------------------------------------
The number is a display numeral in the margin, the separator is a hairline.
.steps.row lays the same markup out horizontally. */
.steps{list-style:none;counter-reset:st;display:grid;gap:0}
.steps>li{counter-increment:st;position:relative;min-width:0;
padding:24px 0 24px var(--step-w,98px);border-top:1px solid var(--line)}
.steps>li:first-child{border-top:0;padding-top:0}
.steps>li::before{content:counter(st,decimal-leading-zero);
position:absolute;left:0;top:24px;
font-family:var(--display);font-weight:400;font-size:var(--fs-num-m);line-height:.92;
color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.steps>li:first-child::before{top:0}
.steps h3{margin-bottom:9px}
.steps h4{margin-bottom:8px}
.steps p{font-size:var(--fs-sm);line-height:1.5}
.steps.row{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.steps.row>li{padding:22px var(--step-pad,32px) 0;
border-top:1px solid var(--line);border-left:1px solid var(--line)}
.steps.row>li::before{position:static;display:block;margin-bottom:16px}
.steps.row>li:first-child{border-left:0;padding-left:0}
.steps.row>li:last-child{padding-right:0}
.steps.tight>li{padding-top:18px;padding-bottom:18px}
.steps.tight>li::before{top:18px}
.steps.tight>li:first-child{padding-top:0}
.steps.tight>li:first-child::before{top:0}
/* ---- data table -----------------------------------------------------------
Row rules only. No outer frame, no zebra fill, no rounded corners: the rules
ARE the structure, and one tint wash marks the row that matters. */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.42;
text-align:left}
.tbl caption{text-align:left;font-size:var(--fs-cap);color:var(--fg-3);
padding-bottom:14px}
.tbl th{font-family:var(--sans);font-weight:600;font-size:var(--fs-cap);
color:var(--fg-3);letter-spacing:.01em;vertical-align:bottom;
padding:0 26px 13px 0;border-bottom:1px solid var(--line-2)}
.tbl td{padding:16px 26px 16px 0;border-top:1px solid var(--line);
color:var(--fg-2);vertical-align:top;min-width:0}
.tbl tr>*:last-child{padding-right:0}
.tbl tbody tr:first-child td{border-top:0}
.tbl .lead{color:var(--fg);font-weight:500}
.tbl .val{font-family:var(--mono);font-size:var(--fs-data-sm);
font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
.tbl .val.r{text-align:right}
/* The highlighted row is the one that matters, so every cell in it goes to
full-strength --fg — an ordinary row only promotes its .lead and .val.
The rule this replaced set color:var(--fg-2) at specificity (0,2,3), which
outranked `.tbl .lead` and `.tbl .val` at (0,2,0) and made the highlighted
row the DIMMEST one in the table. --fg over --accent-wash measures 15.7:1 on
the light master and 14.2:1 on the dark. */
.tbl tbody tr.hl>*{background:var(--accent-wash);color:var(--fg)}
.tbl tbody tr.hl>*:first-child{box-shadow:inset 3px 0 0 var(--accent-solid)}
.tbl.compact td{padding-top:11px;padding-bottom:11px}
.tbl.compact th{padding-bottom:10px}
.tbl.wide td,.tbl.wide th{padding-right:40px}
/* a state mark inside a cell */
.mk{font-family:var(--mono);font-size:var(--fs-data-sm);color:var(--fg-3)}
.mk.yes{color:var(--ship)} .mk.part{color:var(--dev)} .mk.no{color:var(--risk)}
/* ---- labelled bar --------------------------------------------------------- */
.bars{display:flex;flex-direction:column;gap:24px}
.bars.tight{gap:16px}
.bars.loose{gap:34px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) auto;
align-items:baseline;column-gap:24px;row-gap:11px;min-width:0}
.bar .lb{font-size:var(--fs-sm);line-height:1.35;color:var(--fg);font-weight:500}
.bar .lb small{display:block;font-size:var(--fs-cap);font-weight:400;color:var(--fg-3);
margin-top:3px;line-height:1.4}
.bar .vv{font-family:var(--mono);font-size:var(--fs-data);font-weight:500;
font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
.bar .tk{grid-column:1/-1;height:10px;border-radius:1px;background:var(--ground-2);
overflow:hidden}
.slide.dark .bar .tk{background:rgba(242,240,236,.09)}
.bar .tk>i{display:block;height:100%;width:var(--v,10%);border-radius:1px;
background:var(--accent-solid);transform:scaleX(0);transform-origin:left center;
transition:transform .95s var(--ease)}
.slide.active .bar .tk>i{transform:scaleX(1);transition-delay:calc(.18s + var(--bi,0)*.07s)}
.bar.ghost .tk>i{background:var(--swatch-off)}
/* ---- statement / quote ---------------------------------------------------- */
.say{min-width:0}
.say::before{content:"";display:block;width:54px;height:2px;
background:var(--accent-solid);margin-bottom:26px}
/* The measure lives on the element that carries the font-size: `ch` on the
container would be 34 characters of 22px body text, not of 50px display. */
.say p,.say blockquote{font-family:var(--display);font-weight:400;font-size:36px;
line-height:1.28;letter-spacing:-.014em;color:var(--fg);max-width:30ch}
.say.big p{font-size:50px;line-height:1.18;max-width:24ch}
.say p.who{font-family:var(--sans);font-size:var(--fs-cap);font-weight:400;
line-height:1.45;letter-spacing:0;color:var(--fg-3);margin-top:22px;max-width:54ch}
.say p.who b{color:var(--fg-2);font-weight:500}
.say.quiet::before{background:var(--line-2)}
/* full-slide statement */
.statement{height:100%;display:flex;flex-direction:column;justify-content:center;
min-height:0}
.statement .say p{max-width:22ch}
.statement .say p.who{max-width:54ch}
/* ---- chip ----------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.chip{display:inline-block;line-height:1.35;
font-family:var(--mono);font-weight:500;font-size:var(--fs-data-sm);
letter-spacing:.01em;color:var(--fg-2);background:var(--accent-wash);
border-radius:var(--r-1);padding:6px 12px;white-space:nowrap}
.chip>i{display:inline-block;width:8px;height:8px;margin-right:9px;
border-radius:1px;background:var(--accent-solid);vertical-align:.04em}
.chip.ship{background:var(--ship-wash)} .chip.ship>i{background:var(--ship-solid)}
.chip.dev{background:var(--dev-wash)} .chip.dev>i{background:var(--dev-solid)}
.chip.ext{background:var(--ext-wash)} .chip.ext>i{background:var(--ext-solid)}
.chip.risk{background:var(--risk-wash)} .chip.risk>i{background:var(--risk-solid)}
.chip.plain{background:none;padding-inline:0;color:var(--fg-3)}
.chip b{color:var(--fg);font-weight:500}
/* ---- state legend · no background, just swatches ------------------------- */
.legend{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:baseline}
.legend .st{display:block;font-size:var(--fs-cap);line-height:1.4;color:var(--fg-2);
padding-left:22px;text-indent:-22px}
.legend .st>i{display:inline-block;width:11px;height:11px;margin-right:11px;
border-radius:1px;background:var(--swatch-off);vertical-align:0}
.legend .st.ship>i{background:var(--mint)} .slide.dark .legend .st.ship>i{background:var(--mint-hi)}
.legend .st.dev>i{background:var(--amber)} .slide.dark .legend .st.dev>i{background:var(--amber-hi)}
.legend .st.ext>i{background:var(--violet)} .slide.dark .legend .st.ext>i{background:var(--violet-hi)}
.legend .st.risk>i{background:var(--rose)} .slide.dark .legend .st.risk>i{background:var(--rose-hi)}
.legend .st.planned>i{background:none;box-shadow:inset 0 0 0 1.5px var(--risk-solid)}
.legend .st.proto>i{background:none;box-shadow:inset 0 0 0 1.5px var(--fg-3)}
.legend .st b{color:var(--fg);font-weight:600}
/* ---- marked list --------------------------------------------------------- */
.pts{list-style:none;display:flex;flex-direction:column;gap:17px}
.pts>li{font-size:var(--fs-body);line-height:1.5;color:var(--fg-2);min-width:0;
padding-left:23px;text-indent:-23px}
.pts>li::before{content:"";display:inline-block;width:7px;height:7px;
margin-right:16px;border-radius:1px;background:var(--accent-solid);
vertical-align:.14em}
.pts>li b{color:var(--fg);font-weight:600}
.pts.sm>li{font-size:var(--fs-sm);line-height:1.48}
.pts.sm>li::before{width:6px;height:6px;margin-right:17px}
.pts.tight{gap:11px}
.pts.loose{gap:26px}
.pts.ruled{gap:0}
.pts.ruled>li{border-top:1px solid var(--line);padding:17px 0 17px 23px}
.pts.ruled>li:first-child{border-top:0;padding-top:0}
.pts.off>li::before{background:var(--swatch-off)}
/* ---- hairline stack ------------------------------------------------------- */
.rail{border-left:1px solid var(--line);padding-left:var(--rail-pad,34px);
display:flex;flex-direction:column;gap:22px;min-width:0}
.rail.accent{border-left-color:var(--accent-solid)}
.rail.thick{border-left-width:2px}
/* ---- two-tone callout · wash | surface, no border ----------------------- */
.note{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
border-radius:var(--r-2);overflow:hidden;min-width:0}
.note>*{padding:26px 30px;min-width:0}
.note>*:first-child{background:var(--accent-wash)}
.note>*:last-child{background:var(--ground-2)}
.note h4{color:var(--accent);margin-bottom:11px}
.note h3{margin-bottom:11px}
.note p{font-size:var(--fs-sm);line-height:1.55}
.note.one{grid-template-columns:minmax(0,1fr)}
.note.one>*:first-child{background:var(--accent-wash)}
.note.flip>*:first-child{background:var(--ground-2)}
.note.flip>*:last-child{background:var(--accent-wash)}
.note.tall>*{padding:32px 34px}
/* ---- framed capture ------------------------------------------------------
The one place a frame is load-bearing: a screenshot with no boundary floats.
Hairline via outline (paints above the media) + elevation, radius 5px. */
.plate{position:relative;display:block;margin:0;min-width:0;
background:var(--ground-2);border-radius:var(--r-2);overflow:hidden;
outline:1px solid var(--plate-edge);outline-offset:-1px;box-shadow:var(--elev)}
.plate>img,.plate>video{display:block;width:100%;height:100%;
object-fit:cover;object-position:var(--pos,50% 0%)}
.plate.contain>img,.plate.contain>video{object-fit:contain;background:var(--ground-2)}
.plate.ar{aspect-ratio:var(--ar,1.596)}
/* Absorb the slack in a flex column, stretch in a grid cell. height:100% would
resolve against the whole container and push a sibling caption out of frame. */
.plate.grow{flex:1 1 auto;min-height:0;align-self:stretch}
/* every