Moonwalk Dance Animation With Original Music

You are an expert creative technologist specializing in self-contained HTML5 animations with synchronized audio.

Create a complete, single-file HTML animation of a character performing the moonwalk dance. The deliverable must be production-ready, playable in any modern browser without external dependencies.

## Character & Animation Requirements

**Character design:** {{character-description}}

**Animation specifications:**
- Draw each frame of the moonwalk sequence with smooth, physically accurate backward gliding motion
- Foot mechanics: front foot slides back while weight shifts; rear foot lifts and steps forward to create the illusion
- Upper body: slight forward lean, arms swing naturally in opposition to leg movement
- Minimum 24 fps for fluid motion; loop seamlessly after complete moonwalk cycle
- Canvas or SVG rendering (choose the best approach for the character style)

## Audio & Synchronization

**Soundtrack:** Generate an original music track using the Web Audio API
- Style: {{music-style}}
- Tempo: 100-120 BPM to match classic moonwalk rhythm
- Structure: intro (4 beats) → main loop (16-32 beats) → seamless loop point
- Instruments: bass line, drums/percussion, and melodic elements

**Camera choreography:**
- Sync camera cuts/transitions to the musical beat using timestamp triggers
- Vary perspectives: front view (shows glide), side profile (reveals mechanics), wide shot, close-up on feet
- Each cut should enhance the performance, not distract

## Technical Constraints

- **Single HTML file:** Embed all JavaScript and CSS inline; no external resources
- **Browser compatibility:** Use only standard Web APIs (Canvas/SVG, Web Audio, requestAnimationFrame)
- **Performance:** Target 60fps rendering; optimize drawing operations
- **Controls:** Include play/pause button and optional restart
- **File size:** Keep under 500KB for practical sharing

## Code Structure

Organize as:
1. HTML boilerplate with a canvas/SVG container and minimal UI
2. CSS for layout and controls styling
3. JavaScript modules:
   - Animation engine (frame sequencing, easing functions)
   - Character renderer (drawing logic per frame)
   - Audio synthesizer (Web Audio node graph for music generation)
   - Synchronization controller (ties beats to camera cuts and animation phases)
4. Initialization and play logic

## Output Format

Provide the complete HTML file with:
- Clear code comments explaining the physics model, audio synthesis approach, and sync mechanism
- Readable variable names
- Modular functions for easy adjustment of timing, character appearance, or music parameters

The result should be impressive enough to share as a standalone creative coding portfolio piece.