.music-player {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
}

.music-toggle {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 169, 97, 0.55);
    border-radius: 50%;
    color: #f6e7c8;
    background: rgba(17, 20, 27, 0.88);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38), 0 0 20px rgba(201, 169, 97, 0.14);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.music-toggle:hover {
    transform: translateY(-2px);
    border-color: #c9a961;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45), 0 0 26px rgba(201, 169, 97, 0.25);
}

.music-toggle:focus-visible {
    outline: 3px solid rgba(201, 169, 97, 0.45);
    outline-offset: 3px;
}

.music-wave { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.music-wave > span { width: 3px; height: 100%; border-radius: 999px; background: currentColor; transform: scaleY(.12); transform-origin: center; animation: quietWave 1.5s ease-in-out var(--wave-delay) infinite alternate; will-change: transform; }
.music-wave > span:nth-child(2), .music-wave > span:nth-child(5) { animation-duration: 1.25s; }
.music-wave > span:nth-child(3) { animation-duration: 1.7s; }
.music-player.is-playing .music-wave > span { animation-name: loudWave; animation-duration: .52s; }
.music-player.is-playing .music-wave > span:nth-child(2), .music-player.is-playing .music-wave > span:nth-child(5) { animation-duration: .4s; }
.music-player.is-playing .music-wave > span:nth-child(3) { animation-duration: .64s; }
.music-player.is-playing .music-toggle { animation: musicPulse 2s ease-in-out infinite; }

@keyframes quietWave { from { transform: scaleY(.08); opacity: .65; } to { transform: scaleY(.18); opacity: .9; } }
@keyframes loudWave { 0% { transform: scaleY(.18); } 35% { transform: scaleY(var(--wave-height)); } 70% { transform: scaleY(.32); } 100% { transform: scaleY(.72); } }

@keyframes musicPulse {
    0%, 100% { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38), 0 0 14px rgba(201, 169, 97, 0.16); }
    50% { box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38), 0 0 30px rgba(201, 169, 97, 0.4); }
}

@media (max-width: 640px) {
    .music-player { right: 14px; bottom: 14px; }
    .music-toggle { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .music-player.is-playing .music-toggle { animation: none; }
    .music-wave > span { animation: none; }
    .music-player.is-playing .music-wave > span { transform: scaleY(var(--wave-height)); }
}