*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background-color:#1e4a40;background-image:linear-gradient(45deg,rgba(0,0,0,.12) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.12) 75%),linear-gradient(45deg,rgba(0,0,0,.12) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.12) 75%),linear-gradient(to bottom,#2e6858,#1a4a3c 35%,#0e2e24 62%,#050e0a);background-size:40px 40px,40px 40px,100% 100%;background-position:0 0,20px 20px,0 0;display:flex;align-items:center;justify-content:center;font-family:VT323,monospace;overflow-x:hidden;-webkit-user-select:none;user-select:none}#root{width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center}.room{position:relative;display:flex;align-items:flex-end;justify-content:center;padding:40px 20px 30px}.room-scene{display:flex;flex-direction:row;align-items:flex-end;gap:0;position:relative}.room-tv{position:relative;display:flex;flex-direction:column;align-items:center}.tv-ambient{position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(120,200,120,.14) 0%,transparent 65%);filter:blur(55px);pointer-events:none;opacity:0;transition:opacity 1.4s ease}.tv-ambient-active{opacity:1}.tv-body{position:relative;width:min(1380px,96vw);background:repeating-linear-gradient(172deg,transparent 0,transparent 9px,rgba(0,0,0,.045) 9px,rgba(0,0,0,.045) 10px),linear-gradient(165deg,#7c4a20,#4a2a0e 45%,#6a3c18);border-radius:22px 22px 18px 18px;border:2px solid #3a1e08;box-shadow:0 40px 100px #000000eb,0 8px 25px #000000b3,inset 0 1px #ffb4501f,inset 0 -3px 8px #0000008c,inset 3px 0 6px #0003,inset -3px 0 6px #0003;padding:20px 20px 13px}.tv-antennas{position:absolute;top:-70px;left:50%;transform:translate(-50%);width:260px;height:82px;pointer-events:none}.tv-antenna-base{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:32px;height:12px;background:linear-gradient(to bottom,#5a3a18,#2e1a08);border-radius:3px 3px 0 0}.tv-antenna{position:absolute;bottom:10px;width:5px;height:70px;background:linear-gradient(to top,#4a3018,#7a6040,#5a4828);border-radius:3px 3px 2px 2px;box-shadow:1px 0 3px #00000080}.tv-antenna-left{left:70px;transform-origin:bottom center;transform:rotate(-22deg)}.tv-antenna-right{right:70px;transform-origin:bottom center;transform:rotate(22deg)}.tv-main{display:flex;flex-direction:column;gap:12px}.crt-outer{width:100%;background:#0e0804;border-radius:12px;padding:10px;border:2px solid #7a5018;box-shadow:inset 0 3px 10px #000000f2,inset 0 -1px 4px #000000b3,0 0 0 1px #3a1e08,0 0 18px #50280059}.crt-screen{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 100px #000000eb,inset 0 0 40px #00ff5006;animation:crtFlicker 7s infinite}@keyframes crtFlicker{0%,to{opacity:1}91%{opacity:1}92%{opacity:.91}93%{opacity:1}97%{opacity:.95}98%{opacity:1}}@keyframes crtPowerOn{0%{clip-path:inset(50% 0 50% 0);filter:brightness(8) saturate(0)}35%{clip-path:inset(15% 0 15% 0);filter:brightness(4) saturate(.2)}65%{clip-path:inset(0% 0 0% 0);filter:brightness(2) saturate(.6)}to{clip-path:inset(0% 0 0% 0);filter:brightness(1) saturate(1)}}@keyframes crtPowerOff{0%{clip-path:inset(0% 0 0% 0);filter:brightness(1)}30%{clip-path:inset(43% 0 43% 0);filter:brightness(6)}60%{clip-path:inset(49% 35% 49% 35%);filter:brightness(20)}to{clip-path:inset(50% 50% 50% 50%);filter:brightness(0)}}.crt-power-on{animation:crtPowerOn .9s ease-out forwards,crtFlicker 7s .9s infinite}.crt-power-off{animation:crtPowerOff .7s ease-in forwards}.crt-scanlines{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,#0000,#0000 1px,#0000002b 1px,#0000002b 2px);pointer-events:none;z-index:10;border-radius:inherit}.crt-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 50%,transparent 52%,rgba(0,0,0,.72) 100%);pointer-events:none;z-index:11;border-radius:inherit}.crt-glare{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 25% 16%,rgba(255,255,255,.05) 0%,transparent 50%),linear-gradient(135deg,rgba(255,255,255,.012) 0%,transparent 45%);pointer-events:none;z-index:12;border-radius:inherit}.crt-off-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5px;height:2px;background:#fffde0;border-radius:50%;box-shadow:0 0 14px 5px #ffffc8a6,0 0 35px 10px #ffffc833;z-index:6;animation:dotFade 2.5s ease forwards}@keyframes dotFade{0%{opacity:1}70%{opacity:.8}to{opacity:0}}.please-stand-by{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:8;gap:20px}.psb-bars{display:flex;width:80%;height:50px;gap:3px;border:1px solid rgba(255,255,255,.12)}.psb-bar{flex:1;opacity:.8}.psb-text{font-family:"Press Start 2P",monospace;font-size:.88rem;color:#fff;letter-spacing:.14em;text-shadow:0 0 18px #fff,0 0 45px rgba(255,255,255,.35);animation:psbBlink .9s step-end infinite}@keyframes psbBlink{50%{opacity:0}}.channel-osd{position:absolute;top:12px;right:14px;font-family:VT323,monospace;font-size:1.25rem;color:#ffe566;text-shadow:0 0 10px rgba(255,230,100,.9);background:#000000bf;padding:3px 12px 2px;border:1px solid rgba(255,220,80,.3);letter-spacing:.05em;z-index:20;animation:osdIn .2s ease,osdOut .4s 3.6s forwards}@keyframes osdIn{0%{opacity:0}to{opacity:1}}@keyframes osdOut{0%{opacity:1}to{opacity:0}}.tv-controls{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#2a1608,#1a0e04);border-radius:9px;padding:9px 14px;border:1px solid #3a1e08;box-shadow:inset 0 1px 3px #000000b3,inset 0 -1px 2px #ff8c280a}.controls-left{display:flex;align-items:flex-end;gap:12px;flex-shrink:0}.controls-center{flex:1;display:flex;flex-direction:column;gap:5px;align-items:center;overflow:hidden}.controls-right{flex-shrink:0}.channel-display{text-align:center;flex-shrink:0}.display-screen{background:#080300;border:1px solid #1e0d00;border-radius:5px;padding:4px 14px 3px;box-shadow:inset 0 2px 8px #000000e6,0 0 12px #c864002e}.display-number{font-family:VT323,monospace;font-size:2.6rem;line-height:1;color:#f80;text-shadow:0 0 8px #ff8800,0 0 18px #ff5500,0 0 35px rgba(255,60,0,.5);letter-spacing:.05em}.display-label{font-family:VT323,monospace;font-size:.65rem;color:#5a2e08;letter-spacing:.25em;margin-top:1px}.knob-group{display:flex;gap:8px;align-items:flex-start}.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.knob{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#4a3820,#1e1208);box-shadow:0 4px 10px #000000d9,0 1px 3px #0009,inset 0 1px 1px #ffb4501a,inset 0 -2px 4px #0009;position:relative;border:1px solid rgba(0,0,0,.5);cursor:default}.knob-channel{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.knob-channel:hover:not(.knob-disabled){transform:rotate(18deg);box-shadow:0 4px 14px #000000e6,0 0 12px #c8640a4d,inset 0 1px 1px #ffb4501f,inset 0 -2px 4px #0009}.knob-channel:active:not(.knob-disabled){transform:rotate(35deg)}.knob-disabled{opacity:.35;cursor:not-allowed}.knob-indicator{position:absolute;top:6px;left:50%;transform:translate(-50%);width:3px;height:11px;background:linear-gradient(to bottom,#f80,#f50);border-radius:2px;box-shadow:0 0 4px #ff640099}.knob-label{font-family:VT323,monospace;font-size:.55rem;color:#4a2808;letter-spacing:.1em;text-align:center}.transport-btns{display:flex;gap:6px;align-items:flex-start}.transport-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.transport-btn{width:40px;height:40px;border-radius:6px;background:radial-gradient(circle at 38% 32%,#3a2810,#1a0e04);border:1px solid #3a1e08;color:#c06820;font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 10px #000000d9,inset 0 1px 1px #ffb4501a;transition:background .12s,box-shadow .12s,transform .08s}.transport-btn:hover:not(:disabled){background:radial-gradient(circle at 38% 32%,#5a3820,#2a1608);color:#ff9030;box-shadow:0 4px 14px #000000e6,0 0 10px #c8640a40}.transport-btn:active:not(:disabled){transform:scale(.91)}.transport-btn:disabled{opacity:.3;cursor:not-allowed}.guide-btn{font-family:VT323,monospace;font-size:1.05rem;letter-spacing:.18em;background:linear-gradient(180deg,#5a2e08,#3a1a04);color:#f0a040;border:1px solid #c06010;padding:6px 14px 5px;border-radius:4px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;box-shadow:0 3px 8px #000000b3,0 0 10px #b4500033,inset 0 1px #ffa03c2e;flex-shrink:0;text-shadow:0 0 8px rgba(240,140,30,.6)}.guide-btn:hover:not(:disabled){background:linear-gradient(180deg,#7a3e10,#4e2208);color:#ffc060;box-shadow:0 3px 8px #000000b3,0 0 16px #dc640a73,inset 0 1px #ffb45038}.guide-btn-active{background:linear-gradient(180deg,#8a3a08,#5a2006);color:#ffb040;border-color:#e07010;box-shadow:0 0 14px #dc640a8c,0 0 30px #c8460033,inset 0 1px #ffb43c38;text-shadow:0 0 10px rgba(255,160,40,.8)}.guide-btn:disabled{opacity:.25;cursor:not-allowed}.vox-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.vox-btn{font-size:1.1rem;line-height:1;background:linear-gradient(180deg,#5a2e08,#3a1a04);border:1px solid #c06010;padding:5px 10px 4px;border-radius:4px;cursor:pointer;transition:background .15s,box-shadow .15s,opacity .15s;box-shadow:0 3px 8px #000000b3,inset 0 1px #ffa03c26;flex-shrink:0}.vox-btn:hover:not(:disabled){background:linear-gradient(180deg,#7a3e10,#4e2208);box-shadow:0 3px 8px #000000b3,0 0 12px #dc640a4d}.vox-muted{background:linear-gradient(180deg,#2a1208,#180a04);border-color:#5a2808;box-shadow:0 2px 5px #000000b3;opacity:.6}.vox-btn:disabled{opacity:.25;cursor:not-allowed}.now-playing{font-family:VT323,monospace;opacity:0;transition:opacity .6s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;line-height:1.3}.now-playing.visible{opacity:1}.np-label{font-size:.75rem;color:#c07020;letter-spacing:.08em;opacity:.8}.np-title{font-size:1.05rem;color:#fc7;text-shadow:0 0 6px rgba(255,160,50,.45)}.np-sep{color:#604010}.np-show{font-size:.85rem;color:#8a5820}.speaker-grille{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;padding:5px 8px;background:#0e0a05;border-radius:4px;width:100%;box-shadow:inset 0 2px 5px #000c}.speaker-dot{width:5px;height:5px;border-radius:50%;background:#1e1408;box-shadow:inset 0 1px 2px #000000e6;justify-self:center}.power-section{display:flex;flex-direction:column;align-items:center;gap:6px}.power-btn{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#3a2418,#18100a);border:2px solid #4a2c10;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,box-shadow .2s;box-shadow:0 5px 14px #000000e6,inset 0 1px 2px #ff96321a}.power-btn svg{width:26px;height:26px}.power-btn:active{transform:scale(.91)}.power-off{border-color:#7a1a08;box-shadow:0 5px 14px #000000e6,0 0 12px #b41e0a4d,inset 0 1px 2px #ff502814}.power-off svg{color:#c20;filter:drop-shadow(0 0 4px rgba(200,40,10,.6))}.power-on{border-color:#062;box-shadow:0 5px 14px #000000e6,0 0 16px #00dc5040,inset 0 1px 2px #00ff5014}.power-on svg{color:#0e5;filter:drop-shadow(0 0 6px #00ff44)}.power-off:hover{box-shadow:0 5px 14px #000000e6,0 0 20px #dc320a8c,inset 0 1px 2px #ff50281a}.power-off:hover svg{color:#f31;filter:drop-shadow(0 0 7px rgba(255,50,10,.9))}.power-led{width:9px;height:9px;border-radius:50%;transition:background .3s,box-shadow .3s}.led-off{background:#550a00;box-shadow:0 0 4px #b4140066}.led-on{background:#0f5;box-shadow:0 0 7px #0f5,0 0 16px #00ff5099;animation:ledPulse 2s ease-in-out infinite}@keyframes ledPulse{0%,to{box-shadow:0 0 7px #0f5,0 0 16px #00ff5099}50%{box-shadow:0 0 4px #0f5,0 0 9px #00ff504d}}.power-label{font-family:VT323,monospace;font-size:.72rem;color:#7a3818;letter-spacing:.2em}.tv-bottom{text-align:center;padding:7px 0 3px;border-top:1px solid rgba(255,150,50,.08);margin-top:10px}.tv-brand{font-family:"Press Start 2P",monospace;font-size:.65rem;color:#c87830;letter-spacing:.3em;text-shadow:0 0 10px rgba(180,90,10,.45)}.tv-model{font-family:VT323,monospace;font-size:.85rem;color:#8a5220;letter-spacing:.2em;margin-top:3px}.tv-feet{display:flex;justify-content:space-around;padding:0 80px;margin-top:2px}.tv-foot{width:60px;height:8px;background:linear-gradient(to bottom,#3a1e08,#1e0e04);border-radius:0 0 5px 5px;box-shadow:0 5px 10px #000000b3}.tv-credenza{width:calc(100% + 60px);margin-left:-30px;height:36px;background:repeating-linear-gradient(175deg,transparent 0,transparent 8px,rgba(0,0,0,.05) 8px,rgba(0,0,0,.05) 9px),linear-gradient(to bottom,#6a3e18,#3a1e08);border-radius:4px;border:1px solid #2a1008;border-top:none;box-shadow:0 14px 40px #000000bf,0 0 0 1px #1a0c04;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;position:relative;z-index:-1;margin-top:-2px}.credenza-drawer{width:60px;height:16px;background:linear-gradient(to bottom,#5a3212,#3e2008);border-radius:3px;border:1px solid #2a1208;box-shadow:inset 0 1px #ff963214,inset 0 -1px 3px #00000080;position:relative}.credenza-drawer:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:3px;background:#7a4e22;border-radius:2px;box-shadow:0 0 0 1px #0006}.guide-panel-wrapper{position:absolute;right:calc(100% + 22px);bottom:0;overflow:hidden;opacity:0;transform:translate(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}.guide-panel-wrapper.guide-open{opacity:1;transform:translate(0);pointer-events:all}.tv-guide{width:268px;background:#f0e0b0;border:2px solid #8a5020;border-radius:6px;box-shadow:6px 6px 28px #000000a6,0 2px 8px #00000073;overflow:hidden;font-family:VT323,monospace}.guide-header{background:#b83a08;color:#ffe8b0;padding:9px 12px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #7a2405}.guide-title{font-family:"Press Start 2P",monospace;font-size:.6rem;letter-spacing:.1em;color:#ffe8b0;text-shadow:0 1px 4px rgba(0,0,0,.4)}.guide-close{background:none;border:1px solid rgba(255,200,100,.35);color:#ffd090;cursor:pointer;font-family:VT323,monospace;font-size:1.2rem;padding:1px 8px;border-radius:3px;line-height:1;transition:background .15s}.guide-close:hover{background:#ffffff1f}.guide-subtitle{background:#d4620a;color:#f8d08a;font-family:VT323,monospace;font-size:.7rem;letter-spacing:.22em;text-align:center;padding:3px 0 2px;border-bottom:1px solid #9a3a06}.guide-channels{border-bottom:2px solid #9a6030}.guide-row{display:flex;align-items:stretch;width:100%;text-align:left;background:transparent;border:none;border-bottom:1px solid #c89050;cursor:pointer;transition:background .12s}.guide-row:hover{background:#f8ecca}.guide-row:last-child{border-bottom:none}.guide-row-active{background:#f0c458}.guide-row-active:hover{background:#f0cc68}.guide-ch-num{width:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;color:#6a2c08;border-right:1px solid #c89050;padding:8px 4px;text-shadow:0 1px 2px rgba(0,0,0,.15)}.guide-ch-info{flex:1;padding:6px 10px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}.guide-ch-name{font-size:1.05rem;color:#3a1605;text-transform:uppercase;letter-spacing:.07em;line-height:1.1}.guide-ch-now{font-size:.82rem;color:#7a3e18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.guide-on-air{flex-shrink:0;padding:0 8px;display:flex;align-items:center;justify-content:center;font-family:"Press Start 2P",monospace;font-size:.38rem;line-height:1.4;color:#b83a08;text-align:center;animation:onAirBlink 1.2s step-end infinite}@keyframes onAirBlink{0%,to{opacity:1}50%{opacity:.25}}.guide-footer{background:#c4902a;color:#3a1605;padding:6px 12px 5px;font-family:"Press Start 2P",monospace;font-size:.38rem;letter-spacing:.1em;text-align:center;border-top:1px solid #9a6818}.power-prompt{margin-top:18px;font-family:VT323,monospace;font-size:1.12rem;color:#5a3210;letter-spacing:.08em;animation:promptBlink 1.6s step-end infinite;cursor:pointer;text-align:center}.power-prompt:hover{color:#c06820}@keyframes promptBlink{0%,to{opacity:1}50%{opacity:.3}}@media (max-width: 860px){.tv-body{padding:16px 16px 10px}.knob,.transport-btn{width:36px;height:36px}.power-btn{width:50px;height:50px}.power-btn svg{width:22px;height:22px}.display-number{font-size:2.1rem}.speaker-grille{grid-template-columns:repeat(14,1fr)}.guide-panel-wrapper{right:auto;left:0;bottom:calc(100% + 10px);transform:translateY(-10px)}.guide-panel-wrapper.guide-open{transform:translateY(0)}}@media (max-width: 480px){.room{padding:60px 6px 14px}.tv-body{padding:10px 10px 8px}.tv-antennas{width:180px;top:-54px}.tv-antenna-left{left:42px}.tv-antenna-right{right:42px}.tv-controls{flex-wrap:wrap;padding:7px 10px;gap:6px}.controls-left{gap:7px}.controls-center{order:3;width:100%}.display-screen{padding:3px 10px 2px}.display-number{font-size:1.8rem}.knob{width:30px;height:30px}.knob-indicator{top:5px;height:9px}.knob-label{font-size:.48rem}.transport-btn{width:30px;height:30px;font-size:.9rem}.transport-btns{gap:5px}.guide-btn{padding:5px 9px 4px;font-size:.9rem;letter-spacing:.1em}.power-btn{width:42px;height:42px}.power-btn svg{width:18px;height:18px}.speaker-grille{grid-template-columns:repeat(8,1fr)}.np-label{font-size:.68rem}.np-title{font-size:.9rem}.tv-credenza{width:calc(100% + 20px);margin-left:-10px;height:26px}.credenza-drawer{width:40px;height:11px}.tv-feet{padding:0 40px}.tv-brand{font-size:.48rem;letter-spacing:.18em}.tv-model{font-size:.68rem}.guide-panel-wrapper{position:fixed;right:auto;bottom:auto;left:50%;top:50%;transform:translate(-50%,-42%);z-index:200}.guide-panel-wrapper.guide-open{transform:translate(-50%,-50%)}.tv-guide{width:min(300px,92vw)}}