:root{--bg:#07060f;--cy:#00f0ff;--mg:#ff2bd6;--ye:#fcee0a;--tx:#d8f8ff}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--tx);font-family:Rajdhani,system-ui,sans-serif;font-weight:500;
  overflow-x:hidden;display:grid;place-items:center;
  padding:max(18px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));
}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.55}
body::before{ /* linie skanowania */
  content:"";position:fixed;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#0006 2px 3px); /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
}
body::after{ /* winieta + poświata */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,#0000 30%,#07060fee 95%), /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
             linear-gradient(115deg,#ff2bd61f,#0000 40%,#00f0ff1f); /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
}
.hud{
  position:relative;z-index:2;width:min(880px,100%);padding:clamp(18px,3.4vw,36px);
  background:linear-gradient(160deg,#0d0b1fee,#08071aee); /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
  clip-path:polygon(0 0,calc(100% - 38px) 0,100% 38px,100% 100%,38px 100%,0 calc(100% - 38px));
  display:grid;gap:clamp(16px,2.6vw,26px);
}
.hud::before{ /* neonowa ramka */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,var(--cy),var(--mg)); /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
  clip-path:polygon(0 0,calc(100% - 38px) 0,100% 38px,100% 100%,38px 100%,0 calc(100% - 38px),0 0,2px 2px,2px calc(100% - 39px),39px calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 39px,calc(100% - 39px) 2px,2px 2px);
  filter:drop-shadow(0 0 8px var(--cy)); /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
}
.bar{display:flex;justify-content:space-between;gap:10px;font-size:.95rem;letter-spacing:.12em;color:var(--cy)}
.bar b{color:var(--ye);font-weight:700}
.sig{display:inline-flex;gap:3px;align-items:flex-end;height:16px;margin-right:8px;vertical-align:middle}
.sig i{width:4px;background:#2a2a40;transition:background .3s}
.sig i:nth-child(1){height:5px}.sig i:nth-child(2){height:9px}.sig i:nth-child(3){height:13px}.sig i:nth-child(4){height:16px}
.live .sig i{background:var(--cy);box-shadow:0 0 6px var(--cy)} /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */

h1{
  position:relative;font-family:Orbitron,sans-serif;font-weight:900;line-height:1;letter-spacing:.02em;
  font-size:clamp(2.2rem,9.5vw,5.6rem);color:var(--tx);text-shadow:0 0 18px #00f0ff88; /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
}
h1 .glitch-copy{position:absolute;inset:0;overflow:hidden}
h1 .glitch-magenta{color:var(--mg);transform:translate(3px,0);text-shadow:none;mix-blend-mode:screen;animation:g1 3.2s infinite steps(1)} /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
h1 .glitch-cyan{color:var(--cy);transform:translate(-3px,0);text-shadow:none;mix-blend-mode:screen;animation:g2 3.2s infinite steps(1)} /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
@keyframes g1{0%,86%,100%{clip-path:inset(0 0 100% 0)}87%{clip-path:inset(10% 0 60% 0);transform:translate(8px,0)}90%{clip-path:inset(55% 0 20% 0);transform:translate(-6px,0)}93%{clip-path:inset(0 0 100% 0)}}
@keyframes g2{0%,88%,100%{clip-path:inset(0 0 100% 0)}89%{clip-path:inset(60% 0 10% 0);transform:translate(-8px,0)}92%{clip-path:inset(20% 0 55% 0);transform:translate(6px,0)}95%{clip-path:inset(0 0 100% 0)}}
.tag{color:var(--mg);font-size:1.05rem;letter-spacing:.2em}

.scope{position:relative;height:clamp(110px,18vw,160px);background:#04030c;border:1px solid #00f0ff55;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
#spectrum{position:absolute;inset:0;width:100%;height:100%}
.scope span{position:absolute;left:10px;top:6px;font-size:.8rem;letter-spacing:.16em;color:#00f0ffaa}

.row{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,32px);align-items:center}
.play{
  width:clamp(96px,16vw,128px);aspect-ratio:1;border:0;cursor:pointer;color:#07060f;
  background:var(--ye);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  display:grid;place-items:center;transition:background .2s,transform .15s;
  filter:drop-shadow(0 0 12px #fcee0acc); /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
}
.play:hover{background:var(--cy)}.play:active{transform:scale(.94)}
.play svg{width:38%;fill:currentColor}.p2{display:none}.playing .p2{display:block}.playing .p1{display:none}
.playing .play{background:var(--mg);color:#fff}
.play:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--ye);outline-offset:4px}

.vol{display:grid;gap:10px}
.vol label{display:flex;justify-content:space-between;letter-spacing:.16em;color:var(--cy);font-size:1rem}
.vol label b{color:var(--ye)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:22px;
  background:repeating-linear-gradient(90deg,var(--cy) 0 8px,#0000 8px 12px); /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
  -webkit-mask:linear-gradient(90deg,#000 var(--v,80%),#0004 var(--v,80%));mask:linear-gradient(90deg,#000 var(--v,80%),#0004 var(--v,80%))} /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
input[type=range]::-moz-range-track{height:22px;background:repeating-linear-gradient(90deg,var(--cy) 0 8px,#0000 8px 12px); /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
  mask:linear-gradient(90deg,#000 var(--v,80%),#0004 var(--v,80%))} /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:30px;margin-top:-4px;background:var(--ye);box-shadow:0 0 10px var(--ye)} /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */
input[type=range]::-moz-range-thumb{width:6px;height:30px;border:0;border-radius:0;background:var(--ye);box-shadow:0 0 10px var(--ye)} /* taste-skill-ignore: explicit user-supplied cyberpunk gradients and neon lighting. */

.log{font-size:1rem;color:#9bd8e6;min-height:1.4em;letter-spacing:.05em}
.log::before{content:"> ";color:var(--mg)}
.foot{display:flex;justify-content:space-between;font-size:.85rem;letter-spacing:.1em;color:#6f7fa8}
.foot a{color:var(--cy)}
@media (max-width:560px){.row{grid-template-columns:1fr;justify-items:center}.vol{width:100%}}
@media (prefers-reduced-motion:reduce){h1 .glitch-copy{animation:none}}


/* Adaptations for the live receiver: current track, real LED spectrum, touch controls. */
html{min-height:100%;height:auto}body{min-height:100svh;height:auto;padding:clamp(18px,5vh,48px) 14px;isolation:isolate}
.hud{gap:22px}.bar{align-items:center;flex-wrap:wrap;font-size:16px;line-height:1.3}.broadcast{display:inline-flex;align-items:center;gap:8px}.sig{margin:0}
.bar b{white-space:nowrap;font-size:15px}h1{font-size:clamp(30px,8.5vw,82px);white-space:nowrap;margin:0}h1>span:first-child{position:relative}
.tag{margin-top:12px;font-size:17px;letter-spacing:.11em}.now-playing{min-width:0;min-height:76px}.track-label{font-size:14px;color:#97cdd8;letter-spacing:.1em;margin:0 0 5px}
#track{font:700 clamp(21px,3vw,28px)/1.18 Rajdhani,sans-serif;color:#e5faff;overflow-wrap:anywhere;margin:0}#artist{font-size:16px;line-height:1.3;color:#a6cad5;margin-top:5px}
.scope{height:176px;min-width:0;padding:31px 10px 26px}.scope-label{position:absolute;left:12px;right:12px;top:9px;display:flex;justify-content:space-between;gap:8px}
.scope .scope-label span{position:static;font-size:13px;letter-spacing:.08em;color:#a8e4ee}.scope .scope-label span:last-child{text-align:right;color:#75b6c4;font-size:12px}
#spectrum{position:static;width:100%;height:100%;display:block}.frequency-axis{position:absolute;left:13px;right:13px;bottom:8px;display:flex;justify-content:space-between;color:#8db6c8;font-size:12px}
.row{grid-template-columns:auto minmax(0,1fr)}.play-control{display:grid;justify-items:center;gap:9px}.play{min-width:96px;min-height:96px}.play:disabled{cursor:wait;opacity:.7}
#listen-label{font-size:15px;letter-spacing:.1em;color:#c7eff5}.vol{min-width:0;gap:8px}.vol label{font-size:17px;letter-spacing:.08em}.stream-format{color:#96bbce;font-size:14px;letter-spacing:.05em}
input[type=range]{height:44px}.log{font-size:18px;line-height:1.35;color:#c0e6ed;letter-spacing:.015em}.foot{align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;letter-spacing:.025em;color:#94b3ca}.foot a{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:#8ff4ff;text-underline-offset:4px}
@media(max-width:500px){body{padding:20px 12px}.hud{padding:24px 20px;gap:20px}.bar{font-size:14px}.bar b{font-size:13px}.tag{font-size:15px;letter-spacing:.05em}.scope{height:150px}.scope .scope-label span{font-size:12px}.scope .scope-label span:last-child{max-width:130px;font-size:11px}.row{gap:20px}.foot{font-size:14px}.log{font-size:17px}.vol label{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#rain{display:none}.glitch-copy{display:none}}