PROMPT:
World-class creative technologist & designer. Build this standalone HTML page as a file in the current working directory.

CONSTRAINTS (non-negotiable):
- One self-contained .html per page. ALL CSS in one <style>, ALL JS in one <script>. Inline everything.
- ZERO external dependencies: no CDN, no external fonts (system stacks only: system-ui, Georgia, 'Segoe UI', Menlo, Consolas, serif/sans-serif/monospace), no external images, no external SVG files, no libraries. Build all visuals with CSS, HTML, inline SVG, or <canvas>.
- Works fully offline by double-clicking. No network requests. Responsive 320px->4K; include <meta name="viewport" content="width=device-width, initial-scale=1">. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, semantic where sensible.
- WOW BAR: genuinely stunning, premium, Awwwards-caliber, NOT generic. Distinctive art direction, curated palette, refined typography, deliberate composition, real intentional motion, delightful details, one signature effect. Handcrafted, unique, take design risks.

PAGE: 097-kinetic-sculpture.html + 097-kinetic-sculpture.txt
A Calder-esque kinetic mobile sculpture of balanced shapes gently swinging. Palette: primary colors (red/blue/yellow) on off-white, black wires. Signature: CSS hanging shapes on wires with pendulum/balance motion, gentle breeze sway, cast soft shadows.

TITLE:
Kinetic Sculpture — "Balance in Primary"

DESIGN DESCRIPTION:
A minimal gallery-grade composition on a warm off-white field: from a single anchor point, black wires branch into a balanced Calder-style mobile of primary-colored shapes — a red disc, a blue ellipse, a yellow teardrop and slim counterweight bars. Each element hangs on its own wire and swings on its own period, so the whole structure perpetually re-balances as if moved by a slow indoor breeze. Shapes cast soft blurred shadows that drift across the paper behind them, giving depth without literal light. Typography is kept deliberately quiet (a small uppercase label and a thin "mobile №097" tag) so the motion is the art. The piece responds to the pointer: hovering or dragging applies a gentle gust that nudges the arm you point near, then it settles back into its calm equilibrium.

MAJOR VISUAL TECHNIQUES:
- Pure-CSS hanging shapes: each form is a real DOM element (radial-gradient discs, ellipses, custom SVG teardrop) suspended by a thin box-shadow/gradient "wire".
- Layered, out-of-phase pendulum motion via stacked CSS keyframe rotations (multiple transform-origins at the anchor) plus a slow global "breeze" sway.
- Soft drop shadows rendered with filter: blur + offset that lag the shape motion for physical depth.
- Inline SVG for the organic teardrop/counterweight silhouettes, filled with curated primary palette.
- Pointer-driven "gust": JS applies transient rotation impulses that decay, so the mobile wobbles then re-balances.
- Responsive sizing with clamp()/vmin so the sculpture scales proportionally 320px→4K.

INTENDED INTERACTION MODEL:
Passive-meditative by default — the mobile swings itself in an endless, non-repeating balance. Move or drag the pointer across the piece to blow a soft gust that tips the nearby arm; release and it sways back to equilibrium. No buttons, no modal states — the whole page is the sculpture.