:root { color-scheme: light; --paper:#f0f3f2; --ink:#101412; --muted:#5c6560; --line:#c6ceca; --white:#fbfcfb; --red:#c84032; --teal:#087d77; --blue:#315fd3; --yellow:#e2b52a; }
* { box-sizing:border-box; }
html { max-width:100%; overflow-x:hidden; scroll-behavior:smooth; background:var(--paper); }
body { max-width:100%; overflow-x:hidden; margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 Arial, Helvetica, sans-serif; }
a { color:inherit; text-underline-offset:4px; }
.site-header { height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 32px; border-bottom:1px solid var(--line); background:rgba(240,243,242,.96); position:sticky; top:0; z-index:20; }
.wordmark { display:flex; align-items:center; gap:12px; font-weight:700; text-decoration:none; }
.mark { width:34px; height:34px; display:grid; place-items:center; background:var(--ink); color:var(--white); border-radius:4px; font-size:12px; }
nav { display:flex; gap:24px; font-size:14px; }
nav a { text-decoration:none; }
nav a:hover, nav a:focus-visible { text-decoration:underline; }
.hero { min-height:680px; height:calc(100vh - 72px); max-height:860px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:72px 7vw; }
#fold-field { position:absolute; inset:0; width:100%; height:100%; }
.hero-copy { min-width:0; max-width:100%; position:relative; z-index:2; width:min(650px, 54%); }
.status, .section-label { margin:0 0 18px; color:var(--teal); font:700 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform:uppercase; letter-spacing:0; }
h1 { margin:0; font:400 104px/.86 Georgia, "Times New Roman", serif; letter-spacing:0; }
.lede { max-width:620px; margin:30px 0 0; overflow-wrap:anywhere; font:400 23px/1.38 Georgia, "Times New Roman", serif; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:34px; font-weight:700; }
.primary-action { padding:12px 16px; background:var(--ink); color:var(--white); border-radius:4px; text-decoration:none; }
.primary-action:hover, .primary-action:focus-visible { background:var(--red); }
.field-key { position:absolute; right:32px; bottom:24px; z-index:2; display:flex; gap:16px; font-size:12px; color:var(--muted); }
.field-key span { display:flex; align-items:center; gap:6px; }
.field-key i { width:20px; height:3px; display:block; }
.key-source { background:var(--teal); }.key-transform { background:var(--red); }.key-output { background:var(--blue); }
.band { padding:84px max(32px, 7vw); border-bottom:1px solid var(--line); }
.definition { display:grid; grid-template-columns:minmax(160px, .55fr) minmax(0, 1.7fr); gap:70px; background:var(--ink); color:var(--white); }
.definition .section-label { color:var(--yellow); }
.definition h2 { max-width:980px; margin:0; font:400 46px/1.08 Georgia, "Times New Roman", serif; letter-spacing:0; }
.definition p:last-child { max-width:720px; margin:28px 0 0; color:#c8cfcb; }
.method { display:grid; grid-template-columns:minmax(240px, .65fr) minmax(0, 1.65fr); gap:70px; }
.section-heading h2 { margin:0; font:400 42px/1.1 Georgia, "Times New Roman", serif; }
.section-heading > p:last-child { max-width:520px; color:var(--muted); }
.invariant-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border-top:1px solid var(--line); }
.invariant { min-height:210px; display:grid; grid-template-columns:40px 1fr; gap:12px; padding:24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.invariant:nth-child(even) { border-right:0; }
.invariant-index { color:var(--red); font:700 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.invariant h3 { margin:0 0 8px; font:400 24px/1.2 Georgia, "Times New Roman", serif; }
.invariant p { margin:0; color:var(--muted); }
.signals { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.signals span { border:1px solid var(--line); border-radius:3px; padding:4px 7px; color:var(--muted); font-size:12px; }
.states { background:var(--white); }
.state-strip { display:grid; grid-template-columns:repeat(5, 1fr); margin-top:40px; border:1px solid var(--line); }
.state-strip > div { min-height:160px; padding:20px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.state-strip > div:last-child { border-right:0; }
.state-strip strong { font-size:13px; }
.state-strip span { color:var(--muted); font-size:13px; }
[data-state="preserved"] strong { color:var(--teal); } [data-state="shifted"] strong { color:#9a6500; } [data-state="dropped"] strong { color:var(--red); } [data-state="introduced"] strong { color:var(--blue); }
.benchmarks { display:grid; grid-template-columns:minmax(240px, .65fr) minmax(0, 1.65fr); gap:70px; }
.benchmark-list { display:grid; gap:14px; }
.benchmark { background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.benchmark-head { display:flex; justify-content:space-between; gap:20px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:12px; text-transform:uppercase; }
.benchmark-head strong { color:var(--teal); }
.benchmark dl { margin:0; display:grid; grid-template-columns:1fr 1fr; }
.benchmark dl > div { padding:18px; border-right:1px solid var(--line); }
.benchmark dl > div:last-child { border-right:0; }
.benchmark dt { margin-bottom:8px; color:var(--muted); font-size:12px; }
.benchmark dd { margin:0; font-family:Georgia, "Times New Roman", serif; }
.benchmark > p { margin:0; padding:14px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.machine-links { grid-column:2; display:flex; flex-wrap:wrap; gap:18px; padding-top:12px; font-size:13px; }
footer { display:flex; justify-content:space-between; gap:24px; padding:28px 32px; color:var(--muted); font-size:12px; }
@media (max-width:900px) { .hero-copy { width:68%; } h1 { font-size:78px; } .method,.benchmarks { grid-template-columns:1fr; } .machine-links { grid-column:1; } .state-strip { grid-template-columns:1fr 1fr; } .state-strip > div { border-bottom:1px solid var(--line); } }
@media (max-width:640px) { .site-header { height:auto; min-height:64px; padding:12px 18px; } nav { display:none; } .hero { min-height:650px; height:calc(100vh - 64px); padding:56px 20px 100px; align-items:flex-start; } .hero-copy { width:100%; } h1 { font-size:64px; } .lede { font-size:20px; } .field-key { left:20px; right:auto; flex-direction:column; gap:6px; } .band { padding:60px 20px; } .definition { grid-template-columns:1fr; gap:22px; } .definition h2,.section-heading h2 { font-size:34px; } .invariant-grid { grid-template-columns:1fr; } .invariant,.invariant:nth-child(even) { border-right:0; } .state-strip { grid-template-columns:1fr; } .state-strip > div { min-height:120px; border-right:0; } .benchmark dl { grid-template-columns:1fr; } .benchmark dl > div { border-right:0; border-bottom:1px solid var(--line); } footer { flex-direction:column; padding:24px 20px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }