Made of little things.

/* Wavefunc's ink-and-paper graphics, made into a miniature broadcast studio. */
:root { font-family: Arial, Helvetica, sans-serif; color: #1d1c13; background: #fef9ea; font-synthesis: none; --paper:#fef9ea; --ink:#1d1c13; --muted:#6e695d; --line:#d3cdbb; --red:#c5001c; --cyan:#00c8d8; --mono:'SFMono-Regular',Consolas,monospace; }
* { box-sizing:border-box; }
html, body, #app { width:100%; height:100%; margin:0; }
body { overflow:hidden; }
button,input,select { font:inherit; color:inherit; border-radius:0; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled { cursor:default; opacity:.4; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #00828b; outline-offset:3px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.radio { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); height:100%; padding:20px; gap:24px; }
.studio { min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; }
.studio-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:2px 0 16px; border-bottom:3px solid var(--ink); }
.eyebrow { font:700 9px var(--mono); letter-spacing:1.1px; }
.studio-heading h2 { font-size:clamp(28px,4.6vw,66px); font-weight:950; font-style:italic; line-height:.94; letter-spacing:-2.5px; margin:10px 0 0; white-space:nowrap; }
.studio-heading h2>span { color:var(--red); }
.edition { border:3px solid var(--ink); padding:4px 8px; font-size:25px; font-weight:900; transform:rotate(-5deg); line-height:1.1; box-shadow:3px 3px 0 var(--ink); }
.edition small { display:block; font:700 8px var(--mono); text-align:center; padding-top:3px; }
.stage-wrap { position:relative; min-height:0; flex:1; display:flex; flex-direction:column; }
.receiver-stage { width:100%; min-height:0; flex:1; position:relative; overflow:hidden; touch-action:none; }
.receiver-canvas { width:100%; height:100%; display:block; }
.stage-caption { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; border-top:1px solid var(--line); z-index:2; }
.stage-note { font:700 8px var(--mono); letter-spacing:.8px; color:var(--muted); }
.stage-caption button { background:transparent; border:0; padding:0 2px; min-height:44px; font:700 10px var(--mono); text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; }
.scene-fallback { display:none; height:100%; flex-direction:column; justify-content:center; align-items:center; padding:20px; text-align:center; }
.scene-fallback>span { font-size:55px; font-weight:900; border:5px solid var(--ink); box-shadow:9px 9px 0 var(--cyan); transform:rotate(-8deg); padding:8px; }
.scene-fallback strong { font-size:27px; font-style:italic; line-height:1; margin-top:24px; }
.scene-fallback p { font:11px/1.5 var(--mono); max-width:260px; }
.receiver-stage[data-renderer="fallback"] .scene-fallback { display:flex; }
.receiver-stage[data-renderer="fallback"] canvas { display:none; }
.receiver { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; background:var(--ink); color:var(--paper); border:3px solid var(--ink); padding:16px 17px; box-shadow:5px 5px 0 var(--red); position:relative; z-index:3; }
.receiver-track { min-width:0; flex:1 1 150px; display:flex; flex-direction:column; gap:6px; }
.receiver-label { color:#c9c1ad; font:700 9px var(--mono); letter-spacing:1.5px; display:flex; align-items:center; gap:7px; }
.receiver-label::before { content:''; width:6px; height:6px; border:1px solid currentColor; }
.receiver-label.live { color:var(--cyan); }.receiver-label.live::before { background:currentColor; }
.receiver-track strong { font-size:19px; letter-spacing:-.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.receiver-track>span:last-child { color:#c5beac; font:10px var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.transport { display:flex; align-items:center; gap:16px; }
.play-toggle { width:48px; height:48px; border:2px solid var(--paper); background:var(--red); color:var(--paper); box-shadow:3px 3px 0 #6d0812; display:grid; place-items:center; }
.play-toggle:active { transform:translate(2px,2px); box-shadow:1px 1px 0 #6d0812; }
.play-toggle svg { width:20px; height:20px; fill:currentColor; }
.volume { width:74px; display:flex; flex-direction:column; gap:0; font:700 8px var(--mono); }
.volume>span { display:flex; justify-content:space-between; }
.volume output { color:var(--cyan); }
.volume input { width:74px; margin:0; height:32px; accent-color:var(--cyan); cursor:ew-resize; }
.player-error { flex:1 0 100%; margin:0; font:11px/1.5 var(--mono); color:#ffb3b8; }
.studio-foot { display:flex; justify-content:space-between; gap:10px; font:700 7px var(--mono); letter-spacing:.4px; color:var(--muted); padding:16px 0 0; }
.studio-foot span:last-child { color:var(--red); }
.directory { min-width:0; min-height:0; display:flex; flex-direction:column; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:#f4efdf; }
.toolbar { display:flex; justify-content:space-between; align-items:stretch; min-height:55px; border-bottom:3px solid var(--ink); }
.tabs { display:flex; flex:1; }.tab { padding:0 15px; min-height:44px; border:0; border-right:2px solid var(--ink); background:transparent; font-size:12px; text-transform:uppercase; font-weight:900; }
.tab.active { background:var(--ink); color:var(--paper); }.tab:hover { color:var(--red); }.tab.active:hover { color:var(--cyan); }
.icon-button { background:transparent; border:0; min-height:44px; min-width:44px; font-size:22px; }
.search-form { display:grid; grid-template-columns:minmax(0,1fr) 44px; padding:17px 17px 0; }
.search-field { display:flex; align-items:center; min-width:0; border:2px solid var(--ink); border-right:0; background:var(--paper); }
.search-field svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; margin-left:11px; flex-shrink:0; }
.search-field input { border:0; background:transparent; width:100%; min-width:0; height:44px; padding:0 8px; font:11px var(--mono); }
.search-button { border:2px solid var(--ink); background:var(--red); color:var(--paper); font-size:25px; }
.search-mode { grid-column:1/-1; }.search-mode select { min-height:36px; background:transparent; border:0; font:700 9px var(--mono); text-transform:uppercase; padding:0 3px; }
.directory-caption { display:flex; gap:10px; justify-content:space-between; align-items:center; padding:14px 17px 17px; }
.directory-caption h1 { background:var(--ink); color:var(--paper); font-size:19px; font-weight:900; font-style:italic; text-transform:uppercase; padding:4px 8px; margin:0; transform:skew(-5deg); line-height:1.1; letter-spacing:-.6px; }
.directory-caption>span { font:700 8px/1.5 var(--mono); color:var(--red); text-align:right; }
.results { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; padding:0 17px 13px; scrollbar-width:thin; }
.station-row { width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) 23px; gap:12px; align-items:center; background:var(--paper); border:2px solid var(--ink); text-align:left; padding:13px 11px; min-height:77px; margin-bottom:10px; box-shadow:3px 3px 0 #bcb6a4; transition:transform .16s,box-shadow .16s; }
.station-row:hover { transform:translate(-1px,-2px); box-shadow:4px 5px 0 var(--ink); }
.station-row.selected { box-shadow:3px 3px 0 var(--ink); border-left:5px solid var(--red); padding-left:8px; background:#fff9e7; }
.station-row[aria-pressed="true"] .station-mark { background:var(--cyan); color:var(--ink); }
.station-mark { width:38px; height:40px; display:grid; place-items:center; color:var(--paper); background:var(--ink); font:900 13px var(--mono); border:1px solid var(--ink); box-shadow:2px 2px 0 #c5bfae; }
.station-text { min-width:0; display:flex; flex-direction:column; gap:7px; }
.station-text strong { font-size:13px; font-weight:900; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.station-text small { font:9px var(--mono); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-arrow { font-size:21px; text-align:right; color:var(--red); }
.directory-foot { display:flex; align-items:center; gap:7px; border-top:2px solid var(--ink); min-height:39px; padding:6px 17px; font:8px/1.4 var(--mono); color:var(--muted); }
.directory-foot>span:nth-child(2) { flex:1; }.directory-foot button { border:0; padding:0; background:transparent; color:var(--red); min-height:28px; font-weight:700; text-decoration:underline; }
.signal-dot { width:6px; height:6px; flex-shrink:0; background:var(--red); }
.message { padding:24px 3px; }.message h2 { font-size:23px; font-weight:900; font-style:italic; letter-spacing:-.7px; margin:0 0 15px; }.message p { font-size:13px; line-height:1.65; margin:0; color:var(--muted); }
.music-row { display:flex; flex-direction:column; gap:7px; border-top:2px solid var(--ink); padding:16px 0; }.music-row strong { font-size:14px; }.music-row small { font:11px/1.5 var(--mono); color:var(--muted); }
.favourite-controls { padding:16px 17px 0; font:10px var(--mono); }.favourite-controls>div { display:flex; margin:8px 0; }.favourite-controls select { width:100%; min-width:0; border:2px solid var(--ink); background:var(--paper); padding:8px; }.favourite-controls>span { font-size:9px; color:var(--muted); }
.station-detail { position:absolute; inset:0 0 45px; overflow:auto; background:var(--paper); padding:18px 0; z-index:1; }
.detail-kicker { display:flex; justify-content:space-between; gap:10px; font:9px var(--mono); color:var(--red); }
.detail-art { width:84px; height:70px; float:right; position:relative; margin:18px 0 14px 18px; background:var(--red); display:grid; place-items:center; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); }
.radio-glyph { fill:none; stroke:var(--paper); stroke-width:2; width:75%; height:75%; }.detail-art img { position:absolute; width:100%; height:100%; object-fit:contain; padding:5px; background:var(--paper); }
.detail-name { font-size:clamp(24px,3vw,40px); font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:-1px; margin:20px 0 0; overflow-wrap:anywhere; }
.detail-location { font:10px/1.6 var(--mono); color:var(--muted); }.detail-description { font-size:13px; line-height:1.65; overflow-wrap:anywhere; }.tags { display:flex; flex-wrap:wrap; gap:5px; }.tag { border:1px solid var(--ink); padding:4px 6px; font:9px var(--mono); text-transform:uppercase; }
.station-action { display:flex; flex-direction:column; gap:8px; margin-top:16px; }.station-action button { min-height:44px; background:var(--red); color:var(--paper); border:2px solid var(--ink); font-weight:700; }.station-action select { width:100%; min-height:44px; border:2px solid var(--ink); padding:5px; background:var(--paper); font-size:11px; }.station-action p { font-size:11px; line-height:1.5; }
.minimum { display:none; }
@media (min-width:1200px) { .radio { padding:30px; gap:34px; grid-template-columns:minmax(0,1.5fr) minmax(350px,1fr); }.studio-heading { padding-bottom:23px; }.eyebrow { font-size:10px; }.directory-caption { padding-top:18px; }.directory-caption h1 { font-size:23px; }.station-row { min-height:88px; }.station-text strong { font-size:15px; }.station-text small { font-size:10px; }.stage-note { font-size:9px; } }
@media (max-width:700px) and (min-height:460px) {
  .radio { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(225px,47%) minmax(0,1fr); padding:12px; gap:16px; }
  .studio-heading { padding:0 0 8px; border-bottom-width:2px; }.studio-heading h2 { font-size:30px; letter-spacing:-1.5px; margin-top:4px; }.eyebrow { font-size:7px; letter-spacing:.5px; }.edition { font-size:19px; padding:2px 6px; border-width:2px; }.edition small { font-size:6px; }
  .stage-caption { position:absolute; right:0; top:0; border:0; min-height:32px; }.stage-caption button { font-size:8px; min-height:36px; }.stage-note { display:none; }
  .receiver { flex-wrap:nowrap; padding:9px 10px; gap:10px; border-width:2px; box-shadow:3px 3px 0 var(--red); min-height:74px; }
  .receiver-track { flex:1; }.receiver-track strong { font-size:14px; }.receiver-track>span:last-child { font-size:8px; }.receiver-label { font-size:8px; }.transport { gap:10px; }.play-toggle { width:44px; height:44px; }.volume { width:48px; font-size:7px; }.volume input { width:48px; height:28px; }.player-error { position:absolute; bottom:100%; left:0; right:0; padding:10px; background:var(--ink); }
  .studio-foot { display:none; }.directory { border-width:2px; box-shadow:3px 3px 0 var(--ink); }.toolbar { min-height:44px; border-bottom-width:2px; }.tab { font-size:10px; padding:0 13px; }.search-form { padding:10px 10px 0; grid-template-columns:minmax(0,1fr) 44px 75px; }.search-mode { grid-column:auto; padding-left:6px; align-self:center; }.search-mode select { max-width:100%; font-size:8px; min-height:44px; }.search-field input { font-size:9px; }.search-field svg { margin-left:8px; width:13px; }.directory-caption { padding:10px; }.directory-caption h1 { font-size:16px; }.directory-caption>span { font-size:7px; }.results { padding:0 10px 8px; }.station-row { min-height:68px; padding:9px; margin-bottom:8px; gap:10px; }.station-row.selected { padding-left:6px; }.station-text strong { font-size:11px; }.station-text small { font-size:8px; }.directory-foot { padding:4px 10px; min-height:27px; font-size:7px; }.directory-foot button { min-height:28px; }.favourite-controls { padding:10px 10px 0; }.station-detail { inset:0; padding:10px 0; padding-right:95px; }.detail-art,.detail-kicker,.detail-description,.tags { display:none; }.detail-name { margin:4px 0; font-size:20px; }.detail-location { margin:5px 0; }.station-action { margin-top:8px; }.station-action button { min-height:44px; font-size:11px; }
}
@media (max-height:459px) and (min-width:280px) { .radio { padding:12px; gap:16px; grid-template-columns:minmax(0,1fr) minmax(260px,.9fr); }.studio-heading { padding-bottom:8px; }.eyebrow { font-size:7px; }.studio-heading h2 { font-size:30px; letter-spacing:-1.5px; margin-top:4px; }.edition { font-size:18px; }.stage-note,.studio-foot { display:none; }.stage-caption { position:absolute; top:0; right:0; border:0; }.stage-caption button { font-size:8px; }.receiver { padding:9px; flex-wrap:nowrap; gap:8px; }.receiver-track { flex:1; }.receiver-track strong { font-size:13px; }.receiver-track>span:last-child { font-size:8px; }.volume { width:50px; }.volume input { width:50px; }.transport { gap:10px; }.toolbar { min-height:44px; }.tab { font-size:10px; padding:0 10px; }.search-form { padding:10px 10px 0; grid-template-columns:minmax(0,1fr) 44px 75px; }.search-mode { grid-column:auto; align-self:center; }.search-mode select { max-width:100%; font-size:8px; }.search-field input { font-size:9px; }.directory-caption { padding:10px; }.directory-caption h1 { font-size:16px; }.results { padding:0 10px 10px; }.directory-foot { padding:3px 10px; font-size:7px; }.station-row { min-height:67px; }.player-error { position:absolute; bottom:100%; background:var(--ink); padding:8px; } }
@media (max-height:459px) and (max-width:579px) { .radio { grid-template-columns:minmax(0,1fr); }.studio { position:absolute; bottom:12px; left:12px; right:12px; z-index:3; }.studio-heading,.stage-wrap { display:none; }.directory { margin-bottom:85px; }.volume { width:60px; }.volume input { width:60px; } }
@media (pointer:coarse) { .volume input { height:44px; }.stage-caption button { min-height:44px; } }
@media (max-width:279px), (max-height:259px) { .radio { display:none; }.minimum { display:flex; height:100%; padding:13px; flex-direction:column; justify-content:center; gap:8px; }.minimum p { font-weight:900; font-style:italic; margin:0; font-size:18px; }.minimum span { color:var(--muted); font-size:11px; line-height:1.4; }.minimum button { background:var(--red); color:white; border:2px solid var(--ink); min-height:44px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Keep unsupported-stream feedback beside its station, inside the scrolling list. */
.external-station .station-text small { color:var(--red); font-weight:700; }
.station-fallback { padding:12px; border:2px solid var(--ink); border-top:0; margin:-10px 0 12px; background:var(--paper); }
.station-fallback p { margin:0 0 10px; font:11px/1.5 var(--mono); }
.station-fallback .external-open { min-height:44px; width:100%; border:2px solid var(--ink); padding:8px; background:var(--cyan); color:var(--ink); font-weight:700; font-size:12px; }
.station-fallback .external-feedback { margin:10px 0 0; }
.external-url { width:100%; min-width:0; margin-top:8px; padding:8px; min-height:44px; border:1px solid var(--ink); background:var(--paper); font:11px var(--mono); }
.station-action .station-fallback { margin:0; border-top:2px solid var(--ink); }

.external-url-label { display:block; margin-top:10px; font:9px var(--mono); color:var(--muted); }