[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-420-Op-Art":3},"# CODING AGENT PROMPT — Op Art Landing Page (1960s Optical Art)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. The condensed source spec is embedded below. Where the source spec conflicts with the mandatory rules in Sections 1–4, the mandatory rules win; every such conflict is resolved with an explicit one-line exception clause inline. Reference specification: `references\u002F00-flagship-implementation-specs\u002Fop-art.md`.\n\n**Mission:** A single-page landing site in the **Op Art \u002F Optical Art (1960s)** style — Bridget Riley's *Movement in Squares*, Victor Vasarely's concentric targets. Near-monochrome, high-contrast vibration: precise repeating black\u002Fnear-white stripes, concentric rings, graduated square grids; illusions of motion, depth, and warping; mechanical, hypnotic precision. One sanctioned chromatic accent: signal red `#e10600`. All optical patterns must be pure CSS (repeating gradients) — no raster images anywhere on the page.\n\n**Copy:** Invent one coherent fictional brand (suggested: **OPTIKA**, a precision pattern-design engine for the web) and write all user-facing copy in **English** — real, on-theme copy for every section. Lorem ipsum is forbidden. Keep the brand name consistent across nav, hero, pricing, and footer.\n\n---\n\n## Theme Direction & Design Tokens\n\n**Mandatory token mapping** — define in `:root` (light) and override in both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>` (place the `.dark` block after the media query so explicit user choice wins):\n\n| Token | Light value | Dark value | Usage |\n|---|---|---|---|\n| `--bg-primary` | `#fefefe` | `#0a0a0a` | Page background |\n| `--bg-secondary` | `#f0f0f0` | `#1c1c1c` | Alternate bands, input fills |\n| `--text-primary` | `#0a0a0a` | `#fefefe` | Headings, body |\n| `--text-secondary` | `#4a4a4a` | `#b0b0b0` | Muted copy |\n| `--primary` | `#0a0a0a` | `#fefefe` | Primary fills, pattern ink |\n| `--secondary` | `#e10600` | `#ff453a` | Accent: badges, focus rings, CTA highlights |\n| `--text-error` \u002F `--border-error` | `#e10600` | `#ff5147` | Error states |\n| `--text-success` \u002F `--border-success` | `#0f6b3f` | `#35d07f` | Success states |\n| `--border-default` | `#0a0a0a` | `#fefefe` | All structural borders (3px standard) |\n| `--radius-sm` \u002F `--radius-md` \u002F `--radius-lg` | `0px` | `0px` | Precise geometry, no softness |\n| `--radius-pill` | `999px` | `999px` | Badges only |\n| `--shadow-sm` \u002F `--shadow-md` \u002F `--shadow-lg` | `0 0 0 transparent` \u002F `0 6px 0 #0a0a0a` \u002F `0 10px 0 #0a0a0a` | flip ink to `#fefefe` | Hard offset shadows |\n| `--z-dropdown` \u002F `--z-modal` \u002F `--z-toast` | `40` \u002F `50` \u002F `60` | same | Layering (add `--z-nav: 30` for sticky nav) |\n| `--spacing-gap` | `24px` | same | Default flex gap (extend with the `--space-1…24` scale) |\n| `--transition-fast` \u002F `--transition-normal` | `120ms` \u002F `240ms` | same | All state changes |\n| `--ease-standard` | `steps(6, end)` | same | Mechanical stepped easing |\n\n**Pattern tokens** (define as CSS variables so dark mode can invert the ink): `--stripe-pattern` (90° repeating, 6px `#0a0a0a` \u002F 6px `#fefefe`), `--stripe-pattern-tight` (3px pitch), `--concentric-pattern` (repeating-radial, 4px rings). **Exception (no-pure-white rule):** the source spec's `#ffffff` is replaced by `#fefefe` everywhere, including inside pattern gradients — the delta is imperceptible and optical vibration is preserved.\n\n**Contrast pairing (enforced in both modes):** `--bg-primary` always pairs with `--text-primary`; `--bg-secondary` pairs with `--text-primary`; any element filled with `--primary` uses `--bg-primary` as its text color (they co-invert, so pairing survives theme switching). Never hardcode a text color against a token fill.\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`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n- Target everything via class\u002FID selectors; keep HTML semantic and styling-agnostic (no presentational markup, no wrapper divs whose only job is styling).\n- Reskinning the page must require editing `style.css` only.\n\n**1.2 CSS Variables & Theme Tokens**\n- Every color, radius, shadow, spacing, transition, easing, and z-index value must come from the token table above. Zero raw hex values in component rules.\n- Extended tokens: `--font-base`, `--font-display`, `--font-mono`, the `--text-xs…--text-5xl` scale, the `--space-1…--space-24` scale, and the three pattern tokens.\n\n**1.3 Mandatory Dark Mode**\n- Dark tokens defined under both `@media (prefers-color-scheme: dark)` and `.dark` (class block last, so it wins).\n- Patterns invert in dark mode (near-white ink on near-black); hard shadows flip to near-white offsets.\n- Visible theme toggle in the nav: Material Symbol `dark_mode`\u002F`light_mode`, correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"). Persist choice in `localStorage`; on first visit fall back to `prefers-color-scheme`.\n- The source spec declares no modes — you must validate the finished page in **both light and dark** before considering it complete (see Section 5).\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 a CSS comment (the only sanctioned exceptions: footer link columns and pricing\u002Ffeature card tops use `flex-start`).\n- Mobile-first: multi-column rows become single columns below 768px. No horizontal scrolling at any width from 320px up — solve root causes with `max-width: 100%` and contained patterns, not by hiding overflow.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS via the Play CDN `\u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>` for structural utilities only (flex, gaps, wrapping, max-widths, responsive prefixes). Do not add a Tailwind config script.\n- All color, typography, and component styling is done in `style.css` via BEM classes bound to CSS variables. Tailwind color utilities and arbitrary-value utilities with hex values are forbidden.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load Google Fonts via `\u003Clink>`: **Jost** (geometric, Futura-equivalent) bound to `--font-display`, **Inter** (Helvetica Neue–equivalent) bound to `--font-base`, **Space Mono** bound to `--font-mono`.\n- **Exception (Google Fonts rule):** the source's Futura\u002FHelvetica Neue stacks are replaced by these Google-hosted equivalents; the historical names may remain only as fallbacks inside the font stacks.\n- Icons: Google Material Symbols Outlined stylesheet; icons rendered as `\u003Cspan class=\"material-symbols-outlined\">…\u003C\u002Fspan>`. Raw inline SVGs and local icon files are forbidden.\n- Display headings: `--font-display`, uppercase, tight letter-spacing. Eyebrow labels and step numerals: `--font-mono`, uppercase, wide letter-spacing.\n\n---\n\n## 2. COMPONENT & SECTION SPECIFICATIONS\n\n**2.1 Buttons (`.btn`, `.btn--primary`, `.btn--inverse`, `.btn--danger`)**\n- Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` 3px `--border-default`, hard `--shadow-md`, minimum 44×44px touch target, `--font-base` 700.\n- Hover: solid inversion (`--primary` fill, `--bg-primary` text) plus a 6px stripe band via `border-image: var(--stripe-pattern)`. **Exception (a11y override):** the source's stripe-fill hover with a white label fails contrast — do not implement it; use the inversion + stripe band instead.\n- Focus: `:focus-visible` → 3px `--secondary` outline, 3px offset.\n- Active: `transform: scale(0.97)`.\n- Loading (`.is-loading` + `aria-busy=\"true\"`): interactions disabled, double-clicks prevented, a rotating hollow **square** spinner (3px border, `--radius-lg`) replaces the icon without changing button dimensions.\n- Disabled: `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- Success\u002FError (`.is-success`, `.is-error`): temporary states driven by `--text-success`\u002F`--text-error` with a Material Symbol `check`\u002F`error` icon swap.\n- `.btn--danger` must be defined in the CSS library (red accent treatment, distinct in both modes) even if unused on this page.\n\n**2.2 Cards (`.card`, variants `--inverted`, `--tier`, `--quote`)**\n- Default: `--bg-secondary` or `--bg-primary` surface, 3px `--border-default`, `--shadow-md`, `::before` top band of `--stripe-pattern` (10px), `overflow: hidden`, flex column.\n- Hover: `translateY(-2px)` + `--shadow-lg`.\n- `:focus-within`: border switches to `--secondary`.\n- Define `.skeleton` (shimmer animation, no layout jump) and `.empty-state` (Material Symbol + guidance text) classes in the CSS library.\n\n**2.3 Forms & Inputs (`.input-group`, `.input`, `.input-group__error`)**\n- Structure: flex column wrapping `\u003Clabel>`, `\u003Cinput class=\"input\">`, and a dedicated error container with `aria-live=\"polite\"`.\n- States via CSS: empty (`:placeholder-shown`), focused (3px `--secondary` border + ring), filled, valid (`.is-valid`: `--border-success` + `check` icon), invalid (`.is-invalid`: `--border-error`, error icon, message), disabled, read-only.\n- Placeholder color: `--text-secondary`.\n\n**2.4 Modal (`.modal`, `.modal__backdrop`, `.modal__close`)**\n- Pricing tiers each open a \"Plan details\" modal: `role=\"dialog\"`, `aria-modal=\"true\"`, centered flex (`align-items: center`), backdrop overlay, `--z-modal`, Material Symbol `close` button with `aria-label=\"Close dialog\"`.\n- Animated opening\u002Fopen\u002Fclosing via CSS transitions; loading state (skeleton) then content; success\u002Ferror feedback inside.\n- Keyboard: focus trap while open, `Esc` and backdrop click close, focus returns to the trigger, body scroll locked.\n\n**2.5 Toast (`.toast`)**\n- Bottom-positioned, `--z-toast`, `role=\"status\"` \u002F `aria-live=\"polite\"`, auto-dismiss, close button. Used for form success feedback.\n\n**2.6 Page Sections (in order)**\n\n- **Nav (sticky):** brand wordmark (display font) with a CSS concentric-target mark; anchor links with hover underline in `--primary`; theme toggle (1.3); compact `.btn--primary` CTA; bottom edge `border-image: var(--stripe-pattern) 6`. Below 768px, links collapse into a `\u003Cdetails>`-based disclosure panel. Add a \"Skip to main content\" link (visually hidden until focused) and `scroll-padding-top` for anchor jumps.\n- **Hero:** flex column, centered. Red `.badge` eyebrow; single `\u003Ch1>` in display font, uppercase; supporting paragraph in `--text-secondary`; CTA row (`.btn--primary` + `.btn`) that wraps on mobile. Behind\u002Fbeside the copy, a decorative Riley-style *Movement in Squares* field — a CSS-only graduated grid of `aria-hidden=\"true\"` squares whose widths step down toward a slit, or layered repeating gradients. Copy sits on a solid `--bg-primary` panel so contrast is never compromised. Any pattern animation is gated behind `prefers-reduced-motion`.\n- **Features (3 cards):** section header (mono eyebrow + `\u003Ch2>` + lede) above a flex row of three `.card`s (column below 768px). Each card: Material Symbol icon set inside a square tile backed by `--concentric-pattern` (Vasarely target), `\u003Ch3>`, body copy. Full card state matrix from 2.2.\n- **How It Works (3 steps):** semantic `\u003Col>`; each step shows a giant outlined numeral (01\u002F02\u002F03, display font, text-stroke) , Material Symbol, `\u003Ch3>`, copy. Steps are joined by a horizontal `.steps__rule` filled with `--stripe-pattern`; the rule is removed or verticalized on mobile.\n- **Testimonials:** three `.card--quote` cards in a wrapping flex row; oversized `format_quote` Material Symbol; quote, then author row: `.avatar` (black square, `--radius-lg`, white initials — no photos), name in `--text-primary`, role in `--text-secondary`. Make the middle card `--inverted` for rhythm; pairing rules hold in both modes.\n- **Pricing (3 tiers):** three `.card--tier` cards; the middle tier is `--featured`: inverted fill, `--shadow-lg`, slight scale-up, red `.badge` \"MOST POPULAR\". Each tier: name (display font), large price + period, feature list with Material Symbol `check` icons (one `close` for an excluded feature — never color alone), a `.btn` CTA (featured uses `.btn--inverse`), and a \"Plan details\" trigger opening the 2.4 modal.\n- **FAQ:** 5–6 `\u003Cdetails class=\"faq__item\">` \u002F `\u003Csummary>` pairs (no JS needed); 3px `--border-default` dividers; `expand_more` chevron rotating 180° on `[open]`; `:focus-visible` ring on `summary`; answers in `--text-secondary`.\n- **Final CTA:** full-width inverted band (`--primary` fill, `--bg-primary` text) with `--stripe-pattern` border-image top and bottom; `\u003Ch2>` in display font; email capture form per 2.3 (input + `.btn--inverse`); on submit: validate → `.is-invalid` + live error, or loading → `.is-success` + toast.\n- **Footer:** inverted band. Brand block + tagline; three secondary-link groups (Product, Company, Resources — `href=\"#\"` permitted since destinations are unspecified); bottom bar with copyright (dynamic year via JS) and small legal links. Link hover: `--secondary` underline; focus rings visible on the inverted background. Footer columns may use `align-items: flex-start` (sanctioned exception).\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid type via the `--text-*` scale with clamp() where helpful; sections padded `--space-16` mobile \u002F `--space-24` desktop inside a max-width container; zero horizontal overflow from 320px up.\n- **Smooth animations:** every state change transitions via `transition: var(--transition-normal)`. **Exception (theme easing):** per the Op Art spec, easing is mechanical `steps(6, end)` rather than smooth curves — transitions still apply to all state changes. Under `prefers-reduced-motion`: disable all animations\u002Ftransitions and replace high-frequency vibrating fills (`--stripe-pattern-tight`) with solid bands (photosensitivity safeguard).\n- **Accessibility:** body text contrast ≥ 4.5:1 in both modes; never communicate state by color alone (pair every success\u002Ferror with an icon and text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); one `\u003Ch1>`, logical heading order; full keyboard operability; visible focus everywhere; `aria-live` regions for form errors, loading, and toasts.\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Destructive actions:** `.btn--danger` visually distinct in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. The only `\u003Cscript>` references are the Tailwind CDN (external, in `\u003Chead>`) and one deferred `script.js` entry point. No inline script blocks.\n- **script.js scope:** theme toggle + `localStorage` persistence + `prefers-color-scheme` fallback, email validation and button state orchestration, modal open\u002Fclose with focus trap and `Esc`, toast helper, dynamic copyright year. Nothing else.\n- **Naming:** BEM everywhere for components (`.card__title`, `.btn--primary`, `.faq__item`); transient states use `.is-*` classes (`.is-loading`, `.is-invalid`). Never mix conventions.\n- **No unrequested placeholders:** no lorem ipsum, no TODOs, no empty headings. All copy is final English text; `href=\"#\"` is permitted only for the unspecified footer\u002Flegal destinations.\n\n---\n\n## 5. ACCEPTANCE CRITERIA — LIGHT + DARK VALIDATION\n\nBefore publishing, verify in **both themes** (the source spec declares no modes; validation in light and dark is mandatory): (1) zero `style=\"...\"` attributes and zero inline SVGs; (2) every color\u002Fradius\u002Fshadow\u002Ftransition resolves to a token; (3) contrast passes in both modes, including inverted bands, badges, and pattern-adjacent text; (4) full keyboard walkthrough — skip link, nav disclosure, links, FAQ, modal trap + `Esc`, form validation; (5) no horizontal scroll from 320px to 1920px; (6) reduced-motion users get a static, non-vibrating page; (7) theme choice survives reload; (8) all eight sections present in order with a single `\u003Ch1>`.\n",1791954986722]