*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#030406}
body{font-family:Arial,Helvetica,sans-serif;color:var(--text,#f8f8f9);overflow:hidden}
:root{
  --logo-w:300px;
  --player-w:500px;
  --player-ratio:2.50;
  --play-size:106px;
  --meter-h:78px;
  --meter-bar:6px;
  --meter-gap:5px;
  --player-gap:18px;
  --player-pad-y:15px;
  --player-pad-x:22px;
  --social-icon:54px;
}
.shell{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  isolation:isolate;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.08)),
    var(--bg-current);
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
.shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 45%,transparent 0 48%,rgba(0,0,0,.10) 100%),
    linear-gradient(90deg,rgba(0,0,0,.10),transparent 18% 82%,rgba(0,0,0,.10));
}
.skip-link{
  position:fixed;left:10px;top:10px;z-index:1000;
  transform:translateY(-160%);
  background:#fff;color:#111;padding:9px 12px;border-radius:8px;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{transform:none}
.brand-zone,.player-zone,.social-zone{z-index:3}
.brand-zone{
  position:absolute;left:4.6vw;top:10vh;width:var(--logo-w);aspect-ratio:1;
  display:grid;place-items:center;
  perspective:900px;
  animation:logoEnter .65s cubic-bezier(.2,.75,.2,1) both;
}
.logo-figure{
  position:relative;width:100%;height:100%;margin:0;display:grid;place-items:center;
  transform-style:preserve-3d;
  animation:logoAlive 6.2s 1.1s ease-in-out infinite;
}
.logo-figure::before{
  content:"";position:absolute;inset:2.6%;border-radius:50%;
  background:radial-gradient(circle,#07080a 0 69%,#111319 70% 100%);
  border:3px solid rgba(255,255,255,.88);
  box-shadow:
    0 0 0 7px var(--primary),
    0 0 28px var(--primary-glow),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
.logo-figure::after{
  content:"";position:absolute;inset:1.2%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 210deg,transparent 0 62%,rgba(255,255,255,.28) 67%,transparent 73%);
  mix-blend-mode:screen;opacity:.45;
  animation:logoSheen 5.5s linear infinite;
}
.station-logo{
  position:relative;z-index:1;width:91%;height:91%;object-fit:contain;
  filter:drop-shadow(0 9px 16px rgba(0,0,0,.52));
  transform:translateZ(24px);
  animation:logoBreath 3.4s ease-in-out 1s infinite alternate;
}
.player-zone{
  position:absolute;left:50%;top:68%;transform:translate(-50%,-50%);
  width:min(var(--player-w),calc(100vw - 420px));
  aspect-ratio:var(--player-ratio);
  min-height:150px;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--play-size) minmax(0,1fr);
  grid-template-rows:1fr auto;
  align-items:center;
  column-gap:var(--player-gap);
  padding:var(--player-pad-y) var(--player-pad-x);
  border-radius:32px;
  border:1px solid rgba(255,255,255,.20);
  background:
    linear-gradient(115deg,rgba(255,255,255,.06),transparent 28% 72%,rgba(255,255,255,.035)),
    linear-gradient(180deg,var(--panel-top),var(--panel-bottom));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.40),
    0 18px 40px rgba(0,0,0,.30);
  animation:playerEnter .66s .06s cubic-bezier(.2,.75,.2,1) both;
}
.player-zone::before{
  content:"";position:absolute;inset:1px;border-radius:31px;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.08),transparent 22% 82%,rgba(255,255,255,.04));
  opacity:.95;
}
.player-zone::after{
  content:"";position:absolute;top:0;bottom:0;width:32%;left:-42%;pointer-events:none;
  border-radius:32px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
  transform:skewX(-18deg);
  animation:playerSheen 5.8s 1.7s ease-in-out infinite;
}
.play-stop{
  position:relative;z-index:2;border:0;background:none;padding:0;
  width:100%;aspect-ratio:1;cursor:pointer;
  filter:drop-shadow(0 15px 26px rgba(0,0,0,.72));
  transition:transform .18s ease,filter .18s ease;
}
.play-stop:hover{transform:translateY(-3px) scale(1.025);filter:drop-shadow(0 18px 30px rgba(0,0,0,.78))}
.play-stop:active{transform:scale(.975)}
.play-stop:focus-visible,.social-link:focus-visible,.noesplay-link:focus-visible,#volumeRange:focus-visible{
  outline:3px solid #78b7ff;outline-offset:4px
}
.metal-ring{
  position:relative;overflow:hidden;
  width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 47% 40%,#21242b 0 50%,#07080a 52% 62%,#3a3f48 64% 67%,#0f1116 68% 73%,var(--primary) 74% 77%,var(--primary-dark) 78% 82%,#181a20 83% 100%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    inset 0 0 23px #000,
    inset 0 2px 3px rgba(255,255,255,.12),
    0 0 0 2px rgba(255,255,255,.06),
    0 0 28px var(--primary-glow),
    0 15px 28px rgba(0,0,0,.55);
}
.metal-ring::before{
  content:"";position:absolute;inset:-16%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 28%,rgba(255,255,255,.30) 34%,transparent 40% 73%,var(--primary-glow) 82%,transparent 90%);
  animation:ringSpin 5.2s linear infinite;
  opacity:.82;
}
.metal-ring::after{
  content:"";position:absolute;inset:11%;border-radius:50%;
  background:radial-gradient(circle at 38% 28%,rgba(255,255,255,.14),transparent 34%);
  pointer-events:none;
}
.player-zone.playing .metal-ring{animation:playPulse 1.6s ease-in-out infinite}
.play-shape{
  position:relative;z-index:2;
  width:0;height:0;
  border-top:calc(var(--play-size)*.20) solid transparent;
  border-bottom:calc(var(--play-size)*.20) solid transparent;
  border-left:calc(var(--play-size)*.32) solid #fff;
  margin-left:calc(var(--play-size)*.07);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.65));
}
.play-stop.is-playing .play-shape{
  width:calc(var(--play-size)*.36);height:calc(var(--play-size)*.36);
  border:0;margin:0;background:#fff;border-radius:6px;
}
.meter{
  height:var(--meter-h);display:flex;align-items:center;justify-content:center;
  gap:var(--meter-gap);min-width:0;
  filter:drop-shadow(0 0 10px var(--primary-glow));
}
.meter i{
  display:block;width:var(--meter-bar);max-width:8px;border-radius:10px;
  background:linear-gradient(180deg,#fff 0 14%,var(--primary-soft) 30%,var(--primary) 64%,var(--primary-dark) 100%);
  box-shadow:0 0 10px var(--primary-glow);
  transform-origin:center;
}
.meter i:nth-child(1),.meter i:nth-child(9){height:24%}
.meter i:nth-child(2),.meter i:nth-child(8){height:41%}
.meter i:nth-child(3),.meter i:nth-child(7){height:61%}
.meter i:nth-child(4),.meter i:nth-child(6){height:81%}
.meter i:nth-child(5){height:100%}
.player-zone.playing .meter i{animation:vu .52s ease-in-out infinite alternate}
.player-zone.playing .meter i:nth-child(2){animation-delay:.11s}
.player-zone.playing .meter i:nth-child(3){animation-delay:.22s}
.player-zone.playing .meter i:nth-child(4){animation-delay:.06s}
.player-zone.playing .meter i:nth-child(6){animation-delay:.18s}
.player-zone.playing .meter i:nth-child(7){animation-delay:.27s}
.volume-row{
  grid-column:1/-1;width:min(76%,350px);justify-self:center;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:10px;margin-top:2px;font-size:13px;font-weight:700;color:#eee;
  text-shadow:0 2px 5px rgba(0,0,0,.75);position:relative;z-index:2;
}
.speaker{width:22px;height:22px;object-fit:contain;opacity:.96}
#volumeRange{
  appearance:none;width:100%;height:7px;border-radius:99px;
  background:linear-gradient(90deg,var(--primary) 0 var(--volume-pct,70%),#70747b var(--volume-pct,70%) 100%);
  outline:none;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35)
}
#volumeRange::-webkit-slider-thumb{
  appearance:none;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(#fff,#b5b8bf);border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.58)
}
#volumeRange::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:#eee;border:2px solid #fff}
.stream-note{
  grid-column:1/-1;justify-self:center;margin-top:4px;font-size:12px;
  color:#ffd4d8;min-height:15px;position:relative;z-index:2
}
.social-zone{
  position:absolute;right:2.7vw;top:48%;transform:translateY(-50%);
  width:max-content;min-width:146px;max-width:205px;
  padding:12px 11px 9px;border:1px solid var(--primary-border);border-radius:23px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.045),transparent 30%),
    linear-gradient(180deg,var(--panel-top),var(--panel-bottom));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 34px rgba(0,0,0,.25);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  animation:socialEnter .65s .13s cubic-bezier(.2,.75,.2,1) both;
}
.social-heading{position:relative;width:100%;text-align:center;padding:0 4px 8px;color:#f5f5f6}
.social-heading::after{
  content:"";position:absolute;left:35%;right:35%;bottom:1px;height:2px;
  background:var(--primary);border-radius:4px;box-shadow:0 0 8px var(--primary-glow)
}
.social-heading h2{margin:0;font-size:13px;letter-spacing:.19em;font-weight:700}
.social-heading p{margin:4px 0 0;font-size:8px;letter-spacing:.17em;color:#cfd0d3}
.social-list{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.social-link{
  --i:0;position:relative;width:var(--social-icon);height:var(--social-icon);
  border-radius:50%;display:grid;place-items:center;text-decoration:none;
  background:linear-gradient(145deg,#343945 0,#171a21 42%,#06070a 70%,#020203 100%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:
    inset 4px 4px 8px rgba(255,255,255,.12),
    inset -5px -6px 10px rgba(0,0,0,.72),
    0 8px 13px rgba(0,0,0,.52);
  transform-style:preserve-3d;
  transition:transform .20s ease,border-color .18s ease,box-shadow .18s ease;
  animation:
    iconEnter .44s calc(.18s + var(--i)*.055s) both,
    iconFloat 2.8s calc(1.2s + var(--i)*.22s) ease-in-out infinite alternate;
}
.social-link::before{
  content:"";position:absolute;inset:5%;border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.18),transparent 38% 72%,rgba(255,255,255,.03));
  pointer-events:none
}
.social-link:hover{
  transform:translateY(-7px) perspective(180px) rotateX(12deg) rotateY(-8deg) scale(1.09);
  border-color:var(--primary);
  box-shadow:
    inset 4px 4px 8px rgba(255,255,255,.14),
    inset -5px -6px 10px rgba(0,0,0,.72),
    0 12px 19px rgba(0,0,0,.62),
    0 0 16px var(--primary-glow)
}
.social-link img{
  display:block;width:76%;height:76%;object-fit:contain;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.52));
  position:relative;z-index:1;transform:translateZ(12px);
  transform-style:preserve-3d;
  animation:iconTurn 7.2s calc(1.6s + var(--i)*.38s) ease-in-out infinite;
}
.noesplay-link{
  position:relative;overflow:hidden;
  width:100%;margin-top:1px;padding-top:5px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:center;
  transition:transform .18s ease,filter .18s ease;
  animation:
    appEnter .52s .34s both,
    appPulse 3s 1.4s ease-in-out infinite alternate;
}
.noesplay-link::after{
  content:"";position:absolute;top:5px;bottom:0;width:28%;left:-38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.48),transparent);
  transform:skewX(-18deg);
  animation:appShine 4.4s 1.8s ease-in-out infinite;
  pointer-events:none;
}
.noesplay-link:hover{
  transform:translateY(-3px) scale(1.018);
  filter:brightness(1.10) drop-shadow(0 7px 9px rgba(0,0,0,.38))
}
.noesplay-link img{
  display:block;width:142px;max-width:100%;height:auto;border-radius:10px;
  box-shadow:0 5px 12px rgba(0,0,0,.26)
}
.hidden{display:none!important}
.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
}
@keyframes vu{to{transform:scaleY(.46);opacity:.64}}
@keyframes logoEnter{from{opacity:0;transform:translateY(-12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes logoAlive{
  0%,100%{transform:rotateX(0deg) rotateY(0deg) scale(1)}
  18%{transform:rotateX(4deg) rotateY(-10deg) scale(1.025)}
  36%{transform:rotateX(-3deg) rotateY(9deg) scale(1.045)}
  52%{transform:rotateX(0deg) rotateY(0deg) scale(1.085)}
  68%{transform:rotateX(3deg) rotateY(7deg) scale(1.035)}
  84%{transform:rotateX(-3deg) rotateY(-7deg) scale(1.02)}
}
@keyframes logoBreath{
  from{transform:translateZ(20px) scale(.985);filter:drop-shadow(0 8px 14px rgba(0,0,0,.50))}
  to{transform:translateZ(42px) scale(1.035);filter:drop-shadow(0 15px 22px rgba(0,0,0,.62))}
}
@keyframes logoSheen{to{transform:rotate(360deg)}}
@keyframes playerEnter{from{opacity:0;transform:translate(-50%,calc(-50% + 16px)) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes socialEnter{from{opacity:0;transform:translateY(calc(-50% + 12px)) scale(.97)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes iconEnter{from{opacity:0;transform:translateY(8px) scale(.86)}to{opacity:1;transform:none}}
@keyframes appEnter{from{opacity:0;transform:translateY(7px) scale(.97)}to{opacity:1;transform:none}}
@keyframes playPulse{0%,100%{box-shadow:inset 0 0 23px #000,0 0 0 2px rgba(255,255,255,.06),0 0 22px var(--primary-glow),0 15px 28px rgba(0,0,0,.55)}50%{box-shadow:inset 0 0 23px #000,0 0 0 2px rgba(255,255,255,.06),0 0 38px var(--primary-glow),0 15px 28px rgba(0,0,0,.55)}}

@keyframes playerSheen{
  0%,62%{left:-42%;opacity:0}
  70%{opacity:1}
  88%{left:112%;opacity:.8}
  100%{left:112%;opacity:0}
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes iconFloat{
  from{transform:translateY(0) rotateZ(-1deg)}
  to{transform:translateY(-5px) rotateZ(1deg)}
}
@keyframes iconTurn{
  0%,68%,100%{transform:translateZ(12px) rotateY(0deg) scale(1)}
  76%{transform:translateZ(20px) rotateY(120deg) scale(1.08)}
  86%{transform:translateZ(20px) rotateY(250deg) scale(1.08)}
  94%{transform:translateZ(12px) rotateY(360deg) scale(1)}
}
@keyframes appPulse{
  from{transform:translateY(0) scale(1);filter:brightness(1)}
  to{transform:translateY(-3px) scale(1.025);filter:brightness(1.09) drop-shadow(0 7px 10px rgba(0,0,0,.34))}
}
@keyframes appShine{
  0%,60%{left:-38%;opacity:0}
  68%{opacity:1}
  88%{left:112%;opacity:.9}
  100%{left:112%;opacity:0}
}

@media(max-width:1080px){
  :root{
    --logo-w:230px;--player-w:420px;--player-ratio:2.28;--play-size:96px;
    --meter-h:68px;--meter-bar:5px;--meter-gap:4px;--player-gap:15px;
    --player-pad-y:13px;--player-pad-x:18px;--social-icon:46px;
  }
  .brand-zone{left:3.3vw;top:7vh}
  .player-zone{left:49%;top:69%;width:min(var(--player-w),calc(100vw - 250px))}
  .social-zone{right:1.8vw;top:48%;min-width:132px}
}
@media(max-width:760px){
  :root{
    --logo-w:160px;--player-w:350px;--player-ratio:2.22;--play-size:86px;
    --meter-h:58px;--meter-bar:4px;--meter-gap:3px;--player-gap:9px;
    --player-pad-y:11px;--player-pad-x:12px;--social-icon:42px;
  }
  html,body{height:100dvh;overflow:hidden}
  .shell{
    height:100dvh;min-height:100dvh;display:grid;grid-template-rows:auto auto auto;
    align-content:center;justify-items:center;gap:8px;padding:8px 8px 10px;
    background-position:center center;background-size:cover
  }
  .shell::before{background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.12))}
  .brand-zone,.player-zone,.social-zone{position:relative;left:auto;right:auto;top:auto;transform:none}
  .brand-zone{width:var(--logo-w);max-width:min(38vw,23vh);margin:0}
  .logo-figure::before{border-width:2px;box-shadow:0 0 0 4px var(--primary),0 0 18px var(--primary-glow)}
  .player-zone{
    width:min(var(--player-w),94vw);min-height:0;aspect-ratio:var(--player-ratio);
    grid-template-columns:minmax(0,1fr) var(--play-size) minmax(0,1fr);
    column-gap:var(--player-gap);padding:var(--player-pad-y) var(--player-pad-x);
    border-radius:22px;animation:mobileEnter .56s .05s both
  }
  .player-zone::before{border-radius:21px}
  .volume-row{width:100%;min-width:0;font-size:12px;gap:8px}
  .speaker{width:19px;height:19px}
  .social-zone{
    width:min(94vw,max-content);max-width:440px;min-width:0;padding:8px 10px 7px;
    border-radius:21px;gap:4px;animation:mobileEnter .56s .12s both
  }
  .social-heading{padding-bottom:7px}
  .social-heading h2{font-size:12px}
  .social-heading p{font-size:8px;margin-top:3px}
  .social-heading::after{left:42%;right:42%;height:1px}
  .social-list{flex-direction:row;justify-content:center;gap:7px;flex-wrap:wrap}
  .noesplay-link{padding-top:4px}
  .noesplay-link img{width:min(142px,43vw)}
}
@media(max-width:390px){
  :root{--logo-w:138px;--play-size:72px;--meter-h:49px;--meter-bar:3px;--meter-gap:2px;--player-gap:5px;--social-icon:38px}
  .shell{gap:6px;padding:6px}
  .brand-zone{max-width:min(35vw,20vh)}
  .player-zone{width:95vw}
  .social-zone{padding:7px 9px 6px}
  .social-heading{display:none}
  .noesplay-link img{width:min(130px,42vw)}
}
@media(max-height:650px) and (max-width:760px){
  :root{--logo-w:118px;--play-size:68px;--social-icon:36px}
  .shell{gap:5px}
  .social-heading{display:none}
}
@keyframes mobileEnter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .player-zone.playing .meter i,.player-zone.playing .metal-ring,.logo-figure,.station-logo,.social-link,.social-link img,.noesplay-link,.noesplay-link::after,.player-zone::after,.metal-ring::before{animation:none!important}
}