[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-427-3x3-Grid-Design":3},"You are a **Senior Frontend Engineer and Expert UI Designer**. Build a complete, production-ready landing page in a single attempt — every section, every component state, and both color themes fully working. No stubs, no TODOs, no partial deliveries.\n\n**Theme:** \"3x3 Grid Design\" — Structured, Modular, Uniform, Grid-Based. Modern Digital Layout. Full Light Mode + Full Dark Mode. The aesthetic is a rigid, Instagram-feed\u002Fmoodboard-style system: content organized in uniform, thin-bordered boxes on a strict grid, white\u002Fgrey neutrals with a single blue accent.\n\n---\n\n## 0. Theme Specification & Page Map\n\n**0.1 Grid Visual Contract (mandatory)**\n- Signature layout: strict CSS Grid — `grid-template-columns: repeat(3, minmax(0, 1fr))`, uniform `gap: var(--spacing-gap)` (16px), thin `1px solid var(--border-default)` borders on every cell, `border-radius: var(--radius-md)` (8px), cell background `var(--bg-secondary)`, cell padding `1.5rem`.\n- Grid-item hover: `transform: scale(1.02)` plus `box-shadow: var(--shadow-sm)` (0 1px 3px rgba(0,0,0,0.05)), with `transition: transform var(--transition-normal) var(--ease-standard), box-shadow var(--transition-normal) var(--ease-standard)` (200ms). Apply the scale to all cells per the theme, but `cursor: pointer` only on genuinely interactive cells.\n- Scroll reveal: every grid cell fades in as it enters the viewport (mechanics in §3.2).\n- Always use `minmax(0, 1fr)` for grid tracks (never bare `1fr`) and `min-width: 0` on cells so long content can never cause horizontal overflow.\n\n**0.2 Color Palette → Token Mapping (define exactly)**\nPalette: Pure White #FFFFFF, Soft Grey #F5F5F5, Charcoal #333333, Accent Blue #2563EB, Light Grey #E5E5E5, Medium Grey #9CA3AF, Dark Grey #1F2937, Accent Coral #FF6B6B.\n\nDefine in `:root` (light theme):\n```css\n:root {\n  --primary: #2563EB;         \u002F* Accent Blue — buttons, links, featured tier *\u002F\n  --primary-hover: #1D4ED8;\n  --primary-text: #2563EB;    \u002F* accent text\u002Ficons\u002Flinks — AA on light surfaces *\u002F\n  --secondary: #FF6B6B;       \u002F* Accent Coral — badges, highlights, danger *\u002F\n  --bg-primary: #F5F5F5;      \u002F* Soft Grey — page background *\u002F\n  --bg-secondary: #FEFEFE;   \u002F* cell\u002Fcard surface *\u002F\n  --text-primary: #333333;    \u002F* Charcoal *\u002F\n  --text-secondary: #9CA3AF;  \u002F* Medium Grey — see usage constraint below *\u002F\n  --text-on-primary: #FEFEFE; \u002F* text on blue fills *\u002F\n  --text-success: #16A34A;  --text-error: #DC2626;\n  --border-default: #E5E5E5; --border-success: #16A34A; --border-error: #DC2626;\n  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;\n  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);\n  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);\n  --spacing-gap: 16px;\n  --transition-fast: 150ms; --transition-normal: 200ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  --font-base: 'Inter', system-ui, -apple-system, sans-serif;\n  color-scheme: light;\n}\n```\nDark theme overrides (duplicated under `.dark` and under `@media (prefers-color-scheme: dark)` gated with `html:not(.light):not(.dark)` — see §1.3):\n```css\n--primary-hover: #3B82F6;  --primary-text: #60A5FA; \u002F* lighter accent step, AA on dark *\u002F\n--bg-primary: #1F2937;    --bg-secondary: #374151;  \u002F* elevated surface, derived step of #1F2937 *\u002F\n--text-primary: #F5F5F5;  --text-secondary: #9CA3AF; \u002F* now AA-compliant on dark *\u002F\n--text-success: #4ADE80;  --text-error: #F87171;\n--border-default: #4B5563; --border-success: #4ADE80; --border-error: #F87171;\n--shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 12px rgba(0,0,0,0.50);\ncolor-scheme: dark;\n```\n- **Near-white rule:** implement the palette's \"Pure White #FFFFFF\" as **#FEFEFE** — the literal value `#ffffff` must never appear in the project.\n- **Contrast pairing:** every light background token pairs with a dark text token and every dark background token with a light text token — enforced in both themes.\n- **#9CA3AF constraint (light mode):** Medium Grey fails AA for small text on light surfaces — in light mode, use `--text-secondary` only for text ≥24px (or ≥18.5px bold) and decorative labels; smaller secondary copy uses `--text-primary`.\n- Success\u002Ferror greens\u002Freds are required system tokens outside the given palette — use exactly the values above.\n\n**0.3 Product & Copy**\n- Invent one coherent fictional product fitting the theme: a modular portfolio & moodboard builder for creatives — suggested name **\"Ninefold\"** (\"your portfolio, built from nine perfect blocks\"). Pick one name and keep it consistent across every section.\n- All user-facing copy in **English**, real and specific. Lorem ipsum is forbidden.\n\n**0.4 Page Map — build all of the following, in order**\n1. **Utility header (sticky, slim):** brand wordmark (text only) left, dark-mode toggle right; `border-bottom: 1px solid var(--border-default)`, `position: sticky; top: 0; z-index: var(--z-dropdown)`, background `var(--bg-secondary)`. This bar exists to host the mandatory theme toggle — keep it minimal.\n2. **Hero — the signature 3×3 grid:** nine uniform cells; `grid-template-columns: repeat(3, minmax(0,1fr)); grid-template-rows: repeat(3, minmax(0,1fr))`; container `min-height: clamp(480px, 70vh, 720px)`.\n   - **Center cell (row 2, col 2):** `\u003Ch1>` headline, one-line subcopy, and a CTA pair — primary \"Get started\" (opens the modal, §2.4) and secondary \"See how it works\" (smooth-scrolls to How It Works).\n   - **The other eight cells:** one big-number stat cell (\"9 blocks. Infinite layouts.\"), 3–4 mini-feature cells (Material icon chip + title + one-liner), one social-proof cell (overlapping avatar chips + \"Trusted by 2,000+ creatives\"), one short quote-snippet cell, one tagline\u002Fmoodboard cell. Every cell holds distinct, real content; no empty cells.\n   - **Mobile:** below 768px the grid collapses to one column and the headline cell is reordered first via CSS `order`.\n3. **Features — 3 cards:** one row of the 3-column grid. Each card: Material icon in a tinted square chip, title, ≤2-line description. Hover per §0.1.\n4. **How It Works — 3 steps:** 3-column grid; each cell: oversized step number (01\u002F02\u002F03 in accent color), Material icon, title, description. Optional connector between steps via CSS pseudo-elements only — never by adding DOM nodes.\n5. **Testimonials — 3 quote cells:** 3-column grid; each cell: circular avatar chip (Material `person` icon on a tinted circle — no external images), quote, name, role, and a 5-star rating as Material `star` icons with an accessible text alternative (\"Rated 5 out of 5\").\n6. **Pricing — 3 tiers:** 3-column grid. Middle tier is **featured**: `2px solid var(--primary)` border, \"Most popular\" badge (coral background, **#1F2937 text** — never white-on-coral), subtle elevation. Each tier: plan name, price, billing note, check-icon feature list, CTA button (primary style on featured tier, secondary on others). Every pricing CTA opens the Get Started modal with the headline reflecting the chosen plan.\n7. **FAQ — accordion:** single centered column, `max-width: 768px`; each item a uniform bordered cell. Question row is a `\u003Cbutton>` with `aria-expanded` + `aria-controls` and a Material `expand_more` icon rotating 180° when open. Answer panel: `role=\"region\"` labelled by the button, height animated with the CSS `grid-template-rows: 0fr → 1fr` technique (no JS height measuring). One item open at a time. Write 5–6 real Q&As.\n8. **Final CTA:** one full-width bordered cell (`--radius-lg`): headline, supporting line, and an **inline email capture form** exercising every state in §2.3 — empty → focus → validation (invalid: error border + icon + specific message; valid: success border + check icon) → submit → loading (button spinner, form disabled) → success (button success state + confirmation announced in an `aria-live` region). Simulate the request with `setTimeout` (~800ms); no backend.\n9. **Footer:** 3-column link grid (Product \u002F Company \u002F Resources) + brand block with one-line mission + secondary links row (Privacy, Terms, Contact — `href=\"#\"` permitted here and only here) + copyright line.\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`. **No `style=\"...\"` attributes and no `\u003Cstyle>` blocks** anywhere in the HTML.\n- Style exclusively via class\u002FID selectors. Keep HTML semantic and style-agnostic — re-theming the page must require editing CSS only, never markup.\n\n**1.2 CSS Variables & Theme Tokens**\n- Define the exact token blocks from §0.2. Every color, radius, shadow, gap, transition, easing, and z-index used in components must reference `var(--...)` — the token definitions are the only literals allowed in the stylesheet.\n\n**1.3 Mandatory Dark Mode**\n- Provide dark token overrides under **both** a `.dark` class on `\u003Chtml>` and `@media (prefers-color-scheme: dark)` (gate the media query with `html:not(.light):not(.dark)` so an explicit user choice always wins). Switching themes must never require HTML restructuring.\n- **Toggle control** (utility header): a button with a Material `dark_mode`\u002F`light_mode` icon that swaps with the theme, `aria-pressed=\"true\"` when dark mode is active, and a dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n- **Persistence:** store the choice in `localStorage` (key `theme`); with no stored value, fall back to `prefers-color-scheme`. Theme initialization must be the very first statements in `script.js` (loaded with `defer`), always setting exactly one of `.light`\u002F`.dark` on `\u003Chtml>`; the media-query fallback guarantees a correct first paint for first-time and no-JS visitors.\n\n**1.4 Flexbox Layout & Mobile-First Alignment (+ Sanctioned Grid Exception)**\n- Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.\n- **Explicit exception clause:** the theme's signature 3×3 hero grid and the 3-column section grids use **CSS Grid** exactly as specified in §0.1 — this is the single sanctioned exception to the Flexbox rule. All non-grid alignment (button contents, card internals, form rows, header bar, footer columns) uses Flexbox with `align-items: center`.\n- **Mobile-first:** below 768px every grid collapses to a single column (`grid-template-columns: minmax(0, 1fr)`); at ≥768px the 3-column layouts apply; at ≥1024px use a centered `max-width: 1200px` container. Fluid type via `clamp()`. No horizontal scrolling at any viewport width.\n\n**1.5 Styling Stack**\n- Use **clean, custom, token-driven CSS** organized in native cascade layers in `style.css` (`@layer tokens, base, layout, components, utilities`). Do **not** load Tailwind via CDN (it would add a second script dependency and encourage off-token values); all reusable component classes (`.btn`, `.cell`, `.input-group`, …) are hand-authored against the CSS variables.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Inter** (weights 400, 500, 600, 700, 800) from Google Fonts via `\u003Clink>` with `preconnect`; bind to `--font-base` and apply globally. Headings may use `-0.02em` letter-spacing for the structured, modern feel.\n- Load **Google Material Symbols Outlined** via `\u003Clink>`; render icons as `\u003Cspan class=\"material-symbols-outlined\">icon_name\u003C\u002Fspan>`.\n- **Forbidden:** raw inline SVGs, local icon font files, images used as icons, and emoji used as UI icons. The page must be fully self-contained apart from the Google Fonts\u002FIcons links.\n\n---\n\n## 2. Component Design Specifications\n\n**2.1 Buttons**\n- Base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-md)`, `font-weight: 600`, transitions via motion tokens. Modifiers: `.btn--primary` (bg `--primary`, text `--text-on-primary`), `.btn--secondary` (transparent, `1px solid var(--border-default)`, text `--text-primary`, hover bg `--bg-secondary`), `.btn--danger` (bg `--secondary` coral, text **#1F2937** — never white-on-coral).\n- **Hover:** brightness\u002Felevation shift (`--primary-hover` for primary) + `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring — `outline: 2px solid var(--primary-text); outline-offset: 2px` — clearly visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)` click feedback.\n- **Loading:** set `aria-busy=\"true\"`, disable pointer events to prevent double-submits, and render a pure-CSS spinner (animated border ring) while keeping the button's dimensions stable — no layout shift.\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n- **Success\u002FError:** transient post-submit feedback styled with `--text-success` \u002F `--text-error`, always paired with an icon and\u002For text — never color alone.\n\n**2.2 Cards \u002F Grid Cells**\n- Base `.cell`: `background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1.5rem;` internal layout is a flex column with `align-items: center` and centered text (the moodboard look); a `.cell--prose` modifier left-aligns copy exceeding two lines (documented Flexbox exception).\n- **Hover:** per §0.1 (scale 1.02 + `--shadow-sm`).\n- **Focus-within:** when a child link\u002Fbutton receives focus, the cell border shifts to `var(--primary)`.\n- **Skeleton:** define a `.cell--skeleton` shimmer animation (gradient-sweep keyframes) that preserves exact cell dimensions — apply to any async-loaded content.\n- **Empty state:** define a `.cell--empty` pattern — Material icon + short guidance text — available for any cell whose content can be absent.\n\n**2.3 Forms & Inputs**\n- Structure `.input-group`: flex container wrapping a `\u003Clabel>` (explicitly bound with `for`), the `\u003Cinput>`, and a dedicated error-message container.\n- **States to implement:** empty, focused (accent ring via `--primary-text`), filled, **valid** (success border + Material `check` icon), **invalid** (error border + Material `error` icon + specific message tied via `aria-describedby` and announced in an `aria-live=\"polite\"` region), disabled, read-only.\n- Validate email format in JS on blur and on submit; clear the error as soon as the user corrects the input. Messages must be specific (\"Please enter a valid email address.\"), never color-only.\n\n**2.4 Modal — \"Get Started\" Dialog**\n- Triggered by the hero primary CTA and every pricing CTA (headline reflects the selected plan).\n- Use the native `\u003Cdialog>` element with `showModal()`; style the backdrop via `::backdrop` (`rgba(31, 41, 55, 0.5)`); `z-index: var(--z-modal)`.\n- **States:** opening (fade + slight scale via CSS transition), open, loading (submit-button spinner), success\u002Ferror (inline feedback + `aria-live`), closing (reverse transition).\n- **UX:** centered overlay, close button with Material `close` icon and `aria-label=\"Close dialog\"`, closable via `Esc` (native) and overlay click; focus moves into the dialog on open and returns to the triggering button on close — do not break native `\u003Cdialog>` behavior. Contains the reusable email form from §2.3 with the same simulated submit flow.\n\n---\n\n## 3. Core UX & Micro-Interaction Rules\n\n**3.1 Responsive by Default**\n- Breakpoints: base (mobile, 1 column) → ≥768px (3 columns) → ≥1024px (centered 1200px container). Fluid heading sizes with `clamp()`. `scroll-margin-top` on sections to offset the sticky header; `scroll-behavior: smooth` for anchor CTAs.\n\n**3.2 Smooth Animations & Scroll Reveal**\n- Every state change transitions through the motion tokens (`transition: transform var(--transition-normal) var(--ease-standard)` pattern).\n- **Fade-in on scroll:** an IntersectionObserver in `script.js` adds `.is-visible` to each grid cell as it enters the viewport (threshold ~0.15), with a CSS-only stagger (`nth-child` transition-delays, up to 9 steps). The pre-reveal hidden state (opacity 0, `translateY(8px)`) must apply **only** when JS is present (gate on a `.js` class added to `\u003Chtml>` by script.js) so no-JS users see all content immediately. Unobserve each cell after it reveals.\n- **`prefers-reduced-motion`:** show reveal content instantly and disable the hover scale, active-press transform, and smooth scrolling.\n\n**3.3 Accessibility (a11y)**\n- Sufficient contrast in both themes per the §0.2 constraints; never communicate state by color alone — always icon + text.\n- Semantic HTML5 landmarks (`header`, `main`, `section`, `footer`), exactly one `\u003Ch1>`, logical heading order, `lang=\"en\"`, viewport and description meta tags.\n- ARIA on all custom widgets: theme toggle (`aria-pressed` + `aria-label`), accordion (`aria-expanded`, `aria-controls`, `region` panels), modal (`aria-labelledby`), `aria-live` regions for form feedback and loading announcements.\n- A visually hidden \"Skip to content\" link that appears on focus. Full keyboard operability for every interactive element, visible focus indicators everywhere, and logical DOM\u002Ffocus order.\n\n**3.4 Mandatory Visual Feedback & Destructive Actions**\n- Every click, hover, and submission must produce a visible state change.\n- `.btn--danger` and any delete-style action must be visually distinct in **both** themes (coral fill + dark #1F2937 text, per §2.1).\n\n---\n\n## 4. Deliverables & Output Format\n\n- **Files:** `index.html`, `style.css`, `script.js` — three separate files. The only script reference is `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`; no inline scripts, no `\u003Cstyle>` blocks, no `style` attributes. `script.js` is responsible for: theme initialization (first statements), toggle handling, IntersectionObserver reveal, accordion logic, modal open\u002Fclose wiring, and form validation + simulated submit.\n- **Naming convention:** BEM only (`block__element--modifier`), used consistently across HTML classes and CSS — never mix conventions.\n- **Copy:** real English copy per §0.3. `href=\"#\"` is permitted only for footer links. No lorem ipsum, no placeholder images.\n- **Completeness:** deliver the full page in one attempt — all nine page-map items, every component state in §2, both themes, and every rule above. Before finishing, verify: zero inline styles; zero occurrences of `#ffffff`; every styled value comes from `var(--...)`; dark mode persists across reload; all interactive elements are keyboard-operable; no horizontal scroll at 320px width.\n",1791954986825]