Docs accuracy pass, guides, and a playable Web Audio synth demo

Docs/playground accuracy (from a full docs-vs-source audit):
- Playground: drag-feel select covers pickup/relative rotary modes, is
  disabled for faders, and generated code no longer emits props the
  target component does not accept
- API/README claims corrected: Shift-fine wheel scope, wheelStep and
  decimals defaults, trackInset row, data-part and ref-forwarding
  scope, VintageKnob readout exception, Meter peakHold tag, stale
  component lists, aria-valuetext wording, also-exported list

API consistency fixes surfaced by the audit and the tutorial:
- Keyboard gestures now fire onChangeStart (bracket parity with drag/
  wheel - fixes gesture-scoped undo patterns)
- name (hidden form input) added to Fader, LEDFader, ImageKnob
- PushButton gets a themed keyboard-only focus ring + data-focus-visible

New docs content:
- Getting Started: 7-step guide with live examples and a gotchas list
- Advanced guide: 8-step channel-strip tutorial ending in a live,
  themed, gesture-undoable strip with meter (plus headless demo)
- Synth section: playable Web Audio synth - osc/filter/env/LFO/master
  all dreamknob controls, momentary-pad keyboard, analyser-driven Meter

packages/dreamknob/src/skins/PushButton.tsx

@@ -51,6 +51,7 @@ export const PushButton = React.forwardRef<HTMLButtonElement, PushButtonProps>(
     const accent = color ?? theme.accent ?? '#4cc2ff';
     const isControlled = pressed !== undefined;
     const [internal, setInternal] = React.useState(defaultPressed);
+    const [focusVisible, setFocusVisible] = React.useState(false);
     const on = isControlled ? (pressed as boolean) : internal;
 
     const set = (next: boolean) => {
@@ -85,7 +86,16 @@ export const PushButton = React.forwardRef<HTMLButtonElement, PushButtonProps>(
         aria-pressed={on}
         aria-label={aria['aria-label']}
         data-pressed={on ? '' : undefined}
+        data-focus-visible={focusVisible ? '' : undefined}
         className={className}
+        onFocus={e => {
+          try {
+            setFocusVisible(e.currentTarget.matches(':focus-visible'));
+          } catch {
+            setFocusVisible(true);
+          }
+        }}
+        onBlur={() => setFocusVisible(false)}
         {...momentaryProps}
         style={{
           position: 'relative',
@@ -103,9 +113,12 @@ export const PushButton = React.forwardRef<HTMLButtonElement, PushButtonProps>(
           background: on
             ? 'linear-gradient(180deg, #17181d, #232429)'
             : 'linear-gradient(180deg, #35363d, #1d1e24)',
-          boxShadow: on
-            ? 'inset 0 2px 5px rgba(0,0,0,0.65)'
-            : 'inset 0 1px 0 rgba(255,255,255,0.09), 0 2px 4px rgba(0,0,0,0.45)',
+          outline: 'none',
+          boxShadow: `${
+            on
+              ? 'inset 0 2px 5px rgba(0,0,0,0.65)'
+              : 'inset 0 1px 0 rgba(255,255,255,0.09), 0 2px 4px rgba(0,0,0,0.45)'
+          }${focusVisible ? `, 0 0 0 2px ${theme.focusRing}` : ''}`,
           color: on ? theme.text : theme.label,
           fontFamily: theme.fontUI,
           fontSize: Math.max(10, size * 0.28),