.music-dock { position: fixed; z-index: 10; right: max(12px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); color: #35584e; font: 14px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.music-dock[hidden], .music-panel[hidden] { display: none; }
.music-capsule { display: flex; align-items: center; width: 102px; height: 44px; border: 1px solid #ffffffc9; border-radius: 30px; background: #fffdf2d9; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 3px 16px #304b4326; }
.music-capsule button { height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms cubic-bezier(.23,1,.32,1); }
.music-capsule button:active { transform: scale(.96); }
.music-capsule button:focus-visible, #music-volume:focus-visible { outline: 2px solid #3d7463; outline-offset: 3px; }
#music-toggle { width: 59px; display: flex; align-items: center; justify-content: center; gap: 7px; }
#music-more { width: 41px; position: relative; font: 20px/1 sans-serif; letter-spacing: 1px; }
#music-more::before { content: ""; position: absolute; left: 0; top: 13px; height: 18px; width: 1px; background: #54726626; }
.music-icon { width: 15px; height: 15px; display: block; fill: currentColor; }
.music-pause, .music-dock.is-playing .music-play { display: none; }
.music-dock.is-playing .music-pause { display: block; }
.music-bars { display: flex; align-items: center; height: 14px; gap: 2px; }
.music-bars i { width: 2px; background: #769b8a; height: 5px; border-radius: 2px; }
.music-bars i:nth-child(2) { height: 12px; }
.music-bars i:nth-child(3) { height: 8px; }
.is-playing .music-bars i { animation: music-sound 1s ease-in-out infinite alternate; }
.is-playing .music-bars i:nth-child(2) { animation-delay: -.4s; }
.is-playing .music-bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes music-sound { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
.music-panel { position: absolute; right: 0; bottom: 55px; width: min(242px, calc(100vw - 24px)); padding: 16px; border-radius: 17px; background: #fffef6f2; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 6px 28px #294c4126; border: 1px solid white; }
.music-panel label { display: block; font-size: 11px; color: #687f73; margin-bottom: 5px; }
#music-volume { display: block; width: 100%; height: 28px; accent-color: #789d86; cursor: pointer; margin: 0; }
.music-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .is-playing .music-bars i { animation: none; } .music-capsule button { transition: none; } }