.fd-header-music {
  position: relative;
  margin-right: 0.3rem;
}

.fd-header-music-btn {
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--fd-border, rgba(136, 165, 221, 0.42));
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 46%),
    linear-gradient(132deg, rgba(11, 23, 47, 0.92), rgba(20, 51, 88, 0.78));
  color: var(--fd-header-text, #eaf4ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.96rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(8, 20, 46, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 180ms ease, filter 180ms ease, border-color 180ms ease;
  animation: fd-music-spin 4.2s linear infinite;
  animation-play-state: paused;
  transform-origin: center center;
  will-change: transform;
}

.fd-header-music-btn:hover,
.fd-header-music-btn:focus-visible {
  box-shadow: 0 11px 25px rgba(7, 18, 42, 0.36);
  border-color: color-mix(in srgb, var(--fd-accent, #66d9c5) 62%, transparent);
  filter: brightness(1.06);
}

.fd-header-music-btn.is-playing {
  animation-play-state: running;
}

[data-md-color-scheme="default"] .fd-header-music-btn {
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 46%),
    linear-gradient(132deg, rgba(247, 251, 255, 0.97), rgba(234, 243, 255, 0.93));
  color: var(--fd-header-text, #1b3156);
  border-color: rgba(116, 145, 208, 0.42);
  box-shadow: 0 9px 22px rgba(24, 46, 92, 0.18);
}

@keyframes fd-music-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 76.1875em) {
  .fd-header-music {
    margin-right: 0.15rem;
  }

  .fd-header-music-btn {
    width: 2rem;
    height: 2rem;
    font-size: 0.92rem;
  }
}