/* Laboratory edition. Shared type and article layouts live in style.css. */
:root { --paper:#0c1215; --paper-2:#111c20; --paper-3:#1b2b30; --rule:#2b3c40; --rule-soft:#1d2d32; --ink:#edf5ed; --ink-dim:#a6bab7; --ink-faint:#829994; --accent:#a9edc6; --accent-strong:#ceffdf; --accent-deep:#58ad87; --violet:#b2a2eb; --wide:82rem; --radius:16px; }
:root[data-theme="light"] { --paper:#f4f5ec; --paper-2:#eaf0e7; --paper-3:#dce7dc; --rule:#c4d3c8; --rule-soft:#d9e2d7; --ink:#172c2a; --ink-dim:#49645b; --ink-faint:#587267; --accent:#246649; --accent-strong:#174b35; --accent-deep:#398261; --violet:#7252aa; }
::selection { background:var(--accent); color:var(--paper); }
.skip-link { position:fixed; top:-5rem; left:1rem; z-index:100; background:var(--accent); color:var(--paper); padding:1rem; }
.skip-link:focus { top:1rem; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.landing header.site { background:color-mix(in srgb,var(--paper) 94%,transparent); }
.landing .nav { height:80px; }
.landing .brand .mark { color:var(--accent); }
.landing .nav-links { gap:1.8rem; }
.landing .hero { padding:5.5rem 0 4rem; position:relative; }
.landing .hero:before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 85% 30%,#7bb39b16,transparent 60%); }
.landing .hero-grid { grid-template-columns:1.08fr 1fr; gap:4rem; }
.landing h1 { font-size:clamp(3.5rem,6.2vw,5.9rem); line-height:.98; letter-spacing:-.045em; }
.landing .hero h1 { margin:1.5rem 0; }
.landing .hero h1 .u { text-decoration:none; }
.landing .hero .tagline { font-family:var(--sans); font-size:1rem; font-style:normal; color:var(--accent); }
.landing .hero .lede { max-width:44ch; font-size:1rem; margin:1.2rem 0 1.8rem; }
.landing .kicker { font-size:.66rem; letter-spacing:.14em; }
.landing .btn { border-radius:6px; font-size:.79rem; }
.landing .btn-primary { background:var(--accent); color:var(--paper); border-color:var(--accent); }
.lab-instrument { border:1px solid var(--rule); border-radius:16px; padding:1.5rem 1.8rem 1rem; background:linear-gradient(140deg,var(--paper-2),var(--paper)); box-shadow:0 30px 90px #0002; position:relative; }
.instrument-top,.instrument-bottom { display:flex; justify-content:space-between; gap:1rem; font-family:var(--mono); font-size:.57rem; color:var(--ink-dim); letter-spacing:.04em; }
.instrument-top { padding-bottom:1.3rem; border-bottom:1px solid var(--rule); }
.instrument-top i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:5px; box-shadow:0 0 12px var(--accent); }
.lab-equation { font-family:var(--serif); font-size:clamp(2rem,3.7vw,3.5rem); text-align:center; padding-top:1.2rem; }
.lab-equation span { color:var(--violet); font-size:.65em; }
.instrument-note { color:var(--ink-dim); font-size:.76rem; text-align:center; }
.landing .sieve-fig { margin:1.3rem 0; padding:0; background:none; border:0; box-shadow:none; }
.landing .sieve-fig figcaption { font-size:.53rem; align-items:center; }
button,select,input { font:inherit; }
#sieve-pause { background:none; color:var(--ink-dim); border:0; padding:5px; cursor:pointer; font-size:.62rem; }
.lab-controls { display:flex; align-items:center; justify-content:space-between; font-size:.75rem; border-top:1px solid var(--rule); padding-top:1rem; }
select { background:var(--paper-3); color:var(--ink); border:1px solid var(--rule); border-radius:5px; padding:.35rem .5rem; }
#lab-result { text-align:center; padding:1rem 0; }
.lab-proof,#lab-result p { font: .72rem var(--mono); color:var(--ink-dim); }
.lab-split { font:2.5rem var(--serif); color:var(--accent); padding:.5rem; }
.lab-split span { color:var(--ink-faint); padding:0 .2rem; }
.instrument-bottom { border-top:1px solid var(--rule); padding-top:1rem; font-size:.52rem; align-items:center; }
.discovery-strip { display:grid; grid-template-columns:repeat(3,1fr); padding-bottom:2.5rem; gap:2rem; }
.discovery-strip a { border-top:1px solid var(--rule); padding-top:1rem; color:var(--ink); font-family:var(--serif); font-size:1.3rem; }
.discovery-strip span { display:block; font: .6rem var(--mono); color:var(--ink-dim); margin-bottom:.6rem; letter-spacing:.09em; }
.landing .chapter { padding:5rem 0; }
.landing h2 { font-size:clamp(2.4rem,4.5vw,3.7rem); letter-spacing:-.035em; }
.landing .chapter-head h2 { max-width:24ch; }
.landing .chapter-head .section-lede { font-size:1rem; max-width:66ch; }
.landing .panel { border-radius:12px; }
#benchmarks { background:var(--paper-2); }
.bench-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.bench-heading .chapter-head { margin:0; }
.bench-stamp { font: .65rem var(--mono); border:1px solid var(--rule); border-radius:50%; width:100px; height:100px; display:grid; place-content:center; text-align:center; flex-shrink:0; color:var(--accent); transform:rotate(8deg); }
.bench-stamp strong { font-size:1.7rem; color:var(--accent); }
.benchmark-card { background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:1.7rem; }
.bench-toolbar { display:flex; justify-content:space-between; gap:1rem; align-items:center; font: .68rem var(--mono); color:var(--ink-dim); }
.series-legend { display:flex; gap:1.3rem; }
.series-legend span:before { content:""; display:inline-block; width:22px; border-top:2px solid var(--accent); margin:0 .5rem .2rem 0; }
.series-legend .before:before { border-color:var(--violet); border-top-style:dashed; }
.bench-scale { display:flex; gap:3px; background:var(--paper-2); padding:4px; border:1px solid var(--rule); border-radius:6px; }
.bench-scale button { border:0; border-radius:3px; padding:.4rem .65rem; cursor:pointer; background:transparent; color:var(--ink-dim); }
.bench-scale button[aria-pressed="true"] { background:var(--paper-3); color:var(--accent); }
.comparison-plot { width:100%; display:block; touch-action:pan-y; margin:1.2rem 0; }
.comparison-plot text { fill:var(--ink-dim); font:11px var(--mono); }
.comparison-plot .grid { stroke:var(--rule); stroke-width:1; }
.comparison-plot .series { fill:none; stroke-width:2.5; stroke-linejoin:round; }
.comparison-plot .before-line { stroke:var(--violet); stroke-dasharray:6 5; }
.comparison-plot .now-line { stroke:var(--accent); }
.comparison-plot .selection { stroke:var(--ink-faint); stroke-dasharray:3 5; }
.comparison-plot .now-dot { fill:var(--accent); }
.comparison-plot .before-dot { fill:var(--violet); }
.benchmark-readout { display:grid; grid-template-columns:repeat(4,1fr); padding:1rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); gap:1rem; }
.benchmark-readout span { display:block; font:.6rem var(--mono); color:var(--ink-dim); text-transform:uppercase; letter-spacing:.08em; margin-bottom:.4rem; }
.benchmark-readout strong { font:clamp(1.3rem,2.5vw,2rem) var(--mono); }
#read-now,#read-change { color:var(--accent); }
#read-before { color:var(--violet); }
.scrubber { display:flex; align-items:center; gap:1rem; margin-top:1.2rem; font:.65rem var(--mono); color:var(--ink-dim); }
.scrubber input { width:100%; accent-color:var(--accent); cursor:ew-resize; }
.bench-footnote { display:flex; justify-content:space-between; gap:2rem; margin:1.3rem 0 0; font-size:.74rem; color:var(--ink-dim); }
.bench-footnote p { max-width:75ch; }
.landing .rig { margin:1.5rem 0; gap:.6rem; }
.landing .chip { border-radius:4px; font-size:.64rem; }
.landing .record-digits { color:var(--violet); }
.landing .deeds { display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; }
.landing .deed { border-top:1px solid var(--rule); }
.landing .record-stage { border-radius:16px; }
@media(max-width:900px) { .landing .hero-grid { grid-template-columns:1fr; gap:2.5rem; } .landing .hero { padding-top:3rem; } .landing h1 { font-size:clamp(3.6rem,10vw,5.6rem); } .lab-instrument { max-width:650px; width:100%; } .landing .nav-links { gap:1rem; } }
@media(max-width:600px) { .landing .nav { height:65px; } .landing .chapter { padding:3rem 0; } .discovery-strip { grid-template-columns:1fr; gap:1rem; } .discovery-strip a { font-size:1.2rem; } .discovery-strip span { display:inline-block; margin:0 1rem 0 0; } .lab-instrument { padding:1.2rem; } .bench-stamp { display:none; } .benchmark-card { padding:1rem; } .bench-toolbar { align-items:flex-start; font-size:.6rem; } .series-legend { gap:.6rem; } .bench-scale button { padding:.3rem; } .benchmark-readout { grid-template-columns:1fr 1fr; } .bench-footnote { flex-direction:column; gap:.3rem; } .landing .deeds { grid-template-columns:1fr; } .instrument-top { font-size:.5rem; } .chart-data summary { max-width:100%; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
.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; }
.landing .hero { padding-top:3.5rem; }
.landing .hero-grid { align-items:start; }
.landing .hero-copy { padding-top:1rem; }
.copy-code { display:block; margin:0 0 .5rem auto; padding:.3rem .65rem; background:var(--paper-3); border:1px solid var(--rule); border-radius:5px; color:var(--ink-dim); font:.65rem var(--mono); cursor:pointer; }
.image-zoom { display:block; border:0; padding:0; background:none; width:100%; cursor:zoom-in; border-radius:inherit; }
.image-zoom img { display:block; width:100%; }
.image-dialog { max-width:95vw; max-height:95vh; border:1px solid var(--rule); background:var(--paper); color:var(--ink); padding:1rem; border-radius:12px; }
.image-dialog::backdrop { background:#000c; backdrop-filter:blur(5px); }
.image-dialog img { display:block; max-width:88vw; max-height:78vh; object-fit:contain; }
.image-dialog button { display:block; margin:0 0 .75rem auto; background:var(--paper-3); color:var(--ink); border:1px solid var(--rule); border-radius:4px; padding:.4rem .7rem; cursor:pointer; }
.image-dialog p { font-size:.8rem; margin-top:.75rem; max-width:80ch; }
@media(max-width:600px) { .landing .hero { padding-top:2rem; } .lab-equation { font-size:2.6rem; } }
.scrubber input { min-height:36px; }
.bench-scale button { min-height:36px; }
@media(max-width:600px) { .comparison-plot text { font-size:16px; } }