#wmp {
  position:fixed; left:0; top:0;
  z-index:20;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  transition: opacity .25s ease;
  -webkit-user-select:none; user-select:none;
}
#wmp, #wmp * { pointer-events:none; box-sizing:border-box; }
#wmp.wmp-hidden { opacity:0; visibility:hidden; }
#wmp.wmp-hidden * { pointer-events:none !important; }

#wmp .wmp-scale { position:absolute; left:0; top:0; transform-origin:0 0; }
#wmp .wmp-large { position:absolute; left:0; top:0; width:421px; height:230px; }
#wmp .wmp-small { position:absolute; left:0; top:0; width:112px; height:112px; display:none; }
#wmp.wmp-mode-small .wmp-large { display:none; }
#wmp.wmp-mode-small .wmp-small { display:block; }

#wmp .wmp-main  { position:absolute; left:0; top:0; width:204px; height:230px; }
#wmp .wmp-skinbg { position:absolute; inset:0; background-repeat:no-repeat; }

#wmp .wmp-grab { position:absolute; border-radius:50%; pointer-events:auto; touch-action:none; }

#wmp .wmp-btn {
  position:absolute; padding:0; margin:0; border:0; border-radius:0;
  background:var(--n) no-repeat 0 0;
  pointer-events:auto; cursor:pointer;
  touch-action:manipulation;
}
#wmp .wmp-btn::before { content:""; position:absolute; inset:-3px; }
#wmp .wmp-btn:hover { background-image:var(--o); }
#wmp .wmp-btn:active, #wmp .wmp-btn.down { background-image:var(--p); }
#wmp .wmp-btn:focus { outline:none; }
#wmp .wmp-btn:focus-visible { outline:1px dotted #fff; outline-offset:1px; }
#wmp .wmp-btn[hidden] { display:none; }

#wmp .wmp-text {
  position:absolute;
  color:#fff; font-size:9px; text-align:center;
  white-space:nowrap; overflow:hidden;
  text-shadow:0 1px 1px rgba(0,0,20,0.55);
}
#wmp .wmp-marquee > span { display:inline-block; }
#wmp .wmp-marquee.scroll > span { animation: wmpMarquee var(--dur, 10s) linear infinite; }
@keyframes wmpMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

#wmp .wmp-vis { position:absolute; left:55px; top:105px; width:97px; height:41px; pointer-events:auto; cursor:pointer; }
#wmp .wmp-vis canvas { position:absolute; inset:0; width:97px; height:41px; display:block; }

#wmp .wmp-tray {
  position:absolute; left:147px; top:22px; width:274px; height:185px;
  transform:translateX(-120px);
  visibility:hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
#wmp .wmp-tray.open { transform:none; visibility:visible; transition: transform .3s ease; }
#wmp .wmp-tray.open .wmp-traygrab { pointer-events:auto; touch-action:none; position:absolute; inset:4px; border-radius:14px; }

#wmp .wmp-list {
  position:absolute; left:67px; top:15px; width:165px; height:150px;
  display:flex; flex-direction:column;
  background:#fff; color:#000;
  font-size:9px; line-height:1.35;
  pointer-events:auto;
}
#wmp .wmp-list * { pointer-events:auto; }
#wmp .wmp-list-head {
  padding:2px 4px; border-bottom:1px solid #9fb0d8;
  background:linear-gradient(#f3f6fd, #d9e2f6);
  font-weight:bold; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#wmp .wmp-list ol { list-style:none; margin:0; padding:1px 0; overflow-y:auto; flex:1; scrollbar-width:thin; }
#wmp .wmp-item {
  display:flex; gap:3px; width:100%;
  padding:1px 4px; border:0; margin:0;
  background:none; color:inherit; font:inherit; text-align:left;
  cursor:pointer;
}
#wmp .wmp-item:hover { background:#e4ebfb; }
#wmp .wmp-item:focus-visible { outline:1px dotted #2a4fa8; outline-offset:-1px; }
#wmp .wmp-item .n { color:#7a7f8a; }
#wmp .wmp-item .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#wmp .wmp-item.playing { color:#6699FF; font-weight:bold; }
#wmp .wmp-list .empty { padding:6px; color:#7a7f8a; }

#wmp .wmp-slider { position:absolute; background-repeat:no-repeat; pointer-events:auto; cursor:pointer; touch-action:none; }
#wmp .wmp-slider:focus { outline:none; }
#wmp .wmp-slider:focus-visible { outline:1px dotted #fff; outline-offset:1px; }
#wmp .wmp-thumb { position:absolute; left:0; top:0; background:var(--th) no-repeat; }
#wmp .wmp-slider:hover .wmp-thumb, #wmp .wmp-slider.dragging .wmp-thumb { background-image:var(--tho); }
#wmp .wmp-link { pointer-events:auto; cursor:pointer; text-decoration:underline; }

#wmpTask {
  position:fixed; left:14px; bottom:48px; z-index:20;
  display:flex; align-items:center; gap:8px;
  max-width:min(320px, calc(100vw - 80px));
  padding:6px 14px 6px 10px;
  border:1px solid #1c3f94; border-radius:6px;
  background:linear-gradient(#5b8ef0, #2a5bd4 55%, #2350c2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 6px rgba(0,0,0,0.35);
  color:#fff; font:12px/1.2 Tahoma, Verdana, sans-serif;
  text-shadow:0 1px 1px rgba(0,0,0,0.4);
  cursor:pointer;
}
#wmpTask:hover { background:linear-gradient(#6f9cf5, #3668de 55%, #2c5bd0); }
#wmpTask[hidden] { display:none; }
#wmpTask span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#wmpTask svg { width:16px; height:16px; flex:none; }

#contentArea .np { margin:10px 0 30px; }
#contentArea .np-now {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px;
  padding:24px 28px; margin-bottom:22px;
  border:2px solid #b9bcc2; border-radius:18px;
  background:linear-gradient(rgba(255,255,255,0.9), rgba(226,229,235,0.9));
  box-shadow:inset 0 2px 0 #fff;
}
#contentArea .np-round {
  width:84px; height:84px; flex:none;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:2px solid #8a8d92; border-radius:50%;
  background:linear-gradient(#fbfbfc, #c4c8ce);
  box-shadow:inset 0 2px 0 #fff, 0 3px 8px rgba(0,0,0,0.2);
  color:#23262c; cursor:pointer;
}
#contentArea .np-round:hover { background:linear-gradient(#ffffff, #d7dade); }
#contentArea .np-round:active { background:linear-gradient(#c4c8ce, #eceef1); }
#contentArea .np-round svg { width:36px; height:36px; display:block; }
#contentArea .np-round.small { width:58px; height:58px; border-width:2px; }
#contentArea .np-round.small svg { width:24px; height:24px; }
#contentArea .np-info { min-width:0; }
#contentArea .np-title { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#contentArea .np-time { font-size:0.75em; color:#555; margin:2px 0 8px; font-variant-numeric:tabular-nums; }
#contentArea .np-seek { width:100%; margin:0; accent-color:#2a5bd4; height:28px; cursor:pointer; }
#contentArea .np-open {
  padding:12px 26px; border:2px solid #8a8d92; border-radius:12px;
  background:linear-gradient(#fbfbfc, #c9ccd1); box-shadow:inset 0 2px 0 #fff;
  font:inherit; font-size:0.75em; font-weight:700; color:#1c1d20; cursor:pointer; white-space:nowrap;
}
#contentArea .np-open:hover { background:linear-gradient(#ffffff, #dadde1); }

#contentArea .np-tracks { list-style:none; margin:0; padding:0; }
#contentArea .np-track {
  display:grid; grid-template-columns:58px 58px 1fr auto; align-items:center; gap:0 20px;
  padding:14px 18px; border-radius:14px;
}
#contentArea .np-track + .np-track { border-top:2px solid rgba(160,164,172,0.35); }
#contentArea .np-track:hover { background:rgba(255,255,255,0.55); }
#contentArea .np-track.playing { background:rgba(42,91,212,0.1); }
#contentArea .np-track.playing .np-t { color:#1f4fbf; }
#contentArea .np-num { color:#777; font-size:0.8em; font-variant-numeric:tabular-nums; }
#contentArea .np-name { min-width:0; }
#contentArea .np-t { display:block; font-weight:700; }
#contentArea .np-a { display:block; font-size:0.75em; color:#666; }
#contentArea .np-dur { font-size:0.75em; color:#666; font-variant-numeric:tabular-nums; }
#contentArea .np-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
#contentArea .np-links a {
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 16px; border:2px solid #b3b7be; border-radius:999px;
  background:rgba(255,255,255,0.8);
  font-size:0.62em; font-weight:700; color:#23262c; text-decoration:none;
}
#contentArea .np-links a:hover { border-color:#6d7179; background:#fff; }
#contentArea .np-links a::before { content:""; width:12px; height:12px; border-radius:50%; background:var(--c, #888); }
#contentArea .np-links a.bandcamp { --c:#1da0c3; }
#contentArea .np-links a.spotify { --c:#1db954; }
#contentArea .np-links a.apple { --c:#fa2d48; }
#contentArea .np-links a.other { --c:#8a8d92; }

#contentArea .np-group { margin:1.8em 0 0.5em; font-size:0.72em; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:#5b5f66; transform:none; }
#contentArea .np-release { margin:0 0 1.2em; padding:18px; border-radius:18px; background:rgba(255,255,255,0.35); }
#contentArea .np-rhead { display:grid; grid-template-columns:170px 1fr; gap:26px; align-items:center; margin-bottom:12px; }
#contentArea .np-rinfo { min-width:0; }
#contentArea .np-cover { width:170px; height:170px; border-radius:12px; object-fit:cover; display:block; box-shadow:0 4px 12px rgba(0,0,0,0.22); }
#contentArea .np-thumb { width:58px; height:58px; border-radius:8px; object-fit:cover; display:block; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
#contentArea .np-nocover { display:flex; align-items:center; justify-content:center; background:linear-gradient(#f4f5f7, #b9bdc4); color:#6b6f76; font-size:2em; box-shadow:inset 0 2px 0 #fff, 0 2px 6px rgba(0,0,0,0.15); }
#contentArea .np-thumb.np-nocover { font-size:1em; }
#contentArea .np-rtitle { font-weight:700; font-size:1.15em; line-height:1.3; }
#contentArea .np-rmeta { font-size:0.75em; color:#666; margin-top:2px; }
#contentArea .np-single + .np-single .np-track { border-top:2px solid rgba(160,164,172,0.35); }