Interactive Webcam Music Synthesizer

Create a single-file HTML application titled "The Future Music + HD Mirror Air Mode". The app must use MediaPipe Hands (loaded via CDN) for hand tracking and the Web Audio API for sound generation.

1. Visual Style (CSS):
- Use a dark, futuristic cyberpunk theme. Background: #121216, Panels: #1e1e24.
- Accents: Neon Purple (#bd00ff) and Cyan (#00d4ff).
- Font: Segoe UI.
- Include a top bar with a title, a "Start Air Mode" button (red/pink), a BPM slider (range 60-200), a Play/Stop loop button, and a Reset button.

2. Air Mode (Webcam & MediaPipe):
- When "Start Air Mode" is clicked, initialize the camera at 1280x720 (HD) resolution.
- The video canvas must be mirrored using CSS (transform: scaleX(-1)).
- Overlay 5 "Hotspots" (virtual rectangular buttons) on the video feed.
- Crucial Logic: Track the Index Finger Tip (landmark 8). Because the canvas is visually mirrored via CSS, your collision detection logic must calculate the X-coordinate as 1 - finger.x to match the visual hotspots.
- Include a configuration bar above the video to dynamically change the Note (frequency) and Instrument (Lead/Bass) for each of the 5 hotspots using dropdowns.
- When a finger touches a hotspot, it should visually glow and play a synth note.

3. Audio Engine & Sequencer:
- Implement a Master FX panel with sliders for Reverb Mix, Delay Time, and Delay Feedback. Use a ConvolverNode for reverb.
- Create a 16-step sequencer with 5 tracks:
* Drums: Kick, Snare (noise buffer), Hi-Hat. (Toggle steps on/off).
* Synths: Deep Bass (Sawtooth), Future Lead (Square). (Steps should be dropdowns to select pitch/note).
- The sequencer must loop based on the BPM.

4. Visualizer:
- Add a canvas at the bottom acting as a frequency bar visualizer using AnalyserNode.

5. Implementation Details:
- Ensure all CSS and JS are embedded in the single file.
- Handle AudioContext resumption on user interaction.
- Load MediaPipe camera_utils, control_utils, drawing_utils, and hands from jsdelivr.