[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-072-Ghibli-Inspired-Narrative-Map":3},"**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt — full files, no partial output, no follow-up questions.\n\n**Project Brief:** A landing page for **StoryTrail**, a fictional app that turns journeys and ideas into hand-painted narrative maps. Theme: **Ghibli-Inspired Narrative Map** — nostalgic, whimsical, soft, anime-fantasy era. The page must feel like a hand-painted story map: digital watercolor washes, soft outlines, character vignettes, organic connecting paths, soft diffuse natural light, and a warm ambient glow.\n\n**Required sections (in order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links. A slim sticky site header is permitted as page chrome (it houses the anchor nav and the mandatory theme toggle).\n\n---\n\n## 0. THEME DIRECTION & VISUAL LANGUAGE\n\n**0.1 Art Direction Summary**\nGhibli-style landing page, watercolor background, narrative map, whimsical design, soft colors, hand-painted look, nature-inspired. All decorative artwork must be drawn with **pure CSS** — layered radial gradients, blurred pseudo-element blobs, asymmetric `border-radius` shapes, and soft box-shadow glows. Any element carrying decorative painted layers must use `position: relative` (per the locked spec) so its pseudo-elements anchor correctly.\n\n**0.2 Locked Design Tokens (bind exactly to CSS variables)**\n- Body defaults: `background-color: #FAF8F2; color: #2B2B2B; font-family: 'Quicksand', sans-serif;`\n- Elevation: `--shadow-md: 0 4px 15px rgba(0,0,0,0.1);` Rounding: `--radius-md: 15px;`\n- Full token set in `:root`: `--primary: #212635` (deep indigo accent), `--secondary: #7CB342` (grass green), `--accent-sky: #4FC3F7`, `--accent-pink: #F48FB1`, `--bg-primary: #FAF8F2` (warm paper cream — never pure white; use `#fefefe` if a near-white is required), `--bg-secondary` (slightly deeper cream, e.g. `#F4EFE4`), `--text-primary: #2B2B2B`, `--text-secondary` (warm muted gray, e.g. `#6E675C`), `--text-success` (darkened green, e.g. `#558B2F`), `--text-error` (warm red, e.g. `#C62828`), `--border-default` (e.g. `rgba(43,43,43,0.14)`), `--border-success`, `--border-error`.\n- Shape & motion: `--radius-sm: 8px; --radius-lg: 26px;` plus one organic blob radius for decorative shapes; `--shadow-sm: 0 2px 8px rgba(43,43,43,0.08); --spacing-gap; --transition-fast: 150ms; --transition-normal: 300ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);`\n- Stacking: `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**0.3 Watercolor Techniques (CSS-only)**\n- Backgrounds: layered translucent `radial-gradient` washes in green, sky blue, and soft pink over the cream base.\n- Painted blobs: pseudo-elements with asymmetric `border-radius` and `filter: blur()` at low opacity.\n- Warm ambient glow: one large soft radial gradient of warm light (sun-like) in the hero and final CTA.\n- Soft outlines: 1–2px low-opacity borders only — never hard black lines.\n- **Contrast guard:** `#4FC3F7` and `#F48FB1` are decorative-only (washes, icon badges, large shapes) — never body text. Use darkened variants (e.g. `#0277BD`) for any text-level blue.\n\n**0.4 Narrative Map Motif**\n- The page reads as a journey: an organic **dashed trail** (dashed borders on curved pseudo-elements) visually connects the Hero → the How It Works waypoints → the Final CTA.\n- Testimonials are \"traveler's notes\": slightly rotated cards with circular initial-based avatars framed by watercolor gradient rings.\n\n**0.5 Typography & Icons**\n- Google Fonts: **Quicksand** (weights 400–700) as `--font-base` for all text. One optional accent Google Font (e.g., Caveat) strictly for small hand-lettered map labels and signatures.\n- Icons: **Google Material Symbols — Rounded** style only (e.g., `map`, `explore`, `forest`, `eco`, `auto_awesome`, `cloud`, `edit_note`, `favorite`, `check_circle`, `chevron_right`). Explicitly forbidden: inline SVGs, local icon files, emoji used as icons.\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:** all design properties, layout rules, and states are targeted via class or ID selectors in `style.css`.\n- **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic; re-theming the site must require editing only the CSS file.\n\n**1.2 CSS Variables & Theme Tokens**\n- All visual tokens live in `:root` (and theme classes) exactly as listed in Section 0.2.\n- **Contrast Pairing:** every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced for every theme, not just the default.\n- **Light Mode Background:** the warm cream `#FAF8F2` is the default; never `#ffffff` — use `#fefefe` where a near-white is genuinely needed.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class; both switch all `--bg-*` \u002F `--text-*` variables seamlessly with zero HTML restructuring.\n- **Persistence:** store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and expose a visible toggle with correct `aria-pressed` \u002F `aria-label` state.\n- Dark palette direction — \"Moonlit Forest\": deep indigo paper derived from `#212635` (e.g., `--bg-primary: #1B2130; --bg-secondary: #252C3F; --text-primary: #F5F0E4; --text-secondary: #BDB7A9;` borders `rgba(245,240,228,0.14)`), with softened watercolor washes and a cool moonlit glow — never harsh black.\n- **Exception clause:** the source style spec marks dark mode \"✗ No\"; dark mode remains mandatory per project standards, but it must be implemented as this gentle moonlit variant, with the cream light mode as the default presentation.\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 explicitly justified in the CSS.\n- Mobile-first: rows collapse to columns on small viewports, wrapping is allowed, and horizontal scrolling is impossible at any viewport width.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (or clean custom CSS composed with `@layer` \u002F `@apply`). All utilities must map back to CSS variables or generic reusable class names: `.btn`, `.card`, `.input-group`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Include Google Fonts `\u003Clink>` \u002F `@import` tags for Quicksand (plus the optional accent font), bound to `--font-base`.\n- Use Google Material Symbols for every icon. Inline SVGs and local icon files are explicitly forbidden.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component**\nStyle all states via CSS classes:\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` with a minimum touch target of 44×44px.\n- **Hover:** brightness\u002Fshadow shift plus a soft warm glow shadow, with `cursor: pointer`.\n- **Focus:** distinct focus ring built from CSS variables (`outline` \u002F `box-shadow`), clearly visible for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n- **Loading:** disables interactions, prevents double-clicks, and renders a CSS spinner or animated Material Symbol without distorting button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states driven by `--text-success` \u002F `--text-error`.\n- **Variants:** `.btn--primary` (indigo `#212635` bg, cream text), `.btn--secondary` (soft outlined), `.btn--danger` (visually distinct in both light and dark themes).\n\n**2.2 Card Component**\n- **Default:** flexible Flexbox layout, `--bg-secondary` fill, subtle `--border-default`, `--shadow-sm`, `--radius-md`.\n- **Hover:** elevation shift plus `transform: translateY(-2px)`.\n- **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** shimmer animation defined purely in CSS, with no layout jumps.\n- **Empty State:** structured fallback with a Google Material icon and clear guidance text.\n- Feature cards each carry one unique watercolor wash (green \u002F blue \u002F pink), an icon badge, a title, copy, and a text link.\n\n**2.3 Form & Input Requirements**\n- **States:** empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border, red text, error icon, message), disabled, read-only.\n- **Structure:** a flex container wrapping a label, the input field, and a dedicated error-feedback container announced via `aria-live=\"polite\"`.\n- Applied to the Final CTA email capture (and any footer newsletter field).\n\n**2.4 Modal \u002F Popup Requirements**\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions.\n- **UX Features:** centered flex container (`align-items: center`), backdrop overlay, Google Material icon close button, keyboard focus trapping, and closing via `Esc` or overlay clicks, layered with `--z-modal`.\n- If no modal is used, the FAQ must follow the accordion pattern specified in Section 5.6.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid `clamp()` typography and breakpoints with zero horizontal overflow.\n- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes, fully respecting `prefers-reduced-motion` (disable lifts, shimmer, and glow pulses).\n- **Accessibility (a11y):** sufficient contrast in both light and dark modes; never rely on color alone to communicate state; semantic HTML5 landmarks (`header`, `main`, `section`, `footer`) with a single `h1` and logical heading order; correct ARIA roles\u002Flabels on custom widgets (accordion, toggle, toast, mobile menu); logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, toasts, and loading states.\n- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive Actions:** any `.btn--danger` \u002F delete action must be visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference (`\u003Cscript src=\"script.js\" defer>`). No inline styles.\n- **Naming Convention:** one consistent convention — **BEM** (`block__element--modifier`, e.g., `.hero__title`, `.feature-card__icon`, `.pricing-card--featured`). Tailwind utilities may be composed via `@apply` inside `style.css` only — never scattered through the HTML. Never mix conventions.\n- **JavaScript Scope:** theme toggle + `localStorage` persistence, FAQ accordion, form validation with inline feedback + toast, and the mobile menu toggle — all ARIA-correct.\n- **No Unrequested Placeholders:** write real, polished, on-theme **English** copy for StoryTrail — lorem ipsum is prohibited. Placeholders are allowed only where content was genuinely left unspecified (none expected here).\n- Load Google Fonts and Material Symbols in `\u003Chead>`.\n\n---\n\n## 5. PAGE SECTION SPECIFICATIONS\n\n**5.0 Site Header (chrome):** sticky, translucent cream with backdrop blur; \"StoryTrail\" wordmark with a small `map` icon; anchor links (Features, How It Works, Testimonials, Pricing, FAQ); the theme toggle (sun\u002Fmoon Material icons with `aria-pressed` \u002F `aria-label`); collapses to a keyboard-operable hamburger menu on mobile (layered with `--z-dropdown`).\n\n**5.1 Hero:** full-bleed watercolor wash — sky-blue upper wash, grass-green meadow lower wash, warm sun glow, blurred soft-pink blobs; `h1` headline + subheadline about turning journeys into hand-painted maps; two CTAs (`.btn--primary` \"Begin Your Story\", `.btn--secondary` \"See How It Works\"); a hand-lettered map-label accent; the dashed narrative trail begins here and flows toward the next section; a subtle scroll cue.\n\n**5.2 Features — 3 cards:** flex row with wrap → single column on mobile; each card: unique watercolor wash, Material icon badge (`edit_note`, `map`, `auto_awesome` or similar), title, 2–3 lines of copy, text link; full hover \u002F focus-within behavior per 2.2.\n\n**5.3 How It Works — 3 map waypoints:** numbered circular badges (01 \u002F 02 \u002F 03) with Material icons, connected by a curved dashed trail (pseudo-elements; vertical on mobile); each step card offset and rotated ≤2deg for a hand-placed feel; step titles and copy (e.g., chart your world → paint your path → share your story).\n\n**5.4 Testimonials — traveler's notes:** 3 quote cards with slight rotation; circular initial avatars framed by watercolor gradient rings; quote, name, and role; optional hand-lettered signature accent.\n\n**5.5 Pricing — 3 tiers:** \"Wanderer\" (free), \"Explorer\" (featured), \"Storyteller\"; the featured tier is elevated (deeper shadow, \"Most Loved\" badge with pink wash, subtle scale); each card: tier name, price + period, feature list with `check_circle` icons, and a CTA button demonstrating hover \u002F focus \u002F active states.\n\n**5.6 FAQ — accordion:** 5–6 questions; button + panel pattern with `aria-expanded` and `aria-controls`; chevron icon rotates on toggle; CSS-animated open\u002Fclose (e.g., `grid-template-rows: 0fr → 1fr`); fully keyboard operable.\n\n**5.7 Final CTA:** sunset watercolor wash (warm glow, pink\u002Famber gradients); headline + supporting line; email capture form per 2.3 with inline validation, a loading button state, and success feedback (button success state + `aria-live` toast \"Your map awaits!\" layered with `--z-toast`).\n\n**5.8 Footer:** deeper cream \u002F indigo-tinted band; wordmark + tagline; secondary link groups (Product, Company, Support); Material-icon social buttons with `aria-label`s; copyright line; all links with distinct hover and focus states.\n\n**Global:** smooth anchor scrolling with `scroll-margin-top` on sections, respecting `prefers-reduced-motion`.\n\n**Final instruction:** generate the complete code now — `index.html`, `style.css`, `script.js` — in a single attempt, with no placeholders and no omitted sections.\n",1791954981190]