.music-page{
  padding-block:3rem;
}

.music-grid{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:2rem;
  align-items:start;
}

@media (max-width:800px){
  .music-grid{
    grid-template-columns:1fr;
  }
}

.music-profile{
  padding:1.75rem 1.5rem;
  text-align:center;
}

.music-profile-avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 1rem;
  border:3px solid var(--color-red);
  transition:transform .5s var(--ease);
}

.music-profile-avatar:hover{
  transform:scale(1.03);
}

.music-profile-name{
  font-family:var(--font-orbitron);
  font-size:1.1rem;
  color:var(--color-text);
  margin-bottom:.35rem;
}

.music-profile-count{
  font-size:.9rem;
  color:var(--color-text-dim);
  margin-bottom:1rem;
}

.music-profile-link{
  display:inline-block;
  font-size:.85rem;
  color:var(--color-red-bright);
  transition:transform .25s var(--ease);
}

.music-profile-link:hover{
  transform:translateX(3px);
}

.music-profile-error{
  font-size:.9rem;
  color:var(--color-text-dim);
}

.music-recent{
  padding:2rem;
}

@media (max-width:520px){
  .music-recent{
    padding:1.25rem;
  }
}

.music-recent h1{
  font-family:var(--font-orbitron);
  font-size:1.4rem;
  margin-bottom:1.5rem;
  color:var(--color-text);
}

.music-track-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.music-track-row{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.6rem;
  border:1px solid transparent;
  border-radius:10px;
  transition:background .25s ease, transform .3s var(--ease), border-color .25s ease;
  animation:exoworoRowIn .6s var(--ease) both;
  animation-delay:calc(var(--i, 0) * 45ms + .2s);
}

@keyframes exoworoRowIn{
  from{ opacity:0; transform:translateX(-14px); }
  to{ opacity:1; transform:none; }
}

.music-track-row:hover{
  background:#1d1d1d;
  transform:translateX(4px);
}

.music-track-row.is-playing{
  border-color:var(--color-red);
  background:rgba(200,20,20,.08);
}

.music-track-cover{
  width:46px;
  height:46px;
  border-radius:7px;
  object-fit:cover;
  flex-shrink:0;
}

.music-track-cover-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#202020;
  color:var(--color-text-dim);
}

.music-track-info{
  flex:1;
  min-width:0;
}

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

.music-track-artist{
  font-size:.85rem;
  color:var(--color-text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.music-track-ago{
  font-size:.75rem;
  color:var(--color-text-dim);
  flex-shrink:0;
}

.music-track-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.72rem;
  color:var(--color-red-bright);
  border:1px solid var(--color-red);
  padding:.2rem .55rem;
  border-radius:6px;
  flex-shrink:0;
}

.eq{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  height:12px;
}

.eq i{
  display:block;
  width:3px;
  height:100%;
  border-radius:1px;
  background:var(--color-red-bright);
  transform-origin:bottom;
  animation:exoworoEq .8s ease-in-out infinite;
}

.eq i:nth-child(2){ animation-delay:-.25s; }
.eq i:nth-child(3){ animation-delay:-.5s; }

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