:root { color-scheme:dark; --ink:#0a0b0d; --panel:#15171a; --panel-2:#22252a; --line:#454a52; --phosphor:#f1f3f5; --soft:#aeb4bc; --alert:#f1f3f5; --danger:#e89a9a; --white:#f8f9fa; font-family:"Trebuchet MS", Verdana, sans-serif; }
html[data-theme="light"] { color-scheme:light; --ink:#eef0f2; --panel:#ffffff; --panel-2:#e1e4e8; --line:#a8afb8; --phosphor:#15181c; --soft:#515962; --alert:#15181c; --danger:#9d3131; --white:#111418; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--white); min-width:320px; transition:background-color 260ms cubic-bezier(.16,1,.3,1),color 260ms cubic-bezier(.16,1,.3,1); }
[hidden] { display:none !important; }
button, input { font:inherit; }
button { cursor:pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid var(--alert); outline-offset:3px; }
.shell { max-width:1220px; margin:auto; padding:26px clamp(16px, 4vw, 54px) 54px; }
.masthead { min-height:56px; display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); padding-bottom:20px; }
.brand { color:var(--white); text-decoration:none; font-size:clamp(1.3rem, 3vw, 2rem); font-weight:900; letter-spacing:-.08em; } .brand span { color:var(--phosphor); }
.tagline { margin:0; color:var(--soft); font-size:.91rem; }
.country-switch { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--line); border-radius:16px; background:var(--panel); } .country-switch button { width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; padding:0; font-size:.82rem; filter:grayscale(1) opacity(.52); transition:filter 180ms ease,transform 220ms cubic-bezier(.16,1,.3,1),background-color 180ms ease; } .country-switch button:hover { filter:grayscale(0) opacity(1); transform:scale(1.08); } .country-switch button.active { filter:grayscale(0) opacity(1); background:var(--panel-2); transform:scale(1.08); }
.flag { display:block; width:17px; height:12px; border:1px solid rgba(0,0,0,.24); box-shadow:0 1px 2px rgba(0,0,0,.22); } .flag-de { background:linear-gradient(to bottom, #151515 0 33.33%, #d72638 33.33% 66.66%, #f7c948 66.66%); } .flag-pl { background:linear-gradient(to bottom, #fff 0 50%, #dc143c 50%); }
.theme-toggle { position:relative; width:58px; height:30px; padding:0; border:1px solid var(--line); border-radius:15px; background:var(--panel); color:var(--soft); overflow:hidden; transition:background-color 260ms cubic-bezier(.16,1,.3,1),border-color 260ms cubic-bezier(.16,1,.3,1); } .theme-toggle::before { content:""; position:absolute; z-index:1; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--white); box-shadow:0 2px 5px rgba(0,0,0,.28); transform:translateX(0); transition:transform 320ms cubic-bezier(.16,1,.3,1),background-color 260ms cubic-bezier(.16,1,.3,1); } html[data-theme="light"] .theme-toggle::before { transform:translateX(28px); } .theme-toggle:hover { border-color:var(--phosphor); } .theme-icon { position:absolute; top:7px; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:opacity 180ms ease,transform 320ms cubic-bezier(.16,1,.3,1),color 260ms ease; } .theme-icon-sun { left:7px; opacity:.38; transform:rotate(-35deg) scale(.82); } .theme-icon-moon { right:7px; opacity:1; transform:rotate(0) scale(1); } html[data-theme="light"] .theme-icon-sun { opacity:1; transform:rotate(0) scale(1); } html[data-theme="light"] .theme-icon-moon { opacity:.38; transform:rotate(35deg) scale(.82); }
.live-pip { margin-left:auto; color:var(--soft); font-size:.67rem; font-weight:800; letter-spacing:.13em; } .live-pip i,.status-dot { display:inline-block; width:8px; height:8px; background:var(--phosphor); border-radius:50%; box-shadow:0 0 12px color-mix(in srgb, var(--phosphor) 55%, transparent); margin-right:7px; }
.signal-stage { min-height:clamp(250px, 37vw, 410px); position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--ink); isolation:isolate; }
#signalCanvas { position:absolute; inset:0; width:100%; height:100%; opacity:.72; }
.signal-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, color-mix(in srgb, var(--ink) 88%, transparent), transparent 65%), repeating-linear-gradient(0deg, transparent, transparent 3px, color-mix(in srgb, var(--phosphor) 4%, transparent) 4px); z-index:1; }
.signal-copy { position:relative; z-index:2; padding:clamp(32px, 6vw, 76px); max-width:700px; } .signal-copy p { color:var(--phosphor); font-size:.72rem; font-weight:800; letter-spacing:.17em; margin:0 0 16px; } .signal-copy h1 { font-size:clamp(2.5rem, 7vw, 5.7rem); line-height:.88; letter-spacing:-.065em; margin:0; max-width:7ch; }
.frequency-readout { position:absolute; z-index:2; bottom:24px; right:28px; color:var(--phosphor); font-family:Consolas, monospace; font-size:clamp(1rem, 2.4vw, 1.55rem); }
.console { background:var(--panel); border-bottom:1px solid var(--line); }
.now-playing { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; gap:16px; align-items:center; padding:21px clamp(18px, 3vw, 32px); } .status-dot { margin:0; background:#416145; box-shadow:none; } .status-dot.active { background:var(--phosphor); box-shadow:0 0 12px #72ff7c; } .status-dot.error { background:var(--danger); box-shadow:none; }
.station-mark { width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--soft); color:var(--phosphor); font-weight:900; letter-spacing:-.08em; }
.playing-copy { min-width:0; } .playing-copy p { color:var(--soft); margin:0 0 4px; font-size:.65rem; font-weight:800; letter-spacing:.13em; } .playing-copy h2 { margin:0; font-size:1.15rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .playing-copy span { color:var(--soft); font-size:.8rem; }
.play-button { width:52px; height:52px; border:0; background:var(--phosphor); color:var(--ink); font-size:1.25rem; font-weight:900; } .play-button:hover:not(:disabled) { background:var(--white); transform:translateY(-2px); } .play-button:disabled,.control-button:disabled,.stop-button:disabled { cursor:not-allowed; opacity:.4; }
.audio-controls { display:flex; align-items:center; gap:13px; padding:13px clamp(18px, 3vw, 32px) 21px; border-top:1px solid var(--line); } .control-button,.stop-button { border:1px solid var(--line); background:transparent; color:var(--white); padding:9px 11px; font-size:.68rem; font-weight:800; letter-spacing:.1em; } .control-button:hover:not(:disabled),.stop-button:hover:not(:disabled) { border-color:var(--phosphor); color:var(--phosphor); } .volume-label { color:var(--soft); font-size:.66rem; font-weight:800; letter-spacing:.1em; } .volume-label output { color:var(--white); margin-left:5px; } input[type="range"] { accent-color:var(--phosphor); flex:1; max-width:290px; } .stop-button { margin-left:auto; color:var(--danger); }
.directory { padding-top:48px; } .directory-heading { display:flex; justify-content:space-between; gap:24px; align-items:baseline; margin-bottom:22px; } .directory-heading h2 { margin:0; font-size:clamp(1.5rem, 3vw, 2.35rem); letter-spacing:-.045em; } .directory-heading p { margin:8px 0 0; color:var(--soft); font-size:.85rem; } #stationCount { color:var(--phosphor); font-family:Consolas, monospace; font-size:.72rem; white-space:nowrap; }
.search { display:grid; grid-template-columns:1fr auto; gap:0; margin-bottom:28px; } .search label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .search input { min-width:0; border:1px solid var(--line); border-right:0; background:var(--panel); color:var(--white); padding:15px 16px; } .search input::placeholder { color:var(--soft); } .search button { border:1px solid var(--phosphor); background:var(--phosphor); color:var(--ink); font-size:.7rem; font-weight:900; letter-spacing:.1em; padding:0 19px; } .search button:hover { background:var(--white); }
.station-list { display:flex; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); padding-top:22px; } .station-tile { width:clamp(72px, 10vw, 108px); aspect-ratio:1; display:grid; place-items:center; padding:10px; border:1px solid var(--line); background:var(--panel); } .station-tile:hover,.station-tile.selected { background:var(--panel-2); border-color:var(--phosphor); } .station-tile.selected { box-shadow:inset 0 0 0 2px var(--phosphor); } .station-icon { width:100%; height:100%; object-fit:contain; } .player-reactions { display:flex; border:1px solid var(--line); } .reaction { border:0; border-right:1px solid var(--line); background:transparent; color:var(--soft); font-size:.68rem; font-weight:800; padding:8px 10px; white-space:nowrap; } .reaction:last-child { border-right:0; } .reaction:hover,.reaction.active { color:var(--phosphor); background:var(--panel-2); } .reaction.dislike.active { color:var(--danger); background:var(--panel-2); }
.station-monogram { color:var(--phosphor); font-size:1.25rem; font-weight:900; letter-spacing:-.08em; }
.country-dialog { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:24px; background:rgba(2,7,4,.94); } .country-dialog-content { width:min(520px, 100%); border:1px solid var(--phosphor); background:var(--panel); padding:clamp(28px, 6vw, 52px); } .country-dialog-content p { margin:0 0 14px; color:var(--phosphor); font-size:.68rem; font-weight:900; letter-spacing:.16em; } .country-dialog-content h2 { margin:0 0 32px; font-size:clamp(2rem, 6vw, 3.8rem); line-height:.9; letter-spacing:-.065em; max-width:8ch; } .country-options { display:flex; gap:12px; } .country-options button { flex:1; min-height:110px; border:1px solid var(--line); background:var(--ink); color:var(--white); font-size:.73rem; font-weight:900; letter-spacing:.11em; } .country-options button span { display:block; font-size:2.15rem; margin-bottom:12px; } .country-options button:hover { border-color:var(--phosphor); color:var(--phosphor); background:var(--panel-2); }
.empty { color:var(--soft); padding:42px 0; text-align:center; border-bottom:1px solid var(--line); }
@media (max-width:650px) { .masthead { flex-wrap:wrap; gap:10px 16px; } .tagline { width:100%; order:3; } .live-pip { margin-left:auto; } .now-playing { grid-template-columns:auto auto minmax(0,1fr); } .player-reactions { grid-column:2 / 4; width:max-content; } .play-button { grid-column:2 / 4; width:100%; height:42px; } .audio-controls { flex-wrap:wrap; } input[type="range"] { min-width:150px; } .stop-button { margin-left:0; } .station-list { gap:9px; } .station-tile { width:calc((100% - 27px) / 4); padding:8px; } .country-options { flex-direction:column; } .country-options button { min-height:76px; display:flex; align-items:center; justify-content:center; gap:14px; } .country-options button span { margin:0; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }

.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.directory { padding-top:34px; }
.radio-orbit { position:relative; overflow:hidden; border:1px solid var(--line); padding:clamp(14px, 2.4vw, 26px); background:var(--ink); }
.radio-orbit .signal-stage { position:absolute; inset:0; min-height:0; border:0; opacity:.28; }
.radio-orbit .frequency-readout { right:20px; top:18px; bottom:auto; font-size:.78rem; }
.station-band { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; }
.station-band-top,.station-band-bottom { justify-content:center; }
.station-band-side { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-content:center; }
.orbit-middle { position:relative; z-index:2; display:grid; grid-template-columns:minmax(108px, 1fr) minmax(320px, 440px) minmax(108px, 1fr); gap:clamp(12px, 2vw, 28px); align-items:stretch; margin:clamp(14px, 2vw, 24px) 0; }
.radio-orbit .console { align-self:center; border:1px solid var(--phosphor); background:color-mix(in srgb, var(--panel) 94%, transparent); box-shadow:0 16px 28px rgba(0,0,0,.36); transition:background-color 260ms cubic-bezier(.16,1,.3,1),border-color 260ms cubic-bezier(.16,1,.3,1); }
.radio-orbit .now-playing { grid-template-columns:auto auto minmax(0,1fr) auto; gap:10px; padding:17px; }
.radio-orbit .player-reactions { grid-column:3 / 5; width:max-content; }
.radio-orbit .play-button { grid-column:4; grid-row:1; width:44px; height:44px; }
.radio-orbit .audio-controls { padding:12px 17px 16px; gap:9px; }
.station-tile { width:clamp(52px, 6vw, 76px); border-color:var(--line); background:color-mix(in srgb, var(--ink) 84%, transparent); padding:6px; }
.station-band-side .station-tile { width:100%; max-width:76px; justify-self:center; }
.station-band-bottom { min-height:76px; }
@media (max-width:700px) { .radio-orbit { padding:12px; } .orbit-middle { grid-template-columns:1fr; gap:12px; } .station-band-side { display:flex; justify-content:center; order:2; } .orbit-middle .console { order:1; } .station-band-side:last-child { order:3; } .station-band-top { margin-bottom:12px; } .station-band-bottom { margin-top:12px; } .radio-orbit .now-playing { grid-template-columns:auto auto minmax(0,1fr); } .radio-orbit .player-reactions,.radio-orbit .play-button { grid-column:2 / 4; } .radio-orbit .play-button { grid-row:auto; } }