.music-dock-art { position: absolute; z-index: 1; left: var(--art-left); top: var(--art-top); width: var(--art-width); height: var(--art-height); max-width: none; pointer-events: none; overflow: visible; }
.music-dock-icon { transform-origin: 595px 422px; animation: music-dock-bounce 12s ease-in-out 2s infinite; animation-play-state: paused; }
.music-dock-art.is-bouncing .music-dock-icon { animation-play-state: running; }
.hotspot[data-story="music"]::before { display: none; }
@keyframes music-dock-bounce {
  0%, 12%, 100% { transform: translateY(0); }
  3% { transform: translateY(-7px) rotate(-3deg); }
  5.5% { transform: translateY(0); }
  8% { transform: translateY(-3.5px) rotate(2deg); }
}
.home-page .music-dialog {
  width: min(440px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100svh - 24px);
  margin: auto;
  padding: 20px;
  border: 1px solid #ffffff24;
  border-radius: 18px;
  background: #11151e;
  box-shadow: 0 24px 80px #0008;
  color: #eef0f6;
  font-family: var(--sans);
  color-scheme: dark;
  overflow: auto;
}
.music-dialog::backdrop { background: #070a12b3; backdrop-filter: blur(5px); }
.music-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.music-topline h2 { font: 500 13px/1.4 var(--sans); letter-spacing: 0; color: #b5bfd0; }
.music-topline .icon-button { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; box-shadow: none; }
.music-track { display: flex; align-items: center; gap: 16px; min-height: 60px; margin-bottom: 16px; }
.music-record { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: repeating-radial-gradient(circle, #101113 0 2px, #303137 2.5px 3px, #111215 3.5px 5px); box-shadow: 0 0 0 1px #ffffff24; animation: music-record-spin 14s linear infinite; animation-play-state: paused; }
.music-record::after { content: ""; position: absolute; width: 4px; height: 4px; left: calc(50% - 2px); top: calc(50% - 2px); border-radius: 50%; background: #15151b; box-shadow: 0 0 0 1px #ffffff65; }
.music-record img { position: absolute; width: 50%; height: 50%; left: 25%; top: 25%; border-radius: 50%; object-fit: cover; }
.music-dialog[data-playback="playing"] .music-record { animation-play-state: running; }
@keyframes music-record-spin { to { transform: rotate(360deg); } }
.music-song { min-width: 0; }
.music-song h3 { font: 500 20px/1.25 var(--sans); letter-spacing: -.025em; overflow-wrap: anywhere; }
.music-song p { margin-top: 5px; color: #aeb9ca; font-size: 13px; line-height: 1.5; }
.music-explicit { display: inline-block; padding: 1px 4px; margin-left: 6px; border-radius: 3px; font-size: 9px; vertical-align: middle; background: #ffffff21; }
.music-video-mount { position: fixed; left: -10000px; top: 0; width: 320px; height: 200px; opacity: 0; pointer-events: none; overflow: hidden; }
.music-video-mount iframe { display: block; width: 100%; height: 100%; border: 0; }
.music-transport { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 14px; }
.music-transport button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.music-transport button:disabled { opacity: .35; cursor: default; }
.music-transport button:hover:not(:disabled) { background: #ffffff14; }
.music-transport .music-play { width: 48px; height: 48px; background: #f0eef5; color: #14141c; }
.music-transport .music-play:hover:not(:disabled) { background: white; }
.music-transport svg { width: 21px; height: 21px; fill: currentColor; }
.music-pause-icon { display: none; }
.music-dialog[data-playback="playing"] .music-pause-icon { display: block; }
.music-dialog[data-playback="playing"] .music-play-icon { display: none; }
.music-feedback { margin-top: 12px; color: #abb7c9; font-size: 12px; line-height: 1.5; text-align: center; }
.music-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; column-gap: 20px; margin-top: 4px; }
.music-links a { display: inline-flex; align-items: center; min-height: 40px; border: 0; padding: 0; background: none; color: #b5bfd0; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 360px) {
  .home-page .music-dialog { padding: 16px; }
  .music-track { gap: 12px; }
  .music-song h3 { font-size: 18px; }
  .music-record { flex-basis: 48px; width: 48px; height: 48px; }
}
html[data-motion="off"] .music-record { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .music-dock-icon, .music-record { animation: none; }
}
@media (forced-colors: active) {
  .home-page .music-dialog { background: Canvas; border-color: CanvasText; color: CanvasText; }
  .music-transport button { border: 1px solid ButtonText; }
  .music-record { border: 1px solid CanvasText; }
  .music-topline h2, .music-song p, .music-feedback { color: CanvasText; }
  .music-links a { color: LinkText; }
}
@media print {
  .music-dialog, .music-dock-art { display: none !important; }
}