.music-player{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:500;
  font-family:var(--font-body);
}

.music-player-toggle{
  position:relative;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--color-red);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:transform .4s var(--ease);
  animation:exoworoPlayerIn .7s var(--ease) 1s both;
}

.music-player-toggle:hover{
  transform:scale(1.05);
}

.music-player-toggle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--color-red);
  opacity:0;
  pointer-events:none;
}

.music-player.is-playing .music-player-toggle::before{
  animation:exoworoPlayerPulse 2.6s var(--ease) infinite;
}

@keyframes exoworoPlayerIn{
  from{ opacity:0; transform:scale(.4) translateY(20px); }
  to{ opacity:1; transform:none; }
}

@keyframes exoworoPlayerPulse{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(1.45); opacity:0; }
}

.music-player-toggle .music-player-bars{
  display:none;
  align-items:flex-end;
  gap:3px;
  height:20px;
}

.music-player.is-playing .music-player-toggle .icon-note{
  display:none;
}

.music-player.is-playing .music-player-toggle .music-player-bars{
  display:flex;
}

.music-player-bars i{
  display:block;
  width:4px;
  height:100%;
  border-radius:2px;
  background:#fff;
  transform-origin:bottom;
  animation:exoworoBars .9s ease-in-out infinite;
}

.music-player-bars i:nth-child(2){ animation-delay:-.3s; }
.music-player-bars i:nth-child(3){ animation-delay:-.6s; }
.music-player-bars i:nth-child(4){ animation-delay:-.15s; }

@keyframes exoworoBars{
  0%,100%{ transform:scaleY(.25); }
  50%{ transform:scaleY(1); }
}

.music-player-panel{
  position:absolute;
  right:0;
  bottom:68px;
  width:min(280px, calc(100vw - 2.5rem));
  background:rgba(20,20,20,.94);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.97);
  transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .25s ease, transform .35s var(--ease), visibility 0s linear .35s;
}

.music-player-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity .25s ease, transform .35s var(--ease), visibility 0s;
}

.music-player-cover{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:radial-gradient(circle at 30% 20%, #2a0a0a, #000);
  margin-bottom:.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.18);
}

.music-player-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.music-player.is-playing .music-player-cover img{
  animation:exoworoCoverBreath 9s ease-in-out infinite;
}

@keyframes exoworoCoverBreath{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.03); }
}

.music-player-title{
  font-size:1rem;
  font-weight:600;
  color:var(--color-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.music-player-meta{
  font-size:.8rem;
  color:var(--color-text-dim);
  margin-bottom:.8rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.music-player-seek{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.7rem;
  color:var(--color-text-dim);
  font-variant-numeric:tabular-nums;
}

.music-player-seek input{
  flex:1;
  min-width:0;
}

.music-player input[type="range"]{
  --p:0%;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  border-radius:4px;
  background:linear-gradient(to right, var(--color-red) var(--p), #2e2e2e var(--p));
  cursor:pointer;
  outline-offset:6px;
}

.music-player input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px rgba(200,20,20,.45);
  transition:transform .2s ease;
}

.music-player input[type="range"]::-moz-range-thumb{
  width:12px;
  height:12px;
  border:none;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px rgba(200,20,20,.45);
}

.music-player input[type="range"]:hover::-webkit-slider-thumb{
  transform:scale(1.25);
}

.music-player-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  margin:.7rem 0;
}

.music-player-controls button{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-text);
  transition:transform .2s var(--ease), color .2s ease;
}

.music-player-controls button:hover{
  color:var(--color-red-bright);
  transform:scale(1.12);
}

.music-player-controls .music-player-play{
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--color-red);
  color:#fff;
}

.music-player-controls .music-player-play:hover{
  color:#fff;
  background:var(--color-red-bright);
}

.music-player-play .icon-pause{ display:none; }
.music-player.is-playing .music-player-play .icon-play{ display:none; }
.music-player.is-playing .music-player-play .icon-pause{ display:block; }

.music-player-volume{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.6rem;
}

.music-player-volume input{
  flex:1;
  min-width:0;
}

.music-player-volume button{
  display:flex;
  color:var(--color-text-dim);
  transition:color .2s ease;
}

.music-player-volume button:hover{
  color:var(--color-text);
}

.music-player-volume .icon-muted{ display:none; }
.music-player.is-muted .music-player-volume .icon-vol{ display:none; }
.music-player.is-muted .music-player-volume .icon-muted{ display:block; }

.music-player-status{
  min-height:1.1em;
  font-size:.72rem;
  color:var(--color-red-bright);
  margin-bottom:.4rem;
}

.music-player-status:empty{
  display:none;
}

.music-player-list{
  max-height:150px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding-top:.5rem;
  border-top:1px solid var(--color-border);
}

.music-player-track{
  display:flex;
  flex-direction:column;
  text-align:left;
  padding:.4rem .55rem;
  border-radius:7px;
  border-left:2px solid transparent;
  transition:background .2s ease, border-color .2s ease;
}

.music-player-track-name{
  font-size:.82rem;
  color:var(--color-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.music-player-track-artist{
  font-size:.7rem;
  color:var(--color-text-dim);
}

.music-player-track:hover{
  background:#222;
}

.music-player-track.is-active{
  background:rgba(200,20,20,.12);
  border-left-color:var(--color-red);
}