[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-718-GRAVITY-type-specimen-instrument":3},"**ROLE:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page specified below **in a single attempt**. Output final, runnable code — no TODOs, no stubs, no follow-up questions. Write **all user-facing copy in English**.\n\n---\n\n## 1. PROJECT BRIEF & THEME DIRECTION\n\n**1.1 Product & Voice** — The page promotes **GRAVITY**, a type specimen instrument: a browser-based tool that lets designers load typefaces, tune variable-font axes, inspect kerning, and export specimen proofs. Write original copy in the product's voice: confident, technical, utilitarian — short declarative sentences using typographic vocabulary (glyphs, axes, proofs, kerning, optical size).\n\n**1.2 Aesthetic Definition** — Style: **2010s Web Brutalism**. Keywords: *type, specimen, tool, brutalism, gradient, grid-layout*. The page must feel like a printed specimen sheet rendered on the web: exposed structural grids, 2px ink borders, oversized display typography, monospace metadata labels, hard offset shadows, visible section dividers, raw numeric indices (01, 02, 03…), and a high-contrast paper-and-ink palette. Decoration must be structural, never ornamental.\n\n**1.3 Required CSS Techniques** — Every item must appear at least once in `style.css`: CSS Grid, Flexbox, Transitions, Transforms, Gradients, Text Shadows, Border Radius, Aspect Ratio.\n\n**1.4 Theme Modes** — Light mode is the visual default per the source spec (\"✓ Light \u002F ○ Dark\"). **Exception clause:** although Dark is marked secondary in the source, full Dark Mode support remains mandatory (see 2.3); Light is merely the first-visit default.\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden.**\n- Target all design properties, layout rules, and states via class or ID selectors only.\n- HTML must remain semantic and clean (header, nav, main, section, article, footer); re-theming the site must require CSS edits only, never markup changes.\n\n**2.2 CSS Variables & Theme Tokens**\nDefine the full token set in `:root` (light\u002Fdefault) and override under `.dark`:\n\n- **Light (default):** `--primary: #191713` · `--secondary: #6b665c` · `--bg-primary: #EFEBE3` · `--bg-secondary: #EAE5DB` · `--text-primary: #191713` · `--text-secondary: #6b665c` · `--text-success: #3E5635` · `--text-error: #B0301F` · `--border-default: #191713` · `--border-subtle: #a39d8f` · `--border-success: #3E5635` · `--border-error: #B0301F` · `--accent: #D23C28` · `--accent-contrast: #EFEBE3`\n- **Dark:** `--primary: #EFEBE3` · `--secondary: #a39d8f` · `--bg-primary: #191713` · `--bg-secondary: #26221C` · `--text-primary: #EFEBE3` · `--text-secondary: #a39d8f` · `--text-success: #9DB58A` · `--text-error: #E8604C` · `--border-default: #EFEBE3` · `--border-subtle: #6b665c` · `--border-success: #9DB58A` · `--border-error: #E8604C` · `--accent: #D23C28` · `--accent-contrast: #EFEBE3`\n- **Gradients (define as tokens):** `--gradient-paper` (#EFEBE3 → #EAE5DB, subtle surface wash) · `--gradient-ink` (#191713 → #34302A, dark blocks) · `--gradient-accent` (#D23C28 → #191713, 135deg, emphasis fills).\n- **Brutalist extras:** `--shadow-text: 4px 4px 0 var(--accent)` (hard vermilion text offset) · `--shadow-hard: 6px 6px 0 var(--primary)` (hard offset elevation).\n- **Type:** `--font-display: \"Archivo Black\"` · `--font-base: \"Archivo\"` (400\u002F500\u002F700) · `--font-mono: \"Space Mono\"` (400\u002F700).\n- **Geometry & elevation:** `--radius-sm: 2px` · `--radius-md: 4px` · `--radius-lg: 9999px` · `--shadow-sm` · `--shadow-md` (soft, ink-tinted).\n- **Motion & space:** `--spacing-gap: clamp(1rem, 3vw, 1.5rem)` · `--transition-fast: 120ms` · `--transition-normal: 250ms` · `--ease-standard: cubic-bezier(0.2, 0, 0.2, 1)`.\n- **Stacking:** `--z-dropdown: 100` · `--z-modal: 1000` · `--z-toast: 1100` (define all three even if unused).\n- **Contrast pairing:** every light background token must pair with a dark text token and vice versa, in **both** themes. Never use `#ffffff`; if a brighter surface than `--bg-primary` is genuinely required in light mode, use `#fefefe`. Derived intermediate neutrals (e.g., `#26221C`, `#34302A`) are permitted only between existing palette values and must stay in the warm-gray family.\n\n**2.3 Mandatory Dark Mode Support**\n- Provide dark tokens via both a `.dark` class on `\u003Chtml>` and `@media (prefers-color-scheme: dark)`.\n- Persist the user's choice in `localStorage`; on first visit fall back to `prefers-color-scheme`.\n- Include a **visible toggle** in the header: a Material Symbol button whose icon swaps (`light_mode`\u002F`dark_mode`), with correct `aria-pressed` and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- Background\u002Ftext tokens must switch seamlessly via CSS transitions (`var(--transition-normal)`) with **no HTML restructuring**.\n\n**2.4 Layout Standards: CSS Grid (Macro) + Flexbox (Components)**\nThe theme explicitly mandates `grid-layout`. **Exception clause:** CSS Grid is required for all macro\u002Fsection structure; Flexbox remains mandatory for all component internals.\n- **Macro:** page scaffold is a 12-column CSS Grid container (max-width ~1200px, centered, gutters `var(--spacing-gap)`). Features, How It Works, Testimonials, Pricing, and footer link columns are Grid layouts using `repeat(auto-fit, minmax(...))` that collapse 3 → 1 below 768px.\n- **Micro:** every flex container **must default to `align-items: center`** unless an exception is explicitly justified (e.g., stacked text inside cards uses `flex-start`; justify each exception in a CSS comment).\n- **Mobile-first:** use `min-width` media queries only. Zero horizontal overflow at 320px.\n\n**2.5 Styling Approach**\nHand-authored custom CSS in `style.css` is the default (Tailwind CSS is permitted; if used, define reusable component classes via `@layer`\u002F`@apply` mapped to the variables). No preprocessors, no CSS-in-JS, one stylesheet.\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Google Fonts via `\u003Clink>`: **Archivo Black** (display), **Archivo** (base), **Space Mono** (mono metadata). Bind them to `--font-display`, `--font-base`, `--font-mono`.\n- Icons: **Google Material Symbols (Outlined)** via the Google Fonts link, rendered as ligature spans. **Raw inline SVGs, other icon libraries, and local icon files are forbidden.**\n- Use fluid sizing via `clamp()` — the hero display heading should scale to ~10–12vw.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons (`.btn`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; 2px solid `var(--border-default)`; square corners; `Space Mono` 700 uppercase with wide letter-spacing. Variants: `.btn--primary` (ink fill, paper text, `--shadow-hard`), `.btn--ghost` (transparent, ink border), `.btn--accent` (fill `var(--gradient-accent)`, color `var(--accent-contrast)`), `.btn--danger`.\n- **Hover:** visual shift — the hard shadow collapses (6px → 3px) or brightness changes; `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring — 3px outline `var(--accent)`, 2px offset, visible in both themes.\n- **Active\u002FPressed:** `transform: scale(0.97)` (may combine with `translate(2px, 2px)` to collapse the hard shadow).\n- **Loading (`.btn--loading`):** disables interaction, prevents double-clicks, renders a CSS spinner or rotating Material icon **without changing button dimensions**; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no shadow.\n- **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n- **Danger:** `.btn--danger` must be visually distinct in **both** themes (error border + accent fill).\n\n**3.2 Cards (`.card`)**\n- **Default:** flex column layout, 2px `var(--border-default)` border, `var(--bg-secondary)` background, generous padding, square corners.\n- **Hover:** `transform: translateY(-2px)` plus `--shadow-md` or `--shadow-hard`; transition `var(--transition-normal)`.\n- **Focus-within:** border shifts to `var(--accent)` when any child link\u002Fbutton receives focus.\n- **Loading (`.card--skeleton`):** shimmer keyframe sweeping `--gradient-paper`; fixed min-heights so no layout jump occurs.\n- **Empty (`.card--empty`):** centered fallback — Material icon inside a bordered tile plus one clear guidance sentence.\n- **Variants:** `.card--feature`, `.card--pricing`, `.card--pricing--featured`, `.card--testimonial`.\n\n**3.3 Forms & Inputs (`.input-group`)**\n- **Structure:** flex column wrapper → label (mono, uppercase) → input → dedicated error feedback container. Associate label via `for`\u002F`id`; error container uses `aria-live=\"polite\"` and `aria-describedby`.\n- **States:** empty; focused (2px `var(--accent)` outline ring); filled; valid (`.input-group--valid`: `--border-success` + Material \"check\" icon); invalid (`.input-group--invalid`: `--border-error`, error icon, error copy in `var(--text-error)`); disabled; read-only.\n- **Never rely on color alone** — pair color changes with icons and text. Inputs: 2px border, min-height 44px, `--radius-sm`.\n\n**3.4 Overlay \u002F Modal (conditional)**\nNo modal is required for this build. If you include one (e.g., a demo preview), it must be a centered flex overlay (`align-items: center; justify-content: center`) with an ink backdrop at `--z-modal`, animated opening\u002Fclosing states, loading and success\u002Ferror states, close on `Esc` and backdrop click, keyboard focus trapping, and a Material icon close button with `aria-label=\"Close\"`. Otherwise omit it entirely — never ship a non-functional modal shell.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` sizing, `min-width` breakpoints, grids collapse gracefully, no horizontal overflow at 320px.\n- **Smooth animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes (color, border, shadow, transform). Honor `prefers-reduced-motion: reduce` — disable transforms, spinners, and shimmer; keep instant state changes.\n- **Accessibility (a11y):** WCAG AA contrast in both themes; semantic landmarks; exactly one `\u003Ch1>`; ordered headings; a skip-to-content link; full keyboard operability with visible `:focus-visible` everywhere; correct ARIA on custom widgets (menu button: `aria-expanded`\u002F`aria-controls`; toggle: `aria-pressed`; `aria-live` regions for form feedback); decorative watermark text marked `aria-hidden`.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** `.btn--danger` must be unmistakable in light and dark modes.\n\n---\n\n## 5. PAGE COMPOSITION — SECTION-BY-SECTION SPEC\n\nUse a shared section header pattern: 2px top rule, mono index label (\"01 — FEATURES\"), `\u003Ch2>` in `--font-display`. All sections get ids matching nav anchors.\n\n**5.1 Site Header (sticky)** — Flex row (`align-items: center`, `justify-content: space-between`): wordmark \"GRAVITY\" (display font) + small mono descriptor; nav links in mono uppercase with hover underline effects; theme toggle button. Below 768px the nav collapses into a disclosure menu: button with `aria-expanded`\u002F`aria-controls` at `--z-dropdown`, `Esc` closes, link clicks close it.\n\n**5.2 Hero (`#hero`)** — Full-bleed, ~90vh grid; background uses `--gradient-paper` plus an optional decorative fine-line grid overlay (`repeating-linear-gradient`, `aria-hidden`). Content: mono eyebrow \"TYPE SPECIMEN INSTRUMENT — Nº 001\"; `\u003Ch1>` \"GRAVITY\" in `clamp(3.5rem, 12vw, 9rem)` display type, solid `var(--text-primary)` with hard vermilion `text-shadow: var(--shadow-text)`; a 1–2 sentence subhead; CTA pair — `.btn--primary` \"Start typesetting\" (anchors to `#pricing`) and `.btn--ghost` \"See how it works\" (`#how-it-works`). Below: a **specimen strip** — an auto-fit grid of glyph tiles (\"Aa\", \"Gg\", \"Rr\", \"Ag\", \"&\", \"№\"), each `aspect-ratio: 1\u002F1`, 2px border, glyph centered in flex; hover inverts the tile (ink background, paper glyph); one tile filled with `--gradient-accent`.\n\n**5.3 Features (`#features`)** — Index \"01 — FEATURES\", 3× `.card--feature` in a 3→1 grid: mono index (F.01\u002FF.02\u002FF.03), Material icon, `\u003Ch3>`, 2–3 sentences of real copy: (1) **Live variable axes** — drag weight, width, and optical size in real time; (2) **Kerning inspection** — pair overlays marked in vermilion; (3) **Instant proofs** — waterfalls, pangrams, full character sets on demand.\n\n**5.4 How It Works (`#how-it-works`)** — Index \"02 — PROCESS\", 3 steps joined by 2px rules on desktop: oversized display numeral with gradient text fill (`background: var(--gradient-ink); background-clip: text;` with an `@supports` fallback to solid color), step title, copy — (1) **Load a face** (drag-drop TTF\u002FOTF\u002FWOFF2 or pick from the library), (2) **Set the axes** (sliders with live preview), (3) **Export the proof** (PDF, PNG, or CSS tokens). Hover: numeral nudges via transform or gains an accent rule.\n\n**5.5 Testimonials (`#testimonials`)** — Index \"03 — FIELD NOTES\", 3× `.card--testimonial`: oversized vermilion quote mark (or Material \"format_quote\" icon), a 1–3 sentence designer quote, and a **monogram avatar tile** (`aspect-ratio: 1\u002F1`, `border-radius: 50%`, `--gradient-ink` fill, paper initials — no external images), name in bold plus role\u002Fstudio in mono `--text-secondary`. Card hover per 3.2.\n\n**5.6 Pricing (`#pricing`)** — Index \"04 — PRICING\", 3× `.card--pricing`: **Specimen** ($0 — hobbyists, 3 typefaces, watermarked proofs), **Studio** ($19\u002Fmo — featured), **Foundry** ($79\u002Fmo — teams, unlimited faces, API, white-label). Featured card: `.card--pricing--featured` with accent 2px border, `--shadow-hard`, a mono pill tag \"MOST USED\" using `--radius-lg`, and elevated visual weight without breaking hover states. Feature lists use Material \"check\" icons in `var(--text-success)`. CTAs: featured tier uses `.btn--accent`; others use `.btn--primary`\u002F`.btn--ghost`.\n\n**5.7 FAQ (`#faq`)** — Index \"05 — FAQ\", 5–6 native `\u003Cdetails class=\"faq__item\">` + `\u003Csummary>` (flex, `align-items: center`, `justify-content: space-between`, mono question, Material \"add\" icon that rotates 45° on `[open]` via CSS transform). Divider borders between items; opening transitions respect reduced motion. Write real Q&A copy (supported formats, variable fonts, licensing, exports, refunds).\n\n**5.8 Final CTA (`#cta`)** — Full-bleed block: `var(--gradient-ink)` background, inverted text; `\u003Ch2>` with gradient text (`#EFEBE3` → `#a39d8f`, `background-clip: text`, `@supports` fallback to `var(--text-primary)`); supporting sentence; email capture form — `.input-group` (visible \"Work email\" label, `type=\"email\"`, required) + submit `.btn--accent` \"Get early access\". `script.js` validates: invalid → `.input-group--invalid` with inline error text announced via `aria-live`; valid → button loading state → success feedback (`.btn--success` + \"Proof queued. Check your inbox.\"). Prevent default and simulate with a timeout; no backend.\n\n**5.9 Footer (`\u003Cfooter>`)** — 2px top rule; grid layout: brand block (wordmark, one-line description, social icon buttons with `aria-label`s) + **three secondary link columns** (Product: Features, Pricing, Changelog · Resources: Specimens, Kerning guide, API docs · Company: About, Contact, Legal). Links point to in-page anchors where matching sections exist, otherwise `href=\"#\"` with descriptive text; mono, small, hover accent underline. Bottom bar: \"© [current year via script.js] GRAVITY Type Specimen Instrument\" plus a colophon line (\"Set in Archivo & Space Mono\"). Optional decorative giant \"GRAVITY\" watermark, clipped, `aria-hidden=\"true\"`.\n\n---\n\n## 6. DELIVERABLES & OUTPUT FORMAT\n\n**6.1 File Structure** — Separate `index.html`, `style.css`, `script.js`. The only script reference is a single deferred entry point (`\u003Cscript src=\"script.js\" defer>`). No inline styles, no inline event handlers — use `addEventListener` only.\n\n**6.2 Naming Convention** — BEM exclusively (`block__element--modifier`), never mixed with other conventions. Semantic block names (`.header`, `.hero`, `.features`, `.card`, `.btn`, `.input-group`, `.faq`, `.footer`).\n\n**6.3 Copy & Placeholders** — Write original, thematic English copy for every section. **Lorem ipsum is forbidden.** `href=\"#\"` is acceptable only for links without real destinations, and every link must carry descriptive accessible text.\n\n**6.4 `script.js` Scope** — Theme toggle + persistence, mobile menu toggle, CTA form validation with `aria-live` announcements and simulated submission, dynamic copyright year. Vanilla ES only; no libraries.\n\n**6.5 Self-Check Before Output** — Verify: every technique in 1.3 appears at least once; all tokens in 2.2 are defined; both themes pass AA contrast; a full keyboard-only pass works (nav, menu, FAQ, form, footer); no horizontal scroll at 320px; reduced motion honored; every interactive element has visible hover, focus, and active feedback. Then output the three complete files.\n",1791954991611]