:root { color-scheme: dark; background: #020307; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.scene { position: fixed; inset: 0; overflow: hidden; background: #020307; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.8s ease; }
.scene.ready canvas { opacity: 1; }
.fallback-art { position: absolute; inset: 0; background: #020307 url('/galaxy-still.webp') center / cover no-repeat; }
.scene[data-renderer="fallback"] canvas { opacity: 0; transition: none; }
@media (max-aspect-ratio: 4/5) {
  .fallback-art { background-image: url('/galaxy-still-portrait.webp'); }
}
@media (prefers-reduced-motion: reduce) { .scene canvas { transition: none; } }