## Project brief

**Release — Frustration Removal Spheres** is intended to be a calm, responsive static wellness page with six interactive breathing and grounding spheres. The supplied implementation uses semantic HTML, separate CSS, and vanilla JavaScript with no external assets or build tooling.

### Stack
- HTML (`index.html`)
- CSS (`style.css`)
- Vanilla JavaScript (`app.js`)
- Visual guidance: `docs/design-reference.png`

### Existing work
- `app.js` defines six exercises: Release Tension, Calm the Mind, Soothe Emotions, Renew Energy, Restore Balance, and Invite Peace.
- The JavaScript includes click, non-touch pointer-enter, and focus activation behavior.
- Active spheres receive an `is-active` class and `aria-pressed` state.
- Status title and message are updated through DOM elements identified as `#status-title` and `#status-message`.
- A reset control identified as `#reset-button` clears the active state and restores the initial message.
- `README.md` documents the intended interaction model, accessibility behavior, responsive layout, and reduced-motion support.
- The design brief calls for an airy off-white background, centered indigo typography, pastel gradients, rounded cards, diffuse shadows, and a responsive three-column-to-single-column layout.

### Constraints and preservation guidance
- Keep the project dependency-free and runnable as a static site.
- Preserve the semantic button-based sphere interaction, keyboard focus behavior, `aria-pressed` state, and live status updates.
- Preserve the six named exercises and their current guided messages unless the product direction explicitly changes.
- Preserve the calm visual hierarchy, distinct sphere colors, rounded surfaces, diffuse shadows, and responsive layout described in the design brief.
- Respect reduced-motion preferences; do not introduce mandatory animation or external asset dependencies.
- The supplied visual reference is guidance only; the user prompt and existing target structure remain authoritative.

### Verification status and blockers
- Generated code was not executed.
- The supplied file listing confirms `index.html`, `style.css`, and `app.js` exist, and `app.js` contains the interaction logic, but the contents of `index.html` and `style.css` were not included in the handoff text. Therefore, the HTML script/style wiring, element selectors, primary visual rendering, and live-region markup cannot be independently verified from the supplied files alone.
- Confirm that `index.html` loads `style.css` and `app.js`, contains all `.sphere-button` elements with matching `data-sphere` values, and includes `#status-title`, `#status-message`, and `#reset-button`.
- Confirm that the status region has suitable assistive-technology semantics and that the CSS provides the intended active, focus, responsive, and reduced-motion states.

### Continuation objective
Finish verification and refinement of the static Release experience without replacing its dependency-free architecture or weakening its accessible keyboard, pointer, touch, reset, and reduced-motion behavior.

## Visual handoff
VISUAL HANDOFF:
- Design reference: `docs/design-reference.png`. It is non-authoritative visual guidance; the user prompt and runnable target remain authoritative.
- Design brief: Create a calm, polished static wellness site called “Release” that helps visitors reduce frustration through six interactive breathing-and-release spheres. Use the supplied reference as visual guidance: airy off-white background, centered indigo typography, soft pastel gradients, rounded cards, diffuse shadows, and a responsive three-column-to-single-column layout. Each sphere card should have a distinct color and purpose. Hovering or tapping a card should activate it, gently animate the sphere, reveal a short guided message and breathing prompt, and update a live reset/status area without requiring external assets. Preserve semantic HTML, separate CSS, and vanilla JavaScript.