:root { --bg:#05070c; --panel:rgba(14,19,29,.78); --panel-solid:#0e131d; --line:#1d2635; --text:#e8edf5; --muted:#93a0b4; --accent:#7fb6ff; --accent2:#b48cff; --warn:#ffb08a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html { overflow-x:clip; }
body { margin:0; background:var(--bg); color:var(--text); font:400 17px/1.6 Inter,system-ui,sans-serif; overflow-x:hidden; }
a { color:inherit; }
::selection { background:var(--accent); color:#05070c; }
.wrap { max-width:1140px; margin:0 auto; padding:0 20px; position:relative; }
main, header, footer, nav { position:relative; z-index:2; }

/* ambient layers */
/* three.js scenes (fx3d.js); the plain image stays underneath until a scene is live */
#warp { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55; }
#warp canvas { width:100vw !important; height:100vh !important; display:block; }
/* hero: text and brain in their own columns, so the brain never sits under the title.
   _removed: brain absolutely positioned behind the hero text · 2026-10-12 · Kalvin: it "makes the main
   title harder to read" at mid widths. */
.hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; }
.brain-col { position:relative; aspect-ratio:1/1; }
.brain-col::before { content:""; position:absolute; inset:5%; background:url(/img/brain.jpg) center/contain no-repeat; transition:opacity 1.2s;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent); mask-image:radial-gradient(closest-side,#000 70%,transparent); }
.brain-col:has(#brain3d.live)::before { opacity:0; }
#brain3d { position:absolute; inset:-28%; }
#brain3d canvas { width:100% !important; height:100% !important; display:block; }
#brain3d { opacity:0; transition:opacity 1.2s; } #brain3d.live { opacity:1; }
.yearcard .img canvas { position:absolute; inset:0; width:100% !important; height:100% !important; opacity:0; transition:opacity 1s; }
.yearcard .img.live canvas { opacity:1; }
.scanlines { position:fixed; inset:0; z-index:1; pointer-events:none; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px); }
.grain { position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* nav */
nav.top { position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:rgba(5,7,12,.55); border-bottom:1px solid rgba(255,255,255,.05); }
nav.top .wrap { display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font:500 13px/1 "JetBrains Mono",monospace; letter-spacing:.3em; }
.brand .mark { width:22px; height:22px; border-radius:6px; background:url(/favicon.svg) center/cover; box-shadow:0 0 18px rgba(127,182,255,.45); }
nav .links { display:flex; gap:20px; align-items:center; font-size:14px; }
nav .links a { text-decoration:none; color:var(--muted); }
nav .links a:hover { color:var(--text); }
nav .links a.sub { color:#06101f; background:var(--accent); padding:7px 14px; border-radius:999px; font-weight:600; }
@media (max-width:600px) { nav .links a:not(.sub) { display:none; } .brand { letter-spacing:.2em; } }

/* type */
.kicker { font:500 13px/1.3 "JetBrains Mono",monospace; letter-spacing:.32em; color:var(--accent); text-transform:uppercase; }
h1,h2,h3 { font-weight:300; }
h2 { font-size:clamp(28px,4vw,40px); margin:10px 0 28px; line-height:1.15; }

/* hero */
header.hero { min-height:calc(92vh - 56px); display:flex; align-items:center; padding:60px 0; }
header.hero { overflow-x:clip; }
h1.title { font-size:clamp(46px,5.6vw,82px); white-space:nowrap; letter-spacing:.06em; line-height:1; margin:18px 0 22px;
  background:linear-gradient(100deg,#fff 30%,#a9cdff 50%,#fff 70%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 7s ease-in-out infinite; text-shadow:0 0 40px rgba(127,182,255,.15); }
@keyframes sheen { 0%,100% { background-position:100% 0; } 50% { background-position:0 0; } }
.lede { font-size:clamp(18px,2.2vw,22px); color:#c9d3e2; max-width:34ch; margin:0 0 30px; }
.cta { display:flex; flex-wrap:wrap; gap:10px; }
.btn { display:inline-block; padding:13px 22px; border-radius:999px; background:var(--accent); color:#06101f; font-weight:600; text-decoration:none; border:1px solid var(--accent);
  transition:transform .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(127,182,255,.35); }
.btn.ghost { background:rgba(255,255,255,.02); color:var(--text); border-color:#33415a; }
/* takeoff meter: one bar per year on an exponential rise; released years lit, the next one charging */
.meter { display:flex; align-items:flex-end; gap:16px; margin-top:38px; }
.mnum { font:500 13px/1 "JetBrains Mono",monospace; color:var(--muted); display:flex; align-items:baseline; gap:2px; }
.mnum b { font:300 52px/0.8 Inter,sans-serif; color:#fff; letter-spacing:-.02em; text-shadow:0 0 24px rgba(127,182,255,.45); }
.mbody { display:flex; flex-direction:column; gap:8px; }
.bars { display:flex; align-items:flex-end; gap:4px; height:44px; }
.bars i { width:7px; height:var(--h); border-radius:2px; background:#1a2232; transform-origin:bottom; animation:rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--d); }
.bars i.on { background:linear-gradient(180deg,#d6e6ff,var(--accent) 40%,var(--accent2)); box-shadow:0 0 12px rgba(127,182,255,.7); }
.bars i.next { background:linear-gradient(180deg,rgba(127,182,255,.6),rgba(180,140,255,.15)); animation:rise .7s cubic-bezier(.2,.8,.2,1) both var(--d), charge 1.6s ease-in-out infinite 1.8s; }
@keyframes rise { from { transform:scaleY(0); opacity:0; } }
@keyframes charge { 50% { box-shadow:0 0 16px rgba(127,182,255,.8); filter:brightness(1.6); } }
.mlab { display:flex; justify-content:space-between; gap:14px; font:500 11px/1 "JetBrains Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.mlab .cd { color:var(--accent); }
@keyframes grow { from { width:0; } }

section { padding:72px 0; }
section + section, #about { border-top:1px solid var(--line); }

/* episodes */
.eps { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:30px; }
.ep h3 { margin:4px 0 8px; font-weight:600; font-size:21px; line-height:1.3; }
.ep h3 a { text-decoration:none; }
.ep p { margin:0; color:var(--muted); }
.ep .meta { font:500 12px/1.4 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:16px 0 6px; }
.ep .meta .stg { color:var(--muted); }
.ep .links { margin-top:12px; display:flex; gap:18px; font-size:15px; }
.ep .links a { color:var(--accent); text-decoration:none; }
.ep .links a:hover { text-decoration:underline; }
.thumb { position:relative; display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line); transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)); transition:transform .25s, box-shadow .25s; }
.thumb:hover { box-shadow:0 20px 60px rgba(127,182,255,.18); }
.thumb img { display:block; width:100%; height:auto; transition:transform .5s; }
.thumb:hover img { transform:scale(1.04); }
.thumb::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 45%); opacity:0; transition:opacity .25s; }
.thumb:hover::after { opacity:1; }
.play { position:absolute; right:14px; bottom:14px; width:62px; height:62px; border-radius:50%; background:rgba(5,7,12,.7); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); padding:0; cursor:pointer; }
.play::after { content:""; position:absolute; left:25px; top:20px; border-left:16px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; }
.play.big { right:auto; bottom:auto; left:50%; top:50%; width:92px; height:92px; transform:translate(-50%,-50%); box-shadow:0 0 0 0 rgba(127,182,255,.5); animation:pulse 2.4s infinite; }
.play.big::after { left:37px; top:29px; border-left-width:24px; border-top-width:17px; border-bottom-width:17px; }
@keyframes pulse { 70% { box-shadow:0 0 0 22px rgba(127,182,255,0); } 100% { box-shadow:0 0 0 0 rgba(127,182,255,0); } }
.years { list-style:none; padding:0; margin:34px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.years li { font:500 13px/1 "JetBrains Mono",monospace; border:1px solid var(--line); border-radius:8px; color:#4a5568; }
.years li, .years li a { padding:9px 11px; display:block; text-decoration:none; }
.years li.on { padding:0; color:#05070c; background:var(--accent); border-color:var(--accent); box-shadow:0 0 14px rgba(127,182,255,.35); }

/* panels */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; margin:18px 0; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.panel.chart { padding:28px 24px 20px; }
.chart h2 { margin-bottom:16px; }
.chartbox svg { display:block; width:100%; height:auto; overflow:visible; }
.chartbox text { font:12px "JetBrains Mono",monospace; fill:#5c677b; }
.chartbox text.on { fill:var(--accent); }
.chartbox text.zone { fill:var(--accent); letter-spacing:.18em; font-size:11px; }
.chartbox .yr { cursor:pointer; transition:r .2s; }
.chartbox a:hover .yr { r:10; }
.chartbox .draw { stroke-dasharray:3000; stroke-dashoffset:3000; }
.in .chartbox .draw, .chartbox.in .draw { animation:draw 2.2s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.chartbox .pop { transform-box:fill-box; transform-origin:center; transform:scale(0); }
.in .chartbox .pop, .chartbox.in .pop { animation:pop .5s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay:var(--d); }
@keyframes pop { to { transform:scale(1); } }
.hint { color:var(--muted); font-size:14px; margin:10px 0 0; }

/* about */
.about { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.about p { color:#c9d3e2; margin:0 0 16px; }
.follow a { display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none; transition:padding .2s; }
.follow a span:last-child { color:var(--muted); }
.follow a:hover { padding-left:8px; }
.follow a:hover span:first-child { color:var(--accent); }
footer { padding:40px 0 60px; color:#5c677b; font-size:14px; border-top:1px solid var(--line); }
footer a { color:#8a96aa; }

/* companion guide */
.guide { padding:40px 0 30px; }
.ghead h1 { font-size:clamp(30px,5vw,54px); line-height:1.1; margin:12px 0 14px; font-weight:300; }
.ghead .gyr { font-weight:800; background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-right:8px; }
.note { display:inline-block; font-size:13.5px; border-radius:999px; padding:5px 13px; border:1px solid var(--line); color:var(--muted); }
.note.real { border-color:#1f5f45; color:#8fe0b9; }
.note.proj { border-color:#4b3d75; color:#c8b5ff; }
.player { position:relative; margin:26px 0 8px; border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; background:#000; box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(127,182,255,.08); }
.player img, .player iframe { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.yearcard { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); padding:0; overflow:hidden; }
.yearcard .img { min-height:380px; background:#111 center/cover no-repeat; position:relative; }
.yearcard .img::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 60%,rgba(14,19,29,.9)); }
.yrbig { position:absolute; z-index:1; left:18px; bottom:8px; font:800 72px/1 Inter,system-ui,sans-serif; color:#fff; letter-spacing:-.03em; text-shadow:0 2px 24px rgba(0,0,0,.6); }
.story { padding:24px; display:flex; flex-direction:column; gap:14px; }
.stage { align-self:flex-start; font:500 12px/1 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; border-radius:999px; padding:7px 12px; background:rgba(127,182,255,.12); color:var(--accent); border:1px solid rgba(127,182,255,.3); }
.story h2 { margin:0; font-weight:600; font-size:clamp(24px,2.8vw,31px); }
.story .sum { margin:0; font-size:18px; color:#c9d3e2; }
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.tile { border:1px solid var(--line); border-radius:12px; padding:9px 11px; background:rgba(255,255,255,.02); transition:border-color .2s, background .2s; }
.tile:hover { border-color:rgba(127,182,255,.45); background:rgba(127,182,255,.06); }
.tile .n { font-size:12px; color:var(--muted); }
.tile .v { font-size:21px; font-weight:800; line-height:1.15; }
.tile .x { font-size:12px; font-weight:600; color:#6fe0a8; min-height:1em; }
.loop { background:rgba(180,140,255,.09); border:1px solid rgba(180,140,255,.22); border-radius:12px; padding:11px 14px; font-size:15.5px; }
.loop b { color:#c8b5ff; }
.grid2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.grid2 .panel { margin:0; }
h3.sec { margin:0 0 14px; font:500 12.5px/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.rel, .techs { display:grid; gap:10px; }
.model { display:grid; grid-template-columns:48px minmax(0,1fr); gap:10px; border:1px solid var(--line); border-radius:12px; padding:11px; transition:border-color .2s, transform .2s; }
.model:hover { border-color:#33415a; transform:translateX(3px); }
.model .mo { font:500 12px "JetBrains Mono",monospace; color:var(--muted); text-align:center; padding-top:3px; }
.model .nm { font-weight:700; }
.model .lb { display:inline-block; font-size:11.5px; font-weight:600; border-radius:999px; padding:1px 9px; margin-left:7px; color:var(--c); border:1px solid var(--c); vertical-align:1px; }
.model .wh, .tech .wh { font-size:14.5px; color:#c9d3e2; }
.model .by, .tech .en { font-size:12.5px; color:var(--muted); }
.tech { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; }
.tech .ic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:21px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.tech .nm { font-weight:700; }
.world { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; color:#c9d3e2; }
.world b { display:block; font:500 12px/1 "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.stack { display:grid; gap:12px; margin-top:18px; }
.q { background:rgba(127,182,255,.07); border:1px solid rgba(127,182,255,.18); border-radius:12px; padding:11px 14px; font-size:15px; }
.life { border-left:3px solid var(--accent); padding:4px 0 4px 16px; font-size:17px; }
.life .who { font-size:13px; color:var(--muted); font-weight:600; }
.tension { background:rgba(255,140,90,.07); border:1px solid rgba(255,140,90,.25); color:var(--warn); border-radius:12px; padding:16px 18px; font:500 17px/1.5 "JetBrains Mono",monospace; }
.tension .tl { display:block; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; opacity:.7; margin-bottom:6px; }
.tension [data-type].typing::after { content:"▋"; animation:blink 1s steps(1) infinite; margin-left:2px; }
@keyframes blink { 50% { opacity:0; } }
.gnav { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin:26px 0 10px; }
.soon { font:500 13px "JetBrains Mono",monospace; color:var(--muted); letter-spacing:.06em; }

/* tooltip, reveal */
[data-tip] { cursor:help; }
#tip { position:fixed; z-index:50; pointer-events:none; max-width:300px; background:#0e131d; border:1px solid #33415a; color:var(--text); font-size:13px; line-height:1.4; padding:8px 11px; border-radius:9px; opacity:0; transition:opacity .12s; box-shadow:0 10px 30px rgba(0,0,0,.5); }
#tip.on { opacity:1; } #tip b { display:block; margin-bottom:2px; color:var(--accent); }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }

@media (max-width:860px) {
  .yearcard, .grid2, .about { grid-template-columns:minmax(0,1fr); }
  .yearcard .img { min-height:240px; }
  .yearcard .img::after { background:linear-gradient(180deg,transparent 60%,rgba(14,19,29,.9)); }
  .world { grid-template-columns:minmax(0,1fr); gap:14px; }
}
@media (max-width:760px) {
  .hero-grid { grid-template-columns:minmax(0,1fr); }
  .brain-col { position:absolute; z-index:-1; width:110vw; right:-45%; top:40px; opacity:.32; }
  h1.title { white-space:normal; font-size:clamp(46px,13vw,80px); }
  header.hero { min-height:auto; padding:70px 0 60px; }
  .eps { grid-template-columns:minmax(0,1fr); }
  .kicker { letter-spacing:.18em; font-size:11px; }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel { padding:18px; }
  .chartbox { overflow-x:auto; } .chartbox svg { min-width:640px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
  .chartbox .draw { stroke-dashoffset:0; } .chartbox .pop { transform:none; }
  #swarm { display:none; }
}

/* marquee of models released so far */
.marquee { position:relative; z-index:2; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(5,7,12,.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee .track { display:flex; gap:12px; width:max-content; padding:14px 0; animation:marq 60s linear infinite; }
.marquee:hover .track { animation-play-state:paused; }
@keyframes marq { to { transform:translateX(-50%); } }
.chip { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font:500 13px/1 "JetBrains Mono",monospace; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:8px 14px; }
.chip b { color:var(--text); font-weight:500; }
.chip i { width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); }

/* cursor spotlight (mizzi.com cards) */
.spot { position:relative; }
.spot::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(127,182,255,.10),transparent 45%); }
.spot:hover::before { opacity:1; }
.ep.spot { border-radius:16px; }
.chartbox text.q { font:300 30px Inter,sans-serif; fill:#7fb6ff; fill-opacity:.22; }
@media (prefers-reduced-motion:reduce) { .marquee .track { animation:none; } .marquee { overflow-x:auto; } }

/* ---- mini player: the score */
.mini { position:fixed; z-index:30; right:18px; bottom:18px; display:flex; align-items:center; gap:10px; padding:7px 10px 7px 7px;
  border-radius:999px; background:rgba(10,14,22,.78); border:1px solid #26324a; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); max-width:calc(100vw - 36px); }
.mini button { background:none; border:0; color:var(--muted); cursor:pointer; font-size:14px; padding:6px; border-radius:50%; }
.mini button:hover { color:var(--text); }
.mini .pp { position:relative; width:48px; height:48px; padding:0; flex:none; }
.mini .ring { position:absolute; inset:0; transform:rotate(-90deg); }
.mini .ring circle { fill:none; stroke-width:2.5; }
.mini .ring .b { stroke:#1d2635; }
.mini .ring .p { stroke:url(#none); stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .3s linear; filter:drop-shadow(0 0 4px var(--accent)); }
.mini .ic { position:absolute; left:19px; top:16px; border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; }
.mini.playing .ic { left:17px; top:17px; width:14px; height:14px; border:0; border-left:4px solid #fff; border-right:4px solid #fff; box-sizing:border-box; }
.mini.blocked .pp { animation:pulse 2s infinite; border-radius:50%; }
.mini .tt { display:flex; flex-direction:column; min-width:0; width:170px; line-height:1.25; }
.mini .tt b { font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini .tt span { font:500 10.5px "JetBrains Mono",monospace; color:var(--muted); letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini canvas { width:90px; height:26px; flex:none; }
.mini .list { position:absolute; right:0; bottom:calc(100% + 10px); width:300px; border-radius:16px; background:rgba(10,14,22,.94); border:1px solid #26324a;
  padding:12px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 20px 50px rgba(0,0,0,.6); }
.mini.open .list { opacity:1; transform:none; pointer-events:auto; }
.mini .lh { font:500 10.5px "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:2px 4px 8px; }
.mini ol { list-style:none; margin:0; padding:0; counter-reset:t; }
.mini li { counter-increment:t; display:grid; grid-template-columns:24px 1fr; padding:8px 6px; border-radius:10px; cursor:pointer; font-size:14px; }
.mini li::before { content:counter(t,decimal-leading-zero); font:500 11px "JetBrains Mono",monospace; color:#5c677b; padding-top:3px; grid-row:span 2; }
.mini li span { font-size:12px; color:var(--muted); }
.mini li:hover { background:rgba(127,182,255,.07); }
.mini li.on b { color:var(--accent); }
/* minimised: only the play ring and the expand chevron */
.mini .mn svg { transition:transform .25s; display:block; }
.mini.min { padding:5px 6px 5px 5px; gap:4px; }
.mini.min .tt, .mini.min canvas, .mini.min .nx, .mini.min .ls, .mini.min .list { display:none; }
.mini.min .mn svg { transform:rotate(180deg); }
.mini.min.playing .pp { box-shadow:0 0 18px rgba(127,182,255,.35); border-radius:50%; }
@media (max-width:600px) { .mini.min { left:auto; } }
@media (max-width:600px) { .mini { right:10px; bottom:10px; left:10px; } .mini .tt { width:auto; flex:1; } .mini canvas { width:60px; } .mini .list { width:auto; left:0; } }
footer { padding-bottom:110px; }

/* the title catches the light when the brain ignites (fx3d.js adds .ignite) */
h1.title.ignite { animation:sheen 7s ease-in-out infinite, ignite 1.6s ease-out; }
@keyframes ignite { 0% { text-shadow:0 0 0 rgba(127,182,255,0); } 12% { text-shadow:0 0 30px rgba(170,205,255,.95), 0 0 80px rgba(127,182,255,.6); filter:brightness(1.6); } 100% { text-shadow:0 0 40px rgba(127,182,255,.15); filter:none; } }

/* ---- episode shelf (fx3d.js) */
.shelf { position:relative; height:440px; margin:0 -20px 10px; outline:none; display:none; }
html:not(.no-webgl) .shelf { display:block; }
.shelf canvas { width:100% !important; height:100% !important; display:block; touch-action:pan-y; }
.shelf button { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid #33415a;
  background:rgba(10,14,22,.7); color:var(--text); font-size:26px; line-height:1; cursor:pointer; backdrop-filter:blur(6px); opacity:0; transition:opacity .3s; }
.shelf.live button { opacity:1; }
.shelf button:hover { border-color:var(--accent); color:var(--accent); }
.sh-prev { left:24px; } .sh-next { right:24px; }
.sh-hint { position:absolute; left:0; right:0; bottom:4px; text-align:center; margin:0; font:500 11px "JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:#4a5568; }
.shelf:not(.live) .sh-hint { display:none; }
.eps.single { display:block; }
.shelf-on .years { display:none; }
.eps.single .ep { display:none; }
.eps.single .ep.sel { display:block; max-width:760px; margin:0 auto; text-align:center; animation:fadeup .5s ease; }
.eps.single .ep.sel .thumb { display:none; }
.eps.single .ep.sel h3 { font-size:28px; font-weight:300; }
.eps.single .ep.sel .links { justify-content:center; }
.eps.single .ep.reveal { opacity:1; transform:none; }
@keyframes fadeup { from { opacity:0; transform:translateY(10px); } }
@media (max-width:760px) { .shelf { height:320px; margin:0 -16px; } .sh-prev { left:8px; } .sh-next { right:8px; } }

/* ---- trajectory (fx3d.js): the 3D curve replaces the SVG on screen; the SVG stays for crawlers */
.traj { height:440px; margin:0 -24px; display:none; cursor:default; }
html:not(.no-webgl) .traj { display:block; }
.traj canvas { width:100% !important; height:100% !important; display:block; }
.traj-live .chartbox { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:760px) { .traj { height:460px; margin:0 -18px; } }