.metronome-box .visual{width:240px;height:300px;margin:4px auto 20px;filter:none}
.metronome-box .body-shape{left:30px;bottom:12px;width:180px;height:250px;border:0;border-radius:0;clip-path:path('M 73 0 Q 90 -2 107 0 Q 111 1 113 9 L 178 236 Q 182 248 170 250 L 10 250 Q -2 248 2 236 L 67 9 Q 69 1 73 0 Z');background:linear-gradient(90deg,#4a291a,#965b37 18%,#b1794c 38%,#805031 75%,#422719);box-shadow:inset 0 0 0 5px #57341d,inset 12px 0 18px #f3ca9550}
.metronome-box .body-shape::before{content:'';position:absolute;inset:24px 27px 18px;background:linear-gradient(90deg,#2c1a13,#493023 45%,#20130f);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);box-shadow:inset 0 0 12px #0008}
.metronome-box .tempo-scale{position:absolute;left:105px;bottom:55px;width:30px;height:170px;border:1px solid #ac8e60;border-radius:5px;background:linear-gradient(90deg,#ddc7a0,#fff4da 40%,#e5d2ad);box-shadow:inset 0 0 7px #7c562428;z-index:2;pointer-events:none}
.metronome-box .tempo-scale::before{content:'';position:absolute;inset:10px 5px;background:repeating-linear-gradient(to bottom,#5f4b33 0 1px,transparent 1px 10px);opacity:.75}
.metronome-box .arm{left:117px;bottom:53px;width:6px;height:190px;background:linear-gradient(90deg,#68523a,#fff3ca 45%,#ad9669 75%,#544635);border-radius:4px;box-shadow:1px 1px 2px #0005;transition:transform .12s ease-out;will-change:transform;z-index:3}
.metronome-box .weight{left:-13px;top:61px;width:32px;height:24px;border:1px solid #725124;border-radius:5px;background:linear-gradient(135deg,#e9d09a,#aa803e 38%,#f8e0aa 51%,#ad7e32 90%);box-shadow:inset 0 1px 2px #fff9,0 3px 4px #0005}
.metronome-box .weight::after{content:'';position:absolute;inset:5px 4px;border-top:1px solid #fff5;border-bottom:1px solid #68471966}
.metronome-box .pivot{left:109px;bottom:46px;width:22px;height:22px;border:2px solid #a78042;background:radial-gradient(circle at 35% 30%,#fff1c2,#c8a05b 50%,#775527);box-shadow:0 2px 4px #0004;z-index:4}
.metronome-box .base{left:24px;bottom:4px;width:192px;height:27px;border:1px solid #3e2517;border-radius:7px;background:linear-gradient(#a46e43,#684329 45%,#3a2418);box-shadow:inset 0 2px 2px #e6b98580,0 4px 1px #21160e}
.metronome-box .base::before,.metronome-box .base::after{content:'';position:absolute;bottom:-5px;width:25px;height:7px;border-radius:0 0 4px 4px;background:#30251c;z-index:-1}
.metronome-box .base::before{left:14px}.metronome-box .base::after{right:14px}

/* A restrained mechanical illustration, rather than a photorealistic render. */
.metronome-box .body-shape{background:#82553b;box-shadow:inset 7px 0 #a37352,inset -7px 0 #603e2a}
.metronome-box .body-shape::before{background:#352a24;box-shadow:none}
.metronome-box .tempo-scale{background:#f4ead5;border-color:#d4c4a5;box-shadow:none}
.metronome-box .arm{background:#cbd5e1;border:1px solid #64748b;box-shadow:none;width:5px}
.metronome-box .weight{background:#475569;border:1px solid #334155;box-shadow:inset 0 2px #94a3b8;border-radius:4px}
.metronome-box .weight::after{border-color:#94a3b8}
.metronome-box .pivot{background:#cbd5e1;border:2px solid #64748b;box-shadow:none}
.metronome-box .base{background:#603e2a;border:1px solid #4a3021;box-shadow:inset 0 3px #9e7252}
.metronome-volume{display:flex;align-items:center;gap:14px;max-width:360px;margin:20px auto 26px;padding:12px 16px;border:1px solid var(--theme-border,#dbe4f0);border-radius:12px;background:var(--theme-surface-2,#f8fbff);color:var(--theme-text,#193e7b)}
.metronome-volume label{font-size:14px;font-weight:600}.metronome-volume input[type=range]{flex:1;min-width:0;width:auto;margin:0;accent-color:var(--theme-primary,#2563eb)}.metronome-volume output{min-width:38px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}

.metronome-box .dot{background:#dbeafe}.metronome-box .dot.active{background:#1e40af}.metronome-box .dot.accent{background:#93c5fd;box-shadow:0 0 0 3px #dbeafe}
.metronome-box .option{background:var(--theme-surface-2,#eff6ff);color:var(--theme-text,#1e3a8a);border:1px solid var(--theme-border,#bfdbfe)}.metronome-box .option.active{background:#2563eb;border-color:#2563eb;color:#fff}.metronome-box .option:hover{border-color:#60a5fa}