:root{
  --navy:#0b1024; --amber:#ffb347; --brass:#c9a227; --burg:#6e1b2c; --cream:#f3e6c8; --wood:#3b2216;
}
html,body{margin:0;background:var(--navy);color:var(--cream);font-family:'Fraunces',serif;min-height:100%;overflow-x:hidden}
.mono{font-family:'DM Mono',monospace}
.neon{font-family:'Monoton',cursive;color:#ffd9a0;text-shadow:0 0 6px #ff9a3c,0 0 18px #ff6a00,0 0 36px #ff3c00;animation:flick 6s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}
.sky{position:fixed;inset:0;background:radial-gradient(ellipse at 70% 10%,#2a2150 0%,transparent 55%),radial-gradient(ellipse at 10% 90%,#3a1424 0%,transparent 50%),linear-gradient(#070a1a,#0d1430 70%,#140c18);z-index:-3}
.skyline{position:fixed;left:0;right:0;bottom:0;height:200px;z-index:-2;opacity:.85;
background:
 linear-gradient(transparent 0,transparent 100%),
 repeating-linear-gradient(90deg,#05060f 0 40px,#080a18 40px 70px,#05060f 70px 120px,#0a0c1c 120px 150px);
clip-path:polygon(0 60%,5% 60%,5% 30%,10% 30%,10% 50%,15% 50%,15% 15%,19% 15%,19% 45%,25% 45%,25% 25%,30% 25%,30% 55%,36% 55%,36% 10%,40% 10%,40% 40%,47% 40%,47% 30%,52% 30%,52% 60%,58% 60%,58% 20%,63% 20%,63% 45%,70% 45%,70% 5%,73% 5%,73% 35%,80% 35%,80% 50%,86% 50%,86% 22%,91% 22%,91% 55%,100% 55%,100% 100%,0 100%)}
.rain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.18;
background-image:repeating-linear-gradient(100deg,transparent 0 9px,rgba(180,200,255,.5) 9px 10px,transparent 10px 22px);
background-size:200px 200px;animation:rain .5s linear infinite}
@keyframes rain{to{background-position:-40px 200px}}
.cabinet{background:
 repeating-linear-gradient(88deg,rgba(0,0,0,.12) 0 3px,transparent 3px 11px),
 linear-gradient(160deg,#5a3320,#3b2216 50%,#2a160d);
 border:3px solid var(--brass);border-radius:28px;box-shadow:0 0 0 6px #1a0d07,0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(255,160,60,.12) inset}
.dial{background:linear-gradient(#f6e7bf,#e2c98a);box-shadow:inset 0 0 22px rgba(120,60,0,.6);border-radius:10px;position:relative;touch-action:none;cursor:ew-resize;user-select:none}
.dial.lit{box-shadow:inset 0 0 22px rgba(120,60,0,.6),0 0 30px rgba(255,180,80,.6)}
.needle{position:absolute;top:4px;bottom:4px;width:3px;background:#b3001b;box-shadow:0 0 6px #ff2a2a;transform:translateX(-1px)}
.knob{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2d27a,#9a7414 60%,#4a3707);box-shadow:0 4px 10px rgba(0,0,0,.6),inset 0 -3px 6px rgba(0,0,0,.4);position:relative;touch-action:none;cursor:ns-resize}
.knob::after{content:'';position:absolute;top:6px;left:50%;width:4px;height:16px;margin-left:-2px;background:#2a1a05;border-radius:2px}
.bigknob{width:96px;height:96px;cursor:pointer}
.panel{background:rgba(10,8,18,.72);border:1px solid rgba(201,162,39,.5);border-radius:14px}
.led{width:10px;height:10px;border-radius:50%;background:#ff3b1f;box-shadow:0 0 8px #ff3b1f;opacity:.15}
.onair{background:#3a0b0b;color:#7a3a3a;border:2px solid #5a1a1a;transition:.3s}
.onair.on{background:#d91e1e;color:#fff2e0;box-shadow:0 0 18px #ff2a2a,0 0 40px rgba(255,40,40,.5);border-color:#ff7b7b}
.marquee{white-space:nowrap;overflow:hidden}
.marquee span{display:inline-block;padding-left:100%;animation:mq 22s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
input[type=range].vs{writing-mode:vertical-lr;direction:rtl;width:22px;height:110px;accent-color:var(--amber)}
input[type=range]{accent-color:var(--amber)}
.tape{background:linear-gradient(#2b2b2b,#141414);border:1px solid #555;border-radius:8px}
.tape .lbl{background:var(--cream);color:#2a160d}
.btn{border:1px solid var(--brass);color:var(--cream);background:rgba(110,27,44,.55);border-radius:999px;padding:.4rem .9rem;transition:.15s}
.btn:hover{background:var(--burg);box-shadow:0 0 12px rgba(255,170,80,.4)}
.reveal{animation:rv .9s both}
@keyframes rv{from{opacity:0;transform:translateY(18px)}}