.halo-preview .music-panel {
  position: fixed;
  z-index: 28;
  right: var(--edge);
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 58px);
  width: min(292px, calc(100vw - 24px));
  padding: 16px;
  max-height: calc(100dvh - 110px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ui-glass-line);
  border-radius: 6px;
  background: var(--ui-glass-panel);
  color: var(--ui-text);
  box-shadow: var(--ui-glass-shadow);
  backdrop-filter: var(--ui-glass-blur);
  -webkit-backdrop-filter: var(--ui-glass-blur);
  text-shadow: 0 1px 3px rgb(4 17 15 / 75%);
}
.music-panel[hidden] { display: none; }
.music-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.music-panel-header h2 { margin: 0; font: inherit; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }
.music-panel button { color: inherit; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.music-panel #music-close { display: grid; place-items: center; width: 30px; height: 30px; margin: -6px -7px -6px 0; }
.music-panel-power { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--ui-glass-divider); font-size: 12px; }
.music-panel #music-enabled { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 65px; min-height: 32px; padding: 4px 9px; border-color: var(--ui-glass-line); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.music-panel #music-enabled::before { content: ''; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; }
.music-panel #music-enabled[aria-pressed="true"] { color: var(--ui-accent); background: rgb(155 201 178 / 10%); }
.music-panel #music-enabled[aria-pressed="true"]::before { background: currentColor; box-shadow: 0 0 7px rgb(187 220 202 / 36%); }
.music-panel .music-volume-row { margin-top: 17px; }
.music-volume-row label { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ui-text-muted); font-size: 11px; }
.music-volume-row output { min-width: 40px; text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }
.music-panel[data-scene="combat"] label[for="combat-music-volume"],
.music-panel:not([data-scene="combat"]) label[for="music-volume"] { color: var(--ui-text); }
.music-panel input[type="range"] { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 26px; margin: 6px 0 0; padding: 0; border: 0; cursor: pointer; background: transparent; accent-color: var(--ui-accent); }
.music-panel input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--ui-accent) 0 var(--volume-fill), rgb(196 222 207 / 20%) var(--volume-fill) 100%); }
.music-panel input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; margin-top: -5px; width: 13px; height: 13px; border: 2px solid #daeadf; border-radius: 50%; background: #6f9488; box-shadow: 0 0 8px rgb(187 220 202 / 20%); }
.music-panel input[type="range"]::-moz-range-track { height: 3px; background: rgb(196 222 207 / 20%); }
.music-panel input[type="range"]::-moz-range-progress { height: 3px; background: var(--ui-accent); }
.music-panel input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #daeadf; border-radius: 50%; background: #6f9488; }
.music-panel #music-feedback { margin: 10px 0 0; color: var(--ui-text-muted); font-size: 9px; letter-spacing: .3px; }
.music-panel :is(button,input):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.music-panel button:hover { background: var(--ui-control-hover); }
.halo-preview .music-control[data-muted="true"] .music-muted-mark { display: block; }
.halo-preview .music-control[aria-expanded="true"] { border-color: var(--ui-accent); background: var(--ui-glass-panel); }
.halo-preview.combat-open #music-panel { top: calc(max(22px, env(safe-area-inset-top)) + 54px); bottom: auto; max-height: calc(100dvh - 96px); }
@media (max-width: 720px), (pointer: coarse) {
  .halo-preview:not(.combat-open) #music-panel { bottom: var(--mobile-panel-bottom); right: max(12px, env(safe-area-inset-right)); max-height: var(--mobile-panel-height); }
  .halo-preview.combat-open #music-panel { top: calc(max(15px, env(safe-area-inset-top)) + 54px); }
  .music-panel #music-close { width: 36px; height: 36px; }
  .music-panel #music-enabled { min-height: 36px; }
  .halo-preview.music-panel-open .mobile-movement { visibility: hidden; pointer-events: none; }
}