:root { color-scheme: dark; --radio-black: #000; --radio-graphite: #111315; --radio-ink: #fff; --radio-muted: #c7cccf; --radio-cyan: #38e8f6; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { min-width: 0; background: var(--radio-black); color: var(--radio-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
.radio-player { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; overflow: clip; padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); }
.radio-resolved-skin { position: absolute; inset: 0; z-index: 1; }
.radio-legacy-skin { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; background: var(--radio-black); }
.radio-player.is-skin-pending .radio-legacy-skin { visibility: hidden; opacity: 0; }
.radio-player__content { position: relative; z-index: 2; }
.radio-player.is-scheduled-skin .radio-legacy-skin { display: none; }
.radio-player.is-scheduled-skin { padding: 0; }
.radio-player.is-scheduled-skin .radio-player__content { display: none; }
.radio-program-title { display: grid; justify-items: center; gap: clamp(2px, .45cqh, 6px); max-width: 100%; text-align: center; text-shadow: 0 2px 10px rgba(0,0,0,.72); }
.radio-program-title__line { max-width: 100%; font-size: clamp(28px, 7.2cqw, 66px); font-weight: 900; font-style: italic; letter-spacing: -.045em; line-height: .88; overflow-wrap: anywhere; text-transform: uppercase; }
.radio-program-title__line--primary { color: #fff; }
.radio-program-title__line--accent { color: #7deefa; }
.radio-program-title__line--accent::after { content: ''; display: block; width: clamp(28px, 11cqw, 90px); height: 2px; margin: clamp(6px, 1.1cqh, 12px) auto 0; background: currentColor; }
.radio-program-title__listen { margin-top: clamp(8px, 1.6cqh, 18px); color: rgba(255,255,255,.9); font-size: clamp(10px, 2.5cqw, 24px); font-weight: 800; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; }
.radio-player__content { width: min(100%, 43rem); display: grid; justify-items: center; align-content: center; gap: clamp(1.25rem, 4.5vh, 3rem); }
.radio-logo { display: block; width: clamp(10.5rem, min(48vw, 44vh), 23rem); max-width: 100%; height: auto; object-fit: contain; }
.radio-title { margin: 0; color: var(--radio-muted); font-size: clamp(.7rem, 1.5vw, .9rem); font-weight: 750; letter-spacing: .22em; line-height: 1.2; text-align: center; text-transform: uppercase; }
.radio-controls { display: flex; align-items: center; justify-content: center; gap: clamp(.9rem, 4vw, 1.75rem); }
.radio-control { width: clamp(3.25rem, 11vw, 4.25rem); height: clamp(3.25rem, 11vw, 4.25rem); display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: var(--radio-graphite); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .3); color: var(--radio-ink); cursor: pointer; text-decoration: none; transition: border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease; }
.radio-control--primary { width: clamp(4.2rem, 14vw, 5.5rem); height: clamp(4.2rem, 14vw, 5.5rem); border-color: rgba(56, 232, 246, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1.25rem rgba(56, 232, 246, .13); }
.radio-control img { width: 42%; height: 42%; object-fit: contain; filter: brightness(0) invert(1); }
.radio-control__icon--pause, .radio-control__icon--muted { display: none; }
.radio-control.is-playing .radio-control__icon--play, .radio-control.is-muted .radio-control__icon--sound { display: none; }
.radio-control.is-playing .radio-control__icon--pause, .radio-control.is-muted .radio-control__icon--muted { display: block; }
.radio-control.is-playing, .radio-control.is-muted { color: var(--radio-cyan); border-color: var(--radio-cyan); }
.radio-control.is-playing img, .radio-control.is-muted img { filter: brightness(0) saturate(100%) invert(86%) sepia(39%) saturate(786%) hue-rotate(139deg) brightness(102%) contrast(94%); }
.radio-control:hover { border-color: var(--radio-cyan); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 1.25rem rgba(56, 232, 246, .22); }
.radio-control:active { transform: scale(.96); }
.radio-control:focus-visible { outline: 3px solid var(--radio-ink); outline-offset: 5px; border-color: var(--radio-cyan); box-shadow: 0 0 0 4px rgba(56, 232, 246, .42), 0 0 1.5rem rgba(56, 232, 246, .3); }
.radio-status { min-height: 1.2em; margin: calc(clamp(1.25rem, 4.5vh, 3rem) * -.25) 0 0; color: var(--radio-muted); font-size: .75rem; line-height: 1.2; text-align: center; }
@media (max-height: 28rem) { .radio-player__content { gap: clamp(.65rem, 3vh, 1.25rem); } .radio-logo { width: clamp(8.5rem, min(31vw, 38vh), 13rem); } .radio-status { display: none; } }
@media (prefers-reduced-motion: reduce) { .radio-control { transition: none; } }