:root{--progress-container-background-color:#ddd;--progress-background-color:#607186;--thumb-background-color:#000;--song-background-color:#0000;--song-background-color-hover:#ddd;--song-background-color-active:#607186;--song-background-color-active-hover:#5b6a7a;--song-text-color:#000;--song-text-color-hover:#000;--song-text-color-active:#fff;--button-text-color:#eff1f0;--button-background-color:#607186;--button-background-color-hover:#5b6a7a;--tooltip-background-color:#00000080;--tooltip-text-color:#fff}.playlist{margin-bottom:20px;margin-left:max(50% - 240px,0px);width:min(480px,100%)}.song{background:var(--song-background-color);color:var(--song-text-color);cursor:pointer;padding:2px 24px;user-select:none}.song:hover{background:var(--song-background-color-hover);color:var(--song-text-color-hover)}.song.active{background:var(--song-background-color-active);border-radius:2px;color:var(--song-text-color-active)}.song.active:hover{background:var(--song-background-color-active-hover)}.player-controls{align-items:center;display:flex;margin-bottom:12px;margin-left:max(50% - 240px,0px);max-width:480px}.play-btn{background:var(--button-background-color);border:none;border-radius:2px;color:var(--button-text-color);cursor:pointer;font-size:16px;height:24px;line-height:1;margin-right:8px;padding:3px 12px;width:36px}.prev-btn{margin-right:4px}.next-btn,.prev-btn{background:var(--button-background-color);border:none;border-radius:2px;color:var(--button-text-color);cursor:pointer;font-size:16px;height:24px;line-height:1;padding:4px 6px;width:36px}.next-btn:hover,.play-btn:hover,.prev-btn:hover{background:var(--button-background-color-hover)}.track-name{flex:1;font-size:14px}.progress-container{background:var(--progress-container-background-color);cursor:pointer;height:6px;margin-bottom:4px;margin-left:max(50% - 240px,0px);max-width:480px;position:relative}.progress{background:var(--progress-background-color);height:100%;width:0}.thumb{background:var(--thumb-background-color);height:10px;top:50%;transform:translateY(-50%);transition:left .2s linear;width:10px}.thumb,.tooltip{position:absolute}.tooltip{background:var(--tooltip-background-color);color:var(--tooltip-text-color);display:none;font-size:10px;padding:2px 4px;pointer-events:none;transform:translate(-50%,-150%);white-space:nowrap}.time-info{display:flex;font-size:12px;justify-content:space-between;margin-left:max(50% - 240px,0px);margin-top:4px;max-width:480px}audio{display:none}.icon{stroke-width:0;stroke:#000;height:1em;width:1em;fill:var(--button-text-color);display:inline-block}