.mp{z-index:80;box-sizing:border-box;color:#212324;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #00000014;border-radius:999px;width:400px;max-width:calc(100% - 1.5rem);height:36px;margin:0 auto;transition:box-shadow .28s;position:relative;overflow:hidden;box-shadow:0 6px 18px #0000000f}.mp[data-playing=true]{box-shadow:0 6px 18px #00000012,0 0 0 1px #00000005}.mp-row{box-sizing:border-box;align-items:center;gap:.5rem;height:100%;padding:0 .65rem 0 .55rem;display:flex}.mp-art{--mp-art-zoom:1;--mp-art-origin-x:50%;--mp-art-origin-y:50%;background:#ececec;border-radius:7px;flex-shrink:0;width:22px;height:22px;transition:border-radius .28s;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001a,0 1px 2px #0000000d}.mp[data-playing=true] .mp-art{border-radius:50%}.mp[data-playing=true] .mp-art img,.mp[data-playing=true] .mp-art-fallback{animation:3.2s linear infinite mp-spin}.mp-art:after{content:"";opacity:0;z-index:1;pointer-events:none;background:#fff;border-radius:50%;width:.28rem;height:.28rem;margin:-.14rem 0 0 -.14rem;transition:opacity .2s;position:absolute;inset:50%;box-shadow:0 0 0 1px #00000014}.mp[data-playing=true] .mp-art:after{opacity:1}.mp-art img{object-fit:cover;width:100%;height:100%;transform:scale(var(--mp-art-zoom,1));transform-origin:var(--mp-art-origin-x,50%) var(--mp-art-origin-y,50%);display:block}.mp-art-fallback{color:#a1a1a1;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.mp-meta{box-sizing:border-box;flex:auto;align-items:center;gap:.35rem;min-width:0;display:flex;overflow:hidden}.mp-title,.mp-artist{text-overflow:ellipsis;white-space:nowrap;line-height:1;overflow:hidden}.mp-title{letter-spacing:-.02em;flex:0 auto;min-width:0;font-size:.6875rem;font-weight:580}.mp-artist{color:#737373;flex:0 auto;min-width:0;font-size:.625rem}.mp-artist:empty{display:none}.mp-transport{flex:none;justify-content:center;align-items:center;gap:.35rem;margin-left:calc(32px - .5rem);display:flex}.mp-icon-btn,.mp-ctrl{box-sizing:border-box;color:#212324;cursor:pointer;background:0 0;border:0;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin:0;padding:0;transition:background .18s,transform .16s,opacity .18s,border-color .18s;display:inline-flex}.mp-ctrl:hover{background:#00000014}.mp-ctrl:active{transform:scale(.94)}.mp-volume .mp-icon-btn:active{transform:none}.mp-icon-btn:disabled,.mp-ctrl:disabled{opacity:.32;cursor:not-allowed;background:0 0;transform:none}.mp-ctrl svg,.mp-icon-btn svg{pointer-events:none;width:12px;height:12px;display:block}.mp-ctrl-shuffle{color:#212324;background:#00000014;border:0}.mp-ctrl-shuffle:hover{color:#212324;background:#0000001f}.mp-ctrl-shuffle:active{background:#00000029}.mp-ctrl-play{color:#fff;background:#111}.mp-ctrl-play:hover{color:#fff;background:#222}.mp-ctrl-play:disabled{color:#00000059;background:#00000014}.mp-ctrl-play:disabled:hover{background:#00000014}.mp-transport .mp-ctrl-play[data-active=true]{color:#fff;background:#111}.mp-transport .mp-ctrl-play[data-active=true]:hover{background:#222}.mp-volume{box-sizing:border-box;border-radius:999px;flex:none;align-items:center;gap:.25rem;min-width:0;height:22px;padding:0 .4rem 0 .1rem;transition:background .18s;display:flex}.mp-volume:hover{background:#00000014}.mp-volume:active{background:#0000001a}.mp-volume .mp-icon-btn{background:0 0}.mp-volume .mp-icon-btn:hover,.mp-volume .mp-icon-btn:active{background:0 0;transform:none}.mp-volume-slider{align-items:center;width:3.25rem;height:22px;transition:width .22s,opacity .22s;display:flex;overflow:hidden}.mp-range{appearance:none;cursor:pointer;accent-color:#111;background:#00000014;border-radius:999px;outline:none;width:100%;height:3px;margin:0;display:block}.mp-range::-webkit-slider-runnable-track{border-radius:999px;height:3px}.mp-range::-moz-range-track{background:#00000014;border:0;border-radius:999px;height:3px}.mp-range::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#111;border:0;border-radius:50%;width:8px;height:8px;margin-top:-2.5px;box-shadow:0 0 0 1.5px #fff}.mp-range::-moz-range-thumb{cursor:pointer;background:#111;border:0;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 1.5px #fff}.mp-crossfade{animation:.32s mp-crossfade}.mp-art .mp-crossfade{animation:.32s mp-art-fade}@keyframes mp-spin{0%{transform:rotate(0deg) scale(var(--mp-art-zoom,1))}to{transform:rotate(360deg) scale(var(--mp-art-zoom,1))}}@keyframes mp-crossfade{0%{opacity:0;transform:translate(4px)}to{opacity:1;transform:translate(0)}}@keyframes mp-art-fade{0%{opacity:0}to{opacity:1}}@media (max-width:820px){.mp-row{gap:.4rem;padding:0 .55rem 0 .45rem}.mp-transport{gap:.3rem;margin-left:calc(24px - .4rem)}.mp-volume-slider{opacity:0;pointer-events:none;width:0}.mp[data-volume-open=true] .mp-volume-slider{opacity:1;pointer-events:auto;width:3rem}}@media (max-width:560px){.mp-volume-slider{display:none}}@media (prefers-reduced-motion:reduce){.mp,.mp-icon-btn,.mp-ctrl,.mp-art img,.mp-art-fallback,.mp-art,.mp-crossfade,.mp-volume-slider{transition:none!important;animation:none!important}}