[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-657-AI-Native-UI":3},"# SYSTEM PROMPT — Build a Complete \"AI-Native UI\" Landing Page\n\n**ROLE:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page in the **AI-Native UI** theme on the first attempt. Generate the final code immediately — no drafts, no outlines, no clarifying questions, no truncated output.\n\n**OBJECTIVE:** A single Landing Page with the following sections: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, and Footer with secondary links.** All user-facing copy must be written in **English**.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n* **No Inline CSS:** The `style=\"...\"` attribute is strictly forbidden anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and interactive states must be targeted via class or ID selectors inside the dedicated `style.css` file.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and agnostic of visual styling. Changing the site's entire look must only require editing `style.css`, never the markup.\n\n### 1.2 CSS Variables (`var(--...)`) & Theme Tokens\nAll visual tokens must live in `:root` (and be overridden per theme scope):\n\n* **Colors (Light Mode — default):** `--primary: #6366F1` (AI Purple); `--primary-strong: #4F46E5` (hover + small-text accent variant); `--bg-primary: #F5F5F5` (theme background — do **not** use pure white); `--bg-secondary: #fefefe` (card surfaces); `--text-primary: #17171B`; `--text-secondary: #52525B`; `--text-success: #047857` (contrast-safe text tone); `--success: #10B981` (surfaces\u002Ficons\u002Fborders); `--text-error: #DC2626`; `--border-default: #E4E4E7`; `--border-error: #DC2626`; `--border-success: #10B981`; `--accent-soft: rgba(99, 102, 241, 0.10)` (chips, hover washes, streaming highlights); `--stream-highlight` (temporary soft indigo tint applied to text while it streams, fading to transparent on completion).\n* **Contrast Pairing:** Every light background token must pair with a dark text token, and every dark background token with a light text token — enforce WCAG AA contrast for every pairing in **both** themes, not just the default. Accent `#6366F1` is fine for large text, icons, and borders on light backgrounds; small accent text must use `--primary-strong`.\n* **Border Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.\n* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast` (~150ms), `--transition-normal` (~300ms), `--ease-standard` (e.g., `cubic-bezier(0.4, 0, 0.2, 1)`).\n* **Elevation\u002FStacking:** `--z-dropdown` (sticky header), `--z-modal`, `--z-toast`.\n* **Typography tokens:** `--font-base` and `--font-display`, bound to the Google Fonts below.\n\n### 1.3 Mandatory Dark Mode Support\n* **Implementation:** Define full dark mode token overrides under **both** `@media (prefers-color-scheme: dark)` **and** a `.dark` class on the `\u003Chtml>` element. Dark tokens must include: `--bg-primary: #0C0C10` (cool near-black), `--bg-secondary: #17171E`, `--text-primary: #F5F5F5`, `--text-secondary: #A1A1AA`, `--primary: #818CF8` (lightened accent for dark-bg contrast), `--primary-strong: #6366F1`, `--text-success: #34D399`, `--border-default: #26262E`, plus adjusted (darker, subtler) shadows.\n* **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a **visible toggle control** in the header (Material Symbols `light_mode` \u002F `dark_mode`) with correct `aria-pressed` and `aria-label` state.\n* **Exception Clause:** A minimal inline snippet in `\u003Chead>` that applies the stored theme class before first paint is the **only** permitted inline script (to prevent a light-mode flash); all other JavaScript lives in `script.js`.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n* Build all layout structures with **Flexbox** (`display: flex`).\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in comments. The justified exceptions in this build: the chat message list (`align-items: flex-start`, with `align-self` used to align user vs. assistant bubbles) and step\u002Flist columns.\n* **Mobile-Friendly First:** All flex rows must convert to columns on small viewports (≤768px). No horizontal scrolling at any viewport width. Use fluid `clamp()` typography.\n\n### 1.5 Framework Default & Tailwind CSS Integration\nUse Tailwind CSS, with all component styling authored as **reusable generic classes** (`.btn`, `.card`, `.input-group`, `.chat-panel`, `.context-card`) via Tailwind's `@layer` \u002F `@apply` directives or plain CSS — every utility\u002Fcomponent must map back to the CSS variables above.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n* **Text:** Load **Inter** (`--font-base`) and **Space Grotesk** (`--font-display`, headings only) via Google Fonts `\u003Clink>` tags with `preconnect`.\n* **Icons:** Use **Google Material Symbols (Outlined)** via the Google Fonts icon link. Raw inline SVGs and local icon files are **strictly forbidden** — including the 3-dot typing indicator, which must be built with pure CSS (divs + keyframes).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\nStyle all states via CSS classes:\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum touch target 44×44px. Variants: `.btn--primary` (solid `--primary` → `--primary-strong` on hover, white text), `.btn--ghost` (transparent, `--border-default`), `.btn--danger` (visually distinct in **both** themes).\n* **Hover:** Brightness\u002Fshadow shift with `cursor: pointer`.\n* **Focus:** Distinct `:focus-visible` ring built from `--primary` (outline\u002Fbox-shadow) for keyboard navigation.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`is-loading`):** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon — **without distorting button dimensions**.\n* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n* **Success\u002FError (`is-success` \u002F `is-error`):** Temporary feedback styles driven by `--text-success` \u002F `--text-error`, always paired with an icon + text change (never color alone), announced via an `aria-live` region.\n\n### 2.2 Card Component Requirements\n* **Default:** Flexible Flexbox layout, `--bg-secondary` surface, subtle `--border-default` border, `--radius-lg`, `--shadow-sm`.\n* **Hover (interactive cards):** `transform: translateY(-2px)` + elevation shift to `--shadow-md` via `--transition-normal`.\n* **Focus-within:** Card border highlights to `--primary` when a child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define `.skeleton` shimmer keyframes (animated gradient sweep) in CSS; use for the initial assistant-message placeholder on first paint to prevent layout jumps.\n* **Empty State:** Define a `.card--empty` fallback layout (Google Icon + clear guidance text); use it in the chat panel before the visitor's first message.\n* **Theme-Specific Card Types:** `.context-card` (3px `--primary` left border, compact fact chip); `.pricing-card` (featured tier gets `.pricing-card--featured`: `--primary` border, \"Most popular\" badge, stronger elevation); `.testimonial-card` (quote icon, copy, initials avatar).\n\n### 2.3 Form & Input Requirements\n* **States:** Empty, Focused (`--primary` ring), Filled, Valid (`--border-success` + check icon), Invalid (`--border-error`, red error text + error icon), Disabled, Read-only.\n* **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the input field, and a dedicated error feedback container with reserved min-height (no layout shift on error).\n* **Chat Input:** `.chat-panel__input` is a **sticky bottom** bar inside the chat panel — flex row of text input + send button, submits on Enter, labeled input, placeholder \"Ask anything…\".\n\n### 2.4 Modal \u002F Popup Requirements\n* **States:** Opening, Open, Loading, Success\u002FError, Closing — all animated via CSS transitions.\n* **UX Features:** Centered flex container (`align-items: center; justify-content: center`), backdrop overlay with blur, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click, correct `role=\"dialog\"` \u002F `aria-modal` attributes.\n* Even if no modal is used on the page, the `.modal` component CSS must ship so the design system is complete.\n\n### 2.5 AI-Native Component Requirements (Theme-Specific)\n* **Chat Panel (`.chat-panel`):** `flex-direction: column`; contains a scrolling message list + the sticky bottom input. Bubbles: `.chat-bubble--user` (aligned right, `--primary` background, white text) and `.chat-bubble--assistant` (aligned left, `--bg-secondary`, border, `--text-primary`); max-width ~75%.\n* **Typing Indicator (`.typing-indicator`):** Three dots pulsing with staggered keyframe delays (0 \u002F .15s \u002F .3s), rendered inside an assistant-styled bubble. Pure CSS — no SVG, no images.\n* **Streaming Text (`.streaming-text`):** Reveal animation using `overflow: hidden` + a width\u002Fclip-path\u002Ftypewriter keyframe (or JS character streaming), with the `--stream-highlight` tint fading out once the text lands. During streaming, mark the region `aria-busy=\"true\"` and announce the **final** text once via `aria-live=\"polite\"` (never announce character-by-character).\n* **Context Cards:** `border-left: 3px solid var(--primary)` per the theme spec; used to show \"what the assistant knows.\"\n* **Pulse \u002F Ambient Effects:** A soft infinite pulse (box-shadow ripple) on a status dot \u002F ambient orb in the hero; disabled under `prefers-reduced-motion`.\n* **Simulated Assistant (script.js):** On chat submit → append user bubble → show typing indicator (~900ms) → stream one of 2–3 predefined English responses relevant to the product pitch → clear input, maintain focus. Every submission must produce visible feedback.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid sizing and breakpoints; zero horizontal overflow at any width.\n* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; smooth section reveals via an IntersectionObserver adding `.is-visible` (fade + slight translate). Content must be fully visible without JS.\n* **Reduced Motion:** Under `prefers-reduced-motion`, disable streaming, typing pulses, ambient pulses, and reveals — render final states instantly.\n* **Accessibility (a11y):** AA contrast in both Light and Dark modes; never rely on color alone (pair with icons + text); semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, correct `h1`→`h3` hierarchy); correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for chat responses, form errors, and toasts.\n* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.\n* **Toast:** Define a `.toast` component (`--z-toast`, fixed bottom, auto-dismiss) used to confirm CTA\u002Fpricing success actions.\n\n---\n\n## 4. THEME & LANDING PAGE SPECIFICATION — \"AI-NATIVE UI\"\n\n### 4.1 Design Language\n* **Name:** AI-Native UI · **Type:** Intelligent, Adaptive, Conversational, Modern · **Era:** 2020s AI-Era · **Modes:** Full Light + Full Dark.\n* **Mood:** Minimal chrome, generous whitespace, quiet neutrals with one decisive accent (`#6366F1`), ambient and alive. Secondary tokens: status indicators (pulsing green \"Online\" dot), streaming highlights, context-card tints, subtle accent variations at 5–10% alpha.\n\n### 4.2 Required Sections (author realistic English copy for a fictional AI assistant product — invent a fitting product name; no lorem ipsum)\n1. **Header (minimal chrome):** Sticky, blurred `--bg-primary` backdrop, wordmark logo, anchor links, and the dark-mode toggle.\n2. **Hero:** Conversational layout — H1 with a streaming-text effect on one key phrase, subheadline, two CTAs (primary + ghost), and the working `.chat-panel` demo (welcome bubble → typing indicator → context card → streamed answer → sticky input). Status dot with pulse.\n3. **Features:** 3 `.card--feature` cards, each with a Material Symbol icon in a tinted container, title, and 1–2 sentences (e.g., Conversational by default \u002F Context-aware \u002F Agentic actions).\n4. **How It Works:** 3 numbered steps with connecting line on desktop, stacked column on mobile.\n5. **Testimonials:** 3 `.testimonial-card` cards with attributed quotes, initials avatars, and varied copy lengths.\n6. **Pricing:** 3 tiers (Free \u002F Pro — featured \u002F Team), each with price, feature list with check icons, and a CTA that demonstrates the full button state machine (loading ≥1s → success + toast).\n7. **FAQ:** 5–6 real questions as native `\u003Cdetails>`\u002F`\u003Csummary>` accordions with a rotating `expand_more` Material Symbol marker — no JS required.\n8. **Final CTA:** Full-width accent-tinted panel (soft indigo wash that works in both themes), H2, one-line pitch, primary button.\n9. **Footer:** Secondary links grouped in 3–4 flex columns (collapsing to one column on mobile), tagline, copyright, hover + focus-visible link states.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond the single permitted theme-bootstrap exception (Section 1.3) and one deferred entry-point reference.\n* **Naming Convention:** One consistent convention across the entire deliverable — BEM (`.chat-bubble--user`, `.pricing-card--featured`) with `.is-*` state classes. Never mix conventions.\n* **First-Attempt Completeness:** Output the full, final code for all three files in one response. No TODOs, no \"rest of the code\" truncation, no unrequested placeholders.\n* **Copy:** All user-facing copy in English, fully authored. Placeholder attributes are allowed only inside the chat input.\n",1791954990520]