#intro-orbit { left: 32%; top: 33%; }
#music-orbit { left: 74%; top: 48%; }
#quanta-orbit {
  position: fixed;
  left: 39%;
  top: 70%;
  width: clamp(135px, 18vw, 175px);
  transform: translate(calc(-50% + var(--note-x, 0px) + var(--drag-x, 0px)), calc(-50% + var(--note-y, 0px) + var(--drag-y, 0px))) scale(var(--note-scale, 1));
  will-change: transform;
}
.quanta-drift { --rest-angle: 6.5; animation: quanta-float 8s ease-in-out -3.2s infinite alternate; }
#quanta-phone {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1380 / 2880;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.quanta-bezel { position: relative; display: block; width: 100%; height: auto; pointer-events: none; }
.quanta-screen {
  position: absolute;
  left: 4.3478%;
  top: calc(2.5% - 2px);
  width: 91.3043%;
  height: calc(95% + 2px);
  overflow: hidden;
  /* Slightly underlap the bezel; its own edge defines the visible corners. */
  border-radius: 13% / 5.99%;
  background: #181a1b;
}
/* Show only the app's screen area from the existing App Store images.
   The promotional heading and old device frame remain outside this window. */
.quanta-shot {
  position: absolute;
  width: 120.2405%;
  height: 119.8157%;
  max-width: none;
  left: -10.2204%;
  top: -14.6544%;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.quanta-shot.is-current { opacity: 1; }
.quanta-caption { margin: 13px 0 0; text-align: center; font-size: 12px; color: var(--footer-ink); opacity: .65; pointer-events: none; }
.quanta-caption span { display: inline-block; margin-left: 3px; opacity: .65; }
#quanta-orbit.is-dragging #quanta-phone { cursor: grabbing; }
#quanta-orbit.is-held .quanta-drift,
#quanta-orbit.is-suspended .quanta-drift,
.quanta-drift:has(:focus-visible) { animation-play-state: paused; }
#quanta-phone:focus-visible { outline-offset: 8px; border-radius: 22px; }
@keyframes quanta-float {
  from { transform: translate(-4.5px, -6.75px); }
  to { transform: translate(3.75px, 6.75px); }
}
@media (min-width: 1100px) {
  #quanta-orbit { left: 49%; top: 66%; }
}
@media (max-width: 700px) {
  #intro-orbit { left: 46%; top: 24%; }
  #music-orbit { left: 60%; top: 51%; }
  #quanta-orbit { left: 28%; top: 77%; width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .quanta-drift { animation: none; }
  .quanta-shot { transition: none; }
  #quanta-orbit { transform: translate(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px))); }
}

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