.hologram-player {
      --hp-bg: #02070d;
      --hp-cyan: #49f7ff;
      --hp-blue: #4b8dff;
      --hp-violet: #9c6bff;
      --hp-pink: #ff4dde;
      --hp-green: #7dffba;
      --hp-amber: #ffcf6b;
      --hp-red: #ff5e78;
      --hp-meter-off: rgba(73, 247, 255, .07);
      --hp-meter-low: #49f7ff;
      --hp-meter-mid: #65c8ff;
      --hp-meter-high: #809aff;
      --hp-meter-peak: #9c6bff;
      --hp-text: #eafcff;
      --hp-muted: rgba(234, 252, 255, .62);
      --hp-glass: rgba(6, 22, 34, .44);
      --hp-glass-2: rgba(6, 22, 34, .64);
      --hp-line: rgba(73, 247, 255, .18);
      --hp-line-strong: rgba(73, 247, 255, .42);
      --hp-active: #49f7ff;
      --hp-shadow: 0 0 30px rgba(73, 247, 255, .12), 0 30px 90px rgba(0,0,0,.45);
      --hp-radius: 28px;
      --hp-font-base: 16px;
      --hp-font-title: 42px;
      --hp-font-brand: 14px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
.hologram-player,
.hologram-player * { box-sizing: border-box; }

    .hp-page {
      margin: 0;
      min-height: 100vh;
      padding: 24px;
      color: var(--hp-text);
      background:
        radial-gradient(circle at 50% 45%, rgba(73,247,255,.10), transparent 22rem),
        radial-gradient(circle at 18% 12%, rgba(156,107,255,.18), transparent 24rem),
        radial-gradient(circle at 86% 22%, rgba(255,77,222,.13), transparent 24rem),
        radial-gradient(circle at 72% 84%, rgba(125,255,186,.08), transparent 20rem),
        var(--hp-bg);
      display: grid;
      place-items: center;
      overflow-x: hidden;
    }

    .hp-page::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(73,247,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73,247,255,.028) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(circle at center, black, transparent 78%);
    }

    .hp-page::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
      mix-blend-mode: screen;
      opacity: .18;
      animation: scan 7s linear infinite;
    }

    @keyframes scan {
      from { transform: translateY(-40px); }
      to { transform: translateY(40px); }
    }
.hologram-player button,
.hologram-player input { font: inherit; }

    .hp-app {
      width: 100%;
      position: relative;
    }

    .hp-header {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: end;
      margin-bottom: 18px;
      padding-inline: 4px;
    }

    .hp-header h1 {
      margin: 0;
      font-size: clamp(2.2rem, 5vw, 5.4rem);
      line-height: .88;
      letter-spacing: 0;
      text-shadow: 0 0 22px rgba(73,247,255,.24);
    }

    .hp-header p {
      max-width: 390px;
      margin: 0;
      color: var(--hp-muted);
      line-height: 1.6;
      font-size: .96rem;
    }

    .hp-shell {
      position: relative;
      width: 100%;
      border: 1px solid var(--hp-line);
      border-radius: var(--hp-radius);
      background:
        linear-gradient(180deg, rgba(73,247,255,.06), transparent 18%),
        linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
        var(--hp-glass);
      backdrop-filter: blur(20px) saturate(140%);
      box-shadow: var(--hp-shadow);
      overflow: hidden;
      padding: 18px;
      transition: width .28s ease, padding .28s ease, border-radius .28s ease;
    }

    .hp-shell::before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px solid rgba(73,247,255,.10);
      border-radius: max(0px, calc(var(--hp-radius) - 10px));
      pointer-events: none;
    }

    .hp-shell::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -80px;
      height: 160px;
      background: linear-gradient(180deg, rgba(73,247,255,.18), transparent);
      filter: blur(30px);
      opacity: .45;
      pointer-events: none;
    }

    .hp-shell.is-compact {
      width: min(760px, 100%);
      margin-inline: auto;
      padding: 12px;
      border-radius: 22px;
    }

    .hp-shell.is-minimized {
      width: min(360px, 100%);
      margin-inline: auto;
      padding: 10px;
      border-radius: 999px;
      overflow: visible;
    }

    .hp-shell.is-minimized::before,
    .hp-shell.is-minimized::after,
    .hp-shell.is-minimized .hp-corner,
    .hp-shell.is-minimized .hp-telemetry,
    .hp-shell.is-minimized .hp-grid {
      display: none;
    }

    .hp-shell.is-minimized .hp-top-strip {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      margin: 0;
    }

    .hp-shell.is-minimized .hp-brand-core {
      width: 46px;
      height: 46px;
      flex: 0 0 auto;
    }

    .hp-shell.is-minimized .hp-brand {
      min-width: 0;
    }

    .hp-shell.is-minimized .hp-brand strong,
    .hp-shell.is-minimized .hp-brand span {
      max-width: 138px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hp-shell.is-minimized .hp-brand strong {
      font-size: .76rem;
      letter-spacing: 0;
    }

    .hp-shell.is-minimized .hp-brand span {
      font-size: .72rem;
    }

    .hp-shell.is-minimized .hp-actions {
      display: flex;
      gap: 7px;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
    }

    .hp-shell.is-minimized .hp-status {
      display: none;
    }

    .hp-shell.is-minimized .hp-size-toggle {
      min-width: 56px;
      width: 56px;
      height: 38px;
      font-size: .72rem;
      letter-spacing: 0;
    }

    .hp-mini-play {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(73,247,255,.32);
      border-radius: 999px;
      background: var(--hp-active);
      color: #02070d;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 0 22px rgba(73,247,255,.20);
    }

    .hp-shell.is-minimized .hp-mini-play {
      display: grid;
      place-items: center;
    }

    .hp-corner {
      position: absolute;
      width: 56px;
      height: 56px;
      border-color: var(--hp-line-strong);
      pointer-events: none;
      z-index: 2;
    }

    .hp-c1 { top: 14px; left: 14px; border-top: 2px solid; border-left: 2px solid; }
    .hp-c2 { top: 14px; right: 14px; border-top: 2px solid; border-right: 2px solid; }
    .hp-c3 { bottom: 14px; left: 14px; border-bottom: 2px solid; border-left: 2px solid; }
    .hp-c4 { bottom: 14px; right: 14px; border-bottom: 2px solid; border-right: 2px solid; }

    .hp-top-strip {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 16px;
      align-items: center;
      margin-bottom: 18px;
    }

    .hp-shell.is-compact .hp-top-strip {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 12px;
    }

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

    .hp-brand-core {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--hp-line-strong);
      background:
        radial-gradient(circle, var(--hp-cyan) 0 4px, transparent 5px),
        conic-gradient(from 90deg, transparent, rgba(73,247,255,.38), transparent, rgba(255,77,222,.22), transparent);
      box-shadow: 0 0 24px rgba(73,247,255,.24), inset 0 0 18px rgba(73,247,255,.14);
      animation: rotate 9s linear infinite;
    }

    @keyframes rotate { to { transform: rotate(360deg); } }

    .hp-brand strong {
      display: block;
      font-size: .88rem;
      text-transform: uppercase;
      letter-spacing: 0;
      color: var(--hp-cyan);
    }

    .hp-brand span {
      display: block;
      margin-top: 3px;
      color: var(--hp-muted);
      font-size: .78rem;
    }

    .hp-telemetry {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .hp-shell.is-compact .hp-telemetry { justify-content: start; }

    .hp-chip {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border: 1px solid var(--hp-line);
      border-radius: 999px;
      background: rgba(73,247,255,.045);
      color: var(--hp-muted);
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: 0;
      font-weight: 800;
    }

    .hp-chip b {
      color: var(--hp-text);
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .hp-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .hp-shell.is-compact .hp-actions { justify-content: start; }

    .hp-status,
    .hp-size-toggle {
      min-width: 84px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hp-status {
      border: 1px solid rgba(125,255,186,.42);
      background: rgba(125,255,186,.12);
      color: var(--hp-green);
      box-shadow: 0 0 22px rgba(125,255,186,.10);
    }

    .hp-size-toggle {
      border: 1px solid rgba(73,247,255,.32);
      background: rgba(73,247,255,.07);
      color: var(--hp-cyan);
      cursor: pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }

    .hp-size-toggle:hover {
      transform: translateY(-1px);
      border-color: rgba(73,247,255,.55);
      background: rgba(73,247,255,.13);
    }

    .hp-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr) 300px;
      gap: 16px;
      align-items: stretch;
      transition: grid-template-columns .28s ease;
    }

    .hp-grid > *,
    .hp-right-stack,
    .hp-track-hud > *,
    .hp-wave-panel,
    .hp-time-row > * {
      min-width: 0;
      max-width: 100%;
    }

    .hp-shell.is-compact .hp-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .hp-panel {
      position: relative;
      min-width: 0;
      border: 1px solid var(--hp-line);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(73,247,255,.055), transparent 20%),
        var(--hp-glass-2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
      overflow: hidden;
    }

    .hp-shell.is-compact .hp-panel { border-radius: 18px; }

    .hp-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent, rgba(73,247,255,.04), transparent),
        repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.016) 12px 13px);
      opacity: .75;
    }

    .hp-panel-inner {
      position: relative;
      z-index: 1;
      padding: 16px;
    }

    .hp-shell.is-compact .hp-panel-inner { padding: 12px; }

    .hp-panel-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      color: var(--hp-muted);
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hp-panel-title strong { color: var(--hp-cyan); }

    .hp-node-list {
      display: grid;
      gap: 10px;
    }

    .hp-shell.is-compact .hp-node-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .hp-node {
      position: relative;
      width: 100%;
      min-height: 76px;
      padding: 12px 12px 12px 54px;
      border: 1px solid rgba(73,247,255,.14);
      border-radius: 18px;
      background: rgba(3, 13, 21, .45);
      color: var(--hp-text);
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }

    .hp-shell.is-compact .hp-node {
      min-height: 58px;
      padding: 9px 10px 9px 46px;
      border-radius: 14px;
    }

    .hp-node:hover {
      transform: translateX(2px);
      border-color: rgba(73,247,255,.34);
    }

    .hp-node.active {
      border-color: var(--node-color, var(--hp-cyan));
      background: linear-gradient(90deg, rgba(73,247,255,.18), rgba(3,13,21,.48));
      box-shadow: 0 0 24px rgba(73,247,255,.14);
    }

    .hp-node::before {
      content: attr(data-index);
      position: absolute;
      left: 13px;
      top: 50%;
      width: 28px;
      height: 28px;
      transform: translateY(-50%);
      display: grid;
      place-items: center;
      border: 1px solid rgba(73,247,255,.28);
      border-radius: 50%;
      color: var(--hp-cyan);
      font-size: .72rem;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .hp-node.active::before {
      background: var(--node-color, var(--hp-cyan));
      color: #02070d;
      border-color: transparent;
    }

    .hp-node::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: var(--node-progress, 0%);
      height: 2px;
      background: var(--node-color, var(--hp-cyan));
      box-shadow: 0 0 12px var(--node-color, var(--hp-cyan));
    }

    .hp-node-title {
      display: block;
      font-weight: 850;
      font-size: .92rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hp-node-artist {
      display: block;
      margin-top: 4px;
      color: var(--hp-muted);
      font-size: .8rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hp-node-meta {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 8px;
      color: rgba(234,252,255,.46);
      font-size: .7rem;
      font-weight: 850;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hp-shell.is-compact .hp-node-artist,
    .hp-shell.is-compact .hp-node-meta { display: none; }

    .hp-center-panel .hp-panel-inner {
      min-height: 620px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 16px;
    }

    .hp-shell.is-compact .hp-center-panel .hp-panel-inner {
      min-height: auto;
      gap: 10px;
    }

    .hp-track-hud {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 18px;
      padding: 16px;
      border: 1px solid rgba(73,247,255,.14);
      border-radius: 20px;
      background: rgba(2, 9, 15, .44);
    }

    .hp-shell.is-compact .hp-track-hud {
      padding: 12px;
      border-radius: 16px;
    }

    .hp-track-title {
      margin: 0 0 6px;
      font-size: clamp(1.4rem, 3.5vw, 3.1rem);
      line-height: .93;
      letter-spacing: 0;
      color: var(--hp-text);
      text-shadow: 0 0 20px rgba(73,247,255,.18);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .hp-shell.is-compact .hp-track-title {
      font-size: clamp(1.1rem, 4vw, 1.7rem);
    }

    .hp-track-artist {
      margin: 0;
      color: var(--hp-muted);
      font-size: .96rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hp-shell.is-compact .hp-track-artist { font-size: .84rem; }

    .hp-preset-badge {
      flex: 0 0 auto;
      min-width: 96px;
      padding: 10px;
      border: 1px solid var(--hp-line);
      border-radius: 16px;
      text-align: right;
      color: var(--hp-muted);
      background: rgba(73,247,255,.045);
      font-size: .7rem;
      font-weight: 850;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hp-shell.is-compact .hp-preset-badge {
      min-width: 72px;
      padding: 8px;
    }

    .hp-preset-badge b {
      display: block;
      margin-top: 4px;
      color: var(--hp-cyan);
      font-size: 1rem;
      font-variant-numeric: tabular-nums;
    }

    .hp-radar-wrap {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 330px;
      overflow: hidden;
      border: 1px solid rgba(73,247,255,.12);
      border-radius: 24px;
      background:
        radial-gradient(circle at center, rgba(73,247,255,.11), transparent 42%),
        radial-gradient(circle at center, rgba(255,77,222,.06), transparent 60%),
        rgba(2, 8, 14, .35);
    }

    .hp-shell.is-compact .hp-radar-wrap {
      min-height: 210px;
      border-radius: 18px;
    }

    .hp-radar-wrap::before {
      content: "";
      position: absolute;
      width: 78%;
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle, transparent 0 24%, rgba(73,247,255,.14) 24.3% 24.8%, transparent 25.1% 48%, rgba(73,247,255,.14) 48.3% 48.8%, transparent 49.1% 72%, rgba(73,247,255,.14) 72.3% 72.8%, transparent 73.1%),
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(73,247,255,.12) 50%, transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent calc(50% - 1px), rgba(73,247,255,.12) 50%, transparent calc(50% + 1px));
      opacity: .9;
    }

    .hp-radar-sweep {
      position: absolute;
      width: 78%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: conic-gradient(from 0deg, rgba(73,247,255,.32), rgba(73,247,255,.02) 42deg, transparent 82deg, transparent 360deg);
      opacity: .55;
      animation: sweep 5s linear infinite paused;
    }

    .hologram-player.is-playing .hp-radar-sweep { animation-play-state: running; }
    @keyframes sweep { to { transform: rotate(360deg); } }

    .hp-orbital {
      position: absolute;
      width: min(270px, 66vw);
      aspect-ratio: 1;
      border-radius: 50%;
      border: 1px solid rgba(73,247,255,.26);
      box-shadow: inset 0 0 28px rgba(73,247,255,.055), 0 0 28px rgba(73,247,255,.055);
    }

    .hp-shell.is-compact .hp-orbital,
    .hp-shell.is-compact .hp-radar-sweep,
    .hp-shell.is-compact .hp-radar-wrap::before {
      width: min(185px, 58vw);
    }

    .hp-orbital::before,
    .hp-orbital::after {
      content: "";
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--hp-cyan);
      box-shadow: 0 0 18px var(--hp-cyan);
    }

    .hp-orbital::before { top: -6px; left: 50%; transform: translateX(-50%); }
    .hp-orbital::after { bottom: 28px; right: 12px; background: var(--hp-pink); box-shadow: 0 0 18px var(--hp-pink); }

    .hp-progress-ring {
      position: relative;
      z-index: 2;
      width: min(250px, 60vw);
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--hp-active) var(--ring-progress, 0%), rgba(73,247,255,.10) 0);
      box-shadow: 0 0 36px rgba(73,247,255,.16);
    }

    .hp-shell.is-compact .hp-progress-ring {
      width: min(160px, 52vw);
    }

    .hp-progress-ring::before {
      content: "";
      position: absolute;
      inset: 11px;
      border-radius: 50%;
      background: rgba(2, 8, 14, .82);
      border: 1px solid rgba(73,247,255,.17);
      box-shadow: inset 0 0 34px rgba(73,247,255,.08);
    }

    .hp-ring-core {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .hp-ring-time {
      font-size: clamp(1.5rem, 4vw, 2.6rem);
      font-weight: 900;
      letter-spacing: 0;
      color: var(--hp-text);
      font-variant-numeric: tabular-nums;
    }

    .hp-shell.is-compact .hp-ring-time { font-size: 1.45rem; }

    .hp-ring-total {
      margin-top: 4px;
      color: var(--hp-muted);
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
      font-variant-numeric: tabular-nums;
    }

    .hp-shell.is-compact .hp-ring-total { font-size: .68rem; }

    .hp-wave-panel {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid rgba(73,247,255,.14);
      border-radius: 20px;
      background: rgba(2, 9, 15, .44);
    }

    .hp-shell.is-compact .hp-wave-panel {
      padding: 10px;
      gap: 10px;
      border-radius: 16px;
    }

    .hp-waveform {
      height: 76px;
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .hp-shell.is-compact .hp-waveform { height: 48px; }

    .hp-waveform span {
      flex: 1;
      min-width: 3px;
      height: 14%;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--hp-active), rgba(73,247,255,.32));
      opacity: .84;
      transition: height .08s linear;
    }

    .hp-time-row {
      display: grid;
      grid-template-columns: 54px 1fr 54px;
      gap: 10px;
      align-items: center;
      color: var(--hp-muted);
      font-size: .78rem;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }
.hologram-player input[type="range"] {
      appearance: none;
      width: 100%;
      height: 7px;
      border-radius: 999px;
      outline: none;
      cursor: pointer;
      background: linear-gradient(90deg, var(--hp-active) var(--range-progress, 0%), rgba(73,247,255,.12) var(--range-progress, 0%));
      box-shadow: 0 0 14px rgba(73,247,255,.10);
    }
.hologram-player input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: #f0feff;
      border: 2px solid var(--hp-active);
      box-shadow: 0 0 18px rgba(73,247,255,.32);
    }
.hologram-player input[type="range"]::-moz-range-thumb {
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: #f0feff;
      border: 2px solid var(--hp-active);
      box-shadow: 0 0 18px rgba(73,247,255,.32);
    }

    .hp-transport {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 9px;
    }

    .hp-shell.is-compact .hp-transport {
      gap: 7px;
    }

    .hp-btn {
      min-height: 46px;
      border: 1px solid rgba(73,247,255,.20);
      border-radius: 14px;
      background: rgba(73,247,255,.055);
      color: var(--hp-text);
      cursor: pointer;
      font-weight: 900;
      transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }

    .hp-shell.is-compact .hp-btn {
      min-height: 38px;
      border-radius: 11px;
    }

    .hp-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(73,247,255,.40);
      background: rgba(73,247,255,.10);
      box-shadow: 0 0 18px rgba(73,247,255,.10);
    }

    .hp-btn.primary {
      color: #02070d;
      background: var(--hp-active);
      border-color: transparent;
      box-shadow: 0 0 24px rgba(73,247,255,.22);
    }

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

    .hp-shell.is-compact .hp-right-stack { gap: 12px; }

    .hp-meter-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 5px;
      height: 180px;
      align-items: end;
    }

    .hp-shell.is-compact .hp-meter-grid { height: 82px; }

    .hp-meter-col {
      display: grid;
      gap: 4px;
      align-content: end;
    }

    .hp-led {
      height: 8px;
      border-radius: 999px;
      background: var(--hp-meter-off);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
    }

    .hp-led.on.cyan { background: var(--hp-meter-low); box-shadow: 0 0 10px var(--hp-meter-low); }
    .hp-led.on.green { background: var(--hp-meter-mid); box-shadow: 0 0 10px var(--hp-meter-mid); }
    .hp-led.on.amber { background: var(--hp-meter-high); box-shadow: 0 0 10px var(--hp-meter-high); }
    .hp-led.on.red { background: var(--hp-meter-peak); box-shadow: 0 0 10px var(--hp-meter-peak); }

    .hp-control-grid {
      display: grid;
      gap: 12px;
    }

    .hp-control {
      padding: 12px;
      border: 1px solid rgba(73,247,255,.13);
      border-radius: 16px;
      background: rgba(2, 9, 15, .36);
    }

    .hp-control label {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      color: var(--hp-muted);
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hp-control label b {
      color: var(--hp-text);
      font-variant-numeric: tabular-nums;
    }

    .hp-data-grid {
      display: grid;
      gap: 9px;
    }

    .hp-data-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid rgba(73,247,255,.12);
      border-radius: 14px;
      background: rgba(2, 9, 15, .32);
      color: var(--hp-muted);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hp-data-row b {
      color: var(--hp-text);
      font-variant-numeric: tabular-nums;
    }

    @media (max-width: 680px) {
      .hp-page { padding: 12px; }
      .hp-app, .hp-shell, .hp-grid, .hp-panel, .hp-right-stack { width: 100%; max-width: 100%; }
      .hp-shell { padding: 10px; border-radius: 22px; }
      .hp-grid, .hp-top-strip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
      .hp-brand { align-items: flex-start; }
      .hp-brand strong, .hp-brand span { overflow-wrap: anywhere; }
      .hp-telemetry, .hp-actions { justify-content: start; flex-wrap: wrap; }
      .hp-chip, .hp-status, .hp-size-toggle { min-width: 0; }
      .hp-panel-inner { padding: 10px; }
      .hp-center-panel .hp-panel-inner { min-height: auto; gap: 10px; }
      .hp-track-hud { flex-direction: column; }
      .hp-preset-badge { text-align: left; }
      .hp-transport { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
      .hp-time-row { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px; }
      .hp-radar-wrap { min-height: 240px; }
      .hp-orbital { width: min(220px, 70vw); }
      .hp-progress-ring { width: min(200px, 64vw); }
      .hp-wave-panel { padding: 10px; }
      .hp-waveform { height: 54px; gap: 2px; }
      .hp-waveform span { min-width: 1px; }
      .hp-meter-grid { height: 110px; gap: 3px; }
      .hp-node-list, .hp-shell.is-compact .hp-node-list { grid-template-columns: 1fr; }
    }
  
.hologram-player { position: relative; overflow: visible; container-type: inline-size; }
.hologram-player[data-theme="sunset"] { --hp-cyan: #ff4dde; --hp-active: #ff4dde; --hp-violet: #ffcf6b; --hp-pink: #9c6bff; }
.hologram-player[data-theme="mono"] { --hp-cyan: #eafcff; --hp-active: #eafcff; --hp-violet: #7f8da3; --hp-pink: #b8c4cc; }
.hologram-player[data-theme="neon"] { --hp-cyan: #7dffba; --hp-active: #7dffba; --hp-violet: #49f7ff; --hp-pink: #ff4dde; }
.hologram-player.is-compact .hp-shell { width: min(760px, 100%); margin-inline: auto; padding: 12px; border-radius: 22px; }
.hologram-player.is-compact .hp-top-strip, .hologram-player.is-compact .hp-grid { grid-template-columns: 1fr; gap: 12px; }
.hologram-player.is-minimized {
   min-height: 0;
   height: 0;
   overflow: visible;
}
.hologram-player.is-minimized .hp-page { min-height: 0; padding: 0; background: transparent; }
.hologram-player.is-minimized .hp-page::before, .hologram-player.is-minimized .hp-page::after, .hologram-player.is-minimized .hp-header { display: none; }
.hologram-player.is-minimized .hp-app {
   position: fixed;
   z-index: 9999;
   left: 50%;
   bottom: 24px;
   width: min(360px, calc(100vw - 24px));
   transform: translateX(-50%);
}
.hologram-player.is-minimized .hp-shell {
   width: 100%;
}
@media (max-width: 680px) {
   .hologram-player.is-minimized .hp-app {
      bottom: 12px;
      width: calc(100vw - 24px);
   }
}