/* Electronica — dark engineering look (same feel as the reels). Mobile first. */
@font-face{font-family:"ID";src:url(/static/fonts/display-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"IS";src:url(/static/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Mono";src:url(/static/fonts/mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mono";src:url(/static/fonts/mono-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
 --bg:#03060b;--bg2:#070d16;--panel:rgba(10,18,30,.78);--panel2:#0b1522;--line:rgba(120,200,230,.14);--line2:rgba(120,200,230,.26);
 --text:#e7f2f8;--muted:#8fa6b6;--dim:#5d7384;
 --cyan:#00e0ff;--amber:#ffb224;--red:#ff4a44;--green:#46ff96;--violet:#b278ff;--teal:#28dcaa;--blue:#6eaaff;
 --acc:var(--cyan);--acc2:var(--amber);
 --glow:0 0 18px color-mix(in srgb,var(--acc) 45%,transparent);
 --grid:rgba(0,224,255,.045);
 --r:14px;--fs:clamp(15px,1.1vw + 11px,17px);
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --disp:"ID","IS",var(--sans);--mono:"Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 color-scheme:dark;
}
:root[data-theme=light]{
 --bg:#eef3f7;--bg2:#e3ebf1;--panel:rgba(255,255,255,.9);--panel2:#fff;--line:rgba(10,40,60,.12);--line2:rgba(10,40,60,.22);
 --text:#0b1620;--muted:#45596a;--dim:#6b7d8b;
 --cyan:#0080a3;--amber:#a86500;--red:#c42a24;--green:#0b8547;--violet:#6a3fcf;--teal:#08826a;--blue:#2c5fc4;
 --glow:none;--grid:rgba(0,90,120,.06);color-scheme:light;
}
[data-type=why],.t-why{--acc:var(--amber);--acc2:#ff9632}
[data-type=myth],.t-myth{--acc:var(--red);--acc2:var(--green)}
[data-type=quiz],.t-quiz{--acc:var(--violet);--acc2:var(--cyan)}
[data-type=buyer],.t-buyer{--acc:var(--teal);--acc2:var(--amber)}
[data-type=story],.t-story{--acc:var(--blue);--acc2:#ecdab0}
.t-lesson{--acc:var(--cyan);--acc2:var(--amber)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs)/1.6 var(--sans);
 background-image:radial-gradient(1200px 600px at 15% -10%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 60%),
 linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
 background-size:auto,48px 48px,48px 48px;background-attachment:fixed,scroll,scroll;min-height:100vh;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:.2em 0 .45em}
h1{font-size:clamp(30px,6.5vw,58px)}
h2{font-size:clamp(22px,3.6vw,32px)}
p{margin:.5em 0 1em}
.mono{font-family:var(--mono);letter-spacing:.02em}
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--acc);text-transform:uppercase}
.muted{color:var(--muted)}.tiny{font-size:12px;color:var(--dim)}
.lead{font-size:clamp(17px,1.4vw + 12px,21px);color:var(--muted);max-width:44em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:9;background:var(--acc);color:#000;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
.blk{padding-top:clamp(28px,5vw,56px)}
.glow{color:var(--acc);text-shadow:var(--glow)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}

/* HUD corner brackets */
.hud{position:relative}
.hud::after{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
 --c:var(--acc);--l:16px;--w:2px;
 background:linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 0 0/var(--w) var(--l),
 linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 100% 0/var(--w) var(--l),
 linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 0 100%/var(--w) var(--l),
 linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 100% 100%/var(--w) var(--l);
 background-repeat:no-repeat;opacity:.9}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:16px;height:60px}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);min-width:0}
.logo:hover{text-decoration:none}
.logo-mark{width:30px;height:30px;border-radius:8px;flex:none;background:#03060b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 34h10l4-12 6 22 6-26 6 22 4-6h16' fill='none' stroke='%2300e0ff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%;box-shadow:0 0 0 1px var(--line2),0 0 14px rgba(0,224,255,.25)}
.logo-t{font-family:var(--mono);font-weight:700;letter-spacing:.2em;font-size:15px}
.logo-h{font-family:var(--mono);font-size:11px;color:var(--muted);display:none}
.nav{display:none;gap:4px;margin-left:auto}
.nav a{color:var(--muted);padding:8px 12px;border-radius:8px;font-weight:600}
.nav a:hover,.nav a[aria-current]{color:var(--text);background:var(--line);text-decoration:none}
.top-act{display:flex;gap:6px;margin-left:auto;align-items:center}
.ibtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;padding:0}
.ibtn svg{width:20px;height:20px}
.ibtn:hover{border-color:var(--acc);color:var(--acc)}
.menu{position:relative}
.menu summary{list-style:none;display:grid;gap:4px;align-content:center;justify-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.menu-p{position:absolute;right:0;top:52px;min-width:220px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:8px;display:grid;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.menu-p a{padding:12px 14px;border-radius:8px;color:var(--text);font-weight:600}
.menu-p a:hover{background:var(--line);text-decoration:none}
@media(min-width:880px){.nav{display:flex}.menu{display:none}.top-act{margin-left:8px}.logo-h{display:inline}}

/* buttons + chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;
 border:1px solid var(--line2);background:var(--panel);color:var(--text);font:600 15px/1 var(--sans);cursor:pointer;white-space:nowrap;
 transition:border-color .2s,box-shadow .2s,transform .1s}
.btn:hover{text-decoration:none;border-color:var(--acc);box-shadow:var(--glow)}
.btn:active{transform:translateY(1px)}
.btn svg{width:20px;height:20px;flex:none}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#02060a;box-shadow:var(--glow)}
:root[data-theme=light] .btn.pri{color:#fff}
.btn.sm{min-height:44px;padding:0 14px;font-size:14px}
.btn.yt svg{color:#ff2a2a}.btn.ig svg{color:#e1306c}
.btn.yt.pri,.btn.ig.pri{color:#fff}.btn.ig.pri{background:linear-gradient(45deg,#f58529,#dd2a7b 50%,#8134af);border-color:transparent}
.btn.ig.pri svg{color:#fff}
.btn.yt.pri{background:#e00;border-color:#e00;box-shadow:0 0 18px rgba(255,0,0,.35)}.btn.yt.pri svg{color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 11px;border-radius:999px;font:700 11.5px/1.2 var(--mono);
 letter-spacing:.08em;text-transform:uppercase;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
 background:color-mix(in srgb,var(--acc) 10%,transparent)}
a.chip:hover{text-decoration:none;border-color:var(--acc)}
.chip.ghost{color:var(--muted);border-color:var(--line2);background:transparent}
button.chip{cursor:pointer;min-height:40px;padding:6px 14px}
button.chip[aria-pressed=true]{background:var(--acc);color:#02060a}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
@media(min-width:900px){.hero{min-height:min(84vh,640px);display:flex;align-items:center}}
#scope{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--bg),transparent 25%)}
@media(min-width:900px){.hero::after{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 42%,transparent 80%),linear-gradient(0deg,var(--bg),transparent 30%)}}
.hero-in{position:relative;z-index:1;padding-top:36px;padding-bottom:150px}
@media(min-width:900px){.hero-in{padding-top:48px;padding-bottom:48px}}
.hero h1{max-width:12.5em;font-size:clamp(38px,8.4vw,80px)}
.hero .kick{line-height:1.7}
.hero .lead{max-width:30em}
.nw{white-space:nowrap}
.rec{display:inline-block;margin-right:8px;vertical-align:1px;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.readout{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);letter-spacing:.1em}

/* section heads */
.blk-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.blk-h h2{margin-bottom:0}.blk-h p{margin:0}
.more{font-weight:600;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}

/* reel cards */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:620px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,42%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin}
@media(min-width:620px){.rail{grid-auto-columns:200px}}
.rail .rc{scroll-snap-align:start}
.rc{display:flex;flex-direction:column;gap:10px;color:var(--text);min-width:0}
.rc:hover{text-decoration:none}
.rc-img{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--panel2);border:1px solid var(--line);transition:border-color .2s,box-shadow .25s,transform .25s}
.rc-img img{width:100%;height:100%;object-fit:cover}
.rc:hover .rc-img{border-color:var(--acc);box-shadow:var(--glow);transform:translateY(-2px)}
.rc-n{position:absolute;left:8px;top:8px;background:var(--acc);color:#02060a;font-weight:700;font-size:13px;padding:3px 8px;border-radius:6px}
.rc-b{display:grid;gap:4px}
.rc-k{font-size:11px;color:var(--acc);text-transform:uppercase;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-t{font-weight:700;line-height:1.3;font-size:15px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* stamps (myth) */
.stamp{display:inline-block;font:700 15px/1 var(--mono);letter-spacing:.12em;padding:8px 12px;border:3px solid currentColor;border-radius:6px;transform:rotate(-8deg);text-transform:uppercase;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.stamp.myth{color:var(--red)}.stamp.fact{color:var(--green)}.stamp.half{color:var(--amber)}
.stamp.sm{font-size:10px;padding:4px 6px;border-width:2px}
.rc-img .stamp{position:absolute;right:8px;top:10px}
.verdict{display:flex;align-items:center;gap:16px;margin:4px 0 18px}
.verdict .stamp{font-size:clamp(22px,4vw,32px);padding:10px 18px;border-width:4px;box-shadow:0 0 22px color-mix(in srgb,currentColor 35%,transparent)}
.verdict .mono{color:var(--muted);font-size:12px;letter-spacing:.14em}

/* series cards */
.sgrid{display:grid;gap:14px}
@media(min-width:760px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sgrid{grid-template-columns:repeat(3,1fr)}}
.sc{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);color:var(--text);transition:border-color .2s,box-shadow .2s}
.sc:hover{text-decoration:none;border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:var(--glow)}
.sc-g{display:grid;place-items:center;min-width:58px;height:58px;padding:0 6px;border-radius:12px;font-weight:700;font-size:15px;color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);text-shadow:var(--glow)}
.sc-b{display:grid;gap:3px;min-width:0}
.sc-k{font-size:10.5px;color:var(--acc);letter-spacing:.14em;text-transform:uppercase}
.sc-t{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.15}
.sc-p{font-size:13.5px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-c{font-size:11.5px;color:var(--dim)}
.sc-th{display:flex}
.sc-th img{width:38px;height:68px;object-fit:cover;border-radius:6px;border:1px solid var(--line2);margin-left:-14px;background:var(--panel2)}
.sc-th img:first-child{margin-left:0}
@media(max-width:420px){.sc-th{display:none}.sc{grid-template-columns:auto 1fr}}
.prog{display:block;height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:6px}
.prog span{display:block;height:100%;background:linear-gradient(90deg,var(--acc),color-mix(in srgb,var(--acc) 60%,#fff));box-shadow:var(--glow)}
.prog.big{height:10px;max-width:520px}

/* series page */
.shead .btn{margin-top:8px}
.lessons{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ls>a,.ls>div{display:grid;grid-template-columns:34px 72px 1fr;gap:14px;align-items:center;padding:12px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);color:var(--text)}
.ls>a:hover{text-decoration:none;border-color:var(--acc);box-shadow:var(--glow)}
.ls img,.ls-ph{width:72px;height:128px;object-fit:cover;border-radius:8px;border:1px solid var(--line2)}
.ls-ph{display:grid;place-items:center;font-size:11px;color:var(--dim);background:repeating-linear-gradient(135deg,transparent 0 8px,var(--line) 8px 9px)}
.ls-n{font-size:20px;font-weight:700;color:var(--acc);text-align:center}
.ls-b{display:grid;gap:4px;min-width:0}
.ls-t{font-weight:700;font-size:17px;line-height:1.3}
.ls-l{color:var(--muted);font-size:14.5px;line-height:1.45}
.ls.soon>div{background:transparent;border-style:dashed;opacity:.7}
.ls.soon .ls-n{color:var(--dim)}
.ls.next>div{opacity:1;border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.ls.next .ls-ph{color:var(--acc)}
.ls .stamp.sm{transform:none;margin-left:4px;vertical-align:1px}

/* lesson page */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;font-size:12px;color:var(--dim)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--dim)}
.crumbs a{color:var(--muted)}
.crumbs li[aria-current]{max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lh-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.lh h1{font-size:clamp(28px,5.2vw,50px);max-width:20em}
.lgrid{display:grid;gap:26px;align-items:start}
.lgrid>*{min-width:0}
@media(min-width:900px){.lgrid{grid-template-columns:minmax(300px,380px) 1fr;gap:44px}.lcol-v{position:sticky;top:84px}}
.player{border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line2);aspect-ratio:9/16;max-width:420px;margin:0 auto;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.lite{all:unset;position:relative;display:block;width:100%;height:100%;cursor:pointer}
.lite img{width:100%;height:100%;object-fit:cover}
.lite-p{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(0,0,0,.25),transparent 60%)}
.lite-p svg{width:76px;height:54px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));transition:transform .2s}
.lite:hover .lite-p svg,.lite:focus-visible .lite-p svg{transform:scale(1.1)}
.lite:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
.player iframe{width:100%;height:100%;border:0;display:block}
.soon-b{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;border:1px solid rgba(255,255,255,.25);padding:8px 12px;border-radius:999px;font-size:12px;white-space:nowrap}
.pl-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.learn{padding:16px 18px;border-radius:var(--r);background:color-mix(in srgb,var(--acc) 8%,var(--panel));border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);margin-bottom:18px}
.learn p{margin:.3em 0 0;font-size:18px;font-weight:600}
.notes{margin-bottom:18px}
.notes p{max-width:42em}
.notes strong{color:var(--acc);font-weight:700}
code.ln{display:inline-block;font:14px/1.5 var(--mono);background:var(--panel2);border:1px solid var(--line);padding:1px 8px;border-radius:6px;color:var(--text);margin:2px 0}
.code{border-radius:var(--r);background:var(--panel2);border:1px solid var(--line2);margin:0 0 18px;overflow:hidden}
.code-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-bottom:1px solid var(--line);font-size:11px;color:var(--acc);letter-spacing:.1em}
.copy{min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--text);font:600 13px var(--sans);cursor:pointer}
.copy:hover{border-color:var(--acc);color:var(--acc)}
.code pre{margin:0;padding:14px 16px;overflow-x:auto;font:14px/1.6 var(--mono);color:var(--text);tab-size:4}
.note{padding:14px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--panel);margin:0 0 16px;font-size:15px}
.note .mono{font-size:11px;color:var(--acc);letter-spacing:.12em;margin-right:6px}
.note.warn{border-color:color-mix(in srgb,var(--amber) 50%,transparent);background:color-mix(in srgb,var(--amber) 8%,var(--panel))}
.note.warn strong{color:var(--amber)}
.tr{margin:0 0 18px;border:1px solid var(--line);border-radius:12px;padding:0 14px}
.tr summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-size:13px;color:var(--muted)}
.tr ol{margin:0 0 14px;padding-left:20px;color:var(--muted)}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.share>.mono{font-size:11px;color:var(--dim);letter-spacing:.14em;margin-right:4px}
.pn{display:grid;gap:12px;margin-top:34px}
@media(min-width:700px){.pn{grid-template-columns:1fr 1fr}}
.pn-a{display:grid;gap:4px;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line2);background:var(--panel);color:var(--text);font-weight:700}
.pn-a:hover{text-decoration:none;border-color:var(--acc);box-shadow:var(--glow)}
.pn-a .mono{font-size:11px;color:var(--acc);letter-spacing:.12em;font-weight:400}
.pn-a.nx{text-align:right}
.pn-a.soon{border-style:dashed}.pn-a small{color:var(--muted);font-weight:400}

/* quiz */
.quiz{padding:18px;border-radius:var(--r);background:color-mix(in srgb,var(--acc) 7%,var(--panel));border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);margin-bottom:18px}
.quiz h2{font-size:clamp(19px,2.6vw,24px)}
.qa-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qa{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:700 16px var(--sans);cursor:pointer;text-align:left}
.qa .mono{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);flex:none}
.qa:hover:not([disabled]){border-color:var(--acc)}
.qa[disabled]{cursor:default}
.qa.ok{border-color:var(--green);background:color-mix(in srgb,var(--green) 14%,var(--panel2))}
.qa.ok .mono{background:var(--green);color:#02060a}
.qa.bad{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--panel2))}
.qa-res{min-height:1.5em;margin:12px 0 0;font-weight:700}
.spoil{position:relative}
.spoil:not(.open)>p{filter:blur(7px);user-select:none;pointer-events:none}
.spoil-b{position:absolute;left:50%;top:24px;transform:translateX(-50%)}
.spoil.open .spoil-b{display:none}

/* signup + follow */
.signup{padding:clamp(20px,4vw,36px);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 12%,var(--panel)),var(--panel));border:1px solid color-mix(in srgb,var(--acc) 35%,transparent)}
.signup h2{max-width:20em}
.su-form{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}
.su-form input{flex:1 1 220px;min-height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);color:var(--text);font:16px var(--sans)}
.su-form input:focus{outline:none;border-color:var(--acc);box-shadow:var(--glow)}
.su-form .btn{min-height:52px}
.su-ok{color:var(--green);font-weight:700}
.follow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:22px;border:1px dashed var(--line2);border-radius:18px}

/* search */
.sbox{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px}
.sbox input,.sbox select{min-height:52px;border-radius:12px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:16px var(--sans);padding:0 16px}
.sbox input{flex:1 1 280px}.sbox select{flex:0 1 240px}
.sbox input:focus,.sbox select:focus{outline:none;border-color:var(--acc);box-shadow:var(--glow)}
.tfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}

/* more page + prose */
.prose{max-width:860px}
.prose li{margin:.35em 0}
.mgrid{display:grid;gap:16px;margin-top:10px}
@media(min-width:760px){.mgrid{grid-template-columns:1fr 1fr}}
.mc{display:flex;flex-direction:column;align-items:flex-start;padding:22px;border-radius:18px;background:var(--panel);border:1px solid var(--line);color:var(--text)}
.mc:hover{text-decoration:none;border-color:var(--acc);box-shadow:var(--glow)}
.mc p{color:var(--muted);flex:1}
.checks{list-style:none;padding:0;display:grid;gap:8px}
.checks li{padding-left:28px;position:relative}
.checks li::before{content:"✓";position:absolute;left:4px;color:var(--acc);font-weight:700}

/* footer */
.foot{margin-top:70px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 80%,transparent);padding:36px 0 26px}
.foot-in{display:grid;gap:26px}
@media(min-width:800px){.foot-in{grid-template-columns:1.2fr 1fr}}
.foot-brand p{color:var(--muted);margin:.4em 0 1em}
.soc{display:flex;gap:10px;flex-wrap:wrap}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.foot-nav a{color:var(--muted);min-height:44px;display:flex;align-items:center}
.foot-small{margin-top:20px;font-size:11px;color:var(--dim)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}