/* Coordinates follow the physical VCR in the 1672 × 941 room photograph. */
.vcr-console{position:absolute;left:0;top:0;width:506px;height:220px;transform-origin:0 0;z-index:8;pointer-events:none}
.vcr-face{position:absolute;inset:0}
.vcr-key{position:absolute;pointer-events:auto;padding:0;border:0;background:transparent;color:#e0e6d9;box-shadow:none;border-radius:5px;font-size:24px;line-height:1;text-transform:uppercase;text-shadow:0 2px 2px #080b09;transform:skewY(-1.5deg);min-height:0;letter-spacing:.02em}
.vcr-key:hover{background:#c4d49d18;color:#e4ffd0;box-shadow:inset 0 0 0 2px #d1ef9d66}
.vcr-key:active{translate:0 1px;box-shadow:inset 0 2px 8px #0009;background:#1117}
.vcr-key:focus-visible{outline-offset:0}
.vcr-key:disabled{opacity:.45}
#previous.vcr-key{left:36px;top:94px;width:95px;height:58px}
#next.vcr-key{left:151px;top:90px;width:98px;height:58px}
#play-pause.vcr-key{left:266px;top:86px;width:103px;height:59px}
#mute.vcr-key{left:387px;top:83px;width:92px;height:58px;font-size:21px}
.vcr-display{position:absolute;left:38px;top:168px;width:438px;height:36px;transform:skewY(-1.5deg);transform-origin:left center;color:#b8d695;text-shadow:0 0 5px #9ccd6b66;font-size:16px;line-height:1;pointer-events:auto}
.vcr-readout{display:flex;gap:10px;align-items:center;height:16px;white-space:nowrap}
#channel-number{flex:none}#program{flex:1;overflow:hidden;text-overflow:ellipsis}#time{font-size:14px;flex:none}
.vcr-display #video-tools{display:flex;gap:8px;height:23px;align-items:center;margin-top:-2px}
.vcr-display #seek{appearance:none;flex:1;width:100%;height:22px;margin:0;background:transparent;cursor:pointer;accent-color:#b8d695}
.vcr-display #seek::-webkit-slider-runnable-track{height:3px;background:#819d6699;box-shadow:0 0 4px #7fb34355}
.vcr-display #seek::-webkit-slider-thumb{appearance:none;width:8px;height:12px;margin-top:-4px;background:#c4e69d;box-shadow:0 0 4px #9ccd6b}
.vcr-display #seek::-moz-range-track{height:3px;background:#819d6699}.vcr-display #seek::-moz-range-thumb{width:8px;height:12px;background:#c4e69d;border:0;border-radius:0}
.vcr-display #youtube-link{font-size:20px;text-decoration:none;padding:0 4px;line-height:1}
.vcr-display #tv-status{font-size:13px;line-height:1.1;margin:5px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9eaf8f}
.vcr-console.watching #tv-status{position:absolute;bottom:calc(100% + 175px);left:0;right:0;background:#101811ee;padding:8px;white-space:normal;line-height:1.2;font-size:16px;opacity:0;pointer-events:none}
.vcr-console.watching.has-issue #tv-status,.vcr-console.watching:focus-within #tv-status,.vcr-console.watching:hover #tv-status{opacity:1}
.channel-dial{left:72.1%;top:21.3%}.volume-dial{left:72.1%;top:31.3%}
.top-hints{gap:9px}.top-hints button{font-size:18px}
body.mobile .vcr-console{background:url('assets/room-original.png?v=20260920-vcr1') -710px -698px / 1672px 941px no-repeat;box-shadow:0 10px 35px #0009;border-radius:4px}
body.mobile .top-hints{gap:5px;flex-wrap:wrap;justify-content:center}body.mobile .top-hints button{font-size:17px;padding:8px;min-height:38px}
body.mobile .vcr-key{font-size:27px}body.mobile #mute.vcr-key{font-size:24px}
body.mobile .vcr-display{font-size:19px}body.mobile .vcr-display #time{font-size:15px}
body.mobile .vcr-display #tv-status{font-size:15px}
@media(prefers-reduced-motion:reduce){.vcr-key{transition:none}}