[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-386-Material-Design-3-Material-You":3},"# System Prompt: Build a Material Design 3 \u002F Material You Landing Page\n\nYou are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-ready Landing Page** in a single attempt, following the specification below. The theme is **Material Design 3 \u002F Material You** (2021–present, Google): tonal palettes, larger rounded shapes, shape-morphing tokens, expressive spring-physics motion, and design tokens as the single source of truth.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling must live in a dedicated `style.css` file. **The `style=\"...\"` attribute is forbidden in HTML.**\n- Target all design properties, layout rules, and states via class or ID selectors only.\n- HTML must remain clean, semantic, and style-agnostic: changing the site's look requires touching only CSS, never the markup.\n\n**1.2 CSS Variables & Theme Tokens (Single Source of Truth)**\nDefine all tokens in `:root` and consume them everywhere via `var(--...)`. Use this Material 3 token set:\n\n- **Colors:** `--color-bg: #fef7ff`, `--color-surface: #fef7ff`, `--color-surface-container: #f3edf7`, `--color-surface-variant: #e7e0ec`, `--color-text: #1d1b20`, `--color-text-muted: #49454f`, `--color-primary: #6750a4`, `--color-on-primary: #ffffff`, `--color-secondary: #625b71`, `--color-tertiary: #7d5260`, `--color-outline: #79747e`, `--color-error: #b3261e`, plus `--color-success`, `--color-border`, `--color-accent`.\n- **Contrast pairing:** every light surface token must pair with the dark text tokens above; in dark mode, invert so dark surfaces pair with light text (`#fef7ff`-family text on `#1d1b20`-family surfaces). Never use pure `#ffffff` as a background — use `#fef7ff`\u002F`#fefefe`.\n- **Radius (M3 shape scale):** `--radius-xs: 4px`, `--radius-sm: 8px`, `--radius-md: 12px`, `--radius-lg: 16px`, `--radius-xl: 28px`, `--radius-pill: 999px`.\n- **Shadows (M3 elevation):** `--shadow-e1`, `--shadow-e2`, `--shadow-e3` as defined in the M3 spec (layered rgba shadows).\n- **Typography scale:** `--text-label-sm` through `--text-display-lg` (0.6875rem → 3.5625rem), bound to `--font-sans: 'Roboto', 'Roboto Flex', system-ui, sans-serif` and `--font-display: 'Roboto Flex', 'Roboto', system-ui, sans-serif`.\n- **Spacing:** `--space-1` through `--space-24` (4px → 96px).\n- **Motion:** `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`, `--ease-emphasized`, `--ease-spatial-expressive: cubic-bezier(0.38, 1.21, 0.22, 1)` (spring-like overshoot for expressive interactions), `--transition-fast: 120ms`, `--transition-normal: 240ms`.\n- **State layers:** `--state-hover: rgba(103,80,164,0.08)`, `--state-pressed: rgba(103,80,164,0.12)` — apply as overlay pseudo-elements on interactive components.\n- **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.\n\n**1.3 Mandatory Dark Mode**\n- Define dark mode tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `\u003Chtml>`\u002F`\u003Cbody>`: dark tonal surfaces (`#1d1b20`-family containers), light text (`#e6e0e9`-family), adjusted `--color-primary` to a lighter tonal step (e.g., `#d0bcff`) with `--color-on-primary: #381e72`-family dark pairing.\n- Provide a **visible theme toggle** button (sun\u002Fmoon Google Material Symbol) with correct `aria-pressed` and `aria-label` states.\n- Persist choice via `localStorage`; fall back to `prefers-color-scheme` on first visit. Theme switching must require no HTML restructuring — only variable overrides.\n\n**1.4 Flexbox Layout & Mobile-First**\n- Build all layout structures with Flexbox (`display: flex`).\n- **Every flex container defaults to `align-items: center`** unless an explicitly justified exception exists (document any exception in a CSS comment).\n- Mobile-first: rows convert to columns at small viewports; no horizontal scrolling at any breakpoint; fluid typography via `clamp()` on display\u002Fheadline sizes.\n\n**1.5 Framework**\n- Use Tailwind CSS utilities **or** clean custom CSS in `style.css` driven by the token variables above. All utilities must map back to tokens or generic reusable classes (`.btn`, `.card`, `.input-group`, `.nav`). Never hardcode hex values outside `:root`\u002Ftheme blocks.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Roboto**, **Roboto Flex**, and **Roboto Mono** from Google Fonts via `\u003Clink>` and bind to `--font-sans` \u002F `--font-display` \u002F `--font-mono`.\n- Use **Google Material Symbols** for every icon. **Raw inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. COMPONENT SPECIFICATIONS\n\n**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--tonal`, `.btn--danger`)**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; M3 filled buttons use `--radius-pill` (fully rounded), text buttons use `--radius-sm`.\n- Hover: state-layer overlay (`--state-hover`) + subtle elevation shift, `cursor: pointer`.\n- Focus-visible: distinct ring using `--color-primary` (`outline: 2px solid; outline-offset: 2px`).\n- Active\u002Fpressed: `--state-pressed` overlay + `transform: scale(0.97)` with `--ease-spatial-expressive`.\n- Loading: disables interaction, prevents double-clicks, shows an animated CSS spinner or spinning Google Material Symbol without changing button dimensions.\n- Disabled: `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- Success\u002FError: temporary feedback via `--color-success` \u002F `--color-error` state layers.\n- `.btn--danger` must be visually distinct in both light and dark themes.\n\n**2.2 Cards (`.card`)**\n- Default: `--color-surface` or `--color-surface-container` background, `1px solid var(--color-outline)` at 40% or `--shadow-e2`, `--radius-lg`\u002F`--radius-xl` (M3 expressive large rounding).\n- Hover: elevation shift to `--shadow-e3` + `transform: translateY(-2px)` with spring easing.\n- Focus-within: border highlights `--color-primary` when a child link\u002Fbutton receives focus.\n- Skeleton loading: shimmer animation in CSS (no layout jumps).\n- Empty states: Google Material Symbol icon + guidance text fallback.\n\n**2.3 Forms & Inputs (`.input-group`)**\n- States: empty, focused (2px `--color-primary` outline ring), filled, valid (success border\u002Ficon), invalid (`--color-error` border, error icon, error text), disabled, read-only.\n- Structure: flex container wrapping label, input, and a dedicated error feedback element with `aria-live=\"polite\"`.\n\n**2.4 FAQ Accordions \u002F Modals**\n- FAQ: semantic `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA-compliant custom disclosure; open\u002Fclose animated via CSS transitions with `--ease-emphasized`; chevron Material Symbol rotates.\n- Any modal\u002Fdialog: centered flex container, backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click, animated open\u002Fclose states.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.\n- **Smooth M3 Expressive motion:** all state changes transition with `var(--transition-normal)` and M3 easing curves; respect `@media (prefers-reduced-motion: reduce)` by disabling transforms\u002Ftransitions.\n- **Accessibility:** sufficient contrast in **both light and dark modes** (validate before finishing). Never rely on color alone — pair icons\u002Ftext with state. Semantic HTML5 landmarks (`header`, `main`, `section`, `footer`, `nav`), correct ARIA roles\u002Flabels, logical focus order, full keyboard operability, `aria-live` regions for dynamic feedback.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Shape morphing:** interactive cards\u002Fbuttons may morph radius on hover (e.g., `--radius-lg` → `--radius-xl`) using `transition: border-radius` — a signature M3 Expressive move.\n\n---\n\n## 4. REQUIRED SECTIONS (all user-facing copy in **English**)\n\n1. **Hero** — display-size headline (`--text-display-lg`, `clamp()`-fluid), subcopy, primary filled CTA + tonal secondary CTA, decorative M3 tonal blob shapes (pure CSS, `--radius-xl`\u002F`--radius-pill`, blurred gradients).\n2. **Features** — 3 cards, each with a Material Symbol icon, title, body copy.\n3. **How It Works** — 3 numbered steps in a responsive flex row\u002Fcolumn with connector styling.\n4. **Testimonials** — 3 quote cards with avatar placeholder (initials in a tonal circle), name, role.\n5. **Pricing** — 3 tiers; middle tier highlighted with `--color-primary` filled card and \"Most popular\" badge (`.badge`, `--radius-pill`); each tier lists features with check Material Symbols and a CTA button.\n6. **FAQ** — 5–6 accessible accordions.\n7. **Final CTA** — full-width tonal container (`--color-surface-container`), headline + primary button.\n8. **Footer** — brand block, secondary link columns, social icons (Material Symbols), copyright line.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate. Only a single deferred `\u003Cscript src=\"script.js\" defer>` reference in HTML; no inline `\u003Cscript>` blocks.\n- **Naming:** one consistent convention (BEM, matching the `.btn--primary` pattern above) across the entire deliverable. Never mix conventions.\n- **No unrequested placeholders:** write real, meaningful English copy for every section; no lorem ipsum.\n- **JS scope:** theme toggle with `localStorage` persistence, FAQ accordion behavior (if not native `\u003Cdetails>`), and button loading-state demo wiring only — no other behavioral logic unless requested.\n\nProduce the complete, finished code now.\n",1791954986043]