:root{--bg:#000;--fg:#d8dedf;--mute:#80868a;--line:#2a2d2e;--gutter:clamp(16px,5vw,32px)}
*{box-sizing:border-box;margin:0;padding:0;font:inherit}
html{background:var(--bg);color:var(--fg);font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%}
body{min-height:100svh}
:focus-visible{outline:2px solid var(--fg);outline-offset:4px}

.stage{min-height:100svh;display:grid;place-items:center;padding:max(var(--gutter),env(safe-area-inset-top)) var(--gutter) max(var(--gutter),env(safe-area-inset-bottom))}
.player{width:min(100%,420px);display:grid;gap:20px}
.logo{display:block;height:22px;width:auto;filter:invert(1)} /* файл чёрный на прозрачном: инвертируется в белый на чёрном фоне */
.row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}

.play{display:grid;place-items:center;width:64px;aspect-ratio:1;background:#fff;color:#000;border:1px solid #fff;border-radius:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.play:hover:not(:disabled){background:var(--fg);border-color:var(--fg)}
.play:active:not(:disabled){background:#b9bec0;border-color:#b9bec0}
.play:disabled{background:transparent;color:var(--mute);border-color:var(--line);cursor:default}
.play svg{width:34%;height:auto;fill:currentColor}
.play .i-pause{display:none}
.play[aria-pressed="true"] .i-play{display:none}
.play[aria-pressed="true"] .i-pause{display:block}

.info{min-width:0}
.title{font-size:15px;line-height:1.25;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.status{margin-top:6px;min-height:1.4em;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.status.err{color:var(--fg);text-decoration:underline;text-underline-offset:4px}

/* «в эфире»: красная точка мигает, пока играет звук */
.dot{display:none;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#ff3b30;vertical-align:1px;animation:onair 1.6s ease-in-out infinite}
.player.live .dot{display:inline-block}
@keyframes onair{0%,100%{opacity:1}50%{opacity:.15}}

/* громкость: тонкая линия, квадратный бегунок */
.vol{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;color:var(--mute);cursor:pointer}
.vol[hidden]{display:none}
.vol-i{width:16px;height:16px;fill:currentColor}
.vol-w{fill:none;stroke:currentColor;stroke-width:1.6}
.vol:hover{color:var(--fg)}
.vol input{--v:80%;-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:transparent;cursor:pointer}
.vol input::-webkit-slider-runnable-track{height:1px;background:linear-gradient(to right,var(--fg) var(--v),var(--line) var(--v))}
.vol input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;margin-top:-4.5px;background:#fff;border:0;border-radius:0}
.vol input::-moz-range-track{height:1px;background:var(--line)}
.vol input::-moz-range-progress{height:1px;background:var(--fg)}
.vol input::-moz-range-thumb{width:10px;height:10px;background:#fff;border:0;border-radius:0}
.vol input:focus-visible{outline:none}
.vol input:focus-visible::-webkit-slider-thumb{outline:2px solid var(--fg);outline-offset:3px}
.vol input:focus-visible::-moz-range-thumb{outline:2px solid var(--fg);outline-offset:3px}

/* виджет SoundCloud должен быть в документе (иначе браузер может заблокировать звук), но не виден */
.sc{position:fixed;left:-9999px;top:0;width:300px;height:166px;border:0;opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.dot{animation:none}}