@font-face{font-family:'VT323';src:url(/assets/fonts/vt323-latin-400-normal.woff2?v=8ddbebcc) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2?v=14425ba9) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-latin-700-normal.woff2?v=d0d4e818) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/space-grotesk-latin-500-normal.woff2?v=1b1a8131) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(/assets/fonts/space-grotesk-latin-700-normal.woff2?v=35f8aec5) format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* ---------- tokens ---------- */
:root, [data-theme="dark"] { /* neon: the default */
  --ground:#07050f; --panel:#0e0a1d; --panel-2:#160f2e; --panel-3:#1f1640;
  --ink:#f6f1ff; --ink-2:#bdb2e6; --ink-3:#7c70a8;
  --pink:#ff3ea5; --pink-hi:#ff7cc4; --cyan:#22f3ff; --violet:#a259ff; --acid:#f4ff52; --amber:#ffa53d;
  --grad:linear-gradient(90deg,#22f3ff,#a259ff 50%,#ff3ea5);
  --rule:rgba(162,89,255,.42); --rule-hi:rgba(34,243,255,.7);
  --on-pink:#1a0010; --on-cyan:#001a1d;
  --rad:4px; --cut:10px;
  --glow-p:0 0 10px rgba(255,62,165,.75),0 0 28px rgba(255,62,165,.35);
  --glow-c:0 0 10px rgba(34,243,255,.75),0 0 28px rgba(34,243,255,.3);
  --shadow:0 0 0 1px var(--rule),0 0 30px rgba(162,89,255,.18),inset 0 0 40px rgba(162,89,255,.06);
  --bubble-them:rgba(34,243,255,.07); --bubble-me:rgba(255,62,165,.14);
  --k-out:#22f3ff; --k-fill:#a259ff; --k-lin:#ffa53d; --k-v:#ff3ea5; --k-eye:#f4ff52; --k-sc:#ff3ea5;
  --k-glow:1;
  --display:"Space Grotesk",sans-serif; --mono:"JetBrains Mono",monospace; --pixel:"VT323",monospace;
  color-scheme:dark;
}
[data-theme="light"] { /* sticker: bright, chunky, playful */
  --ground:#b9e8ff; --panel:#fffafc; --panel-2:#ffe6f0; --panel-3:#d9f2ff;
  --ink:#16123a; --ink-2:#463f74; --ink-3:#7a74a3;
  --pink:#ff3d8b; --pink-hi:#ff3d8b; --cyan:#0aa6f0; --violet:#7b4dff; --acid:#ffd400; --amber:#ff8a00;
  --grad:linear-gradient(90deg,#0aa6f0,#7b4dff 50%,#ff3d8b);
  --rule:#16123a; --rule-hi:#16123a;
  --on-pink:#fff; --on-cyan:#fff;
  --rad:14px; --cut:0px;
  --glow-p:none; --glow-c:none;
  --shadow:4px 4px 0 #16123a;
  --bubble-them:#fff; --bubble-me:#ffd3e5;
  --k-out:#16123a; --k-fill:#0aa6f0; --k-lin:#d4680a; --k-v:#ff3d8b; --k-eye:#ff8a00; --k-sc:#ff3d8b;
  --k-glow:0;
  color-scheme:light;
}

/* ---------- page ---------- */
*{box-sizing:border-box;margin:0}
body{background:var(--ground);color:var(--ink);font:14px/1.5 var(--mono);transition:background .4s,color .4s;min-height:100vh;overflow-x:hidden}
i{font-style:normal}


#life{position:fixed;inset:0;z-index:0;opacity:.16;pointer-events:none}
[data-theme="light"] #life{opacity:.14}


.stage{position:relative;z-index:1;max-width:1240px;margin:64px auto 60px;padding:0 20px;display:grid;gap:30px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.kicker{font:19px var(--pixel);color:var(--cyan);letter-spacing:.12em;text-shadow:var(--glow-c)}
[data-theme="light"] .kicker{color:var(--violet)}
.hero h1{font:700 clamp(38px,4.8vw,66px)/.95 var(--display);letter-spacing:-.03em;margin-top:10px}
[data-theme="dark"] .hero h1{text-shadow:-2px 0 rgba(34,243,255,.55),2px 0 rgba(255,62,165,.55)}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 14px rgba(255,62,165,calc(.55*var(--k-glow))))}
[data-theme="dark"] .hero h1 .glitch{display:inline-block;animation:glitch 5s steps(1) infinite}
@keyframes glitch{0%,93%,100%{transform:none;clip-path:none}94%{transform:translate(3px,-1px);clip-path:inset(0 0 55% 0)}95%{transform:translate(-4px,1px);clip-path:inset(45% 0 0 0)}96%{transform:translate(2px,0)}}
.hero p{color:var(--ink-2);max-width:52ch;margin-top:16px;font-size:15px}
.cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.btn{font:700 15px var(--display);padding:11px 20px;border:1.5px solid var(--rule);border-radius:var(--rad);cursor:pointer;box-shadow:var(--shadow);transition:transform .14s cubic-bezier(.3,1.6,.5,1),box-shadow .14s,filter .14s;color:var(--ink);background:var(--panel)}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn.pink{background:var(--pink);color:var(--on-pink)}
.btn.cyan{background:var(--cyan);color:var(--on-cyan)}
[data-theme="dark"] .btn{border:0;border-radius:0;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));box-shadow:none}
[data-theme="dark"] .btn.pink{filter:drop-shadow(0 0 10px rgba(255,62,165,.8))}
[data-theme="dark"] .btn.cyan{filter:drop-shadow(0 0 10px rgba(34,243,255,.7))}
[data-theme="dark"] .btn:not(.pink):not(.cyan){background:var(--panel-3);color:var(--cyan)}
[data-theme="dark"] .btn:hover{filter:brightness(1.2) drop-shadow(0 0 16px rgba(255,62,165,.9))}

/* windows */
.win{position:relative;background:var(--panel);border:1.5px solid var(--rule);border-radius:var(--rad);box-shadow:var(--shadow);overflow:hidden}
.win > .bar{display:flex;align-items:center;gap:10px;padding:4px 10px;font:18px var(--pixel);letter-spacing:.04em;border-bottom:1.5px solid var(--rule)}
[data-theme="dark"] .win > .bar{background:linear-gradient(90deg,rgba(34,243,255,.14),rgba(162,89,255,.16),rgba(255,62,165,.18));color:var(--ink)}
[data-theme="dark"] .win > .bar span{text-shadow:0 0 8px rgba(255,255,255,.4)}
[data-theme="light"] .win > .bar{background:var(--cyan);color:#fff}
.bar .meta{margin-left:auto;color:var(--ink-3);font-size:16px}
[data-theme="light"] .bar .meta{color:rgba(255,255,255,.8)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;display:block}
.dots i:nth-child(1){background:var(--pink);box-shadow:var(--glow-p)}.dots i:nth-child(2){background:var(--acid)}.dots i:nth-child(3){background:var(--cyan);box-shadow:var(--glow-c)}
[data-theme="light"] .dots i{border:1.5px solid var(--ink)}
/* hud corner brackets on dark windows */
[data-theme="dark"] .win::after{content:"";position:absolute;inset:6px;pointer-events:none;
  background:
   linear-gradient(var(--cyan),var(--cyan)) top left/14px 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) top left/2px 14px no-repeat,
   linear-gradient(var(--pink),var(--pink)) bottom right/14px 2px no-repeat,linear-gradient(var(--pink),var(--pink)) bottom right/2px 14px no-repeat;opacity:.9}

/* ---------- ascii kage ---------- */
.kwin .body{display:grid;place-items:center;padding:18px 10px 12px;position:relative;
  background:radial-gradient(ellipse at 45% 50%,rgba(162,89,255,calc(.22*var(--k-glow))),transparent 65%)}
.ascii{font:21px/1 var(--pixel);white-space:pre;margin:0;animation:k-breathe 3s ease-in-out infinite}
.ascii .o{color:var(--k-out)}
.ascii .f{color:var(--k-fill);opacity:.42}
.ascii .b{color:var(--k-lin)}
.ascii .v{color:var(--k-v);font-weight:700}
.ascii .e{color:var(--k-eye);display:inline-block;animation:k-blink 6s linear infinite, k-glance 6s ease-in-out infinite;transform-origin:50% 100%}
.ascii .sc{color:var(--k-sc);display:inline-block;animation:k-flutter 2s ease-in-out infinite;transform-origin:0 50%}
[data-theme="dark"] .ascii .o{text-shadow:0 0 6px rgba(34,243,255,.9),0 0 18px rgba(34,243,255,.45)}
[data-theme="dark"] .ascii .f{text-shadow:0 0 8px rgba(162,89,255,.6)}
[data-theme="dark"] .ascii .b{text-shadow:0 0 6px rgba(255,165,61,.9)}
[data-theme="dark"] .ascii .v,[data-theme="dark"] .ascii .sc{text-shadow:0 0 6px rgba(255,62,165,1),0 0 18px rgba(255,62,165,.6)}
[data-theme="dark"] .ascii .e{text-shadow:0 0 6px #f4ff52,0 0 16px rgba(244,255,82,.8),0 0 30px rgba(244,255,82,.4)}
[data-theme="dark"] .ascii{animation:k-breathe 3s ease-in-out infinite,flicker 7s steps(1) infinite}
[data-theme="light"] .ascii .f{opacity:.55}
@keyframes k-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes k-blink{0%,30%{transform:scaleY(1)}31.5%{transform:scaleY(.1)}33%{transform:scaleY(1)}34.5%{transform:scaleY(.1)}36%,100%{transform:scaleY(1)}}
@keyframes k-glance{0%,55%{translate:0}60%,70%{translate:-5px 0}75%,84%{translate:5px 0}89%,100%{translate:0}}
@keyframes k-flutter{0%,100%{transform:skewX(0) translateY(0)}50%{transform:skewX(-8deg) translateY(1px)}}
@keyframes flicker{0%,96%,100%{opacity:1}96.5%{opacity:.55}97%{opacity:1}97.6%{opacity:.7}}
.say{font:19px var(--pixel);color:var(--pink);margin-top:10px;letter-spacing:.06em}
[data-theme="dark"] .say{text-shadow:var(--glow-p)}
.say .cur{display:inline-block;width:.55em;height:.9em;background:currentColor;vertical-align:-2px;margin-left:3px;animation:caret 1s steps(1) infinite}

/* ---------- app ---------- */
.app{display:grid;grid-template-columns:68px 236px 1fr 256px;grid-template-rows:minmax(0,1fr);height:620px}
.rail{background:var(--panel-2);border-right:1.5px solid var(--rule);display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0}
.srv{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:24px var(--pixel);color:#fff;cursor:pointer;position:relative;transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-radius .2s;background:var(--g)}
.srv:hover{transform:translateY(-3px) rotate(-5deg);border-radius:50%}
.srv.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--pink);box-shadow:var(--glow-p)}
[data-theme="dark"] .srv{box-shadow:0 0 14px var(--gl)}
[data-theme="light"] .srv{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.srv.add{--g:transparent;color:var(--cyan);border:1.5px dashed var(--cyan);box-shadow:none}
.rhome{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;position:relative;cursor:pointer;padding:0;color:var(--cyan);background:var(--panel-3);border:1.5px solid var(--rule);transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-radius .2s,color .2s}
.rhome svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rhome:hover{transform:translateY(-3px);border-radius:50%}
.rhome:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.rhome.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--cyan),var(--violet))}
.rhome.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--pink);box-shadow:var(--glow-p)}
[data-theme="dark"] .rhome.on{box-shadow:0 0 16px rgba(34,243,255,.55)}
[data-theme="light"] .rhome{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.rbadge{position:absolute;right:-5px;bottom:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;font:14px/18px var(--pixel);text-align:center;background:var(--pink);color:var(--on-pink);box-shadow:0 0 0 2px var(--panel-2)}
.rsep{width:26px;height:2px;border-radius:2px;background:var(--rule)}
.app .homev{display:none;grid-column:2/5;min-height:0;overflow-y:auto;background:var(--panel)}
.app.at-home>.chan,.app.at-home>.main,.app.at-home>.side{display:none}
.app.at-home .homev{display:grid}
.app .homev .news+.news{margin-top:2px}
.chan{border-right:1.5px solid var(--rule);display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.chan h3{font:700 17px var(--display);padding:12px 14px;border-bottom:1.5px solid var(--rule);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chan .grp{font:17px var(--pixel);color:var(--violet);padding:12px 14px 2px;letter-spacing:.08em}
[data-theme="dark"] .chan .grp{text-shadow:0 0 8px rgba(162,89,255,.7)}
.chan a{display:flex;align-items:center;gap:8px;margin:1px 8px;padding:4px 8px;color:var(--ink-2);text-decoration:none;cursor:pointer;border-radius:var(--rad)}
.chan a b{font-weight:400;color:var(--cyan)}
.chan a:hover{color:var(--ink);background:var(--panel-3)}
.chan a.on{color:#fff;background:linear-gradient(90deg,var(--pink),var(--violet))}
.chan a.on b{color:#fff}
[data-theme="dark"] .chan a.on{box-shadow:0 0 18px rgba(255,62,165,.45)}
[data-theme="light"] .chan a.on{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.unread{margin-left:auto;font:15px var(--pixel);background:var(--acid);color:#1b1600;padding:0 6px;border-radius:999px}
.chan .vu{padding:2px 14px 2px 38px;display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px}
.av{--c:var(--cyan);width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font:15px var(--pixel);flex:none;background:var(--c);color:#0b0614}
[data-theme="light"] .av{border:1.5px solid var(--ink)}
.c1{--c:#ff3ea5;--gl:rgba(255,62,165,.6)} .c2{--c:#22f3ff;--gl:rgba(34,243,255,.6)} .c3{--c:#f4ff52;--gl:rgba(244,255,82,.6)} .c4{--c:#a259ff;--gl:rgba(162,89,255,.6)} .c5{--c:#ffa53d;--gl:rgba(255,165,61,.6)}
[data-theme="light"] .c3{--c:#ffd400}
.name.c1{color:var(--pink)} .name.c2{color:var(--cyan)} .name.c3{color:var(--acid)} .name.c4{color:var(--violet)} .name.c5{color:var(--amber)}
[data-theme="light"] .name.c3{color:#b38f00} [data-theme="light"] .name.c2{color:#0a86c4}
.av.talk{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--c),0 0 14px var(--c);animation:talk .9s ease-in-out infinite}
@keyframes talk{50%{box-shadow:0 0 0 2px var(--ground),0 0 0 5px var(--c),0 0 24px var(--c)}}
.live{font:15px var(--pixel);letter-spacing:.06em;background:var(--pink);color:var(--on-pink);padding:0 7px;border-radius:3px;box-shadow:var(--glow-p);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.6}}
.me{margin-top:auto;border-top:1.5px solid var(--rule);padding:10px 14px;display:flex;align-items:center;gap:8px;font-size:13px;background:var(--panel-2)}
.me small{display:block;color:var(--cyan);font-size:11px}
.me .av{width:30px;height:30px;font-size:19px}

.main{display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,rgba(162,89,255,.05),transparent 40%)}
.topic{padding:10px 16px;border-bottom:1.5px solid var(--rule);display:flex;align-items:center;gap:10px;position:relative}
.topic::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:2px;background:var(--grad);box-shadow:0 0 12px rgba(255,62,165,calc(.8*var(--k-glow)))}
.topic b{font:700 15px var(--display)} .topic b i{color:var(--cyan)} .topic span{color:var(--ink-3);font-size:12px}
.sealed{margin-left:auto;font:16px var(--pixel);letter-spacing:.06em;color:var(--cyan);border:1.5px solid var(--cyan);padding:0 9px;border-radius:999px;box-shadow:var(--glow-c)}
[data-theme="light"] .sealed{color:#fff;background:var(--cyan);border-color:var(--ink)}
.feed{flex:1;overflow:hidden;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:10px;animation:pop .45s cubic-bezier(.3,1.5,.5,1) both}
.msg:nth-child(2){animation-delay:.15s}.msg:nth-child(3){animation-delay:.3s}.msg:nth-child(4){animation-delay:.45s}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.msg .av{width:34px;height:34px;font-size:21px}
.who{font:700 13px var(--display)} .who time{font:400 11px var(--mono);color:var(--ink-3);margin-left:6px}
.bub{display:inline-block;margin-top:3px;padding:7px 11px;border:1.5px solid var(--rule);border-radius:var(--rad);background:var(--bubble-them);max-width:60ch}
.msg.mine .bub{background:var(--bubble-me);border-color:var(--pink)}
[data-theme="dark"] .msg.mine .bub{box-shadow:0 0 14px rgba(255,62,165,.3)}
[data-theme="light"] .bub{border-width:2px;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.react{display:inline-flex;gap:4px;margin-left:6px;font:15px var(--pixel)}
.react i{border:1.5px solid var(--violet);border-radius:999px;padding:0 7px;background:rgba(162,89,255,.15);color:var(--ink)}
.react i.on{border-color:var(--pink);background:rgba(255,62,165,.2)}
/* stream card with a rotating neon frame */
.stream{margin:6px 0 0 44px;width:360px;border-radius:var(--rad);position:relative;padding:2px;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1);isolation:isolate}
.stream::before{content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient(from var(--a,0deg),#22f3ff,#a259ff,#ff3ea5,#f4ff52,#22f3ff);animation:spin 4s linear infinite;z-index:-1}
[data-theme="dark"] .stream{filter:drop-shadow(0 0 14px rgba(255,62,165,.45))}
[data-theme="light"] .stream::before{background:var(--ink);animation:none}
[data-theme="light"] .stream{box-shadow:4px 4px 0 var(--ink)}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.stream:hover{transform:scale(1.02) rotate(-.4deg)}
.stream .in{border-radius:calc(var(--rad) - 1px);overflow:hidden;background:var(--panel)}
.scr{height:160px;background:#0a0618;position:relative;display:grid;place-items:center;overflow:hidden}
.scr::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(255,62,165,.35)),repeating-linear-gradient(90deg,rgba(34,243,255,.25) 0 1px,transparent 1px 28px);transform:perspective(160px) rotateX(55deg) translateY(30%);transform-origin:bottom}
.scr pre{position:relative;font:15px/1 var(--pixel);color:var(--acid);text-shadow:0 0 8px rgba(244,255,82,.8)}
.scr .tag{position:absolute;top:8px;left:8px}
.scr .watch{position:absolute;right:8px;bottom:8px;font:700 13px var(--display);background:var(--cyan);color:var(--on-cyan);padding:3px 12px;border-radius:var(--rad);box-shadow:var(--glow-c)}
.cap{padding:6px 10px;font-size:12px;color:var(--ink-2);display:flex;justify-content:space-between}
.cap b{color:var(--pink);font-weight:400}
.compose{margin:10px 16px 14px;border:1.5px solid var(--violet);border-radius:var(--rad);display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;background:var(--panel-2)}
[data-theme="dark"] .compose{box-shadow:0 0 16px rgba(162,89,255,.35)}
[data-theme="light"] .compose{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#fff}
.send{margin-left:auto;font:700 13px var(--display);border:0;padding:6px 14px;border-radius:var(--rad);background:var(--grad);color:#fff;cursor:pointer}

.side{border-left:1.5px solid var(--rule);padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-height:0;background:var(--panel)}
.side .grp{font:17px var(--pixel);color:var(--violet);letter-spacing:.08em}
.side .p{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 6px;border-radius:var(--rad);cursor:pointer}
.side .p:hover{background:var(--panel-3)}
.side .p small{display:block;font-size:11px;color:var(--ink-3)}
.st{width:9px;height:9px;border-radius:50%;margin-left:auto;flex:none}
.st.on{background:#3dffb0;box-shadow:0 0 8px #3dffb0} .st.afk{background:var(--acid);box-shadow:0 0 8px var(--acid)} .st.off{background:var(--ink-3)}
[data-theme="light"] .st{border:1.5px solid var(--ink)}
.card{margin-top:auto;border:1.5px dashed var(--cyan);border-radius:var(--rad);padding:10px;font:17px/1.1 var(--pixel);white-space:pre;color:var(--cyan);text-align:center}
[data-theme="dark"] .card{text-shadow:0 0 8px rgba(34,243,255,.6)}
.card i{color:var(--pink)}



/* light: Kage sits on an ink "screen" inside the sticker window, neon colours, so it always reads */
[data-theme="light"] .kwin .body{background:#16123a;margin:10px;border:2px solid #16123a;border-radius:10px;box-shadow:inset 0 0 0 3px #2a2160,inset 0 0 60px rgba(162,89,255,.35)}
[data-theme="light"] .ascii .o{color:#22f3ff;text-shadow:0 0 6px rgba(34,243,255,.8)}
[data-theme="light"] .ascii .f{color:#a259ff;opacity:.6;text-shadow:none}
[data-theme="light"] .ascii .b{color:#ffa53d;text-shadow:0 0 6px rgba(255,165,61,.8)}
[data-theme="light"] .ascii .v,[data-theme="light"] .ascii .sc{color:#ff3ea5;text-shadow:0 0 6px rgba(255,62,165,.9)}
[data-theme="light"] .ascii .e{color:#f4ff52;text-shadow:0 0 6px #f4ff52,0 0 14px rgba(244,255,82,.7)}
[data-theme="light"] .say{color:#ff3ea5;text-shadow:0 0 6px rgba(255,62,165,.8)}

/* ---------- interactive kage ---------- */
.kstage{position:relative;cursor:grab;touch-action:none;user-select:none;transition:transform .7s cubic-bezier(.25,1.9,.4,1)}
.kstage.drag{transition:none;cursor:grabbing}
.ascii .e{animation:none!important;display:inline-block;translate:var(--ex,0) var(--ey,0);transition:translate .14s ease-out,opacity .2s;transform-origin:50% 60%}
.ascii .e.shut{transform:scaleY(.12)}
.ascii .sc{animation-duration:var(--sd,2s)!important}
.ascii.squash{animation:k-squash .45s cubic-bezier(.3,1.6,.5,1)!important}
.ascii.shake{animation:k-shake .4s steps(2)!important}
.ascii.spin{animation:k-spin .9s cubic-bezier(.5,0,.3,1.2)!important}
.ascii.gulp{animation:k-gulp .6s cubic-bezier(.3,1.6,.5,1)!important}
.ascii.wave{animation:k-wave .9s ease-in-out!important}
.ascii.lean{animation:none!important;transform:translateY(6px) scale(1.03);transition:transform .3s}
.kwin.hiding .ascii{animation:none!important;transform:translateY(46px) scaleY(.8);opacity:.55;transition:transform .35s cubic-bezier(.5,0,.7,.4),opacity .35s}
.kwin.hiding .ascii .e{opacity:0}
.kwin.sleeping .ascii{animation:k-breathe 5.5s ease-in-out infinite!important}
@keyframes k-squash{30%{transform:scale(1.1,.86)}60%{transform:scale(.94,1.07)}}
@keyframes k-shake{0%{transform:translate(-5px,0)}25%{transform:translate(5px,-1px) skewX(4deg)}50%{transform:translate(-4px,1px)}75%{transform:translate(4px,0) skewX(-4deg)}}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-gulp{25%{transform:scale(.92,1.08)}55%{transform:scale(1.08,.9)}}
@keyframes k-wave{25%{transform:rotate(-6deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-3deg)}}
.pt{position:absolute;left:0;top:0;pointer-events:none;font:22px/1 var(--pixel);white-space:pre;z-index:3;will-change:transform,opacity}
.secret{display:flex;gap:8px;align-items:center;margin-top:10px;width:min(360px,90%);border:1.5px solid rgba(162,89,255,.7);border-radius:6px;padding:5px 6px 5px 10px;background:rgba(7,5,15,.6);box-shadow:0 0 14px rgba(162,89,255,.3)}
.secret input{flex:1;min-width:0;background:none;border:0;outline:0;color:#f6f1ff;font:14px var(--mono);caret-color:#ff3ea5}
.secret input::placeholder{color:#7c70a8}
.secret button{font:16px var(--pixel);letter-spacing:.06em;border:0;border-radius:4px;padding:2px 10px;background:#ff3ea5;color:#1a0010;cursor:pointer;box-shadow:0 0 10px rgba(255,62,165,.7)}
.cipher{font:15px var(--pixel);color:#22f3ff;letter-spacing:.06em;min-height:1em;margin-top:6px;opacity:.85;text-shadow:0 0 6px rgba(34,243,255,.6)}
.khint{font:15px var(--pixel);color:#7c70a8;letter-spacing:.06em;margin-top:4px}
.khint b{font-weight:400;color:#bdb2e6}

/* ---------- kage inside the app ---------- */
.main{position:relative}
.feed{overflow-y:auto;scrollbar-width:none;min-height:0}
.app > *{min-height:0}
.composewrap,.typing{flex:none}
.feed::-webkit-scrollbar{display:none}
.composewrap{position:relative;margin:10px 16px 14px}
.composewrap .compose{margin:0;position:relative;z-index:2}
.compose input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:14px var(--mono);caret-color:var(--pink)}
.compose input::placeholder{color:var(--ink-3)}
.mk{position:absolute;right:86px;bottom:calc(100% - 34px);z-index:1;cursor:pointer;touch-action:none;user-select:none;transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.mk .ascii{font:13px/1 var(--pixel)}
.mk.duck{transform:translateY(58px)}
.mk.up{transform:translateY(-10px)}
[data-theme="light"] .mk .ascii{background:#16123a;border:2px solid #16123a;border-radius:10px 10px 0 0;padding:6px 6px 30px;box-shadow:3px 3px 0 #16123a}
.mk-say{position:absolute;right:calc(100% - 28px);bottom:calc(100% - 4px);white-space:nowrap;font:16px var(--pixel);letter-spacing:.04em;color:#f6f1ff;background:#1f1640;border:1.5px solid #ff3ea5;border-radius:8px 8px 0 8px;padding:2px 9px;box-shadow:0 0 12px rgba(255,62,165,.5);opacity:0;transform:translateY(6px) scale(.9);transform-origin:100% 100%;transition:opacity .18s,transform .25s cubic-bezier(.3,1.7,.5,1);pointer-events:none;z-index:4}
.mk-say.on{opacity:1;transform:none}
[data-theme="light"] .mk-say{background:#fff;color:#16123a;border:2px solid #16123a;box-shadow:3px 3px 0 #16123a}
.sealtag{font:13px var(--pixel);letter-spacing:.06em;color:var(--cyan);margin-left:6px}
.bub.unsealing{font-family:var(--mono);color:var(--cyan)}
.av.kg{background:#16123a;color:#f4ff52;font:11px/1 var(--pixel);box-shadow:0 0 0 1.5px #a259ff,0 0 10px rgba(162,89,255,.6);letter-spacing:-.05em}
.name.kg{color:var(--violet)}
.typing{font:15px var(--pixel);color:var(--ink-3);letter-spacing:.05em;height:18px;padding:0 18px;margin-top:-4px}

/* ---------- site: nav, sections, hub ---------- */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:22px;padding:12px max(20px,calc((100vw - 1340px)/2));background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--rule)}
.logo{font:700 21px var(--display);letter-spacing:-.02em;display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.logo .mark{display:block;flex:none;width:30px;height:30px;overflow:visible}
.logo .m-hood{fill:var(--panel-3);stroke:var(--k-out)}
.logo .m-lin{fill:var(--k-lin)}
.logo .m-void{fill:var(--ground)}
.logo .m-v{stroke:var(--k-v)}
.logo .m-eye{fill:var(--k-eye)}
[data-theme="dark"] .logo .mark{filter:drop-shadow(0 0 5px rgba(255,62,165,.55))}
[data-theme="light"] .logo .m-void{fill:#16123a}
.logo span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav nav{display:flex;gap:18px;margin-left:12px}
.nav nav a{color:var(--ink-2);text-decoration:none;font-size:13px}
.nav nav a:hover{color:var(--cyan)}
[data-theme="dark"] .nav nav a:hover{text-shadow:var(--glow-c)}
.nav .right{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav .btn{padding:7px 14px;font-size:13px}
.tsw{font:16px var(--pixel);letter-spacing:.06em;background:var(--panel);color:var(--ink-2);border:1.5px solid var(--rule);border-radius:999px;padding:3px 12px;cursor:pointer}
.tsw b{font-weight:400;color:var(--pink)}
.stage{margin-top:56px;gap:120px}
.sec-head{max-width:640px;margin-bottom:30px}
.sec-head.c{margin-inline:auto;text-align:center}
.sec-head h2{font:700 clamp(30px,3.4vw,46px)/1 var(--display);letter-spacing:-.03em;margin-top:8px}
.sec-head h2 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head p{color:var(--ink-2);margin-top:12px;font-size:15px}
.sub{font-size:12px;color:var(--ink-3);margin-top:12px}
.hub{display:grid;grid-template-columns:1fr 1.1fr;gap:34px;align-items:center}
.pts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pt-card{border:1.5px solid var(--rule);border-radius:var(--rad);padding:14px;background:var(--panel);position:relative;transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .2s}
.pt-card:hover{transform:translateY(-3px);border-color:var(--cyan)}
[data-theme="dark"] .pt-card:hover{box-shadow:0 0 20px rgba(34,243,255,.2)}
[data-theme="light"] .pt-card{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.pt-card .gl{font:22px/1 var(--pixel);color:var(--pink);display:block;margin-bottom:8px}
[data-theme="dark"] .pt-card .gl{text-shadow:var(--glow-p)}
.pt-card:nth-child(3n+2) .gl{color:var(--cyan)} .pt-card:nth-child(3n) .gl{color:var(--acid)}
[data-theme="light"] .pt-card:nth-child(3n) .gl{color:#b38f00}
.pt-card h3{font:700 16px var(--display)}
.pt-card p{color:var(--ink-2);font-size:13px;margin-top:4px}
/* home window mock */
.home{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:360px}
.home .col{padding:14px;display:flex;flex-direction:column;gap:8px}
.home .col+.col{border-left:1.5px solid var(--rule)}
.home .grp{font:17px var(--pixel);color:var(--violet);letter-spacing:.08em}
[data-theme="dark"] .home .grp{text-shadow:0 0 8px rgba(162,89,255,.7)}
.fr{display:flex;align-items:center;gap:9px;font-size:13px;padding:5px 7px;border-radius:var(--rad);cursor:pointer}
.fr:hover{background:var(--panel-3)}
.fr .av{width:30px;height:30px;font-size:19px}
.fr small{display:block;color:var(--ink-3);font-size:11px}
.fr small b{font-weight:400;color:#3dffb0}
[data-theme="light"] .fr small b{color:#0a9a62}
.fr .acts{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.fr:hover .acts{opacity:1}
.acts i{font:14px var(--pixel);border:1.5px solid var(--cyan);color:var(--cyan);border-radius:4px;padding:0 6px}
.addf{display:flex;gap:6px;border:1.5px dashed var(--cyan);border-radius:var(--rad);padding:6px 8px;font-size:12px;color:var(--ink-3)}
.addf b{margin-left:auto;font-weight:400;color:var(--cyan)}
.news{border:1.5px solid var(--pink);border-radius:var(--rad);padding:10px;background:var(--bubble-me)}
[data-theme="dark"] .news{box-shadow:0 0 14px rgba(255,62,165,.25)}
[data-theme="light"] .news{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.news b{font:700 13px var(--display)} .news p{font-size:12px;color:var(--ink-2);margin-top:3px}
.news time{font:14px var(--pixel);color:var(--pink);float:right}
.mysrv{display:flex;gap:8px;flex-wrap:wrap}
.mysrv .srv{width:38px;height:38px;font-size:20px}
.prof{display:flex;gap:10px;align-items:center;border:1.5px solid var(--rule);border-radius:var(--rad);padding:8px;background:var(--panel-2);margin-top:auto}
.prof .av{width:40px;height:40px;font-size:24px}
.prof small{display:block;color:var(--ink-3);font-size:11px}
.badge{font:13px var(--pixel);letter-spacing:.06em;padding:0 6px;border-radius:3px;margin-left:4px;vertical-align:1px}
.badge.og{background:var(--acid);color:#1b1600} .badge.st{background:var(--violet);color:#fff}
[data-theme="dark"] .badge.og{box-shadow:0 0 8px rgba(244,255,82,.6)} [data-theme="dark"] .badge.st{box-shadow:0 0 8px rgba(162,89,255,.7)}
/* features */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feats .pt-card{padding:18px}
.feats .pt-card .gl{font-size:26px}
/* hosting steps */
.host{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}
.steps{display:grid;gap:12px;counter-reset:s}
.step{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--rule);border-radius:var(--rad);padding:14px;background:var(--panel)}
[data-theme="light"] .step{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.step::before{counter-increment:s;content:"0" counter(s);font:30px/1 var(--pixel);color:var(--cyan);min-width:34px}
[data-theme="dark"] .step::before{text-shadow:var(--glow-c)}
.step h3{font:700 15px var(--display)} .step p{font-size:13px;color:var(--ink-2);margin-top:2px}
/* sealed band */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--rule);border-radius:var(--rad);overflow:hidden;background:var(--panel)}
[data-theme="light"] .band{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.band div{padding:20px}
.band div+div{border-left:1.5px solid var(--rule)}
.band b{font:28px/1 var(--pixel);display:block;margin-bottom:6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.band p{font-size:13px;color:var(--ink-2)}
/* closing */
.end{text-align:center;padding:40px 0 10px}
.end h2{font:700 clamp(32px,4vw,54px)/1 var(--display);letter-spacing:-.03em}
.end .cta{justify-content:center}
.foot{position:relative;z-index:1;border-top:1.5px solid var(--rule);padding:18px max(20px,calc((100vw - 1340px)/2));display:flex;gap:18px;font-size:12px;color:var(--ink-3);background:var(--ground)}
.foot a{color:var(--ink-2);text-decoration:none} .foot a:hover{color:var(--cyan)}
.foot span{margin-left:auto}
section[id]{scroll-margin-top:80px}
@media (max-width:1100px){.hub,.host{grid-template-columns:1fr}.feats{grid-template-columns:1fr 1fr}.nav nav{display:none}}
a.btn{text-decoration:none;display:inline-flex;align-items:center}
.alpha-badge{font:14px var(--pixel);letter-spacing:.08em;color:var(--acid);border:1.5px solid var(--acid);border-radius:3px;padding:0 5px;margin-left:-14px}
[data-theme="light"] .alpha-badge{color:var(--ink);border-color:var(--ink);background:var(--acid)}
@media (max-width:700px){.nav .right .btn{display:none}.feats,.pts,.band,.home{grid-template-columns:1fr}.band div+div{border-left:0;border-top:1.5px solid var(--rule)}.home .col+.col{border-left:0;border-top:1.5px solid var(--rule)}.foot{flex-wrap:wrap}.foot span{margin-left:0;width:100%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:1100px){.app{grid-template-columns:60px 196px 1fr}.side{display:none}.app .homev{grid-column:2/4}.hero{grid-template-columns:1fr}}

@keyframes caret{50%{opacity:0}}

/* ---------- shared: every page ---------- */
body{background:radial-gradient(1200px 600px at 80% -10%,rgba(162,89,255,.16),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(34,243,255,.08),transparent 60%),var(--ground);background-attachment:fixed}
[data-theme="light"] body{background:var(--ground)}
a{color:var(--cyan)}
[data-theme="light"] a{color:#0a6fb0}
.nav nav a[aria-current="page"]{color:var(--ink)}
.nav nav a[aria-current="page"]::after{content:"";display:block;height:2px;margin-top:2px;background:var(--grad)}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--pink);color:var(--on-pink);padding:6px 12px}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.note-line{font-size:13px;color:var(--ink-3);margin-top:16px;max-width:70ch}
.note-line a{color:var(--ink-2)}

/* ---------- inner pages ---------- */
.page{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:64px 20px 40px;display:grid;gap:96px}
.page>*{min-width:0}
.phead{max-width:760px}
.phead h1{font:700 clamp(36px,5vw,62px)/1 var(--display);letter-spacing:-.03em;margin-top:10px}
[data-theme="dark"] .phead h1{text-shadow:-2px 0 rgba(34,243,255,.45),2px 0 rgba(255,62,165,.45)}
.phead h1 .hl{text-shadow:none}
.phead .lede{color:var(--ink-2);font-size:16px;margin-top:18px;max-width:62ch}
.phead .cta{margin-top:24px}
.sec h2{font:700 clamp(26px,3vw,38px)/1.05 var(--display);letter-spacing:-.03em;margin-top:8px}
.sec h2 .hl{text-shadow:none}
.sec > .intro{color:var(--ink-2);font-size:15px;margin-top:12px;max-width:64ch}
.sec > .body{margin-top:26px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.pt-card .gl{min-height:22px}
.pt-card code,.prose code,.tbl code{font:13px var(--mono);color:var(--acid);background:rgba(162,89,255,.12);padding:1px 5px;border-radius:3px}
[data-theme="light"] .pt-card code,[data-theme="light"] .prose code,[data-theme="light"] .tbl code{color:#6a2bd9;background:#efe8ff}

/* two-path comparison */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.path{border:1.5px solid var(--rule);border-radius:var(--rad);background:var(--panel);padding:22px;position:relative;overflow:hidden}
.path::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.path.alt::before{background:linear-gradient(90deg,var(--acid),var(--amber))}
[data-theme="light"] .path{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.path .tagline{font:17px var(--pixel);letter-spacing:.08em;color:var(--violet)}
.path h3{font:700 22px var(--display);margin-top:4px}
.path ul{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px}
.path li{padding-left:22px;position:relative;color:var(--ink-2);font-size:14px}
.path li::before{content:">";position:absolute;left:0;font:18px/1.1 var(--pixel);color:var(--pink)}
.path.alt li::before{color:var(--acid)}
[data-theme="light"] .path.alt li::before{color:#b38f00}
.path{display:flex;flex-direction:column}
.path .cta{margin-top:auto;padding-top:18px}

/* code */
.code{position:relative;margin-top:14px;border:1.5px solid var(--rule);border-radius:var(--rad);background:#0a0618;overflow:hidden}
[data-theme="light"] .code{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:#16123a}
.code pre{margin:0;padding:14px 92px 14px 16px;font:13px/1.6 var(--mono);color:#e9e2ff;overflow-x:auto;white-space:pre}
.code .copy{position:absolute;top:8px;right:8px;font:16px var(--pixel);letter-spacing:.06em;border:1.5px solid var(--cyan);background:transparent;color:var(--cyan);border-radius:3px;padding:1px 10px;cursor:pointer}
.code .copy:hover{background:var(--cyan);color:var(--on-cyan)}
.code .label{display:block;font:15px var(--pixel);letter-spacing:.08em;color:#7c70a8;padding:8px 16px 0}

/* tables */
.tblwrap,.tbl-wrap{overflow-x:auto;border:1.5px solid var(--rule);border-radius:var(--rad);background:var(--panel)}
[data-theme="light"] .tblwrap,[data-theme="light"] .tbl-wrap{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{text-align:left;padding:11px 14px;vertical-align:top;border-bottom:1px solid var(--rule)}
.tbl tr:last-child td{border-bottom:0}
.tbl th{font:17px var(--pixel);letter-spacing:.08em;color:var(--violet);font-weight:400}
[data-theme="light"] .tbl th{color:var(--ink)}
.tbl td:first-child{color:var(--ink);font-weight:700;font-family:var(--display);font-size:14px}
.tbl td{color:var(--ink-2)}
.tbl .sum{font:11px var(--mono);word-break:break-all;color:var(--ink-3)}
.tbl .file{font:12px var(--mono);word-break:break-all;color:var(--ink)}

/* faq */
.qa{display:grid;gap:10px}
.qa details{border:1.5px solid var(--rule);border-radius:var(--rad);background:var(--panel);transition:border-color .2s}
[data-theme="light"] .qa details{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.qa details[open]{border-color:var(--cyan)}
.qa summary{cursor:pointer;list-style:none;padding:16px 50px 16px 18px;font:700 16px var(--display);position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font:28px/1 var(--pixel);color:var(--pink);transition:transform .2s}
.qa details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa .a{padding:0 18px 18px;color:var(--ink-2);font-size:14px;max-width:72ch}
.qa .a p+p{margin-top:8px}

/* callout */
.callout{display:flex;gap:14px;align-items:flex-start;border:1.5px dashed var(--acid);border-radius:var(--rad);padding:16px 18px;background:rgba(244,255,82,.05);font-size:14px;color:var(--ink-2)}
.callout b{color:var(--ink)}
.callout .gl{font:26px/1 var(--pixel);color:var(--acid)}
[data-theme="light"] .callout{border:2px dashed var(--ink);background:#fff8c4}
[data-theme="light"] .callout .gl{color:#b38f00}

/* download cards */
.dl{display:flex;flex-direction:column;gap:12px}
.dl-top{display:flex;align-items:center;gap:10px}
.dl-top h3{font:700 20px var(--display)}
.dl-ver{margin-left:auto;font:16px var(--pixel);letter-spacing:.06em;color:var(--acid);border:1.5px solid var(--acid);border-radius:3px;padding:0 6px}
[data-theme="light"] .dl-ver{color:var(--ink);border-color:var(--ink);background:var(--acid)}
.dl p{color:var(--ink-2);font-size:13px}
.dl .cta{margin-top:auto;padding-top:4px}
.dl details{font-size:12px;color:var(--ink-3)}
.dl details summary{cursor:pointer;font:15px var(--pixel);letter-spacing:.08em;color:var(--ink-3)}
.dl details .sum{font:11px var(--mono);word-break:break-all;margin-top:6px;display:block}
.pt-card.dl{padding:20px}

/* closing band on inner pages */
.close{text-align:center;padding:10px 0}
.close h2{font:700 clamp(28px,3.4vw,44px)/1 var(--display);letter-spacing:-.03em;margin-top:8px}
.close p{color:var(--ink-2);margin-top:10px}
.close .cta{justify-content:center}

/* docs list */
.doclist{display:grid;gap:10px}
.doc{display:flex;gap:16px;align-items:baseline;border:1.5px solid var(--rule);border-radius:var(--rad);background:var(--panel);padding:14px 16px;text-decoration:none;color:var(--ink-2);transition:transform .2s cubic-bezier(.3,1.6,.5,1),border-color .2s}
.doc:hover{transform:translateX(4px);border-color:var(--cyan)}
[data-theme="light"] .doc{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink-2)}
.doc b{font:14px var(--mono);color:var(--cyan);min-width:170px;font-weight:700}
[data-theme="light"] .doc b{color:#0a6fb0}

@media (max-width:1100px){
  .nav{flex-wrap:wrap;row-gap:8px}
  .nav nav{display:flex;order:3;width:100%;margin:0;overflow-x:auto;gap:16px;padding-bottom:2px;scrollbar-width:none}
  .nav nav a{white-space:nowrap}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .g2,.g3,.g4,.paths{grid-template-columns:1fr}
  .page{gap:72px;padding-top:40px}
  .doc{flex-direction:column;gap:4px}
  .code pre{padding-right:16px;padding-top:30px}
  .tblwrap{overflow:visible}
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:10px 0;border-bottom:1px solid var(--rule)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{border:0;padding:3px 14px}
}
.tbl caption{text-align:left;padding:10px 14px 0;font:15px var(--pixel);letter-spacing:.08em;color:var(--ink-3)}
.hint{font-size:13px;color:var(--ink-3);margin-top:12px}

/* ---------- v2: lighter layouts, no box grids ---------- */
/* rows: label left, text right, hairlines between */
.rows{display:grid;margin:26px 0 0;border-top:1px solid var(--rule)}
.rows>div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--rule)}
.rows dt{font:20px/1.2 var(--pixel);letter-spacing:.06em;color:var(--cyan)}
.rows>div:nth-child(3n+2) dt{color:var(--pink)} .rows>div:nth-child(3n) dt{color:var(--acid)}
[data-theme="light"] .rows dt{color:var(--ink)!important}
.rows dd{margin:0;color:var(--ink-2);font-size:15px;max-width:62ch}
[data-theme="light"] .rows{border-color:var(--ink)} [data-theme="light"] .rows>div{border-color:rgba(0,0,0,.18)}

/* timeline: numbered, one line down the left */
.tl{list-style:none;padding:0;margin:26px 0 0;counter-reset:t;position:relative}
.tl li:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:linear-gradient(var(--violet),var(--pink));opacity:.55}
.tl li{position:relative;padding:6px 0 34px 64px;counter-increment:t}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:0;width:40px;height:40px;box-shadow:0 0 0 6px var(--ground);display:grid;place-items:center;border-radius:50%;background:var(--ground);border:2px solid var(--violet);font:20px/1 var(--pixel);color:var(--cyan)}
.tl b{font:700 18px var(--display);display:block}
.tl p{color:var(--ink-2);font-size:15px;margin-top:4px;max-width:64ch}
[data-theme="light"] .tl li::before{border-color:var(--ink);color:var(--ink);background:#fff}

/* homepage hub: tick list instead of 4 cards */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.ticks li{display:flex;gap:14px;align-items:flex-start}
.ticks .gl{font:22px/1 var(--pixel);color:var(--pink);min-width:32px}
.ticks li:nth-child(2) .gl{color:var(--cyan)} .ticks li:nth-child(3) .gl{color:var(--acid)} .ticks li:nth-child(4) .gl{color:var(--violet)}
[data-theme="light"] .ticks .gl{color:var(--ink)!important}
.ticks b{font:700 17px var(--display);display:block}
.ticks span:not(.gl){color:var(--ink-2);font-size:14px}
.hub .sub{margin-top:18px}

/* homepage features: alternating spotlights */
.spot{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;margin-top:64px}
.spot.rev .spot-txt{order:2}
.spot-txt h3{font:700 clamp(26px,3vw,38px)/1.05 var(--display);letter-spacing:-.03em;margin-top:6px}
.spot-txt p{color:var(--ink-2);font-size:16px;margin-top:12px;max-width:44ch}
.tagl{font:18px var(--pixel);letter-spacing:.1em;color:var(--pink)}
.spot.rev .tagl{color:var(--cyan)!important} .spot:nth-of-type(3) .tagl{color:var(--acid)}
[data-theme="light"] .tagl{color:var(--ink)!important}
.spot-vis{align-self:center}
.vroom{padding:14px 16px;display:grid;gap:6px;font-size:14px}
.vch{display:flex;align-items:center;gap:8px;color:var(--ink-3);padding:4px 6px;border-radius:4px}
.vch.on{color:var(--ink);background:rgba(162,89,255,.16)}
.vch .vi{font:16px var(--pixel);color:var(--cyan)}
.vch em{margin-left:auto;font:15px var(--pixel);font-style:normal;color:var(--ink-3)}
.vmem{display:flex;align-items:center;gap:8px;padding:2px 0 2px 26px;color:var(--ink-2)}
.vmem .mute{margin-left:auto;font:14px var(--pixel);font-style:normal;color:var(--ink-3)}
.vstream{position:relative;margin:12px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:radial-gradient(circle at 70% 35%,rgba(255,165,61,.55),transparent 40%),linear-gradient(160deg,#2b6bff 0%,#a259ff 45%,#ff3ea5 75%,#1a0b2e 100%)}
.vstream::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(7,5,15,.85))}
.vstream .live{position:absolute;top:10px;left:10px;z-index:1}
.vstream .watch{position:absolute;top:10px;right:10px;z-index:1;font:15px var(--pixel);color:#fff;background:rgba(7,5,15,.6);padding:0 7px;border-radius:3px}
.vstream .hud{position:absolute;left:14px;bottom:12px;z-index:1;display:flex;gap:12px;align-items:baseline;color:#fff}
.vstream .hud b{font:700 18px var(--display);letter-spacing:.08em}
.vstream .hud span{font:18px var(--pixel)}
.vsearch{padding:14px 16px;display:grid;gap:12px}
.vsearch .q{border:1.5px solid var(--cyan);border-radius:6px;padding:8px 12px;font:14px var(--mono);color:var(--ink)}
.vsearch .cur{display:inline-block;width:.5em;height:1em;background:var(--cyan);vertical-align:-2px;margin-left:2px;animation:caret 1s steps(1) infinite}
.vsearch .hit{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.vsearch .hit b{font-size:13px} .vsearch .hit time{font:13px var(--pixel);color:var(--ink-3);margin-left:8px}
.vsearch .hit p{color:var(--ink-2);margin-top:2px}
.vsearch mark{background:rgba(244,255,82,.25);color:var(--ink);padding:0 2px;border-radius:2px}
.also{margin-top:72px;text-align:center}
.chips{list-style:none;padding:0;margin:16px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:820px}
.chips li{font:19px var(--pixel);letter-spacing:.05em;color:var(--ink);background:rgba(162,89,255,.10);border:1.5px solid var(--rule-hi);border-radius:999px;padding:3px 14px;transition:border-color .2s,color .2s}
.chips li:hover{border-color:var(--cyan);color:var(--ink)}
[data-theme="light"] .chips li{border:2px solid var(--ink);color:var(--ink);background:#fff}

@media (max-width:860px){
  .spot{grid-template-columns:1fr;gap:22px;margin-top:48px}
  .spot.rev .spot-txt{order:0}
  .rows>div{grid-template-columns:1fr;gap:4px}
}
.vstream .hp{position:absolute;left:14px;bottom:40px;z-index:1;width:34%;height:6px;border-radius:3px;background:rgba(255,255,255,.25)}
.vstream .hp i{display:block;height:100%;width:72%;border-radius:3px;background:var(--acid)}
.vstream .xh{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);z-index:1;border:2px solid rgba(255,255,255,.8);border-radius:50%}
.vstream .xh::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#fff;border-radius:50%}
.vstream .mm{position:absolute;right:12px;bottom:12px;z-index:1;width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:radial-gradient(circle,rgba(34,243,255,.4) 0 3px,transparent 4px),repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 4px,transparent 4px 9px),rgba(7,5,15,.55)}
.chips li{color:var(--ink)}