:root{--lime:#baff00;--pink:#ff1d96;--bg:#030403;--paper:#b49360;--mono:"Courier New",monospace;--hand:"Segoe Print","Comic Sans MS",cursive}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020302;color:#eee9df;font-family:var(--mono)}a{color:inherit}
.topbar{height:64px;display:grid;grid-template-columns:1.25fr 2.1fr .55fr 1.2fr;align-items:center;background:linear-gradient(#090b09,#040504);border-bottom:1px solid #2b2f27;padding:0 2.5vw;position:sticky;top:0;z-index:70;box-shadow:0 8px 24px rgba(0,0,0,.38)}.brand{display:flex;align-items:baseline;gap:5px;font-weight:900}.brand b{color:var(--lime);font-size:24px}.brand strong{color:var(--pink);font-size:24px}.brand span{color:#b4afa6;font-size:11px;margin-left:7px;letter-spacing:.09em}.topbar nav{display:flex;justify-content:center;gap:34px}.topbar nav a{font-size:13px;text-decoration:none;color:#e2ddd4;font-weight:800;letter-spacing:.04em;text-shadow:0 1px 0 #000}.topbar nav a:hover,.topbar nav a:focus{color:var(--lime)}.wave{text-align:center;color:var(--lime);font-size:26px;text-shadow:0 0 10px var(--lime)}.keep{text-align:right;text-decoration:none;color:#e6bd47;font-size:11px;font-weight:900;letter-spacing:.07em}
.hero{position:relative;width:100%;background:#060706;overflow:hidden}.hero>img{display:block;width:100%;height:auto}.notepad{position:absolute;z-index:15;left:3.3%;top:17.3%;width:15.8%;padding:2.7% 1.5% 7.2% 2.5%;background:repeating-linear-gradient(0deg,rgba(88,62,31,.13) 0 1px,transparent 1px 25px),linear-gradient(120deg,#c6a66f,#9f7c4c);color:#17120b;transform:rotate(-1deg);clip-path:polygon(5% 0,99% 1%,100% 96%,95% 100%,4% 98%,0 5%);box-shadow:0 18px 35px rgba(0,0,0,.52)}.notepad:before{content:"";position:absolute;left:13.5%;top:0;bottom:0;width:2px;background:rgba(87,48,24,.3)}.notepad a{display:block;position:relative;z-index:2;text-decoration:none;color:#17120b;font:900 clamp(14px,1.5vw,23px)/1.08 var(--hand);padding:.4em .05em .38em .2em;border-bottom:1px dashed rgba(55,39,22,.28)}.notepad a:hover{transform:translateX(2px)}.notepad .note{position:absolute;left:34%;bottom:4%;font:900 clamp(11px,1.25vw,18px)/1.04 var(--hand);transform:rotate(-5deg);text-align:center}.circle{position:absolute;z-index:1;left:0;top:0;border:3px solid #3f7000;border-radius:50%;pointer-events:none;transition:transform .22s,width .22s,height .22s;box-shadow:1px 0 0 #395d09,-1px 1px 0 #395d09}.circle:after{content:"";position:absolute;inset:-4px 1px -3px -2px;border:1px solid rgba(46,90,0,.72);border-radius:50%;transform:rotate(5deg)}
.onair-flicker{position:absolute;z-index:12;left:42.4%;top:2.2%;width:15%;height:10.2%;border-radius:8px;box-shadow:0 0 22px rgba(255,35,20,.8),inset 0 0 18px rgba(255,35,20,.28);animation:flick 4.8s infinite steps(1);pointer-events:none}@keyframes flick{0%,5%,9%,11%,14%,51%,55%,88%,100%{opacity:1}6%,10%,52%,54%{opacity:.18}12%,53%,89%{opacity:.65}}
.radio-ui{--accent:#dfff00;position:absolute;z-index:16;inset:0}.screen{position:absolute;left:34.2%;top:54.4%;width:32.5%;height:18%;padding:1.5% 1.4% 1%;background:linear-gradient(180deg,#061407,#020b03);border:3px solid #3a4727;border-radius:6px;box-shadow:inset 0 0 22px rgba(77,255,23,.07),inset 0 2px 2px rgba(255,255,255,.05),0 0 4px rgba(0,0,0,.85);overflow:hidden}.screen:before{content:"";position:absolute;left:0;right:0;top:0;height:32%;background:linear-gradient(180deg,rgba(255,255,255,.055),transparent);pointer-events:none}.mainrow{display:grid;grid-template-columns:1fr 2fr 1fr auto;gap:8px;align-items:center;color:#83ff2e;text-shadow:0 0 9px #45ff00;font-size:clamp(9px,1.05vw,16px);font-weight:900;position:relative;z-index:2}.mainrow strong{text-align:center;font-size:clamp(13px,1.6vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mainrow b{color:#ff493b;text-shadow:0 0 8px #ff2c20;white-space:nowrap}.mainrow b.offline{color:#ffb13a;text-shadow:0 0 8px #ff861e}.signal-line{position:absolute;left:7%;right:7%;bottom:29%;height:2px;background:#5d9023;box-shadow:0 0 7px #6dff2e}.needle{position:absolute;left:46%;top:-8px;width:3px;height:18px;background:#ffe83b;box-shadow:0 0 9px #ffe83b}.scale{position:absolute;left:7%;right:7%;bottom:5%;display:flex;justify-content:space-between;color:#79b73d;font-size:clamp(6px,.58vw,9px);text-shadow:none}.screen input{position:absolute;left:7%;right:7%;bottom:20%;width:86%;height:16px;opacity:.01;cursor:ew-resize}.knob{position:absolute;top:60.5%;width:9.8%;aspect-ratio:1;border-radius:50%;border:0;background:transparent;cursor:pointer}.knob.prev{left:25.4%}.knob.next{right:24.3%}.knob:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 42%,transparent)}
.stations,.shows,.join,.about{padding:68px 3.2vw}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.section-head span{color:var(--lime);font-size:17px;font-weight:900;letter-spacing:.05em}.section-head h2{font-size:14px;color:#c0bbb1;font-weight:400;margin:5px 0}.section-head p{font-size:12px;color:#c2bdb3}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.card{--accent:#aaa;background:#070807;border:1px solid #292c24;color:#ddd;padding:0 0 16px;display:flex;flex-direction:column;text-align:left;min-height:350px;cursor:pointer;box-shadow:inset 0 -3px 0 var(--accent);transition:.18s}.card:hover,.card.selected{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 16px 35px color-mix(in srgb,var(--accent) 12%,transparent),inset 0 -3px 0 var(--accent)}.thumb{height:170px;overflow:hidden;border-bottom:1px solid #292c24}.thumb img{width:100%;height:100%;object-fit:cover}.meta{padding:13px 14px 0;color:var(--accent);font-size:10px}.card strong{padding:6px 14px 0;color:var(--accent);font-size:17px;line-height:1.08}.card p{padding:0 14px;color:#b5b0a8;font-size:11px;line-height:1.46}.card em{margin:auto 14px 0;width:max-content;border:1px solid var(--accent);color:var(--accent);padding:6px 9px;font-style:normal;font-size:8px}
.shows{display:grid;grid-template-columns:1fr 1.25fr .75fr;gap:16px;border-top:1px solid #191b17}.shows article{background:#080908;border:1px solid #282a24;padding:20px}.shows article>span,.latest-head span{color:var(--lime);font-size:11px;font-weight:900}.current-body{display:grid;grid-template-columns:175px 1fr;gap:17px;margin-top:13px}.current-body img{width:100%;height:195px;object-fit:cover}.current h2{color:#e7f400;font-size:29px;margin:0}.current p,.status p{color:#b6b0a8;font-size:11px;line-height:1.55}.current button{border:1px solid var(--lime);background:transparent;color:var(--lime);padding:11px 17px;font-size:10px;cursor:pointer}.current button:hover{background:var(--lime);color:#030403}.latest-head{display:flex;justify-content:space-between}.latest-head span:last-child{color:#d7b44a}.latest>div{display:grid;gap:8px;margin-top:12px}.latest button{display:grid;grid-template-columns:28px 1fr 42px;gap:10px;align-items:center;background:#050605;border:1px solid #23251f;color:#ddd;padding:10px;text-align:left;cursor:pointer}.latest .play{color:var(--lime);font-size:15px}.latest b{font-size:10px}.latest small{display:block;color:#918c84;font-size:8px;margin-top:2px}.latest time{font-size:8px;color:#aaa}.status b{color:var(--lime)}.status .bar{height:2px;background:linear-gradient(90deg,var(--lime),#25301f);margin:12px 0}.gold{color:#d6b44a!important}
.join{max-width:none;background:linear-gradient(90deg,#071208,#050705 60%,#0b1006);border-block:1px solid #20261b;display:grid;grid-template-columns:1.4fr .5fr auto;gap:35px;align-items:center}.join span{font:900 42px Arial,sans-serif}.join h2{font-size:13px;color:#aaa;font-weight:400;margin:6px 0}.join p{font-size:11px;color:#a39e95}.join b{color:#d6b34e;font-size:9px}.join-note{background:#b49360;color:#17120b;padding:19px 22px;font:900 20px/1.03 Arial,sans-serif;transform:rotate(-2deg);justify-self:center}.join>a{border:1px solid var(--lime);color:var(--lime);text-decoration:none;padding:14px 22px;font-size:10px}.join>a:hover{background:var(--lime);color:#030403}
.about{display:flex;justify-content:space-between;align-items:center;gap:30px}.about h2{font:900 44px/1 Arial,sans-serif;margin:0}.about p{font-size:11px;color:#aaa}.tag{color:var(--lime)!important;font-weight:900}
footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 3vw;border-top:1px solid #181a17;color:#77726a;font-size:9px}footer nav{display:flex;gap:22px}footer a{text-decoration:none}footer a:hover{color:var(--lime)}
dialog{width:min(610px,90vw);background:#080908;color:#eee;border:1px solid #41443c;padding:22px}dialog::backdrop{background:rgba(0,0,0,.82)}dialog audio{width:100%;margin-top:13px}dialog form button{float:right;background:none;border:0;color:#aaa;font-size:24px}
@media(max-width:1200px){.topbar nav{gap:18px}.topbar nav a{font-size:11px}.grid{grid-template-columns:repeat(3,1fr)}.shows{grid-template-columns:1fr}.join{grid-template-columns:1fr;text-align:center}.join-note{margin:auto}}
@media(max-width:760px){.topbar{grid-template-columns:1fr 1fr}.topbar nav,.wave{display:none}.brand span{display:none}.notepad{left:1.3%;width:22%}.notepad a{font-size:11px}.notepad .note{display:none}.screen{left:33%;width:35%;font-size:7px}.mainrow strong{font-size:10px}.grid{grid-template-columns:repeat(2,1fr)}.section-head{display:block}.current-body{grid-template-columns:120px 1fr}.about{display:block;text-align:center}}
@media(max-width:500px){.grid{grid-template-columns:1fr}.card{min-height:320px}.thumb{height:180px}}


/* =========================================================
   V15 — NAVIGATION + SCROLL + RADIO INTERACTION CORRECTIONS
   ========================================================= */

/* Always allow normal page scrolling. */
html, body{
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto!important;
}
main, section{overflow:visible}
section[id]{scroll-margin-top:76px}

/* The hero picture already contains the exact notebook the user approved.
   Do NOT redraw it. Only transparent click zones and one moving pencil circle. */
.notepad{display:none!important}

.notepad-hotspots{
  position:absolute;
  z-index:40;
  left:3.35%;
  top:16.2%;
  width:14.7%;
  height:52.5%;
  background:transparent;
  pointer-events:auto;
}
.notepad-hotspots a{
  position:absolute;
  z-index:3;
  left:7%;
  width:87%;
  height:13.2%;
  display:block;
  background:transparent;
  border:0;
  cursor:pointer;
}
.notepad-hotspots a:nth-child(1){top:0%}
.notepad-hotspots a:nth-child(2){top:16.2%}
.notepad-hotspots a:nth-child(3){top:32.6%}
.notepad-hotspots a:nth-child(4){top:65.0%}
.notepad-hotspots a:nth-child(5){top:81.2%}

.notepad-hotspots .circle{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:84%;
  height:13%;
  border:3px solid rgba(61,105,0,.95);
  border-radius:50%;
  pointer-events:none;
  transition:transform .22s ease,width .22s ease,height .22s ease;
  box-shadow:1px 0 0 rgba(50,86,0,.65),-1px 1px 0 rgba(50,86,0,.55);
}
.notepad-hotspots .circle:after{
  content:"";
  position:absolute;
  inset:-4px 2px -3px -2px;
  border:1px solid rgba(48,88,0,.7);
  border-radius:50%;
  transform:rotate(5deg);
}

/* The radio UI must not blanket-cover the hero and steal notebook clicks/scroll.
   Only its actual controls receive pointer input. */
.radio-ui{
  pointer-events:none!important;
  z-index:30!important;
}
.radio-ui .screen,
.radio-ui .screen input,
.radio-ui .knob{
  pointer-events:auto!important;
}

/* Cover the physical radio glass exactly so there is ONE display, not two. */
.screen{
  left:34.35%!important;
  top:56.45%!important;
  width:31.6%!important;
  height:16.85%!important;
  padding:1.45% 1.35% 1%!important;
  border-radius:4px!important;
  border:2px solid #3e4c28!important;
  background:
    linear-gradient(180deg,rgba(7,26,8,.99),rgba(1,11,2,.995))!important;
  box-shadow:
    inset 0 0 24px rgba(90,255,30,.06),
    inset 0 2px 1px rgba(255,255,255,.04),
    0 0 3px rgba(0,0,0,.95)!important;
}

/* Hit areas align with the actual large physical knobs. */
.knob{
  top:58.55%!important;
  width:7.15%!important;
  aspect-ratio:1!important;
}
.knob.prev{left:26.0%!important}
.knob.next{right:25.5%!important}

/* Do not hijack the mouse wheel anywhere on the radio.
   Page wheel/trackpad scrolling remains completely normal. */

/* Rich top navigation stays readable on wide screens. */
.topbar{
  height:68px!important;
  grid-template-columns:1.25fr 2.35fr .55fr 1.2fr!important;
}
.topbar nav{gap:36px!important}
.topbar nav a{
  font-size:14px!important;
  line-height:1!important;
  color:#eee9df!important;
  font-weight:900!important;
  letter-spacing:.045em!important;
}
.topbar nav a:hover,
.topbar nav a:focus{color:var(--lime)!important}
.brand b,.brand strong{font-size:25px!important}
.brand span{font-size:11px!important}
.keep{font-size:11px!important}

/* Make navigation targets obvious and usable with keyboard. */
.topbar a:focus-visible,
.notepad-hotspots a:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
}

/* Mobile: preserve scroll and make notebook hotspots follow the artwork. */
@media(max-width:760px){
  .notepad-hotspots{
    left:2.4%;
    top:16.5%;
    width:18.2%;
    height:52%;
  }
  .topbar{height:58px!important}
  .screen{
    left:33.4%!important;
    width:33.3%!important;
  }
}


/* =======================================================
   V16 — NOTEBOOK SELECTOR: ONE CIRCLE, EXACT CENTERING
   ======================================================= */

.notepad-hotspots{
  left:3.35%!important;
  top:16.2%!important;
  width:14.7%!important;
  height:52.5%!important;
}

/* Exact click rows over the handwritten notebook text */
.notepad-hotspots a{
  left:7%!important;
  width:87%!important;
  height:12.5%!important;
}

/* Tune In */
.notepad-hotspots a:nth-child(1){top:3.7%!important}
/* Stations */
.notepad-hotspots a:nth-child(2){top:18.1%!important}
/* Shows */
.notepad-hotspots a:nth-child(3){top:30.8%!important}
/* Mystery Signals */
.notepad-hotspots a:nth-child(4){top:48.4%!important}
/* Join */
.notepad-hotspots a:nth-child(5){top:65.4%!important}
/* About */
.notepad-hotspots a:nth-child(6){top:77.7%!important}

/* Only one selector exists. Its exact position is set by JS. */
.notepad-hotspots .circle{
  left:0!important;
  top:0!important;
  margin:0!important;
  display:block!important;
  opacity:1!important;
  border:3px solid rgba(55,105,0,.96)!important;
  box-shadow:
    1px 0 0 rgba(44,83,0,.65),
    -1px 1px 0 rgba(44,83,0,.55)!important;
}

/* Make every destination stop below the sticky top navigation. */
#tune-in,#stations,#shows,#mystery,#join,#about{
  scroll-margin-top:82px!important;
}


/* ============================================================
   V17 — EXACT NOTEBOOK HIT AREAS + ONE CENTERED SELECTOR
   ============================================================ */

/* Match the ACTUAL notebook paper in the hero artwork. */
.notepad-hotspots{
  left:2.12%!important;
  top:15.34%!important;
  width:15.84%!important;
  height:63.26%!important;
  z-index:45!important;
  pointer-events:none!important;
}

/* Only links are clickable. No giant invisible layer blocks the hero. */
.notepad-hotspots a{
  position:absolute!important;
  display:block!important;
  z-index:4!important;
  background:transparent!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* Each hitbox is centered over the ACTUAL handwritten word(s). */
.notepad-hotspots a:nth-child(1){left:23%!important;top:6.8%!important;width:51%!important;height:9.2%!important}  /* TUNE IN */
.notepad-hotspots a:nth-child(2){left:20%!important;top:18.2%!important;width:56%!important;height:8.4%!important} /* STATIONS */
.notepad-hotspots a:nth-child(3){left:28%!important;top:28.5%!important;width:40%!important;height:8.3%!important} /* SHOWS */
.notepad-hotspots a:nth-child(4){left:23%!important;top:38.0%!important;width:58%!important;height:15.0%!important} /* MYSTERY SIGNALS */
.notepad-hotspots a:nth-child(5){left:33%!important;top:54.2%!important;width:29%!important;height:8.5%!important} /* JOIN */
.notepad-hotspots a:nth-child(6){left:27%!important;top:64.3%!important;width:43%!important;height:8.8%!important} /* ABOUT */

/* Exactly ONE selector. It is sized/positioned by JS from the selected hitbox. */
.notepad-hotspots .circle{
  position:absolute!important;
  left:0!important;
  top:0!important;
  margin:0!important;
  padding:0!important;
  border:3px solid rgba(57,105,0,.98)!important;
  border-radius:50%!important;
  background:transparent!important;
  pointer-events:none!important;
  z-index:3!important;
  display:block!important;
  box-shadow:
    1px 0 0 rgba(45,85,0,.65),
    -1px 1px 0 rgba(45,85,0,.58)!important;
}
.notepad-hotspots .circle:after{
  content:"";
  position:absolute;
  inset:-4px 2px -3px -2px;
  border:1px solid rgba(43,85,0,.72);
  border-radius:50%;
  transform:rotate(5deg);
}

/* Separate Mystery Signals section. */
.mystery-signals{
  padding:58px 3.2vw;
  border-top:1px solid #181a17;
  border-bottom:1px solid #181a17;
  background:
    radial-gradient(circle at 82% 42%,rgba(70,120,255,.06),transparent 26%),
    #040604;
}
.mystery-head{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:28px;
  align-items:end;
  margin-bottom:20px;
}
.mystery-head span{
  color:var(--lime);
  font-size:13px;
  font-weight:900;
}
.mystery-head h2{
  margin:4px 0 0;
  font:900 clamp(28px,3vw,43px)/.95 Arial,sans-serif;
}
.mystery-head p{
  grid-column:2;
  grid-row:1/3;
  color:#aaa;
  font-size:11px;
  line-height:1.55;
}
.mystery-links{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.mystery-links button{
  min-height:68px;
  background:#060806;
  border:1px solid #2b3027;
  color:#eee9df;
  padding:12px 14px;
  text-align:left;
  font:900 11px var(--mono);
  cursor:pointer;
}
.mystery-links button:hover{
  border-color:var(--lime);
  color:var(--lime);
}
.mystery-links em{
  display:block;
  margin-top:5px;
  color:#777;
  font-style:normal;
  font-size:8px;
}

/* All notebook destinations stop below the sticky top menu. */
#tune-in,#stations,#shows,#mystery,#join,#about{
  scroll-margin-top:84px!important;
}

@media(max-width:760px){
  .mystery-head{grid-template-columns:1fr}
  .mystery-head p{grid-column:1;grid-row:auto}
  .mystery-links{grid-template-columns:repeat(2,1fr)}
}

.tagline-lock{
  color:var(--lime)!important;
  font-weight:900!important;
  letter-spacing:.04em;
  text-transform:uppercase;
}


/* V19 legal/disclaimer footer */
.legal-disclaimer{
  border-top:1px solid #1c1f1a;
  background:#020302;
  padding:28px 3.2vw 30px;
  color:#8f8b83;
}
.legal-inner{
  max-width:1180px;
  margin:0 auto;
}
.legal-disclaimer h3{
  margin:0 0 12px;
  color:#b7b2a9;
  font-size:11px;
  letter-spacing:.08em;
}
.legal-disclaimer p{
  margin:8px 0;
  font-size:9px;
  line-height:1.55;
}
.legal-disclaimer strong{
  color:#d5cfbf;
}


/* ======================================================
   V21 — 30-SECOND PREVIEW + $2 MEMBERSHIP GATE
   ====================================================== */
.preview-gate{
  width:min(620px,92vw);
  border:1px solid #4f5d30;
  background:
    radial-gradient(circle at 50% 0,rgba(185,255,0,.08),transparent 35%),
    #070907;
  color:#eee9df;
  padding:30px;
  text-align:center;
  box-shadow:0 28px 90px rgba(0,0,0,.82);
}
.preview-gate::backdrop{
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(3px);
}
.preview-gate-close{
  position:absolute;
  top:8px;
  right:10px;
}
.preview-gate-close button{
  border:0;
  background:none;
  color:#8c897f;
  font-size:27px;
  cursor:pointer;
}
.gate-kicker{
  margin:8px 0 12px;
  color:var(--lime);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
}
.preview-gate h2{
  margin:0;
  font:900 clamp(36px,6vw,56px)/.94 Arial,sans-serif;
}
.preview-gate>p{
  max-width:510px;
  margin:9px auto;
  color:#aaa59c;
  font-size:11px;
  line-height:1.6;
}
.preview-gate .gate-price{
  margin-top:18px;
  color:#ddd7cc;
  font-size:17px;
}
.gate-price strong{
  color:var(--lime);
}
.gate-weekly{
  color:#d6b44a!important;
  font-weight:900;
  letter-spacing:.05em;
}
.gate-join{
  width:100%;
  margin-top:18px;
  padding:15px 18px;
  border:1px solid var(--lime);
  background:var(--lime);
  color:#030403;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
}
.gate-join:hover{
  box-shadow:0 0 25px rgba(185,255,0,.22);
}
.gate-later{
  margin-top:11px;
  border:0;
  background:none;
  color:#77736d;
  font-size:9px;
  cursor:pointer;
}
.gate-later:hover{
  color:#bbb6ad;
}

/* Make the three available station cards clearly previewable. */
.card em{
  font-weight:900;
}
.card.selected em{
  background:var(--accent);
  color:#030403;
}

/* V25: audio interaction only. Artwork, geometry, notebook and page layout are unchanged. */
.radio-ui #prev, .radio-ui #next { touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; }
.radio-ui #prev[data-dragging], .radio-ui #next[data-dragging] { cursor:grabbing; }
.radio-ui .radio-play-control {
  position:absolute; z-index:5; left:0; right:0; top:0; height:65%; width:100%;
  margin:0; padding:0; border:0; background:transparent; cursor:pointer;
  pointer-events:auto !important;
}
.radio-ui #dial { z-index:6; }
.radio-ui .knob:focus-visible, .radio-ui .radio-play-control:focus-visible {
  outline:2px solid var(--lime); outline-offset:2px;
}
.radio-sr-only {
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important;
  margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important;
  pointer-events:none!important;
}
/* Keep the invisible tuning scale below the play/pause tap region at every screen size. */
.radio-ui #dial {
  top:auto!important; bottom:5%!important; height:28%!important; margin:0!important;
  touch-action:pan-y;
}


/* StrangeFM member login */
.join-actions{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.member-login-link{border:1px solid #5e5b55;background:#090a08;color:#d8d3c9;padding:11px 18px;font:900 10px Arial,sans-serif;letter-spacing:.13em;cursor:pointer}
.member-login-link:hover{border-color:var(--lime);color:var(--lime)}
.member-login{width:min(92vw,520px);border:1px solid #363a30;background:#080a07;color:#ddd7cc;padding:34px;box-shadow:0 0 80px #000}
.member-login::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(3px)}
.member-login-close{position:absolute;right:12px;top:8px}.member-login-close button{border:0;background:none;color:#777;font-size:26px;cursor:pointer}
.member-kicker{color:var(--lime);font:900 9px Arial,sans-serif;letter-spacing:.18em;margin-bottom:10px}
.member-login h2{margin:0 0 12px;font:900 clamp(30px,6vw,50px)/.95 Arial,sans-serif}
.member-login p{color:#aaa59c;font:11px/1.6 Arial,sans-serif}
.member-login label{display:block;margin:18px 0 7px;color:#8f8b83;font:900 9px Arial,sans-serif;letter-spacing:.14em}
.member-login input{box-sizing:border-box;width:100%;padding:14px;border:1px solid #3d4037;background:#030403;color:#fff;font:700 14px Arial,sans-serif;outline:none}
.member-login input:focus{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.is-member .join #joinBtn{opacity:.45}

.player-share-wrap{margin-top:14px;display:flex;justify-content:center}
.player-share-btn{width:100%;padding:14px 18px;border:2px solid #b7ff00;background:#111;color:#b7ff00;font-weight:900;font-size:16px;letter-spacing:1.2px;cursor:pointer;box-shadow:0 0 16px rgba(183,255,0,.14)}
.player-share-btn:hover{background:#b7ff00;color:#070807}
.share-dialog{width:min(640px,92vw);background:#090a09;color:#eee;border:1px solid #58604d;padding:26px}
.share-close button{float:right;background:none;border:0;color:#aaa;font-size:28px}
.share-kicker{color:#b7ff00;font-weight:900;letter-spacing:2px;font-size:12px}
.share-dialog h2{font-size:30px;margin:8px 0}
.share-dialog p{color:#c7c7c7;line-height:1.45}
.share-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.share-grid button{padding:14px 10px;border:1px solid #4d5248;background:#171917;color:#fff;font-weight:900;letter-spacing:.7px;cursor:pointer}
.share-grid button:hover{border-color:#b7ff00;color:#b7ff00}
.share-status{min-height:22px;margin-top:14px;color:#b7ff00;font-weight:800}
@media(max-width:520px){.share-grid{grid-template-columns:1fr}.player-share-btn{font-size:14px}}

.episode-library-heading{font-weight:1000;letter-spacing:2px;font-size:13px;color:#b7ff00;margin:4px 0 10px;padding-bottom:7px;border-bottom:1px solid #343a2d}
#episodeList button time{min-width:126px;text-align:right;font-weight:1000;color:#b7ff00;font-size:11px;letter-spacing:.5px}

/* Exact member-only fix for the actual Latest Episodes container. */
body.is-member #latestEpisodes time { display:none !important; }

.legal-links{margin:36px auto 12px;padding:22px 14px;border-top:1px solid #343a2d;text-align:center;color:#92998a}
.legal-links button{background:none;border:0;color:#c8d0bf;font:inherit;font-size:11px;font-weight:900;letter-spacing:.8px;cursor:pointer;padding:8px 5px}
.legal-links button:hover{color:#b7ff00}
.legal-links span{opacity:.35}
.legal-links p{font-size:11px;margin:10px 0 0;color:#899080}
.legal-dialog{width:min(760px,92vw);max-height:80vh;overflow:auto;background:#0a0b0a;color:#e9ece5;border:1px solid #59624e;padding:28px}
.legal-close{position:sticky;top:0;text-align:right}
.legal-close button{background:#111;border:1px solid #444;color:#fff;font-size:24px;cursor:pointer}
.legal-dialog h2{color:#b7ff00;letter-spacing:1px}
.legal-dialog h3{margin-top:24px}
.legal-dialog p,.legal-dialog li{line-height:1.55;color:#cbd0c5}
.legal-dialog a{color:#b7ff00}