.retro-tv{--tv-case:#e6e0d4;--tv-boss:#ece6da;--tv-gasket:#1d2424}.retro-tv[data-tv-theme=dark]{--tv-case:#1d1d1f;--tv-boss:#222224;--tv-gasket:#0b0d0d}.retro-tv[data-tv-theme=coral]{--tv-case:#e04f5b;--tv-boss:#ece8e0}.retro-tv[data-tv-theme=cobalt]{--tv-case:#2250bc;--tv-boss:#cc8832}.retro-tv[data-tv-theme=purple]{--tv-case:#6c4fbd;--tv-boss:#2250bc}.retro-tv[data-tv-theme=green]{--tv-case:#41cc67;--tv-boss:#1c1c1e}:root{--tv-lock-ink:#3d3a36;--tv-lock-disc:#e6e0d4;--tv-lock-edge:#8f897f}:root:has(.retro-tv[data-tv-theme=dark]){--tv-lock-ink:#a19e98;--tv-lock-disc:#1d1d1f;--tv-lock-edge:#4a4b4e}:root:has(.retro-tv[data-tv-theme=coral]){--tv-lock-ink:#5c1d24;--tv-lock-disc:#e04f5b;--tv-lock-edge:#a83a44}:root:has(.retro-tv[data-tv-theme=cobalt]){--tv-lock-ink:#d9e2f7;--tv-lock-disc:#2250bc;--tv-lock-edge:#163a8e}:root:has(.retro-tv[data-tv-theme=purple]){--tv-lock-ink:#e6defa;--tv-lock-disc:#6c4fbd;--tv-lock-edge:#4c3591}:root:has(.retro-tv[data-tv-theme=green]){--tv-lock-ink:#174d26;--tv-lock-disc:#41cc67;--tv-lock-edge:#2e9a4c}.retro-tv{isolation:isolate;background:var(--tv-case);position:fixed;inset:0;overflow:hidden}.retro-tv__probe{visibility:hidden;pointer-events:none;padding:max(env(safe-area-inset-top,0px), var(--safe-area-inset-top,0px)) max(env(safe-area-inset-right,0px), var(--safe-area-inset-right,0px)) max(env(safe-area-inset-bottom,0px), var(--safe-area-inset-bottom,0px)) max(env(safe-area-inset-left,0px), var(--safe-area-inset-left,0px));position:absolute;inset:0}.retro-tv__screen{z-index:1;isolation:isolate;background:#0e1111;position:absolute;overflow:hidden}.retro-tv[data-drawn]:not([data-painted]):not([data-takeover]) .retro-tv__screen,.retro-tv[data-drawn]:not([data-painted]) .retro-tv__glass{visibility:hidden}.retro-tv[data-takeover]:not([data-painted]) .retro-tv__screen,.retro-tv:not([data-drawn]) .retro-tv__screen{box-shadow:0 0 0 10px var(--tv-gasket);border-radius:6%/10%}.retro-tv:not([data-drawn]) .retro-tv__dial-mount{isolation:isolate}.retro-tv:not([data-drawn]) .retro-tv__dial:before{content:"";z-index:-1;background:var(--tv-boss);border-radius:50%;position:absolute;inset:-7px;box-shadow:0 3px 8px #0003,inset 0 0 0 1px #0000001a}.retro-tv__tube{z-index:100;pointer-events:none;position:absolute;inset:0}.retro-tv__tube:before,.retro-tv__tube:after{content:"";will-change:transform;background:#000;height:calc(50% + 2px);position:absolute;left:-2px;right:-2px}.retro-tv__tube:before{top:-2px}.retro-tv__tube:after{bottom:-2px}.retro-tv__tube-line{will-change:transform, opacity;background:#fff;width:100%;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scaleX(0)}.retro-tv[data-tube=turning] .retro-tv__tube-line{animation:.2s cubic-bezier(.33,1,.68,1) both retro-tv-line,.2s cubic-bezier(.33,1,.68,1) .2s both retro-tv-line-out}.retro-tv[data-tube=turning] .retro-tv__tube:before{animation:.2s cubic-bezier(.33,1,.68,1) .2s both retro-tv-shutter-up}.retro-tv[data-tube=turning] .retro-tv__tube:after{animation:.2s cubic-bezier(.33,1,.68,1) .2s both retro-tv-shutter-down}.retro-tv[data-tube=off] .retro-tv__glass{opacity:0}.retro-tv[data-tube=turning] .retro-tv__glass{animation:.2s cubic-bezier(.33,1,.68,1) .2s both retro-tv-glass-in}@keyframes retro-tv-line{0%{transform:translate(-50%,-50%)scaleX(0)}to{transform:translate(-50%,-50%)scaleX(1)}}@keyframes retro-tv-line-out{0%{opacity:1}to{opacity:0}}@keyframes retro-tv-shutter-up{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes retro-tv-shutter-down{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes retro-tv-glass-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.retro-tv[data-tube=turning] .retro-tv__tube-line,.retro-tv[data-tube=turning] .retro-tv__tube:before,.retro-tv[data-tube=turning] .retro-tv__tube:after{animation:none}.retro-tv[data-tube=turning] .retro-tv__tube{animation:.25s both retro-tv-line-out}.retro-tv[data-tube=turning] .retro-tv__glass{animation:.25s both retro-tv-glass-in}}.retro-tv[data-turn-on=fade][data-tube=turning] .retro-tv__tube-line,.retro-tv[data-turn-on=fade][data-tube=turning] .retro-tv__tube:before,.retro-tv[data-turn-on=fade][data-tube=turning] .retro-tv__tube:after{animation:none}.retro-tv[data-turn-on=fade][data-tube=turning] .retro-tv__tube{animation:.4s both retro-tv-line-out}.retro-tv__screen [data-slot=hls-player] video{background-color:#0000!important}.retro-tv__case{z-index:2;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.retro-tv__glass{z-index:3;pointer-events:none;position:absolute}.retro-tv__dial-mount{z-index:3;position:absolute}.retro-tv__dial [data-tv-dial-grab]:before{content:"";z-index:-1;width:calc(2 * var(--tv-dial-hit,0px));height:calc(2 * var(--tv-dial-hit,0px));border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.retro-tv__info{z-index:3;flex-direction:column;display:flex;position:absolute}.retro-tv__colour-dial{z-index:3;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;background:0 0;border-radius:50%;outline:none;position:absolute}.retro-tv__colour-dial:focus-visible{box-shadow:0 0 0 2px #fff9}.retro-tv__dial{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.retro-tv__readout{top:calc(var(--tv-unit,1px) * 40);left:calc(var(--tv-unit,1px) * 60);max-width:calc(100% - var(--tv-unit,1px) * 293);z-index:40;position:absolute}@media (height<=500px) and (orientation:landscape){.retro-tv__readout{left:52px}}@media (orientation:portrait){.retro-tv__readout{top:calc(var(--tv-unit,1px) * 222);left:calc(var(--tv-unit,1px) * 44);max-width:calc(100% - var(--tv-unit,1px) * 100)}}.retro-tv[data-layout=phone] .retro-tv__dial-mount{z-index:5}.retro-tv[data-layout=phone] .retro-tv__readout{max-width:calc(100% - 40px);top:16px;left:20px}@media (height<=700px){.retro-tv[data-layout=phone] .retro-tv__readout{display:none}}@media (height<=500px){.retro-tv .channel-readout__number{font-size:26px}.retro-tv .channel-readout__title{font-size:14px}}.retro-tv[data-layout=sideways]{transform-origin:0 0;width:100dvh;height:100vw;inset:0 auto auto 0;transform:translate(50vw,50dvh)rotate(90deg)translate(-50%,-50%)}.retro-tv[data-layout=sideways][data-pivot]{animation:.9s cubic-bezier(.65,0,.35,1) both retro-tv-pivot}.retro-tv[data-layout=sideways] .retro-tv__readout{top:calc(var(--tv-unit,1px) * 128);left:calc(var(--tv-unit,1px) * 132);max-width:calc(100% - var(--tv-unit,1px) * 293)}@keyframes retro-tv-pivot{0%,15%{transform:translate(50vw, 50dvh) rotate(0deg) scale(calc(var(--tv-fit,.46) * .92)) translate(-50%, -50%)}55%{transform:translate(50vw, 50dvh) rotate(55deg) scale(calc(var(--tv-fit,.46) * .92)) translate(-50%, -50%)}to{transform:translate(50vw,50dvh)rotate(90deg)scale(1)translate(-50%,-50%)}}:root:has(.retro-tv[data-layout=sideways]) [data-slot=parent-lock-layer][data-layout=tv]{transform-origin:calc(max(44px, var(--tv-lock-d,44px)) / 2) 50%;rotate:90deg}:root:has(.retro-tv[data-layout=sideways]) [data-slot=site-menu-button]{transform-origin:calc(max(44px, var(--tv-lock-d,44px)) / 2) 50%;rotate:90deg}:root:has(.retro-tv[data-layout=sideways][data-pivot]) [data-slot=parent-lock-layer][data-layout=tv]{animation:.3s .85s both retro-tv-glass-in}:root:has(.retro-tv[data-layout=sideways][data-pivot]) [data-slot=site-menu-button]{animation:.3s .85s both retro-tv-glass-in}@media (width<=600px){[data-slot=parent-lock-panel]{width:min(360px,100vw - 32px);max-height:calc(100dvh - 32px);top:50%;left:50%;overflow-y:auto;translate:-50% -50%}}@media (height<=600px) and (width>=601px){[data-slot=parent-lock-panel]{top:16px;left:calc(16px + max(env(safe-area-inset-left,0px), var(--safe-area-inset-left,0px)));width:min(360px,100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto}}:root:has(.retro-tv[data-layout=sideways]) [data-slot=parent-lock-panel]{top:calc(16px + max(env(safe-area-inset-top,0px), var(--safe-area-inset-top,0px)));transform-origin:0 0;width:min(360px,100dvh - 32px);max-height:calc(100vw - 32px);left:calc(100vw - 16px);translate:none;rotate:90deg}:root:has(.retro-tv[data-layout=sideways]) [data-slot=parent-lock-panel][data-keypad]{width:min(480px,100dvh - 32px)}@media (height<=600px){:root:has(.retro-tv[data-layout=sideways]) [data-slot=parent-lock-panel][data-keypad]{scale:.74}}@media (prefers-reduced-motion:reduce){.retro-tv[data-layout=sideways][data-pivot]{animation:none}}
