:root{--sans:"Inter",ui-sans-serif,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--serif:"Source Serif 4",Georgia,serif;--bg:#07080b;--fg:#e9eaee;--mut:#8b90a0;--line:rgba(255,255,255,.07);--steel:#9fb3c8;--cream:#f3efe6;--wit:#f0a08c;--ok:#8fd3b4;--ask:#e6c37a}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
#grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(159,179,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(159,179,200,.07) 1px,transparent 1px);background-size:26px 26px}
#ascii{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block}
#glow{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;filter:blur(28px) saturate(1.25);opacity:.8;transform:translateZ(0)}
#far{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;filter:blur(1.2px);opacity:.42}
#near{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;filter:blur(.4px);opacity:.9;pointer-events:none}
#glass{position:fixed;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none}
#scrim{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(620px 380px at 50% 50%,rgba(7,8,11,.88),rgba(7,8,11,.4) 66%,transparent 100%)}
.nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 48px;font-size:14px}
.logo{font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}.logo .mark{display:grid;grid-template-columns:repeat(3,7px);gap:1px}.logo .mark i{display:block;width:7px;height:7px;background:var(--steel);border-radius:1px;opacity:.9}.logo .mark i:nth-child(2),.logo .mark i:nth-child(4),.logo .mark i:nth-child(9){opacity:.35}
.links{display:flex;gap:28px;color:var(--mut)}.links a:hover{color:var(--fg)}
.btn{font-size:13.5px;padding:9px 14px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;font-weight:500;border:1px solid var(--line);background:rgba(255,255,255,.04)}.btn.p{background:var(--fg);color:#07080b;border-color:var(--fg)}
.hero{position:relative;z-index:2;min-height:calc(100vh - 62px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px 100px}
.plate{position:relative;width:min(820px,100%);padding:40px 48px 32px;border-radius:24px;display:flex;flex-direction:column;align-items:center}
.lemma{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--mut);max-width:64ch;margin:26px 0 0;display:flex;gap:12px;align-items:flex-start;text-align:left}
.lemma .bar{flex:0 0 2px;width:2px;height:34px;background:linear-gradient(180deg,var(--ok),transparent);margin-top:2px;border-radius:2px}
.lemma i{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--cream)}.lemma sub{font-size:9px;margin:0 1px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.kicker i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);display:inline-block;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font-size:62px;line-height:1.04;letter-spacing:-.035em;font-weight:500;margin:22px 0 16px;max-width:16ch}
h1 .g{background:linear-gradient(90deg,#f3efe6 0%,#b7c6dc 45%,#b7a7f0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.math-unused{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--cream);margin:0 0 20px;opacity:.9}.math sub{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--steel);margin:0 2px}.math .q{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--mut);margin-left:14px;letter-spacing:.04em}
.sub{font-size:18px;line-height:1.5;color:#c7ccd6;max-width:50ch;margin:0 0 30px}
.box{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:rgba(10,11,15,.85);backdrop-filter:blur(10px);border-radius:14px;padding:10px 10px 10px 18px;font-family:var(--mono);font-size:13.5px;box-shadow:0 30px 80px -40px rgba(159,179,200,.35)}
.box span{color:var(--fg)}.box .k{color:var(--mut);font-size:11px;margin-left:auto;padding-right:6px}
.slash{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center}.slash a{font-family:var(--mono);font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:rgba(10,11,15,.7)}.slash a:hover{color:var(--fg)}
.stats{display:flex;gap:44px;margin-top:40px;font-family:var(--mono);font-size:12px;color:var(--mut)}.stats b{display:block;font-family:var(--sans);font-size:22px;letter-spacing:-.02em;color:var(--fg);margin-bottom:4px;font-weight:600}
.reveal{opacity:0;transform:translateY(14px);animation:up .8s cubic-bezier(.2,.7,.2,1) forwards}
.reveal:nth-child(2){animation-delay:.1s}.reveal:nth-child(3){animation-delay:.2s}.reveal:nth-child(4){animation-delay:.3s}.reveal:nth-child(5){animation-delay:.4s}.reveal:nth-child(6){animation-delay:.5s}.reveal:nth-child(7){animation-delay:.6s}
@keyframes up{to{opacity:1;transform:none}}
@media (max-width:960px){h1{font-size:40px}.links{display:none}.stats{gap:22px;flex-wrap:wrap;justify-content:center}}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center;text-align:left;max-width:1240px;margin:0 auto;padding:60px 48px 100px;justify-items:start}
.hero h1{font-size:64px;max-width:12ch}.sub{font-size:18px;max-width:44ch;margin:6px 0 26px}.stats{grid-column:1/-1;justify-content:flex-start;margin-top:30px}.cert{width:100%;max-width:460px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,16,.72);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 40px 90px -50px rgba(0,0,0,.9);overflow:hidden;font-family:var(--mono);font-size:12px;line-height:1.7;justify-self:end}.cert .hd{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--mut);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.cert pre{margin:0;padding:14px 16px;white-space:pre-wrap;color:#c7ccd6}.cert .w{color:var(--wit)}.cert .k{color:var(--steel)}.cert .n{color:var(--ask)}#scrim2{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,8,11,.9) 0%,rgba(7,8,11,.55) 45%,rgba(7,8,11,.2) 70%,transparent 100%)}

/* q4's phone block, moved below the unconditional q4 rules it was written to override: in q4 it came first, so the 64 px headline, the 460 px certificate and the side scrim won on phones too, and "Deterministic" ran 30 px past its column */
@media (max-width:960px){.hero{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 20px 64px;justify-items:stretch}.hero h1{font-size:36px;letter-spacing:-.03em;max-width:none}.sub{font-size:16px;max-width:none}.cert{max-width:none;justify-self:stretch;font-size:11px}.cert pre{padding:12px;white-space:pre-wrap;word-break:break-word}.stats{flex-wrap:wrap;gap:18px 28px;margin-top:8px}.nav{padding:14px 16px}.nav .btn{padding:8px 11px;font-size:12.5px}.logo{font-size:14px}#scrim2{background:linear-gradient(180deg,rgba(7,8,11,.92) 0%,rgba(7,8,11,.75) 60%,rgba(7,8,11,.35) 100%)}}
/* ---- below the hero: the q4 rules above are the hero's, verbatim; everything under this line is the sections' ---- */
/* the koi canvases are fixed behind the hero; the sections are an opaque sheet on the same 14 px grid, so the fish never show below the hero */
.below{position:relative;z-index:2;background-color:var(--bg);background-image:linear-gradient(rgba(159,179,200,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(159,179,200,.055) 1px,transparent 1px);background-size:14px 14px;background-position:0 0}
.below::before{content:"";position:absolute;left:0;right:0;top:-140px;height:140px;background:linear-gradient(180deg,rgba(7,8,11,0),var(--bg));pointer-events:none}
.sec{max-width:1240px;margin:0 auto;padding:96px 48px;position:relative}
.sec+.sec{border-top:1px solid rgba(255,255,255,.08)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);display:inline-flex;gap:10px;align-items:center}
.eyebrow::before{content:"";width:14px;height:1px;background:var(--steel);opacity:.6}
.sec h2{font-size:40px;line-height:1.08;letter-spacing:-.03em;font-weight:500;margin:16px 0 12px;max-width:22ch}
.lede{font-size:16.5px;line-height:1.55;color:#c7ccd6;max-width:60ch;margin:0}
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-bottom:44px}
.fig{display:block;width:336px;height:196px}
.rim{border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(10,12,16,.6)}
.glass{background:rgba(10,12,16,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
code,.mono{font-family:var(--mono)}

/* counters */
.counters{max-width:none;padding:0;border-bottom:1px solid rgba(255,255,255,.08)}
.counters .row5{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.ctr{padding:34px 24px 30px;border-left:1px solid rgba(255,255,255,.08)}
.ctr:first-child{border-left:0}
.ctr .v{font-size:34px;letter-spacing:-.03em;font-weight:600;color:var(--fg);line-height:1}
.ctr .v small{font-size:15px;font-weight:500;color:var(--mut);letter-spacing:-.01em;margin-left:6px}
.ctr .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:14px 0 6px}
.ctr p{margin:0;font-size:13.5px;line-height:1.5;color:var(--mut)}

/* cards */
.cards{display:grid;gap:16px}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{padding:24px 24px 22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--steel);display:flex;justify-content:space-between;gap:10px}
.tag .w{color:var(--wit)}.tag .ok{color:var(--ok)}.tag .ask{color:var(--ask)}
.card h3{font-size:19px;letter-spacing:-.02em;font-weight:500;margin:0;line-height:1.3}
.card p{margin:0;font-size:14.5px;line-height:1.55;color:#b9bfcb}
.ex{margin-top:auto;font-family:var(--mono);font-size:12px;line-height:1.6;color:#c7ccd6;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;overflow-wrap:anywhere}
.ex .w{color:var(--wit)}.ex .ok{color:var(--ok)}.ex .ask{color:var(--ask)}.ex .k{color:var(--steel)}
.ex b{font-weight:500;color:var(--fg)}

/* benchmark */
.bench{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:stretch}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:400;text-align:right;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.06);text-align:right;font-variant-numeric:tabular-nums;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .en{font-weight:500;color:var(--fg)}.tbl .en small{display:block;font-family:var(--mono);font-size:11px;color:var(--mut);font-weight:400;margin-top:4px}
.tbl .num{font-size:18px;letter-spacing:-.02em;color:var(--fg)}
.tbl .d{display:block;font-family:var(--mono);font-size:11px;margin-top:3px}.tbl .d.up{color:var(--ok)}.tbl .d.dn{color:var(--wit)}
.tbl tr.ours td{background:rgba(143,211,180,.04)}
.tbl tr.ours .en{color:var(--cream)}
.tbl-wrap{overflow:hidden}
.caveat{font-family:var(--mono);font-size:12px;line-height:1.65;color:var(--mut);padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);margin:0}
.bars{padding:22px 22px 18px;display:flex;flex-direction:column;gap:16px}
.bars h3{margin:0;font-size:15px;font-weight:500;letter-spacing:-.01em}
.bar{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) 4.2em;gap:12px;align-items:center;font-size:13px;color:#c7ccd6}
.bar .track{height:14px;border:1px solid rgba(255,255,255,.08);border-radius:3px;overflow:hidden;background:rgba(255,255,255,.02)}
.bar .fill{height:100%;width:var(--w);background:repeating-linear-gradient(90deg,var(--c) 0 13px,transparent 13px 14px);opacity:.85;transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .2s}
.bar .n{font-family:var(--mono);font-size:12px;text-align:right;color:var(--fg)}
.rv.in .bar .fill,html:not(.js) .bar .fill{transform:none}
.bars p{margin:0;font-size:13px;line-height:1.55;color:var(--mut)}

/* quick start */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.step{padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.step .no{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--steel)}
.step h3{margin:0;font-size:17px;font-weight:500;letter-spacing:-.02em}
.step p{margin:0;font-size:14px;line-height:1.5;color:#b9bfcb}
.term{margin:auto 0 0;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(5,6,9,.85);padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.65;color:#c7ccd6;white-space:pre-wrap;overflow-wrap:anywhere}
.term .p{color:var(--mut)}.term .o{color:var(--cream)}.term .w{color:var(--wit)}.term .ok{color:var(--ok)}
.docker{margin-top:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--mut)}
.docker code{color:#c7ccd6;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:7px 11px;background:rgba(10,12,16,.7);overflow-wrap:anywhere}

/* paper */
.paper{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;padding:40px}
.paper h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:34px;letter-spacing:-.01em;line-height:1.15;max-width:30ch;margin:14px 0 14px;color:var(--cream)}
.paper .by{font-family:var(--mono);font-size:12px;color:var(--mut);margin-top:18px}
.paper .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* footer */
.foot{max-width:1240px;margin:0 auto;padding:40px 48px 56px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);font-size:13.5px;color:var(--mut)}
.foot .fl{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}
.foot .fl a:hover{color:var(--fg)}
.foot .wm{display:flex;flex-direction:column;gap:10px}

/* the section reveal: only when the script runs, never on the hero (its .reveal is q4's own load animation) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{transform:none;transition:opacity .3s}.bar .fill{transition:none}}

@media (max-width:1100px){.counters .row5{grid-template-columns:repeat(3,minmax(0,1fr))}.ctr:nth-child(4){border-left:0}.ctr:nth-child(n+4){border-top:1px solid rgba(255,255,255,.08)}.bench{grid-template-columns:minmax(0,1fr)}}
@media (max-width:960px){
  .sec{padding:64px 20px}.sec h2{font-size:30px}.lede{font-size:15.5px}
  .head{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:28px}.fig{width:252px;height:140px}
  .cards.c3,.steps{grid-template-columns:minmax(0,1fr)}
  .counters .row5{grid-template-columns:repeat(2,minmax(0,1fr))}.ctr{padding:24px 18px}.ctr,.ctr:nth-child(4){border-left:1px solid rgba(255,255,255,.08)}.ctr:nth-child(odd){border-left:0}.ctr:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}.ctr:last-child{grid-column:1/-1}.ctr .v{font-size:28px}
  .paper{grid-template-columns:minmax(0,1fr);padding:26px 20px;gap:24px}.paper h2{font-size:26px}
  .foot{padding:32px 20px 44px}
}
@media (max-width:640px){
  .tbl{font-size:13px}.tbl th{padding:10px 8px;font-size:10px;letter-spacing:.06em}.tbl td{padding:12px 8px}.tbl .num{font-size:15px}.tbl .en small{font-size:10px}
  .tbl th:first-child,.tbl td:first-child{padding-left:14px}.tbl th:last-child,.tbl td:last-child{padding-right:14px}
  .caveat{padding:12px 14px}.bar{grid-template-columns:minmax(0,7.5em) minmax(0,1fr) 3.6em;gap:8px}
}