[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-716-CABINET-07-TILT":3},"# SYSTEM PROMPT — LANDING PAGE BUILD: \"CABINET 07 — TILT\" (1990s Arcade Retro)\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page described below in a single attempt — production-quality, fully styled, fully interactive, no stubs, no \"TODO\" sections.\n\n---\n\n## 0. PROJECT BRIEF & THEME DIRECTION\n\n**0.1 Theme Identity**\n- **Theme name:** CABINET 07 — TILT — a 1990s arcade-cabinet aesthetic: pixel type, CRT glass, neon glow, deep purple gradients.\n- **Signature effects (mandatory):** Glow (neon text\u002Fbox shadows), Neumorphism (soft dual-shadow surfaces), Gradients (purple arcade gradients).\n- **CSS techniques to use:** Flexbox, Blend Modes (`mix-blend-mode`), Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius, Aspect Ratio.\n- **Default color mode:** Light (see §1.3 for the mandatory dark-mode exception clause).\n\n**0.2 Page Sections (in order — all mandatory)**\n1. **Sticky header:** logo, anchor navigation to all sections, dark-mode toggle button.\n2. **Hero:** display headline, subheadline, dual CTA buttons, and a decorative CSS-only arcade-cabinet screen (see §2.5).\n3. **Neon ticker strip:** decorative marquee (\"HIGH SCORE ★ INSERT COIN ★ …\").\n4. **Features:** exactly 3 cards, each with a Google Material Symbol icon, title, copy.\n5. **How It Works:** exactly 3 steps with pixel-styled numbered badges and a connecting line.\n6. **Testimonials:** 3 quote cards with ratings (Material Symbol `star`) and icon avatars — rendered via `script.js` from a data array through skeleton loading (see §2.2).\n7. **Pricing:** 3 tiers; middle tier visually highlighted as \"MOST PLAYED\"; each tier has a CTA button and a \"Full details\" trigger opening an accessible modal (see §2.4).\n8. **FAQ:** accessible animated accordion (5–6 questions).\n9. **Final CTA:** glowing gradient panel containing an email-capture form (see §2.3).\n10. **Footer:** secondary link columns (Product, Company, Support), social icons (Material Symbols), theme toggle, copyright with auto-updating year.\n\n**0.3 Copy Requirements**\n- Author original, on-brand **English** copy for every section — arcade voice allowed and encouraged (\"PRESS START\", \"PLAYER 1 READY\", \"INSERT COIN\"). **No lorem ipsum anywhere.**\n\n---\n\n## 1. ARCHITECTURE RULES (NON-NEGOTIABLE)\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n- **No inline CSS:** the `style=\"...\"` attribute is **forbidden** in the HTML.\n- **Class\u002FID selectors only:** every design property, layout rule, and state must be targeted via class or ID selectors in `style.css`.\n- **Minimal HTML modifications:** HTML must remain semantic and structure-agnostic — restyling the entire page must only require editing `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\n- Store **all** visual tokens in `:root` (light) and override under `.dark` \u002F `@media (prefers-color-scheme: dark)`. The following tokens are **mandatory** in both themes: `--primary, --secondary, --bg-primary, --bg-secondary, --text-primary, --text-secondary, --text-success, --text-error, --border-default, --border-error, --border-success, --radius-sm, --radius-md, --radius-lg, --shadow-sm, --shadow-md, --spacing-gap, --transition-fast, --transition-normal, --ease-standard, --z-dropdown, --z-modal, --z-toast`.\n- **Token mapping for this theme:**\n\n| Token | Light (default) | Dark |\n|---|---|---|\n| `--primary` | `#2a2140` | `#3a2b5e` |\n| `--secondary` | `#3a2b5e` | `#241a40` |\n| `--bg-primary` | `#efe9f7` (soft retro lavender — **not** pure white) | `#0b0913` |\n| `--bg-secondary` | `#fefefe` | `#171226` |\n| `--text-primary` | `#171226` | `#f2ecff` |\n| `--text-secondary` | `#4a3f66` | `#b3a6d9` |\n| `--text-success` | `#0f7a3d` | `#5be49b` |\n| `--text-error` | `#c92a4a` | `#ff7a8f` |\n| `--border-default` | `#cfc4e8` | `#3a2b5e` |\n| `--border-success` \u002F `--border-error` | `#35a06a` \u002F `#e05c75` | `#2f9e63` \u002F `#b2334c` |\n\n- **Retro extension tokens (also mandatory):** `--glow-a: #9d7bff`, `--glow-b: #ff4fd8` (neon magenta), `--glow-c: #4ffcff` (neon cyan), `--scanline-color`, `--font-display`, `--font-base`, plus `--ease-pixel: steps(4, end)` for staggered retro motion.\n- **Border radius:** keep radii small to preserve the pixel aesthetic — `--radius-sm: 2px`, `--radius-md: 4px`, `--radius-lg: 8px`.\n- **Neumorphism via shadows:** in Light mode define `--shadow-sm` \u002F `--shadow-md` as soft dual shadows (e.g., light top-left highlight + dark bottom-right shade on `--bg-primary`); in Dark mode redefine them as subtle outer-glow shadows. Pixel-step accent borders (hard-offset `box-shadow: Npx Npx 0`) may be added per component.\n- **Contrast pairing:** every light background token pairs with a dark text token, and every dark background token pairs with a light text token — in **both** themes. Where a near-white surface is needed, use `#fefefe`, never `#ffffff`.\n- **Elevation:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000` — layered components must never collide.\n\n### 1.3 Mandatory Dark Mode Support\n- **Implementation:** provide full dark-mode token overrides under both `.dark` (class) **and** `@media (prefers-color-scheme: dark)`. Switching themes must only swap CSS variables — no HTML restructuring.\n- **Persistence:** read the saved choice from `localStorage`; fall back to `prefers-color-scheme` on first visit. Apply the theme class at the very top of the deferred `script.js` (before any DOM logic) to minimize flash-of-wrong-theme. Do not add extra inline scripts.\n- **Toggle:** a visible toggle in the header **and** footer with a Material Symbol icon, correct `aria-pressed` state, and descriptive `aria-label` that updates with state.\n- **Exception clause:** per the theme spec, the default first-load mode is **Light**; Dark Mode must still be fully implemented and fully accessible.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with **Flexbox** (Tailwind flex utilities allowed).\n- **Default alignment rule:** every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified in a CSS comment.\n- **Mobile-first:** rows collapse to columns on small viewports; no horizontal scrolling at any width; use `clamp()` for fluid typography; the header nav collapses into a keyboard-accessible mobile menu (hamburger via Material Symbol).\n\n### 1.5 Framework: Tailwind CSS\n- Use **Tailwind CSS via CDN** for layout utilities. All themed styling must live in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, `.section`, `.badge`) built on the CSS variables — never hardcode theme colors in utilities.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Fonts:** load **\"Press Start 2P\"** (pixel display face) and **\"Chakra Petch\"** (readable retro-tech body face) via Google Fonts `\u003Clink>`. Bind them to `--font-display` and `--font-base`. Use the pixel face **only** for headings, badges, and short button labels; all body copy uses `--font-base` for legibility.\n- **Icons:** use **Google Material Symbols** exclusively — **inline SVGs and local icon files are forbidden.**\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn` + variants)\nStyle **all** states via CSS classes:\n- **Default:** flex; `align-items: center; justify-content: center; gap: 0.5rem`; minimum touch target 44×44px; pixel face on labels; hard pixel-step shadow or glow ring.\n- **Hover:** glow intensification (box\u002Ftext shadow using `--glow-a\u002Fb`) with `cursor: pointer`.\n- **Focus:** distinct focus ring built from CSS variables (`outline` + `box-shadow`) for keyboard navigation.\n- **Active\u002FPressed:** click feedback — press the button into the cabinet (`translate(2px, 2px)` collapsing its pixel-step shadow, or `scale(0.97)`).\n- **Loading:** disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol **without changing button dimensions**.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states driven by `--text-success` \u002F `--text-error`.\n- **Variants:** `.btn-primary` (solid purple + neon glow), `.btn-ghost`, and `.btn-danger` — the danger variant must be visually distinct in **both** themes.\n\n### 2.2 Card Component (`.card`)\n- **Default:** flexible flexbox layout; `--bg-secondary` surface; subtle border + neumorphic `--shadow-sm`; small radius per tokens.\n- **Hover:** `transform: translateY(-2px)` plus a glow border shift.\n- **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define `.skeleton` shimmer keyframes in CSS. **Demonstrate it:** testimonials render from a JS data array — skeleton cards show first, then populate, announced via `aria-live=\"polite\"`, with no layout jump.\n- **Empty State:** define a fallback layout (Material Symbol + guidance text) shown if the data array is empty.\n\n### 2.3 Form & Input (Final CTA email capture)\n- **Structure:** `.input-group` flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error-feedback element with `aria-live=\"polite\"`.\n- **States (all via CSS):** empty, focused (outline ring from tokens), filled, valid (success border + `check` icon), invalid (error border + error icon + message text), disabled, read-only.\n- **Behavior:** validate email format on submit; the submit button enters the **loading** state, then resolves to **success** (\"PLAYER 2 ADDED — check your inbox\") or **error** (\"Continue? Insert a valid email\"). Never rely on color alone — pair color with icon + text.\n\n### 2.4 Modal \u002F Popup & Accordion\n- **FAQ accordion:** each item is a `\u003Cbutton aria-expanded aria-controls>` toggling a region; open\u002Fclose animated via CSS (`grid-template-rows: 0fr → 1fr` or equivalent); fully keyboard operable; chevron Material Symbol rotates with state.\n- **Pricing modal (\"Full details\"):** centered flex overlay (`align-items: center`), backdrop, Material Symbol close button, animated opening\u002Fclosing via CSS transitions, keyboard **focus trapping**, close via `Esc` and overlay click, and internal states for loading → content → success\u002Ferror. Layered at `--z-modal`.\n- Any toast\u002Fstatus feedback layers at `--z-toast`.\n\n### 2.5 Retro Visual Treatments (CSS-only, mandatory)\n- **Hero cabinet screen:** decorative arcade monitor built from CSS — `aspect-ratio: 4\u002F3`, layered radial\u002Flinear gradients using the palette, a scanline overlay via `repeating-linear-gradient` pseudo-element, screen glow via `mix-blend-mode: screen` layer (`aria-hidden`), and a blinking \"PRESS START\" keyframe.\n- **Glow:** text-shadow\u002Fbox-shadow neon glow on display headings, primary buttons, and highlighted pricing tier; gradient text on the hero headline via `background-clip: text`.\n- **Neumorphism:** soft inset\u002Foutset dual shadows on cards, inputs, and step badges in Light mode; adapted glow shadows in Dark mode.\n- **Animations:** `blink` (INSERT COIN microcopy), `float` (hero cabinet), marquee ticker (`translateX` infinite, `aria-hidden`, pauses on hover), and staggered scroll-reveal via IntersectionObserver toggling `.is-visible` with `--transition-normal` and `--ease-pixel`.\n- **Blend modes** are decorative only — they must never degrade text contrast.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.\n- **Smooth animations:** every state change transitions via `--transition-fast`\u002F`--transition-normal`; **`prefers-reduced-motion` must disable** marquee, blink, float, and scanline motion (reveals reduce to opacity-only).\n- **Accessibility:** sufficient contrast in **both** modes; never color alone to communicate state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); a skip-to-content link; logical focus order; full keyboard operability (no mouse-only interactions); `aria-live` for form feedback, skeleton→content swaps, and toasts.\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Destructive actions:** `.btn-danger` must be clearly distinct in Light and Dark themes.\n\n---\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n- **Files:** `index.html`, `style.css`, `script.js`. Exactly **one** `\u003Cscript src=\"script.js\" defer>` reference; no inline `\u003Cscript>` logic blocks.\n- **Naming:** one consistent **BEM** convention throughout — never mix conventions. Reusable classes `.btn`, `.card`, `.input-group`, `.section`, `.skeleton` must exist and be reused.\n- **Copy:** real, themed English copy everywhere — no lorem ipsum, no unrequested placeholders.\n- **Script.js scope:** theme toggle + persistence, mobile menu, accordion, modal with focus trap, form validation + simulated async submit states, testimonial skeleton render, scroll-reveal observer, dynamic footer year. Nothing else.\n- **Definition of Done — verify before submitting:** zero inline `style` attributes; zero inline SVGs; dark mode fully functional and persisted; all button\u002Fcard\u002Fform\u002Fmodal states present; no horizontal scroll at 320px width; keyboard-only operation works end-to-end; reduced-motion respected; contrast pairing holds in both themes.\n",1791954991602]