.background-music {
  position: fixed;
  right: 35px;
  bottom: calc(35px + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #777;
}
.music-title {
  font: 400 12px/20px "IBM Plex Mono", monospace;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 160ms ease, transform 180ms ease;
  pointer-events: none;
}
.music-toggle {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.music-toggle::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.music-disc { position: absolute; inset: -1px; border-radius: 50%; overflow: hidden; animation: music-turn 20s linear infinite; animation-play-state: paused; }
.music-disc img { width: 34px; height: 34px; object-fit: cover; }
.is-playing .music-disc { animation-play-state: running; }
.music-glyph { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.16); opacity: 0; transition: opacity 140ms ease; }
.music-glyph img { grid-area: 1 / 1; object-fit: contain; }
.music-glyph .music-play { width: 14px; height: 20px; }
.music-glyph .music-pause { display: none; width: 16px; height: 20px; transform: scale(.625, .6); }
.is-playing .music-play { display: none; }
.is-playing .music-pause { display: block; }
.background-music:has(.music-toggle:focus-visible) .music-title,
.music-toggle:focus-visible .music-glyph { opacity: 1; transform: none; }
@media (hover: hover) {
  .background-music:has(.music-toggle:hover) .music-title,
  .music-toggle:hover .music-glyph { opacity: 1; transform: none; }
}
@keyframes music-turn { to { transform: rotate(360deg); } }
@media (max-width: 1279px) {
  .background-music { right: 24px; bottom: calc(35px + env(safe-area-inset-bottom, 0px)); gap: 12px; }
  .music-title { max-width: calc(100vw - 100px); overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .music-disc { animation: none; }
  .music-title, .music-glyph { transition: none; transform: none; }
}