:root { --paper:#F3EBDD; --paper-deep:#E2D7C3; --ink:#191814; --ink-muted:#625D53; --rule:#B7AC98; --signal:#B93824; --focus:#005FCC; --gutter-left:72px; --gutter-right:72px; }
* { box-sizing:border-box; }
html { color:var(--ink); background:var(--paper); }
body { margin:0; font:1rem/1.55 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, [role="slider"]:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.site-header, main { max-width:1440px; margin:auto; padding-left:var(--gutter-left); padding-right:var(--gutter-right); }
.site-header { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:32px; border-bottom:1px solid var(--rule); }
.brand,.eyebrow,.fine-control label { font-size:.72rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }
.site-header p { margin:0; color:var(--ink-muted); }
.experience { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(220px,3fr); gap:48px; padding-block:48px 72px; }
.editorial { align-self:center; }
.eyebrow { margin:0 0 20px; color:var(--ink-muted); }
h1,h2 { font-family:ui-serif,Charter,"Bitstream Charter","Iowan Old Style","Palatino Linotype",Georgia,serif; font-weight:400; }
h1 { max-width:7ch; margin:0; font-size:clamp(3.5rem,8vw,8.5rem); line-height:.9; letter-spacing:-.045em; }
.duration { display:block; margin-top:32px; font:1.25rem/1.2 ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums; }
.comparison { max-width:34rem; margin:20px 0 0; font-size:1.125rem; }
.invitation { margin:48px 0 0; max-width:26rem; font-family:ui-serif,Georgia,serif; font-size:1.25rem; }
.helper { color:var(--ink-muted); max-width:29rem; }
.content-enter { animation:content-in 140ms ease-out; }
@keyframes content-in { from { opacity:.45; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
.instrument { display:grid; justify-items:center; align-content:center; min-width:0; }
.supporting { align-self:start; }
.controls { width:100%; }
.enhance-only { display:none; }
.enhanced .enhance-only { display:block; }
.dial-wrap { width:100%; max-width:min(680px,calc(100vh - 160px)); }
.dial { touch-action:none; cursor:grab; }
.dial:active { cursor:grabbing; }
.dial svg { display:block; width:100%; height:auto; }
.dial-face { fill:var(--paper); stroke:var(--ink); stroke-width:.45; }
.tick { stroke:var(--rule); stroke-width:.36; }
.tick.major { stroke:var(--ink-muted); stroke-width:.55; }
.tick.milestone { stroke:var(--ink); stroke-width:.75; }
.tick.active { stroke:var(--signal); stroke-width:1.15; }
#tick-layer { transition:transform 280ms ease-out; }
.dragging #tick-layer { transition:none; }
.decade-label { fill:var(--ink-muted); font:3px ui-monospace,monospace; text-anchor:middle; dominant-baseline:middle; }
.notch-rule { stroke:var(--rule); stroke-width:.45; }
.index { fill:var(--signal); }
.hub { fill:var(--ink); }
.fine-control { width:min(100%,480px); margin-top:20px; }
.fine-control label { display:block; margin-bottom:8px; }
input[type="range"] { width:100%; min-height:44px; accent-color:var(--signal); }
.scientific { margin:12px 0 0; font-family:ui-monospace,monospace; color:var(--ink-muted); }
.step-controls { display:flex; gap:12px; margin-top:20px; }
button { min-width:44px; min-height:44px; padding:8px 16px; border:1px solid var(--ink); border-radius:999px; color:var(--ink); background:transparent; font:650 .72rem ui-sans-serif,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
button:disabled { border-color:var(--rule); color:var(--ink-muted); cursor:not-allowed; }
.rail { grid-column:3; grid-row:1 / span 2; align-self:stretch; min-width:0; }
.rail ol { margin:0; padding:0; list-style:none; border-left:1px solid var(--rule); }
.rail li { position:relative; padding:8px 12px 8px 20px; border-bottom:1px solid var(--rule); }
.rail li::before { position:absolute; left:-1px; top:0; bottom:0; width:4px; background:var(--signal); content:""; opacity:0; }
.rail li[aria-current="true"] { background:var(--paper-deep); font-weight:700; }
.rail li[aria-current="true"]::before { opacity:1; }
.milestone-link { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; text-decoration:none; }
.milestone-display { color:var(--ink-muted); font: .8rem/1.5 ui-monospace,monospace; white-space:nowrap; }
.milestone-copy { margin:4px 0 0; color:var(--ink-muted); font-size:.82rem; line-height:1.35; }
.method { max-width:720px; padding:32px 0 72px; border-top:1px solid var(--rule); }
.method h2 { margin:0 0 12px; font-size:2rem; }
.method p { max-width:34rem; }
.method li { margin-block:4px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width:1120px) { .instrument { grid-column:2; grid-row:1; } .supporting { grid-column:1; grid-row:2; } .controls { grid-column:2; grid-row:2; align-self:start; } .enhanced .rail li { padding:0 12px 0 20px; } .enhanced .rail li:not([aria-current="true"]) .milestone-copy { display:none; } }
@media (max-width:1119px) { :root { --gutter-left:40px; --gutter-right:40px; } .experience { display:flex; flex-direction:column; max-width:720px; margin:auto; gap:32px; } .editorial { width:100%; } .rail { width:calc(100% + var(--gutter-right)); margin-right:calc(-1 * var(--gutter-right)); } .rail ol { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-left:0; border-top:1px solid var(--rule); } .rail li { flex:0 0 220px; min-height:112px; padding:12px; border-right:1px solid var(--rule); scroll-snap-align:start; } .rail li::before { left:0; right:0; bottom:auto; width:auto; height:4px; } .dial-wrap { width:min(72vw,560px); } .method { max-width:720px; margin:auto; } }
@media (max-width:719px) { :root { --gutter-left:max(20px, env(safe-area-inset-left)); --gutter-right:max(20px, env(safe-area-inset-right)); } .site-header { min-height:80px; align-items:flex-start; flex-direction:column; justify-content:center; gap:4px; padding-block:12px; } .site-header p { font-size:.9rem; } .experience { padding-block:32px 48px; } h1 { font-size:clamp(3.5rem,18vw,4.25rem); } .duration { margin-top:20px; } .invitation { margin-top:32px; } .dial-wrap { width:min(calc(100vw - var(--gutter-left) - var(--gutter-right)),420px); } .rail li { flex-basis:220px; } .method { padding-bottom:48px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:0ms !important; animation-duration:0ms !important; } }
@media print { .enhance-only { display:none !important; } .experience { display:block; } .rail { margin-top:24px; } .rail ol { display:block; border-left:1px solid var(--rule); } .rail li { min-height:0; border-right:0; } .milestone-copy { display:block !important; } .method { break-inside:avoid; } }