/* Floating television and VHS collection. The night sky is shared with interior pages. */
body:not(.interior-page){background:radial-gradient(ellipse at 50% 38%,#11192766,transparent 62%),#020308}
body:not(.interior-page):before{opacity:1}
body:not(.interior-page) .site.room-site{min-height:100svh;padding:12px 0;overflow:hidden}
.room-site .room{display:block;position:relative;isolation:isolate;width:min(100vw,145svh,1700px);aspect-ratio:3/2;container-type:inline-size}
.room .television.photographic{position:absolute;width:80%;left:10%;top:-2%;aspect-ratio:3/2;filter:drop-shadow(0 16px 20px #0008);z-index:2}
.room .tv-photograph{filter:brightness(.96)}
.room .photo-channels .channel-name{font-size:clamp(8px,1.5cqw,16px)}
/* One inset assembly follows the casing and aligns with the bank of page keys. */
.vhs-deck{position:absolute;left:28.145%;top:68.35%;width:37.31%;height:7.4%;pointer-events:none;z-index:5;border-radius:4% / 24%;background:linear-gradient(105deg,#969391,#a4a19f 48%,#8e8b88);border:1px solid #777572;box-shadow:0 -1px 1px #4b484666,0 1px 1px #e2e0d182,inset 0 1px 1px #d2d0c080,inset 1px 0 1px #c8c6b64d,inset 0 -1px 2px #4b484566;isolation:isolate}
.vhs-deck:before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:var(--grain);opacity:.24;mix-blend-mode:soft-light}
.vhs-slot{position:absolute;left:7.5%;top:7%;width:78.5%;height:86%;border-radius:1.4% / 15%;background:linear-gradient(#0d100b,#252a21);border:1px solid #50574a;box-shadow:0 -1px 1px #e6e3d04d,0 1px 1px #e6e3d088,inset 0 3px 4px #000c,inset 1px 0 2px #000b;transition:box-shadow .18s}
.slot-flap{position:absolute;inset:4% .7% 9%;overflow:hidden;transform-origin:50% 0;transform:rotateX(0deg);border-radius:1% / 10%;background:linear-gradient(105deg,#969391,#a4a19f 48%,#8e8b88);box-shadow:inset 0 1px 1px #c2c4b666,inset 0 -1px 1px #343c2c,0 1px 1px #000a;transition:transform .2s}
.slot-flap:after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--grain);opacity:.2;mix-blend-mode:soft-light;pointer-events:none}
.slot-wordmark{position:absolute;left:12%;top:12%;width:76%;height:76%;display:block;overflow:hidden;opacity:.84;mix-blend-mode:multiply;filter:brightness(0) saturate(100%) invert(28%) sepia(8%) saturate(388%) hue-rotate(50deg) brightness(94%) contrast(89%) drop-shadow(0 -1px 0 #282b2638);pointer-events:none}
.vhs-slot.is-ready,.vhs-slot.is-loading{box-shadow:0 -1px 1px #e6e3d033,0 1px 1px #e6e3d088,inset 0 0 0 1px #d989a088,inset 0 3px 5px #000,0 0 9px #d85c8c55}
.is-ready .slot-flap,.is-loading .slot-flap{transform:perspective(80px) rotateX(-76deg)}
.slot-light{position:absolute;left:-5%;top:44%;width:1.2%;aspect-ratio:1;border-radius:50%;background:#494d3e;box-shadow:0 1px 1px #d0d1b877,inset 0 1px 1px #161e0d;transition:background .2s,box-shadow .2s}
.has-tape .slot-light,.is-loading .slot-light{background:#d46c92;box-shadow:0 0 4px #f2709b}
.eject-button{position:absolute;left:88.3%;top:27%;height:43%;width:6.8%;display:grid;place-items:center;pointer-events:auto;padding:0;border:1px solid #726f6c;border-radius:12% / 18%;background:linear-gradient(120deg,#a7a4a1,#999693);box-shadow:inset 0 1px 1px #dedbd799,0 1px 1px #4b4845;cursor:pointer;color:#45413e}
.eject-button:before{content:'';position:absolute;inset:-8px -5px}
.eject-button svg{width:37%;height:55%}
.eject-button:disabled{cursor:default;color:#66615d}
.eject-button:active:not(:disabled){box-shadow:inset 0 1px 2px #3e4835;transform:translateY(1px)}
.tape-collection{position:absolute;inset:0;z-index:3;pointer-events:none}
.vhs-tape{position:absolute;display:block;margin:0;padding:0;width:18%;aspect-ratio:3/2;border:0;background:none;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:perspective(900px) rotateX(12deg) rotateZ(var(--tape-angle));transform-origin:center;filter:drop-shadow(2px 9px 8px #000b);pointer-events:auto;transition:filter .18s,opacity .2s;container-type:inline-size;animation:tape-float 7s ease-in-out infinite}
.vhs-tape:before{content:'';position:absolute;inset:8% 3%;border-radius:4px;z-index:-1}
.vhs-tape img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.vhs-tape:hover{filter:drop-shadow(2px 10px 7px #000a) brightness(1.13)}
.vhs-tape:focus-visible{outline:2px solid #e9d79a;outline-offset:0;border-radius:5px}
.tape-1{left:7%;top:78%;animation-delay:-2s}.tape-2{left:29%;top:80%;animation-delay:-5s}.tape-3{left:51%;top:78%;animation-delay:-.5s}.tape-4{left:73%;top:80%;animation-delay:-3.5s}
@keyframes tape-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
.tape-label{position:absolute;left:30%;top:32%;width:40%;height:37%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3%;color:#29251f;background:var(--label-color);border-radius:2% / 5%;box-shadow:0 1px 2px #0007,inset 0 1px 0 #ffffff99;pointer-events:none;overflow:hidden;transform:rotate(-.3deg)}
.tape-label>span{font:italic bold clamp(5px,3.8cqw,28px)/1.05 'Courier New',monospace;letter-spacing:-.05em;white-space:nowrap}
.tape-label small{font:500 clamp(3px,2cqw,14px)/1.1 'Courier New',monospace;letter-spacing:.035em}
.sharpie-wordmark{display:block;width:92%;height:72%;overflow:visible;transform:rotate(-1.5deg)}
.sharpie-wordmark path{fill:none;stroke:#191713;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.96}
.tape-2 .sharpie-wordmark{width:82%}
.tape-3 .sharpie-wordmark{width:98%}
.tape-3 .sharpie-wordmark path{stroke-width:11}
.vhs-tape.being-dragged{opacity:0}
.vhs-tape.is-loaded{opacity:0;pointer-events:none}
.vhs-tape[aria-disabled=true]{cursor:default}
.tape-ghost{animation:none!important;translate:none;position:fixed!important;inset:auto;z-index:10000;pointer-events:none;cursor:grabbing;transition:none;filter:drop-shadow(3px 16px 9px #000b);will-change:transform,left,top;transform-origin:center}
.dragging-tape{cursor:grabbing}.dragging-tape *{cursor:grabbing!important}
.tape-color{position:absolute;inset:0;opacity:0;transition:opacity .35s;background:radial-gradient(ellipse at 42% 40%,#ffffff22,transparent 65%),var(--movie-color,#8a79f0);mix-blend-mode:color}
.tape-loaded .tape-color{opacity:1;mix-blend-mode:normal;background:repeating-linear-gradient(0deg,#0001 0 1px,transparent 1px 3px),radial-gradient(ellipse at 42% 40%,#ffffff33,transparent 75%),var(--movie-color)}
.tape-loaded .picture video{opacity:.16;position:relative;z-index:1;mix-blend-mode:screen}
.tuning .picture{animation:tune-in .55s ease-out}
@keyframes tune-in{0%{filter:brightness(1.8);transform:scaleY(.04)}35%{transform:scaleY(1);filter:brightness(1.3)}100%{filter:brightness(1)}}
.returned{animation:returned .5s ease-out}@keyframes returned{from{opacity:0;translate:0 -9px}to{opacity:1;translate:0 0}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:650px){
 body:not(.interior-page) .site.room-site{padding:0;min-height:100svh;align-items:center}
 .room-site .room{width:100%;aspect-ratio:390/750;max-height:1000px;min-height:650px}
 .room .television.photographic{left:-4%;top:8%;width:108%;filter:drop-shadow(0 9px 7px #0008)}
 .room .vhs-deck{left:15.275%;width:63.05%}
 .room .photo-channels .channel{container-type:inline-size}
 .room .photo-channels .channel-name{font-size:clamp(5px,12cqi,7px);letter-spacing:0}
 .room .photo-channels .channel-name span{display:block;max-width:100%}
 .vhs-tape{width:41%;transform:perspective(500px) rotateX(10deg) rotateZ(var(--tape-angle))}.tape-1{left:6%;top:51%}.tape-2{left:53%;top:51%}.tape-3{left:6%;top:69%}.tape-4{left:53%;top:69%}
 .tape-label>span{font-size:clamp(5px,3.8cqw,28px)}.tape-label small{font-size:clamp(3px,2cqw,14px)}
 .eject-button:before{inset:-7px -4px}
}
@media(prefers-reduced-motion:reduce){.tape-ghost,.tape-color,.slot-flap{transition:none}.tuning .picture{animation:none}}