:root {
  --acc: #ffffff; --acc2: #d4d4d4; --ink: #f2f2f2; --sub: #9a9a9a; --nav: #787878; --dim: #4a4a4a; --em: #8c8c8c;
  --rgb: 255, 255, 255; --bg: #000; --bg2: rgba(8, 8, 8, 0.88); --line: rgba(255, 255, 255, 0.12);
  --cold: #5c5c5c;
  --sans: "Space Grotesk", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); scroll-behavior: smooth; }
body { color: var(--ink); font: 400 15px/1.6 var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--em); }
button { font: inherit; cursor: pointer; }
::selection { background: #fff; color: #000; }
code { font-family: var(--mono); }

/* bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 30px; padding: 22px clamp(18px, 3.4vw, 48px);
  background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); }
.logo { display: flex; align-items: center; gap: 10px; font: 500 14px/1 var(--mono); letter-spacing: .2em; }
.logo svg { width: 26px; height: 26px; color: var(--acc); }
.rec { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); animation: rec 1.4s infinite; }
@keyframes rec { 50% { opacity: .25; } }
.bar nav { margin-left: auto; display: flex; gap: 26px; font-size: 12px; color: var(--nav); }
.bar nav a:hover { color: var(--ink); }
.pill { display: inline-flex; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(var(--rgb), .42); color: var(--acc); font-size: 12px; transition: background .2s, border-color .2s; }
.pill:hover { background: rgba(var(--rgb), .1); border-color: var(--acc); }

/* hero field */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #000; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .grain { opacity: .28; mix-blend-mode: screen; image-rendering: pixelated; }
.field, .sec, .foot { position: relative; z-index: 1; }
.field { height: 100vh; height: 100svh; min-height: 640px; }
.hero { position: absolute; left: clamp(20px, 3.4vw, 48px); top: 18vh; max-width: 540px; z-index: 2; pointer-events: none; }
.scrollcue { margin-top: 38px; display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--nav); }
.scrollcue span { width: 1px; height: 30px; background: linear-gradient(#fff, transparent); animation: drip 2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.formnav { position: fixed; right: clamp(16px, 2.4vw, 34px); top: 50%; transform: translateY(-50%); z-index: 5; list-style: none; display: grid; gap: 12px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.formnav a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--dim); transition: color .4s; }
.formnav a::after { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--dim); transition: all .4s; }
.formnav li.on a { color: var(--ink); }
.formnav li.on a::after { background: #fff; border-color: #fff; box-shadow: 0 0 10px #fff; }
.formnav a:hover { color: var(--sub); }
.hero .ca, .hero a, .hero button { pointer-events: auto; }
.k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); margin-bottom: 18px; }
.hero h1 { font: 500 clamp(40px, 5vw, 74px)/.98 var(--sans); letter-spacing: -.03em; }
.hero .sub { margin-top: 22px; color: var(--sub); font-size: 14px; max-width: 440px; }
.ca { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(var(--rgb), .35); border-radius: 12px; background: rgba(0, 0, 0, .55);  max-width: 520px; }
.ca[hidden], .burnline[hidden] { display: none; }
.ca-sym { color: var(--acc); font-weight: 500; }
.ca code { font-size: 12px; color: var(--ink); word-break: break-all; flex: 1; min-width: 200px; }
.ca button, .ca a { font-size: 12px; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(var(--rgb), .4); background: transparent; color: var(--acc); }
.ca a { background: #fff; color: #000; border-color: #fff; }
.burnline { margin-top: 10px; font-size: 12px; color: var(--sub); }
.burnline a { color: var(--acc); text-decoration: underline; }
.rig { position: absolute; right: clamp(20px, 3.4vw, 48px); top: 90px; text-align: right; font-size: 11px; line-height: 1.8; color: rgba(var(--rgb), .75); z-index: 2; pointer-events: none; }
.rig .cy { color: var(--ink); }

/* sections */
.sec { padding: clamp(110px, 14vw, 180px) 0; border-top: 1px solid var(--line); }
.head h2, .sec h2, .lede { text-shadow: 0 0 24px #000, 0 0 8px #000; }
.wrap { width: min(1200px, 100% - 40px); margin: 0 auto; }
.wrap.narrow { width: min(800px, 100% - 40px); }
.head { margin-bottom: 44px; }
h2 { font: 500 clamp(34px, 4.4vw, 60px)/1.02 var(--sans); letter-spacing: -.025em; max-width: 860px; }
.lede { margin-top: 20px; max-width: 640px; color: var(--sub); font-size: 14.5px; }
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--bg2); padding: 18px; position: relative; }
.panel canvas { display: block; width: 100%; }
.empty { color: var(--dim); list-style: none; }

.thresh { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 12px; color: var(--sub); }
.thresh .cyc { margin-left: auto; color: var(--dim); }
.thresh .cyc b { color: var(--ink); font-weight: 500; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.dot.hot { background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.dot.cold { background: var(--cold); }

.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cell { border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 14px; background: var(--bg2); position: relative; overflow: hidden; transition: border-color .4s; }
.cell.firing { border-color: rgba(255, 255, 255, .55); }
.cell.firing::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 0%, rgba(255, 255, 255, .12), transparent 60%); pointer-events: none; }
.cell header { display: flex; align-items: baseline; justify-content: space-between; }
.cell header b { font: 500 18px/1 var(--sans); }
.cell header i { font-style: normal; font-size: 10px; color: var(--dim); }
.cell .hz { margin: 12px 0 10px; font: 500 34px/1 var(--sans); letter-spacing: -.02em; }
.cell .hz small { font: 400 12px var(--mono); color: var(--sub); margin-left: 4px; }
.cell.silent .hz { color: var(--cold); }
.meter { height: 4px; border-radius: 4px; background: rgba(var(--rgb), .1); position: relative; margin-bottom: 14px; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--acc); }
.meter u { position: absolute; top: -3px; width: 1px; height: 10px; background: var(--ink); opacity: .55; }
.drv { display: grid; grid-template-columns: 44px 1fr 46px; gap: 4px 8px; align-items: center; font-size: 11px; color: var(--sub); }
.drv .b { height: 6px; position: relative; background: rgba(255, 255, 255, .04); border-radius: 3px; }
.drv .b::after { content: ""; position: absolute; left: 50%; top: -2px; width: 1px; height: 10px; background: var(--dim); }
.drv .b i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.drv .v { text-align: right; color: var(--ink); }
.cell footer { margin-top: 12px; display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); }
.cell footer .held { color: var(--acc); }
.streak { display: inline-flex; gap: 3px; }
.streak i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--dim); }
.streak i.on { background: var(--acc); border-color: var(--acc); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.panel.square canvas { aspect-ratio: 1; height: auto; }
.pairs { margin-top: 30px; list-style: none; display: grid; gap: 8px; counter-reset: p; }
.pairs li { display: grid; grid-template-columns: 26px 1fr 60px; align-items: center; gap: 10px; font-size: 13px; }
.pairs li::before { counter-increment: p; content: counter(p, decimal-leading-zero); color: var(--dim); font-size: 11px; }
.pairs li.empty::before { content: none; }
.pairs .w { height: 3px; background: rgba(var(--rgb), .15); position: relative; border-radius: 3px; }
.pairs .w i { position: absolute; inset: 0 auto 0 0; background: var(--acc); border-radius: 3px; }
.pairs .n { text-align: right; color: var(--sub); font-size: 11px; }

.books { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.book { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--bg2); }
.book.main { border-color: rgba(255, 255, 255, .5); background: radial-gradient(circle at 0 0, rgba(255, 255, 255, .09), transparent 70%), var(--bg2); }
.book header { display: flex; align-items: center; gap: 8px; font: 500 15px var(--sans); }
.book header i { width: 10px; height: 3px; border-radius: 2px; }
.book p { font-size: 11px; color: var(--dim); margin-top: 4px; min-height: 34px; }
.book .val { margin-top: 18px; font: 500 30px/1 var(--sans); letter-spacing: -.02em; }
.book .ret { margin-top: 6px; font-size: 12px; color: var(--sub); }
.book .ret.paused { color: var(--cold); }
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.list h3 { font: 500 14px var(--sans); margin-bottom: 12px; }
.list ul { list-style: none; display: grid; gap: 2px; max-height: 360px; overflow: auto; font-size: 12px; }
.list li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(var(--rgb), .07); color: var(--sub); }
.list li time { color: var(--dim); }
.list li b { font-weight: 500; color: var(--ink); }
.list li .buy { color: var(--acc); }
.list li .sell { color: var(--cold); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.steps article { background: rgba(0, 0, 0, .78); padding: 26px 22px 30px; }
.steps span { font-size: 11px; color: var(--acc); }
.steps h3 { font: 500 20px var(--sans); margin: 18px 0 10px; }
.steps p { color: var(--sub); font-size: 13px; }
.rules { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.rules span { font-size: 11px; color: var(--sub); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.rules b { color: var(--ink); font-weight: 500; }

.notes { margin-top: 36px; list-style: none; display: grid; gap: 12px; }
.notes li:not(.empty) { border-left: 2px solid var(--acc); padding: 6px 0 6px 18px; font-size: 14px; color: var(--ink); }
.notes time { display: block; font-size: 11px; color: var(--dim); margin-bottom: 4px; }

.limits { margin-top: 36px; list-style: none; border-top: 1px solid var(--line); }
.limits li { padding: 18px 0 18px 30px; border-bottom: 1px solid var(--line); color: var(--sub); position: relative; font-size: 14px; }
.limits li::before { content: ""; position: absolute; left: 2px; top: 29px; width: 14px; height: 1px; background: var(--acc); }

.foot { border-top: 1px solid var(--line); padding: 40px 0; background: rgba(0, 0, 0, .7); }
.foot .row { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 12px; color: var(--dim); }

@media (max-width: 980px) {
  .bar nav { display: none; }
  .formnav { display: none; }
  .bar .pill { margin-left: auto; }
  .books { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .split, .split2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { top: auto; bottom: 23vh; right: 20px; }
  .hero h1 { font-size: clamp(36px, 11vw, 52px); }
  .hero .sub { font-size: 13px; }
  .formnav, .scrollcue { display: none; }
  .field::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.82) 45%); pointer-events: none; z-index: 1; }
  .rig { top: 74px; font-size: 10px; }
  .books, .steps { grid-template-columns: 1fr; }
  .thresh .cyc { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- landing chapters: short captions, the specimen carries the idea ---------- */
.pill.solid { background: #fff; color: #000; border-color: #fff; }
.pill.solid:hover { background: #d9d9d9; }
.cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.cta .scrollcue { margin: 0; }
.chap { position: relative; z-index: 1; min-height: 125vh; }
.cap { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(20px, 3.4vw, 48px) 11vh; max-width: 560px; pointer-events: none; }
.cap.mid { justify-content: center; padding-bottom: 0; }
.cap a { pointer-events: auto; align-self: flex-start; margin-top: 26px; }
.cap h2 { font-size: clamp(34px, 4.2vw, 60px); text-shadow: 0 0 30px #000, 0 0 10px #000; }
.cap > p:not(.k) { margin-top: 18px; color: var(--sub); font-size: 14px; max-width: 420px; text-shadow: 0 0 14px #000; }
.cap .live-line { font-size: 12px !important; color: var(--dim) !important; }
.cap .live-line b { color: var(--ink); font-weight: 500; }
.books-line { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mini-steps { list-style: none; margin-top: 22px; display: grid; gap: 10px; font-size: 13px; color: var(--sub); counter-reset: s; }
.mini-steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); color: var(--dim); margin-right: 14px; font-size: 11px; }
.mini-steps b { color: var(--ink); font-weight: 500; margin-right: 6px; }
.foot .row a { color: var(--sub); }
@media (max-width: 760px) {
  .cap, .cap.mid { justify-content: flex-end; padding-bottom: 9vh; }
  .cap h2 { font-size: clamp(30px, 9vw, 42px); }
  .chap { min-height: 115vh; }
}

/* ---------- landing on paper: white ground, black ink and a black specimen (the lab keeps its own theme) ---------- */
body.paper {
  --acc: #000; --acc2: #2a2a2a; --ink: #0a0a0a; --sub: #4a4a4a; --nav: #5a5a5a; --dim: #8a8a8a; --em: #6a6a6a;
  --rgb: 0, 0, 0; --bg: #fff; --bg2: rgba(255, 255, 255, .9); --line: rgba(0, 0, 0, .12); --cold: #a0a0a0;
  background: #fff; color: var(--ink);
}
html:has(body.paper) { background: #fff; }
body.paper ::selection { background: #000; color: #fff; }
body.paper .bar { background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); }
body.paper .stage { background: #fff; }
body.paper .stage .grain { opacity: .22; mix-blend-mode: multiply; }
body.paper .scrollcue span { background: linear-gradient(#000, transparent); }
body.paper .formnav li.on a::after { background: #000; border-color: #000; box-shadow: none; }
body.paper .ca { background: rgba(255, 255, 255, .7); }
body.paper .ca a, body.paper .pill.solid { background: #000; color: #fff; border-color: #000; }
body.paper .pill.solid:hover { background: #2a2a2a; }
body.paper .rec { box-shadow: none; }
body.paper .head h2, body.paper .sec h2, body.paper .lede { text-shadow: 0 0 24px #fff, 0 0 8px #fff; }
body.paper .cap h2 { text-shadow: 0 0 30px #fff, 0 0 10px #fff; }
body.paper .cap > p:not(.k) { text-shadow: 0 0 14px #fff, 0 0 4px #fff; }
body.paper .steps article { background: rgba(255, 255, 255, .82); }
body.paper .foot { background: rgba(255, 255, 255, .8); }
body.paper .cell.firing, body.paper .book.main { border-color: rgba(0, 0, 0, .5); }
@media (max-width: 760px) {
  body.paper .field::after { background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.85) 45%); }
}
body.paper .hero h1, body.paper .hero .k { text-shadow: 0 0 28px #fff, 0 0 10px #fff, 0 0 3px #fff; }
body.paper .hero .sub, body.paper .scrollcue, body.paper .rig { text-shadow: 0 0 10px #fff, 0 0 4px #fff, 0 0 2px #fff; }
@media (max-width: 760px) { body.paper .field::after { background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.7) 45%); } }

/* ---------- 06 the math: the engine's equations with their sources, compact grid ---------- */
.chap.math-chap { min-height: auto; padding: 12vh 0 14vh; }
.cap.math { position: relative; height: auto; max-width: 1080px; justify-content: flex-start; padding-bottom: 0; pointer-events: auto; }
.cap.math h2 { font-size: clamp(30px, 3.4vw, 46px); }
.cap.math .math-lede { margin-top: 10px; font-size: 13px; }
.eqs { list-style: none; margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; counter-reset: q; }
.eqs li { padding: 12px 14px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); min-width: 0; }
.eqs h3 { font: 500 13px/1.2 var(--sans); margin-bottom: 7px; display: flex; gap: 8px; align-items: baseline; }
.eqs h3::before { counter-increment: q; content: counter(q, decimal-leading-zero); font: 400 10px var(--mono); color: var(--dim); }
.eqs h3 span { font: 400 10.5px var(--mono); color: var(--dim); }
.eqs .eq { font: 400 12.5px/1.5 var(--mono); color: var(--ink); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.eqs .eq sub, .eqs .eq sup { font-size: .72em; }
.eqs .par { margin-top: 4px; font-size: 10.5px; color: var(--sub); }
.eqs .par sub { font-size: .75em; }
.eqs .src { margin-top: 6px; font-size: 10.5px; line-height: 1.45; color: var(--dim); }
.eqs .src::before { content: "src"; color: var(--ink); letter-spacing: .1em; text-transform: uppercase; font-size: 9px; margin-right: 8px; }
.eqs .src i { font-style: italic; }
.eqs li.note-li { display: flex; align-items: center; border-style: dashed; }
.eqs li.note-li p { font-size: 11px; line-height: 1.5; color: var(--sub); }
@media (max-width: 860px) {
  .eqs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cap.math { padding: 0 16px; }
  .eqs .eq { font-size: 11.5px; white-space: normal; }
}

/* FRYBRAIN mark: the one blue in the identity */
.logo svg { color: #2f6fff; width: 30px; height: 28px; }
body.lab .logo svg { color: #4d94ff; }
/* navbar: transparent over the hero, a solid paper strip once the page scrolls (nothing can run under the logo) */
.bar { transition: background .25s, box-shadow .25s, padding .25s; }
body.paper .bar.solid { background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); padding-top: 14px; padding-bottom: 14px; }
.eqs li.note-li b { color: var(--ink); font-weight: 500; }
/* the FRYBRAIN mark is now the supplied glow-brain image (blue ink on the white landing, original glow in the dark lab) */
.logo img.mark { width: 30px; height: 30px; display: block; }