:root { color-scheme: dark; background: #17181e; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { background: #17181e; }
main { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 160px; overflow: hidden; }
.scene { position: absolute; inset: 0; }
/* The native renderer fills the viewport and independently preserves the
   title's aspect ratio. Static fallback stays uncropped and undistorted. */
.scene img { display: block; width: 100%; height: 100%; object-fit: contain; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.scene canvas.ready { opacity: 1; }
#motion-toggle { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff25; border-radius: 50%; background: #17181e90; color: #c1b8ce; font: 18px/1 system-ui,sans-serif; cursor: pointer; opacity: .55; transition: opacity .2s; touch-action: manipulation; }
#motion-toggle:hover, #motion-toggle:focus-visible { opacity: 1; }
#motion-toggle:focus-visible { outline: 2px solid #bb97ff; outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { #motion-toggle { transition: none; } }

/* Render the UV symbol as resolution-independent curves, outside the canvas. */
.scene #uv-vector { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--logo-width, 0px); height: auto; object-fit: contain; opacity: 0; pointer-events: none; }
.scene canvas.ready + #uv-vector { opacity: 1; }

/* Keep the static banner out of the loading state: its title uses a different
   scale. Reveal the decoded vector and first sized canvas frame together. */
.scene #still[hidden] { display: none; }
.scene canvas, .scene #uv-vector { transition: opacity 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .scene canvas, .scene #uv-vector { transition: none; }
}