@font-face{font-family:Archivo;src:url('assets/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url('assets/archivo-600.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--bg:#080808;--ink:#f5f5f2;--muted:#a2a2a2;--line:#303030;--surface:#111;--font:Archivo,Helvetica,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--space:clamp(22px,5vw,80px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px;scrollbar-color:#666 var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:#eee;color:#080808}
a{color:inherit;text-decoration:none;text-underline-offset:5px}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
svg{fill:none;stroke:currentColor;stroke-width:1.4;width:20px;height:20px}
code{font-family:var(--mono);font-size:.92em}
h1,h2,h3,p,figure{margin:0}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--space)}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:10px;left:10px;background:var(--ink);color:var(--bg);padding:12px 20px;z-index:10;transform:translateY(-150%)}
.skip:focus{transform:translateY(0)}

/* Masthead */
.masthead{height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;font-size:23px;letter-spacing:-.03em}
.brand svg{width:35px;height:35px}
.brand-light{color:#999;font-size:17px;letter-spacing:-.01em}
.masthead nav{display:flex;align-items:center;gap:36px;font-size:13px}
.masthead nav a{color:#b5b5b5}
.masthead nav a:hover{color:var(--ink)}
.nav-github{display:flex;gap:12px;align-items:center}
.nav-github svg{width:15px;height:15px}

/* Hero */
.hero-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;padding-top:68px;padding-bottom:62px}
h1{font-size:clamp(58px,6.7vw,96px);line-height:.99;font-weight:400;letter-spacing:-.04em;text-wrap:balance}
h1 span{color:#9d9d9d}
.hero-copy{width:330px;padding-bottom:4px}
.hero-copy>p:first-child{font-size:19px;line-height:1.4;letter-spacing:-.02em}
.intro{color:var(--muted);font-size:14px;line-height:1.65;margin-top:19px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;padding:15px 20px;min-height:48px;transition:background .2s}
.button:hover{background:#cecece}
.hero-copy .button{margin-top:27px}
.button svg{width:18px;height:18px}

/* Instrument */
.instrument{border-top:1px solid var(--line)}
.instrument-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:24px;font-size:12px}
.replay-label{display:flex;align-items:center;gap:8px}
.signal{width:5px;height:5px;border-radius:50%;background:#ddd;margin-right:4px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.instrument-id{font:11px/1.5 var(--mono);letter-spacing:.05em;color:var(--muted)}
.flow-stage{position:relative;height:460px;margin-top:10px}
canvas{display:block;width:100%;height:100%}
.replay-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0}
.phase-tabs{display:flex;gap:5px}
.phase-tabs button{border:0;background:none;color:#a2a2a2;font-size:12px;padding:11px 18px;min-height:42px;transition:background .2s,color .2s}
.phase-tabs button[aria-pressed=true]{background:#ededeb;color:var(--bg)}
.phase-tabs button:hover:not([aria-pressed=true]){background:#222;color:#fff}
.playback{display:flex;align-items:center;gap:25px;font-size:11px;color:#aaa;font-variant-numeric:tabular-nums}
.playback button{display:flex;align-items:center;gap:7px;background:none;border:0;color:#ddd;min-height:44px;padding:8px}
.playback svg{width:16px;height:16px}
.phase-detail{display:flex;justify-content:space-between;gap:35px;padding-top:24px;align-items:start}
.phase-detail>p{max-width:460px;font-size:13px;color:#b5b5b5;min-height:42px}
.phase-counts{display:flex;gap:28px;font-size:11px;color:var(--muted);white-space:nowrap}
.phase-counts span{display:flex;flex-direction:column;gap:3px}
.phase-counts em{font-style:normal}
.phase-counts strong{font:400 20px/1.2 var(--font);font-variant-numeric:tabular-nums;color:var(--ink)}
.replay-note{font-size:11px;color:#999;margin-top:22px}
.replay-note a{margin-left:10px;text-decoration:underline}
.hero-foot{display:flex;justify-content:space-between;margin-top:43px;padding-bottom:24px;border-bottom:1px solid var(--line);font-size:11px;color:#aaa}
.separator{margin:0 9px;color:#777}
.no-script{padding:20px;font-size:13px}

/* Mechanism */
.mechanism{padding-top:130px;padding-bottom:110px}
.section-lead{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:60px}
h2{font-size:clamp(32px,3.4vw,49px);line-height:1.12;letter-spacing:-.035em;font-weight:400;text-wrap:balance}
h2 span{color:#969696}
.section-lead>p{color:#aaa;font-size:14px;line-height:1.6}
.mechanism-rows{border-top:1px solid var(--line)}
.mechanism-rows article{display:grid;grid-template-columns:75px 1fr 1.4fr 155px;gap:24px;align-items:center;border-bottom:1px solid var(--line);padding:34px 0}
.mechanism-glyph svg{width:55px;height:55px;stroke:#aaa;stroke-width:1}
.mechanism-rows h3{font-size:21px;font-weight:400;letter-spacing:-.025em}
.mechanism-rows p{font-size:13px;color:#aaa;max-width:48ch;line-height:1.75}
.mechanism-rows a{font-size:11px;text-align:right}
.mechanism-rows a:hover,.text-link:hover,footer a:hover{text-decoration:underline}
.inline-arrow{width:12px;height:12px;vertical-align:-2px;margin-left:4px}

/* Study (inverted) */
.evidence{background:#eeeeea;color:#101010}
.evidence-inner{padding-top:86px;padding-bottom:90px;display:grid;grid-template-columns:1fr 1.1fr;gap:90px}
.evidence h2 span{color:#626262}
.evidence h2{margin-bottom:27px}
.evidence p{font-size:14px;max-width:52ch;line-height:1.8}
.evidence p+p{margin-top:14px}
.evidence .evidence-limit{color:#5b5b5b;font-size:12px;margin-top:18px}
.text-link{display:inline-flex;gap:22px;align-items:center;margin-top:30px;font-size:12px;border-bottom:1px solid #777;padding-bottom:9px}
.text-link svg{width:17px;height:17px}
.evidence-table{align-self:center}
.table-title{display:flex;justify-content:space-between;gap:15px;font-size:12px;margin-bottom:22px}
.table-title span:last-child{color:#5b5b5b}
table{border-collapse:collapse;width:100%;text-align:left;font-size:13px;font-variant-numeric:tabular-nums}
td,th{padding:15px 0;border-bottom:1px solid #c6c6c3;font-weight:400;vertical-align:middle}
thead th{color:#626262;font-size:11px;padding-top:0;padding-bottom:12px}
td:last-child,th:last-child{text-align:right}
td:nth-child(2),th:nth-child(2){text-align:center;white-space:nowrap;padding-inline:14px;color:#4a4a4a}
td small,th small{display:block;color:#6b6b6b;font-size:11px;margin-top:3px;font-weight:400}
.bar{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end}
.bar i{display:block;height:3px;background:#111;width:calc(var(--v)*90px);min-width:1px}
.bar.weak i{background:#aaa}
.consensus-mark{font-weight:600}
.evidence-table>p{font-size:11px;color:#626262;margin-top:24px;line-height:1.8;word-break:break-all}
.evidence a:focus-visible{outline-color:#111}

/* Charts */
.charts{padding-top:120px;padding-bottom:100px}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line);padding-top:36px}
figcaption{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
figcaption strong{font-weight:400;font-size:20px;letter-spacing:-.02em}
figcaption span{font-size:13px;color:var(--muted);max-width:52ch}
.chart-grid svg{width:100%;height:auto;stroke-width:1}
.chart-grid text{fill:#8d8d8d;stroke:none;font:10px var(--font)}
.legend{display:flex;gap:22px;font-size:11px;color:var(--muted);margin-top:14px}
.legend span{display:flex;align-items:center;gap:8px}
.shape{display:inline-block;width:6px;height:6px;background:var(--ink)}
.shape.circle{border-radius:50%}
.shape.hollow{background:none;border:1px solid var(--ink)}
.shape.triangle{width:0;height:0;background:none;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid var(--ink)}

/* Ask */
.ask{padding-top:40px;padding-bottom:100px}
.ask-body{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:start}
.ask-steps{margin:0;padding:0;list-style:none;counter-reset:ask}
.ask-steps li{padding:20px 0 20px 40px;border-top:1px solid var(--line);position:relative;counter-increment:ask}
.ask-steps li::before{content:counter(ask);position:absolute;left:0;top:23px;font-size:12px;color:var(--muted)}
.ask-steps h3{font-size:20px;font-weight:400;margin-bottom:8px}
.ask-steps p{font-size:14px;line-height:1.65;color:var(--muted);max-width:48ch}
.terminal{border:1px solid var(--line);background:var(--surface);padding:22px 24px;overflow-x:auto}
.terminal pre{margin:0;font:12px/1.75 var(--mono);color:#d8d8d4;white-space:pre}
.terminal .dim{color:#6d6d6d}
.terminal .ok{color:#f5f5f2}
.terminal-note{font-size:11px;color:#8d8d8d;margin-top:14px;line-height:1.7}

/* Build */
.build{padding-top:40px;padding-bottom:110px}
.build-body{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:start}
.crate-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.crate-list a{display:grid;grid-template-columns:170px 1fr;gap:6px 24px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}
.crate-list a:hover span{color:var(--ink)}
.crate-list code{font-size:12.5px}
.crate-list b{font-weight:400;line-height:1.7}
.crate-list span{color:var(--muted);line-height:1.6;transition:color .2s}

/* Closing */
.closing{padding-top:100px;padding-bottom:105px;text-align:center;border-top:1px solid var(--line)}
.closing-mark svg{width:46px;height:46px;stroke-width:1;margin-bottom:28px}
.closing h2{font-size:clamp(38px,4.3vw,62px)}
.closing .button{margin-top:33px}
.closing>p{font-size:11px;color:#999;margin-top:20px}
footer{border-top:1px solid var(--line);padding-top:25px;padding-bottom:30px;display:flex;justify-content:space-between;gap:24px;font-size:11px}
footer p{color:#999}
footer .muted{margin-left:8px}

@media(min-width:1500px){.flow-stage{height:500px}}
@media(max-width:1000px){.hero-heading{gap:30px}.hero-copy{width:280px}.flow-stage{height:420px}.mechanism-rows article{grid-template-columns:55px 1fr 1.4fr;gap:20px}.mechanism-rows a{grid-column:3;text-align:left}.evidence-inner{gap:45px}.section-lead>p{max-width:260px}.phase-counts{gap:16px}.chart-grid{gap:36px}.ask-body{gap:40px}}
@media(max-width:750px){.chart-grid,.ask-body,.build-body{grid-template-columns:1fr}.build{padding-top:76px;padding-bottom:65px}.crate-list a{grid-template-columns:1fr}.charts{padding-top:76px;padding-bottom:60px}.ask{padding-bottom:65px}}
@media(max-width:650px){.masthead{height:80px}.brand{font-size:21px}.brand-light{font-size:14px}.masthead nav>a:not(.nav-github){display:none}.masthead nav{gap:0}.hero-heading{display:block;padding-top:35px;padding-bottom:40px}h1{font-size:clamp(50px,12vw,76px)}.hero-copy{margin-top:30px;width:auto}.hero-copy>p:first-child{font-size:16px}.intro{font-size:13px}.instrument-id{display:none}.flow-stage{height:380px;margin-inline:-12px}.replay-controls{gap:8px;padding:10px 0}.phase-tabs{gap:0;flex:1}.phase-tabs button{padding:10px 8px;font-size:11px;min-height:44px}.playback>span{display:none}.playback button>span{display:none}.phase-detail{flex-direction:column;gap:16px}.phase-counts{width:100%;justify-content:space-between}.hero-foot{gap:16px;line-height:1.7}.mechanism{padding-top:76px;padding-bottom:65px}.section-lead{display:block;margin-bottom:32px}.section-lead>p{font-size:13px;margin-top:22px;max-width:none}.mechanism-rows article{grid-template-columns:45px 1fr;gap:13px 20px;padding:26px 0}.mechanism-glyph{grid-row:1/3;align-self:start}.mechanism-glyph svg{width:40px;height:40px}.mechanism-rows p,.mechanism-rows a{grid-column:2}.evidence-inner{grid-template-columns:1fr;gap:45px;padding-top:60px;padding-bottom:58px}.evidence h2{font-size:34px}td:nth-child(2),th:nth-child(2){display:none}.closing{padding-top:67px;padding-bottom:68px}.closing h2{font-size:37px}footer{flex-wrap:wrap;gap:14px}footer p{order:3;flex-basis:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}