:root {
  color-scheme:dark;
  --signal:#b5ed88;
  --case:#36394e;
  --edge:#74798e;
  --ink:#080d0a;
  font:13px Tahoma,Verdana,sans-serif;
  color:#edf0f7;
  background:#202332;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:24px;
  background:#202332;
}
button,input {
  font:inherit;
}
button {
  cursor:pointer;
  min-height:36px;
  touch-action:manipulation;
  color:#141625;
  background:linear-gradient(#e0e1e7,#acb0c2);
  border:2px solid;
  border-color:#f1f2f5 #171927 #171927 #f1f2f5;
  padding:6px 10px;
  font-weight:700;
}
button:hover {
  background:#edf0f7;
}
button:active {
  border-color:#171927 #f1f2f5 #f1f2f5 #171927;
}
button:disabled {
  cursor:wait;
  opacity:.55;
}
button:focus-visible,input:focus-visible,a:focus-visible {
  outline:2px solid #fff09d;
  outline-offset:3px;
}
.deck {
  width:min(100%,580px);
  min-width:0;
  padding:5px;
  border:2px solid;
  border-color:#a5aabc #11121e #11121e #a5aabc;
  background:var(--case);
  box-shadow:5px 5px 0 #10111c;
  outline:none;
}
.titlebar {
  height:44px;
  display:flex;
  gap:12px;
  align-items:center;
  padding:3px 4px 6px;
}
.titlebar h1 {
  font:bold 13px Tahoma,Verdana,sans-serif;
  letter-spacing:2px;
  white-space:nowrap;
  margin:0;
  color:#e8e8f0;
}
.titlebar h1 span {
  color:#b8bdce;
  font-weight:400;
}
.title-lines {
  height:14px;
  flex:1;
  background:repeating-linear-gradient(0deg,#141626 0 1px,#777c91 1px 2px,transparent 2px 4px);
}
#shade {
  padding:0;
  width:32px;
  min-height:28px;
  font-size:19px;
}
.receiver {
  padding:7px 8px 3px;
  border:1px solid;
  border-color:#75798e #171a2b #171a2b #75798e;
}
.screen {
  background:var(--ink);
  border:2px solid;
  border-color:#11131d #74798e #74798e #11131d;
  padding:10px 12px;
  color:var(--signal);
  font-family:'Courier New',monospace;
}
.screen-top {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  color:#a0ac9d;
}
.air {
  display:flex;
  align-items:center;
  gap:7px;
}
.air i {
  display:inline-block;
  width:7px;
  height:7px;
  background:#405045;
}
.air i.lit {
  background:var(--signal);
}
.station-face {
  display:flex;
  align-items:center;
  gap:18px;
  min-height:67px;
}
#clock {
  background:none;
  border:0;
  color:var(--signal);
  padding:0;
  font:40px 'Courier New',monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-3px;
  white-space:nowrap;
  min-width:118px;
  text-align:left;
}
#clock:disabled {
  opacity:1;
  cursor:default;
}
.station-info {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
#station-name {
  font-size:16px;
  font-weight:bold;
  overflow-wrap:anywhere;
}
#format {
  font-size:10px;
  color:#afbaa8;
  line-height:1.5;
}
.ticker {
  font-size:13px;
  height:29px;
  padding-top:4px;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
}
.track-progress {
  height:5px;
  background:#233121;
  margin:3px 0 1px;
}
.track-progress span {
  display:block;
  height:100%;
  width:0;
  background:var(--signal);
}
.controls {
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 0 8px;
}
.transport {
  display:flex;
  gap:3px;
  flex:none;
}
.transport button {
  font-size:12px;
  padding:5px 7px;
  min-height:38px;
}
#power {
  min-width:94px;
}
.controls label {
  font-size:11px;
  margin-left:auto;
}
.controls input {
  width:100%;
  min-width:32px;
  max-width:105px;
  height:30px;
  accent-color:#b5ed88;
  cursor:pointer;
}
.controls output {
  width:24px;
  flex:none;
  text-align:right;
  font:11px 'Courier New',monospace;
  color:#d9dfec;
}
.gate {
  padding-top:10px;
  display:flex;
  gap:12px;
  align-items:center;
}
.gate[hidden] {
  display:none;
}
.gate p {
  font-size:12px;
  line-height:1.5;
  margin:0;
  color:#d1d5e2;
}
.visual-panel,.playlist {
  margin-top:6px;
  border:1px solid;
  border-color:#75798e #171a2b #171a2b #75798e;
  padding:5px;
}
.module-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:28px;
  background:linear-gradient(90deg,#141a66,#363b5f);
  padding:3px 7px;
  margin-bottom:5px;
}
.module-title h2 {
  font-size:12px;
  margin:0;
  color:#f0f1fa;
}
.module-title>span {
  font-size:11px;
  color:#c7ccdd;
}
#visual-mode {
  min-height:28px;
  padding:2px 9px;
  font-size:11px;
}
.visual {
  position:relative;
  height:96px;
  border:2px solid;
  border-color:#10121d #72788a #72788a #10121d;
  background:var(--ink);
}
canvas {
  display:block;
  width:100%;
  height:100%;
}
#visual-status {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font:11px 'Courier New',monospace;
  color:#a1b298;
  text-align:center;
  padding:10px;
  pointer-events:none;
}
#visual-status[hidden] {
  display:none;
}
nav {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3px;
  padding:3px;
  background:#121421;
}
nav button {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  min-height:38px;
  text-align:left;
  font-size:11px;
  background:#303448;
  border:1px solid #60667e;
  color:#dfe3ed;
  padding:7px;
}
nav button span {
  font:11px 'Courier New',monospace;
  color:#9fa8bf;
}
nav button:hover {
  background:#434b62;
}
nav button[aria-pressed=true] {
  background:#151e17;
  color:var(--signal);
  border-color:#8fba79;
}
nav button[aria-pressed=true] span {
  color:var(--signal);
}
.rotation {
  margin-top:5px;
  padding:7px 8px;
  background:var(--ink);
  color:#b7c3ad;
  border:2px solid;
  border-color:#11131d #74798e #74798e #11131d;
  font:11px 'Courier New',monospace;
}
.rotation-heading {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-family:Tahoma,Verdana,sans-serif;
  font-size:10px;
  color:#92a08b;
  padding-bottom:6px;
  border-bottom:1px solid #2b3529;
}
#tracks {
  list-style:none;
  margin:3px 0 0;
  padding:0;
}
#tracks li {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:12px;
  padding:3px 0;
  line-height:1.4;
}
#tracks li[aria-current=true] {
  color:var(--signal);
  font-weight:bold;
}
#tracks li[aria-current=true] .track-name:before {
  content:'▶ ';
  font-size:9px;
}
.track-name {
  min-width:0;
  overflow-wrap:anywhere;
}
.track-length {
  flex:none;
}
.station-note {
  font-size:11px;
  line-height:1.5;
  padding:8px 4px 4px;
  color:#d0d5e0;
}
#provider {
  display:block;
  color:#d2dcff;
  font-size:11px;
  line-height:1.5;
  padding:0 4px 5px;
}
#provider[hidden] {
  display:none;
}
footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 5px 3px;
  color:#bcc2d1;
  font-size:10px;
  line-height:1.4;
}
.deck.shaded .expanded,.deck.shaded .station-face,.deck.shaded .track-progress {
  display:none;
}
.deck.shaded .ticker {
  margin-top:6px;
}
.deck.shaded .titlebar {
  height:36px;
}
html.compact {
  background:transparent;
}
html.compact body {
  min-height:0;
  display:block;
  padding:0;
  background:transparent;
}
html.compact .deck {
  width:100%;
  margin:0;
  box-shadow:none;
}
html.embedded .titlebar {
  padding-right:96px;
  height:56px;
}
html.embedded #shade {
  display:none;
}
@media(max-width:400px) {
  body {
    padding:8px;
  }
  .receiver {
    padding:5px;
  }
  .screen {
    padding:8px;
  }
  .station-face {
    gap:10px;
  }
  #clock {
    font-size:34px;
    min-width:102px;
  }
  #station-name {
    font-size:13px;
  }
  #format {
    font-size:9px;
  }
  .controls {
    flex-wrap:wrap;
    gap:6px;
  }
  .transport {
    flex:1;
  }
  .controls label {
    margin-left:0;
  }
  .controls input {
    max-width:70px;
  }
  .transport button {
    min-height:40px;
    padding:5px;
  }
  #power {
    min-width:83px;
  }
  .gate {
    gap:8px;
  }
  .gate p {
    font-size:11px;
  }
    .visual {
    height:88px;
  }
  nav button {
    font-size:10px;
    gap:6px;
    min-height:40px;
  }
  footer {
    font-size:9px;
  }
  .screen-top {
    font-size:9px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .ticker {
    letter-spacing:0;
  }
}

.gate { padding-top:7px; }
.gate p { font-size:11px; }

/* Native preset controls stay readable at compact desktop-player sizes. */
#visual-mode {
  color:#eaf0df;
  background:#141c17;
  border:2px solid;
  border-color:#10121d #72788a #72788a #10121d;
  min-height:30px;
  max-width:55%;
  font:12px Tahoma,Verdana,sans-serif;
  padding:3px 6px;
}
#visual-mode:focus-visible {
  outline:2px solid #fff09d;
  outline-offset:2px;
}
.visual-tools {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding-top:5px;
}
.visual-tools button {
  flex:1;
  white-space:nowrap;
  font-size:11px;
  min-height:30px;
  padding:4px 6px;
}
.visual-tools button:last-child { flex:0; }
.visual-panel.visual-large .visual { height:260px; }
@media (max-width:400px) {
  .visual-tools { gap:3px; }
  .visual-tools button { font-size:10px; padding:4px; }
  .visual-panel.visual-large .visual { height:200px; }
}
@media (max-width:340px) {
  .controls { display:grid; grid-template-columns:auto minmax(40px,1fr) 24px; }
  .transport { grid-column:1 / -1; }
  .transport #power { flex:1; }
  .controls input { max-width:none; }
}