:root{
  --void:#000000; --void-2:#070A12; --panel:#10162A;
  --star:#EAF0FF; --star-dim:#8A93B2;
  --cyan:#4DD2FF; --gold:#F5C518; --violet:#7B6CFF; --sienna:#FF7A45;
  --panel-bg:linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  --panel-bd:1px solid rgba(255,255,255,0.22);
  --panel-sh:0 26px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--star);font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--cyan);color:#05060B}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes introFailsafe{0%,86%{opacity:1}100%{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes pulseLive{0%,100%{opacity:1}50%{opacity:0.35}}
@keyframes mascotBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes mascotBlink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(0.1)}}
@keyframes mascotWave{0%,100%{transform:rotate(2deg)}25%{transform:rotate(24deg)}50%{transform:rotate(8deg)}75%{transform:rotate(24deg)}}
@keyframes mascotGlow{0%,100%{opacity:0.8}50%{opacity:1}}
@keyframes avatarBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes avatarScan{0%{transform:translateY(-20px)}100%{transform:translateY(180px)}}
@keyframes avatarFlicker{0%,100%{opacity:1}48%{opacity:0.92}50%{opacity:0.7}52%{opacity:0.95}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:680px){[data-gb-label]{display:none}}