:root{color-scheme:dark;font-family:'Arial Narrow',Arial,sans-serif;background:#090a09;color:#e5c6a0}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;justify-content:center;background:radial-gradient(ellipse at center,#302a20,#090a09 70%)}button{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}button:focus-visible{outline:3px solid #fff0c6;outline-offset:3px;z-index:5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.radio{position:relative;container-type:inline-size;width:min(100%,530px);aspect-ratio:941/1672;min-height:100svh;background:url('radio-housing.png') center/100% 100% no-repeat;isolation:isolate;box-shadow:0 0 70px #000}.display{position:absolute;left:8.25%;top:25.6%;width:84%;height:22.2%;border:2px solid #6b3909;border-radius:2.8cqw;background:repeating-linear-gradient(0deg,#41200007 0px,#41200007 1px,transparent 1px,transparent 3px),radial-gradient(ellipse at center,#ffb52e,#ed9907 75%,#ab5c00);color:#291b06;box-shadow:inset 0 0 15px #6330009c,0 0 7px #f88b0030;padding:2cqw 2.3cqw 1.6cqw;display:flex;flex-direction:column;font-family:'Courier New',monospace;font-weight:bold;overflow:hidden}.screen-top{display:flex;align-items:center;gap:1.4cqw;font-size:clamp(12px,3.05cqw,17px);padding-bottom:1.5cqw;border-bottom:1px solid #543007;white-space:nowrap;letter-spacing:-.5px}.screen-top>span:nth-child(2){flex:1;text-align:center}.network{letter-spacing:-2px;opacity:.4;font-size:3.5cqw}.network.active{opacity:1}time{font-size:clamp(12px,3.2cqw,18px)}.station-row{display:flex;align-items:center;gap:2cqw;min-height:10cqw;margin-top:1.5cqw}.channel-badge{flex-shrink:0;background:#38210a;color:#ffb128;padding:1cqw 1.2cqw;border-radius:1cqw;font-size:clamp(13px,3.7cqw,21px)}h2{margin:0;font-size:clamp(20px,6.2cqw,34px);line-height:1.03;letter-spacing:-1px;overflow-wrap:normal}.waveform{display:flex;align-items:center;gap:1%;flex:1;min-height:16px;margin:1.5cqw 0;background:linear-gradient(transparent 49%,#3d240729 49%,#3d240729 51%,transparent 51%)}.waveform i{display:block;flex:1;height:100%;background:repeating-linear-gradient(to top,#372104 0,#372104 4px,transparent 4px,transparent 5px);transform:scaleY(.04);opacity:.5}.waveform.active i{opacity:1;animation:wave var(--speed) var(--delay) ease-in-out infinite alternate}@keyframes wave{0%{transform:scaleY(calc(var(--level)*.18))}50%{transform:scaleY(var(--level))}100%{transform:scaleY(calc(var(--level)*.4))}}.status{font-size:clamp(12px,3.05cqw,16px);min-height:1.15em;line-height:1.15;margin-bottom:1cqw}.screen-bottom{border-top:1px solid #553307;padding-top:1.4cqw;display:flex;justify-content:space-between;gap:5px;font-size:clamp(12px,3cqw,16px)}.channels{position:absolute;left:4.5%;top:50.55%;width:91.1%;height:17.3%;padding:1.2cqw;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5cqw;background:#100f0c;border-radius:3cqw;box-shadow:0 0 5px 3px #0c0b09}.channel{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1cqw;min-width:0;padding:1.7cqw .6cqw 2cqw;border:2px solid #746451;border-bottom-color:#30281e;border-radius:2.5cqw;background:linear-gradient(#181815e8,#080a09ed),url('radio-housing.png') 10% 10%/450% auto;color:#d9bfa0;box-shadow:inset 0 0 0 2px #070909,0 3px 4px #000;text-shadow:0 1px 1px #000}.channel.selected{color:#ffb329;border-color:#ffbb37;box-shadow:0 0 4px 2px #ff9200,inset 0 0 14px #ff9d003a,0 0 14px #ff8b008c;background:linear-gradient(#442704d9,#201606f0),url('radio-housing.png') 10% 10%/450% auto}.channel-no{font-weight:bold;font-size:clamp(14px,4.1cqw,22px)}.channel svg{width:8.5cqw;height:8.5cqw;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.channel-title{font-stretch:condensed;font-size:clamp(13px,3.65cqw,20px);font-weight:800;line-height:1.15;min-height:2.3em;display:flex;align-items:center;justify-content:center}.channel-title.compact{font-size:clamp(11px,2.85cqw,16px);letter-spacing:-.4px}.controls{position:absolute;left:9.1%;top:70.05%;width:81.5%;height:10.5%;display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:5cqw}.control-wrap{display:flex;flex-direction:column;align-items:center;gap:1.4cqw;min-width:0}.control-wrap>span{font-size:clamp(12px,3.3cqw,18px);font-weight:600;white-space:nowrap;color:#d0b28f;text-shadow:0 1px 3px #000;background:#151513;padding:0 1px}.controls button{border:2px solid #76644b;border-bottom-color:#272017;border-radius:3cqw;background:linear-gradient(#21211fea,#080a09ee),url('radio-housing.png') 12% 13%/400% auto;box-shadow:inset 0 0 0 3px #070908,0 3px 5px 3px #000;color:#d8b992;min-height:44px;width:100%;height:12cqw;line-height:1;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:10cqw}.controls .play{height:12.5cqw;border-color:#89724f;color:#ffb11b}.play svg{height:8cqw;width:8cqw;fill:currentColor;filter:drop-shadow(0 0 5px #ff8b00)}.controls button:active{transform:translateY(2px);filter:brightness(1.2)}.controls button:disabled{opacity:.6;cursor:default}.radio[data-state=loading] .play svg{opacity:.6}.radio[data-state=error] .display{box-shadow:inset 0 0 15px #873100ad}.radio[data-state=playing] .display{box-shadow:inset 0 0 12px #63300080,0 0 12px #ffad0040}@media(min-width:700px){.radio{min-height:0;width:min(530px,calc(100svh * .5628));min-width:390px}}@media(max-width:350px){.screen-top{font-size:11px;gap:3px;letter-spacing:-.8px}.network{display:none}.channel-title.compact{font-size:10px}.status,.screen-bottom{font-size:11px}}@media(prefers-reduced-motion:reduce){.waveform.active i{animation:none;transform:scaleY(var(--level))}}@media(min-resolution:1dppx){.radio{margin:0 auto}}