/* Onset: event markers, editorial type, and readable evidence. */
:root {
  --paper:#f7f7f7; --surface:#fff; --ink:#172b32; --muted:#52656a;
  --line:#dedede; --accent:#176b62; --accent-wash:#e5f3ef;
  --night:#172b32; --night-line:#3a5059; --aqua:#83e6db; --orange:#ffb58a;
  --body:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --display:Georgia,"Times New Roman",serif;
}
* { box-sizing:border-box; }
html { color-scheme:light; scroll-padding-top:80px; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 var(--body); }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
p { max-width:72ch; }
code { font:.86em var(--mono); color:var(--muted); }
pre { padding:20px; border:1px solid var(--line); overflow-x:auto; background:white; }
pre code { font-size:13.5px; color:var(--ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.skip { position:absolute; left:20px; top:-70px; z-index:8; padding:10px 16px; background:white; }
.skip:focus { top:8px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px max(32px,calc((100vw - 1216px)/2)); border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:5; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; flex-shrink:0; }
.onset-mark { width:30px; height:30px; color:var(--accent); flex-shrink:0; }
.wordmark { font-size:24px; font-weight:750; letter-spacing:-.055em; }
.brand-suffix { font-weight:400; }
nav { display:flex; align-items:center; gap:22px; }
nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); text-decoration:none; font-size:14px; }
nav a.on { color:var(--ink); box-shadow:inset 0 -2px var(--orange); }
nav a:hover { color:var(--accent); }
.github-link { justify-content:center; min-width:44px; }
.github-link img { display:block; width:22px; height:22px; }
.github-link:hover { opacity:.7; }
.mobile-menu .github-link { justify-content:flex-start; }
.mobile-menu { display:none; }
main { max-width:1280px; margin:0 auto; padding:46px 32px 80px; }
h1 { font:400 clamp(38px,4.2vw,58px)/1.08 var(--display); letter-spacing:-.04em; margin:0 0 20px; }
h2 { font:400 32px/1.15 var(--display); letter-spacing:-.03em; margin:44px 0 16px; }
h3 { font-size:18px; line-height:1.4; margin:28px 0 10px; }
h4 { font-size:17px; }
.lede { max-width:64ch; color:var(--muted); font-size:21px; line-height:1.5; margin:0 0 28px; }
.document > p,.document > ul { max-width:78ch; }
.document > h1 { margin-top:10px; }
.document > .lede { margin-bottom:36px; }
.essay { max-width:850px; }
.essay > p { font-size:19px; line-height:1.75; margin:24px 0; }
.essay > h1 { margin-bottom:34px; }
.document section { margin-top:44px; }
section { margin-top:60px; scroll-margin-top:24px; }
.hero { display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; padding:4px 0 38px; }
.hero-copy { min-width:0; }
.hero h1 { font:400 clamp(58px,6.2vw,82px)/.98 var(--display); letter-spacing:-.055em; margin:0 0 28px; }
.hero h1 span { display:block; }
.hero .lede { font-size:21px; line-height:1.45; color:var(--ink); margin-bottom:28px; }
.vision-intro { max-width:850px; padding-top:40px; border-top:1px solid var(--line); }
.vision-intro h2 { margin:0 0 20px; font-size:36px; }
.vision-intro p { margin:0 0 16px; }
.vision-intro a { font-size:14px; display:inline-flex; align-items:center; min-height:44px; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; }
.actions a { min-height:46px; display:inline-flex; align-items:center; font-size:14px; }
.button { background:var(--night); border:1px solid var(--night); color:white; padding:11px 18px; text-decoration:none; border-radius:3px; gap:20px; font-weight:550; }
.button:hover { background:#2b4851; text-decoration:none; }
.button.secondary { color:var(--ink); background:transparent; border-color:#b6c0bd; }
.button.secondary:hover { background:white; }
.provenance { font-size:13px; color:var(--muted); margin:24px 0 0; }
.section-heading { margin-bottom:18px; }
.section-heading h2 { margin:0; font-size:38px; }
.comparison-note { font-size:14px; color:var(--muted); max-width:78ch; margin:0 0 22px; }
.note { color:var(--muted); font-size:15px; }
.detail-link { font-size:14px; margin:20px 0 8px; }
.comparison-details { max-width:84ch; margin:12px 0; }
summary { cursor:pointer; color:var(--accent); min-height:44px; padding:10px 0; font-size:14px; }
.comparison-details p { font-size:15px; }
.result-details { margin:18px 0; padding:0 0 4px; border-top:1px solid var(--line); }
.result-details > summary { color:var(--ink); font-size:15px; padding:14px 0; }
.result-details[open] > summary { color:var(--accent); }
.timing-details { margin:14px 0; }
.timing-details > summary { font-size:14px; }
.timing-details .recovery-chart { margin-top:12px; }
/* Schematic timing only; native controls work without JavaScript. */
.event-study { background:var(--night); color:white; border-radius:8px; margin:0; padding:24px; min-width:0; }
.frame-sequence { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.sequence-frame { background:#1e2d36; border:1px solid var(--night-line); border-radius:3px; padding:10px 8px; }
.frame-time { font:10px var(--mono); color:#bdcbd1; }
.sequence-frame svg { width:100%; height:110px; display:block; margin:2px 0 6px; }
.sequence-frame > span { display:block; font-size:12px; line-height:1.4; }
.rig-line { fill:none; stroke:#77909e; stroke-width:1.5; }
.part { fill:#405661; stroke:#9cb5c2; stroke-width:1.5; }
.tool { fill:#263c48; stroke:#c6d6dd; stroke-width:2; }
.touch-line { fill:none; stroke:var(--orange); stroke-width:3; }
.load-arrow { fill:none; stroke:var(--aqua); stroke-width:2; }
.sequence-note { font-size:12px; color:#c5d1d6; line-height:1.5; margin:12px 0 14px; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
.timing-switch { font-size:0; }
.timing-switch legend { font-size:11px; line-height:1.5; color:#bdcbd1; margin-bottom:8px; }
.switch-input { position:absolute; opacity:0; width:1px; height:1px; }
.timing-switch > label,.recovery-switch > label { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 14px; font:12px var(--mono); cursor:pointer; border:1px solid var(--night-line); margin-right:6px; border-radius:3px; }
.switch-input:focus-visible + label { outline:2px solid var(--accent); outline-offset:4px; }
.event-study .switch-input:focus-visible + label { outline-color:var(--aqua); }
.timing-switch .switch-input:checked + label { color:var(--night); background:var(--aqua); border-color:var(--aqua); }
.timing-canvas { margin-top:16px; }
.timing-axis { display:flex; justify-content:space-between; color:#bdcbd1; font:10px var(--mono); }
.timing-rail { height:38px; position:relative; margin:9px 0 16px; background:repeating-linear-gradient(to right,transparent 0,transparent calc(12.5% - 1px),#35464f calc(12.5% - 1px),#35464f 12.5%); border-block:1px solid var(--night-line); }
.tolerance-band { position:absolute; left:25%; top:0; height:100%; width:50%; background:#83e6db20; border-inline:1px dashed #83e6db85; }
.reference-line { position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--aqua); left:50%; }
.example-prediction { position:absolute; top:12px; left:67.5%; width:12px; height:12px; border:2px solid var(--orange); background:var(--night); transform:rotate(45deg); }
.timing-key,.chart-legend { display:flex; gap:12px 20px; flex-wrap:wrap; font-size:10px; color:#c5d1d6; }
.timing-key span,.chart-legend span { display:inline-flex; align-items:center; gap:7px; }
.timing-key i { width:8px; height:8px; background:var(--aqua); }
.timing-key .key-prediction { background:transparent; border:1px solid var(--orange); transform:rotate(45deg); }
.timing-verdict { font-size:12px; color:var(--aqua); margin:14px 0 0; }
.verdict-100 { color:var(--orange); }
.timing-switch input[value="200"]:checked ~ .timing-canvas .verdict-100,
.timing-switch input[value="100"]:checked ~ .timing-canvas .verdict-200 { display:none; }
.timing-switch input[value="100"]:checked ~ .timing-canvas .tolerance-band { left:37.5%; width:25%; }
.document .event-study { max-width:760px; margin:32px 0; }
.recovery-chart { max-width:850px; padding:24px 28px; margin-bottom:24px; background:white; border:1px solid var(--line); border-radius:6px; }
.chart-header { margin-bottom:20px; }
.chart-header h3 { margin:0 0 10px; font-size:20px; font-weight:550; }
.chart-legend { font-size:12px; color:var(--muted); }
.chart-legend i { width:9px; height:9px; background:var(--accent); }
.chart-legend .missed-key { background:#dce2e6; }
.recovery-switch legend { font-size:11px; color:var(--muted); margin-bottom:7px; }
.recovery-switch > label { min-height:44px; border-color:var(--line); }
.recovery-switch .switch-input:checked + label { background:var(--accent-wash); border-color:var(--accent); color:var(--accent); }
.recovery-panels { margin-top:22px; }
.recovery-switch input[value="200"]:checked ~ .recovery-panels [data-tolerance="±100 ms"],
.recovery-switch input[value="100"]:checked ~ .recovery-panels [data-tolerance="±200 ms"] { display:none; }
.recovery-row + .recovery-row { margin-top:24px; }
.recovery-heading { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:10px; }
.recovery-heading h3 { margin:0; font-size:14px; font-weight:550; }
.recovery-heading > span { font:11px var(--mono); color:var(--muted); }
.recovery-bar { height:16px; background:#dce2e6; border-radius:2px; overflow:hidden; }
.recovery-bar > span { display:block; height:100%; background:var(--accent); }
.recovery-meta { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px 24px; margin-top:8px; font-size:11px; color:var(--muted); }
.recovery-meta b { font:11px var(--mono); color:var(--ink); }
.chart-footnote { max-width:none; margin:18px 0 0; font-size:12px; color:var(--muted); }
.scroll { overflow-x:auto; margin:0; padding:0 0 8px; }
table.board { width:100%; border-collapse:collapse; background:white; border:1px solid var(--line); font-size:14px; overflow:visible; }
table.board th,table.board td { text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; }
table.board th { font-size:12px; font-weight:550; color:var(--muted); background:#eeeeee; white-space:normal; line-height:1.45; }
table.board td:first-child,table.board th:first-child { position:sticky; left:0; z-index:1; min-width:230px; max-width:280px; white-space:normal; background:white; }
table.board th:first-child { background:#eeeeee; }
table.board th.n,table.board td.n { text-align:right; }
table.board td.n { font:14px/1.6 var(--mono); white-space:nowrap; }
table.board th.n { min-width:84px; }
table.board td:last-child { white-space:normal; min-width:96px; }
table.board .key-metric { font-weight:700; }
table.board tbody tr:last-child td { border-bottom:0; }
table.board tbody tr:hover td { background:var(--accent-wash); }
table.board caption { text-align:left; font-size:12px; color:var(--muted); padding:10px 0; }
table.board caption.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
table.narrative td,table.narrative th { white-space:normal; min-width:0; max-width:none; }
table.narrative td:first-child { width:24%; }
table.narrative td:last-child { width:26%; }
.scroll-hint { display:none; font-size:12px; color:var(--muted); margin:0 0 8px; }
.mobile-results { display:none; }
.table-jumps { margin:24px 0; padding:0 18px; border:1px solid var(--line); background:white; border-radius:4px; }
.table-jumps nav { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; padding:0 0 14px; }
.table-jumps nav a { font-size:13px; line-height:1.5; padding:8px 0; }
.download-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:20px; margin:32px 0; }
.download-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:24px; background:white; border:1px solid var(--line); border-radius:4px; }
.download-card h2 { margin:0 0 14px; font-size:28px; }
.download-card p { font-size:15px; }
.download-card > p:first-of-type { flex:1; }
.download-card .download-size { font:13px var(--mono); color:var(--muted); }
.download-checksum { width:100%; margin-top:20px; font-size:13px; }
.download-checksum summary { cursor:pointer; padding:8px 0; }
.download-checksum code { display:block; overflow-wrap:anywhere; white-space:normal; font-size:11px; }
footer { display:flex; justify-content:space-between; align-items:center; gap:28px; padding:30px max(32px,calc((100vw - 1216px)/2)) 44px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
footer p { margin:0; }
.footer-brand { display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--ink); font-size:17px; }
@media (max-width:1050px) {
  nav { gap:16px; }
  .hero { grid-template-columns:.9fr 1.1fr; gap:28px; }
  .hero h1 { font-size:65px; }
  .hero .lede { font-size:19px; }
}
@media (max-width:850px) {
  .desktop-nav { display:none; }
  .mobile-menu { display:block; }
  .mobile-menu summary { min-width:64px; color:var(--ink); text-align:right; }
  .mobile-menu nav { position:absolute; right:24px; top:calc(100% - 1px); width:min(320px,calc(100vw - 48px)); display:grid; gap:0; padding:8px 14px; border:1px solid var(--line); background:white; border-radius:3px; box-shadow:0 8px 20px #17212612; }
  .mobile-menu nav a { min-height:46px; padding:10px 6px; }
  .hero { gap:24px; }
  .hero h1 { font-size:52px; }
  .hero .lede { font-size:18px; }
  .event-study { padding:20px; }
}
@media (max-width:720px) {
  .top { padding:10px 18px; gap:12px; }
  .wordmark { font-size:22px; }
  main { padding:30px 18px 54px; }
  .hero { grid-template-columns:1fr; gap:26px; padding-bottom:26px; }
  .vision-intro { padding-top:28px; }
  .vision-intro h2 { font-size:32px; }
  .hero h1 { font-size:clamp(58px,14vw,76px); margin-bottom:22px; }
  .hero .lede { font-size:20px; max-width:33ch; }
  .event-study { padding:18px; }
  .sequence-frame { padding:9px 6px; }
  .sequence-frame > span { font-size:10px; }
  .timing-key { gap:8px 14px; font-size:9px; }
  .frame-time { font-size:9px; }
  .section-heading { margin-bottom:16px; }
  .section-heading h2 { font-size:33px; }
  section { margin-top:44px; scroll-margin-top:12px; }
  .recovery-chart { padding:20px 18px; }
  .chart-header h3 { font-size:18px; }
  .recovery-heading { flex-direction:column; gap:4px; }
  .recovery-meta { font-size:10px; }
  .desktop-summary { display:none; }
  .mobile-results { display:grid; gap:12px; }
  .result-card { border:1px solid var(--line); border-radius:4px; background:white; padding:18px; }
  .card-title { display:flex; align-items:start; justify-content:space-between; gap:10px; }
  .card-title h3 { font-size:15px; font-weight:550; line-height:1.45; margin:0; }
  .tolerance { font:11px var(--mono); white-space:nowrap; background:var(--accent-wash); color:var(--accent); padding:5px 6px; border-radius:2px; }
  .metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin:18px 0 0; }
  .metrics-grid dt { font-size:11px; line-height:1.5; color:var(--muted); }
  .metrics-grid dd { font:550 18px/1.4 var(--mono); margin:4px 0 0; }
  .metrics-grid div:last-child:nth-child(odd) { grid-column:1/-1; }
  .table-block .scroll-hint { display:block; }
  .table-block table.board td:first-child,.table-block table.board th:first-child { min-width:150px; max-width:170px; }
  .mobile-menu nav { right:18px; width:min(320px,calc(100vw - 36px)); }
  .table-jumps nav { grid-template-columns:1fr; }
  footer { padding:28px 18px; align-items:start; flex-direction:column; gap:18px; }
  .document .lede { font-size:19px; }
}
@media (prefers-reduced-motion:no-preference) {
  .tolerance-band { transition:width .2s ease,left .2s ease; }
}

.top .desktop-nav a { color:var(--muted); }
.top .desktop-nav a:hover,.top .desktop-nav a.on { color:var(--accent); }
.top .mobile-menu summary { color:var(--ink); }
.top :focus-visible { outline-color:var(--accent); }
.footer-brand .onset-mark { color:var(--accent); }
.hero .actions { gap:12px 24px; }
.hero .actions > a:not(.button) { color:var(--ink); }
.event-sequence { padding:28px; }
.event-sequence .sequence-frame { padding:14px 12px; }
.event-sequence .sequence-frame svg { height:164px; margin:8px 0 12px; }
.event-sequence .sequence-frame > span { font-size:14px; }
.event-sequence .frame-time { font-size:11px; }
.event-sequence .sequence-note { margin:20px 0 0; font-size:14px; max-width:50ch; }
@media (max-width:1050px) {
  .event-sequence .sequence-frame { padding:12px 8px; }
  .event-sequence .sequence-frame svg { height:132px; }
}
@media (max-width:720px) {
  .event-sequence { padding:18px; }
  .event-sequence .sequence-frame { padding:10px 6px; }
  .event-sequence .sequence-frame svg { height:112px; }
  .event-sequence .sequence-frame > span { font-size:12px; }
  .event-sequence .frame-time { font-size:10px; }
  .event-sequence .sequence-note { font-size:14px; margin-top:16px; }
  .metrics-grid dd { font-size:16px; font-weight:400; }
  .metrics-grid > div:first-child dd { font-size:22px; font-weight:600; }
}
.benchmark-action { padding:32px; background:var(--accent-wash); border-radius:6px; }
.benchmark-action h2 { margin:0 0 16px; }
.benchmark-action p { margin:0 0 24px; }
@media (max-width:720px) {
  .benchmark-action { padding:24px; }
}