/* The light installation is isolated from the main website's layout. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: #050507; }
body { color: #dfd4c4; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.experience { width: 100%; height: 100svh; min-height: 360px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 46%, #25142040, transparent 51%), #050507; }
#scene-canvas { position: absolute; inset: 0; outline-offset: -5px; cursor: grab; touch-action: none; }
#scene-canvas:active { cursor: grabbing; }
#scene-canvas canvas { width: 100%; height: 100%; display: block; }
#scene-canvas canvas[hidden] { display: none; }
.scene-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12vh 8vw; opacity: .9; }
.scene-ready .scene-fallback { display: none; }
.home-link { position: absolute; top: 24px; left: 28px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; color: #d7d4d0; font: 23px Georgia, serif; text-decoration: none; opacity: .7; transition: opacity .2s; }
.home-link:hover { opacity: 1; }
.scene-label { position: absolute; top: 33px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: .68; }
.scene-label span:first-child { display: block; font: 19px "Songti SC", "Noto Serif CJK SC", serif; letter-spacing: .4em; padding-left: .4em; color: #e7d0a5; }
.scene-label span:last-child { display: block; margin-top: 9px; font-size: 7px; letter-spacing: .31em; padding-left: .31em; color: #9d9291; }
.scene-controls { position: absolute; right: 25px; top: 24px; display: flex; gap: 5px; z-index: 2; }
.scene-controls[hidden] { display: none; }
.scene-controls button { width: 40px; height: 40px; border: 0; border-radius: 50%; color: #c8bbaa; background: transparent; cursor: pointer; opacity: .6; transition: opacity .2s, background .2s; }
.scene-controls button:hover { opacity: 1; background: #ffffff08; }
.scene-controls svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.play-icon { display: none; }
.motion-paused .play-icon { display: block; }
.motion-paused .pause-icon { display: none; }
#scene-instructions { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: .14em; color: #8d858a; opacity: .75; pointer-events: none; margin: 0; }
#scene-instructions span { padding: 0 9px; opacity: .5; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 1px solid #d1b48d; outline-offset: 3px; }
#scene-canvas:focus-visible { outline-offset: -5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.fallback-note { position: absolute; bottom: 55px; width: 100%; text-align: center; font-size: 11px; color: #a69b94; }
@media (max-width: 600px) { .home-link { left: 13px; top: 17px; } .scene-controls { right: 12px; top: 17px; gap: 0; } .scene-label { top: 29px; } .scene-label span:first-child { font-size: 17px; } #scene-instructions { font-size: 8px; bottom: max(28px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }