[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-239-Cyberpunk":3},"# System Prompt: Build a Cyberpunk Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Cyberpunk-themed Landing Page** on the first attempt. The page is dark-tech by default, but must still ship a fully validated light mode.\n\n**Sections required (in order):** 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 RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. **Forbidden:** the `style=\"...\"` attribute anywhere in the HTML.\n* Target everything via class\u002FID selectors. HTML stays semantic and styling-agnostic.\n* Changing the theme must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nAdopt the Cyberpunk token set below in `:root`. Map the generic theme tokens onto it (`--primary: var(--color-primary)`, `--bg-primary: var(--color-bg)`, `--text-primary: var(--color-text)`, `--text-secondary: var(--color-text-muted)`, `--text-error: var(--color-accent)`, `--text-success: var(--color-yellow)`, `--border-default: var(--neon-border)`, `--border-error: 1px solid var(--color-accent)`, `--border-success: 1px solid var(--color-yellow)`).\n\n```css\n:root {\n  --color-bg: #05010d;\n  --color-surface: #0d0221;\n  --color-surface-2: #160a2b;\n  --color-text: #e8f9ff;\n  --color-text-muted: #7a8fa6;\n  --color-primary: #00fff5;\n  --color-accent: #ff003c;\n  --color-magenta: #ff00e6;\n  --color-yellow: #faff00;\n  --color-border: #00fff5;\n  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-pill: 999px;\n  --shadow-glow-cyan: 0 0 6px #00fff5, 0 0 18px rgba(0,255,245,0.6);\n  --shadow-glow-magenta: 0 0 6px #ff00e6, 0 0 18px rgba(255,0,230,0.6);\n  --font-sans: 'Rajdhani', 'Chakra Petch', system-ui, sans-serif;\n  --font-display: 'Orbitron', 'Rajdhani', sans-serif;\n  --font-mono: 'Share Tech Mono', ui-monospace, monospace;\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; --text-4xl: 3rem; --text-5xl: 4rem;\n  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;\n  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;\n  --ease-standard: steps(3, end);\n  --ease-glitch: steps(2, jump-none);\n  --scanline: repeating-linear-gradient(0deg, rgba(0,255,245,0.05) 0 1px, transparent 1px 3px);\n  --neon-border: 1px solid #00fff5;\n  --transition-fast: 100ms var(--ease-standard);\n  --transition-normal: 200ms var(--ease-standard);\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n}\n```\n\n* **Contrast pairing:** every background token pairs with a readable text token in **both** light and dark themes. In light mode, do **not** use pure white — use `#fefefe`-adjacent surfaces with dark text; neon accents may remain but must pass contrast against the light surface.\n* **Signature rule:** glow the borders, not the fills. Hard clipped corners via the `.clip` polygon. Scanline overlay on `body::after` (fixed, `pointer-events: none`, `z-index: 9999`).\n\n**1.3 Mandatory Light & Dark Mode**\n* Dark (Cyberpunk neon-noir) is the default theme. **A light mode must also be defined and validated before publishing** — the source spec did not declare modes, so both are required.\n* Implement via `@media (prefers-color-scheme: light)` **and** a `.light` class override on `\u003Chtml>`\u002F`\u003Cbody>`; all tokens swap through CSS variables only — no HTML restructuring.\n* Provide a visible theme toggle button (Google Material Symbols icon: `dark_mode`\u002F`light_mode`) with `aria-pressed` and `aria-label=\"Toggle light mode\"`. Persist choice in `localStorage`; fall back to `prefers-color-scheme` on first visit.\n* Light mode guidance: desaturated near-white surfaces (`#fefefe`, `#f2f4f8`), dark text (`#0d0221`), cyan\u002Fmagenta accents darkened enough for contrast (e.g., `#007a75` \u002F `#b300a0`), borders solid instead of glowing, scanline overlay reduced or removed.\n\n**1.4 Flexbox Layout & Mobile-First**\n* Every flex container defaults to `align-items: center` unless explicitly justified otherwise.\n* Mobile-first: hero stacks vertically, feature\u002Fpricing\u002Ftestimonial grids collapse to single column below 768px, nav collapses to a menu button. **No horizontal scrolling at any viewport width.**\n\n**1.5 Framework**\n* Use Tailwind CSS (CDN) or clean custom CSS with `@layer`\u002F`@apply`; all utilities map back to the CSS variables and generic reusable classes (`.btn`, `.card`, `.input`, `.badge`, `.nav`, `.clip`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Google Fonts: **Orbitron** (display\u002Fheadings), **Rajdhani** (body), **Share Tech Mono** (labels, code, HUD text). Include via `\u003Clink>` tags.\n* Icons: **Google Material Symbols** only. **Forbidden:** raw inline SVGs or local icon files.\n\n---\n\n## 2. COMPONENT SPECIFICATIONS\n\n**2.1 Buttons (`.btn`, `.btn--danger`, `.btn--primary`)**\n* Default: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min touch target 44×44px; uppercase Orbitron display font, letter-spacing `.08em`, transparent bg, 1px cyan border, `--shadow-glow-cyan`.\n* Hover: fill with `--color-primary`, text flips to `--color-bg`, `cursor: pointer`.\n* Focus-visible: 2px magenta outline, 2px offset.\n* Active: `transform: scale(0.97)`.\n* Loading: disabled interaction, CSS spinner (rotating Material Symbol `sync`), no dimension shift.\n* Disabled: `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.\n* `.btn--danger`: red accent border + magenta\u002Fred glow, visually distinct in both themes.\n* `.btn--primary` (Final CTA): filled cyan with glow.\n\n**2.2 Cards (`.card` + `.clip`)**\n* Default: `--color-surface` bg, `--neon-border`, `--shadow-glow-cyan`, `--space-6` padding, clipped corners.\n* Hover: `transform: translateY(-2px)` + intensified glow.\n* `:focus-within`: border shifts to magenta.\n* Skeleton shimmer class for async content; empty-state layout with a Material Symbol icon + guidance text.\n* Feature cards: icon + title + description. Pricing tiers: badge (\"MOST WANTED\" on the middle tier), price in mono font, feature list, CTA button.\n\n**2.3 Forms & Inputs (`.input`)**\n* Newsletter signup in the Final CTA section: flex container with label, mono-font input, and a dedicated error feedback element.\n* States: empty, focused (cyan glow ring), filled, valid (yellow border + `check` icon), invalid (red border + `error` icon + message), disabled, read-only.\n* Errors announced via `aria-live=\"polite\"`.\n\n**2.4 FAQ Accordion**\n* Native `\u003Cdetails>\u002F\u003Csummary>` or ARIA-compliant custom accordion; open\u002Fclose animated with `--transition-normal`; chevron Material Symbol rotates; keyboard operable.\n\n**2.5 Modals \u002F Toasts (if any interactive confirmation is needed)**\n* Centered flex overlay, backdrop blur, animated open\u002Fclose, Google Icon close button, focus trap, `Esc`\u002Foverlay-click to close, `z-index: var(--z-modal)`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid type via `clamp()`, no horizontal overflow.\n* **Glitch\u002FHUD effects:** subtle glitch text-shadow on hero headline, HUD corner brackets on cards, scanlines on hero, holographic gradient on section dividers — all CSS-only, all disabled under `prefers-reduced-motion: reduce` (also remove `body::after` scanline overlay and button transitions).\n* **Accessibility:** WCAG AA contrast in **both** light and dark modes; never rely on color alone (pair icons\u002Ftext with state colors); semantic HTML5 (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cnav>`, `\u003Cfooter>`); logical focus order; full keyboard operability.\n* **Mandatory visual feedback** on every click\u002Fhover\u002Fsubmission.\n* **Copy:** all user-facing copy in **English**, cyberpunk tone (\"Jack in\", \"Sync your deck\", \"Choose your implant tier\"), real descriptive text — no lorem ipsum.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** `index.html`, `style.css`, `script.js` — separate, no inline `\u003Cscript>` beyond a single deferred entry-point reference, no inline CSS.\n* **Naming:** one consistent convention (BEM: `.card`, `.card__title`, `.card--featured`) across the entire deliverable.\n* **Script.js scope:** theme toggle + persistence, FAQ accordion behavior, form validation feedback, smooth-scroll nav only. No unrequested behavioral JS.\n* **Footer:** secondary link columns (Product, Company, Legal), social icon links (Material Symbols), copyright line in mono font.\n* **Testimonials:** 3 quotes with mono-font attribution, avatar placeholder initials in a clipped hexagon, no external images required.\n* Validate both themes before declaring completion.\n",1791954983686]