#space { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.flight-field { position:absolute; inset:0; transform:translate(var(--pointer-x,0px),var(--pointer-y,0px)); transition:transform .45s ease-out; }
.flight-star { position:absolute; left:50%; top:43%; width:3px; height:3px; background:var(--accent); animation:star-flight calc(var(--duration) * 6) linear calc(var(--delay) * 6) infinite; }
.flight-star::before { content:''; position:absolute; width:2px; height:2px; opacity:.38; box-shadow:calc(var(--x) * -.004) calc(var(--y) * -.004) var(--accent),calc(var(--x) * -.008) calc(var(--y) * -.008) var(--accent),calc(var(--x) * -.012) calc(var(--y) * -.012) var(--accent); }
@keyframes star-flight {
  0% { transform:translate3d(0,0,0) scale(.4); opacity:.12; }
  35% { transform:translate3d(calc(var(--x) * .09),calc(var(--y) * .09),0) scale(.65); opacity:.35; }
  65% { transform:translate3d(calc(var(--x) * .3),calc(var(--y) * .3),0) scale(1); opacity:.65; }
  90% { transform:translate3d(calc(var(--x) * .72),calc(var(--y) * .72),0) scale(1.5); opacity:.8; }
  100% { transform:translate3d(var(--x),var(--y),0) scale(1.7); opacity:0; }
}
.flight-shields { position:absolute; inset:0; }
.flight-shield { position:absolute; background:var(--black); }
#space[data-state="paused"] .flight-star { animation-play-state:paused; }
#space[data-state="paused"] .flight-field { transition:none; }
@media(prefers-reduced-motion:reduce) { #space:not([data-state="running"]) .flight-star { animation-play-state:paused; } .flight-field { transition:none; } }
.page { position:relative; z-index:1; }
.space-toggle { position:fixed; right:24px; bottom:20px; z-index:2; display:flex; align-items:center; justify-content:center; gap:8px; min-width:36px; min-height:36px; padding:8px; border:0; background:var(--black); color:var(--accent); }
.space-toggle svg { width:20px; height:20px; flex-shrink:0; }
.space-toggle-label { display:none; font-size:14px; }
.space-toggle[aria-pressed="true"] .space-toggle-label { display:inline; }
.space-toggle:hover { background:var(--accent); color:var(--black); }
@media(max-width:600px) { .space-toggle { right:16px; bottom:12px; } }
.flight-spark { position:absolute; width:3px; height:3px; background:var(--accent); animation:flight-spark .7s ease-out forwards; }
@keyframes flight-spark { to { transform:translate(var(--spark-x),var(--spark-y)); opacity:0; } }
#space[data-state="paused"] .flight-spark { display:none; }