.music-toggle {
  position: fixed;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 126px;
  height: 44px;
  padding: 0 15px;
  border: 2px solid #21e9ff;
  border-radius: 4px;
  color: #f5f7ff;
  background: rgba(5, 7, 19, .94);
  box-shadow: 4px 4px 0 #ff2bab, 0 0 18px rgba(33, 233, 255, .22);
  font: 700 11px/1 "Share Tech Mono", "Segoe UI", sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s;
}

.music-toggle:hover {
  color: #21e9ff;
  transform: translateY(-2px);
}

.music-toggle:focus-visible {
  outline: 3px solid #ffd52d;
  outline-offset: 3px;
}

.music-bars {
  display: flex;
  align-items: end;
  gap: 2px;
  width: 18px;
  height: 17px;
}

.music-bars i {
  display: block;
  width: 4px;
  height: 5px;
  background: #8293bb;
}

.music-toggle.is-playing .music-bars i {
  background: #21e9ff;
  box-shadow: 0 0 6px #21e9ff;
  animation: music-bar .65s ease-in-out infinite alternate;
}

.music-toggle.is-playing .music-bars i:nth-child(2) { animation-delay: -.35s; }
.music-toggle.is-playing .music-bars i:nth-child(3) { animation-delay: -.15s; }

@keyframes music-bar {
  from { height: 5px; }
  to { height: 17px; }
}

@media (max-width: 650px) {
  .music-toggle {
    right: 14px;
    bottom: 14px;
    min-width: 46px;
    width: 46px;
    padding: 0 12px;
  }

  .music-toggle span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-playing .music-bars i { animation: none; height: 11px; }
}