Gemini 4 Argon Review: I Tested 5 Apps

Build "Slipstream" — a high-speed anti-gravity racing game in the spirit of classic futuristic
racers. Hovercraft scream around twisting neon tracks that loop, bank, corkscrew, and run
upside down. ONE self-contained slipstream.html. All geometry, textures, and audio procedural.
Modern three.js via the importmap above (three@0.170.0, SRGBColorSpace, ACESFilmicToneMapping,
no deprecated APIs). Addons allowed: EffectComposer, RenderPass, UnrealBloomPass, OutputPass,
SMAAPass.

═══════════ THE HOVER PHYSICS (get this right before anything else) ═══════════
  Fixed timestep (240Hz) decoupled from render, interpolated for display.
  - The craft floats on FOUR hover thrusters that raycast toward the track surface. Each applies
    a spring-damper force to hold a target hover height. This is what gives the craft its
    floaty, weighty feel — tilts on corners, bobs over seams, dips on landings.
  - GRAVITY IS RELATIVE TO THE TRACK, not the world. Gravity points along the negative track
    normal under the craft, so it sticks to loops, wall-rides, and inverted sections. When the
    craft leaves the surface (a jump gap), switch to world gravity until it re-acquires.
    Getting this transition right is the single hardest part of the build.
  - The craft continuously re-orients so its "up" slerps toward the track normal.
  - Thrust, drag, and a lateral grip that lets the craft slide wide in fast corners
  - AIRBRAKES (left and right, Q/E): one-sided drag that pivots the craft hard into a corner.
    Mastering airbrakes is the skill ceiling of the genre — make them feel essential.
  - SLIPSTREAM DRAFTING: sitting in the wake cone behind an opponent reduces drag and fills a
    boost meter. Visualize the wake as a faint distortion ribbon behind every craft.
  - Boost pads on the track; a boost meter spent with Shift
  - ENERGY / SHIELD: wall scrapes and collisions drain it; a pit lane each lap recharges it as
    you fly through (slower than the racing line — a real strategic trade-off). Zero energy =
    the craft explodes and respawns with a time penalty.
  - Collisions with walls deflect along the wall rather than stopping dead; craft-to-craft
    contact bumps both and costs energy.

═══════════ THE TRACKS ═══════════
  Build every track from a 3D spline with a per-point ROLL (banking) and width, extruding the
  road surface along parallel-transported frames so it can twist through a full 360° without
  flipping. From the same spline derive: the AI racing line, checkpoints, the minimap path,
  boost-pad positions, and the pit lane.
  4 tracks, each visually distinct:
    1. NEON SPRAWL — night city canyon between skyscrapers, emissive signage, a tunnel
    2. DUST LINE — desert canyon at dusk, a long jump gap, a banked hairpin
    3. HALO — an orbital ring station in space, a full loop and an inverted straight, Earth below
    4. ICEFALL — glacial descent, a corkscrew, translucent ice walls with subsurface glow
  Track surface: glowing edge lines, chevrons on corners, a scrolling energy texture on boost
  pads, and trackside props instanced for performance.

═══════════ THE CRAFT ═══════════
  6 teams, each a distinct procedurally built craft (fuselage, nacelles, fins, glowing engine
  ports) with different stats: top speed, acceleration, handling, shield. Team liveries with
  emissive accents. Engine trails as ribbon geometry that streak behind at speed.

═══════════ AI OPPONENTS (7 rivals) ═══════════
  Follow the racing line with per-driver skill, brake (airbrake) based on upcoming curvature,
  draft each other and the player, overtake by offsetting laterally, take the pit lane when
  energy is low, and rubber-band mildly so races stay close. Difficulty: Novice / Pro / Elite.

═══════════ RACE STRUCTURE ═══════════
  3-lap races with countdown, position tracking (lap + spline progress), lap and sector times
  with deltas, wrong-way detection, respawn on falling off a jump. Results screen with an
  animated standings reveal. Time trial mode with a GHOST of your best lap. A 4-race championship
  with points. Speed classes (Venom / Flash / Rapier) that scale top speed — the top class
  should feel genuinely frightening.

═══════════ CAMERAS (C to cycle) ═══════════
  1. CHASE — spring-damped, rolls with the craft, swings wide in corners, pulls back at speed
  2. COCKPIT — inside the canopy with a minimal holographic HUD projected on the glass
  3. NOSE — low and fast, the most terrifying view
  Plus an auto-cinematic REPLAY after each race with trackside camera cuts.

═══════════ THE FEEL (this genre lives or dies on sense of speed) ═══════════
  - FOV widens with speed (eased), radial motion blur and speed lines scaling with velocity
  - Bloom on engines, edge lines, and boost pads — tuned so it glows without washing out
  - Chromatic aberration pulse on boost; screen shake on wall hits
  - Sparks on wall scrapes; a heat-shimmer distortion behind engines
  - AUDIO (Web Audio, synthesized): an engine whine that pitches with speed, a doppler-shifted
    whoosh as rivals pass, airbrake hiss, boost roar, wall scrape, and a driving procedural
    electronic soundtrack (kick, bass, arpeggio) whose intensity rises on the final lap.

═══════════ HUD & MENUS ═══════════
  HUD: speed, energy bar, boost meter, lap, position, lap times with deltas, a minimap, and a
  slipstream indicator when drafting. Menus (all animated): main menu with a rotating craft,
  team select with stat bars, track select with preview flyovers, speed class, settings
  (graphics quality Low→Ultra toggling post-FX and particle counts, controls, gamepad, volumes),
  pause, results, championship standings. Gamepad support via the Gamepad API with analog
  steering and trigger airbrakes. Persist bests and championship progress in localStorage.

═══════════ VERIFY ═══════════
  □ The craft stays glued to the track through the full loop and the inverted straight
  □ Leaving the surface on a jump switches to world gravity, and landing re-acquires cleanly
  □ The track twists 360° without the extruded surface flipping or pinching
  □ Airbrakes make tight corners possible that are impossible without them
  □ Drafting measurably fills boost and AI uses it too
  □ AI completes laps, pits when low, and overtakes without clipping through walls
  □ Physics is identical at 30fps and 144fps (fixed timestep)
  □ 60fps at High with 8 craft, trails, and full post-processing

Output the complete single HTML file, no truncation. Track-relative gravity, the surface
re-acquisition after jumps, and the twist-safe track extrusion are the critical systems.

Build "Event Horizon" — an interactive, physically grounded black hole simulator. Fly around
a black hole, watch spacetime bend light in real time, and drop probes toward the horizon.
ONE self-contained event-horizon.html. Modern three.js via the importmap above — but the core
is a full-screen fragment shader that ray-traces light through curved spacetime.

═══════════ THE PHYSICS (ray-traced in the fragment shader) ═══════════
  Model a non-rotating (Schwarzschild) black hole in units where G = c = M = 1, so the event
  horizon is at r = 2 (the Schwarzschild radius).
  - For every pixel, trace a light ray BACKWARD from the camera, integrating its path through
    curved spacetime. Use the standard real-time formulation that reproduces Schwarzschild null
    geodesics: an acceleration term a = −1.5 · h² · r̂ / r⁵, where h is the ray's conserved
    specific angular momentum |r × v|. Integrate with a stable step (RK4, or leapfrog with an
    adaptive step that shrinks near the hole).
  - If the ray crosses r < 2, the pixel is black (it fell in).
  - If it escapes past a far radius, sample a procedural starfield/galaxy skybox in the ray's
    final direction — so background stars visibly smear into arcs and an Einstein ring.
  - If it crosses the ACCRETION DISK plane between the inner and outer radius, shade the disk.

  THE ACCRETION DISK:
  - A thin disk in the equatorial plane, from the ISCO (innermost stable circular orbit, r = 6)
    out to r ≈ 20
  - Temperature falling with radius (roughly T ∝ r^(−3/4)) mapped to blackbody colour — white-
    blue hot inside, orange-red outside
  - Animated turbulence: procedural noise advected around the disk at Keplerian speeds, so the
    inner edge visibly rotates faster than the outer edge
  - RELATIVISTIC DOPPLER BEAMING: the side of the disk rotating toward the camera is brighter and
    bluer, the receding side dimmer and redder. This asymmetry is the signature of a real render.
  - GRAVITATIONAL REDSHIFT: light from deep in the well is dimmed and reddened

  What must EMERGE from the ray tracing rather than being painted on:
  - The black SHADOW, with an apparent radius ≈ √27 ≈ 5.2 (larger than the horizon itself)
  - The PHOTON RING, a thin bright ring at the shadow's edge
  - The far side of the disk lensed UP over the top of the hole and DOWN under it — the
    iconic image. If this doesn't appear, the geodesic integration is wrong.

  PERFORMANCE: render the lensing pass at a configurable internal resolution (0.5×–1×) and
  upscale; cap step counts; offer a quality preset. It must stay interactive on a laptop GPU.

═══════════ INTERACTION ═══════════
  - FREE-FLY CAMERA: orbit, zoom, and fly. As you approach, the lensing distorts the whole sky.
  - Orbit presets: a stable circular orbit at r = 10, the photon sphere (r = 3, where light
    itself orbits — show it as a thin ring overlay), and a plunging trajectory
  - Toggle the disk on/off to see pure lensing of the starfield
  - Disk controls: inner/outer radius, temperature, turbulence, inclination relative to camera
  - An "edge-on / face-on / 'cinematic' tilted" view preset set

═══════════ DROP A PROBE (the fun part) ═══════════
  Launch a glowing probe from your position on a trajectory you aim. Integrate its MASSIVE-
  particle geodesic (timelike, different from the light rays) so it orbits, precesses, or
  plunges. Show:
  - Its orbit trail, including periapsis precession for eccentric orbits (the rosette pattern)
  - Its clock vs your clock: GRAVITATIONAL TIME DILATION factor √(1 − 2/r), displayed as two
    ticking clocks side by side that visibly diverge as it falls
  - As it nears the horizon it redshifts, dims, and appears to freeze and fade — it never visibly
    crosses, which is exactly what a distant observer would see
  - Probes inside the ISCO must spiral in; probes with enough angular momentum must orbit

═══════════ THE INSTRUMENT PANEL ═══════════
  A clean scientific HUD: your distance from the centre in Schwarzschild radii, local time
  dilation factor, escape velocity at your radius (as a fraction of c), orbital velocity, and
  markers for the horizon (r=2), photon sphere (r=3), and ISCO (r=6). A short tooltip glossary
  explaining each term in one sentence — this should teach as well as dazzle.
  A guided "tour" mode that flies through 6 waypoints with a caption at each (the shadow, the
  photon ring, Doppler beaming, lensed disk, time dilation, the ISCO).

═══════════ VISUAL POLISH ═══════════
  Bloom on the disk and photon ring, ACES tone mapping, a rich procedural galaxy background
  (Milky-Way-like band plus thousands of stars) so lensing has something beautiful to distort,
  a subtle film grain. Screenshot button (canvas → PNG).

═══════════ VERIFY ═══════════
  □ The far side of the disk appears lensed above AND below the shadow
  □ The shadow's apparent radius is ≈ 5.2 (√27), not 2 — check against a measured overlay
  □ A photon ring is visible at the shadow edge
  □ One side of the disk is brighter (Doppler beaming) and the brighter side flips when you
    orbit to the other side
  □ Background stars form arcs and an Einstein ring when aligned behind the hole
  □ A probe inside r = 6 spirals in; one with sufficient angular momentum orbits stably
  □ The time-dilation clocks diverge correctly with radius
  □ Interactive frame rate on a laptop at the default quality preset

Output the complete single HTML file, no truncation. The geodesic integration in the shader
is the whole build — if the lensed disk doesn't wrap over and under the shadow, nothing else
matters.

Build "Accord" — the website for an independent perfume house. A complete MULTI-PAGE site:
6 interlinked pages sharing one design system, one nav, and smooth page transitions. Sensual,
editorial, quiet luxury — closer to a fashion magazine than a shop.

STACK: three.js via the importmap above (three@0.170.0, modern API only), GSAP 3.12 +
ScrollTrigger, Lenis smooth scroll, Lucide icons, Google Fonts. All imagery procedural.

FILES:
  shared.css · shared.js
  index.html · collection.html · notes.html · discover.html · atelier.html · boutique.html
  js/home.js · js/collection.js · js/notes.js · js/discover.js · js/atelier.js · js/boutique.js

DESIGN DIRECTION — "a scent made visible":
  Light-first, with a dark "evening" theme. Palette: warm parchment, a deep aubergine ink, and
  soft blush and amber accents that read as liquid colour. Fonts: a high-contrast editorial
  italic serif for display, a light grotesk for body, and a small-caps mono for ingredient
  names and concentrations. Generous whitespace, asymmetric editorial layouts, oversized type.
  Slow, liquid easings. Nothing snaps.

THE 3D HERO (real Three.js WebGL — the centerpiece):
  A heavy glass perfume FLACON with a faceted body and a weighted brass cap.
  - The glass: MeshPhysicalMaterial with transmission, thickness, IOR ≈ 1.5, slight dispersion
    tint at the edges, and an environment map so it refracts and reflects convincingly.
  - THE LIQUID INSIDE: a separate mesh whose surface is a plane clipped to the bottle's interior,
    tinted amber with its own transmission. It SLOSHES: the liquid surface tilts with a damped
    spring driven by mouse movement and scroll velocity — fling the cursor and the perfume
    swirls, then settles. This physical detail is what makes the hero feel alive.
  - Fake caustics: a soft animated light pattern projected onto the surface beneath the bottle.
  - Slow rotation; mouse parallax; dispose on page transition; gradient fallback without WebGL.

CUSTOM CURSOR (fresh): a soft mist cursor — a small blurred dot that leaves a faint drifting
  trail of particles which diffuse and fade like an atomized spray. On hover over interactive
  elements, a brief "spritz" burst. Hidden on touch devices.

PAGE 1 — index.html (11 sections):
  1. Hero: the 3D flacon + house name + one line of positioning + two quiet CTAs
  2. Press marquee (fashion and fragrance publications)
  3. The house's three signature fragrances — tall editorial cards with hover tilt
  4. THE PINNED SCROLL INTERLUDE (400vh) — "eight hours on the skin": a fragrance unfolds over
     time. As the user scrolls, a clock advances from 0 to 8 hours. TOP NOTES (bergamot, pink
     pepper) rise as bright particles and evaporate first; HEART NOTES (rose, iris) bloom in the
     middle; BASE NOTES (amber, sandalwood, musk) settle low and linger to the end. Each note
     names itself with a small-caps label as it appears. One continuous sequence, not slides.
  5. The fragrance wheel teaser — an interactive olfactory families wheel → discover.html
  6. Raw materials band: three ingredients, each with a procedurally illustrated botanical
  7. Numbers (animated): raw materials in the palette, years of the house, months of maceration
  8. A long-form editorial quote from the perfumer, set large
  9. Atelier teaser → atelier.html
  10. FAQ accordion (concentration, longevity, sampling, refills)
  11. Final CTA + rich footer

PAGE 2 — collection.html: the fragrances. A grid where each fragrance has its own colour world;
  filter by olfactory family, concentration (EDT / EDP / Extrait), and season; a detail view
  with the full note pyramid, longevity and sillage meters, a "wear it when" mood line, sizes,
  and a sample-set CTA.

PAGE 3 — notes.html: the ingredient library. A searchable, filterable index of raw materials
  (naturals and molecules), each with a procedural illustration, origin, extraction method,
  olfactory description, and which fragrances use it. A world map of where ingredients are
  sourced, with hover cards.

PAGE 4 — discover.html: find your scent. An interactive OLFACTORY WHEEL (SVG — floral, oriental,
  woody, fresh, and their sub-families) the user explores by hovering and clicking, plus a
  6-question quiz (moods, places, textures, time of day) that scores answers against families
  and recommends 2-3 fragrances with an explanation of why. Animated transitions between
  questions; the result reveals with the matching flacon colour.

PAGE 5 — atelier.html: how it's made. The perfumer's story; a process timeline whose SVG line
  draws on scroll (sourcing → extraction → composition → maceration → bottling); the organ (the
  perfumer's desk of raw materials) as an illustrated interactive shelf; sustainability; footer.

PAGE 6 — boutique.html: visit and order. Boutique locations with hours, a refill programme,
  a validated sample-request form (choose 3 fragrances, address, notes), gift wrapping, shipping
  and returns, a closing full-bleed shot of the flacon. Footer.

SHARED SYSTEMS (shared.js): Lenis smooth scroll + a hairline progress bar; the mist cursor;
  theme toggle persisted in localStorage; [data-reveal] entrance system with slow liquid easing;
  subtle magnetic buttons; tilt cards with a soft sheen; a PAGE TRANSITION VEIL that dissolves
  like mist rather than wiping.

REQUIREMENTS: 6 distinct background patterns (paper grain, soft radial bloom, fine botanical
  line pattern, watercolour wash, dotted mist, silk gradient); active nav link; frosted nav after
  scroll; mobile overlay menu; fully responsive; reduced-motion respected (the liquid stills and
  the eight-hour sequence becomes static); accessible; 60fps; pixel ratio capped at 2. Note
  pyramids and ingredient lists must be consistent across every page.

DELIVERY: shared.css and shared.js complete FIRST, then each page with its JS. No truncation.
End with a validation checklist.

Build "Harbour" — a cozy, goal-free town builder. The player clicks on water to raise colourful
buildings, and the town ASSEMBLES ITSELF: walls, roofs, arches, stairs, balconies, and gardens
appear automatically depending on what's next to what. ONE self-contained harbour.html.
Modern three.js via the importmap above. All geometry procedural.

═══════════ THE IRREGULAR GRID (the foundation — do this first) ═══════════
  The charm comes from an ORGANIC grid, not a square one. Generate it:
  1. Start from a hexagonal region subdivided into triangles
  2. Randomly merge adjacent triangle pairs into quads (leaving some triangles)
  3. Subdivide every triangle and quad into smaller QUADS so the whole grid is quads
  4. RELAX the vertices iteratively (move each vertex toward the average of its neighbours, with
     a force pulling each quad toward squareness) until it settles into a soft, organic mesh
  The result: irregular four-sided cells that feel hand-drawn. Seedable, so a seed reproduces a grid.

═══════════ THE BUILDING SYSTEM ═══════════
  Each grid cell can stack up to ~8 floors. Occupancy is stored per cell per height.
  - DUAL-GRID MODULE SELECTION: for each corner point of the grid at each height, look at which
    of the surrounding cells (above and below) are filled. That configuration selects a MODULE —
    a piece of wall, a corner, a roof edge, an arch, a pillar, a floor edge.
  - DEFORM each module to fit its irregular quad (bilinear mapping of the module's unit-square
    geometry onto the quad's four corners) so every building conforms to the organic grid.
  - Automatic architecture from context, at minimum:
      * Peaked or sloped ROOFS on top of stacks, with chimneys occasionally
      * ARCHES when a block hangs over an empty cell
      * STAIRS climbing beside tall buildings
      * Flat-roof GARDENS with tiny plants when a roof is wide enough
      * BALCONIES and window boxes on some walls
      * DOORS at ground level facing the water or a path
      * A small DOCK and a moored boat where a building meets open water
      * LAMP POSTS on ground cells, fences on edges
  - Colour: the player picks a colour from a pastel palette before placing; each building keeps
    its colour, roofs a darker tone of it. Neighbouring colours should look harmonious.

═══════════ INTERACTION ═══════════
  - Left click: add a block (on water → new building at ground level; on a building → add a floor)
  - Right click: remove a block, with the architecture re-resolving around it
  - Hover: a translucent preview of the block to be added
  - Orbit, zoom, pan camera with smooth momentum
  - Undo/redo (50 steps)
  - A palette of 10 colours; an eyedropper to pick an existing building's colour
  - Changes animate: a new block grows up out of the water with a gentle bounce, and neighbouring
    modules morph to their new shapes rather than popping

═══════════ THE WORLD ═══════════
  - Stylized WATER with gentle waves, a soft foam line where it meets buildings, and reflections
  - TIME OF DAY slider: morning haze, bright noon, golden hour, and night — at night windows light
    up one by one with warm emissive glow and lamps turn on
  - Gulls that circle and land on rooftops; small boats that drift between docks
  - Soft shadows, ambient occlusion, a gentle tilt-shift depth-of-field for that miniature look
  - Ambient soundscape (Web Audio): water lapping, distant gulls, and a soft chime pitched by
    height each time you place a block — building a tower should sound like a little melody

═══════════ EXTRAS ═══════════
  - New seed button (generates a fresh grid); a few preset starter towns
  - Save/load towns to localStorage; share via a compressed URL hash
  - Screenshot (canvas → PNG) and a "photo mode" that hides UI and slowly orbits
  - A one-time gentle hint overlay, then nothing — no goals, no score, no menus in the way

═══════════ VERIFY ═══════════
  □ The grid is all quads, organic, and relaxes into pleasant shapes with no degenerate cells
  □ Modules deform cleanly to irregular quads with no gaps or cracks between neighbours
  □ Roofs, arches, stairs, gardens, balconies, and docks all appear automatically in the right contexts
  □ Removing a block correctly re-resolves every affected neighbour
  □ Night mode lights windows and lamps
  □ Placement animation is smooth and neighbours morph rather than pop
  □ Save/load and URL sharing round-trip exactly
  □ 60fps with a town of 200+ blocks

Output the complete single HTML file, no truncation. The irregular quad grid and the dual-grid
module selection with deformation are the critical systems — if modules crack at the seams or
the grid has pinched cells, the whole thing loses its magic.

Build "Skyfire" — a fireworks show designer. Place shells on a timeline, sync them to a beat,
and launch the show over a city waterfront at night. ONE self-contained skyfire.html. Modern
three.js via the importmap above (UnrealBloomPass, EffectComposer allowed). Particle physics,
audio, and all visuals procedural.

═══════════ THE PYROTECHNICS (physically flavoured, visually spectacular) ═══════════
  GPU particle system (instanced or Points with custom shaders) handling 50,000+ live particles.
  Each STAR (glowing particle) has position, velocity, colour, burn time, and drag; gravity and
  air drag act on everything, so bursts expand fast and then droop.
  Implement these shell types, each with a distinct look:
    PEONY (spherical burst, no trails) · CHRYSANTHEMUM (sphere with sparkling trails) ·
    WILLOW (long golden trails that droop and hang) · PALM (few thick rising arms) ·
    RING (a flat ring, randomly oriented) · CROSSETTE (stars that split into four mid-flight) ·
    STROBE (stars that blink) · CRACKLE (stars that burst into tiny crackling sparks with a
    snapping sound) · KAMURO (heavy glittering gold that lingers) · HEART (a heart-shaped burst) ·
    MINE (ground-launched fountain spray) · COMET (a single bright rising star with a long tail)
  Shells rise with a faint lift trail, then burst at their set height. Bursts can be multi-break
  (a burst that bursts again).
  COLOUR BY CHEMISTRY — a fun educational touch: the colour picker names the metal salt behind
  each colour (strontium → red, barium → green, copper → blue, sodium → yellow, calcium → orange,
  a strontium+copper mix → purple, magnesium/aluminium → white sparkle).

═══════════ THE SCENE ═══════════
  - A city waterfront at night: a skyline silhouette with lit windows, a bridge, and calm water
  - The WATER REFLECTS every burst (a planar reflection or screen-space approximation)
  - SMOKE: each burst leaves a slowly drifting smoke cloud that catches the colour of LATER bursts
    behind it — this is what makes a real show look rich rather than clean
  - A light wind setting that pushes smoke and trails
  - Burst light briefly illuminates the water, bridge, and smoke
  - Bloom tuned so bursts glow and halo without the whole frame blowing out
  - Camera presets: from the crowd on the shore, from a boat, from a high rooftop, and a free
    camera. Gentle idle sway.

═══════════ SOUND (Web Audio, synthesized) ═══════════
  - Launch thump, rising whistle for some shells, burst boom, crackle snaps, willow fizz
  - REALISM DETAIL: the boom arrives AFTER the flash, delayed by distance ÷ speed of sound
    (≈343 m/s) from the camera position — so the far rooftop camera hears it later than the boat.
    This delay is the single most convincing detail in the build.
  - A built-in procedural music track (choose from 3 moods: triumphant, dreamy, electronic) with a
    known BPM, so the show can be choreographed to the beat

═══════════ THE SHOW DESIGNER (the core UX) ═══════════
  - A horizontal TIMELINE at the bottom, with a beat grid from the music's BPM and a waveform
  - Drag shells from a palette onto the timeline; they SNAP to beats (toggleable)
  - Each placed cue has: shell type, colours (1–3), burst height, launch position along the
    waterfront (a small top-down position strip), size, and count
  - NOTE: shells must be launched BEFORE their beat — the editor places the BURST on the beat and
    automatically computes the launch time from rise duration. That's the detail that makes it feel
    professional.
  - Multi-select, copy/paste, drag to move, and mirror a pattern across the waterfront
  - Preview a single cue on click; play the whole show from any point; scrub
  - QUICK PATTERNS: one-click sequences — a left-to-right sweep, a fan, a chase, a finale barrage
  - Undo/redo

═══════════ MODES ═══════════
  - DESIGN: the timeline editor
  - SHOW: full screen, UI hidden, the show plays from the crowd camera with the music
  - FREE PLAY: click anywhere in the sky to launch the selected shell instantly
  - 3 built-in demo shows (one per music mood), each with a proper grand finale

═══════════ EXTRAS ═══════════
  Save/load shows to localStorage; share a show as a compressed URL hash so anyone can open it and
  watch; screenshot; a performance preset (Low/Medium/High) scaling particle counts and bloom.

═══════════ VERIFY ═══════════
  □ All 12 shell types are visually distinct and recognizable
  □ Gravity and drag give bursts the right expand-then-droop shape; willows genuinely hang
  □ Crossettes split mid-flight; multi-break shells burst twice
  □ Smoke lingers, drifts with wind, and is lit by later bursts
  □ Bursts reflect in the water
  □ The boom is delayed by distance and the delay changes between camera positions
  □ Bursts land ON the beat because launch times are computed backwards from rise time
  □ The demo shows play start to finish with a real finale
  □ Shared URLs reproduce the show exactly
  □ 60fps with 50,000 particles at High

Output the complete single HTML file, no truncation. The GPU particle system, the beat-aligned
launch timing, and the distance-delayed sound are the critical pieces.

Audit the page you just built for responsive problems. Check these widths: 1440, 1024, 768 and 390 pixels.

For each width, list:
- any horizontal overflow
- text that wraps badly
- buttons or cards that overlap
- cards or sections with no gap between them

Then fix every problem in the code. Rules:
- Use CSS grid or flexbox with gap values from an 8 point scale.
- Do not use fixed pixel widths on containers.
- Include the meta viewport tag.
- Collapse a three column grid to two columns at 1024 pixels and one column at 768 pixels.

Return the full updated file and a short list of what you changed.

Spacing rules you must follow:
- Use an 8 point spacing scale only (8, 16, 24, 32, 48, 64).
- At least 24 pixels between a heading and the paragraph below it.
- At least 24 pixels between a paragraph and its buttons.
- At least 24 pixels between neighbouring cards.
- Section padding of at least 64 pixels on desktop and 32 pixels on mobile.
After you write the code, check every rule against it and fix any that fail.

Write the Kubernetes manifest for [your service]. Before you answer, check these points and show me the result of each:
1. Which user does the container run as, and can that user write to every path the process needs?
2. List every directory the process writes to and the volume that backs it.
3. Does the image work with the security context you chose?
Then give me the final manifest and the commands to test it on a local cluster.