: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%;filter:blur(70px);opacity:.4;mix-blend-mode:screen}
.b1{width:520px;height:520px;background:var(--a);top:-120px;right:-80px;animation:drift1 22s ease-in-out infinite alternate}
.b2{width:440px;height:440px;background:var(--b);top:40%;left:-140px;animation:drift2 26s ease-in-out infinite alternate}
.b3{width:380px;height:380px;background:var(--c);bottom:-140px;right:30%;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,pulse 3s ease-in-out 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:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px #2ee6c814,0 0 40px #b86bff55}}

.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);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:20px;padding:24px;transition:transform .25s,border-color .25s,box-shadow .25s;animation:float 6s ease-in-out infinite}
.card:nth-child(3n+2){animation-delay:-2s}.card:nth-child(3n){animation-delay:-4s}
@keyframes float{50%{transform:translateY(-8px)}}
.card:hover{animation-play-state:paused;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{background:linear-gradient(120deg,#b86bff22,#2ee6c818,#ff5fa222,#b86bff22);background-size:300% 300%;animation:flow 14s ease infinite}
.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 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{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;animation:pulse 3s ease-in-out infinite;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;left:-9999px;width:1px;height:1px;overflow:hidden}
.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}}