# Original prompt

build me a set of frustration removal spheres as a html site

# Generated expansion

# Continuation specification: Release — Frustration Removal Spheres

Continue the existing dependency-free static site rather than re-platforming it.

## Product goal
Create a calm wellness page named “Release” that helps visitors reduce frustration through six interactive breathing and grounding spheres. The experience should feel airy, gentle, polished, and immediately understandable.

## Required experience
- Present six distinct spheres/cards with these purposes and labels:
  - Release Tension
  - Calm the Mind
  - Soothe Emotions
  - Renew Energy
  - Restore Balance
  - Invite Peace
- Activating a sphere must update the status area with its title and guided message.
- Activation must work by click/tap and keyboard focus; preserve non-touch hover activation if already implemented.
- The reset control must clear the active sphere and restore the initial status:
  - Title: “Choose a sphere to begin”
  - Message: “There is no right way to feel. Start wherever you are.”
- Preserve descriptive accessible labels, visible keyboard focus, `aria-pressed` semantics, and status announcements.

## Visual direction
Use `docs/design-reference.png` as non-authoritative visual guidance. Preserve the supplied direction:
- airy off-white background
- centered indigo typography
- soft pastel gradients
- rounded cards and spheres
- diffuse shadows
- distinct color/purpose treatment for each sphere
- responsive three-column desktop layout collapsing to one column on small screens
- gentle active-state animation
- reduced or disabled motion for users who prefer reduced motion

## Technical constraints
- Keep semantic HTML, separate CSS, and vanilla JavaScript.
- Do not add a framework, package manager, build step, or external assets unless explicitly required later.
- Ensure `index.html` wires both `style.css` and `app.js`.
- Ensure the expected selectors and data keys remain compatible with the existing `app.js`.
- Do not claim visual matching or runtime completeness until the page has been opened and the primary interaction has been tested.

## Verification checklist
Before handoff, verify the browser renders the page, all six spheres activate correctly, status text changes, reset works, keyboard focus is visible, touch/click behavior works, responsive layout holds at narrow widths, and reduced-motion behavior is respected.