:root{color-scheme:dark;background:#121724;color:#f5e6cb;--warm:#ecc28a;--record-label:#c7956c}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
button{font:inherit;color:inherit;border:0;padding:0;background:none;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:1px solid #ffe1a9;outline-offset:6px}
button:focus:not(:focus-visible){outline:none}
[hidden]{display:none!important}
.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}
.world{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate;touch-action:none;cursor:grab;background:#151b29}
.world.dragging,.world.dragging *{cursor:grabbing!important}
.camera{position:absolute;width:1672px;height:941px;transform-origin:center;will-change:transform;transform-style:preserve-3d}
.depth-layer{position:absolute;inset:0;will-change:transform;transform-style:preserve-3d}
.exterior{z-index:0;pointer-events:none}
.art-image,.room-shell{display:block;width:100%;height:100%;position:absolute;inset:0}
.interior{z-index:2;pointer-events:none}
.room-shell{pointer-events:none}
.full-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.window-zones{position:absolute;inset:0;z-index:1}
.window-zone{position:absolute;top:16.6%;height:48.4%;cursor:crosshair;border-radius:1px;transition:box-shadow .6s}
.window-zone:focus-visible{outline:1px solid #dcdef288;outline-offset:-7px;box-shadow:inset 0 0 35px #d1d5ef15}
.pane-1{left:18.4%;width:14.2%}.pane-2{left:35.5%;width:15.4%}.pane-3{left:53.8%;width:15.9%}.pane-4{left:72.5%;width:15.3%}
.scene-object{position:absolute;pointer-events:auto;transform-style:preserve-3d;transform-origin:50% 85%;cursor:pointer;isolation:isolate;transition:filter .25s}
.object-image{position:absolute;inset:0;background-image:url('./assets/room-night.png');background-repeat:no-repeat;pointer-events:none;transform-origin:50% 90%;will-change:transform}
.scene-object:focus-visible{outline:none;filter:drop-shadow(0 0 3px #ffe3a9) drop-shadow(0 0 7px #ffd9a499)}
.scene-object:hover{filter:drop-shadow(0 0 2px #fbd2a149)}
.interaction{pointer-events:auto;cursor:pointer}
.record-pile{left:19.74%;top:67.48%;width:8.61%;height:3.94%;z-index:8;transform-origin:50% 100%}
.record-pile .object-image{background-size:1161.11% 2543.24%;background-position:21.597% 70.243%;clip-path:polygon(9% 0,89% 0,95% 8%,99% 89%,95% 98%,0 94%,0 34%)}
.record-pile:hover .object-image{animation:shuffle .9s ease-in-out infinite alternate}
.edge-light{position:absolute;inset:1px 5%;border-top:1px solid #ffddae88;box-shadow:0 -3px 10px #ffc99635;opacity:0;transition:opacity .3s;pointer-events:none}
.record-pile:hover .edge-light,.record-pile:focus-visible .edge-light{opacity:.8}
.record-pile:after{content:'';position:absolute;inset:-25% 0;pointer-events:none;background:linear-gradient(100deg,transparent 10%,#ffdfb42b 45%,transparent 75%);opacity:0;animation:record-invitation 9s 3s ease-in-out infinite}
.inside-records{position:absolute;left:19.4%;top:61.6%;width:8%;height:4.5%;border-radius:20%;z-index:6;pointer-events:auto;cursor:inherit}
.turntable{left:18.48%;top:47.18%;width:12.08%;height:12.12%;z-index:8;transform-origin:50% 93%}
.turntable .object-image{background-size:827.72% 825.44%;background-position:21.02% 53.688%;clip-path:polygon(11% 2%,85% 2%,98% 70%,99% 78%,96% 93%,91% 97%,5% 97%,0 87%,3% 73%,23% 63%)}
.turntable-disc{position:absolute;left:18.9046%;top:64.6605%;width:54.7703%;height:16.358%;opacity:0;transform:rotate(-1.8deg);pointer-events:none}
.has-record .turntable-disc{opacity:1}
/* The flight overlay is a sibling of the room, so share its live exposure. */
.lights-off .turntable-disc,.world.lights-off ~ .flying-disc{filter:brightness(.48) saturate(.75)}
.turntable-tonearm{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.tonearm-swing,.tonearm-lift{transform-origin:0 0}
.world.lights-off .turntable-tonearm{filter:url(#moonlit-equipment)}
.record-surface{display:block;width:100%;height:100%;border-radius:50%;position:relative}
.record-face{display:block;position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 1px,#aaaaaa13 1.7px 2.3px,transparent 3px 4px),conic-gradient(from 28deg,#0c1218,#2b3037 15%,#0c1118 30%,#171c25 47%,#353b43 65%,#0b1018 83%,#0c1218);box-shadow:0 0 0 1px #a8abae63,0 3px 10px #0006;overflow:hidden}
.record-face i{position:absolute;inset:36%;border-radius:50%;background:conic-gradient(from 40deg,var(--record-label) 0 60%,color-mix(in srgb,var(--record-label) 50%,#fff) 60% 68%,var(--record-label) 68%);box-shadow:inset 0 0 0 1px #ffffff28}
.record-face i:after{content:'';position:absolute;inset:44%;background:#18212b;border-radius:50%}
.vinyl-gem .record-face{background:repeating-radial-gradient(circle,transparent 0 1px,#ffffff28 1.7px 2.3px,#77365a0e 3px 4px),conic-gradient(from 28deg,#ffffff00,#fff0f980 13%,#ffffff00 24%,#86244c35 40%,#ffffff00 48%,#fff5fcaa 65%,#ffd5ed18 78%,#ffffff00),radial-gradient(ellipse at 30% 24%,var(--vinyl-highlight),transparent 62%),var(--vinyl-base);box-shadow:0 0 0 1px #f9dceac9,inset 0 0 0 2px #ffd0e940,0 3px 8px #0006}
.vinyl-glass .record-face{background:repeating-radial-gradient(circle,transparent 0 1px,#d9fff921 1.7px 2.3px,#173c2c08 3px 4px),conic-gradient(from 28deg,#ffffff00,#e0fff54d 15%,#ffffff00 30%,#164c3524 47%,#e8fff64d 65%,#ffffff00 83%),radial-gradient(ellipse at 32% 22%,color-mix(in srgb,var(--vinyl-highlight) 45%,transparent),transparent 68%),color-mix(in srgb,var(--vinyl-base) 64%,transparent);box-shadow:0 0 0 1px #b1e5cec9,inset 0 0 0 2px #e2fff330,0 3px 8px #0004}
.turntable-disc .record-surface{height:auto;aspect-ratio:1;position:absolute;top:50%;transform:translateY(-50%) scaleY(.168645)}
.turntable-disc:after{content:'';position:absolute;left:50%;top:50%;width:1.5px;height:3.5px;background:linear-gradient(90deg,#807e75,#e1dbcf,#62687a);transform:translate(-50%,-95%);border-radius:1px;box-shadow:0 1px 1px #0006}
.player-led{position:absolute;left:11%;bottom:7%;width:1.9%;height:2%;border-radius:50%;background:#acbd8355;transition:box-shadow .4s}
.playing .player-led{background:#edc289;box-shadow:0 0 8px 2px #f4c78999}
.lights-off .player-led{filter:brightness(.65);opacity:.7}
.speaker{left:33.61%;top:60.25%;width:7.3%;height:8.08%;z-index:7;transform-origin:50% 100%}
.speaker .object-image{background-size:1370.49% 1238.16%;background-position:36.258% 65.549%;clip-path:polygon(3% 0,98% 3%,99% 95%,2% 98%,0 10%)}
/* Real front controls, projected onto the illustrated speaker's lower bar. */
.speaker-hardware{position:absolute;inset:0;pointer-events:none}
.speaker-hardware i{position:absolute;top:88.6%;transform:translate(-50%,-50%);width:2.7px;height:2.7px;border-radius:50%;background:#343638;border:.65px solid #e8e6dd;box-shadow:0 0 0 .45px #62666a8c}
.speaker-hardware .speaker-aux{left:62.8%;background:radial-gradient(circle,#22282b 0 36%,#aab1ad 39% 63%,#f5eee0 65%)}
.speaker-hardware .speaker-volume{left:69.8%;width:4.1px;height:4.1px;background:radial-gradient(circle at 35% 30%,#565957,#151b1d 75%);border:.5px solid #eee7d8;box-shadow:.5px .7px 1px #0006}
.speaker-hardware .speaker-toggle{left:76.5%;background:#a5aaa7}
.speaker-toggle:after{content:'';position:absolute;left:35%;top:32%;width:.9px;height:2.9px;border-radius:.5px;transform:rotate(-12deg);background:linear-gradient(90deg,#dddccf,#626f78);box-shadow:.6px .7px .6px #0007}
.speaker-hardware .speaker-status{left:83.1%;background:#333c44}
/* The LED reflects the speaker's on/mute state, including while music is paused. */
.world:not(.muted) .speaker-hardware .speaker-status{background:radial-gradient(circle,#fff 0 39%,#c4d0dc 48%,#758698 72%);box-shadow:0 0 2px #fff8,0 0 4px #e2ecff4a}
.figure-one{left:34.39%;top:57.49%;width:1.91%;height:3.72%;z-index:8}
.figure-one .object-image{background-size:5225% 2688.57%;background-position:35.122% 59.713%;clip-path:polygon(18% 94%,10% 67%,19% 42%,29% 34%,27% 10%,46% 0,69% 14%,72% 43%,85% 59%,77% 79%,87% 98%)}
.figure-two{left:37.68%;top:57.7%;width:1.97%;height:3.51%;z-index:8}
.figure-two .object-image{background-size:5066.67% 2851.52%;background-position:38.426% 59.802%;clip-path:polygon(14% 96%,18% 76%,10% 44%,23% 27%,20% 6%,42% 10%,56% 0,69% 6%,64% 31%,83% 55%,81% 88%,96% 95%)}
.plush{left:76.44%;top:57.28%;width:13.76%;height:15.09%;z-index:7;transform-origin:50% 95%}
.plush .object-image{background-size:726.96% 662.68%;background-position:88.626% 67.459%;clip-path:polygon(5% 66%,9% 36%,17% 18%,33% 9%,41% 1%,59% 7%,70% 9%,80% 24%,83% 39%,95% 62%,96% 77%,100% 84%,88% 93%,71% 97%,37% 98%,10% 84%,0 78%)}
.lamp-zone{position:absolute;left:3.9%;top:25.3%;width:7.8%;height:34%;z-index:5;clip-path:polygon(0 0,100% 0,87% 16%,60% 25%,60% 100%,39% 100%,40% 25%,15% 17%)}
.lamp-zone:focus-visible{outline:none;filter:drop-shadow(0 0 4px #ffe3a9)}
.lamp-spark{position:absolute;top:6%;left:17%;width:66%;height:4%;border-radius:50%;background:#ffdfaa6b;box-shadow:0 0 25px 15px #ffd39535;opacity:0;transition:opacity .4s}
.lamp-zone:hover .lamp-spark,.lamp-zone:focus-visible .lamp-spark{opacity:1}
.lamp-light{position:absolute;left:-10%;top:9%;width:37%;height:75%;background:radial-gradient(ellipse at 50% 40%,#ffb74d18,transparent 65%);pointer-events:none;mix-blend-mode:screen;animation:lamplight 11s ease-in-out infinite;transition:opacity 1.2s}
.world.lights-off .lamp-light,.world.lights-off .lamp-spark{opacity:0;animation:none;transition:none}
.glass-reflections{position:absolute;left:18.3%;top:16.5%;width:70%;height:49%;pointer-events:none;background:linear-gradient(112deg,transparent 3%,#fbe2cb03 12%,transparent 17%,transparent 60%,#99b6ff03 65%,transparent 68%);mix-blend-mode:screen}
.television{position:absolute;left:89.05%;top:17.96%;width:10.95%;height:40.98%;z-index:4;clip-path:polygon(0 8%,100% 0,100% 100%,0 92%);overflow:hidden}
.television canvas{width:100%;height:100%;opacity:0;transition:opacity .8s;mix-blend-mode:screen}
.television.on canvas{opacity:.6}
.television:focus-visible{outline:none;box-shadow:inset 0 0 12px #a2bde88c}
.dust{z-index:12;mix-blend-mode:screen;opacity:.7}
.vignette,.grain{position:absolute;inset:0;pointer-events:none}
.vignette{z-index:20;box-shadow:inset 0 0 12vw 4vw #080e2529;background:linear-gradient(180deg,#0a0f210b,transparent 15%,transparent 87%,#060b1a27);transition:background .7s}
.grain{z-index:21;opacity:.023;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.world.browsing .camera{filter:blur(3px) brightness(.75)}
.world:not(.browsing) .camera{filter:none}
.world.browsing .record-pile{opacity:.08}
.record-pile{transition:opacity .4s}
.flying-disc{position:fixed;width:180px;height:180px;z-index:1000;pointer-events:none;transform-origin:center;perspective:900px}
.flying-disc .record-surface{width:100%;height:100%}
.pan-edge{position:absolute;top:0;bottom:0;width:30px;pointer-events:none;z-index:22;opacity:0}
.pan-left{left:0;background:linear-gradient(90deg,#070d2120,transparent)}.pan-right{right:0;background:linear-gradient(-90deg,#070d2120,transparent)}
.world.loading{cursor:progress}.world.loading .interaction{cursor:progress}
@keyframes spin{to{rotate:360deg}}
@keyframes shuffle{to{transform:translateY(-2px) rotate(-.6deg)}}
@keyframes record-invitation{0%,70%,100%{opacity:0}82%{opacity:.8}90%{opacity:.2}}
@keyframes lamplight{0%,100%{opacity:.9}50%{opacity:.65}}
@media(max-width:650px){.pan-edge{opacity:1}.record-pile{min-height:28px}.scene-object:focus-visible{filter:drop-shadow(0 0 4px #ffe3a9)}}