:root{color-scheme:dark;--metal:#b8b4aa;--black:#090a0b;--brass:#c3a365;--cream:#efe7d5;--amber:#ffb547;--ink:#111;--red:#c92521;font-family:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 12%,#555 0,#202224 42%,#08090a 100%);color:#f3e8d2}
button,input{font:inherit}
.stage{min-height:100vh;display:grid;place-items:center;padding:clamp(1rem,4vw,3.5rem)}
.radio{width:min(1120px,100%);border:2px solid #8f918f;border-radius:18px;padding:clamp(1rem,3vw,2.3rem);background:linear-gradient(145deg,#27292b,#08090a 74%);box-shadow:0 1px 0 #e1ddd3 inset,0 -3px 0 #000 inset,0 30px 75px #000c;position:relative}
.radio::after{content:"";position:absolute;inset:9px;border:1px solid #777;border-radius:12px;pointer-events:none;opacity:.65}
.maker{display:flex;align-items:center;gap:1rem;padding:.1rem 1rem 1rem}.maker h1{font-size:clamp(1.25rem,3vw,2rem);letter-spacing:.055em;margin:0;color:#f4eee2!important}.maker p{margin:.25rem 0 0;color:#c7c4bc!important;font-size:.9rem}.crest{width:44px;height:44px;border:2px solid var(--metal);border-radius:3px;display:grid;place-items:center;font-weight:bold;font-style:italic;color:#eee!important}.state{margin-left:auto;text-transform:uppercase;letter-spacing:.14em;font:700 .78rem Arial,sans-serif;color:#d4d0c7!important}.radio.on .state{color:#ffc86c!important;text-shadow:0 0 12px #ff9d31}
.model-photo{position:relative;margin:.25rem auto 1.25rem;max-width:1000px}.model-photo img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 20px #0009)}.model-photo figcaption{position:absolute;left:1rem;bottom:.8rem;margin:0;padding:.35rem .55rem;background:#050607dc;color:#fff;border:1px solid #aaa;font:600 .72rem/1.2 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.dial-shell{background:#120d09;padding:9px;border:1px solid #c69b52;border-radius:18px;box-shadow:0 0 0 4px #392317,0 8px 18px #0008}
.dial-glass{height:clamp(190px,29vw,300px);position:relative;overflow:hidden;border-radius:11px;background:linear-gradient(#423930aa,#171310aa),repeating-linear-gradient(90deg,transparent 0 7.9%,#ddc99a2a 8%);border:1px solid #8a785b;box-shadow:inset 0 0 40px #000}
.dial-glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,#ffba5445,#d5680915 50%,transparent 75%);opacity:0;transition:opacity 2.8s;animation:flicker 4.3s infinite}.radio.on .dial-glow{opacity:1}
@keyframes flicker{0%,100%{filter:brightness(.95)}42%{filter:brightness(1.08)}44%{filter:brightness(.86)}46%{filter:brightness(1.02)}}
.city-scale{position:absolute;inset:24px 30px 52px;display:flex;justify-content:space-between;align-items:flex-start;color:#d9c99f;font-size:clamp(.65rem,1.4vw,1rem);letter-spacing:.12em;text-transform:uppercase}.city-scale span:nth-child(even){align-self:center;color:#bca97d}
.ticks{position:absolute;left:4%;right:4%;bottom:45px;height:28px;background:repeating-linear-gradient(90deg,#cfb978 0 1px,transparent 1px 2.5%);border-bottom:1px solid #d8c188}
.needle{position:absolute;left:7%;top:9px;bottom:12px;width:2px;background:var(--red);box-shadow:0 0 5px #f44;transform:translateX(-50%);transition:left .12s ease-out}
.frequency-slider{position:absolute;inset:0;width:100%;height:100%;opacity:.001;cursor:ew-resize}
.readout{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;align-items:baseline;gap:1rem;color:#ffca70;text-shadow:0 0 12px #ff982f}.readout strong{font:600 clamp(1.15rem,3vw,2rem) "Courier New",monospace}.readout span{font-size:.88rem;letter-spacing:.11em;text-transform:uppercase}
.lower-panel{padding:1.5rem 1rem .8rem}
.controls{display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:1rem}.control-block{display:flex;flex-direction:column;align-items:center;gap:.7rem;color:#d8c29b;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}.knob{width:78px;height:78px;border-radius:50%;border:3px solid #17100d;background:repeating-radial-gradient(circle at 38% 34%,#3b302a 0 5px,#17110f 6px 9px);box-shadow:0 4px 8px #000,0 1px 1px #76665c inset;cursor:pointer;transform:rotate(-38deg);transition:transform .35s}.knob i{display:block;width:3px;height:26px;background:#d3bc91;margin:7px auto;border-radius:2px}.radio.on .power-knob{transform:rotate(40deg)}
.bands{border:0;margin:0;padding:0;display:grid;gap:.45rem}.bands legend{font-size:.75rem;color:#d8c29b;margin-bottom:.45rem;text-transform:uppercase;letter-spacing:.12em}.bands button,.elite,.receiver-bar button{border:1px solid #17100c;background:linear-gradient(#504037,#1a1411);color:#e7d4b5;padding:.6rem .8rem;border-radius:5px;box-shadow:0 2px 3px #000;cursor:pointer}.bands button[aria-pressed="true"],.elite[aria-pressed="true"]{color:#1b1009;background:linear-gradient(#e2bf75,#9f6c28);box-shadow:0 0 16px #ffae42aa}.vertical-range{accent-color:#b98a42;width:110px}.tuning-knob{width:94px;height:94px}.elite{font-weight:700;font-style:italic;font-size:1rem}.receiver-bar{margin:1rem;border-top:1px solid #a3783f;padding:1rem 0 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:Arial,sans-serif}.receiver-bar div{display:grid;grid-template-columns:auto 1fr;gap:.15rem .55rem;align-items:center}.receiver-bar small{grid-column:2;color:#bcae9d}.signal-dot{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:#4b4037}.radio.on .signal-dot{background:#e5972c;box-shadow:0 0 11px #ff9b2c}.receiver-bar button:disabled{opacity:.4;cursor:not-allowed}.receiver-bar button:not(:disabled){border-color:#ba8a45}
.manual{width:min(1080px,100%);display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem;margin-top:1rem;color:#c9bba9;font:1rem/1.45 Arial,sans-serif}.manual p{margin:.25rem 0}.manual strong{color:#f0d4a8}.manual .notice{grid-column:1/-1;font-size:.85rem;color:#9f9488}
@media(max-width:760px){.stage{padding:.55rem}.radio{border-radius:12px}.maker{align-items:flex-start}.crest{display:none}.maker h1{letter-spacing:.02em}.maker p{font-size:.76rem}.model-photo{margin-inline:-.25rem}.model-photo figcaption{position:static;border:0;border-top:1px solid #777;background:#050607;padding:.55rem .7rem}.dial-glass{height:210px}.lower-panel{padding:1rem .25rem}.controls{grid-template-columns:repeat(4,1fr);gap:.35rem}.knob{width:62px;height:62px}.tuning-knob{width:68px;height:68px}.bands button{padding:.48rem .35rem;font-size:.76rem}.control-block{font-size:.68rem}.receiver-bar{margin:.7rem .2rem .4rem;align-items:stretch;flex-direction:column}.receiver-bar button{width:100%}.manual{grid-template-columns:1fr;padding:.5rem;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}