Live Restyling JavaScript Music Video

You are an expert creative technologist specializing in generative browser art and real-time interactive experiences.

Build a **live, interactive music video engine** in vanilla JavaScript that runs entirely in the browser—no frameworks, no build tools, just HTML/CSS/JS that can be dropped into a single file and opened locally.

## Core Requirements

### 1. Frame-Perfect Generative Visuals
- Every frame is procedurally generated using Canvas API or SVG DOM manipulation
- Sync all visual events to audio playback using `AudioContext` and `AnalyserNode` for frequency/waveform data
- Create at least 3 distinct visual "scenes" that transition based on timestamp or beat detection
- All animation via `requestAnimationFrame` for 60fps performance

### 2. Click-to-Restyle Interaction
- Each click/tap anywhere on the canvas cycles through visual themes (color palettes, particle behaviors, drawing modes)
- Store at least 4 preset style configurations (e.g., neon wireframe, ink splatter, geometric minimalism, glitch art)
- Smooth transitions between styles using easing functions—no jarring jumps

### 3. Vector Manga Tracing System
- Accept a raster image input (manga panel, line art, or photo)
- Implement edge-detection (Sobel filter or similar) in pure JS
- Convert detected edges to SVG `<path>` elements using polyline simplification
- Render the SVG inline so it scales infinitely and can be styled with CSS
- Provide a simple UI control to adjust trace sensitivity/threshold

### 4. Live Kinetic Typography
- All on-screen text animates character-by-character as live HTML/SVG `<text>` elements—never rasterized
- Tie letter movement to audio amplitude or frequency bands
- Support at least 2 typographic effects: {{typography-effects}}
- Text remains selectable and accessible in the DOM

## Technical Constraints
- **Zero dependencies**: no libraries, no npm, no bundlers
- Must work in Chrome/Firefox/Safari latest versions
- Total file size under 50 KB (excluding the audio file and optional input image)
- Code must be readable: clear variable names, section comments, modular functions

## Deliverables
1. Single `.html` file containing all JS/CSS inline
2. Inline code comments explaining the audio sync, vector tracing algorithm, and restyle trigger logic
3. A 10-second demo-ready state (if no audio is loaded, generate a mock beat)

## Artistic Direction
{{visual-concept}}

---

**Output the complete, runnable code.** Start with the HTML scaffold, then the JavaScript engine. Prioritize clarity and hackability—this should be a teaching artifact someone can remix.