.led-meter {
  width: 92px;
  flex: 0 0 92px;
  padding: 8px 7px;
  border: 1px solid #332a1b;
  border-radius: 7px;
  background: #050505;
  box-shadow: inset 0 0 10px #000;
}

.led-meter div {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  margin: 3px 0;
}

.led-meter i {
  width: 6px;
  height: 7px;
  border-radius: 2px;
  background: #12391e;
  opacity: .25;
}

.led-meter i:nth-child(6),
.led-meter i:nth-child(7) {
  background: #a87c0c;
}

.led-meter i:nth-child(8),
.led-meter i:nth-child(9) {
  background: #8b1710;
}

.led-meter.playing i {
  animation: led-modulation .85s steps(2, end) infinite;
}

.led-meter.playing i:nth-child(2n) { animation-delay: -.12s; }
.led-meter.playing i:nth-child(3n) { animation-delay: -.31s; }
.led-meter.playing i:nth-child(4n) { animation-delay: -.48s; }
.led-meter.playing i:nth-child(5n) { animation-delay: -.65s; }

@keyframes led-modulation {
  0%, 25% { opacity: .28; box-shadow: none; }
  45%, 80% { opacity: 1; box-shadow: 0 0 6px currentColor; }
  100% { opacity: .45; }
}

@media (max-width: 520px) {
  .led-meter {
    width: 72px;
    flex-basis: 72px;
    padding: 6px 5px;
  }

  .led-meter div {
    gap: 2px;
  }

  .led-meter i {
    width: 5px;
  }
}

@media (max-width: 390px) {
  .led-meter {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .led-meter.playing i {
    animation: none;
    opacity: .8;
  }
}

/* Compensa a diferença entre os LEDs à esquerda e o volume à direita,
   mantendo o botão principal no centro visual exato do iframe. */
@media (min-width: 521px) {
  .main-control {
    transform: translateX(18px);
  }
}