[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-162-NEON-BONSAI-a-living-tree-instrument":3},"# SYSTEM PROMPT — CODING AI BUILD SPECIFICATION\n\n## Project: \"NEON BONSAI — a living tree instrument\" · Audio\u002FMusic Landing Page\n\n**Your Role:** Senior Frontend Engineer & Expert UI Designer. Build the complete, production-ready landing page on the first attempt. All user-facing copy must be written in English.\n\n---\n\n## PROJECT BRIEF & DESIGN DIRECTION\n\n**Concept:** NEON BONSAI is a generative audio instrument — a digitally cultivated bonsai tree that composes evolving synth music as it grows. Users plant a sonic seed, watch the tree grow, and prune its branches to shape an ambient soundscape. The landing page must feel like a living organism made of light: dark glass surfaces, neon cyan glow, organic branch motifs, frosted translucency.\n\n**Mood & Era:** 2020s Contemporary · Dark Tech & Cyber with biophilic warmth. Keywords: synth, bonsai, audio, music, glass, translucent, gradient, blur, glow.\n\n**Palette Mapping (Dark theme — DEFAULT):**\n- `--bg-primary: #050608` · `--bg-secondary: #0d141b` (glass surfaces derive from it, e.g. `rgba(13,20,27,.55)`)\n- `--primary: #9be8ff` (ice cyan) · `--secondary: #4dd8ff` (electric cyan)\n- `--text-primary: #cfe9f5` · `--text-secondary:` derive a muted frost tone (~`#8fb3c6`) with AA contrast on `--bg-primary`\n- `--border-default: rgba(155,232,255,.18)` · glow shadows built from `#4dd8ff`\u002F`#9be8ff` at low alpha\n\n**Light Theme Mapping:** Frost-tinted backgrounds (never `#ffffff` — use `#fefefe` and the `#eaf4fa` family), text `#050608`, cyan accents darkened (deep-cyan family) to preserve WCAG AA, glow softened.\n\n**Typography:** Google Fonts — \"Space Grotesk\" (display, 500\u002F700) + \"Inter\" (body, 400\u002F600). Bind to `--font-display` and `--font-base`.\n\n**Icons:** Google Material Symbols (Rounded style). Inline SVGs and local icon files are forbidden.\n\n**Signature Effects (mandatory):** Glassmorphism (`backdrop-filter: blur(14px–20px)` + translucent fill + 1px cyan hairline border + subtle inner highlight), neon glow (layered box-shadows; restrained text-shadow on hero display text), gradients (radial \"aurora\" orbs in section backgrounds, gradient text via `background-clip` on key words, gradient border on the featured pricing tier), CSS filters (`blur`\u002F`saturate` on decorative orbs), hover transitions everywhere, and a slow \"breathing\" glow animation on the hero tree (disabled under `prefers-reduced-motion`).\n\n**Hero Visual:** Build a stylized bonsai tree in pure CSS — layered gradients, pseudo-elements, rotated branch elements, glowing leaf dots. No images, no SVG. It must read instantly as a glowing cyan bonsai silhouette.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. The `style=\"...\"` attribute is **forbidden anywhere** in `index.html`.\n- Target all design properties, layout rules, and states exclusively via class or ID selectors.\n- HTML must remain clean, semantic, and style-agnostic — changing the site's look requires editing only the CSS file, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every token in `:root`, overridden per theme: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast` (~.15s), `--transition-normal` (~.3s), `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`, plus theme extras `--glow-sm`, `--glow-md`, `--font-base`, `--font-display`, and a glass-surface token set.\n- **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in **both** themes, not just the default.\n- Light-mode backgrounds must never be pure white; use `#fefefe` where a near-white is needed.\n\n**1.3 Mandatory Dark Mode Support**\n- Dark is the **default presentation** (per the Dark Tech & Cyber output category). Define dark tokens in `:root`; define the full light token set under a `.theme-light` class on `\u003Chtml>`. Switching themes must change tokens only — zero HTML restructuring.\n- Provide a visible header toggle (Material Symbols `light_mode`\u002F`dark_mode`) with correct `aria-pressed` and `aria-label` states.\n- Persist choice via `localStorage`; on first visit fall back to `prefers-color-scheme`, then to dark.\n- **Exception clause:** the source specification marks Light mode — therefore Light is a fully designed alternate theme with its own glass, glow, and contrast treatment, not an afterthought; both themes must pass AA contrast checks.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in CSS comments (e.g., `.input-group` stacks label\u002Finput\u002Ferror with `stretch`; card body text aligns `flex-start`).\n- Mobile-first: all rows convert to columns at ≤768px; no horizontal scrolling at any width ≥320px; fluid type via `clamp()`.\n\n**1.5 Framework Default**\n- Use **clean custom CSS** in `style.css` (chosen over the Tailwind CDN to satisfy the single-script deliverable constraint). Organize with `@layer` (tokens → base → layout → components → utilities). Every class must resolve back to CSS variables or reusable component classes (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Include Google Fonts `\u003Clink>` tags (with `preconnect`) for Space Grotesk + Inter and the Material Symbols Rounded stylesheet.\n- Icons are rendered only via Material Symbols spans (`aria-hidden=\"true\"` when decorative). Raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\n- `.btn` base: `display: flex; align-items: center; justify-content: center; gap: .5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, `transition: var(--transition-normal)`.\n- Variants: `.btn--primary` (cyan gradient fill, `#050608` text, glow shadow), `.btn--secondary` (glass: translucent fill + cyan hairline border), `.btn--danger` (visually distinct red in **both** themes).\n- **States via CSS classes\u002Fattributes:** hover (brightness lift + intensified glow, `cursor: pointer`); `:focus-visible` (distinct ring from `--primary`); active (`transform: scale(.97)`); `.is-loading` (CSS border spinner or pulsing Material `progress` icon, button dimensions unchanged, pointer-events disabled to prevent double-clicks); `[disabled]` (`opacity: .5`, grayscale, `cursor: not-allowed`); `.is-success` \u002F `.is-error` temporary feedback states using `--text-success` \u002F `--text-error`.\n- Primary CTAs must demonstrate the full state machine: click → loading (~1s) → success feedback.\n\n**2.2 Card Component**\n- `.card` glass base: translucent `--bg-secondary` fill, `backdrop-filter: blur(16px) saturate(140%)`, 1px `--border-default`, `--radius-lg`, `--shadow-md`.\n- **Hover (interactive cards):** `translateY(-2px)` + intensified glow + brightened border. **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n- Define `.skeleton` shimmer keyframes and a `.card--empty` fallback pattern (Material icon + guidance text) as part of the design system.\n\n**2.3 Form & Input Requirements**\n- `.input-group`: flex column (justified `stretch` exception) wrapping a `\u003Clabel>`, the input, and a dedicated `.input-group__error` container with reserved min-height (no layout jump) and `aria-live=\"polite\"`.\n- Account for every state: empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border + error icon + message), disabled, read-only.\n- Implement live in the Final CTA email capture: validate on submit and blur, never use `alert()`, announce success inline via `aria-live`, and trigger the button's loading → success states.\n\n**2.4 Modal \u002F Popup Requirements**\n- Hero secondary CTA \"Hear it grow\" opens a preview modal: backdrop overlay (`rgba(5,6,8,.7)` + backdrop blur), centered flex container (`align-items: center; justify-content: center`), `role=\"dialog\"` `aria-modal=\"true\"` `aria-labelledby`, `z-index: var(--z-modal)`.\n- Animated opening\u002Fclosing via CSS transitions (opacity + scale). Close via Material `close` icon button, `Esc` key, and overlay click. Trap keyboard focus inside while open and return focus to the trigger on close. Include a simulated loading state (skeleton\u002Fspinner) before content renders, plus a success\u002Ferror feedback area.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, breakpoints at 768px\u002F480px, zero horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; `prefers-reduced-motion` disables the breathing glow, floating particles, and transforms (simple opacity only).\n- **Accessibility:** AA contrast in both themes; never rely on color alone — pair every error\u002Fsuccess with an icon and text; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); a skip link; logical DOM\u002Ffocus order; full keyboard operability (menu, modal, FAQ, toggle, form); `aria-live` regions for all dynamic feedback; visible `:focus-visible` rings everywhere.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- Smooth in-page anchor scrolling with `scroll-margin-top` for the sticky header (disabled under reduced motion). Optional: subtle IntersectionObserver scroll-reveal (`.in-view`, reduced-motion aware).\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** exactly three files — `index.html`, `style.css`, `script.js`. One deferred `\u003Cscript src=\"script.js\">` entry point only; no other script tags, no inline scripts, no inline styles.\n- **Naming convention:** BEM exclusively (`.btn--primary`, `.card__icon`, `.pricing__tier--featured`); never mix conventions.\n- **Copy:** author original, on-theme English copy for every heading, label, and description — lorem ipsum is forbidden. Unspecified link destinations may use `href=\"#\"`.\n- Must run correctly by opening `index.html` on the first attempt.\n\n---\n\n## 5. PAGE STRUCTURE & CONTENT SPECIFICATION\n\nOrder: Header → Hero → Features → How It Works → Testimonials → Pricing → FAQ → Final CTA → Footer.\n\n**5.1 Header (sticky, glass):** \"NEON BONSAI\" wordmark with a glowing leaf-dot accent; anchor nav (Features, How It Works, Pricing, FAQ); theme toggle; \"Start Growing\" `.btn--primary`. At ≤768px, collapse nav behind an accessible hamburger (`aria-expanded`, `aria-controls`) opening a flex-column panel at `--z-dropdown`.\n\n**5.2 Hero:** full-viewport section; blurred aurora radial-gradient orbs behind; the pure-CSS glowing bonsai tree centerpiece with breathing glow; a glass \"Open Beta\" badge; H1 naming the concept (e.g., a living tree that plays itself) with one gradient-clipped keyword; subcopy about planting a sonic seed; primary CTA \"Plant your first tree\" (loading→success demo) and glass secondary CTA \"Hear it grow\" (opens the modal); scroll cue.\n\n**5.3 Features — exactly 3 glass cards:** \"Generative Growth Engine\" (the tree composes from its own branching — no two trees sound alike), \"Photosynth Synthesis\" (light, season, and moisture mapped to timbre, tempo, reverb), \"Prune to Compose\" (every cut rewrites the score in real time). Each card: glowing icon tile, H3, two-line body, hover lift + glow.\n\n**5.4 How It Works — 3 steps:** 01 Plant (choose a sonic seed), 02 Grow (the tree and its score evolve daily), 03 Prune & Harvest (sculpt branches, export stems). Numbered gradient markers connected by a gradient line — horizontal on desktop, vertical on mobile.\n\n**5.5 Testimonials — 3 glass cards:** realistic quotes from a film composer, an ambient producer, and a sound designer (invented names\u002Froles); avatars as gradient circles with initials (no external images); `format_quote` icon accent; star ratings via Material `star` icons paired with text.\n\n**5.6 Pricing — 3 tiers:** Seedling (Free — 1 tree, core engine), Bonsai ($12\u002Fmo — **featured**: \"Most Popular\" glass badge, gradient border, elevated scale\u002Fglow; 5 trees, all synth packs, stem export), Ancient Tree ($29\u002Fmo — unlimited trees, grove collaboration, DAW plugin, API). Feature lists with `check` icons; featured tier gets `.btn--primary`, others `.btn--secondary`.\n\n**5.7 FAQ — 5–6 items:** native `\u003Cdetails>`\u002F`\u003Csummary>` (accessible by default), styled as glass rows; Material `expand_more` chevron rotating 180° when open; `:focus-visible` ring and hover feedback on summaries. On-theme questions (Is music theory required? What does pruning do to the sound? Can I export to my DAW? What happens if I stop watering it? — the tree goes dormant, your score is saved).\n\n**5.8 Final CTA:** large glass panel with aurora glow; H2 \"Grow your sound from a seed.\"; email capture `.input-group` + `.btn--primary` \"Get early access\" exercising the full 2.3 state machine; inline success message announced via `aria-live`; privacy microcopy.\n\n**5.9 Footer:** brand block with one-line tagline; three secondary link columns (Product \u002F Resources \u002F Company — real labels, `href=\"#\"` destinations acceptable); contact\u002Fcommunity links as text or generic Material icons (no brand logos — SVGs are forbidden); copyright line with dynamic year; microcopy: \"All sound is grown locally in your browser.\"\n\n**`script.js` scope:** theme toggle + persistence, mobile menu, modal open\u002Fclose + focus trap + Esc, email form validation + success feedback, CTA loading-state demo, optional reduced-motion-aware scroll reveal. Nothing else.\n\n**Definition of Done:** zero inline styles\u002Fscripts; both themes toggle correctly and persist; every interactive element has hover, focus, active, and feedback states; no horizontal scroll from 320px up; keyboard-only navigation reaches and operates every control; all copy is original NEON BONSAI-themed English.\n",1791954982649]