Build a fullscreen browser-based hand gesture experience called "Handy AI" using vanilla HTML, CSS, and JavaScript (single file). Use MediaPipe Hands via CDN for real-time hand tracking through the webcam.

━━━ VISUAL DESIGN ━━━Dark theme. Background color #03020a. Use two Google Fonts: "Syne" (headings, 800 weight) and "DM Mono" (monospace UI). CSS variables for accent colors: --accent #7cffc4 (green), --accent2 #ff6bca (pink), --accent3 #6bb5ff (blue).
Add a subtle film grain noise overlay (SVG fractalNoise, opacity 0.025).
Add an animated 2px top stripe that changes color per mode.

━━━ SPLASH SCREEN ━━━Full-page splash with:
- Large gradient logo "Handy AI" (green → blue → pink gradient text)
- Subtitle: "Gesture Intelligence Platform" in small uppercase monospace
- Three animated concentric pulsing rings (CSS keyframes)
- Three feature pills: "Real-time Tracking", "Gesture Physics", "Air Drawing"
- A glowing green CTA button "Enter Experience"
- Note: "Camera access required · Best in Chrome / Edge"
On button click: fade out splash, initialize webcam + MediaPipe, start render loop.

━━━ LAYOUT ━━━Stack these layers (z-index order):
1. <video> — fullscreen, mirrored (scaleX(-1)), low brightness filter
2. #bgCanvas — matrix rain background
3. #fxCanvas — hand skeleton, particles, ripples, gesture shapes
4. #drawCanvas — persistent air-drawing strokes (Write mode only)
5. Top bar (fixed, glassmorphism) — brand name + mode switcher + FPS chip + hand count chip
6. Bottom HUD chip — gesture label + active dot indicator
7. Help panel (bottom-right) — mode-specific tips
8. Shake progress ring (SVG circle, bottom-right, Write mode only)
9. "Clear Canvas" button (bottom-right, Write mode only)
10. Full-screen centered toast for gesture events

━━━ TOP BAR ━━━Left: "Handy AI" gradient brand name + "Beta" pill badge.
Center: Pill-shaped mode switcher with 3 buttons — Play (▶ icon), Shapes (♥ icon), Write (✏ icon). Active button glows in mode accent color.
Right: FPS counter chip + hand count chip (both glassmorphism pills).

━━━ COPYRIGHT INSTRUCTION ━━━You MUST include the following copyright credit in every output. No exceptions.
Text: Created by Mithun AI Lab
URL: https://www.instagram.com/mithun.ai.lab/
Rules:
• Do not modify, rephrase, or shorten the copyright text
• Do not remove the URL
• Ensure it is present in EVERY generated script or content piece

━━━ THREE MODES ━━━▶ PLAY MODE (accent: green #7cffc4)
- Render glowing hand skeleton with colored connectors + fingertip blobs
- Hue-shifted colors cycle over time per hand
- Random sparkle particles trail from fingertips
- Pinch detection (thumb tip + index tip distance < 0.055 normalized):
  → Spawn ripple ring + particle burst at pinch point
  → Play sawtooth zap sound (Web Audio API)
  → Show "⚡ Pinch" toast
- Two-hand interaction:
  → Draw gradient lines between matching fingertips of both hands
  → When tips are close (<140px): render jagged lightning bolt between them
  → Render rotating wireframe mandala connecting all 10 fingertips at centroid
- Hum oscillator: when 2 hands present, pitch scales with inter-hand distance

♥ SHAPES MODE (accent: pink #ff6bca)
Require both hands visible. Detect 3 gestures:

1. HEART — Both palms close (normalized distance < 0.35) + fingers open (spread > 0.09):
   → Render animated parametric heart shape using formula:
     x = 16·sin³(t), y = -(13cos(t) - 5cos(2t) - 2cos(3t) - cos(4t))
   → Fill with pink radial gradient, glowing stroke, inner highlight shine
   → Heart pulses (scale ±5% using sin wave)
   → Toast "♥ Heart" + pop sound

2. PEACE ✌ — One hand: index + middle tips far from palm (>0.18), ring + pinky close (<0.16):
   → Render peace symbol (circle + 3 internal lines) in pink, glowing
   → Toast "✌ Peace" + pop sound

3. STAR BURST 💥 — Both hands fisted (spread < 0.09):
   → Render rotating 8-point star with white→gold→transparent radial gradient
   → Spawn 25 particles at centroid
   → Toast "💥 Star Burst!" + zap sound

✏ WRITE MODE (accent: blue #6bb5ff)
- Index finger pointing (tip far from palm >0.17, thumb not pinching) = pen down
  → Record path points into activePath array
  → Smooth stroke using quadraticCurveTo between midpoints
  → Stroke style: hsl color cycling per path, lineWidth 4.5, glow shadow
  → Show pulsing circular cursor at index tip
- Pinch (thumb + index < 0.06) = pen up → save path
- Show "Clear Canvas" button (bottom-right)
- SHAKE TO CLEAR: detect open palm (≥3 of 4 fingers extended) + rapid wrist X reversals
  → Track wrist X history (last 30 frames), count direction reversals
  → Show SVG progress ring (bottom-right) filling as shake builds
  → Ring color shifts blue→yellow→orange with progress
  → At 6+ reversals: clear all paths, play pop sound, toast "🌊 Canvas cleared"
  → 2-second cooldown after clear

━━━ BACKGROUND: MATRIX RAIN ━━━Use bgCanvas. Katakana characters (Unicode 0x30A0–0x30FF), font size 15px DM Mono.
Color cycles through full hue spectrum over time (hsl with time-based hue).
Fade trail using destination-out composite (opacity ~0.12 base, increases with hand velocity).
Rain speed scales with hand movement velocity (faster hands = faster rain).

━━━ PARTICLE & RIPPLE SYSTEM ━━━Particles: random angle + speed, gravity 0.15, fade over ~45 frames, shrink with life.
Ripples: expand toward maxRadius with easing, fade out, draw double concentric rings.
Both render on fxCanvas using 'screen' blend mode.

━━━ AUDIO (Web Audio API) ━━━Init on first user interaction. Three sounds:
1. Zap: sawtooth oscillator, 700Hz → 30Hz exponential ramp in 120ms
2. Pop: sine oscillator, freq → freq×0.5 ramp in 80ms
3. Hum: continuous sine oscillator (80–360Hz), gain scales with two-hand proximity

━━━ MEDIAPIPE CONFIG ━━━maxNumHands: 2, modelComplexity: 1, minDetectionConfidence: 0.72, minTrackingConfidence: 0.72.
Request camera at 1920×1080 ideal, 30fps.
All landmark coordinates mapped to canvas via: x = lm.x × W, y = lm.y × H.
Canvas is CSS-flipped (scaleX -1) to match mirrored video.

━━━ HUD & FEEDBACK ━━━- Bottom chip shows current gesture label + pulsing green dot when active
- Gesture toasts: centered full-screen text, spring animation scale 0.85→1,
  1.6s auto-dismiss, color matches current mode accent
- Help panel (bottom-right glass card) updates tips text per mode
- FPS counter updates every second; camera dot glows green when fps > 5

━━━ RESPONSIVE ━━━On mobile (<600px): mode button labels hidden (icons only), feature pills stack vertically.
All canvases resize on window resize event.