#spooky-music-toggle {
  position: fixed;
  z-index: 60;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(28px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 44px;
  height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(185, 165, 243, 0.23);
  border-radius: 999px;
  background: rgba(21, 16, 35, 0.88);
  color: #c5b5e8;
  font: 500 13px "Space Grotesk", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: color 150ms, border-color 150ms, background 150ms;
  touch-action: manipulation;
}
#spooky-music-toggle:hover {
  border-color: #a88de2;
  color: #f4efff;
  background: rgba(48, 32, 74, 0.94);
}
#spooky-music-toggle:focus-visible {
  outline: 2px solid #c9adff;
  outline-offset: 4px;
}
#spooky-music-toggle svg { width: 18px; height: 18px; flex: none; }
#spooky-music-toggle .spooky-music-waves { display: none; }
#spooky-music-toggle[data-state="playing"] { color: #e1d1ff; border-color: rgba(185, 165, 243, 0.46); }
#spooky-music-toggle[data-state="playing"] .spooky-music-waves { display: block; }
#spooky-music-toggle[data-state="playing"] .spooky-music-slash { display: none; }
#spooky-music-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 700px) {
  #spooky-music-toggle {
    left: max(20px, env(safe-area-inset-left));
    top: calc(84px + env(safe-area-inset-top));
    bottom: auto;
    padding: 0 12px;
  }
  #spooky-music-toggle .spooky-music-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #spooky-music-toggle { transition: none; }
}