:root { color-scheme: dark; }
html, body { margin: 0; min-height: 100%; background: #050811; }
.webgl-page { min-height: 100svh; color: #eef4ff; }
.webgl-page main { width: min(100%, 760px); margin: auto; padding: max(18px, env(safe-area-inset-top)) 8px max(24px, env(safe-area-inset-bottom)); text-align: center; }
.webgl-page h1 { margin: 0; font-size: clamp(28px, 7vw, 48px); }
.webgl-page header > p:last-child { margin: 8px 0 0; color: #91a1ba; font-size: 12px; }
.webgl-card-wrap { position: relative; width: min(96vw, 720px); margin: 16px auto 0; aspect-ratio: 1074 / 1344; perspective: 1100px; }
#holo-canvas { display: block; width: 100%; height: 100%; border-radius: 4.2% / 3.4%; background: #071227; box-shadow: 0 30px 70px rgba(0,0,0,.58), 0 0 0 1px rgba(164,201,255,.3); transform: rotateX(var(--gpu-rx, 0deg)) rotateY(var(--gpu-ry, 0deg)); transform-origin: center; }
#webgl-motion { position: absolute; left: 50%; bottom: 16px; z-index: 2; transform: translateX(-50%); padding: 10px 15px; border: 1px solid rgba(180,215,255,.55); border-radius: 999px; color: #fff; background: rgba(5,13,29,.82); backdrop-filter: blur(8px); }
.motion-active #webgl-motion { display: none; }
.webgl-note { margin: 10px auto 0; color: #77869e; font-size: 10px; }
.back-link { display: inline-block; margin-top: 9px; color: #9fc8ff; font-size: 11px; }