.record-origin {
  aspect-ratio:1;
  height:auto;
  animation:none!important;
  transform:none!important;
  visibility:hidden;
  pointer-events:none;
}

/* Show the vinyl only after its first position has been measured and applied. */
#music-record:not(.is-ready) { visibility:hidden; pointer-events:none; }

.floating-record.music-record {
  position:fixed;
  right:auto;
  bottom:auto;
  padding:0;
  height:auto;
  aspect-ratio:1;
  animation:none;
  left:0;
  top:0;
  transform-origin:0 0;
  will-change:transform;
  z-index:46;
  border-radius:50%;
  touch-action:manipulation;
}


.music-record .record-disc {
  position:relative;
  width:100%;
  max-width:none;
  inset:auto;
  transform:none;
  transition:none;
  animation:music-record-spin 18s linear infinite;
  animation-play-state:paused;
}

@media (max-width:760px), (hover:none) and (pointer:coarse) {
  .floating-record.music-record.is-mobile-docked {
    width:64px !important;
    left:auto;
    top:auto;
    right:26px;
    bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    transform:none !important;
    --record-dock-ratio:1 !important;
  }
}

.music-record.is-playing .record-disc {
  animation-play-state:running;
}

.music-record .record-disc {
  background:repeating-radial-gradient(circle,#2a2624 0px,#25221f 1px,#0d1410 2px,#0a100d 3px,#161c16 4px);
  box-shadow:4px 7px 17px #07130c60;
}

.music-record .record-label {
  background:#df5b31;
  color:#16291e;
  border:1px solid #16291e24;
  padding:5%;
  overflow:hidden;
}

.music-record .record-label > span:first-child { max-width:100%; line-height:1.2; }
.music-record .record-label strong { max-width:100%; text-wrap:balance; }
.music-record.is-sleeved .record-disc { box-shadow:4px 7px 17px #0008; }
.music-record.is-exchanging { pointer-events:none; }
.music-record.is-exchanging .record-tonearm { opacity:0; }
.music-record.is-exchanging .record-disc { box-shadow:4px 7px 17px #0006; }
.record-sleeve-front { position:fixed; left:0; top:0; height:auto; aspect-ratio:1; object-fit:contain; z-index:47; pointer-events:none; transform-origin:0 0; box-shadow:8px 12px 20px #0007; }
.record-sleeve-front[hidden] { display:none; }

.music-record:focus-visible {
  outline:2px solid var(--ivory);
  outline-offset:6px;
}

.music-record.is-docked .record-label {
  font-size:calc(3px * var(--record-dock-ratio,1));
  gap:calc(1px * var(--record-dock-ratio,1));
}

.music-record.is-docked .record-label strong {
  font-size:calc(4px * var(--record-dock-ratio,1));
}

.music-record.is-docked .record-label small {
  font-size:calc(2px * var(--record-dock-ratio,1));
}

.no-motion .music-record .record-disc {
  animation:none;
}

.record-tonearm {
  position:absolute;
  width:55%;
  height:91%;
  right:-12%;
  top:-9%;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s;
  filter:drop-shadow(1px 2px 2px #0008);
}

.record-tonearm svg {
  width:100%;
  height:100%;
  overflow:visible;
}

.is-docked .record-tonearm {
  opacity:1;
}

.arm-base {
  fill:#17231e;
  stroke:#9c9986;
  stroke-width:1.4;
}

.arm-swing {
  transform-origin:35px 9px;
  transform:rotate(-48deg);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.is-playing .arm-swing {
  transform:rotate(var(--record-needle-angle,0deg));
}

.arm-shadow {
  fill:none;
  stroke:#15211b;
  stroke-width:5.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.arm-stem {
  fill:none;
  stroke:#c5c1ae;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.arm-highlight {
  fill:none;
  stroke:#f4f3e6;
  stroke-width:.7;
}

.arm-head {
  fill:#ece5cf;
  stroke:#293a30;
  stroke-width:1;
}

.arm-tip {
  stroke:#d3c39e;
  stroke-width:1.5;
}

.arm-pivot {
  fill:#e8d7b8;
  stroke:#17231e;
  stroke-width:1;
}

.no-motion .arm-swing,
.no-motion .record-tonearm {
  transition:none;
}

@keyframes music-record-spin {
  from {
    rotate:0deg;
  }

  to {
    rotate:360deg;
  }
}

@media(prefers-reduced-motion:reduce) {
  .music-record .record-disc {
    animation:none;
  }
}