:root {
      --bg-a: #3b3028;
      --bg-b: #1b1613;
      --chassis-top: #8f7c6a;
      --chassis-mid: #665548;
      --chassis-low: #44362d;
      --bezel: #181312;
      --bezel-hi: #3e3128;
      --screen: #0a1114;
      --screen-glow: #8df0ca;
      --lcd-bg: #d9cf9f;
      --lcd-text: #5e552e;
      --dispatch: #ff9d2f;
      --dispatch-2: #ffd166;
      --danger: #ff5a3d;
      --good: #8ee39f;
      --muted: #d8c7b7;
      --text: #fff4e9;
      --line: rgba(255, 228, 201, 0.14);
      --mono: "IBM Plex Mono", Menlo, monospace;
      --lcd-font: "VT323", "IBM Plex Mono", Menlo, monospace;
      --sans: "Space Grotesk", "Segoe UI", sans-serif;
      --title: "Bebas Neue", Impact, sans-serif;
      --beat-pulse: 0;
      --snow-strength: 0;
      --snow-opacity: 0;
      --lcd-jitter-x: 0px;
      --lcd-jitter-y: 0px;
      --lcd-jitter-skew: 0deg;
      --lcd-jitter-shadow: 0px;
      --lcd-jitter-contrast: 1;
      --lcd-ghost-x: .8px;
      --lcd-ghost-y: .3px;
      --lcd-ghost-skew: -.18deg;
      --lcd-ghost-fade-ms: 820ms;
      --panel-radius: 18px;
      --layout-gap: 16px;
      --right-panel-ratio: 38.6364%;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: var(--sans);
      background:
        radial-gradient(circle at 16% 12%, rgba(255, 157, 47, 0.18), transparent 20%),
        radial-gradient(circle at 82% 14%, rgba(255, 209, 102, 0.08), transparent 18%),
        radial-gradient(circle at 50% 100%, rgba(255, 90, 61, 0.14), transparent 34%),
        url("../map/soiled-paper.jpg") center/420px auto repeat,
        linear-gradient(165deg, var(--bg-a), var(--bg-b) 72%);
      background-blend-mode: screen, screen, screen, multiply, normal;
      padding: 18px;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.28;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(180deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 8px),
        radial-gradient(circle at 20% 24%, rgba(255,255,255,0.06) 0 2px, transparent 3px) 0 0 / 38px 38px;
      mix-blend-mode: soft-light;
    }

    .radio {
      position: relative;
      max-width: 1360px;
      margin: 0 auto;
      border-radius: 34px;
      padding: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.16);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0) 15%, rgba(0,0,0,0.14) 82%),
        linear-gradient(180deg, var(--chassis-top), var(--chassis-mid) 48%, var(--chassis-low)),
        radial-gradient(circle at 14% 14%, rgba(255,255,255,0.22), transparent 24%),
        radial-gradient(circle at 84% 86%, rgba(0,0,0,0.24), transparent 28%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 1px, rgba(0,0,0,0.02) 1px, rgba(0,0,0,0.02) 3px, transparent 3px, transparent 7px);
      box-shadow:
        0 34px 80px rgba(0,0,0,0.46),
        0 10px 24px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -10px 18px rgba(0,0,0,0.24);
    }

    .radio::after {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 24px;
      pointer-events: none;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 0 0 1px rgba(0,0,0,0.16);
    }

    .topbar {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 18px;
      min-width: 0;
    }

    .logo-box {
      width: 118px;
      height: 118px;
      padding: 10px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.14);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 25%, rgba(0,0,0,0.14)),
        linear-gradient(180deg, #49392f, #241d19);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -8px 14px rgba(0,0,0,0.24),
        0 10px 22px rgba(0,0,0,0.22);
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .logo-box img {
      width: 122%;
      height: 122%;
      max-width: none;
      max-height: none;
      object-fit: contain;
      object-position: center;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.24));
    }

    h1 {
      margin: 0;
      font: 400 clamp(38px, 7vw, 68px)/0.88 var(--title);
      color: var(--dispatch-2);
      letter-spacing: 1px;
      text-shadow: 0 2px 0 rgba(0,0,0,0.28);
    }

    .ticker {
      position: relative;
      margin-left: auto;
      align-self: flex-start;
      flex: 0 0 auto;
      width: clamp(340px, calc((100% - var(--layout-gap)) * 0.386364), 720px);
      max-width: 100%;
      padding: 7px 10px 7px 12px;
      border-radius: var(--panel-radius);
      border: 1px solid rgba(255, 124, 84, 0.38);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01) 10%, rgba(0,0,0,0.14)),
        linear-gradient(180deg, #130707, #060203);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 0 0 1px rgba(255, 124, 84, 0.08),
        inset 0 -8px 14px rgba(0,0,0,0.3),
        0 0 0 1px rgba(18, 6, 5, 0.5),
        0 8px 14px rgba(0,0,0,0.1);
      overflow: hidden;
      filter: saturate(1.22) brightness(1.12);
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .ticker::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 146, 102, 0.08) 18px 19px, transparent 19px 36px),
        repeating-linear-gradient(0deg, rgba(255, 112, 76, 0.035) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 28%, rgba(0,0,0,0.12));
      mix-blend-mode: screen;
      opacity: 0.5;
    }

    .ticker::after {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: calc(var(--panel-radius) - 4px);
      pointer-events: none;
      border: 1px solid rgba(255, 144, 96, 0.1);
      box-shadow:
        inset 0 0 8px rgba(255, 112, 72, 0.1),
        inset 0 0 16px rgba(255, 112, 72, 0.03);
    }

    .seg-ticker {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 2px;
      width: 100%;
      min-height: 20px;
      overflow: hidden;
    }

    .seg-char {
      position: relative;
      width: 12px;
      height: 20px;
      flex: 0 0 auto;
      opacity: 0.42;
    }

    .seg-char.space {
      width: 5px;
    }

    .seg-char.wide {
      width: 15px;
    }

    .seg-char .seg {
      position: absolute;
      background: rgba(214, 112, 36, 0.42);
      border-radius: 2px;
      box-shadow:
        inset 0 0 1px rgba(255, 228, 194, .16),
        0 0 4px rgba(255, 144, 86, 0.12);
      transition: background-color 120ms linear, box-shadow 120ms linear, opacity 120ms linear;
    }

    .seg-char .seg.on {
      background: rgb(255, 140, 0);
      box-shadow:
        0 0 6px rgba(255, 222, 176, 1),
        0 0 14px rgba(255, 174, 76, 1),
        0 0 28px rgba(255, 140, 0, 0.92),
        0 0 44px rgba(255, 140, 0, 0.58),
        0 0 68px rgba(255, 140, 0, 0.3);
      opacity: 1;
    }

    .seg-a,
    .seg-d,
    .seg-g {
      left: 3px;
      width: 6px;
      height: 2px;
    }

    .seg-a { top: 1px; }
    .seg-g { top: 8px; }
    .seg-d { top: 17px; }

    .seg-b,
    .seg-c,
    .seg-e,
    .seg-f {
      width: 2px;
      height: 6px;
      top: 2px;
    }

    .seg-b { right: 1px; }
    .seg-c { right: 1px; top: 10px; }
    .seg-e { left: 1px; top: 10px; }
    .seg-f { left: 1px; }

    .seg-char .seg-dot {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      right: 1px;
      bottom: 0;
    }

    .seg-char .seg-slash {
      width: 2px;
      height: 18px;
      left: 5px;
      top: 1px;
      transform: rotate(24deg);
      transform-origin: center;
    }

    .seg-char .seg-colon-top,
    .seg-char .seg-colon-bottom {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      left: 4px;
    }

    .seg-char .seg-colon-top { top: 5px; }
    .seg-char .seg-colon-bottom { top: 12px; }

    .layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
      gap: var(--layout-gap);
    }

    .module {
      border-radius: var(--panel-radius);
      border: 1px solid rgba(255,255,255,0.1);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
        linear-gradient(180deg, rgba(25,19,17,0.92), rgba(17,13,12,0.96));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -10px 18px rgba(0,0,0,0.18);
    }

    .left-stack {
      display: grid;
      gap: 16px;
    }

    .scope-shell {
      padding: 12px;
      border-radius: var(--panel-radius);
      border: 2px solid var(--bezel-hi);
      background: linear-gradient(180deg, #7b6758, #58483c);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -16px 22px rgba(0,0,0,0.28);
    }

    .scope-bezel {
      position: relative;
      border-radius: var(--panel-radius);
      padding: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.1)),
        linear-gradient(180deg, #181312, #0d0b0a);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -8px 16px rgba(0,0,0,0.32);
      overflow: hidden;
    }

    .scope-screen {
      position: relative;
      min-height: 320px;
      border-radius: var(--panel-radius);
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 12%, rgba(141, 240, 202, 0.08), transparent 25%),
        linear-gradient(180deg, rgba(8, 19, 22, 0.96), rgba(4, 10, 12, 0.98));
      box-shadow:
        inset 0 0 24px rgba(0,0,0,0.44),
        inset 0 0 40px rgba(141,240,202,0.06);
    }

    .scope-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, rgba(141, 240, 202, 0.08) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(90deg, rgba(141, 240, 202, 0.05) 0 1px, transparent 1px 16px);
      pointer-events: none;
      mix-blend-mode: screen;
    }

    canvas {
      display: block;
      width: 100%;
      height: 320px;
    }

    .scope-overlay {
      position: absolute;
      left: 16px;
      right: 16px;
      top: 14px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      pointer-events: none;
    }

    .scope-chip {
      padding: 6px 8px;
      border: 1px solid rgba(141,240,202,0.18);
      border-radius: 999px;
      background: rgba(7,18,17,0.62);
      color: var(--screen-glow);
      font: 700 11px/1 var(--mono);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .np-grid {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 16px;
      padding: 16px;
    }

    .cover {
      position: relative;
      min-height: 220px;
      border-radius: var(--panel-radius);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background:
        radial-gradient(circle at 24% 22%, rgba(255, 123, 28, 0.34), transparent 20%),
        radial-gradient(circle at 72% 28%, rgba(255, 209, 102, 0.18), transparent 16%),
        linear-gradient(165deg, #201613, #592c1c 44%, #1d1411);
    }

    .cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.38)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 9px);
      pointer-events: none;
    }

    .cover img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.12);
      filter: drop-shadow(0 10px 16px rgba(0,0,0,0.34));
    }

    .sticker {
      position: absolute;
      right: 12px;
      bottom: 12px;
      transform: rotate(-8deg);
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(24,17,14,0.84);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--dispatch-2);
      font: 700 11px/1 var(--mono);
      text-transform: uppercase;
    }

    .np-copy {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .eyebrow {
      color: var(--dispatch);
      font: 700 12px/1 var(--mono);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .track-title {
      margin: 0;
      font: 400 clamp(34px, 5vw, 60px)/0.9 var(--title);
      letter-spacing: 0.6px;
      color: var(--text);
    }

    .meta {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
      max-width: 64ch;
    }

    .led-row {
      display: grid;
      grid-template-columns: repeat(20, 1fr);
      gap: 4px;
      align-items: center;
      height: 50px;
      margin-top: 4px;
      padding: 11px 8px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        linear-gradient(180deg, rgba(18, 24, 32, .9), rgba(10, 14, 20, .92)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 12px);
      overflow: hidden;
      box-shadow:
        inset 0 0 20px rgba(255, 196, 112, 0.05),
        inset 0 0 42px rgba(0, 0, 0, 0.36),
        0 0 18px rgba(255, 180, 92, 0.05);
    }

    .led {
      height: 10px;
      border-radius: 2px;
      background: #2e343c;
      opacity: .2;
      transition: opacity .28s ease-out, background-color .28s linear, box-shadow .28s ease-out;
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.28),
        inset 0 0 4px rgba(255,255,255,.03);
    }

    .led.active {
      transition: none;
    }

    .led.active.low {
      background: #83ffab;
      opacity: 1;
      box-shadow:
        0 0 8px rgba(131,255,171,.52),
        0 0 16px rgba(131,255,171,.34),
        0 0 28px rgba(131,255,171,.18),
        inset 0 0 3px rgba(245,255,248,.88);
    }

    .led.active.mid {
      background: #ffd86c;
      opacity: 1;
      box-shadow:
        0 0 8px rgba(255,216,108,.56),
        0 0 18px rgba(255,216,108,.38),
        0 0 30px rgba(255,216,108,.2),
        inset 0 0 3px rgba(255,248,224,.84);
    }

    .led.active.high {
      background: #ff6a6a;
      opacity: 1;
      box-shadow:
        0 0 8px rgba(255,106,106,.56),
        0 0 18px rgba(255,106,106,.4),
        0 0 30px rgba(255,106,106,.24),
        inset 0 0 3px rgba(255,232,232,.82);
    }

    .status-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 0 16px 16px;
    }

    .status-card {
      padding: 12px;
      border-radius: var(--panel-radius);
      border: 1px solid rgba(255,255,255,0.08);
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
    }

    .status-label {
      color: var(--muted);
      font: 700 11px/1 var(--mono);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 8px;
    }

    .status-value {
      font: 400 24px/1 var(--title);
      color: var(--dispatch-2);
      letter-spacing: 0.4px;
    }


    .transport {
      padding: 12px 14px;
      display: grid;
      gap: 10px;
    }

    .progress-meta {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font: 700 11px/1 var(--mono);
    }

    input[type="range"] {
      width: 100%;
      appearance: none;
      background: transparent;
      margin: 0;
    }

    input[type="range"]::-webkit-slider-runnable-track {
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--dispatch), var(--dispatch-2));
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.22);
    }

    input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 22px;
      height: 22px;
      margin-top: -6px;
      border-radius: 50%;
      background: #fff1dd;
      border: 2px solid #4a2e1f;
      box-shadow: 0 6px 14px rgba(0,0,0,0.24);
      cursor: pointer;
    }

    input[type="range"]::-moz-range-track {
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--dispatch), var(--dispatch-2));
    }

    input[type="range"]::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff1dd;
      border: 2px solid #4a2e1f;
      box-shadow: 0 6px 14px rgba(0,0,0,0.24);
      cursor: pointer;
    }

    .control-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .switch-bank {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: end;
      justify-content: flex-end;
    }

    button {
      --led-color: #ff9b47;
      --led-off: color-mix(in srgb, var(--led-color) 48%, #141920 52%);
      appearance: none;
      position: relative;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--panel-radius);
      padding: 10px 12px;
      padding-right: 22px;
      color: var(--text);
      font: 700 12px/1 var(--mono);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      cursor: pointer;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
        linear-gradient(180deg, #4a352a, #241815);
      box-shadow:
        0 10px 20px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.06);
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }

    button .fa-solid {
      font-size: 15px;
      line-height: 1;
      pointer-events: none;
    }

    button::after {
      content: "";
      position: absolute;
      right: 7px;
      top: 7px;
      width: 7px;
      height: 7px;
      border-radius: 2px;
      border: 1px solid color-mix(in srgb, var(--led-color) 30%, rgba(225,235,246,.2) 70%);
      background: var(--led-off);
      opacity: .94;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--led-color) 14%, rgba(0,0,0,.58) 86%);
      pointer-events: none;
      transform: scale(1);
      filter: brightness(.72) saturate(.9);
    }

    button:hover {
      border-color: rgba(255,209,102,0.34);
    }

    .button-main {
      --led-color: #52e07c;
      color: #1d120c;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        linear-gradient(180deg, #ff9d2f, #c95314);
      border-color: rgba(255,209,102,0.38);
      min-width: 88px;
    }

    .icon-btn {
      min-width: 44px;
      padding-left: 11px;
      padding-right: 22px;
      display: inline-grid;
      place-items: center;
    }

    .toggle-switch {
      position: relative;
      display: inline-grid;
      gap: 6px;
      justify-items: center;
      width: 72px;
      user-select: none;
      align-content: start;
    }

    .toggle-switch input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      width: 0;
      height: 0;
    }

    .toggle-caption {
      color: var(--muted);
      font: 700 9px/1 var(--mono);
      text-transform: uppercase;
      letter-spacing: 0.24px;
      text-align: center;
      cursor: pointer;
    }

    .toggle-hardware {
      width: 72px;
      height: 34px;
      position: relative;
      display: inline-grid;
      justify-items: center;
      align-content: center;
      border-radius: 999px;
      border: 1px solid rgba(255, 157, 47, .34);
      background: #6a563f;
      box-shadow:
        inset 0 0 0 1px rgba(255, 214, 156, .06),
        inset 0 -4px 8px rgba(0,0,0,.22),
        0 3px 6px rgba(0,0,0,.24),
        0 0 10px rgba(255, 157, 47, .06);
      overflow: visible;
      cursor: pointer;
    }

    .toggle-hardware::before {
      content: "";
      position: absolute;
      left: 6px;
      right: 6px;
      top: 6px;
      bottom: 6px;
      border-radius: 999px;
      background: #2b3037;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 8px rgba(0,0,0,.48);
    }

    .toggle-hardware::after {
      content: "";
      position: absolute;
      left: 6px;
      right: 6px;
      top: 6px;
      bottom: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(0,0,0,.04) 0 50%, rgba(0,0,0,.28) 50% 100%);
      pointer-events: none;
      transition: background .16s ease;
      box-shadow: inset 0 0 3px rgba(220, 230, 244, .04);
    }

    .toggle-slot,
    .toggle-lever {
      display: none;
    }

    .toggle-legend {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 0 13px;
      color: #c9ced7;
      font: 800 9px/1 var(--mono);
      letter-spacing: .7px;
      pointer-events: none;
      z-index: 2;
    }

    .toggle-led {
      position: absolute;
      right: -10px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      border: 1px solid rgba(255, 214, 214, .26);
      background: #2b0b0b;
      box-shadow:
        inset 0 0 4px rgba(0,0,0,.58),
        0 0 0 rgba(0,0,0,0);
      transform: translateY(-50%);
      pointer-events: none;
      opacity: .96;
      filter: brightness(.52) saturate(.7);
      transition: background-color .16s ease, box-shadow .16s ease, filter .16s ease;
      z-index: 2;
    }

    .toggle-switch input:checked + .toggle-hardware::after {
      background: linear-gradient(90deg, rgba(0,0,0,.28) 0 50%, rgba(0,0,0,.04) 50% 100%);
    }

    .toggle-switch input:checked + .toggle-hardware .toggle-led {
      background: #ff4b3a;
      box-shadow:
        inset 0 0 4px rgba(255,255,255,.24),
        0 0 calc(10px + var(--beat-pulse) * 18px) rgba(255, 88, 72, calc(.34 + var(--beat-pulse) * .48));
      filter: brightness(calc(1.12 + var(--beat-pulse) * .22)) saturate(1.2);
    }

    .toggle-switch input:not(:checked) + .toggle-hardware .toggle-led {
      background: #220909;
      box-shadow:
        inset 0 0 4px rgba(0,0,0,.6),
        0 0 0 rgba(0,0,0,0);
      filter: brightness(.42) saturate(.48);
    }

    #shuffleBtn,
    #repeatBtn {
      --led-color: #ffd84a;
    }

    button.blink-hint::after {
      background: var(--led-color, #ffd27a);
      opacity: calc(.62 + var(--beat-pulse) * .38);
      box-shadow:
        inset 0 0 4px rgba(255,255,255,.16),
        0 0 calc(10px + var(--beat-pulse) * 16px) color-mix(in srgb, var(--led-color, #ffd27a) 82%, white 18%);
      transform: scale(calc(1.08 + var(--beat-pulse) * .26));
      filter: brightness(calc(1.34 + var(--beat-pulse) * .7)) saturate(1.22);
    }

    .knob-rack {
      display: grid;
      grid-template-columns: 66px;
      gap: 6px;
      align-items: start;
      justify-content: center;
    }

    .knob-unit {
      display: grid;
      gap: 4px;
      justify-items: center;
      min-width: 60px;
    }

    .knob-shell {
      display: grid;
      justify-items: center;
      gap: 4px;
    }

    .knob-scale {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0.96;
      z-index: 2;
    }

    .knob-tick {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 2px;
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 235, 212, 0.52);
      box-shadow: 0 0 4px rgba(0,0,0,0.18);
      transform-origin: 50% 50%;
    }

    .knob-tick.major {
      height: 12px;
      background: rgba(255, 209, 102, 0.96);
      box-shadow: 0 0 7px rgba(255, 209, 102, 0.34);
    }

    .knob {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      position: relative;
      border: 1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), transparent 20%),
        linear-gradient(145deg, #74614f, #2e241d 70%);
      box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.08),
        inset 0 -8px 12px rgba(0,0,0,0.26),
        0 10px 20px rgba(0,0,0,0.18);
      cursor: ns-resize;
      touch-action: none;
      user-select: none;
    }

    .knob::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 8px;
      width: 4px;
      height: 16px;
      border-radius: 999px;
      background: var(--dispatch-2);
      transform: translateX(-50%) rotate(var(--knob-angle, 0deg));
      transform-origin: 50% 22px;
      box-shadow: 0 0 8px rgba(255,209,102,0.42);
      z-index: 3;
    }

    .knob::before {
      content: "";
      position: absolute;
      inset: 11px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.06);
      background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.08), rgba(0,0,0,0.16));
      box-shadow: inset 0 1px 3px rgba(255,255,255,0.06);
      z-index: 1;
    }

    .knob.dragging {
      box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.08),
        inset 0 -8px 12px rgba(0,0,0,0.26),
        0 10px 20px rgba(0,0,0,0.18),
        0 0 0 1px rgba(255,209,102,0.3),
        0 0 18px rgba(255,209,102,0.22);
    }

    .knob-unit label {
      color: var(--muted);
      font: 700 10px/1 var(--mono);
      text-transform: uppercase;
    }

    .knob-readout {
      display: none;
    }

    .deck {
      display: grid;
      gap: 10px;
      height: 100%;
    }

    .lcd {
      border-radius: 0;
      border: 1px solid rgba(109, 132, 63, .74);
      background:
        radial-gradient(circle at 18% 12%, rgba(245, 252, 222, .2), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--lcd-bg) 93%, white 7%), color-mix(in srgb, var(--lcd-bg) 87%, #7f9465 13%) 58%, color-mix(in srgb, var(--lcd-bg) 79%, #6d8154 21%));
      box-shadow:
        inset 0 0 0 1px rgba(199,217,133,.2),
        inset 0 0 0 2px rgba(48, 64, 24, .28),
        inset 0 10px 14px rgba(216,229,162,.1),
        inset 0 -12px 18px rgba(47,64,23,.2),
        inset 0 -20px 26px rgba(28, 39, 14, .2),
        inset 0 16px 20px rgba(216,229,162,.1);
      position: relative;
      overflow: hidden;
      filter: contrast(calc(1 + var(--snow-strength) * 0.1)) saturate(calc(1 + var(--snow-strength) * 0.06)) brightness(calc(.995 + var(--beat-pulse) * .015));
      transform: none;
    }

    .lcd::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: calc(.04 + var(--snow-strength) * 0.38 + var(--beat-pulse) * .0005);
      background:
        linear-gradient(90deg,
          rgba(255, 66, 66, calc(var(--snow-strength) * .22)) 0%,
          rgba(255, 66, 66, calc(var(--snow-strength) * .1)) 38%,
          rgba(114, 190, 255, calc(var(--snow-strength) * .18)) 100%),
        linear-gradient(180deg,
          transparent 0 18%,
          rgba(245, 255, 190, calc(var(--snow-strength) * .22)) 18% 21%,
          transparent 21% 46%,
          rgba(255, 120, 120, calc(var(--snow-strength) * .12)) 46% 49%,
          transparent 49% 100%),
        radial-gradient(circle at 84% 18%, rgba(238, 250, 170, .16), transparent 32%),
        repeating-linear-gradient(90deg,
          rgba(56, 86, 24, .06) 0 1px,
          rgba(178, 210, 82, .02) 1px 2px,
          transparent 2px 4px),
        repeating-linear-gradient(0deg,
          rgba(47, 72, 18, .12) 0 1px,
          rgba(189, 215, 86, .03) 1px 3px,
          transparent 3px 5px);
      mix-blend-mode: screen;
      animation: none;
    }

    .lcd::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      opacity: calc(var(--snow-opacity) * 0.42 + var(--snow-strength) * 0.035 + var(--beat-pulse) * .0004);
      background:
        linear-gradient(0deg,
          transparent 0 24%,
          rgba(228, 247, 150, calc(var(--snow-strength) * .34)) 24% 28%,
          transparent 28% 56%,
          rgba(188, 220, 106, calc(var(--snow-strength) * .26)) 56% 60%,
          transparent 60% 100%),
        linear-gradient(90deg,
          transparent 0 14%,
          rgba(255,255,255, calc(var(--snow-strength) * .09)) 14% 16%,
          transparent 16% 68%,
          rgba(255,255,255, calc(var(--snow-strength) * .07)) 68% 71%,
          transparent 71% 100%),
        repeating-linear-gradient(0deg,
          transparent 0 10px,
          rgba(255,255,255, calc(var(--snow-strength) * .14)) 10px 11px,
          transparent 11px 18px),
        radial-gradient(circle, rgba(205, 226, 130, .36) 0 1px, transparent 1px 100%) 0 0 / 6px 6px,
        repeating-linear-gradient(0deg, rgba(56, 78, 24, .09), rgba(56, 78, 24, .09) 1px, transparent 1px, transparent 3px);
      mix-blend-mode: screen;
      animation: none;
    }

    .right-panel {
      min-height: 880px;
      overflow: hidden;
    }

    .playlist-deck {
      height: 100%;
      margin: 0;
      padding: 14px;
      position: relative;
      overflow: hidden;
      color: var(--lcd-text);
      display: grid;
      grid-template-rows: auto auto auto minmax(0, 1fr);
      gap: 6px;
    }

    .playlist-deck > * {
      position: relative;
      z-index: 4;
    }

    .playlist-bg-art {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 46%;
      object-fit: contain;
      object-position: center bottom;
      pointer-events: none;
      z-index: 2;
      opacity: 0.34;
      filter: saturate(.82) contrast(.92);
    }

    .playlist-head {
      display: grid;
      gap: 4px;
      padding-bottom: 6px;
      border-bottom: 0;
    }

    .playlist-title {
      margin: 0;
      display: inline-block;
      width: fit-content;
      align-self: start;
      padding: 5px 10px 4px;
      background: #768763;
      color: #d2ddb5;
      font: 700 16px/1.02 var(--lcd-font);
      text-transform: uppercase;
      letter-spacing: 0.22px;
    }

    .lcd .playlist-title,
    .lcd .playlist-info-line,
    .lcd .playlist-lag-title,
    .lcd .playlist-lag-meta {
      position: relative;
      z-index: 3;
      animation: none;
    }

    .lcd > .playlist-head,
    .lcd > .playlist-info-line,
    .lcd > .playlist-lag-title,
    .lcd > .playlist-lag-meta,
    .lcd > .playlist {
      transform: none;
      filter: none;
    }

    .playlist-sub,
    .playlist-info-line,
    .playlist-lag-title,
    .playlist-lag-meta,
    .track {
      transform: none;
      filter: none;
      transition: none;
    }

    .playlist-sub {
      color: #6d8154;
      font: 700 15px/1.08 var(--lcd-font);
      letter-spacing: 0.14px;
      text-transform: uppercase;
    }

    .playlist-info-line {
      align-self: start;
      padding: 5px 10px 4px;
      border: 0;
      background: #728362;
      box-shadow: none;
      color: #ced9b3;
      font: 700 15px/1.04 var(--lcd-font);
      text-transform: uppercase;
      letter-spacing: 0.14px;
    }

    .playlist-lag-title {
      min-height: 32px;
      align-self: start;
      padding: 6px 10px 5px;
      border: 0;
      background: #6d7e5d;
      font: 700 17px/1.02 var(--lcd-font);
      color: #d1ddb5;
      text-transform: uppercase;
      letter-spacing: 0.16px;
      box-shadow: none;
    }

    .playlist-lag-meta {
      min-height: 36px;
      padding: 1px 2px 6px;
      border: 0;
      background: transparent;
      color: #708652;
      font: 700 14px/1.12 var(--lcd-font);
      text-transform: uppercase;
      letter-spacing: 0.1px;
      box-shadow: none;
    }

    .playlist-lag-stack {
      position: relative;
      display: grid;
      gap: 6px;
    }

    .playlist {
      overflow: auto;
      padding: 2px 0 0;
      display: grid;
      gap: 4px;
      align-content: start;
      grid-auto-rows: max-content;
    }

    .lyrics-panel {
      display: grid;
      gap: 4px;
      padding: 4px 0 0;
      min-height: 196px;
    }

    .lyrics-title {
      display: inline-block;
      width: fit-content;
      align-self: start;
      padding: 4px 8px 3px;
      background: #7b8d69;
      color: #d9e4c0;
      font: 700 14px/1.02 var(--lcd-font);
      letter-spacing: 0.12px;
      text-transform: uppercase;
    }

    .lyrics-body {
      min-height: 160px;
      max-height: 220px;
      overflow: auto;
      scrollbar-width: thin;
      scrollbar-color: #7e8f66 rgba(92, 111, 74, 0.18);
      color: #6f8458;
      font: 700 14px/1.08 var(--lcd-font);
      letter-spacing: 0.08px;
      text-transform: uppercase;
      white-space: pre-wrap;
      padding: 0 1px;
      border-top: 1px solid rgba(78, 104, 46, .24);
    }

    .lyrics-body::-webkit-scrollbar,
    .playlist::-webkit-scrollbar {
      width: 8px;
    }

    .lyrics-body::-webkit-scrollbar-track,
    .playlist::-webkit-scrollbar-track {
      background: rgba(92, 111, 74, 0.14);
      border-radius: 0;
    }

    .lyrics-body::-webkit-scrollbar-thumb,
    .playlist::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #93a57a, #74865e);
      border-radius: 0;
      border: 1px solid rgba(223, 234, 190, 0.18);
      box-shadow: inset 0 1px 0 rgba(241, 247, 214, 0.18);
    }

    .lyrics-body::-webkit-scrollbar-thumb:hover,
    .playlist::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #9eb186, #7e9167);
    }

    .lyrics-body.timed {
      white-space: normal;
      display: grid;
      gap: 4px;
      align-content: start;
    }

    .lyrics-line {
      color: #6f8458;
      opacity: 1;
      transition: none;
      padding: 1px 3px;
      margin-right: 4px;
    }

    .track {
      width: 100%;
      text-align: left;
      padding: 8px 10px 9px;
      border-radius: 0;
      border: 1px solid rgba(92, 111, 74, .18);
      background: rgba(116, 134, 94, .08);
      display: grid;
      gap: 3px;
      align-content: start;
      justify-items: start;
      box-shadow:
        inset 0 1px 0 rgba(236, 244, 207, .04),
        inset 0 -1px 0 rgba(62, 78, 43, .08);
    }

    .track::after {
      border-radius: 0;
      border-color: rgba(176, 214, 150, 0.34);
      background: #7f9c69;
      box-shadow: inset 0 0 0 1px rgba(45, 67, 30, .22);
      filter: brightness(.86) saturate(.82);
    }

    .track.active {
      border-color: rgba(112, 133, 85, .28);
      background: rgba(126, 145, 101, .13);
      box-shadow:
        inset 0 1px 0 rgba(236, 244, 207, .07),
        inset 0 -1px 0 rgba(62, 78, 43, .12);
    }

    .track.active::after {
      background: #d5efb0;
      box-shadow:
        inset 0 0 0 1px rgba(240, 249, 223, .28),
        0 0 8px rgba(176, 226, 135, .26);
      filter: brightness(1.02) saturate(.96);
    }

    .track-artist {
      display: inline-block;
      width: fit-content;
      align-self: start;
      padding: 4px 8px 3px;
      background: #81936f;
      color: #cad5b0;
      font: 700 14px/1.04 var(--lcd-font);
      text-transform: uppercase;
      letter-spacing: 0.12px;
    }

    .track-name {
      display: inline-block;
      width: fit-content;
      align-self: start;
      padding: 4px 8px 3px;
      background: #697a5a;
      font: 700 16px/1.02 var(--lcd-font);
      letter-spacing: 0.12px;
      color: #d4dfba;
      text-transform: uppercase;
    }

    .track-description {
      color: #73885c;
      font: 700 14px/1.14 var(--lcd-font);
      text-transform: uppercase;
      margin-top: 1px;
    }

    .track-footer {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: #6d8154;
      font: 700 14px/1.06 var(--lcd-font);
      text-transform: uppercase;
    }

    .hidden-audio {
      display: none;
    }

    @media (max-width: 1060px) {
      .ticker {
        width: 100%;
      }

      .layout {
        grid-template-columns: 1fr;
      }

      .right-panel {
        min-height: 420px;
      }
    }

    @media (max-width: 760px) {
      body {
        padding: 12px;
      }

      .radio {
        padding: 12px;
        border-radius: 24px;
      }

      .np-grid {
        grid-template-columns: 1fr;
      }

      .status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .control-row {
        grid-template-columns: 1fr;
      }

      .knob-rack {
        justify-content: center;
      }
    }