<details class="acc-eq" name="acc-eq">
  <summary>
    <span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Bass
  </summary>
  <p>Low-end response. Felt more than heard. Anchors the mix.</p>
</details>
<details class="acc-eq" name="acc-eq" open>
  <summary>
    <span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Mids
  </summary>
  <p>The conversation register. Where vocals and lead instruments live.</p>
</details>
<details class="acc-eq" name="acc-eq">
  <summary>
    <span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Treble
  </summary>
  <p>Air and detail. Cymbals, breath, the sparkle of acoustic plucks.</p>
</details>

.acc-eq {
  background: #15151d; border: 1px solid rgba(240,238,255,0.06);
  border-radius: 8px; margin-bottom: 6px;
}
.acc-eq summary {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none; padding: 12px 16px;
  font: 600 13px/1 system-ui; color: rgba(240,238,255,0.72);
}
.acc-eq summary::-webkit-details-marker { display: none; }
.acc-eq__bars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 14px; width: 22px;
}
.acc-eq__bars i {
  display: block; width: 3px; background: rgba(212,154,92,0.4);
  border-radius: 1px; height: 30%; transition: height .3s;
}
.acc-eq[open] > summary { color: #f0eeff; }
.acc-eq[open] .acc-eq__bars i {
  background: #d49a5c;
  animation: acc-eq-pulse 1.1s ease-in-out infinite alternate;
}
.acc-eq[open] .acc-eq__bars i:nth-child(1) { animation-delay: .0s; }
.acc-eq[open] .acc-eq__bars i:nth-child(2) { animation-delay: .15s; }
.acc-eq[open] .acc-eq__bars i:nth-child(3) { animation-delay: .3s; }
.acc-eq[open] .acc-eq__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes acc-eq-pulse {
  from { height: 25%; } to { height: 100%; }
}
.acc-eq p {
  margin: 0; padding: 0 16px 14px 50px;
  font: 12px/1.6 system-ui; color: rgba(240,238,255,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .acc-eq[open] .acc-eq__bars i { animation: none; height: 70%; }
}