Retro Analog VU Meter Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="vu-card-575"><div class="label">LEVEL METERS</div><div class="dials"><div class="dial"><div class="needle"></div></div><div class="dial"><div class="needle n2"></div></div></div><div class="db-labels"><span>-20</span><span>0</span><span>+3</span></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.vu-card-575 { width: 170px; background: #27272a; border-radius: 12px; padding: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.4); border: 1px solid #3f3f46; font-family: monospace; margin: auto; }
.vu-card-575 .label { font-size: 8px; font-weight: 800; color: #a1a1aa; text-align: center; margin-bottom: 8px; letter-spacing: 1px; }
.vu-card-575 .dials { display: flex; gap: 8px; justify-content: center; }
.vu-card-575 .dial { width: 65px; height: 35px; background: #fef08a; border-radius: 35px 35px 0 0; border: 1px solid #000; position: relative; overflow: hidden; }
.vu-card-575 .needle { position: absolute; bottom: 0; left: 50%; width: 1.5px; height: 28px; background: #ef4444; transform-origin: bottom center; transform: rotate(-15deg); animation: twitch-575 2s infinite ease-in-out; }
.vu-card-575 .needle.n2 { transform: rotate(10deg); animation-delay: 0.3s; }
.vu-card-575 .db-labels { display: flex; justify-content: space-between; font-size: 7px; color: #71717a; margin-top: 6px; padding: 0 10px; }
@keyframes twitch-575 { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(20deg); } }