.camp-music {
  --music-border: #ffffff30;
  position: fixed;
  z-index: 110;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  color: #fff;
  font-family: var(--body);
}
.camp-music[hidden], .camp-music [hidden] { display: none !important; }
.music-panel {
  display: grid;
  grid-template-columns: 360px 270px;
  gap: 16px;
  padding: 12px;
  background: #061b35;
  border: 1px solid #ffbe4580;
  border-radius: 12px;
  box-shadow: 0 10px 44px #0005;
}
.music-video { width: 100%; min-width: 200px; height: 203px; background: #000; }
.music-video iframe { display: block; width: 100%; height: 100%; min-width: 200px; min-height: 200px; border: 0; }
.music-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.music-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.music-kicker { margin: 0 0 5px; color: #ffbe45; font-size: 10px; letter-spacing: .13em; font-weight: 700; }
.music-title { margin: 0; font: 700 24px/1.05 var(--display); letter-spacing: .02em; }
.music-close {
  flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center;
  color: #fff; background: #ffffff12; border: 1px solid var(--music-border); border-radius: 50%; cursor: pointer;
}
.music-close svg { width: 16px; height: 16px; }
.music-artists { margin: 8px 0 10px; color: #d1dbe6; font-size: 11px; line-height: 1.5; }
.music-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.music-play, .music-open {
  min-height: 40px; padding: 9px 14px; border: 0; border-radius: 6px; cursor: pointer;
  color: #061b35; background: #ffbe45; font: 700 12px/1.4 var(--body);
}
.music-play:disabled { opacity: .65; cursor: wait; }
.music-open { min-height: 44px; border-radius: 25px; box-shadow: 0 4px 22px #0004; }
.music-open span { font-size: 18px; margin-right: 7px; }
.music-actions a { color: #fff; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.music-status { margin: 9px 0 6px; min-height: 28px; color: #d1dbe6; font-size: 11px; line-height: 1.4; }
.music-source { margin-top: auto; color: #ffbe45; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.camp-music button:focus-visible, .camp-music a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body.music-enhanced { padding-bottom: var(--music-space, 250px); }
html { scroll-padding-bottom: var(--music-space, 0px); }
.music-credits { padding-block: 22px; border-top: 1px solid #ffffff20; font-size: 12px; line-height: 1.8; color: #bac8d6; }
.music-credits h3 { color: #fff; font: 600 21px/1.3 var(--display); margin: 0 0 8px; }
.music-credits p { margin: 5px 0; max-width: 850px; }
.music-credits a { color: #ffbe45; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  body.music-enhanced #main-nav { max-height: max(100px, calc(100dvh - 90px - var(--music-space, 0px))); }
}
@media (max-width: 720px) {
  .camp-music { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .music-panel { width: min(100%, 390px); margin-inline: auto; grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .music-info { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; }
  .music-heading { grid-column: 1 / -1; }
  .music-kicker { margin-bottom: 3px; font-size: 9px; }
  .music-title { font-size: 22px; }
  .music-artists { grid-column: 1 / -1; margin: 0; font-size: 10px; }
  .music-actions { grid-column: 1 / -1; }
  .music-status { grid-column: 1 / -1; margin: 0; min-height: 0; font-size: 10px; }
  .music-source { grid-column: 1 / -1; font-size: 10px; }
  .music-video { grid-row: 2; height: 200px; }
  .music-close { width: 32px; height: 32px; }
  body.music-enhanced .floating-tools { bottom: calc(var(--music-space, 0px) + 8px); }
  body.music-enhanced .toast { bottom: calc(var(--music-space, 0px) + 16px); }
}
@media print {
  .camp-music { display: none !important; }
  body.music-enhanced { padding-bottom: 0; }
}