:root{color-scheme:dark;--bg:#080c09;--panel:#0c120e;--green:#9aff68;--muted:#81917f;--border:#354b33;font-family:Consolas,'Courier New',monospace;color:#dae6d5;background:var(--bg)}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(90deg,#9aff6803 1px,transparent 1px),linear-gradient(#9aff6803 1px,transparent 1px);background-size:32px 32px}.desktop{max-width:1200px;margin:auto;padding:0 36px;min-height:100svh;display:flex;flex-direction:column}.system-bar{display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-size:11px;letter-spacing:1px;color:var(--muted);border-bottom:1px solid var(--border)}main{flex:1;padding:54px 0 64px}.eyebrow{font-size:11px;letter-spacing:1.5px;color:var(--muted)}h1{font-size:clamp(44px,8vw,96px);line-height:.96;letter-spacing:-6px;font-weight:700;margin:24px 0;color:var(--green)}h1>span{color:var(--bg);-webkit-text-stroke:1px var(--green)}.tagline{color:var(--muted);font-size:14px;margin:0 0 40px}.modules{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:24px;align-items:start}.window{border:1px solid var(--border);background:var(--panel);box-shadow:5px 5px 0 #000}.title-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:11px 14px;color:var(--green);background:#132010;font-size:12px}.title-bar h2{font-size:12px;font-weight:400;letter-spacing:1px;margin:0}.icon-slot{display:inline-flex;min-width:22px;align-items:center;justify-content:center;margin-right:6px}.icon-slot img{width:18px;height:18px;object-fit:contain}.window-body{padding:24px}.readout{display:flex;justify-content:space-between;gap:12px;align-items:center}.badge{font-size:10px;padding:5px 7px;border:1px solid var(--border);color:var(--muted)}.badge[data-state=live]{color:var(--green);border-color:var(--green)}.badge[data-state=offline]{color:#ffbf83}.frequency{font-size:64px;color:var(--green);letter-spacing:-5px;margin:26px 0 20px;line-height:1}.frequency small{display:block;letter-spacing:3px;font-size:10px;margin-top:12px;color:var(--muted)}#playback-message{font-size:12px;line-height:1.6;min-height:39px;color:#b2c0ac}.transport{display:flex;gap:12px;margin:22px 0 26px}button{font:inherit;font-size:14px;min-height:48px;padding:12px 24px;border:1px solid var(--green);background:var(--green);color:#091106;cursor:pointer}button+button{background:transparent;color:var(--green)}button:hover:not(:disabled){background:#b7ff95;color:#091106}button:disabled{opacity:.38;cursor:default}:focus-visible{outline:2px solid #e2ffd5;outline-offset:4px}.volume{display:flex;align-items:center;gap:14px;font-size:11px}.volume input{min-width:0;flex:1;accent-color:var(--green);height:28px}.volume output{width:4ch;text-align:right}.window-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding:10px 14px;font-size:9px;color:var(--muted)}.source-state{font-size:26px;color:var(--green);margin:14px 0 30px}.listener-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding:20px 0;font-size:11px}.listener-row strong{font-size:30px;font-weight:400;color:var(--green)}.muted{font-size:11px;line-height:1.8;color:var(--muted);margin-bottom:0}footer.system-bar{border-top:1px solid var(--border);border-bottom:0;font-size:10px}
@media(max-width:650px){.desktop{padding:0 18px}main{padding:34px 0 40px}h1{letter-spacing:-3px}.modules{grid-template-columns:1fr;gap:20px}.window-body{padding:20px}.readout{align-items:flex-start}.readout .eyebrow{max-width:150px;line-height:1.6}.transport button{flex:1;padding:12px}.system-bar{font-size:9px}footer.system-bar{flex-wrap:wrap}.window-footer{font-size:8px}.volume{gap:10px}}
.now-playing{margin:26px 0 20px;min-height:115px;overflow-wrap:anywhere}#now-playing-title{font-size:clamp(24px,4vw,40px);line-height:1.15;color:var(--green);margin:12px 0}#now-playing-artist{font-size:16px;line-height:1.4;margin:0;color:#b2c0ac}#metadata-status{line-height:1.5}

/* Temporary departure-board faces; settled lines return to ordinary text. */
.flap-word{display:inline-block;max-width:100%}
.flap-cell{display:inline-grid;position:relative;vertical-align:baseline;perspective:160px}
.flap-measure{visibility:hidden}
.flap-face{position:absolute;inset:0;text-align:center;overflow:hidden;background:linear-gradient(to bottom,#172315 0%,#172315 48%,#080c09 49%,#080c09 52%,#10190f 53%);border-radius:2px;box-shadow:inset 0 0 0 1px #354b3355;transform-origin:center}
.flap-cycling .flap-face{animation:flap-turn 92ms steps(2,end) infinite}
.flap-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes flap-turn{0%{transform:rotateX(-32deg);filter:brightness(.75)}50%{transform:rotateX(20deg);filter:brightness(1.2)}100%{transform:rotateX(0);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.flap-cycling .flap-face{animation:none}}

/* Recent history uses the same terminal window, with five visible rows. */
.history-window{margin-top:24px}
.history-window .window-body{padding-bottom:16px}
.history-list{list-style:none;margin:0;padding:0;max-height:22.5rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border) var(--panel)}
.history-row{height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border);padding:10px 8px 10px 0}
.history-row>div{min-width:0}
.history-row strong,.history-row span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.history-row strong{font-size:14px;font-weight:400;color:var(--green)}
.history-row span{font-size:12px;color:var(--muted);margin-top:7px}
.history-row time{flex-shrink:0;font-size:11px;color:var(--muted);white-space:nowrap}
#history-message{margin-top:12px}

/* Desktop terminal: compact chrome and a four-row history viewport.
   No page overflow lock: small windows and enlarged text can still scroll. */
@media(min-width:900px){
  .desktop{max-width:1200px}
  .system-bar{padding:10px 0}
  main{padding:clamp(8px,1.5svh,20px) 0 14px}
  main>.eyebrow{margin:0}
  h1{font-size:clamp(32px,4.5svh,52px);letter-spacing:-2px;margin:8px 0}
  .tagline{font-size:12px;margin-bottom:16px}
  .modules{gap:16px 24px}
  .title-bar{padding:8px 14px}
  .window-body{padding:12px 20px}
  .window-footer{padding:8px 14px}
  .now-playing{min-height:82px;margin:10px 0}
  #now-playing-title{font-size:clamp(24px,3svh,32px);margin:8px 0}
  #now-playing-artist{font-size:14px}
  #metadata-status{margin:0}
  #playback-message{min-height:20px;margin:8px 0}
  .transport{margin:12px 0 14px}
  .transport button{min-height:44px;padding:10px 24px}
  .modules>aside .eyebrow{margin:0}
  .source-state{font-size:22px;margin:8px 0 12px}
  .listener-row{padding:8px 0}
  .listener-row strong{font-size:26px}
  .modules>aside .muted{margin:0}
  .history-window{margin-top:16px}
  .history-window .window-body{padding:0 20px 6px}
  .history-list{max-height:12rem}
  .history-row{height:3rem;padding:6px 8px 6px 0}
  .history-row strong{font-size:12px}
  .history-row span{font-size:11px;margin-top:3px}
  #history-message{font-size:10px;margin-top:4px;line-height:1.4}
}
.history-list::-webkit-scrollbar{width:5px}
.history-list::-webkit-scrollbar-track{background:var(--panel)}
.history-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* Short laptop viewports trade the two-line hero for a single-line masthead. */
@media(min-width:900px) and (max-height:820px){
  .system-bar{padding:8px 0}
  main{padding:8px 0}
  h1{font-size:32px;margin:6px 0}
  h1 br{display:none}
  .tagline{margin-bottom:10px}
  .modules{row-gap:12px}
  .history-window{margin-top:12px}
}
@media(min-width:900px) and (max-height:820px){h1>span{margin-left:.2em}}

/* Keep the branding row compact, with the same breathing room as the header. */
@font-face{font-family:Neuropol;src:url('../assets/branding/Neuropol.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
.station-heading>h1{font-family:Neuropol,Consolas,monospace;font-weight:400;letter-spacing:0;line-height:1.1}
.desktop>.system-bar{min-height:56px;flex-shrink:0;align-items:center;padding:7px 0}
.station-heading{--branding-gap:clamp(18px,2svh,26px);position:relative;display:flow-root;min-height:calc(120px + var(--branding-gap));padding:0 150px var(--branding-gap) 0}
.station-heading>.tagline{margin-bottom:0}
.station-heading>.eyebrow{margin-top:0}
.signal-window{position:relative}
.signal-brand{position:absolute;right:0;bottom:var(--branding-gap);width:120px;pointer-events:none}
.signal-brand img{display:block;width:100%;height:auto}
footer.system-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
footer.system-bar>span:last-child{text-align:right}
.footer-brand{display:block;height:40px;width:auto;opacity:.65;pointer-events:none}
@media(max-width:650px){
  .station-heading{min-height:0;padding:0}
  .station-heading>.tagline{margin-bottom:40px}
  .station-heading>h1{margin-right:64px;font-size:clamp(22px,6.5vw,40px)}
  .signal-brand{width:48px;top:36px;bottom:auto}
  footer.system-bar{gap:8px}
  footer.system-bar>span{overflow-wrap:anywhere;line-height:1.5}
}