:root{color-scheme:dark;--accent:#e71932;--station-accent:#d7b25c;--text:#fff;--muted:#aba6a7;--line:rgba(255,255,255,.17);--volume:80%}
*{box-sizing:border-box}html{height:100%}body{margin:0;min-height:100%;padding:24px;display:grid;place-items:center;background:#09090b;color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--station-accent)}button{font:inherit}button:disabled{opacity:.5;cursor:wait}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}
.player{isolation:isolate;position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:22px;width:100%;max-width:1440px;height:clamp(360px,43vw,550px);padding:30px;border:1px solid #494041;border-radius:22px;overflow:hidden;background:#080608;box-shadow:0 20px 65px #0006,inset 0 1px 0 #ffffff12}
.hero-bg{position:absolute;inset:0;z-index:-2;background:url('/assets/radio-studio-v1.webp') center right/cover no-repeat}.player:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,4,6,.78),rgba(5,4,6,.4) 48%,rgba(5,4,6,.05) 80%),linear-gradient(0deg,#070506 4%,transparent 60%)}
.hero{display:flex;align-items:center;gap:28px;min-height:0;padding-right:98px}.logo{flex:0 0 auto;width:clamp(112px,17vw,230px);aspect-ratio:1;border:2px solid var(--accent);border-radius:22px;padding:4px;display:grid;place-items:center;overflow:hidden;font-size:48px;font-weight:900;background:#11090a;box-shadow:0 0 0 5px #e7193219,0 0 25px #e7193266,inset 0 0 14px #e7193266}.logo img{width:100%;height:100%;object-fit:cover;border-radius:16px}.station-copy{min-width:0;align-self:center}.live{width:max-content;max-width:100%;display:flex;align-items:center;gap:8px;border:1px solid #ffffff2a;border-radius:12px;padding:8px 13px;background:#292326;color:#c5c0c1;font-size:11px;font-weight:850;letter-spacing:.08em;white-space:nowrap}.live svg{width:16px;height:16px}.live.on{background:linear-gradient(135deg,#f02038,#b7081d);border-color:#fc526360;color:#fff;box-shadow:0 5px 20px #c9173145}.name{font-size:clamp(24px,3.9vw,54px);line-height:1.08;letter-spacing:-.035em;font-weight:900;margin:15px 0 10px;max-width:760px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 12px #0008}.description{font-size:clamp(12px,1.7vw,19px);margin:0;color:#bfbabd;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:530px}.tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:20px}.tags span{border:1px solid #ffffff38;border-radius:30px;padding:6px 13px;background:#05040566;font-size:11px;color:#ede8e9;letter-spacing:.04em}.utilities{position:absolute;right:25px;top:25px;display:flex;gap:9px}.icon-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid #ffffff38;border-radius:11px;background:#080608aa;color:#fff;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}.icon-button:hover{background:#36202a;border-color:#ffffff6b}.icon-button svg{width:18px;height:18px}
.toolbar{display:flex;align-items:center;gap:18px;min-width:0}.play{width:64px;height:64px;flex:0 0 auto;display:grid;place-items:center;border:1px solid #ff536566;border-radius:50%;background:linear-gradient(145deg,#f4263e,#bd001e);color:#fff;cursor:pointer;box-shadow:0 0 0 5px #e719321a,0 6px 23px #d310303b;transition:transform .15s,box-shadow .15s}.play:hover:not(:disabled){transform:scale(1.045);box-shadow:0 0 0 6px #e7193228,0 6px 28px #d3103055}.play svg{width:27px;height:27px;fill:currentColor;stroke:none}.play .pause-icon{display:none}.player[data-state="playing"] .play .play-icon{display:none}.player[data-state="playing"] .play .pause-icon{display:block}.player[data-state="loading"] .play{animation:loading 1.2s ease-in-out infinite}.play-copy{display:none;min-width:0}.play-caption{font-size:10px;font-weight:850;letter-spacing:.08em}.status-text{display:block;font-size:10px;line-height:1.35;color:#b8b0b3;max-width:220px;margin-top:5px}.volume-control{display:flex;align-items:center;gap:10px;min-width:0}.mute{border:0;background:transparent;color:#fff;width:30px;height:32px;padding:3px;display:grid;place-items:center;cursor:pointer}.muted-icon{display:none}.mute[aria-pressed="true"] .volume-icon{display:none}.mute[aria-pressed="true"] .muted-icon{display:block}.volume{appearance:none;-webkit-appearance:none;width:clamp(90px,16vw,200px);height:5px;margin:0;border-radius:10px;background:linear-gradient(90deg,var(--accent) var(--volume),#ffffff28 var(--volume));cursor:pointer}.volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 8px #0008}.volume::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#fff}.quality{margin-left:auto;display:flex;align-items:center;gap:14px;white-space:nowrap;border:1px solid #ffffff19;background:#070608c9;border-radius:12px;padding:12px 17px;color:#c9c4c7;font-size:12px}.quality span+span{border-left:1px solid #ffffff38;padding-left:14px}.quality .signal{display:flex;align-items:flex-end;gap:3px;height:15px}.signal i{background:#e4dfe1;width:4px;border-radius:1px;height:8px}.signal i:nth-child(2){height:12px}.signal i:nth-child(3){height:15px}.quality .live-label{color:#fc2c46;font-weight:900;letter-spacing:.04em}
.now-playing{position:relative;display:flex;align-items:center;gap:17px;padding:16px 18px;min-width:0;background:linear-gradient(115deg,#191215de,#0e0b0de6);border:1px solid #ffffff25;border-radius:16px;overflow:hidden;box-shadow:inset 0 1px 0 #ffffff09}.artwork{width:65px;height:65px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;overflow:hidden;background:#2a171e;color:#d7b25c}.artwork img{width:100%;height:100%;object-fit:cover}.equalizer{height:27px;width:25px;flex:0 0 auto;display:flex;align-items:flex-end;gap:4px}.equalizer i{width:5px;border-radius:2px;background:linear-gradient(#e32940,#ad0e27);height:9px;transform-origin:bottom}.equalizer i:nth-child(2){height:25px}.equalizer i:nth-child(3){height:17px}.player[data-state="playing"] .equalizer i{animation:equalize .8s ease-in-out infinite alternate}.player[data-state="playing"] .equalizer i:nth-child(2){animation-delay:-.3s}.player[data-state="playing"] .equalizer i:nth-child(3){animation-delay:-.6s}.track-info{min-width:0;flex:1}.track-eyebrow{font-size:10px;font-weight:850;letter-spacing:.12em;color:#ff354e;margin-bottom:7px}.artist{font-size:clamp(13px,1.7vw,20px);font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track{margin-top:5px;color:#c1bcc0;font-size:clamp(12px,1.55vw,18px);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duration{font-variant-numeric:tabular-nums;font-size:13px;font-weight:750;color:#b9b2b7;flex:0 0 auto}.track-progress{position:absolute;left:0;bottom:0;width:100%;height:2px;border:0;appearance:none;background:#ffffff0c}.track-progress::-webkit-progress-bar{background:#ffffff0c}.track-progress::-webkit-progress-value{background:var(--accent)}.track-progress::-moz-progress-bar{background:var(--accent)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body[data-embedded="true"]{padding:0;display:block;background:transparent;height:100%;min-height:0}body[data-embedded="true"] .player{height:100vh;max-width:none;border-radius:16px;box-shadow:none}
body[data-theme="light"]{color-scheme:light;--text:#22171c;--muted:#72616b}body[data-theme="light"] .player{background:#f5eeee;border-color:#dfcbd2}body[data-theme="light"] .player:before{background:linear-gradient(90deg,#fbf6f9f2,#fbf6f9d9 54%,#fbf6f955),linear-gradient(0deg,#f4edf3,transparent)}body[data-theme="light"] .description,body[data-theme="light"] .track{color:#6b5b66}body[data-theme="light"] .tags span,body[data-theme="light"] .quality,body[data-theme="light"] .icon-button{background:#fff9;color:#483640;border-color:#c2aab5}body[data-theme="light"] .now-playing{background:#fffddd;border-color:#dfcbd2}body[data-theme="light"] .mute{color:#483640}body[data-theme="light"] .status-text,body[data-theme="light"] .duration{color:#72616b}body[data-theme="light"] .volume{background:linear-gradient(90deg,var(--accent) var(--volume),#a98d9b55 var(--volume))}body[data-theme="light"] .signal i{background:#7c596b}
@media(max-width:700px){body{padding:14px}.player{height:365px;padding:20px;gap:18px}.hero{gap:18px;padding-right:0;align-items:flex-start;padding-top:7px}.logo{width:96px;border-radius:17px}.logo img{border-radius:12px}.name{font-size:26px;margin-top:12px}.description{font-size:12px;padding-right:12px}.live{font-size:9px;padding:6px 9px;border-radius:8px}.live svg{width:13px;height:13px}.utilities{top:auto;bottom:126px;right:20px}.tags{gap:5px;margin-top:12px}.tags span{padding:5px 9px;font-size:8px}.quality{font-size:9px;gap:8px;padding:10px}.quality span+span{padding-left:8px}.quality .signal{display:none}.volume{width:75px}.play{width:52px;height:52px}.toolbar{gap:13px}.now-playing{gap:11px;padding:13px}.artwork{width:48px;height:48px}.equalizer{width:18px;gap:3px;height:21px}.equalizer i{width:4px}.artist{font-size:13px}.track{font-size:12px}.duration{font-size:11px}.track-eyebrow{font-size:8px}.hero-bg{background-position:65% center}}
@media(max-height:240px){body{padding:0;display:block;background:transparent;height:100%;min-height:0}.player,body[data-embedded="true"] .player{height:100vh;padding:12px 16px;gap:10px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) 55px;border-radius:14px}.hero{padding:0;gap:13px;align-items:center}.logo{width:66px;border-radius:12px;padding:2px;box-shadow:0 0 15px #e7193244}.logo img{border-radius:8px}.live{font-size:8px;padding:4px 7px;border-radius:5px;gap:5px}.live svg{width:11px;height:11px}.name{font-size:21px;margin:7px 0 4px;max-width:100%}.description{font-size:10px;-webkit-line-clamp:1}.tags{margin-top:8px;gap:5px}.tags span{font-size:7px;padding:3px 7px}.utilities{right:14px;top:10px;bottom:auto;gap:6px}.icon-button{width:25px;height:25px;border-radius:7px}.icon-button svg{width:13px;height:13px}.toolbar{grid-column:2;grid-row:1;align-self:end;gap:12px;padding-bottom:4px}.play{width:42px;height:42px}.play svg{width:19px;height:19px}.volume-control{gap:6px}.mute{width:22px;height:26px}.mute svg{width:18px;height:18px}.volume{width:70px;height:4px}.volume::-webkit-slider-thumb{width:11px;height:11px}.volume::-moz-range-thumb{width:11px;height:11px}.quality{display:none}.now-playing{grid-column:1/-1;padding:8px 11px;gap:11px;border-radius:10px}.artwork{width:36px;height:36px;border-radius:6px}.track-eyebrow{font-size:7px;margin-bottom:3px}.artist{font-size:11px}.track{font-size:10px;margin-top:2px}.duration{font-size:10px}.equalizer{height:21px;width:18px;gap:3px}.equalizer i{width:4px}.status-text{position:absolute;right:18px;top:40px;font-size:8px;max-width:150px}.play-copy{display:block}.play-caption{display:none}}
@media(max-width:430px) and (min-height:241px){.player{padding:15px}.hero{gap:13px}.logo{width:80px}.name{font-size:22px}.tags span{font-size:7px;padding:4px 6px}.quality{display:none}.duration{display:none}.utilities{right:16px}.now-playing{gap:10px}.equalizer{display:none}}
@media(max-width:520px) and (max-height:240px){.player,body[data-embedded="true"] .player{padding:11px;gap:10px;grid-template-rows:minmax(0,1fr) 51px}.hero{gap:10px;padding-right:40px}.logo{width:58px;border-radius:11px}.name{font-size:17px;margin-top:6px}.description{font-size:9px}.tags{display:none}.utilities{top:8px;right:9px;gap:5px}.icon-button{width:23px;height:23px}.toolbar{gap:0;align-self:end;padding-bottom:7px}.volume-control{display:none}.status-text{display:none}.play{width:36px;height:36px}.now-playing{gap:9px;padding:7px 9px}.artwork{width:34px;height:34px}.equalizer{display:none}.duration{font-size:9px}.artist{font-size:10px}.track{font-size:10px}.hero-bg{background-position:68% center}}
@media(max-height:125px){.player,body[data-embedded="true"] .player{padding:10px 13px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr;gap:12px}.hero{padding-right:0}.logo{width:54px}.live{font-size:7px}.live svg{display:none}.name{font-size:15px;margin:5px 0}.description,.tags,.utilities{display:none}.toolbar{align-self:center;padding:0}.now-playing{grid-column:1;grid-row:1;margin-left:68px;align-self:end;padding:0 0 2px;border:0;background:none;box-shadow:none;pointer-events:none;overflow:hidden;height:17px}.artwork,.equalizer,.track-eyebrow,.duration,.track-progress{display:none}.track-info{display:flex;align-items:baseline;gap:5px}.artist,.track{font-size:9px;margin:0;line-height:1.3}.artist{flex:0 1 auto;color:#d7b25c}.track{flex:1}.hero .station-copy{align-self:flex-start;padding-top:1px;padding-bottom:17px}.play{width:38px;height:38px}.status-text{display:none}}
body[data-style="mini"] .description,body[data-style="mini"] .tags,body[data-style="mini"] .utilities,body[data-style="mini"] .volume-control{display:none}
@keyframes equalize{to{transform:scaleY(.35)}}@keyframes loading{50%{opacity:.6}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
#statusText:empty{display:none}#statusText:not(:empty){display:block;position:absolute;left:50%;right:auto;top:50%;bottom:auto;z-index:3;transform:translate(-50%,-50%);max-width:85%;width:max-content;margin:0;padding:8px 12px;border:1px solid #ff354e55;border-radius:8px;background:#170b10f2;color:#fff;font-size:11px;line-height:1.4;text-align:center;box-shadow:0 3px 20px #0005}
.play-copy{display:none!important}