.player{height:64px;position:relative;background:#fff;border:1px dashed #252525;color:#151515}.player:before{content:"";position:absolute;inset:0 auto 0 0;width:8px;background:#b5f2ff}.player-meta{position:absolute;left:24px;top:10px;display:flex;flex-direction:column;gap:3px;max-width:216px}.player-title{font-size:15px;font-weight:500;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{font-size:12px;line-height:16px;color:#5c5c5c}.player-art{position:absolute;right:144px;top:7px;width:48px;height:48px;object-fit:cover}.player-button{position:absolute;top:7px;width:48px;height:48px;border:0;padding:0;display:grid;place-items:center;background:#fff;color:#151515}.player-button svg{width:48px;height:48px}.player-play{right:88px;background:#111;color:#fff}.player-volume{right:32px}.player-seek{position:absolute;left:260px;right:358px;top:9px;width:calc(100% - 618px);height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none}.player-seek::-webkit-slider-runnable-track{height:1px;background:#a6a6a6}.player-seek::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:6px;border-radius:50%;background:#151515;margin-top:-2.5px}.player-seek:enabled::-webkit-slider-runnable-track{background:#8e8e8e}.player-seek::-moz-range-track{height:1px;background:#a6a6a6}.player-seek:enabled::-moz-range-track{background:#8e8e8e}.player-seek::-moz-range-thumb{width:6px;height:6px;border:0;border-radius:50%;background:#151515}.player-time{position:absolute;right:212px;top:23px;width:126px;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:12px;line-height:18px;white-space:nowrap}.volume-panel{position:absolute;right:16px;bottom:72px;background:#fff;border:1px solid #555;padding:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:230px;font-size:12px;z-index:20}.volume-panel[hidden]{display:none}.volume-panel button{padding:8px 12px;background:#fff;border:1px solid #555}.volume-panel input{width:140px;accent-color:#151515}.player-status{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.dock{position:fixed;left:16px;right:16px;bottom:16px;z-index:30}.dock[hidden]{display:none}.inline-player .player-meta{max-width:160px}.inline-player .player-seek{left:200px;right:270px;width:calc(100% - 470px)}.inline-player .player-time{right:128px;width:126px}.inline-player .player-art{display:none}.inline-player .player-play{right:64px}.inline-player .player-volume{right:8px}
@media(max-width:1000px){.dock .player-meta{max-width:155px}.dock .player-seek{left:200px;right:310px;width:calc(100% - 510px)}.dock .player-time{right:168px}.dock .player-art{right:120px}.dock .player-play{right:64px}.dock .player-volume{right:8px}}
@media(max-width:700px){.dock{left:10px;right:10px;bottom:10px}.player{height:108px}.player-meta,.inline-player .player-meta,.dock .player-meta{left:18px;top:10px;max-width:calc(100% - 138px)}.player-art,.dock .player-art{display:none}.player-play,.dock .player-play,.inline-player .player-play{right:64px}.player-volume,.dock .player-volume,.inline-player .player-volume{right:8px}.player-seek,.dock .player-seek,.inline-player .player-seek{left:18px;right:128px;top:auto;bottom:1px;width:calc(100% - 146px)}.player-time,.dock .player-time,.inline-player .player-time{right:8px;width:112px;top:auto;bottom:15px;font-size:11px}.volume-panel{right:8px;bottom:116px}.player-title{font-size:14px}}