/* ===== A New Model Every Day — shared design system ===== */
:root{
  --bg:#0a0b0e; --bg2:#0f1116; --panel:#13151c;
  --ink:#ECE7DA; --muted:#8b8d86; --faint:#5d5f66;
  --signal:#c2f94b; --signal-dim:#8aa838; --error:#ff6a5a; --amber:#f4c04e; --sky:#7cc6ff;
  --line:rgba(236,231,218,.12); --line-strong:rgba(236,231,218,.28);
  --display:'Fraunces',serif; --body:'Hanken Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
body::after{ /* film grain */
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--signal); text-decoration:none; border-bottom:1px solid var(--signal-dim)}
a:hover{color:#dfffa0}
::selection{background:var(--signal); color:#0a0b0e}
.wrap{max-width:820px; margin:0 auto; padding:0 28px}

/* nav */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:rgba(10,11,14,.7); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; justify-content:space-between; align-items:center; padding-top:14px; padding-bottom:14px}
.nav .brand{font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); border:none}
.nav .brand b{color:var(--signal)}
.nav .back{font-family:var(--mono); font-size:12px; color:var(--muted); border:none}
.nav .back:hover{color:var(--signal)}

/* hero */
header{position:relative; padding:84px 0 56px; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(120% 80% at 80% -10%, rgba(194,249,75,.10), transparent 60%),
            radial-gradient(90% 70% at -10% 110%, rgba(255,106,90,.08), transparent 55%);}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--signal); display:flex; gap:14px; align-items:center; margin-bottom:24px}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--signal)}
h1{font-family:var(--display); font-weight:900; font-optical-sizing:144;
  font-size:clamp(2.6rem,7.5vw,5rem); line-height:.96; letter-spacing:-.02em; margin-bottom:22px}
h1 em{font-style:italic; font-weight:400; color:var(--amber)}
.lede{font-size:1.2rem; color:#cfcabd; max-width:62ch}
.lede b{color:var(--ink); font-weight:700}
.meta{display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:32px;
  font-family:var(--mono); font-size:13px; color:var(--muted); letter-spacing:.02em}
.meta span{color:var(--ink)}

/* waveform */
.wave{display:flex; align-items:flex-end; gap:3px; height:72px; margin-top:44px; opacity:.9}
.wave i{flex:1; background:linear-gradient(var(--signal),var(--signal-dim)); border-radius:2px;
  animation:bob 1.5s ease-in-out infinite; transform-origin:bottom}
@keyframes bob{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}

/* body */
main{padding:18px 0 40px}
section{padding:44px 0; border-bottom:1px solid var(--line)}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--signal-dim); margin-bottom:14px}
h2{font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,4.5vw,2.5rem);
  line-height:1.05; letter-spacing:-.015em; margin-bottom:20px}
h3{font-family:var(--display); font-weight:600; font-size:1.3rem; margin:30px 0 10px}
p{margin-bottom:18px; color:#d6d1c5}
p b,li b{color:var(--ink); font-weight:700}
ul{margin:0 0 18px 0; padding-left:0; list-style:none}
li{position:relative; padding-left:26px; margin-bottom:11px; color:#d6d1c5}
li::before{content:"\25B9"; position:absolute; left:0; color:var(--signal); font-size:.9em; top:1px}
.mono{font-family:var(--mono); font-size:.9em}

/* stat band */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:8px 0 6px}
.stat{background:var(--bg2); padding:22px 16px; text-align:center}
.stat b{display:block; font-family:var(--display); font-weight:900; font-size:1.9rem; color:var(--signal); line-height:1}
.stat span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:9px}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}

/* terminal */
.term{background:#070809; border:1px solid var(--line-strong); border-radius:12px;
  font-family:var(--mono); font-size:13px; line-height:1.7; margin:24px 0; overflow:hidden}
.term .bar{display:flex; gap:7px; padding:11px 15px; border-bottom:1px solid var(--line); background:#0c0d10}
.term .bar i{width:11px; height:11px; border-radius:50%; background:#2a2c33}
.term .bar i:first-child{background:var(--error)} .term .bar i:nth-child(2){background:var(--amber)} .term .bar i:nth-child(3){background:var(--signal-dim)}
.term .bar span{margin-left:10px; color:var(--faint); font-size:11.5px; align-self:center}
.term pre{padding:16px 18px; overflow-x:auto; color:#c9c7bf; white-space:pre}
.term .nan{color:var(--error); font-weight:700}
.term .ok{color:var(--signal)} .term .dim{color:var(--faint)} .term .cmt{color:#6b6d74; font-style:italic}

/* callouts */
.note{border-left:3px solid var(--amber); background:linear-gradient(90deg,rgba(244,192,78,.07),transparent);
  padding:18px 22px; border-radius:0 10px 10px 0; margin:24px 0}
.note.bad{border-color:var(--error); background:linear-gradient(90deg,rgba(255,106,90,.08),transparent)}
.note.good{border-color:var(--signal); background:linear-gradient(90deg,rgba(194,249,75,.08),transparent)}
.note p:last-child{margin-bottom:0}
.note .lab{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:7px}
.note.bad .lab{color:var(--error)} .note.good .lab{color:var(--signal)}

/* audio cards */
.players{display:grid; gap:16px; margin:26px 0}
.pc{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px}
.pc .top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px}
.pc .who{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.pc.ft .who{color:var(--signal)} .pc.base .who{color:var(--amber)}
.pc .txt{color:var(--muted); font-size:.92rem; font-style:italic; margin-bottom:13px; font-family:var(--display)}
audio{width:100%; height:38px; filter:saturate(.5) brightness(.95)}
.ab{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){.ab{grid-template-columns:1fr}}
.ab-head{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin:30px 0 -6px}

/* scoreboard */
.scoreboard{width:100%; border-collapse:collapse; margin:22px 0; font-family:var(--mono); font-size:14px}
.scoreboard th{text-align:left; padding:12px 14px; border-bottom:2px solid var(--line-strong);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500}
.scoreboard th:not(:first-child){text-align:center}
.scoreboard td{padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink)}
.scoreboard td:not(:first-child){text-align:center}
.scoreboard .win{color:var(--signal); font-weight:700} .scoreboard .lose{color:var(--error); font-weight:700}
.scoreboard tr:last-child td{border-bottom:none}
.cap{font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:-6px}

/* ===== series landing: entry cards ===== */
.entries{display:grid; gap:18px; margin:10px 0}
.entry{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px 26px;
  text-decoration:none; border-bottom:1px solid var(--line); transition:transform .25s ease, border-color .25s ease, background .25s ease}
.entry:hover{transform:translateY(-3px); border-color:var(--line-strong); background:#171922}
.entry .day{font-family:var(--display); font-weight:900; font-size:2.4rem; line-height:.9; color:var(--signal); min-width:74px}
.entry .day small{display:block; font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.2em; color:var(--faint); margin-top:6px}
.entry .tag{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:3px 9px; border-radius:99px; border:1px solid var(--line-strong); color:var(--muted)}
.entry .tag.build{color:var(--signal); border-color:var(--signal-dim)} .entry .tag.theory{color:var(--sky); border-color:#3a586e}
.entry h3{font-family:var(--display); font-weight:600; font-size:1.45rem; color:var(--ink); margin:10px 0 7px}
.entry p{color:var(--muted); margin:0; font-size:1rem}
.entry.soon{opacity:.5; pointer-events:none}
.entry.soon .day{color:var(--faint)}

/* token diagrams */
.diagram{background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:24px; margin:26px 0; overflow-x:auto}
.pipe{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:12.5px; justify-content:center}
.pipe .box{padding:10px 14px; border:1px solid var(--line-strong); border-radius:9px; color:var(--ink); background:#0c0d11; white-space:nowrap}
.pipe .box.k{border-color:var(--signal-dim); color:var(--signal)}
.pipe .arrow{color:var(--faint)}
.seq{display:flex; gap:6px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; margin:14px 0}
.chip{padding:7px 11px; border-radius:7px; border:1px solid var(--line-strong); color:var(--ink); background:#0c0d11}
.chip.cond{border-color:#3a586e; color:var(--sky)} .chip.text{border-color:var(--signal-dim); color:var(--signal)} .chip.audio{border-color:var(--amber); color:var(--amber)}
.chip.sem{border-color:var(--signal-dim); color:var(--signal)} .chip.ac{border-color:var(--error); color:var(--error)}
.legend{display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:14px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:middle}
.rvq{display:flex; flex-direction:column; gap:6px; align-items:center; font-family:var(--mono); font-size:11.5px}
.rvq .row{display:flex; gap:6px; align-items:center}
.rvq .lbl{color:var(--faint); min-width:96px; text-align:right}
.map{width:100%; border-collapse:collapse; margin:18px 0; font-size:14px}
.map td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:#d6d1c5}
.map td:first-child{font-family:var(--mono); font-size:12.5px; color:var(--signal); white-space:nowrap; width:42%}
.map tr:last-child td{border-bottom:none}

/* footer */
footer{padding:60px 0 84px; text-align:center}
footer .big{font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,4vw,2.1rem); color:var(--ink); line-height:1.25; margin-bottom:22px; max-width:26ch; margin-inline:auto}
footer .sig{font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.05em}
footer .wink{margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--faint)}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.wave i{animation:none;transform:scaleY(.6)}}