Synth v2: modular pro layout, HOLD latching pads, fuller voice engine

- Modular hardware-style panel: System / Oscillator / Filter / Envelope
  / LFO / Drive / Echo / Output / Keyboard sections with labeled frames
- HOLD switch: pads become latching toggles (switching pads retunes the
  held note, unlatching or disabling HOLD releases it)
- Fuller Web Audio voice: waveshaper drive, full ADSR, feedback delay
  (time/feedback/mix), LFO target switch (cutoff or pitch via detune),
  octave/detune/glide with live retuning of held notes
- More of the library in service: MetalKnob (drive, with value bubble),
  VintageKnob (echo time), horizontal LEDFader (echo mix), XYPad
  two-way-linked with the cutoff/res knobs (exponential x-axis mapping),
  SegmentDisplay live frequency readout, 4 preset buttons that glide
  every knob via animateChanges
- Disambiguated synth aria-labels from gallery demos; octave readout
  fixed via decimals/format
- SteppedKnob now honors the format prop for numeric readouts

apps/docs/src/styles.css

@@ -309,6 +309,57 @@ h2.section-title {
   text-transform: uppercase;
 }
 
+/* ---- synth panel ---- */
+.synth-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+.synth-row {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+.synth-module {
+  border: 1px solid var(--line-strong);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.02);
+  padding: 14px 18px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.synth-module > .module-title {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  align-self: stretch;
+  text-align: center;
+  border-bottom: 1px solid var(--line);
+  padding-bottom: 7px;
+}
+.synth-module .module-body {
+  display: flex;
+  gap: 18px;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  flex: 1;
+}
+.synth-pads {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
 /* ---- playground ---- */
 .playground {
   display: grid;