:root{--burg:#3a0a12;--gold:#e3b456;--brass:#c79a3e;--ivory:#f3e9d2;--wood:#3b2414;}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ivory);font-family:'EB Garamond',serif;
background:radial-gradient(ellipse at top,#5a1420 0%,var(--burg) 45%,#12040a 100%);}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.7));z-index:5}
header{text-align:center;padding:18px 10px 6px}
h1{font-family:'UnifrakturCook',cursive;color:var(--gold);margin:0;font-size:clamp(28px,6vw,58px);text-shadow:0 0 18px rgba(227,180,86,.45),0 3px 0 #000;animation:rise 1.2s ease-out}
.sub{font-variant:small-caps;letter-spacing:.25em;opacity:.8;margin:4px 0 0;font-size:14px}
@keyframes rise{from{opacity:0;transform:translateY(-12px)}}
.radio{max-width:900px;margin:12px auto;padding:16px;border-radius:30px 30px 14px 14px;
background:repeating-linear-gradient(92deg,#4a2c17 0 6px,#3b2414 6px 11px,#51321c 11px 15px),var(--wood);
box-shadow:0 20px 60px #000,inset 0 0 0 3px #1c0f07,inset 0 0 0 6px var(--brass);animation:rise 1.4s ease-out}
.screen{border-radius:200px 200px 10px 10px;overflow:hidden;border:4px solid var(--brass);background:#080306;box-shadow:inset 0 0 40px #000}
canvas{display:block;width:100%;height:340px}
.plaque{margin:14px auto;padding:10px 16px;text-align:center;border-radius:8px;color:#2a1606;
background:linear-gradient(180deg,#f0cd7a,#b9862f 60%,#e3b456);box-shadow:inset 0 1px 0 #fff6,0 3px 8px #000}
#title{font-weight:800;font-size:20px;font-style:italic}
#meta{font-size:14px}
.dial{background:#1a0d06;border:2px solid var(--brass);border-radius:10px;padding:8px 14px;box-shadow:inset 0 0 18px #c79a3e33}
.stations{display:flex;justify-content:space-between;font-size:12px;color:#f6c86f;text-shadow:0 0 6px #f6a531}
.stations span{flex:1;text-align:center;cursor:pointer;opacity:.55}
.stations span.on{opacity:1}
input[type=range]{width:100%;accent-color:var(--gold)}
#controls{margin-top:12px}
.stops{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px;justify-content:center;flex-wrap:wrap}
.stop{width:78px;height:78px;border-radius:50%;border:none;cursor:pointer;font-family:inherit;font-size:12px;line-height:1.05;color:#3a1a08;
background:radial-gradient(circle at 35% 30%,#fffaf0,var(--ivory) 50%,#b9a37a);box-shadow:0 4px 0 #1a0d06,0 6px 10px #000;transition:transform .2s,box-shadow .2s}
.stop.on{transform:translateY(-4px) scale(1.06);box-shadow:0 0 0 3px var(--gold),0 8px 0 #1a0d06,0 0 18px var(--gold)}
.stop b{display:block;font-size:14px}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;margin:8px 0}
.row label{flex:1;min-width:150px;font-variant:small-caps;letter-spacing:.1em}
.ends{display:flex;justify-content:space-between;font-size:11px;opacity:.7}
.bakelite{width:64px;height:64px;border-radius:50%;font-size:28px;color:var(--gold);cursor:pointer;border:3px solid var(--brass);
background:radial-gradient(circle at 35% 30%,#5a3a2a,#140805);box-shadow:0 4px 10px #000}
.bakelite.on{color:#fff3c4;text-shadow:0 0 12px #ffcc55;box-shadow:0 0 20px #ffb84488}
.brass{font-family:inherit;font-weight:800;padding:8px 16px;border-radius:6px;border:1px solid #5a3a10;cursor:pointer;color:#2a1606;background:linear-gradient(#f0cd7a,#b9862f)}
.brass:active{transform:translateY(1px)}
.brass.small{padding:5px 10px;font-size:14px}
.seedbox{font-family:monospace;background:#120806;padding:6px 10px;border-radius:6px;border:1px solid var(--brass)}
.favs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.favs button{font-family:inherit;font-size:13px;background:#2a120a;color:var(--ivory);border:1px solid var(--brass);border-radius:14px;padding:3px 10px;cursor:pointer}
footer{text-align:center;padding:16px;opacity:.8;font-size:14px}
footer a{color:var(--gold)}
.keys{opacity:.6}
@media(max-width:600px){canvas{height:240px}.stops{flex-wrap:nowrap;justify-content:flex-start}.stop{flex:0 0 66px;height:66px}}