[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-542-Voxel-Art":3},"# CODING AGENT PROMPT — VOXEL ART LANDING PAGE (FULL BUILD SPECIFICATION)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single attempt — no clarifying questions, no partial output. Generate the full, final code immediately, following every rule below.\n\n**Product identity:** Build the page for **\"VoxelForge\"** — a browser-based voxel art studio (Minecraft \u002F MagicaVoxel-adjacent creative tool). Write **all user-facing copy in English** — real, themed, playful-crafty-confident copy. Lorem ipsum is forbidden.\n\n**Theme:** Voxel Art — 3D cubes as pixels, blocky charming forms, bright toy-like palette, isometric voxel dioramas, hard offset \"cube shadows,\" chunky solid outlines, top-face highlight gradients. **No blur, no rounded corners, no soft gradient fills.**\n\n**Sections (in this order):** Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.\n\n---\n\n## 1. STRICT ARCHITECTURE RULES\n\n**1.1 CSS-First & Zero Inline CSS**\n- All styling lives exclusively in `style.css`. The `style=\"...\"` attribute is **forbidden** in HTML.\n- Target everything via class\u002FID selectors only. HTML must stay semantic and visually agnostic — reskinning must never require markup edits.\n\n**1.2 Design Tokens (CSS Variables, mandatory)**\n- Store every visual token in `:root`. Implement the following base token sheet **exactly**, then extend it as specified:\n```css\n:root {\n  \u002F* color *\u002F\n  --color-bg: #a8e0f0;\n  --color-surface: #ffffff;\n  --color-surface-strong: #eef7fb;\n  --color-border: #16324a;\n  --color-text: #16324a;\n  --color-text-muted: #3b5a72;\n  --color-primary: #ff6b3d;\n  --color-accent: #2fbf71;\n  --color-yellow: #ffc93c;\n  \u002F* radius — voxel = always square *\u002F\n  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 0px;\n  \u002F* shadow — hard offset cube shadows, no blur *\u002F\n  --shadow-sm: 3px 3px 0 var(--color-border);\n  --shadow-md: 5px 5px 0 var(--color-border);\n  --shadow-lg: 8px 8px 0 var(--color-border);\n  \u002F* font *\u002F\n  --font-sans: 'Space Grotesk', 'Segoe UI', sans-serif;\n  --font-display: 'Press Start 2P', 'Space Grotesk', monospace;\n  --font-mono: 'VT323', ui-monospace, monospace;\n  \u002F* text scale *\u002F\n  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;\n  --text-4xl: 2.75rem; --text-5xl: 3.5rem;\n  \u002F* space *\u002F\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;\n  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  \u002F* ease — signature stepped motion *\u002F\n  --ease-standard: steps(4, end);\n  \u002F* signature effects *\u002F\n  --voxel-top: linear-gradient(180deg, rgba(255,255,255,0.55) 0 30%, transparent 30%);\n  --voxel-side: 4px solid var(--color-border);\n  --pixel-notch: 8px;\n}\n```\n- **Required additions (same `--color-*` naming family, no other convention):** `--font-base: var(--font-sans);` (bind the body font to it); `--spacing-gap: var(--space-4);`; `--transition-fast: 0.1s;`; `--transition-normal: 0.2s;`; `--z-dropdown: 100; --z-modal: 200; --z-toast: 300;`; `--color-bg-secondary` (alias of `--color-surface-strong`); `--color-text-primary` (alias of `--color-text`); `--color-text-secondary` (alias of `--color-text-muted`); `--color-border-default` (alias of `--color-border`); `--color-text-success: #15734a;`; `--color-text-error: #b3362e;`; `--color-border-success: #1a8f55;`; `--color-border-error: #b3362e;` plus on-fill text tokens `--color-on-primary: #16110c;`, `--color-on-accent: #0a2416;`, `--color-on-yellow: #16324a;`.\n- **Contrast pairing rule:** every light background token pairs with a dark text token and vice versa — enforced in both light and dark themes (see 1.3). Bright fills (`--color-primary`, `--color-accent`, `--color-yellow`) always pair with their dark `--color-on-*` text tokens, never with `--color-text`.\n- **Light-mode background exception:** the page background must use `--color-bg` (#a8e0f0) — never pure white. **Declared-theme exception:** this spec explicitly defines `--color-surface: #ffffff` for card\u002Fnav surfaces; retain that exact declared value for surfaces only.\n\n**1.3 Mandatory Dark Mode (\"night diorama\" palette)**\nThe source spec does not declare theme modes — therefore you **must design, implement, and visually validate both light and dark modes before considering the build complete.**\n- Define dark tokens (identical values) in **two places**: the `.dark` class selector, and `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }`:\n```css\n\u002F* Dark theme — moonlit navy; bright toy colors stay *\u002F\n--color-bg: #141f33;\n--color-surface: #1d2b42;\n--color-surface-strong: #273a58;\n--color-border: #a8d8ec;      \u002F* chunky outlines + offset shadows glow moonlit blue *\u002F\n--color-text: #eef7fd;\n--color-text-muted: #a9c4d9;\n--color-primary: #ff6b3d;    \u002F* unchanged *\u002F\n--color-accent: #2fbf71;\n--color-yellow: #ffc93c;\n--color-text-success: #6fdcae;\n--color-text-error: #ff9d8f;\n--color-border-success: #2fbf71;\n--color-border-error: #ff6b5e;\n```\n- Theme switching must work purely through the CSS variables — **zero HTML restructuring** between modes.\n- **Persistence:** store the user's choice in `localStorage` (key: `voxelforge-theme`), falling back to `prefers-color-scheme` on first visit. `script.js` toggles `.dark` \u002F `.light` on `\u003Chtml>` as early as possible to minimize flash, and follows OS-level scheme changes when no stored preference exists.\n- Provide a **visible toggle button** in the header nav: Google Material Symbol (`dark_mode` \u002F `light_mode`), correct `aria-pressed` state, and dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build every layout structure with Flexbox (and CSS Grid only for card grids).\n- Every flex container defaults to `align-items: center` unless an explicitly justified exception exists.\n- All layouts must be mobile-responsive out of the box: multi-column rows convert to a single column below ~768px. **No horizontal scrolling at any viewport ≥320px** (use `minmax(0, 1fr)`, fluid `clamp()` type, `max-width: 100%`).\n\n**1.5 Styling Approach — Clean Custom CSS**\n- No framework was requested and the design system is hand-authored custom CSS: use **clean custom CSS organized in cascade layers** — `@layer tokens, base, components, sections, utilities;` — with `@apply`-style consolidation only if it helps. Do **not** add the Tailwind CDN or mix utility-class conventions into the markup.\n- The base component sheet in §2 is your mandatory foundation: implement it exactly, then extend.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load via Google Fonts `\u003Clink>` tags (with `preconnect`): **Space Grotesk** (500, 700) for body\u002FUI, **Press Start 2P** (400) for display headlines, **VT323** (400) for numerals\u002Fmono accents — all with `font-display: swap`. Bind the base font to `--font-base`.\n- Icons: **Google Material Symbols — Sharp variant with FILL 1** (define a shared `.icon` class with `font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24`). **Raw inline SVGs and local icon files are forbidden.**\n- Decorative icons get `aria-hidden=\"true\"`; icon-only controls get `aria-label`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.0 Mandatory Base Component Sheet (implement exactly, then extend)**\n```css\nbody { margin: 0; color: var(--color-text); font-family: var(--font-base); background: var(--color-bg); }\n.nav { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-6);\n  background: var(--color-surface); border: var(--voxel-side); box-shadow: var(--shadow-md); }\n.btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem;\n  font: 700 var(--text-base)\u002F1 var(--font-sans); color: var(--color-text);\n  padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm);\n  background: var(--color-yellow); color: var(--color-on-yellow);\n  border: var(--voxel-side); background-image: var(--voxel-top);\n  box-shadow: var(--shadow-sm); cursor: pointer;\n  transition: transform .1s var(--ease-standard), box-shadow .1s var(--ease-standard); }\n.btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-md); }\n.btn:active { transform: translate(3px,3px); box-shadow: none; }\n.btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }\n.btn[disabled] { opacity: .5; cursor: not-allowed; }\n.btn--primary { background: var(--color-primary); color: var(--color-on-primary); background-image: var(--voxel-top); }\n.card { background: var(--color-surface); color: var(--color-text); padding: var(--space-6);\n  border: var(--voxel-side); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); position: relative; }\n.card::before { content: \"\"; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--voxel-top); }\n.input { width: 100%; box-sizing: border-box; color: var(--color-text); font: var(--text-base) var(--font-sans);\n  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);\n  background: var(--color-surface-strong); border: var(--voxel-side); box-shadow: var(--shadow-sm); }\n.input::placeholder { color: var(--color-text-muted); }\n.input:focus { outline: none; box-shadow: var(--shadow-md); }\n.badge { display: inline-flex; align-items: center; gap: .4em; font-size: var(--text-xs); font-weight: 700;\n  padding: .3em .8em; border-radius: var(--radius-pill); background: var(--color-accent);\n  color: var(--color-on-accent); border: 2px solid var(--color-border); }\n@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover, .btn:active { transform: none; } }\n```\n\n**2.1 Buttons — full state matrix**\n- **Default:** flex, centered, ≥44×44px touch target, cube-shadow + chunky border + top-face highlight (above).\n- **Hover:** cube \"lift\" (`translate(-2px,-2px)` + shadow growth); **Active\u002FPressed:** cube \"press\" (`translate(3px,3px)`, shadow removed); **Focus:** visible 3px ring (above) — all via classes only.\n- **Loading (`.is-loading`):** disables interaction and prevents double-clicks; hide the label visually (`visibility: hidden`) and overlay an absolutely-centered **square CSS spinner** (a bordered square rotating with `steps(8, end)`, no blur) — button dimensions must not change; set `aria-busy=\"true\"`.\n- **Disabled:** `opacity: .5`, desaturated, `cursor: not-allowed`, no hover\u002Factive transforms.\n- **Success\u002FError transient states (`.btn--success`, `.btn--error`):** temporary post-submit feedback — success uses `--color-accent`\u002F`--color-on-accent` with a `check` icon; error uses `--color-border-error` + `--color-text-error` with an `error` icon. Both must stay distinct in light and dark.\n- **Destructive (if ever added):** `.btn-danger` must be visually distinct in **both** themes (error border + error text on surface). None is expected in this build.\n\n**2.2 Cards — full state matrix**\n- **Default:** flexbox column layout, `--color-surface`, chunky border, cube shadow, top highlight strip (above).\n- **Hover:** voxel-consistent lift — `translate(-2px,-2px)` with shadow growth (matching the button language).\n- **Focus-within:** border color shifts to `--color-primary` when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** `.card--skeleton` shimmer defined in CSS — a flat, hard-edged repeating-gradient sweep (no blur), sized to prevent layout jumps.\n- **Empty state:** structured fallback with a Material Symbol icon and short guidance text.\n- The hover\u002Ffocus-within states are mandatory on Features, Testimonials, and Pricing cards; define skeleton\u002Fempty classes regardless.\n\n**2.3 Forms & Inputs — full state matrix**\n- Structure: `.input-group` as a flex container wrapping a visible `\u003Clabel>`, the `.input` field, and a dedicated `.input-feedback` container (`aria-live=\"polite\"`).\n- States: **Empty, Focused** (shadow growth per base sheet + focus-visible ring), **Filled, Valid** (`.is-valid`: `--color-border-success` + `check` icon), **Invalid** (`.is-invalid`: `--color-border-error`, `--color-text-error` message + `error` icon — never color alone), **Disabled, Read-only.**\n- The Final CTA email form implements every one of these states live (see §3.8).\n\n**2.4 FAQ Accordion**\n- Use native `\u003Cdetails>` \u002F `\u003Csummary>` (keyboard-accessible by default). Style `summary` as a flex row (question + `expand_more` icon), ≥44px target, focus-visible ring, icon rotating 90° via a stepped CSS transition on `[open]`; add `name=\"faq\"` for exclusive-open behavior with graceful degradation. Respect `prefers-reduced-motion`.\n\n**2.5 Modal \u002F Toast (conditional)**\n- No modal is required by this build — do not add one. If any overlay is ever introduced: centered flex container, backdrop, `--z-modal`, Material Symbol close button, focus trapping, Esc + overlay-click close, animated open\u002Fclose. Feedback toasts (if used) use `--z-toast` + `aria-live`.\n\n**2.6 Signature Voxel Visual System (pure CSS, no images)**\n- **Voxel cube:** a `.voxel-cube` component — a square box sized by `--cube-size` containing three absolutely-positioned full-size faces clipped with `clip-path` polygons: **top** `polygon(50% 0, 100% 25%, 50% 50%, 0 25%)` (lightest — base color mixed toward white), **left** `polygon(0 25%, 50% 50%, 50% 100%, 0 75%)` (mid), **right** `polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%)` (darkest — mixed toward black). Light comes from upper-left; keep lightness ordering consistent everywhere. Use `color-mix()` or precomputed hexes.\n- **Diorama:** the hero visual is an isometric CSS diorama — 6–12 `.voxel-cube` elements (e.g., a small floating grass platform, a tree with orange trunk cubes and accent-green leaf cubes, a yellow cloud cube) inside a `position: relative` stage, entirely `aria-hidden=\"true\"`, decorative, scaling gracefully across breakpoints (cube size via `--cube-size`, stage via percentage positioning or transform scale). Give one or two cubes a gentle stepped \"bob\" (`translateY` ±4px, ~2.4s, `steps(6, end)`, infinite alternate) that `prefers-reduced-motion` disables.\n- **Brand mark:** one mini `.voxel-cube` beside the Press Start 2P wordmark in the nav and footer.\n- **Global aesthetic constraints:** `border-radius` stays 0 everywhere; no blur shadows; no soft gradients (the only gradient allowed is the flat `--voxel-top` highlight); interaction easing is always `var(--ease-standard)`.\n\n---\n\n## 3. PAGE SECTION REQUIREMENTS (all copy in English, real and themed)\n\n**3.1 Header\u002FNav** — Sticky header using the `.nav` pattern (bottom voxel border + shadow, above all content). Contains: brand mark + \"VOXELFORGE\" wordmark, links (Features, How It Works, Pricing, FAQ) with smooth CSS `scroll-behavior` (auto under reduced motion), and the **dark-mode toggle** (per §1.3). Mobile: hamburger (`menu` icon) toggles a dropdown panel using `--z-dropdown`, with `aria-expanded`, Esc-to-close, and focus management. Include a \"Skip to content\" skip link. Apply `scroll-margin-top` to all anchored sections.\n\n**3.2 Hero** — Two-column flex row (text + diorama) → single column mobile, `align-items: center`. Contents: `.badge` announcement, H1 in Press Start 2P with fluid `clamp()` sizing and generous line-height, muted subtitle in Space Grotesk, two CTAs (`.btn--primary` \"Start building free\" → `#pricing`; `.btn` \"See how it works\" → `#how`), and a small VT323 stats line (e.g., \"1.4M cubes placed · 12,000 builders\"). Diorama per §2.6.\n\n**3.3 Features — 3 cards** — `.card` grid (3 → 1 columns). Each card: an icon tile (square, chunky border, cube shadow, palette-colored background cycling yellow\u002Fprimary\u002Faccent, Material Symbol icon — e.g., `view_in_ar` \"Stack cubes in your browser\", `download` \"Export to .vox, .obj, and .gltf\", `groups` \"Remix community galleries\"), Space Grotesk 700 title, muted body copy. Mandatory hover + focus-within states.\n\n**3.4 How It Works — 3 steps** — Horizontal flex row → vertical stack mobile. Each step: a number tile (square, chunky border, cube shadow, Press Start 2P numeral \"01\u002F02\u002F03\" on cycling palette fills), step title, description. Connect steps on desktop with a dashed pixel divider (flat repeating-linear-gradient, `--color-border`), hidden on mobile. Steps: 01 Pick your canvas → 02 Stack your cubes → 03 Export & share.\n\n**3.5 Testimonials — 3 cards** — Each: a 5-star rating row (filled Material Symbol `star` icons, `aria-label=\"Rated 5 out of 5 stars\"`), quote in Space Grotesk, a dashed divider, an avatar tile (square, palette background, VT323 initials, voxel border), name + muted role. Real English quotes from plausible creators.\n\n**3.6 Pricing — 3 tiers** — Three `.card`s, middle tier highlighted: `.badge` \"MOST POPULAR\", `--shadow-lg`, modest `translateY(-8px)` lift on ≥768px (hover still moves it), and the `.btn--primary` CTA. Price numerals in large VT323 with a muted \"\u002Fmonth\" label. Feature lists: `check` icons in `--color-text-success` for included, muted `close` icons for absent. Outer tiers use `.btn` and scroll to `#cta`. Stack vertically on mobile.\n\n**3.7 FAQ** — 4–6 real `\u003Cdetails>` items (per §2.4) covering exports, browser support, cube limits, refunds — each styled as a bordered card consistent with the voxel language, under an H2.\n\n**3.8 Final CTA** — Full-bleed band: `--color-surface-strong` background, voxel borders top and bottom, Press Start 2P headline, short copy, and the email form (per §2.3): `.input-group` flex row → column mobile, visible label, `type=\"email\"` `.input`, `.btn--primary` submit. `script.js` handles submit: prevent default → regex-validate → invalid: `.is-invalid` + `--color-text-error` message in the `aria-live` feedback container → valid: button enters loading state (~800ms simulated) → button success state + inline success message (\"Cube reserved — check your inbox.\") + cleared input. All feedback respects reduced motion.\n\n**3.9 Footer with secondary links** — Top area: brand (cube mark + wordmark) + one-line blurb + social icon buttons (44px square, chunky borders, aria-label per network, Material Symbol glyphs; `href=\"#\"` permitted here only as unspecified destinations). Middle: three link columns (Product \u002F Resources \u002F Company) — in-page anchors where targets exist, otherwise clearly-labeled `#` placeholders. Bottom bar: © current year VoxelForge, tagline \"Made of 100% cubes.\", and a back-to-top link (`arrow_upward`) with smooth scroll. Footer sits on `--color-surface` with a top voxel border; every link has hover + focus-visible feedback.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography, no horizontal overflow — self-test at 320px, 768px, 1024px, 1440px.\n- **Smooth stepped animations:** every state change transitions with `var(--transition-fast)`\u002F`var(--transition-normal)` and `var(--ease-standard)`; the existing `prefers-reduced-motion` block must be extended to cover **all** animations and transforms globally.\n- **Accessibility:** contrast ≥ 4.5:1 for text in **both** light and dark (verify at minimum: text\u002Fbg, text\u002Fsurface, muted\u002Fbg, on-fill tokens, success\u002Ferror tokens per theme — validate with a contrast tool before finishing). Never rely on color alone — pair icons with text. Semantic HTML5 landmarks (`header`, `main`, `footer`), one H1, logical heading order, `aria-labelledby` on every section, full keyboard operability (nav menu, accordion, form, toggle), logical focus order, visible focus rings everywhere, `aria-live` for all dynamic feedback.\n- **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.\n- **All CTAs must have real behavior** (in-page anchors or the working form) — no dead primary buttons.\n\n---\n\n## 5. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` before `\u003C\u002Fbody>` — no other inline scripts. Google Fonts + Material Symbols `\u003Clink>` tags with `preconnect` in `\u003Chead>`. No external images — every visual is CSS-built.\n- **Naming:** one convention throughout — **BEM** (`block__element--modifier`), consistent with the provided `.btn--primary` pattern. Never mix conventions.\n- **No unrequested placeholders:** all copy is real English product copy; `lorem ipsum` is forbidden; `#` links are allowed only for unspecified footer\u002Fsocial destinations.\n- **Final self-check before submitting:** zero `style=\"...\"` attributes · zero `\u003Csvg>` elements · dark mode persists via localStorage with correct toggle `aria-pressed`\u002F`aria-label` · both themes contrast-validated · reduced motion disables all animation · no horizontal scroll ≥320px · heading order and landmarks correct · all buttons\u002Flinks wired · FAQ keyboard-operable · form states fully implemented · base component sheet implemented exactly as specified.\n",1791954988950]