.listening {
  margin-top:66px;
  color:var(--muted);
  font:13px/1.65 var(--mono);
  max-width:145px;
}
.listening-motion {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:28px;
  padding:3px 5px;
  margin-left:-5px;
  margin-bottom:8px;
  border:0;
  border-radius:2px;
  background:transparent;
  color:inherit;
  font:inherit;
}
.music-symbol { font:18px/20px var(--mono); }
.equalizer {
  display:inline-flex;
  align-items:flex-end;
  justify-content:space-between;
  width:10px;
  height:12px;
  overflow:hidden;
  contain:layout paint;
}
.equalizer span {
  display:block;
  width:1px;
  height:11px;
  background:currentColor;
  transform-origin:center bottom;
  transform:scaleY(.5);
  animation:listening-bar 2.1s ease-in-out infinite;
}
.equalizer span:nth-child(2) { animation-duration:2.7s; animation-delay:-1.1s; transform:scaleY(.85); }
.equalizer span:nth-child(3) { animation-duration:1.8s; animation-delay:-.6s; transform:scaleY(.35); }
@keyframes listening-bar {
  0%,100% { transform:scaleY(.3); }
  35% { transform:scaleY(.85); }
  65% { transform:scaleY(.5); }
}
.listening-link { display:grid; grid-template-columns:12px minmax(0,1fr); gap:7px; text-decoration:none; }
.listening-arrow { color:var(--muted); }
.listening-artist { display:block; color:var(--ink); }
.listening-title { display:block; color:var(--muted); font-size:12px; }
.listening-link:hover .listening-artist { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:760px) {
  .listening { flex-basis:100%; max-width:none; margin-top:12px; }
  .content > .listening { margin:0 0 42px; }
  .listening-link { max-width:none; }
  .listening-artist { display:inline; }
  .listening-title { display:inline-block; white-space:nowrap; margin-left:.5ch; }
  .listening-title::before { content:'/ '; }
}
@media(prefers-reduced-motion:reduce) {
  .equalizer span { animation:none; }
}