TITLE: Paced Breath — a living 4·4·6 breathing guide
PROMPT: Build a single self-contained HTML breathing guide on a deep-calm ground (#0f1720) with no external assets of any kind and no occurrence of the substring "http" anywhere in the file. Center a large circular orb (clamp 232px–424px) with a conic progress ring around it, a wide-tracked system-ui 300 phase word inside (INHALE / HOLD / EXHALE), a ui-monospace countdown below it in the phase colour, and a session timer (mm:ss, tabular nums) in the top-right HUD opposite a small tracked mono brand mark. Below the orb place a mono hint line, a pill row of pattern selectors (4·4·6, Box 4·4·4·4, 4·7·8) and a Begin/Pause pill, then a Georgia italic note in muted #e2e8f0 at 46% opacity. Behind everything, three huge soft radial-gradient glows — sky #7dd3fc, violet #c4b5fd, blush #fbcfe8 — cross-fade so the background hue follows the breath phase (1.7s ease transitions). Twenty-two tiny particles orbit the orb and breathe outward with it. Motion: a rAF phase state machine (each phase carries name, seconds, target scale 1.34 inhale/hold, 0.80 exhale) with spring-smoothed orb scale via scale += (target-scale)*(1-exp(-dt/165)); a conic-gradient ring masked to a 4px annulus tracks per-phase progress with a glowing head dot; particle radius follows the orb radius. Interaction: space toggles run/pause, the orb is a clickable button that restarts the cycle, pattern pills swap the phase list, hovering the orb swaps the hint to "PHASE · n seconds". Respect prefers-reduced-motion by halving the scale amplitude, freezing particle drift and disabling the sheen spin. All CSS in one inline style block, all JS in one IIFE at the end of body.
DESCRIPTION: A calm, genuinely useful breathing coach rather than a decoration. The page reads as an instrument: a breathing orb suspended in a colour field that shifts from cool sky on the inhale to violet on the hold to warm blush on the exhale, with a thin conic ring tracing the current phase and a soft constellation of dust that swells and settles with each breath. Typography stays quiet — an oversized letterspaced phase word inside the orb, a monospace countdown and session clock, and a single italic serif line at the bottom that frames the practice. Everything is legible in a frozen render: no entrance fade-ins, only transform and colour transitions.
TECHNIQUES: rAF phase state machine with while-loop catch-up for long frames; spring-smoothed scale (exponential dt lerp); conic-gradient progress ring masked with radial-gradient into a 4px annulus; glowing ring head dot rotated by a CSS custom property; three stacked radial-gradient glow layers cross-faded per phase via a data-phase attribute selector; DOM particle field driven by per-particle transform only; dirty-gated countdown and session-timer DOM writes; CSS custom properties (--p, --pc) inherited from the stage; prefers-reduced-motion branch that damps amplitude and stops drift; responsive clamp() sizing from 360px to 1920px; 100dvh flex column layout.
INTERACTION: Space toggles run/pause (unless focus is on a button). Clicking the Begin/Pause pill toggles the session. Clicking the orb restarts the cycle from Inhale and resumes if paused. Clicking a pattern pill (4·4·6, Box, 4·7·8) swaps the phase sequence and restarts. Hovering the orb lights the hint line in the current phase colour and shows "PHASE · n seconds". The orb breathes continuously: scale springs toward the phase target, the conic ring fills and resets each phase, the background glow shifts hue, and the particle ring swells outward with the orb.