#intro-orbit { left: 33%; top: 44%; }
#music-orbit {
  position: fixed;
  left: 73%;
  top: 57%;
  width: 108px;
  transform: translate(calc(-50% + var(--note-x, 0px) + var(--drag-x, 0px)), calc(-50% + var(--note-y, 0px) + var(--drag-y, 0px)));
  will-change: transform;
}
.music-drift { animation: music-drift 9s ease-in-out -5s infinite alternate; }
.music-artwork { position: relative; height: 88px; }
/* Use the displayed dimensions directly so hover does not rasterize a scaled-down stack. */
#music-stack { position: absolute; left: 50%; bottom: 0; width: 108px; height: 88px; transform: translateX(-50%) scale(var(--note-scale, 1)); transform-origin: center bottom; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.record-sleeve {
  position: absolute;
  width: 61.6px;
  height: 61.6px;
  padding: 0;
  border: 0;
  border-radius: .8px;
  background: #181c25;
  color: #eee;
  box-shadow: 0 4px 10.4px #0005, 0 0 0 .4px #ffffff1c;
  cursor: grab;
  touch-action: none;
  will-change: transform;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.record-sleeve img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; }
.sleeve-fallback { display: block; padding: 7.2px; font-size: 5.6px; text-align: left; }
.sleeve-0 { left: 2.8px; top: 10.4px; transform: rotate(-14deg); z-index: 1; }
.sleeve-1 { left: 23.2px; top: 18.4px; transform: rotate(-2deg); z-index: 3; }
.sleeve-2 { left: 42px; top: 8.8px; transform: rotate(12deg); z-index: 2; }
@media (hover: hover) {
  #music-stack:hover .sleeve-0 { transform: translate(-8px, -5.6px) rotate(-20deg); }
  #music-stack:hover .sleeve-1 { transform: translate(0, 3.2px) rotate(0deg); }
  #music-stack:hover .sleeve-2 { transform: translate(8px, -5.6px) rotate(18deg); }
}
.record-sleeve:focus-visible { outline-offset: 2px; z-index: 4; }
#music-orbit.is-dragging .record-sleeve { cursor: grabbing; }
#music-orbit.is-held .music-drift, #music-orbit.is-suspended .music-drift, .music-drift:has(:focus-visible) { animation-play-state: paused; }
.music-caption { margin-top: 8px; white-space: nowrap; text-align: center; color: var(--footer-ink); pointer-events: none; }
.music-caption h2 { font-size: 13px; opacity: .7; }
@keyframes music-drift {
  from { transform: translate(-1.5px, 2.7px); }
  to { transform: translate(1.8px, -2.7px); }
}
@media (max-width: 700px) {
  #intro-orbit { left: 44%; top: 32%; width: min(270px, calc(100vw - 72px)); }
  #music-orbit { left: 56%; top: 67%; width: 100px; }
  .record-sleeve { width: 56px; height: 56px; }
  .sleeve-0 { left: 2px; }
  .sleeve-1 { left: 21.6px; }
  .sleeve-2 { left: 39.2px; }
  .music-artwork { height: 82px; }
  #music-stack { width: 100px; height: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .music-drift { animation: none; }
  .record-sleeve { transition: none; }
  #music-orbit { transform: translate(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px))); }
}

.music-caption a { color: inherit; text-decoration: none; pointer-events: auto; }