:root { color-scheme: dark; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background: #0a0a0b; color: #ececeb; -webkit-font-smoothing: antialiased; --quiet: #a1a19d; --line: rgba(255,255,255,.12); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; padding: 32px 24px; }
main { width: min(100%,440px); margin: 16px auto; }
.top { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
#station { display: block; font-family: "Arial",sans-serif; font-size: 20px; font-weight: 750; line-height: 1.15; letter-spacing: -.045em; overflow-wrap: anywhere; }
.signal { position: relative; height: 144px; margin: 0 0 24px; }
.signal-display { width: 100%; height: 112px; position: relative; display: flex; align-items: center; touch-action: none; cursor: crosshair; }
.signal-display:focus-visible { outline: 1px solid #777; outline-offset: 4px; }
.signal svg { display: block; width: 100%; height: 76px; overflow: visible; }
.signal-axis { stroke: #333330; stroke-width: .5; stroke-dasharray: 2 7; }
.signal polyline { fill: none; stroke: #d0d0c7; stroke-width: .8; vector-effect: non-scaling-stroke; }
#signal-cursor { stroke: #666; stroke-width: .5; opacity: 0; }
.signal-display:hover #signal-cursor,.signal-display:focus #signal-cursor { opacity: .65; }
.signal-scale { position: absolute; right: 0; bottom: 2px; color: #888; font: 9px ui-monospace,monospace; opacity: 0; }
.signal-display:hover .signal-scale,.signal-display:focus .signal-scale { opacity: 1; }
.button-dot { width: 6px; height: 6px; border-radius: 50%; background: #777; }
.wave-live-dot { position: absolute; top: 18px; left: 0; }
.station-live .button-dot { background: #b92d2d; animation: transmission 1.8s ease-in-out infinite; }
#listen { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #575752; border-radius: 50%; background: transparent; color: #e0e0d8; cursor: pointer; }
#listen:hover { border-color: #aaa; background: #1b1b1a; }
#listen:active { background: #292927; }
#listen svg { width: 18px; height: 18px; fill: currentColor; }
button:focus-visible,input:focus-visible,a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.selection { text-align: left; }
.eyebrow { margin: 0 0 12px; color: #858580; font: 9px/1.5 ui-monospace,monospace; letter-spacing: .08em; }
h1 { max-width: 350px; margin: 0; font-size: clamp(28px,7vw,35px); font-weight: 450; line-height: 1.12; letter-spacing: -.045em; overflow-wrap: anywhere; }
#artist { margin: 12px 0 16px; color: #a1a19a; font-size: 12px; line-height: 1.6; max-width: 300px; }
.identity-note { font: 8px/1.5 ui-monospace,monospace; letter-spacing: .05em; color: #777770; }
.controls { margin-top: 24px; }
.volume-row { display: flex; align-items: center; gap: 16px; color: var(--quiet); font: 10px ui-monospace,monospace; }
.volume-row input { flex: 1; min-width: 0; height: 24px; accent-color: #aaa; }
.volume-row span { font-size: 13px; }
#message { margin: 10px 0 20px; min-height: 32px; color: #96968f; font-size: 10px; line-height: 1.6; }
footer { padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; color: #888880; font: 8px/1.5 ui-monospace,monospace; letter-spacing: .025em; }
.stream-fallback { display: block; color: #d6d6cf; font-size: 12px; margin: 0 0 20px; text-underline-offset: 4px; }
.stream-fallback[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#share-radio { border: 0; border-radius: 0; background: transparent; color: #a1a19d; font: inherit; letter-spacing: inherit; padding: 0; min-height: 32px; margin: -10px 0; cursor: pointer; }
#share-radio:hover { color: #fff; }
#share-radio:disabled { opacity: .5; }
#share-fallback { margin-top: 12px; color: #a1a19d; font: 10px/1.5 ui-monospace,monospace; }
#share-fallback[hidden] { display: none; }
#share-url { display: block; width: 100%; margin-top: 6px; border: 1px solid #444; border-radius: 0; padding: 10px; background: #111; color: #eee; font: inherit; }
@keyframes transmission { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
@media(prefers-reduced-motion:reduce) { .station-live .button-dot { animation: none; } }
@media(max-width:380px) { body { padding: 24px 22px; } main { margin: 8px auto; } #station { font-size: 19px; } .signal { height: 136px; margin-bottom: 20px; } .signal-display { height: 104px; } }
/* The waveform is the transport surface, in the former wide-button position. */
.signal { height: 108px; margin: 24px 0 12px; }
.signal-display { height: 108px; }
.signal svg { height: 82px; }
#listen { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%,-50%); width: 48px; height: 48px; background: #151516; border-color: #85857e; z-index: 1; transition: background .15s ease,border-color .15s ease; }
.signal:hover #listen { background: #252523; border-color: #ddd; }
#listen:active { background: #363632; }
.wave-live-dot { top: 10px; left: 0; }
.selection { padding-top: 24px; }
.controls { margin-top: 12px; }
@media(max-width:380px) { .signal { height: 100px; margin: 20px 0 12px; } .signal-display { height: 100px; } }
/* Header signal and square waveform transport. */
.top { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
#station { font-family: "Arial Narrow","Helvetica Neue","Arial",sans-serif; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: .035em; text-transform: uppercase; }
.header-live-dot { flex: none; width: 5px; height: 5px; border-radius: 0; }
#listen { width: 44px; height: 44px; border-radius: 0; border: 1px solid #555550; background: #0a0a0b; color: #d0d0c7; }
.signal:hover #listen,#listen:hover { background: #141414; border-color: #91918a; }
.is-playing #listen { border-color: #353533; background: #0a0a0b; }
.is-playing .signal:hover #listen { border-color: #777770; background: #111; }
#listen:active { background: #242422; }
#listen svg { width: 15px; height: 15px; }
@media(max-width:380px) { #station { font-size: 14px; letter-spacing: .035em; } }
/* Larger scope; quiet passages are normalized in the visual analyser only. */
.signal { height: 140px; }
.signal-display { height: 140px; }
.signal svg { height: 124px; }
#listen svg { height: 15px; }
@media(max-width:380px) { .signal,.signal-display { height: 132px; } .signal svg { height: 116px; } #listen svg { height: 15px; } }
/* Full-height layout: footer follows the viewport, with safe-area room only. */
body { padding: 20px 24px 12px; padding: max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
main { display: flex; flex-direction: column; margin: 0 auto; min-height: calc(100vh - 32px); min-height: calc(100svh - max(20px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))); }
footer { margin-top: auto; flex-shrink: 0; flex-wrap: wrap; row-gap: 6px; }
.signal,.top { flex-shrink: 0; }
@media(max-width:380px) { body { padding-left: max(20px,env(safe-area-inset-left)); padding-right: max(20px,env(safe-area-inset-right)); } main { margin: 0 auto; } }
@media(max-height:520px) and (min-width:600px) { main { max-width: 560px; } .selection { padding-top: 16px; } .signal,.signal-display { height: 104px; } .signal svg { height: 94px; } #listen svg { height: 15px; } }
/* Volume belongs to the waveform surface, with a quiet, touch-sized fader. */
.signal { height: auto; }
.signal-display { height: 124px; }
#listen { top: 62px; }
.signal .controls { margin-top: 8px; }
.volume-row { gap: 12px; }
.volume-icon { width: 13px !important; height: 13px !important; flex: none; fill: none; stroke: #888880; stroke-width: 1.3; }
.volume-row input { -webkit-appearance: none; appearance: none; height: 36px; margin: 0; background: transparent; cursor: pointer; }
.volume-row input::-webkit-slider-runnable-track { height: 1px; background: #484843; }
.volume-row input::-webkit-slider-thumb { -webkit-appearance: none; width: 5px; height: 11px; margin-top: -5px; border-radius: 0; background: #c3c3b9; border: 0; }
.volume-row input::-moz-range-track { height: 1px; background: #484843; }
.volume-row input::-moz-range-thumb { width: 5px; height: 11px; border-radius: 0; background: #c3c3b9; border: 0; }
.is-starting #listen { border-color: #aaa; }
.is-starting #listen::after { content: ""; position: absolute; inset: -1px; border: 1px solid #d4d4ca; animation: loading-edge 1.2s ease-in-out infinite; pointer-events: none; }
.is-starting .signal-display::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg,transparent 0%,#b9b9ad 50%,transparent 100%); background-size: 35% 100%; background-repeat: no-repeat; animation: loading-line 1.5s ease-in-out infinite; pointer-events: none; }
@keyframes loading-edge { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes loading-line { from { background-position: -55% 0; } to { background-position: 155% 0; } }
@media(max-width:380px) { .signal { height: auto; } .signal-display { height: 116px; } #listen { top: 58px; } }
@media(prefers-reduced-motion:reduce) { .is-starting #listen::after,.is-starting .signal-display::after { animation: none; } }
/* The signal fills the player; transport appears only for deliberate interaction. */
.signal-display { height: 180px; }
.signal svg { height: 164px; }
#listen,#listen:hover,.signal:hover #listen,.is-playing #listen,.is-playing .signal:hover #listen { top: 90px; width: 48px; height: 48px; border: 0; border-radius: 0; background: transparent; opacity: 0; transition: opacity .18s ease; }
#listen svg { width: 18px; height: 18px; }
.signal.show-transport #listen,#listen:focus-visible,.signal-display:focus-visible ~ #listen { opacity: .9; background: #0a0a0b99; }
.is-starting #listen { opacity: .6; }
.is-starting #listen::after { display: none; }
@media(hover:hover) { .signal:hover #listen,.is-playing .signal:hover #listen { opacity: .9; background: #0a0a0b88; } }
@media(max-width:380px) { .signal-display { height: 164px; } .signal svg { height: 148px; } #listen { top: 82px; } #listen svg { height: 18px; } }
@media(prefers-reduced-motion:reduce) { #listen { transition: none; } }
/* A clear initial Play target; once playing, the signal is unobstructed. */
body:not(.is-playing) #listen { opacity: 1; background: #0a0a0b88; }
#listen svg { width: 22px; height: 22px; }
.signal-display { height: 208px; }
.signal svg { height: 192px; }
#listen { top: 104px; }
#listen svg { height: 22px; }
@media(max-width:380px) { .signal-display { height: 192px; } .signal svg { height: 176px; } #listen { top: 96px; } #listen svg { height: 22px; } }
#listen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 100px; height: 66px; }
#play-hint { display: block; font: 9px/1.2 ui-monospace,monospace; letter-spacing: .08em; color: #b8b8af; white-space: nowrap; }
.is-playing #play-hint { color: #999991; }
/* Square transport plate, including Safari's native button rendering. */
#listen { -webkit-appearance: none; appearance: none; width: 80px; height: 80px; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#listen::before,#listen::after { border-radius: 0; }
body:not(.is-playing) #listen,.signal.show-transport #listen,#listen:focus-visible,.signal-display:focus-visible ~ #listen { background: rgba(20,20,21,.24); border-radius: 0; }
@media(hover:hover) { .signal:hover #listen,.is-playing .signal:hover #listen { background: rgba(20,20,21,.24); border-radius: 0; } }
#join-state { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; margin: 4px 0 12px; color: #a8a89f; font: 10px/1.4 ui-monospace,monospace; }
#join-state[hidden] { display: none; }
#cancel-join { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 6px 0 6px 12px; color: #bbbbae; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#join-progress { grid-column: 1/-1; appearance: none; -webkit-appearance: none; width: 100%; height: 2px; border: 0; background: #30302c; accent-color: #dadacf; }
#join-progress::-webkit-progress-bar { background: #30302c; }
#join-progress::-webkit-progress-value { background: #dadacf; transition: width .2s ease; }
#join-progress::-moz-progress-bar { background: #dadacf; }
@media(prefers-reduced-motion:reduce) { #join-progress::-webkit-progress-value { transition: none; } }
/* Connection progress occupies the waveform's line rather than adding another. */
.signal:has(#join-state:not([hidden])) .signal-display > svg { visibility: hidden; }
.is-starting .signal-display::after { display: none; }
#join-state { position: absolute; top: 104px; left: 0; right: 0; margin: 0; z-index: 0; }
#join-progress { grid-row: 1; }
#join-label,#cancel-join { grid-row: 2; }
@media(max-width:380px) { #join-state { top: 96px; } }
button.identity-note { appearance: none; -webkit-appearance: none; padding: 6px 0; border: 0; border-radius: 0; background: transparent; text-align: left; cursor: pointer; }
button.identity-note:hover { color: #b2b2a8; }
#signal-mirror { stroke: #aaa99d; opacity: .35; }
#signal-trail { stroke: #73736b; opacity: .18; }
.display-tools { margin: 6px 0 0; color: #92928a; font: 10px/1.5 ui-monospace,monospace; }
.display-tools summary { width: fit-content; padding: 8px 0; cursor: pointer; }
.display-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; padding: 10px 0 14px; }
.display-controls label { display: grid; gap: 6px; flex: 1; min-width: 90px; }
.display-controls select,.display-controls button { border: 1px solid #3f3f39; border-radius: 0; padding: 8px; color: #c4c4b8; background: #111112; font: inherit; min-height: 36px; cursor: pointer; }
.display-controls input { width: 100%; min-height: 36px; accent-color: #aaa99c; }
.display-controls button:disabled { opacity: .35; cursor: default; }
.display-controls button[aria-pressed="true"] { border-color: #aaa99c; }
.display-actions { display: flex; gap: 10px; align-items: center; }
@media(max-width:600px) {
  .display-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: end; gap: 10px; padding: 6px 0 8px; }
  .display-controls label { min-width: 0; }
  .display-actions { grid-column: 1/-1; }
  .display-actions button { flex: 1; min-height: 32px; padding: 6px; }
}
@media(max-width:600px) and (max-height:740px) {
  body { padding-top: max(12px,env(safe-area-inset-top)); padding-bottom: max(10px,env(safe-area-inset-bottom)); }
  main { min-height: calc(100svh - max(12px,env(safe-area-inset-top)) - max(10px,env(safe-area-inset-bottom))); }
  .selection { padding-top: 16px; }
  .eyebrow { margin-bottom: 8px; }
  h1 { font-size: 26px; }
  #artist { margin: 8px 0 10px; }
  .signal { margin: 16px 0 8px; }
  .signal-display { height: 140px; }
  .signal svg { height: 124px; }
  #listen,#join-state { top: 70px; }
  #listen svg { height: 22px; }
  .signal .controls { margin-top: 4px; }
  .volume-row input { height: 28px; }
  #message { margin: 6px 0 10px; min-height: 24px; }
  footer { padding-top: 10px; }
}

/* The full stop is the station's live indicator. */
#station .brand-period { display: inline; width: auto; height: auto; margin: 0 .035em; border-radius: 0; background: transparent; color: #d43d3d; }
.station-live #station .brand-period { background: transparent; color: #d43d3d; }


/* The waveform itself bends into monoline lettering, then returns. */
#signal-ident { opacity: 0; pointer-events: none; }
.signal .ident-morph-line { stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.signal-display.morphing #signal-ident { opacity: 1; }
#signal-trace,#signal-mirror,#signal-trail { transition: none; }
.signal-display.morphing #signal-trace,.signal-display.morphing #signal-mirror,.signal-display.morphing #signal-trail { opacity: 0; }