Night Painting Generative Short

You are an expert creative technologist specializing in real-time generative art with vanilla JavaScript and WebGL. Build a complete, self-contained HTML file for a 50-second generative art short titled **"Painting the Night"** that synthesizes all visuals and audio procedurally at runtime—zero external assets, images, or libraries beyond standard Web APIs.

## Technical Requirements

- **Single HTML file**: Embed all JavaScript, shaders, and logic inline
- **Pure vanilla JS + WebGL**: No frameworks, no image files, no external audio—everything generated in-browser
- **Duration**: Exactly 50 seconds, then gracefully loop or fade to black
- **Performance**: Maintain ≥30 fps on modern desktop browsers (Chrome/Firefox/Safari)

## Visual Elements to Generate Procedurally

Orchestrate these layers into a cohesive narrative arc across the 50-second timeline:

1. **Paper grain texture**: Subtle noise resembling watercolor paper, visible as the base layer
2. **Graphite hatching**: Cross-hatched pencil strokes that sketch the composition—vary density, angle, and opacity to suggest depth
3. **Paint reveal**: Gradual watercolor washes that bloom and bleed over the graphite, transitioning from cool twilight blues to deep indigos
4. **Stars**: Hundreds of pinprick lights emerging as night deepens—vary brightness, twinkle with Perlin noise
5. **Constellation**: Connect 6–8 stars into a recognizable shape (e.g., Ursa Minor, Orion's Belt) with delicate lines that fade in mid-sequence
6. **Moon glow**: Soft radial gradient suggesting moonlight—subtle halo, perhaps partially obscured by translucent brush strokes

## Audio Synthesis

Generate a **felt-piano soundtrack** using the Web Audio API:

- Warm, mellow piano tones with soft attack (felt hammers)
- Simple melodic motif: 4–8 note progression in a minor key, slow tempo (~60–80 BPM)
- Layer subtle reverb and gentle decay
- Sync audio phrasing to visual transitions (e.g., constellation reveal coincides with melodic peak)

## Narrative Flow

Structure the 50 seconds into roughly three acts:

- **0–15s**: Paper grain visible; graphite hatching sketches horizon, silhouettes, sky structure
- **15–35s**: Paint washes flood in; stars begin to appear; music introduces main theme
- **35–50s**: Full night—constellation connects, moon glows softly, music resolves; fade to black or loop

## Code Structure Guidance

- Use `<canvas>` for WebGL rendering; initialize shaders for each visual layer
- Implement fragment shaders for grain (FBM noise), hatching (procedural line patterns), paint (alpha-blended gradients)
- Use `requestAnimationFrame` with a master clock to drive all animations
- Web Audio API: `OscillatorNode` or `PeriodicWave` for piano timbre; `GainNode` for envelope shaping; `ConvolverNode` for reverb (generate impulse response procedurally)
- Encapsulate each effect (grain, stars, constellation, audio) in a modular function for clarity

## Aesthetic Notes

- **Mood**: Contemplative, meditative, quiet wonder
- **Color palette**: {{color-palette}}
- **Style**: Hand-drawn illustration brought to life—imperfect, organic, human

Deliver **complete, commented, production-ready code** that runs immediately when opened in a browser. Prioritize visual poetry and smooth transitions over photorealism.