[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-757-Pixel-Art":3},"# SYSTEM PROMPT — BUILD A \"PIXEL ARCADE\" LANDING PAGE (1980s NES Aesthetic)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Produce a complete, production-ready **Pixel Art themed Landing Page** (retro, 8-bit\u002F16-bit, 1980s arcade, blocky, nostalgic) on the first attempt. The page promotes a fictional retro-game-creation product — invent one coherent brand name (in the spirit of \"PIXELFORGE\") and use it consistently. **All user-facing copy must be written in English**, in an authentic arcade voice. No lorem ipsum.\n\n**Sections to build, in order:** Site Header (HUD bar), Hero, Marquee Strip, Features (3 cards), How It Works (3 steps), Testimonials (3 quotes), Pricing (3 tiers), FAQ (accordion), Final CTA (newsletter form), Footer (secondary links).\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in a dedicated `style.css`. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML. Target everything via class\u002FID selectors.\n- HTML must remain semantic and presentation-agnostic (`header`, `nav`, `main`, `section`, `footer`, `details`, `form`) so the theme can be changed by editing CSS only.\n- No presentational attributes (`bgcolor`, `align`, etc.). Structure and copy only in markup.\n\n**1.2 CSS Variables & Theme Tokens (Pixel Art Palette)**\nDefine all tokens in `:root` (light default), override for dark mode (see 1.3). Use exactly these names, with these recommended starting values — then **verify every text\u002Fbackground pair achieves WCAG AA ≥ 4.5:1 in BOTH themes** and darken\u002Flighten any failing value:\n\n```css\n:root {\n  \u002F* Typography *\u002F\n  --font-display: 'Press Start 2P', 'VT323', monospace;   \u002F* headings, buttons, prices, nav *\u002F\n  --font-base: 'VT323', monospace;                        \u002F* body, forms, FAQ answers (min 18px) *\u002F\n\n  \u002F* Color — Light Mode (arcade cream, never pure white) *\u002F\n  --primary: #0058f8;            \u002F* NES blue   *\u002F  --primary-contrast: #fefefe;\n  --secondary: #f8b800;          \u002F* NES yellow *\u002F  --secondary-contrast: #121212;\n  --accent-red: #d82800; --accent-green: #00a800; --accent-cyan: #3cbcfc;\n  --bg-primary: #f2ecdc;         \u002F* arcade cabinet cream *\u002F\n  --bg-secondary: #fefefe;       \u002F* card\u002Fpanel surfaces *\u002F\n  --bg-invert: #121212;          \u002F* footer\u002Finverted bars *\u002F --text-invert: #f2ecdc;\n  --text-primary: #121212;  --text-secondary: #4f4a3d;\n  --text-success: #0b6b0b;  --text-error: #b71c1c;\n  --border-default: #121212; --border-success: #0b6b0b; --border-error: #b71c1c;\n  --pixel-outline: #121212;      \u002F* hard outline color *\u002F\n  --pixel-shadow: #121212;      \u002F* hard offset shadow color *\u002F\n\n  \u002F* Shape, elevation, motion, stacking *\u002F\n  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;\n  --shadow-sm: 2px 2px 0 0 var(--pixel-shadow);\n  --shadow-md: 4px 4px 0 0 var(--pixel-shadow);\n  --spacing-gap: 1rem; \u002F* ALL spacing\u002Fpadding\u002Fsizes must sit on a 4px\u002F8px grid *\u002F\n  --transition-fast: 60ms; --transition-normal: 120ms; --ease-standard: linear;\n  --z-scanlines: 80; --z-header: 90; --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n}\n```\n\nDark mode overrides (under both `.dark` and the media query in 1.3): `--primary: #3cbcfc; --primary-contrast: #121212; --bg-primary: #12121e; --bg-secondary: #1f1f33; --bg-invert: #fefefe; --text-invert: #12121e; --text-primary: #f8f8f8; --text-secondary: #a8a8c0; --text-success: #58d854; --text-error: #fc7460; --border-default: #e8e8f0; --border-success: #58d854; --border-error: #fc7460; --pixel-outline: #f0f0f0; --pixel-shadow: #000000;`\n\n- **Contrast Pairing (mandatory in every theme):** any light background token pairs with a dark text token and vice versa — including `--primary`\u002F`--primary-contrast`, `--secondary`\u002F`--secondary-contrast`, and the inverted footer pair.\n- **Theme exception clauses (rules kept, values adapted):** the radius and shadow tokens remain defined as required, but radius values are **0** (sharp pixel edges) and shadows are **hard-edged with 0 blur** (`4px 4px 0 0`), per the theme's `box-shadow: 4px 0 0 #000` spec. Pixel borders must be built from solid `border` (3–4px) plus stacked `box-shadow` layers — never `border-radius`.\n- Apply `image-rendering: pixelated` (with `crisp-edges` fallback) to any raster imagery, and `-webkit-font-smoothing: none` on `--font-display` text (best-effort anti-aliasing removal per theme spec).\n\n**1.3 Mandatory Dark Mode Support**\n- Dark tokens apply via `@media (prefers-color-scheme: dark)` (native, no-flash default) AND via a `.dark` class on `\u003Chtml>` for manual override, with a `.light` class to force light. Theme switching must require **zero HTML restructuring** — only variable values change.\n- Provide a visible **pixel-styled theme toggle button** in the header using Material Symbols `dark_mode` \u002F `light_mode`, with correct `aria-pressed` and `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n- Persist the user's choice in `localStorage` (key `theme`); fall back to `prefers-color-scheme` on first visit. Logic lives in `script.js` (deferred) — **no inline bootstrap scripts**.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout with Flexbox (`display: flex` \u002F Tailwind flex utilities). **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified. Permitted exceptions (each must be listed in a comment block at the top of `style.css`): equal-height card\u002Fpricing rows (`items-stretch`) and stacked form\u002Finput groups.\n- Mobile-first: rows of cards, steps, and form fields collapse to `flex-direction: column` below 768px. **No horizontal scrolling at any viewport width** (test 320px). Use fluid `clamp()` typography.\n- Sticky header must not cover anchors: set `scroll-margin-top` on sections and `scroll-behavior: smooth` (disabled under `prefers-reduced-motion`).\n\n**1.5 Framework & Utility Layer**\n- Use **Tailwind CSS via the Play CDN** (`\u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">\u003C\u002Fscript>` in `\u003Chead>`, with no inline `tailwind.config` script) — this CDN reference plus the single deferred `script.js` are the **only** permitted `\u003Cscript>` tags.\n- Tailwind utilities are for **layout only** (`flex`, `items-center`, `justify-between`, `gap-*`, `flex-col md:flex-row`, `max-w-*`, `px-*`). **Forbidden:** Tailwind color, `rounded-*`, and `shadow-*` utilities — those bypass theme tokens.\n- All visual identity lives in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, `.pricing-card`, etc.), every one mapped back to the CSS variables above.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Press Start 2P** (display: headings, buttons, prices, nav — never below 12px, uppercase) and **VT323** (base: body copy, forms, FAQ answers — never below 18px) via Google Fonts `\u003Clink>` tags with `preconnect`. Bind them to `--font-display` and `--font-base`.\n- Icons: **Google Material Symbols (Outlined, FILL 1)** loaded via the official stylesheet. **Raw inline SVGs and local icon files are forbidden.** Wrap icons in blocky bordered chips so they sit naturally in the pixel frame.\n- Decorative pixel art (sprites, hearts, coins, dithering, starfields) must be **drawn with pure CSS** — box-shadow pixel grids and repeating\u002Fconic gradients — never SVG or raster files.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button (`.btn`, variants `--primary`, `--secondary`, `--ghost`, `--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px (use min-height 48px), `--font-display` 12px, 3–4px solid `--pixel-outline` border, hard offset shadow `var(--shadow-md)`, zero radius.\n- **Hover:** brightened fill or lighter token swap + shadow grows to 6px 6px 0; `cursor: pointer`.\n- **Focus-visible:** distinct 3px solid outline (use `--accent-cyan`) with 3px offset — never remove focus rings.\n- **Active\u002Fpressed:** `transform: translate(2px, 2px)` and shadow collapses to 0 (pressed-in effect). **Exception clause:** the mandatory pressed feedback is implemented as translate + shadow collapse instead of `scale(0.97)` to preserve the pixel grid.\n- **Loading (`.is-loading`):** disabled, double-click proof (`pointer-events: none`, `aria-busy=\"true\"`), label swapped for a CSS pixel spinner built with `steps()` timing; fixed `min-width` so dimensions never distort.\n- **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;` shadow removed.\n- **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary fill flash using `--accent-green` \u002F `--accent-red` **plus** an icon and an `aria-live` message — never color alone.\n\n**2.2 Card (`.card`, variants `--featured`, `--skeleton`, `--empty`)**\n- **Default:** flex column, `var(--spacing-gap)` gaps, `--bg-secondary` fill, 4px pixel outline, hard shadow, padding on the 4\u002F8px grid.\n- **Hover (interactive cards only):** `transform: translateY(-4px)` and shadow grows to 6px.\n- **Focus-within:** outline color shifts to `--primary` when a child link\u002Fbutton is focused.\n- **Skeleton (`.card--skeleton`):** blocky placeholder rectangles with a **step-based shimmer** (`steps()` opacity keyframes — no smooth fades), sized to match real content so layout never jumps. Define it even though the page loads statically.\n- **Empty (`.card--empty`):** centered Material icon (e.g., `videogame_asset`) + short guidance text.\n\n**2.3 Form & Input (`.input-group`, `.input`, `.input__error`)**\n- Structure: flex column wrapping a visible `\u003Clabel>` (VT323), the input, and a dedicated error message container.\n- Style all states via classes: **empty, focused** (3px `--primary` outline + offset pixel ring), **filled, valid (`.is-valid`: `--border-success`, check icon, success text), invalid (`.is-invalid`: `--border-error`, `--text-error` message with error icon, `aria-invalid=\"true\"`, error linked via `aria-describedby`), disabled, read-only.**\n- Inputs: `--bg-secondary` fill, 4px pixel border, VT323 20px, height 48px, zero radius.\n\n**2.4 FAQ Accordion — No Modals in This Build**\n- Use native `\u003Cdetails class=\"faq__item\">` \u002F `\u003Csummary>` (keyboard-accessible by default). Summary = full-width blocky bar, flex `items-center justify-between`, question in Press Start 2P 12–14px, trailing Material `add` icon that jumps to a 45° rotation when open (**instant**, no transition — on-theme).\n- `details[open]` gets an accent outline; `summary:focus-visible` gets the standard pixel ring.\n- **Do not add any modal or popup dialog — none was requested.** If one ever becomes necessary, it must follow: centered flex overlay with backdrop, Material icon close button, Esc and overlay-click close, and focus trapping.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, `clamp()` typography, flex-wrap grids; verify 320px \u002F 768px \u002F 1024px \u002F 1440px with zero horizontal overflow.\n- **Animation — Pixel Art exception clause:** the transition tokens and `prefers-reduced-motion` respect rule stand, but per the theme's \"instant transitions\" directive all durations clamp to ≤ 120ms `linear`, color\u002Ffill swaps may be **0s (instant)**, and every looping effect uses **`steps()` timing** (frame-by-frame). Under `prefers-reduced-motion: reduce`: blinking cursor becomes static, marquee becomes static centered text, sprite animations pause.\n- **Mandatory signature effects:** (a) blinking block cursor after the H1 (`steps(2)` 1s infinite); (b) blinking \"PRESS START\" prompt in the hero; (c) at least one CSS-drawn sprite with ≥ 2 frame-by-frame frames animated via `steps(1, end)` keyframes; (d) full-width scrolling **marquee strip** (\"INSERT COIN ★ PRESS START ★ HIGH SCORE ★ 1UP…\") — track content duplicated with the duplicate `aria-hidden=\"true\"`, `animation-play-state: paused` on hover\u002Ffocus; (e) optional CRT scanline overlay (fixed, `pointer-events: none`, ≤ 5% black repeating gradient, `z-index: var(--z-scanlines)`).\n- **Accessibility (a11y):** semantic landmarks; exactly one `\u003Ch1>` then logical h2\u002Fh3 order; skip-to-content link as the first focusable element; full keyboard operability (menu, accordion, form, toggle); `aria-live=\"polite\"` regions for form feedback and loading states; AA contrast in **both** modes; never color-only state communication (always icon + text); touch targets ≥ 44px; `lang=\"en\"`; all decorative sprites and marquee duplicates `aria-hidden`.\n- **Mandatory visual feedback:** every hover, focus, and click on any interactive element produces a visible state change; nav\u002Ffooter links get a pixel highlight or underline on hover.\n- **Destructive actions:** none exist on this page, but still define `.btn--danger` (error-red fill, black outline, distinct in both themes) for consistency.\n\n---\n\n## 4. PAGE SECTION SPECIFICATIONS\n\n**4.1 Site Header (HUD bar):** sticky, `--bg-secondary`, 4px pixel bottom border, `z-index: var(--z-header)`. Flex `items-center justify-between`: brand wordmark (Press Start 2P), anchor nav (Features, How It Works, Pricing, FAQ), theme toggle, small `.btn--primary` \"Start\". Below 768px: nav links hide behind a Material `menu` button toggling a dropdown panel (`--z-dropdown`, flex column `items-center`) — JS toggles `aria-expanded`\u002F`aria-controls`, closes on Escape and outside click, moves focus into the panel.\n\n**4.2 Hero:** full-viewport-feel section (`min-height: calc(100vh - 64px)`), flex column `items-center`, centered text. Background: light mode = cream with a subtle dithered band (conic-gradient checkerboard); dark mode = deep navy with a CSS starfield (radial-gradient dots on an 8px grid). Kicker line (\"★ NEW GAME ★\"), H1 in Press Start 2P (`clamp(1.5rem, 5vw, 3rem)`) ending in the **blinking block cursor**, VT323 subhead, CTA pair (`.btn--primary` \"Press Start\" + `.btn--secondary` anchor \"Explore Features\"), blinking \"PRESS START\" prompt below, and one animated CSS pixel sprite (coin, heart, or starship — `aria-hidden`).\n\n**4.3 Marquee Strip:** black bar, Press Start 2P yellow text, scrolling per Section 3 rules; placed between Hero and Features (may repeat before the footer).\n\n**4.4 Features (3 cards):** section heading + VT323 intro, then a flex row (→ column on mobile) of 3 `.card`s: bordered icon chip with a Material Symbol, Press Start 2P title (≤ 16px), VT323 body, optional pixel badge (\"NEW\" \u002F \"1UP\"). Copy topics must be coherent with the fictional product.\n\n**4.5 How It Works (3 steps):** three flex-column steps labeled **LEVEL 1 \u002F LEVEL 2 \u002F LEVEL 3** (number plate in Press Start 2P inside a bordered square), Material icon, h3 title, VT323 text. Connect steps with a dashed pixel line (repeating-linear-gradient) — horizontal on desktop, vertical on mobile.\n\n**4.6 Testimonials (3 quotes):** flex-wrap row of quote cards, each with a blocky avatar square (CSS dither fill or Material `person` icon), VT323 quote, name in Press Start 2P 12px, role in VT323 `--text-secondary`, and a 5-star row of Material `star` icons with visually-hidden text \"Rated 5 out of 5 stars\" (never color-only).\n\n**4.7 Pricing (3 tiers):** flex row `items-stretch` (equal heights; comment the exception), column on mobile. Each tier: name (Press Start 2P), large price (Press Start 2P) + \"\u002Fmonth\" (VT323), 4–6 feature lines with Material `check` icons in `--text-success`, and a CTA (`.btn--primary` on the featured tier, `.btn--secondary` on the others). The **middle tier is `--featured`**: extra 4px accent outline, \"MOST POPULAR\" pixel badge, larger padding — no scaling transforms.\n\n**4.8 FAQ:** max-width 720px container; 5–6 native `\u003Cdetails>` items (Section 2.4) with real Q&A copy about the fictional product.\n\n**4.9 Final CTA:** full-width blocky panel filled with `--primary` and `--primary-contrast` text (pairing enforced). Newsletter form: flex row (column on mobile) with a visible email label, `.input` (48px height), and a `.btn` \"Start Playing\". Behavior: `script.js` validates the email (regex), shows inline error via `aria-describedby` + `aria-live`, sets the button to `.is-loading` (simulated ~1.2s), then flips to `.is-success` with a confirmation message (\"READY PLAYER ONE — check your inbox\") or `.is-error` — never color alone.\n\n**4.10 Footer:** inverted bar (`--bg-invert` \u002F `--text-invert`, contrast-paired). Flex-wrap layout: brand + one-line tagline, three secondary link columns (Product \u002F Company \u002F Support), a social row of Material icon buttons each with `aria-label`, and a bottom flex bar with copyright (auto-updating year) plus Privacy\u002FTerms links. Pixel dashed divider above the bottom bar.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — delivered in full in one response. The only permitted `\u003Cscript>` tags are the Tailwind CDN reference in `\u003Chead>` and a single `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`.\n- **Naming convention (never mix):** Tailwind's fixed utility set for layout only + BEM (`block__element--modifier`) for every component class in `style.css`. No ad-hoc class names.\n- **`script.js` scope only:** theme toggle + `localStorage` persistence; mobile menu (aria-expanded, Escape, outside click); newsletter validation\u002Floading\u002Fsuccess\u002Ferror flow with `aria-live`; footer year. No libraries, no other behavioral code.\n- **Copy:** real English arcade-voice copy everywhere — no lorem ipsum, no unrequested placeholders (the brand name and product copy are yours to write, since they were unspecified).\n- **Definition of Done checklist:** zero `style=` attributes; zero inline script blocks; light + dark both pass AA contrast; every button\u002Finput state from Sections 2.1–2.3 exists in CSS; keyboard-only pass (tab, enter, escape) works end to end; no horizontal scroll at 320px; `prefers-reduced-motion` neutralizes all loops; theme choice survives reload; all decorative elements `aria-hidden`; all icons from Material Symbols; all fonts from Google Fonts.\n- Output the three complete files now, in one response.\n",1791954992248]