[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-823-Biomimetic-Organic-2-0":3},"# SYSTEM PROMPT — SENIOR FRONTEND ENGINEER: BUILD THE \"MORPHO\" LANDING PAGE (BIOMIMETIC \u002F ORGANIC 2.0)\n\n**Mission:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality marketing landing page on the first attempt for **Morpho** — a fictional generative design platform whose interfaces grow using nature's algorithms (\"Design that grows itself\"). All user-facing copy must be original, on-theme, and written in **English**. No lorem ipsum.\n\n**Deliver three files:** `index.html`, `style.css`, `script.js` — working, accessible, and polished in both Light and Dark modes.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- **Class\u002FID selectors only:** Every design property, layout rule, and state is defined in `style.css` and targeted via class or ID selectors.\n- **Minimal HTML modifications:** HTML stays clean and semantic; re-theming the entire site must require edits to `style.css` only, never markup changes.\n\n### 1.2 CSS Variables & Theme Tokens\nDefine all tokens in `:root` (Light) and override under `html.dark` AND `@media (prefers-color-scheme: dark)` (see 1.3). Required tokens:\n\n| Token | Light | Dark |\n|---|---|---|\n| `--primary` (Cellular Pink) | `#FF9999` | `#FF9999` |\n| `--secondary` (Chlorophyll Green) | `#00FF41` | `#00FF41` |\n| `--accent` (Bioluminescent Blue) | `#00E5FF` | `#00E5FF` |\n| `--warm` (Coral) | `#FF7F50` | `#FF7F50` |\n| `--bg-primary` | `#F4F9F2` (pale organic tint — never `#ffffff`) | `#001E3C` (Deep Ocean) |\n| `--bg-secondary` (surfaces) | `#FEFEFE` | `#012B52` |\n| `--text-primary` | `#001E3C` | `#EAF7F0` |\n| `--text-secondary` | `#44606F` | `#A3C6D6` |\n| `--text-success` \u002F `--text-error` | `#0B7A3B` \u002F `#D32F2F` | `#3AE070` \u002F `#FF7A7A` |\n| `--border-default` \u002F `--border-error` \u002F `--border-success` | `#D8E6DC` \u002F `#D32F2F` \u002F `#0B7A3B` | `#17466B` \u002F `#FF7A7A` \u002F `#3AE070` |\n| `--shadow-sm` \u002F `--shadow-md` | `0 2px 10px rgba(0,30,60,.08)` \u002F `0 10px 30px rgba(0,30,60,.12)` | `0 2px 10px rgba(0,0,0,.4)` \u002F `0 10px 30px rgba(0,0,0,.5)` |\n\nTheme-invariant tokens (in `:root` only): `--radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --spacing-gap: 1.5rem; --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(.4,0,.2,1); --ease-organic: cubic-bezier(.68,-.35,.27,1.2); --duration-breathe: 6s; --duration-morph: 14s; --z-dropdown: 900; --z-header: 1000; --z-modal: 1100; --z-toast: 1200; --font-base: 'Nunito Sans', sans-serif; --font-display: 'Fraunces', serif; --gradient-bio: linear-gradient(135deg, #00E5FF 0%, #00FF41 50%, #FF9999 100%);`\n\n- **Contrast pairing:** Light backgrounds always pair with dark text and vice versa, in every theme. Bright accent fills (`--secondary`, `--accent`, `--primary`, `--warm`) used as button\u002Fsurface backgrounds must always carry `#001E3C` ink.\n- **Green usage restriction:** `--secondary` (#00FF41) is for large display text on `--bg-primary` dark, icons, borders, and glows only — never small body text; small green text in Light mode uses `--text-success` instead.\n- **No pure white:** where a near-white is needed, use `#FEFEFE`, never `#ffffff`.\n\n### 1.3 Mandatory Dark Mode\n- Dark tokens must be defined both under `html.dark` and `@media (prefers-color-scheme: dark)` (guarded so the `.dark` class always wins when set).\n- Header contains a visible **theme toggle** (Material Symbols `light_mode`\u002F`dark_mode` icon swap) with `aria-pressed` and a descriptive `aria-label` that updates with state.\n- Persist the choice in `localStorage` (key `morpho-theme`); fall back to `prefers-color-scheme` on first visit; apply before first paint to avoid a flash of wrong theme.\n- Dark mode should lean into bioluminescence: subtle glows (`box-shadow` with accent-tinted rgba or `color-mix()`) on cards, featured pricing tier, and hero blobs.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center` unless an exception is justified with a CSS comment** (`\u002F* exception: left-aligned reading column *\u002F`) — e.g., card text columns and footer link columns may use `flex-start`.\n- Mobile-first: single-column stacks at base; `min-width: 48em` (2-up feature grid, stacked hero), `min-width: 64em` (3-up rows, side-by-side hero), `min-width: 80em` (fluid max-width `72rem` container). No horizontal scrolling at any width down to 320px.\n\n### 1.5 Framework & Naming\n- No framework was requested: use clean, hand-written CSS in `style.css`, organized with native `@layer` (reset → tokens → base → components → utilities). Do not add Tailwind, other libraries, or utility-class soup.\n- **One naming convention: BEM** (`block__element--modifier`) across the entire deliverable — e.g., `.btn--primary`, `.hero__blob`, `.pricing-card--featured`. Never mix conventions.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Google Fonts via `\u003Clink>` with `preconnect`: **Fraunces** (display, headings, weights 400–700) and **Nunito Sans** (body, 400\u002F600\u002F700). Bind to `--font-display` and `--font-base`; headings use `clamp()` fluid sizing.\n- **Icons:** Google Material Symbols **Rounded** variant only, loaded via the standard Google Fonts stylesheet, used as `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">name\u003C\u002Fspan>`. Emoji as icons is forbidden.\n- **Exception:** Decorative inline SVG is permitted only for non-icon organic morphing shapes, must carry `aria-hidden=\"true\"`, and must contain no text or interactivity — never use SVGs for iconography.\n\n### 1.7 Biomimetic Visual Effects — Implementation Contract\n- **Breathing:** Define `@keyframes breathe` (scale 1 → 1.03 with soft opacity\u002Ffilter shift), `animation: var(--duration-breathe) var(--ease-standard) infinite alternate`, with staggered delays. Apply to hero blobs, the Final CTA aura, and the featured pricing halo.\n- **Fluid morphing:** Organic blobs via `@keyframes morph` animating `border-radius` between asymmetric organic values (e.g., `60% 40% 30% 70% \u002F 60% 30% 70% 40%`), duration `var(--duration-morph)`. Prefer this CSS technique over SVG morphing.\n- **Generative patterns:** Layered blurred radial-gradient \"cellular\" backdrops (`filter: blur(40px+)`, wrapped in `overflow: hidden` containers) with slow `background-position` drift. An optional decorative hero `\u003Ccanvas aria-hidden=\"true\">` driven by vanilla Canvas 2D (drifting translucent cells with soft connecting lines) is allowed; it must be DPR-aware, pause when the tab is hidden, and render nothing (static gradient fallback) under reduced motion.\n- **Physics-based movement:** Pointer-reactive parallax on hero layers via lerp\u002Fdamping (`translate3d`) in `script.js`; disabled for touch devices and reduced motion.\n- **clip-path:** Use organic `clip-path` shapes on the hero visual frame and Final CTA panel edges.\n- **Exception to the style spec's SMIL\u002FGSAP\u002FWebGL\u002Fphysics-library stack:** do not load any external animation, physics, or WebGL library — all motion must be CSS keyframes or vanilla JS inside `script.js`.\n\n---\n\n## 2. COMPONENT & SECTION SPECIFICATIONS\n\n### 2.1 Buttons\nAll states via classes on `.btn` (flex, `align-items: center; justify-content: center; gap: .5rem;` min touch target 44×44px, `--radius-md`):\n- **Variants:** `.btn--primary` (bio-gradient fill, `#001E3C` ink), `.btn--secondary` (transparent, 1.5px `--border-default`, `--text-primary` ink), sized `.btn--lg` for hero\u002FCTA.\n- **Hover:** brightness lift + `--shadow-md`, `cursor: pointer`. **Focus-visible:** distinct ring via `outline` (accent, 2px, offset 2px) plus glow — never remove it. **Active:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** `aria-busy=\"true\"`, interactions blocked, spinning Material `progress_activity` icon, button dimensions unchanged. **Disabled (`[disabled]`):** `opacity: .5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback styles using `--text-success`\u002F`--text-error` and matching borders for the email form submit.\n- This page contains **no destructive actions** — do not invent any.\n\n### 2.2 Cards\n- **Default:** `--bg-secondary` surface, 1px `--border-default`, `--radius-lg`, `--shadow-sm`, flex column with padding; content is static, so skeleton\u002Fempty states are explicitly **not required** — do not fake loading.\n- **Hover:** `translateY(-2px)` + `--shadow-md` + accent-tinted border glow, `transition: var(--transition-normal) var(--ease-organic)`.\n- **Focus-within:** border shifts to `--accent` when any child link\u002Fbutton is focused.\n\n### 2.3 Form & Input (Final CTA email capture)\n- **Structure:** `.input-group` flex container wrapping a visible `\u003Clabel>`, `\u003Cinput type=\"email\">`, and a dedicated error feedback element (`aria-live=\"polite\"`, linked via `aria-describedby`).\n- **States:** empty; focused (accent outline ring + glow); filled; **valid** (success border + `check_circle` icon); **invalid** (`aria-invalid=\"true\"`, `--border-error`, error message with `error` icon in `--text-error` — never color alone); disabled. Validate on blur + submit; on success: show button loading → `.is-success` → inline confirmation and toast (2.4). No backend — simulate with a short timeout.\n\n### 2.4 Feedback (No Modal)\n- This page requires **no modals or dropdown overlays — do not add any.**\n- **Toast:** a static `.toast` region in HTML (initially hidden), fixed bottom, `z-index: var(--z-toast)`, `aria-live=\"polite\"`, slide+fade entrance via CSS, auto-dismiss after 4s, Material `close` dismiss button, e.g. copy: \"You're on the list — your garden awaits.\"\n\n### 2.5 Page Sections (top to bottom)\n1. **Skip link + Header (sticky):** `\u003Cheader>` with translucent blurred backdrop (`backdrop-filter` with solid-color fallback), `--z-header`. Flex row: logo (Material `spa` icon + \"Morpho\" wordmark in Fraunces), center nav anchors (Features, How It Works, Pricing, FAQ) with organic growing underline on hover\u002Ffocus, right side: theme toggle + \"Start Growing\" `btn--primary` + mobile menu button. Below `48em`: nav collapses; the button (`aria-expanded`) toggles a flex-column panel — Esc closes it, focus moves in on open and returns to the button on close, overlay-click closes.\n2. **Hero:** Two-column flex (stacked on mobile). Left: pill eyebrow with a pulsing dot (\"Biomimetic Design System\"); single `\u003Ch1>` in Fraunces with `--gradient-bio` gradient text (e.g., \"Interfaces that grow themselves.\"); supporting copy; CTA row — \"Start Growing\" (primary, anchors to `#cta`) and \"Watch It Breathe\" (secondary, smooth-scrolls to `#how-it-works`); small trust line (\"Grown by 12,000+ design teams\"). Right: decorative visual (`aria-hidden` wrapper) — layered morphing, breathing gradient blobs with blur, a central glass \"cell\" containing a Material `spa` icon, optional generative canvas behind, pointer-parallax layers.\n3. **Features (3 cards):** Section heading (eyebrow + `\u003Ch2>` + lead). Flex row with wrap (equal-height stretch exception, commented). Cards per 2.2, each with a slowly morphing icon blob, `\u003Ch3>`, copy: **Generative Growth** (`forest`), **Living Motion** (`waves`), **Bio-Feedback** (`monitor_heart`).\n4. **How It Works (3 steps):** Horizontal flex on desktop, vertical on mobile, connected by a CSS pseudo-element gradient line with a traveling pulse. Each step: numbered organic chip, Material icon, `\u003Ch3>`, copy — **Plant** (`eco`): feed Morpho your design DNA; **Grow** (`account_tree`): algorithms branch tokens into components; **Adapt** (`all_inclusive`): deploy interfaces that keep breathing.\n5. **Testimonials (3 cards):** `\u003Cblockquote>` + `\u003Cfigcaption>` (fictional name\u002Frole), five Material `star` icons (`aria-hidden`) with visually-hidden \"Rated 5 out of 5\", CSS blob avatars with initials (decorative, `aria-hidden`).\n6. **Pricing (3 tiers):** **Seed** $0, **Bloom** $29\u002Fmo — `.pricing-card--featured` with `--gradient-bio` gradient border (double background technique), breathing chlorophyll halo, \"Most Grown\" coral badge, elevated shadow — and **Canopy** (Custom). Each: name, price, blurb, 4–5 feature rows with `check_circle` icons, CTA (primary for Bloom; secondary elsewhere) anchoring to `#cta`.\n7. **FAQ:** `\u003Ch2>` + 5 native `\u003Cdetails name=\"faq\">` (exclusive accordion; graceful multi-open fallback). Each `\u003Csummary>` styled as a full-width row with the question and a `expand_more` icon rotating 180° when open; animate open\u002Fclose smoothly via `script.js` (height\u002Fgrid transition) without ever breaking native keyboard semantics. Write real questions covering: designer control, how the nature algorithms work, animation performance, accessibility\u002Freduced motion, browser support.\n8. **Final CTA (`id=\"cta\"`):** Full-width panel with organic `clip-path` edges, blurred bio-gradient aura breathing behind it, `\u003Ch2>` (\"Ready to grow something alive?\"), copy, the 2.3 email form, small print (\"No spam. Just sunlight and water.\").\n9. **Footer:** Brand block (logo, one-liner, dynamic copyright year via JS with static fallback), plus four secondary link columns — Product (anchor links to page sections), Company, Resources, Legal (unspecified targets may use `href=\"#\"`) — every link with hover\u002Ffocus visible states.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography and spacing; no horizontal overflow at 320px; test both themes.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes. A single `@media (prefers-reduced-motion: reduce)` block must reduce animations\u002Ftransitions to near-zero, disable the canvas, parallax, and smooth scrolling.\n- **Scroll reveal:** subtle IntersectionObserver fade-up in `script.js`, gated behind a `.js` class added to `\u003Chtml>` (content fully visible without JS or when reduced motion is on).\n- **Accessibility:** semantic landmarks (`header`, `nav` with `aria-label`, `main`, `footer`), a single `\u003Ch1>` with logical heading order, skip link, `focus-visible` rings everywhere, AA contrast in both themes, state never communicated by color alone (icons + text), all interactions keyboard operable, `aria-live` for form errors and the toast, decorative layers `aria-hidden`.\n- **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js`. Only one `\u003Cscript>` reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. All Google Fonts\u002FMaterial Symbols via `\u003Clink>` in `\u003Chead>`. No other external assets, requests, or libraries.\n- **`script.js` scope (nothing more):** theme toggle + persistence, mobile menu, smooth anchor scrolling with focus management, hero parallax, optional canvas, scroll reveal, FAQ animation enhancement, email form validation + toast, footer year.\n- **Naming:** strict BEM throughout; **Copy:** all user-facing copy in English, original, coherent with the Morpho concept; placeholders (`href=\"#\"`) only for genuinely unspecified destinations.\n- **Definition of Done:** dark mode toggle persists and flashes nothing; full keyboard pass (nav, FAQ, form, toggle); reduced motion fully honored; zero console errors; no horizontal scroll; AA contrast in both themes; every state in 2.1–2.3 demonstrable on the page.\n",1791954993832]