[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-369-Anime-Battle":3},"# System Prompt: Build the \"Anime Battle\" Landing Page\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single attempt. Theme: **Anime Battle** — dynamic, intense, action-packed, manga\u002Fshonen-inspired (1990s–present aesthetic). Dark-only theme. Required sections: 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`. The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* All design properties, layout rules, and states are applied via class or ID selectors only.\n* HTML remains clean, semantic (`header`, `nav`, `main`, `section`, `article`, `footer`), and agnostic of visual styling.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine the full token set in `:root`:\n\n```css\n:root {\n  \u002F* Colors *\u002F\n  --primary: #DC143C;          \u002F* Crimson Red — primary actions *\u002F\n  --secondary: #0066FF;        \u002F* Electric Blue — secondary actions *\u002F\n  --bg-primary: #0A0A0A;       \u002F* Deep Black — page background *\u002F\n  --bg-secondary: #15151C;      \u002F* raised panel surface *\u002F\n  --text-primary: #FFFFFF;     \u002F* Lightning White *\u002F\n  --text-secondary: #B9B9C9;   \u002F* muted body copy on dark *\u002F\n  --text-success: #FFD700;      \u002F* Energy Gold *\u002F\n  --text-error: #FF4757;       \u002F* alert red, distinct from primary *\u002F\n  --border-default: rgba(255, 255, 255, 0.18);\n  --border-error: #FF4757;\n  --border-success: #FFD700;\n  \u002F* Theme accents *\u002F\n  --accent-gold: #FFD700;       \u002F* Energy Gold *\u002F\n  --accent-purple: #9B30FF;     \u002F* Plasma Purple *\u002F\n  --accent-orange: #FF6600;     \u002F* Impact Orange *\u002F\n  \u002F* Shape & elevation (sharp, manga-panel look) *\u002F\n  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;\n  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);\n  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);\n  --glow-primary: 0 0 30px rgba(220, 20, 60, 0.55);\n  --glow-secondary: 0 0 30px rgba(0, 102, 255, 0.55);\n  --glow-gold: 0 0 30px rgba(255, 215, 0, 0.5);\n  --glow-purple: 0 0 30px rgba(155, 48, 255, 0.55);\n  \u002F* Motion & space *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 0.15s;\n  --transition-normal: 0.3s;\n  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);\n  \u002F* Stacking *\u002F\n  --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;\n  \u002F* Type *\u002F\n  --font-display: 'Bangers', cursive;\n  --font-base: 'Chakra Petch', sans-serif;\n  \u002F* Manga panel border width *\u002F\n  --border-panel: 4px;\n}\n```\n\n* **Contrast pairing:** every dark background token pairs with light text tokens. Accent colors (crimson, blue, purple, orange) are reserved for large\u002Fbold display text, borders, glows, and button backgrounds paired with white text — never for body copy on dark backgrounds. Body copy uses `--text-primary` \u002F `--text-secondary`.\n\n**1.3 Mandatory Dark Mode — Dark-Only Exception**\n* Dark mode must be defined and is the default: the dark palette above lives directly in `:root` as the canonical theme.\n* **Exception (user explicitly requested a dark-only theme):** do NOT build a light-mode variant, do NOT add `prefers-color-scheme` overrides, and omit the theme toggle and `localStorage` persistence — the dark token set is the single, sole theme.\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 explicitly justified exception exists (e.g., `stretch` inside card bodies).\n* Mobile-first: rows collapse to columns below ~768px; zero horizontal scrolling at any viewport; fluid typography via `clamp()`.\n\n**1.5 Framework Default**\n* Use Tailwind CSS (CDN or build) for layout\u002Fspacing utilities, with all theme-specific effects (speed lines, clip-path, shake, glow, skew) defined in `style.css` under `@layer`, mapped to the CSS variables above. Reusable generic classes: `.btn`, `.card`, `.input-group`, `.section`, `.container`.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* Load via `\u003Clink>`: **Bangers** (display\u002Fimpact headlines) and **Chakra Petch** (body\u002FUI text), bound to `--font-display` and `--font-base`.\n* All icons via **Google Material Symbols** (e.g., `\u003Cspan class=\"material-symbols-rounded\">bolt\u003C\u002Fspan>`). Forbidden: inline SVGs, local icon files, emoji used as icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Button Component (`.btn`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target; Chakra Petch bold, uppercase, letter-spaced; 3px solid manga border; sharp radius.\n* **Variants:** `.btn--primary` (crimson bg, white text, `--glow-primary`), `.btn--secondary` (electric blue bg, white text, `--glow-secondary`), `.btn--ghost` (transparent, white border), `.btn--danger` (visually distinct in the dark theme).\n* **Hover:** brightness shift + intensified glow; `cursor: pointer`; the primary CTA may add a subtle energy-pulse animation.\n* **Focus:** visible ring — `outline: 3px solid var(--accent-gold); outline-offset: 3px` — for keyboard navigation.\n* **Active:** `transform: scale(0.97)`.\n* **Loading:** `aria-busy=\"true\"`, pointer events disabled to prevent double-clicks, CSS border spinner or spinning Material Symbol; button dimensions unchanged.\n* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed`.\n* **Success\u002FError:** temporary feedback states driven by `--text-success` \u002F `--text-error` (used by the newsletter submit flow).\n* **Impact styling:** primary CTAs may carry `transform: skewX(-4deg)` with a counter-skewed inner span (`skewX(4deg)`) to keep the label readable.\n\n**2.2 Card Component (`.card`)**\n* **Default:** flexbox layout, `--bg-secondary` surface, `var(--border-panel)` solid manga border, sharp radius, `--shadow-sm`.\n* **Hover:** `transform: translateY(-2px)` + accent glow (`box-shadow: 0 0 30px` accent) + the theme's screen-shake animation (`@keyframes shake`, 0.3s, small translate\u002Frotate jitter).\n* **Focus-within:** border shifts to the accent color with glow when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** `.card--skeleton` shimmer sweep (linear-gradient animation) that preserves layout dimensions.\n* **Empty state:** Material Symbol icon + short guidance text in a centered flex column.\n\n**2.3 Form & Input (`.input-group`)** — used for the Final CTA email capture\n* **Structure:** flex container wrapping a persistent `\u003Clabel>`, the `\u003Cinput>`, and a dedicated error-feedback element.\n* **States (all via classes):** empty; focused (gold outline ring + glow); filled; valid (`--border-success` + check Material Symbol); invalid (`--border-error`, `--text-error` message, error icon, message inside an `aria-live` region); disabled; read-only.\n* **Submit flow:** button enters loading state → success confirmation in `--text-success`, announced via `aria-live`. Validate email format in `script.js`.\n\n**2.4 Modal \u002F Popup (if a \"Watch Trailer\" preview modal is triggered from the Hero)**\n* **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (scale + fade + brief energy flash).\n* **UX:** centered flex overlay (`align-items: center`), high-opacity backdrop at `var(--z-modal)`, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click, `role=\"dialog\"`, `aria-modal=\"true\"`, labelled by the modal title.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, breakpoints, zero horizontal overflow. Diagonal effects degrade gracefully on mobile — reduce `skewY` angles or rely on `clip-path` edges only.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes. Respect `prefers-reduced-motion`: disable shake, pulse, speed-line drift, and scroll-reveal movement; keep color\u002Fopacity transitions.\n* **Accessibility:** sufficient contrast in the dark theme (see 1.2); never rely on color alone — pair every state with an icon or text; semantic HTML5; correct ARIA roles\u002Flabels on the nav toggle, FAQ accordion, and modal; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback.\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n* **Destructive actions:** `.btn--danger` must be visually distinct.\n\n**Theme-specific visual effects (CSS only — no images):**\n* **Speed lines:** radiating line fields built from `repeating-conic-gradient` \u002F `repeating-radial-gradient` layers on `::before`\u002F`::after` overlays (`pointer-events: none`), masked with a radial gradient so lines emanate from focal points (Hero center, Final CTA center).\n* **Energy bursts:** `box-shadow: 0 0 30px` accent glows and radial-gradient halos behind focal elements (headline, featured pricing tier, step numbers).\n* **Diagonal drama:** section panels and dividers use `transform: skewY(-3deg)` and\u002For `clip-path: polygon()` angular edges; inner content containers are counter-skewed (`skewY(3deg)`) so text stays legible.\n* **Screen shake:** `@keyframes shake` (small translate\u002Frotate jitter) running 0.3s on hover of interactive cards and primary CTAs.\n* **Manga borders:** 3–4px solid borders on cards, buttons, inputs, and nav; optional double-panel look via border + offset outline.\n* **Impact typography:** Bangers, uppercase, letter-spacing, slight rotation (−2° to −4°) on key headlines, `text-shadow: 0 0 20px` accent glow.\n* **Action-pose dividers:** angular clip-path section edges with a centered glowing Material Symbol badge (`bolt`, `flash_on`, `sports_martial_arts`) as the divider motif.\n* **Dramatic lighting:** radial-gradient spotlight vignettes layered on section backgrounds; optional subtle halftone dot texture via radial-gradient patterns.\n\n---\n\n## 4. PAGE BUILD SPECIFICATION\n\nWrite all user-facing copy in **English**, themed to shonen\u002Fanime-battle energy (tournaments, power-ups, arenas, fighters). No lorem ipsum — author real headlines, descriptions, testimonials, FAQ answers, and pricing features.\n\n1. **Sticky Header\u002FNav:** text logo in Bangers (slightly tilted), anchor links to all sections, primary CTA (\"Enter the Arena\"), 3px bottom manga border; on mobile, a Material Symbol menu button toggles a flex-column dropdown (`aria-expanded`, keyboard accessible).\n2. **Hero:** full-viewport section; speed lines radiating from center; energy-burst glow behind the headline; eyebrow tag; huge tilted Bangers headline with glow; supporting subtext; two CTAs — `.btn--primary` (\"Start the Battle\") and `.btn--ghost`\u002F`.btn--secondary` (\"Watch Trailer\"); a stats row (flex: e.g., \"12M+ Fighters\", \"4.9\u002F5 Rating\" with star Material Symbol, \"120+ Arenas\").\n3. **Features (3 cards):** tilted section header; three `.card` elements in a flex row that wraps to a column on mobile; each card has a glowing accent icon badge (alternate crimson \u002F electric blue \u002F plasma purple), a Bangers title, a description, and a \"Learn more\" link. Full card states per 2.2. Suggested topics: real-time combat, character progression, global tournaments.\n4. **How It Works (3 steps):** diagonal section (skewed panel or clip-path edges); three steps in a flex row → column; oversized Energy Gold step numbers (Bangers, glow) with titles and descriptions; speed-line\u002Fenergy connectors between steps.\n5. **Testimonials:** three quote cards with manga borders; `format_quote` Material Symbol; gold star ratings (Material Symbol `star`); fighter name + role; CSS-gradient circular avatar with initials (no external images).\n6. **Pricing (3 tiers):** flex row → column; each tier is a `.card` with a large Bangers price, a feature list with check Material Symbols, and a CTA; the middle tier is featured — plasma purple glow, gold border, slight scale on desktop, and an angled \"MOST POWERFUL\" ribbon (clip-path).\n7. **FAQ:** accordion of 5–6 items using `\u003Cdetails>`\u002F`\u003Csummary>` or a button + `aria-expanded`\u002F`aria-controls` pattern; animated open\u002Fclose; rotating expand Material Symbol; fully keyboard operable.\n8. **Final CTA:** energy-burst radial background; huge tilted Bangers headline with glow; subtext; email capture `.input-group` + `.btn--primary` submit implementing all states from 2.3 (loading → success with `aria-live` announcement).\n9. **Footer:** manga top border; brand + tagline; secondary link groups (Product, Company, Support); social icons (Material Symbols); copyright line; all links styled with visible focus states.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, and `script.js`. No inline styles; no inline `\u003Cscript>` blocks beyond a single deferred entry point (`\u003Cscript src=\"script.js\" defer>`).\n* **Naming:** BEM consistently throughout (`.hero__title`, `.card--featured`, `.btn--primary`). Never mix conventions.\n* **script.js scope:** mobile nav toggle, FAQ accordion behavior (if not native `\u003Cdetails>`), email validation + button loading\u002Fsuccess + `aria-live` updates, optional modal open\u002Fclose\u002Ffocus-trap, and an IntersectionObserver scroll-reveal that respects `prefers-reduced-motion`. No styling logic in JS.\n* **Assets:** Google Fonts + Material Symbols via `\u003Clink>` only; no external images — all visuals come from CSS gradients, borders, glows, and icons.\n* Produce the complete, working code for all three files in one response.\n",1791954985704]