.wmp{--wmp-accent:#0b8fd6;--wmp-head:#eef2f5;--wmp-ink:#2b3a45;--wmp-mute:#6b7b87;--wmp-line:#e1e7eb;--wmp-track:#cdd7de;--wmp-hover:#f4f9fc;--wmp-act:#e6f3fb;
max-width:560px;margin:0 auto;border:1px solid var(--wmp-accent);border-radius:4px;overflow:hidden;background:#fff;color:var(--wmp-ink);font-size:15px;line-height:1.4;font-family:"Lora","Helvetica Neue",Arial,Helvetica,sans-serif;box-sizing:border-box}
.wmp *{box-sizing:border-box}
.wmp button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0;margin:0;box-shadow:none;text-shadow:none;border-radius:0;text-transform:none;letter-spacing:normal}
.wmp button:focus-visible,.wmp input:focus-visible,.wmp li:focus-visible{outline:2px solid var(--wmp-accent);outline-offset:2px}
.wmp-top{padding:20px 22px 16px;background:var(--wmp-head);border-bottom:1px solid var(--wmp-line)}
.wmp-title{font-family:inherit;font-size:20px;font-weight:600;line-height:1.25;margin:0;padding:0;color:var(--wmp-ink);text-transform:none;letter-spacing:normal}
.wmp-sub{font-size:13.5px;color:var(--wmp-mute);margin:3px 0 16px}
.wmp-bar{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--wmp-mute);font-variant-numeric:tabular-nums}
.wmp-bar span{min-width:34px}
.wmp-bar span:last-child{text-align:right}
.wmp input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:linear-gradient(to right,var(--wmp-accent) var(--p,0%),var(--wmp-track) var(--p,0%));cursor:pointer;margin:0;padding:0;border:0;box-shadow:none}
.wmp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--wmp-accent);border:2px solid #fff;box-sizing:border-box}
.wmp input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--wmp-accent);border:2px solid #fff;box-sizing:border-box}
.wmp-seek{flex:1;min-width:0}
.wmp-ctl{display:flex;align-items:center;justify-content:space-between;margin-top:14px;gap:6px}
.wmp .wmp-ib{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--wmp-mute);transition:background .15s,color .15s}
.wmp .wmp-ib:hover{background:#dde6ec;color:var(--wmp-ink)}
.wmp .wmp-ib.on{background:var(--wmp-accent);color:#fff}
.wmp .wmp-ib svg,.wmp .wmp-main svg{width:20px;height:20px;fill:currentColor;display:block}
.wmp-mid{display:flex;align-items:center;gap:8px}
.wmp .wmp-main{width:52px;height:52px;border-radius:50%;background:var(--wmp-accent);color:#fff;display:grid;place-items:center;transition:filter .15s}
.wmp .wmp-main:hover{filter:brightness(.92)}
.wmp .wmp-main svg{width:26px;height:26px}
.wmp-vol{display:flex;align-items:center;gap:4px}
.wmp-vol input{width:68px}
.wmp-search{padding:12px 16px;border-bottom:1px solid var(--wmp-line);background:#fff}
.wmp-search input{width:100%;height:40px;border:1px solid var(--wmp-track);border-radius:4px;padding:0 12px;font-family:inherit;font-size:15px;background:#fff;color:var(--wmp-ink);box-shadow:none;margin:0}
.wmp-search input:focus{border-color:var(--wmp-accent);outline:0}
.wmp-list{list-style:none;margin:0;padding:0}
.wmp-list li{display:flex;align-items:center;margin:0;padding:12px 22px;cursor:pointer;border-bottom:1px solid var(--wmp-line);border-left:4px solid transparent;color:var(--wmp-ink);background:#fff;transition:background .12s}
.wmp-list li:last-child{border-bottom:0}
.wmp-list li:hover{background:var(--wmp-hover)}
.wmp-list li.act{background:var(--wmp-act);border-left-color:var(--wmp-accent);color:var(--wmp-accent);font-weight:600}
.wmp-t{flex:1;min-width:0}
.wmp-empty{padding:16px;text-align:center;color:var(--wmp-mute)}
@media(max-width:420px){.wmp-vol input{display:none}.wmp .wmp-ib{width:34px;height:34px}.wmp-top{padding:16px}.wmp-list li{padding:12px 16px}}