.dock{
  --player-accent:#e4bd6a;
  display:grid;
  grid-template-columns:minmax(390px,1.55fr) minmax(150px,190px) auto minmax(170px,.8fr);
  align-items:center;
  column-gap:15px;
}
body[data-artist="evniya"] .dock{--player-accent:#ed4cba}
.plyr-shell{min-width:0}
.dock .plyr{--plyr-color-main:var(--player-accent);--plyr-audio-control-color:#ddd6df;--plyr-audio-control-color-hover:#0b0913;--plyr-audio-controls-background:transparent;--plyr-menu-background:#151321;--plyr-range-fill-background:var(--player-accent);width:100%;min-width:0}
.dock .plyr__controls{display:flex;align-items:center;gap:9px;width:100%;padding:0;background:transparent;color:#ddd6df}
.dock .plyr__tooltip{display:none!important}
.dock .plyr__control{flex:0 0 auto;display:grid;place-items:center;padding:0;border:1px solid #e4bd6a66;border-radius:50%;background:#0e0d17aa;color:var(--player-accent)}
.dock .plyr__control:hover,.dock .plyr__control:focus-visible,.dock .plyr__control[aria-expanded="true"]{background:var(--player-accent);color:#0c0911}
.dock .evniya-skip{width:38px;height:38px}
.dock .evniya-skip svg{display:block;width:17px;height:17px;fill:currentColor}
.dock .evniya-play{width:48px;height:48px;border-color:color-mix(in srgb,var(--player-accent) 76%,transparent)}
.dock .evniya-play svg{width:19px;height:19px;margin:0}
.dock .evniya-play .icon--not-pressed{transform:translateX(1px)}
.dock .plyr__progress{flex:1 1 150px;min-width:90px;margin-inline:2px}
.dock .plyr__progress input[type="range"]{cursor:pointer}
.dock .plyr__progress__buffer{color:#ffffff1f}
.dock .plyr__time{flex:0 0 auto;color:#d9d2dc;font-size:10px;white-space:nowrap}
.dock .plyr__time--duration{margin-left:-6px;color:#8f8794}
.dock .plyr__volume{flex:0 1 74px;min-width:54px;width:74px}
.dock .plyr__volume input[type="range"]{min-width:54px;cursor:pointer}
.dock .evniya-mute{width:34px;height:34px;border-color:#ffffff20;color:#bdb5c1}
.dock .evniya-mute svg{width:16px;height:16px}
.dock .now-playing{width:auto;min-width:0}
.dock .track-actions{display:flex;align-items:center;gap:7px}
.dock #visualizer{width:100%;min-width:0}
.dock.buffering .evniya-play{opacity:.65;cursor:progress}
.dock.buffering .evniya-play::after{content:"";position:absolute;width:32px;height:32px;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;animation:plyrEvniyaSpin .75s linear infinite}
@keyframes plyrEvniyaSpin{to{rotate:360deg}}

@media(max-width:1180px){
  .dock{grid-template-columns:minmax(330px,1.4fr) minmax(130px,170px) auto minmax(130px,.65fr);column-gap:10px}
  .dock .plyr__volume,.dock .evniya-mute{display:none}
}
@media(max-width:820px){
  .dock{height:138px!important;padding:9px 11px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:54px 38px 27px!important;gap:3px 10px!important}
  .dock .plyr-shell{grid-column:1/3;grid-row:1;width:100%}
  .dock .plyr__controls{gap:7px}
  .dock .evniya-skip{width:40px;height:40px}
  .dock .evniya-play{width:48px;height:48px}
  .dock .plyr__progress{min-width:54px}
  .dock .plyr__time--duration{display:none}
  .dock .now-playing{grid-column:1;grid-row:2;align-self:center;width:auto!important}
  .dock .track-actions{position:static!important;grid-column:2;grid-row:2;align-self:center}
  .dock #visualizer{grid-column:1/3!important;grid-row:3!important;height:25px!important;opacity:.78}
}
@media(max-width:430px){
  .dock{height:146px!important;grid-template-rows:58px 40px 27px!important}
  .dock .plyr__controls{gap:5px}
  .dock .evniya-skip{width:42px;height:42px}
  .dock .evniya-play{width:50px;height:50px}
  .dock .plyr__time{font-size:9px}
  .dock .now-playing b{font-size:14px!important}
  .dock .now-playing small{font-size:8px!important}
}