:root{--bg:#030507;--pan:#0a1016;--pan2:#0d151d;--line:#1d2a35;--ink:#eef3f6;--mut:#8894a0;--acc:#2de2c5;--warn:#ffb547;--r:0px;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#030507}}
:root[data-theme="dark"]{--bg:#030507}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 Manrope,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.005em;margin:0}
.mono,.eyebrow,.tag,footer h4,.ico{font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:inherit}button{font:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.sc{background:#030507e6;backdrop-filter:blur(14px);border-color:var(--line)}
.ni{max-width:1180px;margin:auto;height:68px;display:flex;align-items:center;gap:26px;padding:0 20px}
.logo{--lh:52px;display:grid;width:max-content;text-decoration:none}
.logo-mark{grid-area:1/1;height:var(--lh);width:auto;display:block}
.logo-tag{grid-area:1/1;align-self:start;justify-self:start;margin:calc(var(--lh)*.755) 0 0 calc(var(--lh)*1.393);font:600 max(8px,calc(var(--lh)*.185))/1.25 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#cfe9e4;white-space:nowrap}
.lk{margin-left:auto;display:flex;gap:26px;align-items:center}.lk a{text-decoration:none;color:var(--mut);font-size:15px;font-weight:500}.lk a:hover{color:var(--ink)}
.lk a.btn{color:#04211d;font-weight:600}
.btn{background:var(--acc);color:#04211d;border:0;padding:12px 20px;font-weight:600;font-size:15px;text-decoration:none;display:inline-block;letter-spacing:.01em}
.btn.o{background:transparent;color:var(--ink);border:1px solid var(--line)}
.ico{background:transparent;border:1px solid var(--line);color:var(--mut);padding:9px 13px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:7px;align-items:center}
.ico.on{color:var(--acc);border-color:var(--acc)}
.ico .spk{width:15px;height:15px;flex:none}.ico.on .spk{display:none}.ico .eq{display:none;align-items:flex-end;gap:2px;height:12px;width:12px}.ico.on .eq{display:inline-flex}
.ico .eq i{flex:1;height:100%;background:currentColor;transform-origin:bottom;animation:eq 1s ease-in-out infinite}.ico .eq i:nth-child(2){animation-delay:-.35s}.ico .eq i:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.mb{display:none;background:transparent;border:1px solid var(--line);color:var(--ink);padding:9px 12px;margin-left:0}
@media(max-width:860px){.ni{height:64px;padding:0 16px;gap:12px}.nav .logo{--lh:44px}
.lk{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 64px - env(safe-area-inset-top,0px));overflow-y:auto;background:#050a0ff2;backdrop-filter:blur(14px);border-top:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px}
.lk.open{display:flex;height:calc(100dvh - 64px - env(safe-area-inset-top,0px))}.lk a{padding:15px 12px;border-bottom:1px solid var(--line)}.lk .btn{text-align:center;margin-top:8px}.mb{display:grid;place-items:center;width:44px;height:44px;padding:0;margin-left:auto;font-size:21px}.ico{justify-content:center;margin-top:8px}body.menu-open{overflow:hidden}}
/* hero */
canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.hero section{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:24px;text-align:center;pointer-events:none}
.hero section:first-of-type{align-items:start;padding-top:calc(50vh + 32px);padding-top:calc(50svh + 32px);padding-bottom:64px}
.hero section:first-of-type h1{font-size:clamp(40px,min(5.2vw,8.5vh),72px)}.hero section:first-of-type .t{max-width:1100px}
.hero section.low{align-items:end;padding-bottom:max(64px,9vh)}.hero section.low h2{font-size:clamp(32px,5vw,60px)}
.t{max-width:820px;opacity:0;transform:translateY(24px);transition:opacity 1.2s,transform 1.2s}.t.v{opacity:1;transform:none}
.hero .eyebrow{margin:0 0 16px;text-shadow:0 1px 12px #000}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;pointer-events:auto}
.hero h1,.hero h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;line-height:1.04;text-shadow:0 2px 30px #000;text-wrap:balance}
.hero .btn.o{background:#030507b8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero h1{font-size:clamp(46px,10vw,116px)}.hero h2{font-size:clamp(34px,7vw,80px)}
.n{font-family:"Instrument Serif",serif;font-size:clamp(52px,12vw,150px);line-height:1;color:var(--acc);font-variant-numeric:tabular-nums}.n.r{color:#ff4d4f}
.s{color:#bfeee5;font-size:clamp(16px,2.2vw,21px);margin-top:20px;font-weight:500;text-shadow:0 0 2px #030507,0 0 8px #030507,0 0 22px #030507,0 1px 12px #000}
.src{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-top:16px;opacity:.65}em{font-style:italic;color:var(--acc)}
.hint{font-family:"IBM Plex Mono",monospace;letter-spacing:.24em;text-transform:uppercase;position:fixed;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--mut);z-index:2;transition:opacity .6s;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.hint i{width:1px;height:30px;background:linear-gradient(var(--acc),transparent);animation:cue 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.skipintro{position:fixed;right:24px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:7;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:11px 14px;border:1px solid var(--line);background:#030507b3;backdrop-filter:blur(10px);transition:opacity .4s,visibility .4s,transform .4s,border-color .3s,color .3s}
.skipintro:hover{border-color:var(--acc);color:var(--acc)}.skipintro.gone{opacity:0;visibility:hidden;transform:translateY(8px)}
/* sound prompt: mirrors skip intro on the left while the story plays */
.sndp{position:fixed;left:24px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:7;margin:0;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;color:var(--ink);padding:11px 14px;background:#030507b3;backdrop-filter:blur(10px);transition:opacity .4s,visibility .4s,transform .4s,border-color .3s,color .3s}
.sndp:hover{border-color:var(--acc);color:var(--acc)}.sndp.gone{opacity:0;visibility:hidden;transform:translateY(8px)}
.words span{display:inline-block;opacity:0;transform:translateY(.28em);filter:blur(6px);transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.3,1),filter .6s;transition-delay:calc(var(--i)*.38s + .15s)}
.t.v .words span{opacity:1;transform:none;filter:none}
/* page */
.page{position:relative;z-index:3;background:var(--bg);border-top:1px solid var(--line)}
.w{max-width:1180px;margin:auto;padding:0 20px}
section.b{padding:clamp(64px,9vw,120px) 0}
.eyebrow{color:var(--acc);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 18px}
h2.h{font-size:clamp(34px,5.4vw,64px);line-height:1.04;max-width:19ch;letter-spacing:-.01em}
.lead{color:var(--mut);max-width:60ch;margin:18px 0 0;font-size:18px;line-height:1.65}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:40px}
.card{background:var(--pan);border:1px solid var(--line);padding:26px;transition:border-color .3s,transform .3s}
.card:hover{border-color:var(--acc);transform:translateY(-3px)}.card h3{font-size:25px;margin-bottom:10px}.card p{color:var(--mut);margin:0;font-size:15.5px}
.card .k{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.2em;color:var(--acc);display:block;margin-bottom:18px}
.ep{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 12px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.ep:last-child{border-bottom:1px solid var(--line)}.ep .no{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--mut);letter-spacing:.06em}
.ep h3{font-size:24px}.ep p{margin:4px 0 0;color:var(--mut);font-size:15px}
.tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);padding:6px 11px;color:var(--mut);white-space:nowrap}.tag.now{color:var(--acc);border-color:var(--acc)}.tag.soon{opacity:.6}
@media(max-width:620px){.ep{grid-template-columns:34px minmax(0,1fr) auto;gap:12px;padding:16px 8px}.ep p{font-size:14px}.ep .tag{font-size:10px;padding:5px 8px}}
@media(max-width:680px){.hero section{min-height:100svh;padding:80px 20px 64px}.hero section:first-of-type{padding-top:calc(50svh + 28px);padding-bottom:64px}.hero h1{font-size:clamp(42px,12vw,64px)}.hero section:first-of-type h1{font-size:clamp(30px,8.5vw,44px)}.hero .eyebrow{text-wrap:balance}.hero-cta{flex-direction:column;align-items:center}.hero-cta .btn{width:min(100%,260px);text-align:center}.hero h2{font-size:clamp(32px,9vw,48px)}.s{font-size:16px;margin-top:16px}.hint{bottom:calc(10px + env(safe-area-inset-bottom,0px));font-size:10px}.hint i{height:22px}.skipintro{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:9px 11px;font-size:10px}.w{padding-left:16px;padding-right:16px}section.b{padding:64px 0}.g3{grid-template-columns:1fr;margin-top:30px}.card,.mod{padding:22px}.strip{grid-template-columns:repeat(2,1fr)}.strip div:nth-child(2){border-right:0}.strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}.cta{padding:32px 18px}.form{display:grid;grid-template-columns:1fr}.form input,.form button{width:100%;max-width:none;min-height:50px}}
@media(max-height:700px){.hero section:first-of-type{padding-top:calc(50svh + 24px)}.hero .eyebrow{margin-bottom:10px}.hero-cta{margin-top:18px;gap:8px}}
@media(max-width:760px){.fg{gap:28px}}
@media(max-width:520px){.fg{grid-template-columns:1fr}.fb{margin-top:34px}.ep{grid-template-columns:30px minmax(0,1fr);align-items:start}.ep .tag{grid-column:2;justify-self:start;margin-top:2px}}
.mod{background:var(--pan);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:10px}
.mod b{font-size:24px;font-family:"Instrument Serif",serif;font-weight:400}.mod p{margin:0;color:var(--mut);font-size:15px;flex:1}.mod .tag{align-self:flex-start}
details{border-top:1px solid var(--line);padding:0}details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:18px;padding:18px 0}summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--acc)}details[open] summary::after{content:"−"}details p{color:var(--mut);margin:-6px 0 18px;max-width:70ch}
.cta{background:var(--pan2);border:1px solid var(--line);padding:clamp(34px,6vw,64px);text-align:center}
.form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.form input{flex:1 1 260px;max-width:360px;background:#ffffff0d;border:1px solid var(--line);color:var(--ink);padding:14px 16px;font:16px Manrope,sans-serif}
.ok{color:var(--acc);font-size:14px;margin-top:12px;min-height:20px}.form .ok{flex:1 0 100%}.ok[data-state="error"]{color:#ff7b7f}.ok[data-state="pending"]{color:var(--mut)}
footer{border-top:1px solid var(--line);background:var(--pan);padding:56px 0 28px}
.fg{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}@media(max-width:760px){.fg{grid-template-columns:1fr 1fr}}
footer h4{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mut);margin:0 0 16px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}footer a{color:var(--mut);text-decoration:none;font-size:15px}footer a:hover{color:var(--ink)}
.fb{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:44px;padding-top:22px;color:var(--mut);font-size:12.5px;font-family:"IBM Plex Mono",monospace}

/* scroll progress */
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.prog i{display:block;height:2px;width:0;background:var(--acc);box-shadow:0 0 10px var(--acc)}
/* chapter rail */
.rail{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:6;display:grid;gap:0;transition:opacity .5s,visibility .5s}.rail.gone{opacity:0;visibility:hidden}
.rail button{display:flex;align-items:center;gap:12px;background:none;border:0;padding:6px 4px;color:var(--mut);font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;text-align:left}
.rail b{width:6px;height:6px;border-radius:50%;background:#ffffff2e;transition:.35s;flex:none}.rail button:hover b{background:#ffffff90}
.rail span{opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s;white-space:nowrap;text-shadow:0 1px 10px #000}
.rail button:hover span,.rail button:focus-visible span,.rail.flash button.on span{opacity:1;transform:none}
.rail button.on b{background:var(--acc);box-shadow:0 0 12px var(--acc);transform:scale(1.5)}.rail button.on span{color:var(--ink)}
@media(max-width:900px){.rail{display:none}}
/* texture + depth */
.page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
background:radial-gradient(900px 500px at 15% 0%,#2de2c516,transparent 70%),radial-gradient(700px 500px at 90% 60%,#2de2c50f,transparent 70%)}
/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.g3>.rv:nth-child(2),.g3>.rv:nth-child(3),.g3>.rv:nth-child(4){transition-delay:.09s}
.g3>.rv:nth-child(3){transition-delay:.18s}.g3>.rv:nth-child(4){transition-delay:.27s}
/* stat strip */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip div{padding:26px 22px;border-right:1px solid var(--line)}.strip div:last-child{border-right:0}
.strip b{font-family:"Instrument Serif",serif;font-weight:400;font-size:34px;display:block;line-height:1}
.strip span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);display:block;margin-top:8px}
/* episode row polish */
.ep{cursor:default;transition:background .3s,padding .3s}.ep:hover{background:#ffffff06}
.ep.live:hover h3{color:var(--acc)}
.ep .arr{display:inline-block;margin-left:6px;font-size:.8em}
.ep .arr{opacity:0;transform:translateX(-6px);transition:.3s;color:var(--acc)}.ep:hover .arr{opacity:1;transform:none}
/* links + buttons */
.lk a.current{color:var(--acc)}
.lk a:not(.btn){position:relative}.lk a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--acc);transition:right .35s}
.lk a:not(.btn):hover::after,.lk a.current:not(.btn)::after{right:0}
.btn{transition:transform .25s,filter .25s}.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
details{transition:border-color .3s}details[open]{border-color:var(--acc)}
.skip{position:absolute;left:-9999px;background:var(--acc);color:#04211d;padding:10px 16px;z-index:50}.skip:focus{left:12px;top:12px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.t,.card,.rv,.btn{transition:none}.rv{opacity:1;transform:none}.words span{opacity:1;transform:none;filter:none;transition:none}.hint i,.ico .eq i{animation:none}}

/* ---------- page below the story ---------- */
.page{border-top:0}
.page .fade{position:absolute;left:0;right:0;top:-180px;height:180px;background:linear-gradient(#03050700,var(--bg));pointer-events:none}
.strip b{font-size:clamp(34px,4vw,48px)}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono-s{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase}
/* tool marquee */
.stack{margin-top:34px}
.stack-l{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:0 0 18px}
.marq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-t{display:flex;gap:34px;list-style:none;margin:0;padding:0 34px 0 0;flex:none;animation:marq 70s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq-t li{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:14px;white-space:nowrap;transition:color .3s}
.marq-t img{width:22px;height:22px;filter:grayscale(1) brightness(1.8);opacity:.5;transition:filter .3s,opacity .3s}
.marq-t li:hover{color:var(--ink)}.marq-t li:hover img{filter:none;opacity:1}
.marq-t .tx b{font:500 10px/1 "IBM Plex Mono",monospace;border:1px solid var(--line);padding:5px 6px;color:var(--mut)}
@keyframes marq{to{transform:translateX(-100%)}}
/* Case 01: featured case file */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);margin-top:44px;border:1px solid var(--line);background:linear-gradient(135deg,#0c141b,#070b0f 60%);position:relative;overflow:hidden}
.case::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 320px at 0% 0%,#ff4d4f14,transparent 60%),radial-gradient(520px 320px at 100% 100%,#2de2c510,transparent 60%);pointer-events:none}
.case-l{padding:clamp(26px,4vw,44px);position:relative;display:flex;flex-direction:column;align-items:flex-start}
.sev{display:inline-flex;align-items:center;gap:9px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:#ff7b7f;border:1px solid #ff4d4f55;background:#ff4d4f12;padding:7px 11px;margin:0}
.sev i{width:7px;height:7px;border-radius:50%;background:#ff4d4f;animation:sev 1.6s infinite}
@keyframes sev{0%{box-shadow:0 0 0 0 #ff4d4f99}70%{box-shadow:0 0 0 9px #ff4d4f00}100%{box-shadow:0 0 0 0 #ff4d4f00}}
.case-no{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:26px 0 10px}
.case h3{font-size:clamp(38px,4.6vw,58px);line-height:1}.case h3 a{text-decoration:none;transition:color .3s}.case h3 a:hover{color:var(--acc)}
.case-log{color:var(--mut);font-size:17px;margin:16px 0 0;max-width:40ch}
.case-meta{display:flex;gap:14px;list-style:none;padding:0;margin:22px 0 0;font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.case-meta li+li::before{content:"·";margin-right:14px;color:var(--mut)}
.case-stages{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 30px}
.case-stages span{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--acc);border:1px solid #2de2c540;background:#2de2c50d;padding:6px 9px}
.case-l .btn{margin-top:auto}
.term{background:#05090ccc;border-left:1px solid var(--line);display:flex;flex-direction:column;position:relative;min-width:0}
.term-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line)}
.term-bar i{width:9px;height:9px;border-radius:50%;background:#1d2a35}.term-bar i:first-child{background:#ff4d4f99}
.term-bar span{margin-left:10px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--mut)}
.term-body{margin:0;padding:24px 22px 28px;font:13px/1.95 "IBM Plex Mono",ui-monospace,monospace;color:#c7d3dc;white-space:pre;overflow:hidden}
.term .ln{display:block;overflow:hidden;white-space:pre}
.term .ln.a{color:#ff7b7f}.term .ln.o{color:#7fe8d6}.term .ln.c{color:var(--warn)}.term .ln.p{color:var(--ink)}
.term .cur{color:var(--acc);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* the log types itself out once the case scrolls into view */
.js .case .ln{width:0}
.js .case.in .ln{animation:type calc(var(--n)*16ms) steps(var(--n)) forwards;animation-delay:var(--d)}
@keyframes type{to{width:calc(var(--n)*1ch + 2ch)}}
/* upcoming cases */
.locked{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.lc{border:1px solid var(--line);background:var(--pan);padding:24px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s,transform .3s}
.lc:hover{border-color:#2de2c566;transform:translateY(-3px)}
.lc-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lc-no{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.lc-tag{font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);border:1px solid #ffb54740;padding:5px 8px}
.lc h3{font-size:26px;margin-top:6px}.lc p{color:var(--mut);font-size:15px;margin:0;flex:1}
.lc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:500 11.5px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-decoration:none;transition:color .3s}
.lc-cta:hover{color:var(--acc)}.lc-cta .ic{width:14px;height:14px}
.lc h3 a{color:inherit;text-decoration:none;transition:color .3s}.lc h3 a:hover{color:var(--acc)}
.lc.live{border-color:#2de2c533}.lc.live .lc-tag{color:var(--acc);border-color:#2de2c540}.lc.live .lc-cta{color:var(--acc)}
.lc p.lc-meta{flex:none;display:flex;gap:14px;flex-wrap:wrap;font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.lc-live{display:inline-flex;align-items:center;gap:7px;color:var(--acc)}.lc-live i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
@media(max-width:1000px){.locked{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* whole cards are clickable: the title link (or the notify link on upcoming cases) stretches over the card */
.lc{position:relative}
.lc h3 a::after,.lc a.lc-cta::after{content:"";position:absolute;inset:0}
.lc h3 a:focus-visible,.lc a.lc-cta:focus-visible{outline:none}
.lc h3 a:focus-visible::after,.lc a.lc-cta:focus-visible::after{outline:2px solid var(--acc);outline-offset:3px}
.lc.live:hover h3 a,.lc:hover .lc-cta{color:var(--acc)}
.case{isolation:isolate;transition:border-color .3s}.case::before{z-index:-1}.case-l{position:static}
.case h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.case h3 a:focus-visible{outline:none}.case h3 a:focus-visible::after{outline:2px solid var(--acc);outline-offset:-2px}
.case-l .btn{position:relative;z-index:2}
.case:hover{border-color:#2de2c566}.case:hover h3 a{color:var(--acc)}
/* get paged */
.join{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center;border:1px solid var(--line);background:var(--pan2);padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.join::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 320px at 100% 0%,#2de2c514,transparent 65%);pointer-events:none}
.join-l{position:relative}.join h2.h{max-width:14ch}.join .form{justify-content:flex-start}
.mail{position:relative;background:#0b1218;border:1px solid var(--line);padding:18px 18px 20px;box-shadow:0 30px 60px -30px #000;transform:translateY(40px) rotate(-3deg)}
.mail.in{transform:rotate(-1.2deg)}
.mail-row{display:flex;align-items:center;gap:10px;font-size:14px}
.mail-av{width:28px;height:28px;display:grid;place-items:center;background:var(--acc);color:#04211d;font-weight:700;font-size:15px}
.mail-row time{margin-left:auto;font:500 11px/1 "IBM Plex Mono",monospace;color:var(--mut)}
.mail-sub{margin:14px 0 6px;font-weight:600;font-size:16px}
.mail-pre{margin:0;color:var(--mut);font-size:14.5px}
.mail-btn{display:inline-block;margin-top:16px;background:var(--acc);color:#04211d;font-weight:600;font-size:13px;padding:8px 12px}
/* how it works: three stages on one line */
.flow{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;position:relative}
.flow::before{content:"";position:absolute;left:28px;right:28px;top:28px;height:1px;background:linear-gradient(90deg,var(--line),#2de2c570,var(--line))}
.flow::after{content:"";position:absolute;top:25px;left:28px;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc);opacity:0}
.flow.in::after{animation:flowdot 3.4s cubic-bezier(.5,0,.3,1) .5s infinite}
@keyframes flowdot{0%{left:28px;opacity:0}10%,90%{opacity:1}100%{left:calc(100% - 35px);opacity:0}}
.flow li{position:relative;padding-top:80px}
.fi{position:absolute;top:0;left:0;width:56px;height:56px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);color:var(--acc);z-index:1;transition:border-color .3s}
.flow li:hover .fi{border-color:var(--acc)}.fi .ic{width:24px;height:24px}
.flow .k{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.2em;color:var(--acc);display:block;margin-bottom:12px}
.flow h3{font-size:26px;margin-bottom:10px}.flow p{color:var(--mut);margin:0;font-size:15.5px;max-width:34ch}
/* who it's for */
.ci{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);color:var(--acc);margin-bottom:18px}.ci .ic{width:20px;height:20px}
/* modules with previews */
.mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.pv{height:116px;background:#05090c;border:1px solid var(--line);margin-bottom:8px;padding:14px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.pv code{font:11.5px/1.75 "IBM Plex Mono",ui-monospace,monospace;color:#c7d3dc;white-space:pre}
.pv .kw{color:#c792ea}.pv .fn{color:#7fe8d6}.pv .st{color:var(--warn)}
.pv-meta{margin-top:8px;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pv-story{align-items:flex-start}.pv-story .pv-l{font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.pv-story .zero{font-family:"Instrument Serif",serif;font-size:54px;line-height:1;color:#ff4d4f;margin-top:8px;text-shadow:0 0 24px #ff4d4f55}
.pv-chat{gap:8px;justify-content:flex-start}.pv-chat span{font-size:12px;line-height:1.4;padding:7px 10px;max-width:92%}
.pv-chat .q{align-self:flex-end;background:#1d2a35}.pv-chat .a{background:#2de2c514;border:1px solid #2de2c533;color:#bfeee5}
/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq-l{position:sticky;top:110px}.faq-mail{color:var(--mut);margin:22px 0 0}.faq-mail a{color:var(--acc)}
/* closing signup */
section.b.slim{padding-top:0}
.band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;border:1px solid var(--line);border-left:2px solid var(--acc);background:var(--pan);padding:28px 32px}
.band .eyebrow{margin-bottom:10px}.band-h{font-size:clamp(26px,3vw,36px);line-height:1.1;max-width:22ch}
.band .form{margin:0;justify-content:flex-end}
.totop{color:var(--mut);text-decoration:none}.totop:hover{color:var(--acc)}
@media(max-width:1000px){.mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.case{grid-template-columns:1fr}.term{border-left:0;border-top:1px solid var(--line)}.join{grid-template-columns:1fr}.faq{grid-template-columns:1fr}.faq-l{position:static}.band{grid-template-columns:1fr}.band .form{justify-content:flex-start}}
@media(max-width:760px){.locked{grid-template-columns:1fr}}
@media(max-width:680px){
.term-body{font-size:11.5px;white-space:pre-wrap;padding:18px 16px 22px}.js .case .ln{width:auto;white-space:pre-wrap;opacity:0}.js .case.in .ln{animation:fadeln .35s forwards;animation-delay:var(--d)}
.flow{grid-template-columns:1fr;gap:30px}.flow::before{left:28px;right:auto;top:28px;bottom:28px;width:1px;height:auto;background:linear-gradient(var(--line),#2de2c570,var(--line))}
.flow::after{left:25px;top:28px}.flow.in::after{animation-name:flowdotv}.flow li{padding:0 0 0 80px;min-height:56px}
.mods{grid-template-columns:1fr}.case-meta{flex-wrap:wrap}.mail{transform:translateY(40px) rotate(-2deg)}}
@keyframes fadeln{to{opacity:1}}
@keyframes flowdotv{0%{top:28px;opacity:0}10%,90%{opacity:1}100%{top:calc(100% - 35px);opacity:0}}
@media(prefers-reduced-motion:reduce){.marq{flex-wrap:wrap}.marq-t{animation:none;flex-wrap:wrap;row-gap:14px}.marq-t[aria-hidden]{display:none}
.js .case .ln,.js .case.in .ln{width:auto;opacity:1;animation:none}.sev i,.term .cur{animation:none}.flow.in::after{animation:none}.mail,.mail.in{transform:rotate(-1.2deg)}}
/* phones (kept last so these win over the base rules above) */
@media(max-width:680px){
.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.strip div{padding:22px 14px}.strip span{font-size:10.5px;letter-spacing:.1em}
.lc-cta{min-height:44px;margin-top:0}
.skipintro{min-height:40px;display:inline-flex;align-items:center;gap:6px;padding:0 13px}
.sndp{left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));min-height:40px;padding:0 13px;font-size:10px}
footer ul{gap:0}footer ul a{display:inline-block;padding:10px 0}
.fg{grid-template-columns:1fr 1fr;gap:18px 24px}.fg>div:first-child{grid-column:1/-1;margin-bottom:6px}}