@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;--bg:#151614;--panel:#1d1e1b;--yellow:#ffe500;--text:#f4f4ec;--muted:#999c92;--border:#343630;--font:'DM Sans',Arial,sans-serif;--display:'Space Grotesk',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}a{color:inherit;text-underline-offset:5px}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.icon{width:24px;height:24px;flex-shrink:0}.shell{width:min(1180px,calc(100% - 112px));min-height:100svh;margin:0 auto;display:flex;flex-direction:column}.header{min-height:125px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:24px}.brand{display:flex;gap:17px;align-items:center}.brand-mark{font-family:Arial,sans-serif;font-size:46px;line-height:1;font-weight:900;letter-spacing:-4px;color:var(--yellow);padding-right:4px}.brand-label{font-size:12px;font-weight:650;letter-spacing:2px;line-height:1.55;border-left:1px solid #53564b;padding-left:18px}.brand-label>span{color:var(--muted)}.header-note{display:flex;align-items:center;gap:12px;color:#b7b9b0;font-size:14px}.header-note .icon{width:20px;height:20px}main{width:100%;padding:63px 0 60px;margin:auto 0}.section-label{display:flex;justify-content:space-between;gap:24px;font-size:12px;font-weight:600;letter-spacing:1.8px;color:var(--muted);margin-bottom:19px}.player{display:grid;grid-template-columns:1fr 1.03fr;gap:0;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:var(--panel);box-shadow:0 26px 65px #00000016}.station-art{min-height:500px;padding:36px 36px 28px;background:var(--yellow);color:#151614;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.art-top,.art-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--display);font-weight:700}.art-top{font-size:15px;letter-spacing:2px}.art-top .icon{width:28px;height:28px}.station-wordmark{font-family:Arial,Helvetica,sans-serif;font-size:clamp(140px,20vw,260px);font-weight:900;line-height:1.15;letter-spacing:-.085em;text-align:center;padding:0 .085em .04em 0;transform:translateX(-.01em)}.art-bottom{font-size:12px;letter-spacing:.2px}.art-bottom span:last-child{border:1.5px solid currentColor;padding:0px 5px;letter-spacing:1px;font-size:14px}.player-controls{padding:37px 44px 31px;min-width:0;display:flex;flex-direction:column}.player-top{display:flex;justify-content:space-between;align-items:center;gap:16px}.channel-label{font-size:12px;color:#bbbdaf;letter-spacing:1.65px;font-weight:650}.live-badge{display:inline-flex;align-items:center;gap:5px;color:var(--yellow);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:1px}.live-badge .icon{width:19px;height:19px}h1{font-family:var(--display);font-size:clamp(38px,4.3vw,56px);font-weight:600;line-height:1.14;letter-spacing:-2px;margin:37px 0 9px}.title-dot{color:var(--yellow)}.station-description{font-size:16px;margin:0;color:#b0b3a6}.signal{height:69px;margin-top:26px;display:flex;align-items:center;overflow:hidden;flex-shrink:0}.signal-bars{width:100%;height:54px;display:flex;align-items:center;justify-content:space-between;gap:4px}.signal-bars span{flex:1;max-width:5px;min-width:2px;height:var(--height);background:#646644;border-radius:3px;opacity:.75;transform:scaleY(.5);transition:background .4s}.playback-info{display:flex;gap:8px;align-items:center;font-size:14px;color:#b3b6aa;min-height:32px;margin-bottom:24px}.state-indicator{width:6px;height:6px;border-radius:100%;background:#878b7d;flex-shrink:0}.quality{font-size:12px;margin-left:auto;color:#909486;white-space:nowrap;font-variant-numeric:tabular-nums}.play-button{border:0;border-radius:12px;min-height:62px;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;color:#161710;background:var(--yellow);font-size:16px;font-weight:700;transition:background .2s,transform .15s}.play-button:hover{background:#fff045}.play-button:active{transform:scale(.985)}.play-button .icon{width:25px;height:25px}.spinner{display:none;width:22px;height:22px;border:2px solid #15161440;border-top-color:#151614;border-radius:50%;animation:spin .8s linear infinite}.volume-row{display:flex;align-items:center;gap:15px;margin-top:18px;min-height:40px}.mute-button{display:grid;place-items:center;width:40px;height:40px;margin-left:-8px;background:transparent;color:#b9bcaf;border:0;border-radius:8px}.mute-button:hover{color:var(--text);background:#ffffff0a}.mute-button .icon{width:22px;height:22px}input[type=range]{--volume:70%;min-width:0;flex:1;width:100%;height:24px;appearance:none;-webkit-appearance:none;cursor:pointer;background:transparent;margin:0}input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,var(--yellow) 0 var(--volume),#484b3f var(--volume) 100%);border-radius:4px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text);margin-top:-4px;box-shadow:0 0 0 4px transparent}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #ffffff10}input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#484b3f}input[type=range]::-moz-range-progress{height:4px;background:var(--yellow)}input[type=range]::-moz-range-thumb{border:0;width:12px;height:12px;border-radius:50%;background:var(--text)}#volume-value{min-width:42px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums;color:#d3d6c7}#volume-value span{color:var(--muted);font-size:12px;padding-left:2px}.under-player{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;font-size:12px;color:var(--muted)}.connection-note{display:flex;align-items:center;gap:9px}.connection-note .icon{width:18px;height:18px}.keyboard-hint{display:flex;align-items:center;gap:8px}kbd{font-family:var(--font);font-size:12px;line-height:1.5;min-width:21px;text-align:center;border:1px solid #42463a;border-radius:4px;padding:1px 6px;background:#1d1f19;color:#b6b9ac}.hint-divider{width:1px;height:12px;background:var(--border);margin:0 6px}.footer{min-height:90px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:12px;color:#989d8c}.footer>span{font-family:var(--display);font-size:14px;color:#c6c9bd}.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:15px}.footer-links a{text-decoration:none;color:#bcc1b1}.footer-links a:hover{color:var(--yellow);text-decoration:underline}.footer-divider{color:#555b4a}.error-message{margin:12px 0 0;font-size:14px;line-height:1.55;color:#ffbcad}.mobile-volume-hint{font-size:12px;color:var(--muted);margin:8px 0}.noscript{padding:24px;color:var(--yellow)}.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}[hidden]{display:none!important}
body[data-state=playing] .signal-bars span{background:var(--yellow);animation:signal var(--speed) ease-in-out infinite alternate;animation-delay:var(--delay);opacity:.9}body[data-state=playing] .state-indicator{background:var(--yellow)}body[data-state=playing] #playback-status{color:#e6e8dd}body[data-state=loading] .spinner,body[data-state=waiting] .spinner{display:block}body[data-state=loading] #play-icon,body[data-state=waiting] #play-icon{display:none}body[data-state=error] .state-indicator,body[data-state=offline] .state-indicator{background:#ffbcad}body[data-state=playing] .play-button{background:#2b2e23;color:var(--yellow);box-shadow:inset 0 0 0 1px #626338}body[data-state=playing] .play-button:hover{background:#363a29}
@keyframes signal{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){main{padding-top:82px;padding-bottom:80px}.station-art{min-height:530px}}
@media(max-width:1000px){.shell{width:calc(100% - 64px)}.player-controls{padding:30px}.station-art{padding:30px;min-height:465px}.station-wordmark{font-size:clamp(140px,23vw,240px)}h1{font-size:46px;margin-top:32px}.keyboard-hint{display:none}.station-description{font-size:14px}.art-bottom{font-size:12px;letter-spacing:0}.section-label{font-size:12px;letter-spacing:1px}}
@media(max-width:700px){.shell{width:calc(100% - 40px)}.header{min-height:90px}.brand-mark{font-size:39px}.brand-label{font-size:12px;padding-left:14px}.brand{gap:12px}.header-note{font-size:12px;gap:8px}.header-note .icon{display:none}main{padding:32px 0 36px}.section-label{margin-bottom:14px;font-size:12px;letter-spacing:1px}.station-location{display:none}.player{grid-template-columns:1fr;border-radius:20px}.station-art{min-height:0;height:260px;padding:23px 25px 21px}.art-top{font-size:12px}.art-top .icon{width:23px;height:23px}.station-wordmark{font-size:clamp(112px,36vw,148px);line-height:.95;letter-spacing:-.085em}.art-bottom{font-size:12px}.art-bottom span:last-child{font-size:12px}.player-controls{padding:28px 26px 22px}h1{font-size:42px;margin-top:23px;letter-spacing:-1.5px}.station-description{font-size:16px}.signal{height:48px;margin-top:17px}.signal-bars{height:44px}.playback-info{margin-bottom:18px}.play-button{min-height:60px}.volume-row{margin-top:14px}.under-player{margin-top:17px;justify-content:center;font-size:12px}.footer{min-height:98px;padding:21px 0;gap:10px;align-items:flex-start;flex-direction:column}.footer-links{gap:12px}.footer>span{font-size:14px}}
@media(max-width:370px){.shell{width:calc(100% - 28px)}.header-note{max-width:106px;text-align:right}.player-controls{padding:24px 20px 18px}.station-art{height:236px}.station-wordmark{font-size:clamp(106px,35vw,129px)}.station-description{font-size:14px}.playback-info{font-size:13px}.footer-links{font-size:12px;gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}.signal-bars span{transform:scaleY(.6)!important}}

/* CsuriFM station selection and station-specific identity. */
:root{--station-accent:#ffe500}
body[data-station=radio1]{--station-accent:#ff887d}
body[data-station=dhr]{--station-accent:#bfa5ff}
.brand-mark{font-family:var(--display);font-size:2.2rem;letter-spacing:-1.5px;color:var(--text);font-weight:700;white-space:nowrap}
.brand-mark>span{color:var(--station-accent);transition:color .25s}
.header{min-height:110px}
main{padding-top:35px;padding-bottom:40px}
.station-selector{border:0;padding:0;margin:0 0 30px;min-width:0}
.station-selector legend{font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.4px;margin-bottom:15px;padding:0}
.station-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.station-option{position:relative;min-width:0;cursor:pointer}
.station-option input{position:absolute;opacity:0;width:1px;height:1px}
.station-choice{display:flex;align-items:center;gap:14px;min-height:91px;border:1px solid var(--border);border-radius:14px;padding:16px;background:#1a1c18;transition:background .2s,border-color .2s}
.station-option:hover .station-choice{background:#24261f;border-color:#656a59}
.station-option input:checked+.station-choice{border-color:var(--option-accent);background:color-mix(in srgb,var(--option-accent) 6%,#1a1c18)}
.station-option input:focus-visible+.station-choice{outline:3px solid var(--option-accent);outline-offset:4px}
.station-mini{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:9px;background:var(--option-accent);color:#151614;font-family:var(--display);font-weight:700;font-size:1.45rem;letter-spacing:-1px}
.station-mini.mini-fm4{font-family:Arial,sans-serif;font-weight:900;font-size:1.125rem;letter-spacing:-1.2px;padding-right:2px}
.mini-radio1{font-size:2rem}
.mini-dhr{font-size:1rem;letter-spacing:-.5px}
.station-choice-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.station-choice-copy strong{font-size:1rem;font-weight:650;color:var(--text)}
.station-choice-copy>span{font-size:.75rem;line-height:1.4;color:var(--muted)}
.selection-check{margin-left:auto;flex-shrink:0;font-size:1rem;visibility:hidden;color:var(--option-accent)}
.station-option input:checked+.station-choice .selection-check{visibility:visible}
.player{--yellow:var(--station-accent);grid-template-columns:.9fr 1.1fr}
.station-art{min-height:425px;transition:background .25s;padding:30px}
.station-wordmark{font-size:clamp(120px,17vw,225px)}
body[data-station=radio1] .station-wordmark{font-family:var(--display);font-size:clamp(55px,8vw,104px);letter-spacing:-.07em;white-space:nowrap;padding:0}
body[data-station=dhr] .station-wordmark{font-family:var(--display);font-size:clamp(86px,12vw,160px);letter-spacing:-.08em}
.player-controls{padding:30px 40px 25px}
h1{margin-top:24px;font-size:clamp(2.25rem,4vw,3.35rem)}
.signal{margin-top:18px;height:63px}
.playback-info{margin-bottom:19px}
.play-button:hover{background:color-mix(in srgb,var(--station-accent) 80%,white)}
body[data-state=playing] .play-button{background:color-mix(in srgb,var(--station-accent) 8%,#20221c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--station-accent) 40%,#30342a)}
body[data-state=playing] .play-button:hover{background:color-mix(in srgb,var(--station-accent) 14%,#20221c)}
.footer{gap:18px;flex-wrap:wrap;padding:20px 0;min-height:85px}
.footer-links{gap:12px}
.station-location{text-align:right}
.mute-button{width:44px;height:44px}
@media(max-width:1000px){.station-choice{padding:14px;gap:10px}.station-mini{width:40px;height:40px}.selection-check{display:none}.player-controls{padding:30px}.station-art{min-height:420px;padding:26px}.station-wordmark{font-size:20vw}.station-choice-copy>span{max-width:150px}.footer{align-items:flex-start;flex-direction:column;gap:9px}}
@media(max-width:700px){.header{min-height:84px}.brand-mark{font-size:2rem}.header-note{display:none}main{padding:25px 0 30px}.station-selector{margin-bottom:24px}.station-selector legend{font-size:1.2rem;margin-bottom:12px}.station-options{gap:10px}.station-choice{min-height:97px;padding:12px 7px;gap:7px;flex-direction:column;text-align:center}.station-choice-copy{gap:0}.station-choice-copy strong{font-size:.875rem}.station-choice-copy>span{display:none}.station-mini{width:36px;height:36px;font-size:1.2rem;border-radius:7px}.mini-radio1{font-size:1.6rem}.mini-dhr{font-size:.8rem}.player{grid-template-columns:1fr}.section-label{font-size:.75rem;letter-spacing:1px;margin-bottom:12px}.station-art{height:174px;min-height:0;padding:17px 24px}.station-wordmark{font-size:clamp(68px,21vw,112px);line-height:.9}.art-top,.art-bottom{font-size:.75rem}.art-top .icon{width:20px;height:20px}.art-bottom span:last-child{font-size:.75rem}body[data-station=radio1] .station-wordmark{font-size:clamp(42px,13vw,70px)}body[data-station=dhr] .station-wordmark{font-size:clamp(58px,18vw,94px)}.player-controls{padding:24px 25px 19px}h1{font-size:2.35rem;margin-top:18px}.station-description{font-size:1rem}.signal{margin-top:14px;height:44px}.signal-bars{height:40px}.playback-info{margin-bottom:16px;font-size:.875rem}.volume-row{margin-top:11px}.under-player{font-size:.75rem;line-height:1.5}.footer-links{line-height:1.7}.footer-divider{display:none}.footer{padding:20px 0}.brand-label{font-size:.75rem}}
@media(max-width:370px){.player-controls{padding:22px 18px 16px}.station-art{padding:16px 20px}.station-description{font-size:.875rem}.playback-info{flex-wrap:wrap;row-gap:2px;font-size:.8125rem}.quality{font-size:.75rem}.station-choice{padding:11px 5px}.station-options{gap:7px}}