:root{
  color-scheme:dark;
  background:#000;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000}
.waves-monitor{
  --chrome-glass:rgba(5,6,8,.43);
  --chrome-glass-head:rgba(9,10,12,.56);
  --chrome-line:rgba(255,255,255,.14);
  --chrome-line-soft:rgba(255,255,255,.08);
  --chrome-ink:#f2d98b;
  --chrome-muted:#c3ad73;
  --chrome-accent:#ff9b38;
  --chrome-shadow:rgba(0,0,0,.28);
  position:fixed;z-index:1;inset:0;width:100vw;height:100dvh;background:#000;overflow:hidden;
}
.waves-monitor canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#000}
.waves-monitor canvas[data-deck]{z-index:0;visibility:hidden}
.waves-monitor canvas[data-master-output]{z-index:2;visibility:visible}

/* Public attribution: dark translucent hardware glass with fully opaque type.
   The treatment borrows the restraint of rack/handheld chrome without paying
   the GPU cost of a backdrop blur over a continuously moving canvas. */
.waves-attribution{
  position:absolute;z-index:6;
  left:max(12px,env(safe-area-inset-left));
  bottom:max(12px,env(safe-area-inset-bottom));
  width:min(430px,calc(100vw - 92px));
  max-width:72vw;
  border:1px solid var(--chrome-line);
  border-radius:4px;
  background:linear-gradient(180deg,var(--chrome-glass-head),var(--chrome-glass));
  color:var(--chrome-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 28px var(--chrome-shadow);
  overflow:hidden;
  font-family:"Courier New",ui-monospace,SFMono-Regular,Consolas,monospace;
  transition:filter .36s ease,transform .36s ease,border-color .8s ease,background-color .8s ease;
}
.waves-attribution[data-pulse=true]{transform:translateY(-1px);filter:brightness(1.06)}
.waves-attribution-head{
  min-height:21px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;
  padding:4px 7px;
  border-bottom:1px solid var(--chrome-line-soft);
  background:rgba(0,0,0,.10);
  color:var(--chrome-ink);
  text-shadow:0 1px 2px #000;
}
.waves-chrome-led{width:6px;height:6px;border-radius:50%;background:var(--chrome-accent);box-shadow:0 0 7px color-mix(in srgb,var(--chrome-accent) 64%,transparent)}
.waves-now-label{font-size:9px;line-height:1;font-weight:900;letter-spacing:.13em;white-space:nowrap}
.waves-chrome-code{font-size:8px;line-height:1;font-weight:800;letter-spacing:.09em;color:var(--chrome-muted);white-space:nowrap}
.waves-attribution-display{
  display:grid;gap:2px;padding:8px 9px 9px;
  background:rgba(0,0,0,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  text-shadow:0 1px 2px #000,0 0 5px color-mix(in srgb,var(--chrome-ink) 22%,transparent);
}
.waves-track-line{min-width:0;font-size:13px;line-height:1.18;font-weight:900;letter-spacing:.01em}
.waves-source-link{
  color:var(--chrome-ink);text-decoration:none;outline:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;min-width:0;
}
.waves-source-link[href]{cursor:pointer}
.waves-source-link[href]:hover,.waves-source-link[href]:focus-visible{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.waves-source-link[href]::after{content:" ↗";font-size:.78em;opacity:.72}
.waves-source-link[aria-disabled="true"]{cursor:default}
.waves-creator-link{font-size:10px;line-height:1.25;color:var(--chrome-muted)}
.waves-visual-credit{display:grid;gap:3px;margin-top:5px;padding-top:5px;border-top:1px solid var(--chrome-line-soft);font-size:9px;line-height:1.25;color:var(--chrome-muted)}
.waves-credit-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:5px;min-width:0}
.waves-credit-kind{font-size:8px;color:var(--chrome-accent);letter-spacing:.08em;font-weight:900}
.waves-credit-links{display:flex;flex-wrap:wrap;gap:0 5px;min-width:0}
.waves-credit-links .waves-source-link{display:inline;white-space:normal;overflow:visible;text-overflow:clip;color:var(--chrome-muted)}
.waves-credit-sep{opacity:.5}

/* Minimal speaker control remains permanently available. No backdrop blur: it
   should cost almost nothing while sitting over the moving programme surface. */
.waves-audio-toggle{
  position:absolute;z-index:9;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));
  min-width:54px;height:27px;padding:0 8px;
  border:1px solid rgba(255,255,255,.24);border-radius:3px;
  background:rgba(4,5,7,.46);color:rgba(255,255,255,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 4px 14px rgba(0,0,0,.22);
  font:800 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.waves-audio-toggle:hover,.waves-audio-toggle:focus-visible{border-color:var(--chrome-accent);color:#fff;background:rgba(0,0,0,.66);outline:none}
.waves-audio-toggle[data-state="muted"],.waves-audio-toggle[data-state="blocked"]{color:var(--chrome-accent)}

/* Persistent textual station ident. It is only text: no cell, border, fill or
   backdrop treatment. Motion is compositor-only and waypoint driven by the
   overlay controller, so one transform smoothly lerps into the next. */
.waves-ident-overlay{
  position:absolute;z-index:4;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));
  pointer-events:none;user-select:none;
  padding:0;border:0;background:none;box-shadow:none;
  color:rgba(255,255,255,.70);
  font-size:clamp(10px,1.08vw,15px);line-height:1;font-weight:760;
  letter-spacing:.075em;text-transform:lowercase;
  text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 8px color-mix(in srgb,var(--chrome-accent) 26%,transparent);
  opacity:.74;will-change:transform;
  transform:translate3d(var(--ident-x,0px),var(--ident-y,0px),0);
  transition:transform var(--ident-motion-duration,16s) cubic-bezier(.22,.61,.36,1),opacity .85s ease,letter-spacing .85s ease,font-weight .85s ease;
}
.waves-ident-overlay[data-font-shifting="true"]{opacity:.38;letter-spacing:.12em}
.waves-ident-overlay[data-font="terminal"]{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-weight:760}
.waves-ident-overlay[data-font="condensed"]{font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;font-stretch:condensed;font-weight:800;letter-spacing:.10em}
.waves-ident-overlay[data-font="serif"]{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.045em}
.waves-ident-overlay[data-font="humanist"]{font-family:"Trebuchet MS","Segoe UI",sans-serif;font-weight:700;letter-spacing:.055em}
.waves-ident-overlay[data-font="system"]{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:820;letter-spacing:.065em}

/* Hardware-era presets now mutate the glass tint and luminous text rather than
   replacing the semantic overlay with opaque plastic/LCD surfaces. */
.waves-monitor[data-chrome="rack-amber"]{
  --chrome-glass:rgba(6,6,6,.43);--chrome-glass-head:rgba(15,14,12,.57);--chrome-line:rgba(255,199,93,.20);--chrome-line-soft:rgba(255,199,93,.10);
  --chrome-ink:#ffd16a;--chrome-muted:#c9a45c;--chrome-accent:#ff8e2f;--chrome-shadow:rgba(0,0,0,.30);
}
.waves-monitor[data-chrome="portable-lcd"]{
  --chrome-glass:rgba(8,10,8,.42);--chrome-glass-head:rgba(14,18,13,.55);--chrome-line:rgba(190,220,154,.18);--chrome-line-soft:rgba(190,220,154,.09);
  --chrome-ink:#d6efb5;--chrome-muted:#9fbd84;--chrome-accent:#aee779;--chrome-shadow:rgba(0,0,0,.28);
}
.waves-monitor[data-chrome="media-skin"]{
  --chrome-glass:rgba(4,8,10,.43);--chrome-glass-head:rgba(7,17,20,.56);--chrome-line:rgba(102,245,255,.18);--chrome-line-soft:rgba(102,245,255,.09);
  --chrome-ink:#8df7ff;--chrome-muted:#74b9bf;--chrome-accent:#d8f45c;--chrome-shadow:rgba(0,0,0,.28);
}
.waves-monitor[data-chrome="minidisc-blue"]{
  --chrome-glass:rgba(3,7,14,.44);--chrome-glass-head:rgba(8,17,32,.58);--chrome-line:rgba(121,220,255,.19);--chrome-line-soft:rgba(121,220,255,.09);
  --chrome-ink:#8ee3ff;--chrome-muted:#79a6bf;--chrome-accent:#f2a9ff;--chrome-shadow:rgba(0,0,0,.30);
}
.waves-monitor[data-chrome="handheld-indigo"]{
  --chrome-glass:rgba(8,5,15,.43);--chrome-glass-head:rgba(22,14,34,.58);--chrome-line:rgba(231,199,255,.20);--chrome-line-soft:rgba(231,199,255,.10);
  --chrome-ink:#edd8ff;--chrome-muted:#b8a4c8;--chrome-accent:#78ffd8;--chrome-shadow:rgba(0,0,0,.30);
}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Direct deck compositing: browser/GPU blends already-rendered A/B surfaces.
   A tiny opacity transition hides 30Hz mix-projection quantisation without a
   third full-screen Canvas copy. */
.waves-monitor[data-compositor="css"] canvas[data-deck]{visibility:visible;will-change:opacity;contain:strict}
.waves-monitor[data-compositor="css"] canvas[data-deck="A"]{z-index:0}
.waves-monitor[data-compositor="css"] canvas[data-deck="B"]{z-index:1;transition:opacity 82ms linear}
.waves-monitor[data-compositor="css"] canvas[data-master-output]{visibility:hidden!important;opacity:0!important;pointer-events:none}

@media(max-width:600px){
  .waves-attribution{max-width:none;width:min(360px,calc(100vw - 80px));left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom))}
  .waves-attribution-display{padding:6px 7px 7px}.waves-track-line{font-size:11px}.waves-creator-link{font-size:9px}.waves-visual-credit{font-size:8px}
  .waves-audio-toggle{right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));min-width:50px;height:27px;padding:0 6px}
  .waves-ident-overlay{left:max(9px,env(safe-area-inset-left));top:max(9px,env(safe-area-inset-top));font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .waves-attribution,.waves-audio-toggle,.waves-ident-overlay{transition:none!important}
  .waves-ident-overlay{transform:translate3d(0,0,0)!important}
}

/* v0.2.0g4 broadcast identity stack. These overlays are final programme-page
   presentation, so an OBS/browser-source recording receives the same identity
   treatment as a viewer. Motion stays compositor-only and uses MotionPath. */
.waves-overlay-stack{
  --type-font:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --type-weight:760;--type-tracking:.075em;--type-transform:uppercase;
  position:absolute;z-index:5;inset:0;pointer-events:none;overflow:hidden;contain:layout paint style;
}
.waves-overlay-stack[data-type-preset="terminal-grid"]{--type-font:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;--type-weight:760;--type-tracking:.075em;--type-transform:lowercase}
.waves-overlay-stack[data-type-preset="condensed-signal"]{--type-font:"Arial Narrow","Roboto Condensed",Arial,sans-serif;--type-weight:820;--type-tracking:.105em;--type-transform:uppercase}
.waves-overlay-stack[data-type-preset="editorial-serif"]{--type-font:Georgia,"Times New Roman",serif;--type-weight:700;--type-tracking:.045em;--type-transform:none}
.waves-overlay-stack[data-type-preset="humanist-tech"]{--type-font:"Trebuchet MS","Segoe UI",sans-serif;--type-weight:760;--type-tracking:.06em;--type-transform:uppercase}
.waves-overlay-stack[data-type-preset="system-broadcast"]{--type-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--type-weight:820;--type-tracking:.07em;--type-transform:uppercase}
.waves-station-mark{
  position:absolute;right:max(14px,env(safe-area-inset-right));top:max(13px,env(safe-area-inset-top));
  max-width:min(42vw,360px);color:rgba(255,255,255,.56);text-align:right;
  font-family:var(--type-font);font-weight:var(--type-weight);font-size:clamp(8px,.76vw,11px);letter-spacing:var(--type-tracking);text-transform:var(--type-transform);
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 8px color-mix(in srgb,var(--chrome-accent) 20%,transparent);opacity:.68;
}
.waves-transmission-overlay{
  position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));
  width:max-content;max-width:min(72vw,880px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:rgba(255,255,255,.48);font-family:var(--type-font);font-weight:var(--type-weight);font-size:clamp(7px,.68vw,10px);letter-spacing:var(--type-tracking);text-transform:var(--type-transform);
  text-shadow:0 1px 2px rgba(0,0,0,.92),0 0 7px color-mix(in srgb,var(--chrome-accent) 15%,transparent);opacity:.64;will-change:transform;
  transform:translate3d(var(--motion-x,0px),var(--motion-y,0px),0);transition:transform var(--motion-duration,24s) cubic-bezier(.22,.61,.36,1),opacity 1.2s ease;
}
@media(max-width:600px){
  .waves-station-mark{right:max(9px,env(safe-area-inset-right));top:max(9px,env(safe-area-inset-top));font-size:7px;max-width:42vw}
  .waves-transmission-overlay{left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));font-size:6px;max-width:68vw;opacity:.48}
}
@media(prefers-reduced-motion:reduce){.waves-transmission-overlay{transform:translate3d(0,0,0)!important;transition:none!important}}