:root { color-scheme: light; --paper: #f4f1e9; --ink: #24241f; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
.scene { width: min(1100px, 100vw); height: min(100svh, clamp(340px, 58vh, 680px)); position: relative; }
.orbit { position: absolute; width: 71%; height: 47%; left: 14.5%; top: 26.5%; border: 1px solid #24241f30; border-radius: 50%; transform: rotate(-12deg); }
.characters { position: absolute; top: 50%; left: 50%; width: 100vw; height: 100svh; transform: translate(-50%, -50%); pointer-events: none; }
.fallback { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.fallback svg { width: min(75%, 480px); height: auto; }
.scene.ready .fallback { display: none; }