.ocean-listen{font:inherit;cursor:pointer;background:none;appearance:none}
.song-player[hidden]{display:none}
.song-player{position:fixed;z-index:110;right:24px;top:max(88px,calc(env(safe-area-inset-top) + 88px));width:min(440px,calc(100% - 32px));padding:17px 18px 13px;color:#e6f1f5;background:linear-gradient(135deg,rgba(17,40,54,.95),rgba(8,22,37,.97));border:1px solid rgba(166,212,225,.28);border-radius:20px;box-shadow:0 18px 65px rgba(0,7,19,.42),inset 0 1px rgba(221,244,252,.05);backdrop-filter:blur(22px);animation:song-arrive .4s cubic-bezier(.22,1,.36,1)}
.song-player:hover,.song-player:focus-within{border-color:rgba(179,226,241,.52);box-shadow:0 18px 65px rgba(0,7,19,.42),0 0 28px rgba(123,194,218,.06)}
.song-heading{display:flex;gap:12px;align-items:center}
.song-emblem{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:50%;font-size:27px;color:#b9dee9;background:radial-gradient(circle,rgba(133,198,220,.14),transparent 70%);border:1px solid rgba(146,199,218,.14)}
.song-copy{min-width:0;flex:1}.song-copy small{display:block;font:500 9px/1.5 Manrope,sans-serif;letter-spacing:.2em;color:#a0c2d1;margin-bottom:3px}
.song-copy h2{margin:0;font-family:inherit;font-size:14px;font-weight:500;line-height:1.65;letter-spacing:-.025em;text-wrap:balance}
.song-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:11px;border:0;border-radius:50%;background:none;color:#c0dbe5;cursor:pointer;transition:background .2s,color .2s}
.song-icon:hover{background:rgba(156,207,225,.1);color:#fff}.song-icon:focus-visible,.song-range:focus-visible{outline:2px solid #bbe4f1;outline-offset:3px}
.song-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.song-close{align-self:flex-start;margin:-6px -9px 0 0}.song-close svg{width:19px;height:19px}.song-controls{display:flex;gap:9px;align-items:center;margin-top:13px}
.song-play{background:rgba(158,214,231,.1);color:#ddf1f9}.song-play .song-play-symbol{fill:currentColor;stroke:none;width:19px;height:19px}.song-pause-symbol{display:none}.song-player.is-playing .song-play-symbol{display:none}.song-player.is-playing .song-pause-symbol{display:block}
.song-progress{flex:1;min-width:0}.song-times{display:flex;justify-content:space-between;color:#91afc0;font:400 10px/1.4 Manrope,sans-serif;font-variant-numeric:tabular-nums;margin-top:1px}
.song-range{--song-fill:0%;display:block;appearance:none;width:100%;height:24px;margin:0;background:none;cursor:pointer}
.song-range::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(to right,#b3dce8 0 var(--song-fill),rgba(153,196,216,.2) var(--song-fill) 100%)}
.song-range::-moz-range-track{height:2px;border-radius:2px;background:rgba(153,196,216,.2)}.song-range::-moz-range-progress{height:2px;background:#b3dce8}
.song-range::-webkit-slider-thumb{appearance:none;width:10px;height:10px;margin-top:-4px;border-radius:50%;border:0;background:#d5edf5;box-shadow:0 0 9px rgba(158,214,231,.3)}
.song-range::-moz-range-thumb{width:10px;height:10px;border-radius:50%;border:0;background:#d5edf5}.song-range:disabled{opacity:.45;cursor:default}
.song-volume{width:47px;--song-fill:80%}.song-mute{width:36px;padding:8px}.mute-slash{display:none}.song-mute[aria-pressed=true] .mute-slash{display:block}
.song-status{font-size:12px;line-height:1.6;color:#b8d0de;margin:7px 0 0 53px}.song-status[hidden]{display:none}
@keyframes song-arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.song-player{right:12px;top:max(80px,calc(env(safe-area-inset-top) + 80px));width:calc(100% - 24px);padding:15px 15px 12px;border-radius:17px}.song-copy h2{font-size:13px}.song-heading{gap:9px}.song-emblem{width:36px;height:36px;font-size:24px}.song-volume{display:none}.song-mute{width:44px;padding:11px}.song-controls{gap:9px;margin-top:9px}.song-status{margin-left:0}}
@media(prefers-reduced-motion:reduce){.song-player{animation:none}.song-icon{transition:none}}
.motion-reduced .song-player{animation:none}

.sound-toggle[aria-expanded=true]{border-radius:50%;background:rgba(158,214,231,.1)}
.sound-toggle.is-playing .sound-bars i{background:#c6eef7}
.motion-reduced .sound-toggle i{animation:none}
@media(prefers-reduced-motion:reduce){.sound-toggle i{animation:none!important}}
