:root{--bg:#0b0a14;--card:#15132a;--card2:#15132acc;--ink:#f1efff;--mute:#a6a2cc;--a:#b86bff;--b:#2ee6c8;--c:#ff5fa2;--red:#ff4d5e;--line:#2a2750;--fs:16px}
*{box-sizing:border-box;margin:0}
html{font-size:var(--fs);scroll-behavior:smooth}
body{font-family:Heebo,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;overflow-x:hidden}
a{color:var(--b)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;top:-60px;right:10px;background:#fff;color:#000;padding:8px 14px;z-index:100;border-radius:8px}
.skip:focus{top:10px}
:focus-visible{outline:3px solid #ffd400;outline-offset:3px}

/* live background */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;opacity:.4;will-change:transform}
.b1{width:800px;height:800px;top:-260px;right:-220px;background:radial-gradient(closest-side,var(--a) 30%,color-mix(in srgb,var(--a) 50%,transparent) 65%,transparent);animation:drift1 22s ease-in-out infinite alternate}
.b2{width:720px;height:720px;top:calc(40% - 140px);left:-280px;background:radial-gradient(closest-side,var(--b) 22%,color-mix(in srgb,var(--b) 50%,transparent) 61%,transparent);animation:drift2 26s ease-in-out infinite alternate}
.b3{width:660px;height:660px;bottom:-280px;right:calc(30% - 140px);background:radial-gradient(closest-side,var(--c) 15%,color-mix(in srgb,var(--c) 50%,transparent) 58%,transparent);animation:drift3 30s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-260px,220px) scale(1.25)}}
@keyframes drift2{to{transform:translate(320px,-180px) scale(.8)}}
@keyframes drift3{to{transform:translate(-200px,-260px) scale(1.2)}}
canvas#dots{position:fixed;inset:0;z-index:0;pointer-events:none}
main,header.site,footer.site{position:relative;z-index:1}

/* header */
header.site{display:flex;justify-content:space-between;align-items:center;padding:18px 6vw;gap:12px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo span{font-weight:900;font-size:1.75rem;letter-spacing:1px;background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--a));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 8s linear infinite}
.logo .mark{width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 1px var(--line);animation:spinmark 14s linear infinite}
.logo:hover .mark{animation-duration:3s}
@keyframes spinmark{to{transform:rotate(360deg)}}
nav#nav{display:flex;align-items:center;flex-wrap:wrap;gap:4px 22px}
nav#nav a{color:var(--mute);text-decoration:none;font-weight:500;position:relative}
nav#nav a:after{content:"";position:absolute;inset:auto 0 -4px 0;height:2px;background:var(--b);transform:scaleX(0);transition:.3s}
nav#nav a:hover,nav#nav a[aria-current]{color:var(--ink)}
nav#nav a:hover:after,nav#nav a[aria-current]:after{transform:scaleX(1)}
nav#nav .search-link{font-size:1.4rem;line-height:1}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);font-size:1.4rem;border-radius:10px;padding:2px 12px;cursor:pointer}
@media(max-width:820px){
 .menu-btn{display:block}
 nav#nav{display:none;position:absolute;top:70px;right:16px;left:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;flex-direction:column;align-items:flex-start;z-index:20}
 nav#nav.open{display:flex}
 header.site{padding:16px}
}

/* hero */
.hero{padding:10vh 6vw 6vh}
.hero.small{padding:6vh 6vw 3vh}
.hero h1{font-size:clamp(2.5rem,7vw,5.4rem);font-weight:900;line-height:1.05;max-width:900px}
.hero.small h1{font-size:clamp(2.1rem,5vw,3.8rem)}
.hero h1 span,.doc h1{background:linear-gradient(90deg,var(--c),var(--a),var(--b),var(--c));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:300% 0}}
.hero p{color:var(--mute);font-size:1.25rem;max-width:660px;margin:22px 0 30px}
.hero.small p{margin-bottom:20px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:99px;background:linear-gradient(90deg,var(--a),var(--b),var(--a));background-size:200% 100%;color:#0b0a14;font-weight:800;text-decoration:none;animation:flow 5s linear infinite;white-space:nowrap}
.btn.ghost{background:transparent;border:1px solid var(--b);color:var(--ink);animation:none}
.btn.red{background:var(--red);color:#fff;animation:none}
.btn.red::after{animation-duration:2s}
@keyframes pulse{50%{opacity:1}}
.btn{position:relative}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 10px #2ee6c814,0 0 40px #b86bff55;opacity:0;pointer-events:none;animation:pulse 3s ease-in-out infinite}
.btn.ghost::after{display:none}

.ticker{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:14px 0;margin-bottom:50px;background:#0b0a1488}
.ticker div{display:inline-block;animation:tick 90s linear infinite;font-weight:800;font-size:1.1rem;color:var(--mute)}
.ticker b{color:var(--a);margin:0 18px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}

h2.sec{padding:0 6vw 18px;font-size:1.9rem}
.more{padding:0 6vw 50px}.more a{font-weight:800;text-decoration:none}

/* filters */
.filter input{width:min(520px,100%);font:inherit;font-size:1.1rem;padding:14px 20px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.filter input:focus{border-color:var(--b);outline:none;box-shadow:0 0 0 3px #2ee6c833}
.chips{display:flex;gap:10px;flex-wrap:wrap;padding:0 6vw 22px}
.chips button{font:inherit;padding:7px 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--mute);cursor:pointer}
.chips button.on,.chips button:hover{border-color:var(--b);color:var(--ink)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;padding:0 6vw 40px}
.card{display:block;text-decoration:none;color:inherit;background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:24px;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover,.card.reveal.in:hover{transform:translateY(-10px);border-color:var(--a);box-shadow:0 12px 40px #b86bff33}
.card i{font-style:normal;font-size:2.1rem;display:inline-block;animation:wig 12s linear infinite}
@keyframes wig{25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}
.card h3{margin:8px 0 4px;font-size:1.35rem}
.card p{color:var(--mute);font-size:.95rem}
.tag{display:inline-block;font-size:.75rem;padding:2px 10px;border-radius:99px;background:#2ee6c81f;color:var(--b);margin:12px 0 0 6px;text-decoration:none}
.tag.big{font-size:.95rem;padding:5px 16px}
.card.hide{display:none}

.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;padding:0 6vw 50px}
.cat{text-decoration:none;color:inherit;border-radius:22px;padding:26px;border:1px solid var(--line);background:linear-gradient(140deg,#b86bff1f,#15132acc 60%);transition:.25s;position:relative;overflow:hidden}
.cat:hover{border-color:var(--b);transform:translateY(-4px)}
.cat span{font-size:2.4rem}
.cat h3{font-size:1.5rem;margin:6px 0}
.cat p{color:var(--mute)}
.cat b{display:inline-block;margin-top:10px;color:var(--b);font-size:.9rem}

.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;padding:0 6vw 50px}
.acard{display:block;text-decoration:none;color:inherit;padding:26px;border-radius:20px;background:var(--card2);border:1px solid var(--line);border-inline-start:4px solid var(--c);transition:.25s}
.acard:hover{transform:translateY(-4px);border-color:var(--c)}
.acard h3{font-size:1.3rem;margin:6px 0}
.acard p{color:var(--mute);font-size:.95rem}
.kind{display:inline-block;font-size:.78rem;font-weight:700;color:var(--c);letter-spacing:.5px}

/* bands */
.dir,.sos-band{margin:0 6vw 50px;padding:32px;border-radius:24px;border:1px solid var(--line);display:flex;gap:16px 24px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.dir{position:relative;overflow:hidden;isolation:isolate}
.dir::before{content:"";position:absolute;inset:0 auto 0 0;width:300%;z-index:-1;background:linear-gradient(120deg,#b86bff22,#2ee6c818,#ff5fa222,#b86bff22,#2ee6c818,#ff5fa222,#b86bff22);animation:slideband 14s ease infinite alternate;will-change:transform}
@keyframes slideband{to{transform:translateX(-66.66%)}}
.dir>div,.sos-band>div{flex:1 1 300px}
.dir p,.sos-band p{color:var(--mute)}
.sos-band{background:#ff4d5e14;border-color:#ff4d5e66}

/* article pages */
.doc{padding-bottom:20px}
.doc-hero{padding:5vh 6vw 3vh}
.doc-hero .kind{display:table;margin-bottom:14px;padding:5px 16px;border-radius:99px;background:#ff5fa21f;border:1px solid #ff5fa266;font-size:.9rem}
.crumbs{font-size:.9rem;color:var(--mute);margin-bottom:18px}
.crumbs a{color:var(--mute)}
.doc-emoji{font-size:3.5rem;animation:wig 10s linear infinite;display:inline-block}
.doc h1{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:900;line-height:1.1;display:inline-block}
.lede{color:var(--mute);font-size:1.25rem;max-width:760px;margin:14px 0 6px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:0 6vw 36px}
.facts div{background:var(--card2);border:1px solid var(--line);border-radius:16px;padding:14px 18px}
.facts dt{font-size:.8rem;color:var(--b);font-weight:700}
.facts dd{font-size:1rem}
.doc-grid{display:grid;grid-template-columns:240px 1fr;gap:40px;padding:0 6vw 30px;align-items:start}
@media(max-width:900px){.doc-grid{grid-template-columns:1fr}.toc{position:static!important}}
.toc{position:sticky;top:20px;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.toc a{color:var(--mute);text-decoration:none;border-inline-start:2px solid var(--line);padding-inline-start:12px}
.toc a:hover{color:var(--ink);border-color:var(--b)}
.sos-box{margin-top:18px;padding:16px;border-radius:16px;background:#ff4d5e14;border:1px solid #ff4d5e66;display:flex;flex-direction:column;gap:4px}
.sos-box a{color:#ff9aa4;font-weight:700}
.prose{max-width:780px;font-size:1.08rem}
.prose.wide{padding:0 6vw 30px;max-width:calc(780px + 12vw)}
.prose h2{font-size:1.75rem;margin:42px 0 12px;scroll-margin-top:20px}
.prose h3{scroll-margin-top:20px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.3rem;margin:28px 0 8px;color:var(--b)}
.prose p,.prose ul,.prose ol{margin-bottom:16px}
.prose ul,.prose ol{padding-inline-start:24px}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--a)}
.prose strong{color:#fff}
.prose blockquote{border-inline-start:3px solid var(--a);padding:6px 18px;margin:20px 0;color:var(--mute);font-style:italic}
.table-wrap{overflow-x:auto;margin:20px 0}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:right;vertical-align:top}
.prose th{background:#b86bff22}
.box{border-radius:18px;padding:20px 22px;margin:22px 0;border:1px solid var(--line);background:var(--card2)}
.box>*:last-child{margin-bottom:0}
.box-title{font-weight:800;font-size:1.15rem;margin-bottom:8px}
.box-warn{border-color:#ff4d5e88;background:#ff4d5e12}.box-warn .box-title{color:#ff9aa4}
.box-tip{border-color:#2ee6c888;background:#2ee6c810}.box-tip .box-title{color:var(--b)}
.box-info{border-color:#b86bff88;background:#b86bff12}.box-info .box-title{color:var(--a)}
.box-pro{border-color:#2ee6c888;background:#2ee6c810}.box-pro .box-title{color:var(--b)}
.box-con{border-color:#ff5fa288;background:#ff5fa210}.box-con .box-title{color:var(--c)}
.box-vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0;border:0;background:none}
.box-vs>.box{margin:0}
@media(max-width:700px){.box-vs{grid-template-columns:1fr}}
.disclaimer{font-size:.85rem;color:var(--mute);border-top:1px solid var(--line);padding-top:14px;margin-top:30px}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:0 6vw 40px}
.vcard{background:var(--card2);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.vcard:hover{border-color:var(--a);box-shadow:0 12px 40px #b86bff33}
.vcard.hide,.acard.hide{display:none}
.vplay{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.vplay img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s,opacity .3s;opacity:.85}
.vplay:hover img{transform:scale(1.05);opacity:1}
.vplay .pl{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;color:#0b0a14;background:linear-gradient(90deg,var(--a),var(--b));box-shadow:0 6px 30px #0009;padding-inline-start:4px}
.vplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vbody{padding:18px 20px 22px}
.vbody h3{font-size:1.2rem;margin:4px 0 6px}
.vbody p{color:var(--mute);font-size:.93rem}
.note-yt{padding:0 6vw 50px;color:var(--mute);font-size:.85rem}
.cform{margin:0 6vw 50px;max-width:780px;padding:30px;border-radius:24px;background:var(--card2);border:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.cform h2{font-size:1.6rem}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.cform .row{grid-template-columns:1fr}}
.cform label{display:flex;flex-direction:column;gap:6px;font-weight:500}
.cform input,.cform select,.cform textarea{font:inherit;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--b);outline:none;box-shadow:0 0 0 3px #2ee6c833}
.cform [aria-invalid=true]{border-color:var(--red)}
.cform .btn{align-self:flex-start;border:0;cursor:pointer;font:inherit;font-weight:800}
.cform .btn:disabled{opacity:.6;cursor:wait}
.cform .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px}
.cform .status:empty{display:none}
.cform .status{padding:12px 16px;border-radius:14px;background:#2ee6c81a;color:var(--b)}
.cform .status.err{background:#ff4d5e1a;color:#ff9aa4}
.cform .note{font-size:.85rem;color:var(--mute)}
.results{padding:0 6vw 50px;display:flex;flex-direction:column;gap:12px;max-width:900px}
.results a{display:block;padding:16px 20px;border-radius:16px;background:var(--card2);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.results a:hover{border-color:var(--b)}
.results small{color:var(--b)}.results p{color:var(--mute);font-size:.95rem}

/* footer */
footer.site{padding:40px 6vw 30px;color:var(--mute);border-top:1px solid #1f1c3a;background:#0b0a14cc}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
footer.site h4{color:var(--ink);margin-bottom:8px}
footer.site .foot-grid a:not(.logo){display:block;color:var(--mute);text-decoration:none;padding:2px 0}
footer.site a:hover{color:var(--b)}
footer.site .sos a{color:#ff9aa4}
.copy{margin-top:26px;font-size:.85rem}

.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s,transform 1s}
.reveal.in{opacity:1;transform:none}
.card.reveal.in{transition:opacity 1s,transform .25s,border-color .25s,box-shadow .25s}

/* accessibility */
.a11y-btn{position:fixed;bottom:20px;left:20px;z-index:50;width:56px;height:56px;border-radius:50%;border:0;background:#1c6dd0;color:#fff;font-size:28px;cursor:pointer;box-shadow:0 6px 20px #0008}
.a11y-panel{position:fixed;bottom:86px;left:20px;z-index:50;width:260px;background:#fff;color:#111;border-radius:16px;padding:16px;box-shadow:0 10px 40px #000a;display:none}
.a11y-panel.open{display:block}
.a11y-panel h4{margin-bottom:10px;font-size:1.05rem}
.a11y-panel button{display:block;width:100%;text-align:right;font:inherit;font-size:.95rem;padding:9px 12px;margin-bottom:6px;border:1px solid #ccd;border-radius:10px;background:#f4f5fa;color:#111;cursor:pointer}
.a11y-panel button[aria-pressed=true]{background:#1c6dd0;color:#fff;border-color:#1c6dd0}
.a11y-panel a{color:#1c6dd0;font-size:.9rem}
body.contrast{--bg:#000;--card:#000;--card2:#000;--ink:#fff;--mute:#fff;--line:#fff;--a:#ffff00;--b:#00ffff;--c:#ffff00}
body.light{--bg:#fbfaff;--card:#fff;--card2:#ffffffee;--ink:#17142e;--mute:#4a4670;--line:#d9d5f0;--a:#7a2fd6;--b:#00806e;--c:#c4246a}
body.light .prose strong{color:#000}
body.light .blob{opacity:.15}
body.light .btn{color:#fff}
body.contrast .blob,body.contrast canvas#dots{display:none}
body.links a{text-decoration:underline!important}
body.readable,body.readable *{font-family:Arial,sans-serif!important;letter-spacing:.02em}
body.still *,body.still *:before,body.still *:after{animation:none!important;transition:none!important}
body.still canvas#dots{display:none}
body.still .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}canvas#dots{display:none}.reveal{opacity:1;transform:none}}

/* paused while off screen */
.off,.off *,.off::before,.off::after{animation-play-state:paused!important}
.vplay .pl::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 10px #2ee6c814,0 0 40px #b86bff55;opacity:0;animation:pulse 3s ease-in-out infinite;pointer-events:none}
.hero p.hero-note{font-size:.9rem;margin:-14px 0 26px;padding-inline-start:12px;border-inline-start:2px solid var(--line)}
/* driven by site.js from one shared ~30fps tick */
.js-anim .blob,.js-anim .logo span,.js-anim .hero h1 span,.js-anim .doc h1{animation:none}
.js-anim .btn:not(.ghost):not(.red){animation:none}
.js-anim .dir::before{animation:none;transform:translateX(var(--band,0%))}
.gl-bg body:not(.still):not(.contrast) .bg{display:none}
.js-anim .card,.js-anim .card i,.js-anim .doc-emoji,.js-anim .ticker div,.js-anim .logo .mark{animation:none}
.js-anim .logo:hover .mark{animation:spinmark 3s linear infinite}
.js-anim .btn::after,.js-anim .vplay .pl::after{animation:none;opacity:var(--glow,0)}
/* wide tables scroll sideways; the first (name) column stays in view */
.prose table.wide{min-width:900px;font-size:.9rem}
.prose table.wide th:first-child,.prose table.wide td:first-child{position:sticky;right:0;z-index:1;background:var(--bg);font-weight:700}
.prose table.wide th:first-child{background:#2a1f45}
body.light .prose table.wide th:first-child{background:#ece6fb}
/* grid children may shrink below their content (wide tables scroll inside instead of widening the page) */
.doc-grid>*{min-width:0}
/* large screens: a wide table uses the whole width next to the sidebar (it extends left past the
   reading column), so it needs no sideways scrolling */
.doc-grid{container-type:inline-size}
@media (min-width:1200px){
 .prose .table-wrap:has(> table.wide){width:calc(100cqw - 280px);overflow-x:visible}
 .prose table.wide{min-width:0}
 .prose table.wide th:first-child,.prose table.wide td:first-child{position:static}
}
/* storage block */
.store{display:flex;gap:22px;align-items:flex-start;margin:34px 0;padding:22px 24px;border-radius:20px;border:1px solid #2ee6c866;background:linear-gradient(135deg,#2ee6c814,#b86bff10)}
.store-art{display:flex;gap:6px;flex:0 0 auto;color:var(--ink)}
.store-art svg{width:92px;height:92px}
.store-art .acc{stroke:var(--b);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.store-body{flex:1;min-width:0}
.prose .store h2{margin:0 0 10px;font-size:1.45rem}
.store-body>*:last-child{margin-bottom:0}
@media(max-width:560px){.store{flex-direction:column}.store-art svg{width:72px;height:72px}}
/* window in the background: freeze all CSS animations (site.js stops its own loop) */
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}