:root {
      --bg: #0a0d12;
      --bg-a: #3b3028;
      --bg-b: #1b1613;
      --chassis-top: #8f7c6a;
      --chassis-mid: #665548;
      --chassis-low: #44362d;
      --bezel: #181312;
      --bezel-hi: #3e3128;
      --panel: rgba(10, 12, 16, 0.78);
      --panel-strong: rgba(16, 20, 27, 0.9);
      --text: #f3e7c9;
      --muted: #ceb991;
      --accent: #ffb347;
      --accent-hot: #ff7b39;
      --line: rgba(255, 198, 104, 0.52);
      --card-width: 360px;
      --panel-radius: 18px;
      --title-font: "Bebas Neue", Impact, sans-serif;
      --mono-font: "IBM Plex Mono", Menlo, monospace;
      --lcd-bg: #d9cf9f;
      --lcd-text: #5e552e;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      min-height: 100%;
      height: 100dvh;
      max-height: 100dvh;
      overflow: hidden;
      overflow: clip;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
      color: var(--text);
      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;
      max-height: 100dvh;
    }
    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;
    }
    .noise-layer {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      mix-blend-mode: screen;
      transition: opacity .08s linear;
    }
    .page {
      position: relative;
      z-index: 3;
      height: 100dvh;
      max-height: 100dvh;
      box-sizing: border-box;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 10px;
      padding: 18px;
      overflow: hidden;
      overflow: clip;
      max-width: 1520px;
      margin: 0 auto;
      border-radius: 34px;
      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);
    }
    .page::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);
    }
    .hero, .toolbar {
      position: relative;
      z-index: 1;
      border-radius: var(--panel-radius);
    }
    .hero {
      border: 2px solid var(--bezel-hi);
      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.08),
        inset 0 -8px 12px rgba(0,0,0,0.24),
        0 16px 34px rgba(0,0,0,.22);
    }
    .hero {
      padding: 16px 18px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: start;
    }
    .hero h1 {
      margin: 0 0 8px;
      font-family: var(--title-font);
      font-size: clamp(40px, 5vw, 72px);
      line-height: .9;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: #ffd166;
      text-shadow:
        0 3px 0 rgba(0,0,0,.28),
        0 0 18px rgba(255, 157, 47, .14);
    }
    .hero p { margin: 0; max-width: 70ch; color: var(--muted); line-height: 1.5; }
    .hero-link {
      color: var(--text); text-decoration: none; border: 1px solid rgba(255, 198, 104, .28);
      padding: 12px 16px; border-radius: 999px; background: rgba(0,0,0,.24);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    }
    .toolbar {
      padding: 10px 12px;
      display: grid;
      grid-template-columns: minmax(280px, 1fr) auto auto;
      align-items: center;
      gap: 12px;
      min-height: 76px;
      border: 2px solid var(--bezel-hi);
      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.08),
        inset 0 -8px 12px rgba(0,0,0,0.24),
        0 16px 34px rgba(0,0,0,.18);
      overflow: hidden;
    }
    .toolbar > * { position: relative; z-index: 1; }
    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      min-width: 0;
      min-height: 52px;
      color: var(--lcd-text);
    }
    .toolbar-group.search-group {
      justify-content: stretch;
    }
    .toolbar-group.zoom-group {
      justify-content: center;
    }
    .toolbar-group.action-group {
      justify-content: flex-end;
    }
    .toolbar-lcd {
      --snow-strength: 0;
      --snow-opacity: 0;
      --beat-pulse: 0;
      display: inline-flex;
      align-items: stretch;
      gap: 10px;
      padding: 8px 10px;
      min-height: 52px;
      height: 52px;
      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;
    }
    .toolbar-lcd::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: calc(.04 + var(--snow-strength) * .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;
    }
    .toolbar-lcd::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      opacity: calc(var(--snow-opacity) * .42 + var(--snow-strength) * .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;
    }
    .toolbar-lcd > * {
      position: relative;
      z-index: 1;
    }
    .toolbar-lcd.search-lcd {
      flex: 1 1 320px;
      min-width: 220px;
    }
    .toolbar-lcd.scale-lcd {
      flex: 0 0 auto;
      min-width: 280px;
      justify-content: space-between;
    }
    .toolbar button {
      border: 1px solid rgba(109, 132, 63, .58);
      background: rgba(255,255,255,0.03);
      color: #f3e7c9;
      padding: 9px 12px;
      border-radius: 999px;
      cursor: pointer;
      font-family: var(--mono-font);
      text-transform: uppercase;
      letter-spacing: .04em;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 -1px 0 rgba(0,0,0,.14);
    }
    .toolbar-group.action-group 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 22px 10px 12px;
      color: var(--text);
      font: 700 12px/1 var(--mono-font);
      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;
    }
    .toolbar-group.action-group 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);
    }
    .toolbar-group.action-group button:hover {
      border-color: rgba(255,209,102,0.34);
    }
    .toolbar-group.action-group #jumpToNow {
      --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);
    }
    .scale-readout {
      min-width: 196px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      color: var(--lcd-text);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      font: 700 15px/1.04 "VT323", var(--mono-font);
      text-transform: uppercase;
      letter-spacing: 0.22px;
    }
    .scale-bar {
      width: 88px;
      height: 8px;
      position: relative;
      border-top: 2px solid rgba(94, 85, 46, 0.88);
    }
    .scale-bar::before,
    .scale-bar::after {
      content: "";
      position: absolute;
      top: -4px;
      width: 2px;
      height: 10px;
      background: rgba(94, 85, 46, 0.88);
    }
    .scale-bar::before { left: 0; }
    .scale-bar::after { right: 0; }
    .scale-label {
      font: inherit;
      letter-spacing: inherit;
      text-transform: uppercase;
    }
    .toolbar input[type="range"] {
      width: min(280px, 48vw);
      height: 100%;
      margin: 0;
      accent-color: #7f9465;
    }
    .toolbar-search {
      width: 100%;
      min-width: 0;
      height: 100%;
      padding: 0 14px;
      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%));
      color: var(--lcd-text);
      outline: none;
      font: 700 16px/1.02 "VT323", var(--mono-font);
      letter-spacing: 0.22px;
      appearance: none;
      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);
    }
    .toolbar-search::placeholder {
      color: color-mix(in srgb, var(--lcd-text) 68%, transparent);
    }
    .toolbar-search:focus {
      border-color: rgba(109, 132, 63, .88);
      box-shadow:
        inset 0 0 0 1px rgba(199,217,133,.24),
        inset 0 0 0 2px rgba(48, 64, 24, .3),
        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),
        0 0 0 3px rgba(109, 132, 63, 0.12);
    }
    .board-shell {
      min-height: 0; position: relative; border-radius: 24px; overflow: hidden;
      border: 2px solid var(--bezel-hi);
      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, #11171d, #090c10 74%),
        radial-gradient(circle at 20% 0%, rgba(141, 240, 202, 0.05), transparent 26%),
        radial-gradient(circle at 82% 86%, rgba(255, 157, 47, 0.08), transparent 26%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -10px 18px rgba(0,0,0,0.28),
        0 18px 40px rgba(0,0,0,.24);
      transition: background .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .board-shell[data-audio-state="idle"] {
      background:
        radial-gradient(circle at top, rgba(76, 82, 92, 0.22), transparent 40%),
        linear-gradient(180deg, rgba(52, 57, 64, 0.985), rgba(38, 42, 48, 0.975));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
    }
    .board-noise-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      mix-blend-mode: screen;
      transition: opacity .08s linear;
    }
    .timeline-hud {
      position: absolute; top: 14px; right: 14px; z-index: 5; display: grid; gap: 6px;
      padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
      background: rgba(10, 12, 16, 0.78); backdrop-filter: blur(10px); min-width: 200px;
    }
    .timeline-hud strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #ffd38d; }
    .timeline-hud span { color: var(--muted); font-size: 13px; line-height: 1.35; }
    .timeline-minimap {
      position: absolute;
      top: 110px;
      right: 14px;
      z-index: 5;
      width: 92px;
      height: 320px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(10, 12, 16, 0.78);
      backdrop-filter: blur(10px);
      padding: 12px 10px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 10px;
      cursor: default;
    }
    .timeline-minimap-title {
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #ffd38d;
      text-align: center;
    }
    .timeline-minimap-track {
      position: relative;
      min-height: 0;
    }
    .timeline-minimap-axis {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(255, 198, 104, .18), rgba(255, 198, 104, .56), rgba(255, 198, 104, .18));
    }
    .timeline-minimap-breaks {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .timeline-minimap-break {
      position: absolute;
      left: 50%;
      width: 18px;
      height: 20px;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: rgba(7, 9, 12, 0.96);
      box-shadow: 0 0 0 1px rgba(255,255,255,.06);
    }
    .timeline-minimap-break::before,
    .timeline-minimap-break::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1px;
      height: 12px;
      background: rgba(255, 211, 141, .75);
      border-radius: 999px;
    }
    .timeline-minimap-break::before {
      transform: translate(-5px, -50%) rotate(-26deg);
    }
    .timeline-minimap-break::after {
      transform: translate(4px, -50%) rotate(-26deg);
    }
    .timeline-minimap-points,
    .timeline-minimap-viewport {
      position: absolute;
      inset: 0;
    }
    .timeline-minimap-point {
      position: absolute;
      left: 50%;
      width: 5px;
      height: 5px;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      background: rgb(var(--strand-rgb, 255, 211, 141));
      box-shadow: 0 0 0 2px rgba(var(--strand-rgb, 255, 211, 141), .12);
      opacity: .9;
    }
    .timeline-minimap-viewport-box {
      position: absolute;
      left: 8px;
      right: 8px;
      border-radius: 10px;
      border: 1px solid rgba(255, 211, 141, .7);
      background: rgba(255, 179, 71, .08);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
      min-height: 18px;
      cursor: grab;
      touch-action: none;
    }
    .timeline-minimap.dragging .timeline-minimap-viewport-box {
      cursor: grabbing;
      background: rgba(255, 179, 71, .12);
      border-color: rgba(255, 211, 141, .86);
    }
    .board-scroll {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 100%;
      overflow: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .board-scroll::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    .timeline-board { position: relative; min-height: 100%; padding: 96px 24px 140px; }
    .audio-dock {
      --beat: 0;
      position: fixed;
      right: 14px;
      bottom: 14px;
      z-index: 8;
      width: min(320px, calc(100vw - 28px));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      background: rgba(10, 12, 16, 0.86);
      box-shadow:
        0 18px 44px rgba(0,0,0,.28),
        0 0 calc(10px + var(--beat) * 20px) rgba(255, 123, 57, calc(0.06 + var(--beat) * 0.22));
      backdrop-filter: blur(12px);
      overflow: hidden;
      transition: box-shadow .12s linear, border-color .12s linear;
    }
    .audio-dock-inner {
      display: grid;
      gap: 10px;
      padding: 12px 14px;
    }
    .audio-top {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
    }
    .audio-play {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(255, 198, 104, .28);
      background: rgba(255,255,255,0.03);
      color: var(--text);
      cursor: pointer;
      font-size: 14px;
      transform: scale(calc(1 + var(--beat) * 0.08));
      transition: transform .1s linear, border-color .12s linear, background .12s linear;
    }
    .audio-meta {
      min-width: 0;
      display: grid;
      gap: 2px;
    }
    .audio-kicker {
      color: #ffd38d;
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .audio-title {
      font-size: 13px;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .audio-time {
      font-size: 12px;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .audio-visualizer {
      display: inline-flex;
      align-items: end;
      gap: 3px;
      height: 18px;
    }
    .beat-bar {
      width: 3px;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffd38d, #ff8f4d);
      transform-origin: center bottom;
      transform: scaleY(0.18);
      opacity: 0.72;
      transition: transform .08s linear, opacity .08s linear;
    }
    .audio-progress {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      outline: none;
      accent-color: var(--accent);
    }
    .audio-progress::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: #ffd38d;
      border: none;
    }
    .audio-progress::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: #ffd38d;
      border: none;
    }
    .audio-progress::-moz-range-track {
      height: 4px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
    }
    .timeline-axis {
      position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%);
      background: linear-gradient(180deg, transparent 0%, rgba(255, 198, 104, .52) 6%, rgba(255, 198, 104, .28) 94%, transparent 100%);
      box-shadow: 0 0 24px rgba(255, 179, 71, .18);
    }
    .timeline-breaks {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 4;
    }
    .timeline-break {
      position: absolute;
      left: 50%;
      width: 34px;
      height: 42px;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: rgba(8, 11, 15, 0.98);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 8px 20px rgba(0,0,0,.2);
    }
    .timeline-break::before,
    .timeline-break::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: 24px;
      background: rgba(255, 211, 141, .88);
      border-radius: 999px;
      box-shadow: 0 0 10px rgba(255, 179, 71, .16);
    }
    .timeline-break::before {
      transform: translate(-8px, -50%) rotate(-28deg);
    }
    .timeline-break::after {
      transform: translate(6px, -50%) rotate(-28deg);
    }
    .timeline-ruler, .timeline-years, .timeline-events { position: absolute; inset: 0; }
    .timeline-ruler { pointer-events: none; }
    .timeline-years { pointer-events: none; z-index: 6; }
    .ruler-mark { position: absolute; left: 50%; transform: translate(-50%, -50%); }
    .ruler-mark::before {
      content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 18px; height: 1px; background: rgba(255, 198, 104, .22);
    }
    .ruler-mark.major::before { width: 42px; background: rgba(255, 198, 104, .48); }
    .ruler-label {
      position: absolute;
      left: 50%;
      color: rgba(243,231,201,.58);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
      text-align: center;
      pointer-events: none;
    }
    .ruler-label.above {
      top: -12px;
      transform: translate(-50%, -100%);
    }
    .ruler-label.below {
      top: 12px;
      transform: translate(-50%, 0);
    }
    .year-marker { position: absolute; left: 0; right: 0; height: 0; z-index: 6; }
    .year-dot {
      position: absolute; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%);
      border-radius: 999px; background: linear-gradient(180deg, #ffd38d, #ff8f4d);
      box-shadow: 0 0 0 6px rgba(255, 179, 71, .08), 0 0 24px rgba(255, 123, 57, .24);
    }
    .year-label {
      position: absolute;
      left: calc(50% + 28px);
      transform: translateY(-50%);
      display: grid;
      gap: 4px;
      max-width: min(24vw, 260px);
      padding: 8px 12px;
      border: 1px solid rgba(255, 209, 102, .16);
      border-radius: 12px;
      background: rgba(18, 22, 30, .86);
      box-shadow:
        0 10px 22px rgba(0,0,0,.22),
        inset 0 0 0 1px rgba(255,255,255,.02);
      backdrop-filter: blur(8px);
    }
    .year-marker.compact .year-label {
      left: 50%;
      right: auto;
      transform: translate(-50%, calc(-100% - 12px));
      text-align: center;
      max-width: min(22vw, 220px);
      gap: 2px;
    }
    .year-marker.center-above .year-label {
      left: 50%;
      right: auto;
      transform: translate(-50%, calc(-100% - 14px));
      text-align: center;
      width: min(220px, 18vw);
      max-width: min(220px, 18vw);
      gap: 3px;
    }
    .year-marker.center-below .year-label {
      left: 50%;
      right: auto;
      transform: translate(-50%, 14px);
      text-align: center;
      width: min(220px, 18vw);
      max-width: min(220px, 18vw);
      gap: 3px;
    }
    .year-marker.side-left .year-label {
      left: auto;
      right: calc(50% + 72px);
      text-align: right;
      max-width: min(15vw, 180px);
      gap: 3px;
    }
    .year-marker.side-right .year-label {
      left: calc(50% + 72px);
      right: auto;
      text-align: left;
      max-width: min(15vw, 180px);
      gap: 3px;
    }
    .year-marker.epoch-left .year-label {
      left: auto;
      right: calc(50% + 110px);
      text-align: right;
      width: min(13vw, 150px);
      max-width: min(13vw, 150px);
      gap: 2px;
    }
    .year-marker.epoch-right .year-label {
      left: calc(50% + 110px);
      right: auto;
      text-align: left;
      width: min(13vw, 150px);
      max-width: min(13vw, 150px);
      gap: 2px;
    }
    .year-marker.prominent-above .year-label {
      left: 50%;
      right: auto;
      transform: translate(-50%, calc(-100% - 20px));
      text-align: center;
      width: min(240px, 26vw);
      max-width: min(240px, 26vw);
      gap: 6px;
      padding: 10px 14px;
    }
    .year-marker.prominent-below .year-label {
      left: 50%;
      right: auto;
      transform: translate(-50%, 20px);
      text-align: center;
      width: min(240px, 26vw);
      max-width: min(240px, 26vw);
      gap: 6px;
      padding: 10px 14px;
    }
    .year-label strong {
      font-size: 14px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #ffd166;
      line-height: 1;
      text-shadow:
        0 2px 0 rgba(0,0,0,.34),
        0 0 14px rgba(255, 157, 47, .12);
    }
    .year-label span {
      color: rgba(243, 231, 201, 0.78);
      font-size: 13px;
      line-height: 1.25;
      text-shadow: 0 1px 0 rgba(0,0,0,.34);
    }
    .year-marker.prominent-above .year-label strong,
    .year-marker.prominent-below .year-label strong {
      font-size: 28px;
      letter-spacing: .045em;
      color: #ffd166;
      text-shadow:
        0 2px 0 rgba(0,0,0,.38),
        0 0 18px rgba(255, 157, 47, .16);
    }
    .year-marker.prominent-above .year-label span,
    .year-marker.prominent-below .year-label span {
      font-size: 14px;
      color: rgba(243, 231, 201, 0.88);
    }
    .year-marker.nudge-up .year-label {
      margin-top: -46px;
    }
    .year-marker.nudge-down .year-label {
      margin-top: 46px;
    }
    .year-marker.far-up .year-label {
      margin-top: -96px;
    }
    .year-marker.far-down .year-label {
      margin-top: 96px;
    }
    .event-node {
      position: absolute; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%);
      border-radius: 999px; background: rgb(var(--strand-rgb, 255, 211, 141)); box-shadow: 0 0 0 4px rgba(var(--strand-rgb, 255, 179, 71), .08);
      z-index: 3;
    }
    .event-node.cluster {
      width: 14px; height: 14px; background: rgb(var(--strand-rgb, 255, 143, 77));
      box-shadow: 0 0 0 6px rgba(var(--strand-rgb, 255, 123, 57), .12), 0 0 22px rgba(var(--strand-rgb, 255, 123, 57), .22);
    }
    .event-card {
      position: absolute; width: min(var(--card-width), calc(50% - 176px)); z-index: 2;
      transform-origin: center top;
      transition: width .18s ease-out, opacity .22s ease-out, transform .22s ease-out, filter .22s ease-out;
    }
    .event-card.left { right: calc(50% + 156px); }
    .event-card.right { left: calc(50% + 156px); }
    .event-connector {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 1px;
      background: rgba(var(--strand-rgb, 255, 198, 104), .42);
      transform-origin: 0 50%;
      z-index: 1;
      pointer-events: none;
    }
    .event-connector.hidden {
      opacity: 0;
    }
    .event-card-inner {
      border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px 16px;
      background: rgba(22, 27, 35, 0.96);
      box-shadow:
        0 12px 28px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.03);
      display: grid; gap: 10px;
      transition: background .22s ease-out, border-color .22s ease-out, box-shadow .22s ease-out;
    }
    .event-card-inner::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      border-radius: 16px 0 0 16px;
      background: rgba(var(--strand-rgb, 255, 211, 141), .9);
    }
    .event-card-inner { position: relative; }
    .event-chips {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      max-height: 56px;
      overflow: hidden;
      transition: opacity .24s ease-out, transform .24s ease-out;
    }
    .event-chip {
      display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px;
      border: 1px solid rgba(255, 198, 104, .16); background: rgba(255, 179, 71, 0.06);
      color: #f2c778; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    }
    button.event-chip {
      cursor: pointer;
      font: inherit;
    }
    .event-chip.strand {
      border-color: rgba(var(--strand-rgb, 255, 198, 104), .32);
      background: rgba(var(--strand-rgb, 255, 198, 104), .12);
      color: rgb(var(--strand-rgb, 255, 211, 141));
    }
    .event-meta-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .event-filter-button {
      border: 1px solid rgba(var(--strand-rgb, 255, 198, 104), .28);
      background: rgba(var(--strand-rgb, 255, 198, 104), .08);
      color: rgb(var(--strand-rgb, 255, 211, 141));
      border-radius: 999px;
      width: 32px;
      height: 32px;
      padding: 0;
      font: inherit;
      font-size: 12px;
      cursor: pointer;
      transition: background .18s ease-out, border-color .18s ease-out, opacity .18s ease-out;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .event-filter-button:hover {
      background: rgba(var(--strand-rgb, 255, 198, 104), .16);
      border-color: rgba(var(--strand-rgb, 255, 198, 104), .44);
    }
    .event-filter-button .fa-solid {
      font-size: 13px;
      pointer-events: none;
    }
    .event-card h3 { margin: 0; font-size: 18px; transition: opacity .22s ease-out; }
    .event-card h3 a { color: inherit; text-decoration: none; }
    .event-card h3 a:hover { color: #ffd38d; }
    .event-stamp { color: #ffd38d; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: opacity .22s ease-out; }
    .event-summary, .event-overview {
      margin: 0;
      line-height: 1.5;
      font-size: 14px;
      max-height: 200px;
      overflow: hidden;
      transition: opacity .24s ease-out, transform .24s ease-out;
    }
    .event-overview { color: var(--muted); }
    .event-link {
      color: #ffd38d;
      text-decoration: none;
      font-size: 14px;
      max-height: 24px;
      overflow: hidden;
      transition: opacity .24s ease-out, transform .24s ease-out;
    }
    .event-card[data-detail="summary"] .event-chips,
    .event-card[data-detail="summary"] .event-overview,
    .event-card[data-detail="summary"] .event-link {
      opacity: 0;
      max-height: 0;
      transform: translateY(-6px);
      pointer-events: none;
      margin: 0;
    }
    .event-card[data-detail="summary"] .event-card-inner { padding-top: 12px; padding-bottom: 12px; }
    .event-card[data-detail="summary"] {
      opacity: 0.96;
      transform: scale(0.95);
      filter: saturate(0.94);
    }
    .event-card[data-detail="summary"] .event-card-inner {
      gap: 8px;
    }
    .event-card[data-detail="summary"] h3 {
      font-size: 16px;
    }
    .event-card[data-detail="summary"] .event-summary {
      font-size: 13px;
    }
    .event-card[data-detail="headline"] {
      opacity: 0.88;
      transform: scale(0.86);
      filter: saturate(0.86);
    }
    .event-card[data-detail="headline"] .event-card-inner {
      padding: 10px 12px;
      gap: 6px;
      background: rgba(24, 29, 37, 0.92);
      border-color: rgba(255,255,255,.14);
      box-shadow:
        0 10px 24px rgba(0,0,0,.24),
        inset 0 0 0 1px rgba(255,255,255,.025);
    }
    .event-card[data-detail="headline"] .event-chips,
    .event-card[data-detail="headline"] .event-summary,
    .event-card[data-detail="headline"] .event-overview,
    .event-card[data-detail="headline"] .event-link,
    .event-card[data-detail="headline"] .event-filter-button {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transform: translateY(-8px);
      pointer-events: none;
      margin: 0;
    }
    .event-card[data-detail="headline"] h3 {
      font-size: 14px;
    }
    .event-card[data-detail="headline"] .event-stamp {
      font-size: 11px;
      opacity: 0.86;
    }
    .event-card[data-detail="full"] .event-chips,
    .event-card[data-detail="full"] .event-summary,
    .event-card[data-detail="full"] .event-overview,
    .event-card[data-detail="full"] .event-link {
      opacity: 1;
      max-height: 240px;
      transform: translateY(0);
      pointer-events: auto;
    }
    .event-card[data-kind="cluster"] .event-card-inner {
      background: rgba(28, 18, 14, 0.84);
      border-color: rgba(var(--strand-rgb, 255, 179, 71), .16);
    }
    .event-card[data-kind="cluster"] .event-summary {
      color: #f0d6a2;
    }
    .event-count {
      color: #ffcf83;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .board-shell[data-view-mode="strand"] .timeline-axis,
    .board-shell[data-view-mode="strand"] .timeline-ruler,
    .board-shell[data-view-mode="strand"] .timeline-years,
    .board-shell[data-view-mode="strand"] .event-node,
    .board-shell[data-view-mode="strand"] .event-connector,
    .board-shell[data-view-mode="strand"] .timeline-hud,
    .board-shell[data-view-mode="strand"] .timeline-minimap {
      display: none;
    }
    .board-shell[data-view-mode="strand"] .timeline-board {
      padding: 24px 24px 120px;
    }
    .board-shell[data-view-mode="strand"] .event-card,
    .board-shell[data-view-mode="strand"] .event-card.left,
    .board-shell[data-view-mode="strand"] .event-card.right {
      left: 50% !important;
      right: auto !important;
      width: min(860px, calc(100% - 24px)) !important;
      transform: translateX(-50%) !important;
    }
    .board-shell[data-view-mode="strand"] .event-card[data-detail="summary"],
    .board-shell[data-view-mode="strand"] .event-card[data-detail="headline"] {
      opacity: 1;
      filter: none;
    }
    .board-shell[data-view-mode="strand"] .event-card[data-detail="summary"] .event-card-inner,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="headline"] .event-card-inner {
      padding: 14px 16px;
      gap: 10px;
      background: rgba(18, 21, 28, 0.82);
    }
    .board-shell[data-view-mode="strand"] .event-card[data-detail="summary"] .event-chips,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="summary"] .event-overview,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="summary"] .event-link,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="headline"] .event-chips,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="headline"] .event-summary,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="headline"] .event-overview,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="headline"] .event-link,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="headline"] .event-filter-button {
      opacity: 1;
      max-height: 240px;
      transform: translateY(0);
      pointer-events: auto;
      margin: 0;
      overflow: visible;
    }
    .board-shell[data-view-mode="strand"] .event-card[data-detail="summary"] h3,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="headline"] h3 {
      font-size: 18px;
    }
    .board-shell[data-view-mode="strand"] .event-card[data-detail="summary"] .event-summary,
    .board-shell[data-view-mode="strand"] .event-card[data-detail="headline"] .event-summary {
      font-size: 14px;
    }
    .detail-modal {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(3, 5, 8, 0.72);
      backdrop-filter: blur(10px);
    }
    .detail-modal.open { display: flex; }
    .detail-modal-box {
      width: min(1100px, 100%);
      height: min(84vh, 920px);
      display: grid;
      grid-template-rows: auto 1fr;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      background: rgba(10, 12, 16, 0.96);
      box-shadow: 0 28px 72px rgba(0,0,0,.45);
      overflow: hidden;
    }
    .detail-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
    }
    .detail-modal-title {
      margin: 0;
      font-size: 14px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #ffd38d;
    }
    .detail-modal-close {
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius: 999px;
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .detail-modal-frame {
      width: 100%;
      height: 100%;
      border: 0;
      background: #0a0d12;
    }
    @media (max-width: 760px) {
      html, body {
        overflow: auto;
      }
      body {
        overflow: auto;
      }
      .page {
        height: auto;
        min-height: 100vh;
        max-height: none;
        grid-template-rows: auto auto 1fr;
        padding: 10px;
        overflow: visible;
      }
      .hero {
        grid-template-columns: 1fr;
      }
      .toolbar {
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: stretch;
      }
      .toolbar-group {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        min-height: 0;
      }
      .toolbar-group.action-group {
        justify-content: flex-start;
      }
      .toolbar-lcd {
        width: 100%;
        height: 52px;
      }
      .toolbar-lcd.scale-lcd {
        min-width: 0;
      }
      .toolbar input[type="range"] {
        flex: 1 1 auto;
        min-width: 0;
      }
      .toolbar-search {
        width: 100%;
        min-width: 0;
      }
      .board-shell {
        min-height: 72vh;
        border-radius: 18px;
      }
      .board-scroll {
        height: 72vh;
        min-height: 72vh;
        -webkit-overflow-scrolling: touch;
      }
      .timeline-axis, .ruler-mark, .year-dot, .event-node { left: 22px; }
      .year-label {
        left: 46px;
        max-width: 86px;
        padding: 6px 8px;
      }
      .year-label strong {
        font-size: 12px;
      }
      .year-label span {
        display: none;
      }
      .year-marker.prominent-above .year-label,
      .year-marker.prominent-below .year-label {
        left: 46px;
        right: auto;
        width: auto;
        max-width: 86px;
        transform: translateY(-50%);
        text-align: left;
        gap: 0;
        padding: 6px 8px;
      }
      .year-marker.prominent-above .year-label strong,
      .year-marker.prominent-below .year-label strong {
        font-size: 12px;
      }
      .event-card, .event-card.left, .event-card.right {
        left: 104px; right: auto; width: calc(100% - 118px);
      }
      .event-connector {
        display: none;
      }
      .event-meta-row {
        align-items: center;
      }
      .event-chips {
        max-width: calc(100% - 42px);
      }
      .audio-dock {
        position: static;
        left: auto;
        right: auto;
        width: auto;
        margin-top: 10px;
      }
      .detail-modal {
        padding: 8px;
      }
      .detail-modal-box {
        width: 100%;
        height: calc(100vh - 16px);
        border-radius: 12px;
      }
      .timeline-minimap {
        display: none;
      }
    }