:root{color-scheme:light;background:#201c18}*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{overflow:hidden;font-family:system-ui,sans-serif;background:#201c18}main{height:100svh;display:grid;place-items:center;overflow:hidden}.tv{position:relative;width:min(1350px,108vw,105svh);aspect-ratio:8/7;isolation:isolate}.render{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.screen{position:absolute;top:0;left:0;width:800px;height:600px;border-radius:12% / 13%;overflow:hidden;transform-origin:0 0;background:#183033;visibility:hidden;isolation:isolate;box-shadow:inset 0 0 35px 15px #0007}.screen.ready{visibility:visible}.screen video,.screen iframe,#youtube-player{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#071416}.screen video:not([src]),#youtube-player:empty{display:none}.screen video{z-index:2}.screen iframe,#youtube-player{z-index:3}.glass{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(125deg,#dffefa12,transparent 45%);box-shadow:inset 0 0 24px 5px #0006}.screen.playing .glass{opacity:.3}#static{position:absolute;inset:0;width:100%;height:100%;opacity:.075;pointer-events:none;z-index:1}.screen.has-media #static{display:none}.play{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;display:grid;place-items:center;color:#f4f0de;cursor:pointer;z-index:5}.play svg{box-sizing:content-box;width:38px;height:38px;padding:25px;border:1px solid #eae5d050;border-radius:50%;background:#eae5d010;fill:currentColor;transition:background .2s,opacity .2s}.play:hover svg{background:#cee7df40}.screen.has-media .play svg{opacity:0}.screen.has-media:hover .play svg,.screen.has-media .play:focus-visible svg{opacity:1}.hardware{position:absolute;transform:translate(-50%,-50%);width:max(35px,4.5%);height:auto;aspect-ratio:1;border:0;border-radius:50%;background:transparent;cursor:pointer;z-index:6}.hardware:hover{box-shadow:0 0 0 2px #fff9}.hardware:focus-visible,.play:focus-visible,.close:focus-visible{outline:3px solid #fff;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.tv.dragging .screen{outline:7px solid #97c6b6}.close{display:none;position:absolute;right:20px;top:20px;width:44px;height:44px;border:1px solid #fff5;border-radius:50%;background:#111b;color:white;cursor:pointer;z-index:10}.close svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none}.screen.expanded,.screen:fullscreen{position:fixed;inset:0;width:100vw!important;height:100dvh!important;transform:none!important;border-radius:0;z-index:100;background:#000;box-shadow:none;visibility:visible}.screen.expanded .play,.screen.expanded .glass,.screen.expanded #static{display:none}.screen.expanded .close{display:grid;place-items:center}.screen.expanded video,.screen.expanded iframe,.screen.expanded #youtube-player{background:#000}.tv:has(.expanded){isolation:auto}.tv:has(.expanded) .hardware{visibility:hidden}@media(max-width:600px){.tv{width:114vw;max-width:none;flex-shrink:0}.hardware{width:36px}.close{right:14px;top:14px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.watch-shell{display:block;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer}.watch-shell:focus-visible{outline:2px solid #53796d;outline-offset:-40px}

.screen.expanded,.screen:fullscreen{clip-path:none!important}

.glass:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0px,#0000 3px,#0003 4px);opacity:.18;pointer-events:none}.screen.expanded .glass:after{display:none}#mute{width:15%;height:4%;border-radius:5px}

/* The live mesh fills the viewport. HTML media only takes over in fullscreen. */
.tv{width:100vw;height:100svh;aspect-ratio:auto;max-width:none}
.watch-shell{position:absolute;inset:0;touch-action:none;cursor:grab;outline-offset:-8px}
.watch-shell canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
.watch-shell .render{position:absolute;inset:0;margin:auto;width:min(85vw,90svh);height:auto;opacity:.5}
.watch-shell.loaded .render{display:none}
.watch-shell.failed canvas{display:none}
.screen{background:transparent;box-shadow:none;border-radius:12% / 13%;pointer-events:none}
.screen:not(.expanded) video,.screen:not(.expanded) .glass,.screen:not(.expanded) #static{display:none}
.screen:not(.expanded) #youtube-player{border-radius:12% / 13%;overflow:hidden}
.screen:not(.expanded) .play{pointer-events:none}
.screen .play svg{width:32px;height:32px;padding:20px;opacity:.8;background:#ebf5e709}
.screen.has-media .play svg{opacity:0}
.screen:focus-within .play svg{opacity:1}
.screen.expanded{pointer-events:auto}
.hardware{width:30px;height:30px;aspect-ratio:1;visibility:hidden}
#mute{width:64px;height:20px}



#status:not(.sr-only){position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:80vw;color:#394e43;font-size:13px;text-align:center}
@media(max-width:600px){.tv{width:100vw}}

/* Reference-matched monochrome CRT and quieter product-stage controls. */
.screen .play{color:#233532}.screen .play svg{border-color:#253e343d;background:#ffffff0b;opacity:.68}

.watch-shell:not(.loaded):not(.failed) canvas{opacity:0}

/* Sound stays in the margin; the room is the interface. */
.sound-controls{position:fixed;left:max(20px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));z-index:12;display:flex;align-items:center;gap:10px;color:#f1e8d9;font:11px/1.3 system-ui,sans-serif;text-shadow:0 1px 4px #0008}
.sound-controls button{appearance:none;display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 3px;border:0;border-radius:2px;background:none;color:inherit;font:inherit;cursor:pointer;text-shadow:inherit;opacity:.8}
.sound-controls button:hover,.sound-controls button:focus-visible{opacity:1}.sound-controls button:focus-visible,.sound-controls a:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.sound-controls svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.speaker-on{display:none}#music-toggle.active .speaker-on{display:block}#music-toggle.active .speaker-off{display:none}
#sound-options{display:flex;align-items:center;gap:9px}#sound-options[hidden]{display:none}
#music-volume{appearance:none;width:58px;height:2px;border:0;border-radius:0;background:linear-gradient(to right,#e8decc var(--volume,48%),#e8decc45 var(--volume,48%));cursor:pointer;padding:0;margin:0 3px;outline-offset:8px;touch-action:none}
#music-volume::-webkit-slider-thumb{appearance:none;width:7px;height:7px;border:0;border-radius:50%;background:#e8decc;box-shadow:0 0 0 8px transparent}#music-volume::-moz-range-thumb{width:7px;height:7px;border:0;border-radius:50%;background:#e8decc}
#next-track{width:30px}#sound-options a{color:inherit;font-size:10px;text-decoration:none;opacity:.65}#sound-options a:hover{text-decoration:underline;text-underline-offset:3px;opacity:1}
body:has(.expanded) .sound-controls{display:none}
@media(max-width:600px){.sound-controls{left:max(16px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom))}}