/* Аудиоплеер с визуализацией спектра */
.player {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.player__btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--grad);
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
}

.player__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 12px solid var(--on-grad);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transform: translateX(2px);
}

.is-playing .player__btn::before {
  border: 0;
  width: 12px;
  height: 12px;
  background: var(--on-grad);
  transform: none;
  border-radius: 2px;
}

.player__bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  flex: 1;
}

.player__bars i {
  display: block;
  flex: 1;
  height: 100%;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleY(.04);
  transform-origin: center;
  transition: transform .06s linear;
}

.player__time {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  font-size: .875rem;
}

@media (prefers-reduced-motion: reduce) {
  .player__bars i {
    transition: none;
  }
}