.night-music {
  position: fixed; right: 24px; bottom: 24px; z-index: 45;
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 10px; border: 1px solid #e4c98580; border-radius: 50%;
  background: #102333df; color: #ffedbf; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.night-music[hidden] { display: none; }
.night-music svg { width: 22px; height: 22px; }
.night-music .music-slash { opacity: 0; }
.night-music[data-enabled="false"] .music-slash { opacity: 1; }
.music-hint {
  position: absolute; right: 0; bottom: calc(100% + 6px); padding: 4px 8px;
  border-radius: 6px; background: #102333ed; color: #ffedbf;
  font-size: 12px; line-height: 1.4; white-space: nowrap;
}
.music-hint[hidden] { display: none; }
.night-music:active { transform: scale(.94); }
.night-music:focus-visible { outline: 2px solid #fff0c9; outline-offset: 3px; }
.night-music[data-state="loading"] { opacity: .65; }
@media (max-width: 767px) {
  .night-music { top: max(12px, env(safe-area-inset-top)); right: 62px; bottom: auto; }
  .music-hint { top: calc(100% + 6px); bottom: auto; }
}