[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-378-macOS-Vibrancy-Translucency":3},"**ROLE:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page specified below on the first attempt. Write **all user-facing copy in English**. The source style spec declares light mode only and explicitly requires you to **design and validate both light and dark modes before considering the work complete** — dark mode is mandatory, not optional.\n\n**PRODUCT & COPY:** Invent one coherent fictional product (suggested: a macOS-native productivity\u002Fdesktop app) and write realistic, concise, Apple-toned marketing copy for it. No lorem ipsum.\n\n---\n\n# 0. PAGE BLUEPRINT — SECTION-BY-SECTION REQUIREMENTS\n\nEvery layout container is Flexbox, mobile-first, and defaults to `align-items: center` unless an exception is justified below. No horizontal scrolling at any viewport width.\n\n**0.0 Global Chrome**\n- Floating glass navigation bar, sticky at top, centered in a max-width container: brand mark (Material Symbol + wordmark), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle icon button, primary CTA (\"Get Started\" → anchors to Pricing).\n- At ≤ 820px, links collapse into a \"menu\" icon button that opens a glass dropdown panel (material tier *menu*, `--z-dropdown`): `aria-expanded`, `aria-controls`, Esc closes, click-outside closes, focus returns to the trigger.\n- Include a skip-to-content link as the first focusable element.\n\n**0.1 Hero**\n- Flex column on mobile → row on desktop (text block + visual). Contains: glass badge pill (accent dot + short label), display headline (`--font-display`, `--text-4xl`\u002F`--text-5xl`, tight tracking), muted subhead, two CTAs (`.btn--primary` + secondary `.btn` linking to How It Works).\n- Visual: a glass \"app window\" (material tier *HUD*) — decorative traffic-light dots (define `--tl-red: #ff5f57; --tl-yellow: #febc2e; --tl-green: #28c840;` as local tokens, `aria-hidden`), a fake sidebar, and skeleton-style content bars. Mark the whole window `role=\"img\"` with an `aria-label`.\n\n**0.2 Features — 3 Cards**\n- Section heading + subheading, then 3 `.card` blocks (flex wrap, `flex: 1 1 300px`): Material Symbol icon inside a glass circle, title, description, \"Learn more\" link. Cards are interactive: hover lift + `:focus-within` highlight (see 2.2).\n\n**0.3 How It Works — 3 Steps**\n- 3 steps in a flex row (desktop) → column (mobile): numbered glass badge (01\u002F02\u002F03), step title, description. Connect steps with a decorative hairline on desktop only (hide on mobile).\n\n**0.4 Testimonials**\n- 3 glass cards: quote, avatar (glass circle with initials — no external images), name, role, 5 star Material Symbols in `--color-accent` (`aria-hidden` + visually-hidden \"Rated 5 out of 5\" text). These cards are **non-interactive**: no hover lift, no false affordance.\n\n**0.5 Pricing — 3 Tiers**\n- 3 cards: tier name, price, feature list (check Material Symbols in `--color-success`), CTA button. Middle tier is featured: `.pricing-card--featured` uses material tier *HUD* (`--color-surface-strong` + `--vibrancy-strong` + `--shadow-lg`), an accent \"Most Popular\" badge, and the `.btn--primary` CTA; side tiers use default `.btn`. Clicking any CTA triggers the loading → success button flow (see 2.1).\n\n**0.6 FAQ**\n- 5–6 items using native `\u003Cdetails>`\u002F`\u003Csummary>` inside glass panels. Summary: flex, `align-items: center`, `justify-content: space-between`, `expand_more` icon rotating 180° when `[open]`, hover background shift, `:focus-visible` ring. Content fades\u002Fslides in. Optional JS: close siblings when one opens.\n\n**0.7 Final CTA**\n- Full-width glass panel (tier *panel*): headline, subhead, and an email capture form (see 2.3) — label, `.input`, submit `.btn--primary`, and a reserved error\u002Ffeedback container with `aria-live=\"polite\"`.\n\n**0.8 Footer**\n- Flex-wrap columns: brand + tagline, link groups (Product, Company, Resources), social icon buttons (Material Symbols, 44×44px, `aria-label` each). Bottom bar: copyright, Privacy\u002FTerms secondary links (destinations were not specified — `href=\"#\"` stubs are permitted here and only here). Top hairline border, muted text.\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`. **Forbidden:** `style=\"...\"` attributes, inline `\u003Cstyle>` blocks, presentational HTML attributes, inline SVGs.\n- Style exclusively via class\u002FID selectors. HTML stays semantic and style-agnostic — retheming must require editing CSS only.\n- Decorative elements (traffic lights, connectors, shimmer bars) are empty spans\u002Fdivs or pseudo-elements, `aria-hidden`.\n\n**1.2 CSS Variables & Theme Tokens**\nAdopt the source token set verbatim as the light theme, extended with the mandatory additions below. All values are CSS variables in `:root` — no hardcoded hexes in component rules.\n\n```css\n:root {\n  \u002F* color — light (source spec) *\u002F\n  --color-bg: #dfe6ee;\n  --color-surface: rgba(255,255,255,0.55);\n  --color-surface-strong: rgba(255,255,255,0.78);\n  --color-border: rgba(0,0,0,0.08);\n  --color-text: #1d1d1f;\n  --color-text-muted: rgba(29,29,31,0.6);\n  --color-primary: #007aff;\n  --color-on-primary: #ffffff;\n  --color-accent: #ff9f0a;\n  --color-scrim: rgba(255,255,255,0.4);\n  \u002F* mandatory additions *\u002F\n  --color-success: #34c759;\n  --color-error: #ff3b30;\n  --color-border-success: rgba(52,199,89,0.55);\n  --color-border-error: rgba(255,59,48,0.55);\n  --surface-fallback: #f2f5f9;\n  \u002F* radius \u002F shadow \u002F blur \u002F fonts \u002F type scale \u002F spacing: use source values *\u002F\n  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;\n  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);\n  --shadow-md: 0 8px 24px rgba(0,0,0,0.10);\n  --shadow-lg: 0 20px 48px rgba(0,0,0,0.14);\n  --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.6);\n  --blur-backdrop: 20px; --blur-backdrop-strong: 30px;\n  --vibrancy: blur(var(--blur-backdrop)) saturate(1.8);\n  --vibrancy-strong: blur(var(--blur-backdrop-strong)) saturate(1.8);\n  --font-sans: 'Inter', -apple-system, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;\n  --font-display: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;\n  --font-mono: 'Roboto Mono', 'SF Mono', ui-monospace, monospace;\n  \u002F* motion + stacking (mandatory additions) *\u002F\n  --transition-fast: 150ms; --transition-normal: 250ms;\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  --z-dropdown: 1000; --z-modal: 1100; --z-toast: 1200;\n  \u002F* wallpaper *\u002F\n  --bg-image: linear-gradient(160deg, #a7c6f2 0%, #dfe6ee 45%, #f3d9c4 100%);\n}\n```\n\n- **Signature material recipe** — every glass surface combines: translucent background token + `backdrop-filter: var(--vibrancy)` (with `-webkit-` prefix) + 1px `--color-border` hairline + `--shadow-inset-hi` inner highlight. `body` carries `background: var(--bg-image); background-attachment: fixed;` so materials sample the wallpaper.\n- **Material tiers:** *menu* (nav, dropdown) = `--color-surface` + `--vibrancy` + `--shadow-sm`; *panel* (cards, FAQ, form) = `--color-surface` + `--vibrancy` + `--shadow-md`; *HUD* (badges, toggle, featured pricing, hero window) = `--color-surface-strong` + `--vibrancy-strong` + `--shadow-md`\u002F`--shadow-lg`.\n- **Fallbacks (mandatory):** `@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))` and `@media (prefers-reduced-transparency: reduce)` both swap glass surfaces to solid `var(--surface-fallback)` and disable filters.\n- **Contrast pairing:** every light background token pairs with dark text tokens, every dark background token with light text tokens — enforced in both themes. Never use `#ffffff` as a page background; the wallpaper `#dfe6ee` is the light base; use `#fefefe` if a near-white is ever needed.\n\n**1.3 Mandatory Dark Mode Support**\n- Declare tokens in this cascade order: (1) `:root` light; (2) `@media (prefers-color-scheme: dark) { :root { …dark tokens… } }`; (3) `.light { …light tokens… }` and `.dark { …dark tokens… }` so explicit user choice always wins. Also set `color-scheme: light` \u002F `color-scheme: dark` accordingly.\n- Reference dark tokens (adapt if you verify better contrast):\n```css\n--color-bg: #1c1c1e;\n--color-surface: rgba(44,44,46,0.55);\n--color-surface-strong: rgba(58,58,60,0.78);\n--color-border: rgba(255,255,255,0.12);\n--color-text: #f5f5f7;\n--color-text-muted: rgba(245,245,247,0.6);\n--color-primary: #0a84ff;\n--color-accent: #ff9f0a;\n--color-scrim: rgba(0,0,0,0.45);\n--color-success: #30d158; --color-error: #ff453a;\n--color-border-success: rgba(48,209,88,0.55);\n--color-border-error: rgba(255,69,58,0.55);\n--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);\n--shadow-md: 0 8px 24px rgba(0,0,0,0.45);\n--shadow-lg: 0 20px 48px rgba(0,0,0,0.55);\n--shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.08);\n--bg-image: linear-gradient(160deg, #16233f 0%, #1c1c1e 45%, #33241b 100%);\n--surface-fallback: #26282c;\n```\n- **Theme toggle:** visible icon button in the nav using Material Symbols `dark_mode`\u002F`light_mode`. `script.js` resolves theme on load: `localStorage.getItem('theme')` → apply `.dark`\u002F`.light` to `\u003Chtml>`; no stored value → let the media query decide. The toggle flips the class, persists to `localStorage`, and maintains `aria-pressed` + a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- **Validation requirement (from source spec):** verify text contrast against composited surfaces in **both** modes before finishing (≥ 4.5:1 body text, ≥ 3:1 large text and UI borders). If `#007aff` + white fails for your text sizes, darken the light-mode primary (e.g., `#0066d6`) — never ship failing contrast.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- `display: flex` with `align-items: center` is the default for every container; justify exceptions in a CSS comment (e.g., form fields use `flex-direction: column; align-items: stretch`).\n- Rows convert to columns at ≤ 768px; nav collapses at ≤ 820px. Fluid type via `clamp()` on the display scale. No fixed widths that can overflow; no horizontal scroll.\n\n**1.5 Styling Approach**\n- Plain modern CSS (no framework). One naming convention only: **BEM** (`block__element--modifier`). The source base classes — `.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge` — are the canonical blocks; extend BEM-style (`.nav__link`, `.card__title`, `.pricing-card--featured`, `.faq__item`). Never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Google Fonts** via `\u003Clink>` with `preconnect`: Inter (weights 400–800) bound to `--font-sans`\u002F`--font-display`; Roboto Mono if monospace is used.\n- **Exception clause:** the source spec's Apple system stack (`-apple-system`, `'SF Pro Text'`, `'SF Pro Display'`, `'SF Mono'`) is retained as fallback families *after* the Google Font inside the font variables — Google Fonts remain the mandatory primary.\n- Icons: **Google Material Symbols (Rounded)** via the official stylesheet. Inline SVGs and local icon files are forbidden. Decorative icons get `aria-hidden=\"true\"`; every icon-only control has an `aria-label`.\n\n---\n\n# 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons — all states as CSS classes**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min-height 44px (44×44px touch target), `--radius-md`, 500 weight, glass material recipe, `transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)`.\n- **Hover:** `--shadow-md` + subtle `filter: brightness(1.03)`, `cursor: pointer`.\n- **Focus-visible:** `outline: 2px solid var(--color-primary); outline-offset: 2px;`.\n- **Active:** `transform: scale(0.97);`.\n- **Loading (`.is-loading`):** `aria-busy=\"true\"`, pointer-events disabled to prevent double-clicks, label hidden via opacity, CSS border spinner (currentColor) absolutely centered — button dimensions must not change.\n- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback states driven by `--color-success`\u002F`--color-error` with a Material Symbol icon swap.\n- **Variants:** `.btn--primary` (solid `--color-primary` bg + `--color-on-primary` text, no translucency); `.btn--danger` (defined in the stylesheet from `--color-error`, visually distinct in both themes, even if unused in copy).\n\n**2.2 Cards**\n- **Default:** glass material recipe (tier *panel*), `--radius-lg`, `padding: var(--space-6)`, flex column.\n- **Hover (interactive cards only):** `transform: translateY(-2px);` + elevation shift to `--shadow-lg`.\n- **Focus-within:** border-color shifts to `--color-primary` + 3px ring when a child link\u002Fbutton is focused.\n- **Loading (skeleton):** define a `.skeleton` shimmer (sweeping `--color-scrim` gradient keyframes) — use it for the hero window's fake content bars.\n- **Empty state:** define a `.card--empty` pattern (Material Symbol + guidance text) in the stylesheet for system completeness; not required in markup.\n\n**2.3 Forms & Inputs**\n- **States:** empty, focused (source ring: `--color-primary` border + `color-mix` 3px glow), filled, valid (`.input--valid`: success border + check icon), invalid (`.input--invalid`: error border, error icon, red message), `[disabled]`, `[readonly]`.\n- **Structure:** `.field` = flex column (`align-items: stretch` — justified exception), label, `.input`, and a dedicated `.field__error` container with **reserved min-height** (no layout shift), `aria-live=\"polite\"`, wired via `aria-describedby` + `aria-invalid`.\n- **Submit flow (Final CTA):** click → `.is-loading` → validate email → invalid: `.input--invalid` + message; valid: `.is-success` button state + polite live-region confirmation. Prevent double submission.\n\n**2.4 Modals**\n- No modal is required for this page. If you introduce any overlay, it must use: centered flex container, `--color-scrim` backdrop, Material Symbol close button, focus trap, Esc + overlay-click close, `--z-modal`.\n\n---\n\n# 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, breakpoints per 1.4, zero horizontal overflow.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; fully disabled under `@media (prefers-reduced-motion: reduce)`.\n- **Accessibility (a11y):** semantic HTML5 landmarks (`header`, `nav` with `aria-label`, `main`, `footer`), one `h1`, logical heading order, full keyboard operability, visible focus everywhere, `aria-live` for all dynamic feedback, ≥ 4.5:1 contrast in both modes, and **never color alone** to communicate state (pair error\u002Fsuccess colors with icons + text).\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Anchors:** smooth in-page scrolling (respecting reduced motion) with `scroll-margin-top` on sections to clear the sticky nav.\n- **Optional:** IntersectionObserver reveal animations (opacity\u002Ftranslate) — guarded by reduced-motion and fully visible when JS is absent.\n\n---\n\n# 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no inline script blocks, no inline styles, no inline SVGs.\n- **`\u003Chead>`:** `lang=\"en\"`, title, meta description, Google Fonts preconnect + link, Material Symbols Rounded stylesheet.\n- **`script.js` scope (behavior only):** theme toggle with `localStorage` persistence + `prefers-color-scheme` fallback; mobile nav dropdown (aria + Esc + outside click); optional FAQ single-open; email validation\u002Fsubmit with loading → success states; smooth anchor scrolling; optional guarded reveal animations. Nothing else.\n- **Naming:** BEM only, ASCII\u002FEnglish class names, file names, and variable names throughout.\n- **Copy:** realistic English marketing copy for the invented product — no lorem ipsum; `href=\"#\"` stubs permitted only for the unspecified footer secondary links.\n- **Final validation gate:** render and verify both light and dark themes, all button\u002Finput\u002Fcard states, keyboard-only navigation, and mobile widths before delivering.\n",1791954985758]