:root{--room: #0b0b0a;--phosphor: #02020a;--osd: #5dff8a;--green: #3ddc84;--pink: #e8239a;--cyan: #22b8d8;--blue: #3f6fe0;color-scheme:dark}body{background:var(--room);overflow:hidden}.room{--glow: transparent;height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse 60% 55% at 45% 45%,var(--glow),transparent 70%),var(--room)}.hint{position:fixed;left:50%;bottom:16px;translate:-50% 0;margin:0;font:18px/1 VT323,monospace;color:#ffffff59;white-space:nowrap}.tv{position:relative;width:min(100vw,calc(100dvh * 1908 / 1505));aspect-ratio:1908 / 1505}.frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none}.screen,.hit{position:absolute;left:calc(var(--x) / 1908 * 100%);top:calc(var(--y) / 1505 * 100%);width:calc(var(--w) / 1908 * 100%);height:calc(var(--h) / 1505 * 100%)}.screen{--x: 260;--y: 264;--w: 1121;--h: 824;container-type:size;overflow:hidden;border-radius:5%/7%;background:#1a1d1a;box-shadow:inset 0 0 6.5cqw #000000e6}.crt{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--phosphor);opacity:0;transform:scale(0,.004)}.tv[data-power=on] .crt{animation:crt-on .9s cubic-bezier(.2,.7,.3,1) forwards}.tv[data-power=turning-off] .crt{animation:crt-off .45s ease-in forwards}@keyframes crt-on{0%{opacity:1;transform:scale(0,.004);filter:brightness(10)}35%{opacity:1;transform:scaleY(.004);filter:brightness(10)}70%{opacity:1;transform:scale(1);filter:brightness(2)}to{opacity:1;transform:none;filter:none}}@keyframes crt-off{0%{opacity:1;transform:none;filter:none}55%{opacity:1;transform:scaleY(.004);filter:brightness(8)}to{opacity:0;transform:scale(0,.004);filter:brightness(10)}}.picture{position:absolute;top:0;right:0;bottom:0;left:0}.tv[data-power=on] .picture{animation:flicker .12s infinite}@keyframes flicker{50%{opacity:.96}}.glass{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(transparent 0 2px,#00000047 2px,#00000047 3px),radial-gradient(ellipse 50% 35% at 28% 18%,rgb(255 255 255 / .12),transparent),radial-gradient(ellipse at center,transparent 55%,rgb(0 0 0 / .7) 100%)}.channel{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;gap:1.6cqw;padding:10% 8%;text-align:center;color:#fff;font-family:VT323,monospace;text-shadow:.34cqw 0 rgb(255 0 80 / .65),-.34cqw 0 rgb(0 220 255 / .65);animation:jitter 4s steps(1) infinite}.channel:not(.is-current){visibility:hidden}.channel h1{margin:0;font-weight:400;font-size:12cqw;line-height:.9;letter-spacing:.02em}.channel p{margin:0;font-size:3.5cqw;color:#ffffffd9}.channel--video{display:block;padding:0}.channel--video iframe{position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(100cqw,calc(100cqh * (var(--ratio))));height:max(100cqh,calc(100cqw / (var(--ratio))));border:0;pointer-events:none;filter:saturate(1.3) contrast(1.1)}.channel--video.is-dead iframe{display:none}.channel--video.is-dead:after{content:"NO SIGNAL";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;font-size:12cqw;line-height:.9}.blink{animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}}@keyframes jitter{0%,to{transform:none}96%{transform:translate(.5%)}97%{transform:translate(-.4%) skew(2deg)}98%{transform:none}}.bars{position:absolute;display:flex}.bars i{flex:1;background:repeating-linear-gradient(currentColor 0 1px,transparent 1px 3px)}.bars i:nth-child(4n+1){color:var(--green)}.bars i:nth-child(4n+2){color:var(--pink)}.bars i:nth-child(4n+3){color:var(--cyan)}.bars i:nth-child(4n+4){color:var(--blue)}.bars--top{top:3%;right:0;width:52%;height:1.4%}.bars--top i{background:currentColor}.bars--mid{top:62%;left:0;width:48%;height:8%}.static{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;image-rendering:pixelated;mix-blend-mode:screen;opacity:.07;pointer-events:none}.is-switching .static{opacity:.35}.is-booting .static{opacity:.9}.tracking{position:absolute;left:0;right:0;top:-15%;height:12%;background:linear-gradient(transparent,rgb(255 255 255 / .07) 45%,rgb(255 255 255 / .12) 50%,transparent);animation:roll 7s linear infinite;pointer-events:none}.is-switching .tracking{animation-duration:.25s;height:30%}@keyframes roll{to{top:105%}}.osd{position:absolute;top:7%;right:8%;bottom:7%;left:8%;display:grid;grid-template-columns:1fr auto;align-content:space-between;font:3.2cqw/1 VT323,monospace;color:#fff;text-shadow:.27cqw .27cqw 0 rgb(0 0 0 / .6);pointer-events:none}.osd-ch{color:var(--osd);text-align:right}.osd-tape.is-live{color:#ff3b30}.osd-date{text-align:right}.is-switching .osd-ch{font-size:6cqw}.is-switching .channel{animation:glitch .09s steps(1) infinite}@keyframes glitch{0%{transform:translate(-3%) skew(10deg);filter:hue-rotate(40deg)}33%{transform:translate(4%,1%) skew(-8deg);filter:contrast(1.6)}66%{transform:translate(-1%,-1.5%) scaleY(1.04);filter:none}to{transform:none}}.hit{z-index:2;padding:0;border:0;cursor:pointer;background:url(/assets/tv-frame-DimjqYfH.png) no-repeat;background-size:calc(1908 / var(--w) * 100%) calc(1505 / var(--h) * 100%);background-position:calc(var(--x) / (1908 - var(--w)) * 100%) calc(var(--y) / (1505 - var(--h)) * 100%);transition:filter .2s,transform .4s cubic-bezier(.3,1.6,.5,1)}.hit:hover{filter:brightness(1.15)}.hit:focus-visible{outline:2px solid #ffde59;outline-offset:3px}.hit--knob{--rot: 0deg;border-radius:50%;transform:rotate(var(--rot))}.hit[data-turn]{cursor:grab;touch-action:none}.hit[data-turn].is-dragging{cursor:grabbing;transition:filter .2s}.hit--push{border-radius:4px}.hit--push:active{transform:translateY(2px);filter:brightness(.85)}.hit--knob:active{filter:brightness(.9)}