.dmp-player { --dmp-wave:#8b6c98; --dmp-progress:#20b8aa; --dmp-accent:#20b8aa; --dmp-control-gap:20px; width:100%; max-width:760px; margin:0 auto; padding:24px 12px; box-sizing:border-box; color:#27202d; font-family:inherit; display:flex; flex-direction:column; }
.dmp-playlist { width:min(100%,500px); margin:0 auto 32px; display:flex; flex-direction:column; align-items:stretch; order:1; }
.dmp-track { appearance:none; border:0; background:transparent; color:inherit; display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; padding:7px 8px; border-radius:5px; font:inherit; font-size:14px; text-align:left; cursor:pointer; transition:color .18s,background .18s; }
.dmp-track:hover { background:color-mix(in srgb,var(--dmp-accent) 8%,transparent); }
.dmp-track:focus-visible,.dmp-controls button:focus-visible { outline:2px solid var(--dmp-accent); outline-offset:3px; }
.dmp-track.is-active { color:var(--dmp-accent); font-weight:600; }
.dmp-track-icon { width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:7px solid currentColor; }
.dmp-track.is-playing .dmp-track-icon { width:7px; height:9px; border:0; background:linear-gradient(90deg,currentColor 0 38%,transparent 38% 62%,currentColor 62%); }
.dmp-track-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dmp-track-duration { opacity:.58; font-size:12px; font-variant-numeric:tabular-nums; }
.dmp-wave-wrap { position:relative; width:100%; height:150px; order:2; }
.dmp-waveform { display:block; width:100%; height:150px; cursor:pointer; touch-action:none; }
.dmp-controls { display:flex; justify-content:center; align-items:center; gap:26px; margin-top:var(--dmp-control-gap); order:3; }
.dmp-controls button { appearance:none; border:0; background:transparent; color:var(--dmp-accent); position:relative; cursor:pointer; padding:0; }
.dmp-toggle { width:42px; height:42px; border-radius:50%!important; background:var(--dmp-accent)!important; }
.dmp-toggle span { position:absolute; left:16px; top:12px; width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid #fff; }
.dmp-toggle.is-playing span { left:13px; top:12px; width:16px; height:18px; border:0; background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%); }
.dmp-prev,.dmp-next { width:28px; height:28px; }
.dmp-prev:before,.dmp-next:before { content:""; position:absolute; top:7px; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; }
.dmp-prev:before { left:7px; border-right:10px solid currentColor; }
.dmp-next:before { right:7px; border-left:10px solid currentColor; }
.dmp-prev:after,.dmp-next:after { content:""; position:absolute; top:7px; width:2px; height:14px; background:currentColor; }
.dmp-prev:after { left:5px; }.dmp-next:after { right:5px; }
.dmp-audio { display:none; order:4; }
.dmp-player.is-wave-first .dmp-wave-wrap { order:1; }
.dmp-player.is-wave-first .dmp-controls { order:2; }
.dmp-player.is-wave-first .dmp-playlist { order:3; margin-top:32px; margin-bottom:0; }
@media (max-width:600px) { .dmp-player{padding-inline:4px}.dmp-playlist{margin-bottom:20px}.dmp-wave-wrap,.dmp-waveform{height:120px}.dmp-track{font-size:13px} }
@media (prefers-reduced-motion:reduce) { .dmp-track{transition:none} }