.cd-item {
  position: absolute;
  z-index: var(--z);
  padding: 0;
  transform: rotate(var(--rot));
  filter: drop-shadow(4px 10px 9px rgba(0, 0, 0, .55));
  transition: transform .35s cubic-bezier(.3, 1.4, .6, 1);
}
.cd-item:hover,
.cd-item:focus-visible { z-index: 30; transform: translateY(-14px) rotate(0deg) scale(1.03); outline: none; }
.cd-item.out { visibility: hidden; }

.cd-case {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  background: #111;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.cd-case img {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 9%;
  right: 3%;
  width: 88%;
  height: 94%;
  object-fit: cover;
}
.cd-hinge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8%;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .12) 0 2px, rgba(0, 0, 0, .3) 2px 5px), #1A1A1C;
}
.cd-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 35%, transparent 70%, rgba(255, 255, 255, .08));
}

.cd-earbuds {
  position: absolute;
  z-index: 20;
  pointer-events: auto;
  transform: rotate(8deg);
  filter: drop-shadow(3px 6px 5px rgba(0, 0, 0, .55));
}

.cd-view {
  display: grid;
  place-items: center;
  padding: 64px 16px 24px;
  background: radial-gradient(60% 60% at 50% 45%, rgba(20, 40, 28, .5), rgba(4, 8, 6, .85));
}
.cd-view.leaving { animation: fade-out .42s ease-in forwards; }
.cd-held {
  position: relative;
  width: min(380px, 70vw, calc(100dvh - 140px));
  aspect-ratio: 1;
  transition: transform .5s cubic-bezier(.3, .9, .3, 1);
}
.cd-held.playing { transform: translateX(-22%); }
.cd-held .cd-case { box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.cd-disc {
  position: absolute;
  inset: 4%;
  overflow: hidden;
  border-radius: 50%;
  background: #C9CBD0;
  -webkit-mask: radial-gradient(circle, transparent 0 6.8%, #000 7%);
  mask: radial-gradient(circle, transparent 0 6.8%, #000 7%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .6s cubic-bezier(.3, .9, .3, 1);
}
.cd-disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 7%, rgba(220, 222, 228, .92) 7.2% 15%, rgba(255, 255, 255, .5) 15.2% 15.8%, transparent 16%),
    conic-gradient(from 30deg, rgba(255, 255, 255, .28), transparent 20%, rgba(200, 220, 255, .18) 45%, transparent 65%, rgba(255, 220, 240, .2) 85%, rgba(255, 255, 255, .28));
  box-shadow: inset 0 0 0 2px rgba(220, 222, 228, .8);
}
.cd-held.playing .cd-disc { transform: translateX(62%); animation: cd-spin 6s linear .6s infinite; }
@keyframes cd-spin { from { transform: translateX(62%) rotate(0); } to { transform: translateX(62%) rotate(360deg); } }
@media (max-width: 639px) {
  .cd-held.playing { transform: translateY(-20%); }
  .cd-held.playing .cd-disc { transform: translateY(62%); animation-name: cd-spin-down; }
  @keyframes cd-spin-down {
    from { transform: translateY(62%) rotate(0); }
    to { transform: translateY(62%) rotate(360deg); }
  }
}

.mu-now {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  background: rgba(20, 14, 10, .72);
  box-shadow: inset 0 0 0 1px rgba(253, 230, 138, .14), 0 8px 18px rgba(0, 0, 0, .35);
  color: rgba(255, 244, 230, .85);
  font-size: 12px;
}
.mu-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F3ECDD;
  color: #2C1D11;
  transition: transform .15s;
}
.mu-play:hover { transform: scale(1.06); }
.mu-play .icon { font-size: 18px; }
.mu-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.mu-bars i { width: 3px; height: 4px; border-radius: 1px; background: var(--amber); opacity: .5; }
.mu-now.playing .mu-bars i { opacity: 1; animation: mu-bar .9s ease-in-out infinite alternate; }
.mu-now.playing .mu-bars i:nth-child(2) { animation-delay: -.3s; }
.mu-now.playing .mu-bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes mu-bar { from { height: 3px; } to { height: 12px; } }
.mu-song { overflow: hidden; font-family: var(--serif); font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.mu-song b { font-style: italic; font-weight: 600; color: #FFF6E2; }
.mu-time {
  flex: none;
  width: 60px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 244, 230, .18);
}
.mu-time i {
  display: block;
  height: 100%;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s linear;
}
.mu-apple {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: rgba(255, 244, 230, .55);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
}
.mu-apple:hover { color: #FFF6E2; }
.mu-apple .icon { font-size: 12px; }
@media (max-width: 560px) {
  .mu-time { display: none; }
  .mu-song { font-size: 14px; }
}