[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-574-Internet-Nostalgia-Y2K-Revival":3},"**ROLE:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, polished, production-ready Landing Page on the first attempt. Do not ask clarifying questions — make expert decisions and deliver the final code in one pass.\n\n**MISSION:** A single-page landing page themed **\"Internet Nostalgia Y2K Revival\"** — an authentic Windows 95\u002F98, dial-up-era (1995–2000) retro web aesthetic: beveled window chrome, blue title bars, pixel & ASCII art, literal dialog boxes, custom cursors, retro scrollbars, and GeoCities-era decorations.\n\n**SECTIONS (in this order):** Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.\n\n**CONTENT DIRECTION:** Invent one coherent fictional product that fits the theme (recommended: a retro website builder\u002Fhost that lets anyone create their own '90s homepage). Write ALL user-facing copy in English, in an authentic '90s internet voice (\"Welcome to my homepage!\", \"Under construction\", \"Sign the guestbook\", \"Best viewed at 800×600\"). Never use lorem ipsum — write real copy for every section.\n\n---\n\n## 0. DESIGN BRIEF — INTERNET NOSTALGIA Y2K REVIVAL\n\n**0.1 Aesthetic:** Windows 95\u002F98 desktop metaphor. Every major section lives inside a \"window\": a 2px beveled frame (outset when raised, inset when pressed), a Title Blue (#000080) title bar with bold, **centered** white text and small square window-control buttons at the right, and a white content interior. System Gray #C0C0C0 is the page canvas. The vibe: 16-bit color, dial-up era, GeoCities homepage, table-era layouts recreated with modern CSS.\n\n**0.2 Palette (source spec, translated):** System Gray `#C0C0C0` · Title Blue `#000080` · Window White `#FFFFFF` · Text Black `#000000` · Terminal Green `#00FF00` · DOS Cyan `#00FFFF` · Retro Magenta `#FF00FF` · Alert Yellow `#FFFF00` · Border Silver `#808080`.\n\n**0.3 Signature visual effects (all mandatory):**\n- **Beveled borders:** raised = `border: 2px outset #DFDFDF; box-shadow: inset -1px -1px #0A0A0A, inset 1px 1px #FFFFFF;` pressed\u002Fsunken = `border: 2px inset #808080;` with the box-shadow inverted.\n- **Buttons depress on click:** outset → inset on `:active`.\n- **Blue title bars** (#000080) with centered white text.\n- **Literal pop-up dialog boxes** with exclamation\u002Fquestion icons.\n- **ASCII art** made of text characters inside `\u003Cpre>` with monospace font.\n- **Pixelated graphics:** `image-rendering: pixelated` (with `crisp-edges` fallback) on any pixel-art surface.\n- **Playful custom cursors** via `cursor: url(...)` (see exception in 1.6).\n- **Bitmap\u002Fsystem font feel** (simulated MS Sans Serif — see 1.6).\n- **Retro styled scrollbars** (see Section 3).\n- **\"Table layout\" look** built with CSS Grid\u002FFlex that *looks* like tables — never a real `\u003Ctable>` for page layout.\n- **GeoCities decorations:** \"Under construction\" barrier (CSS yellow\u002Fblack diagonal stripes), visitor counter, guestbook link, 88×31-style CSS micro-badges, CSS-animated marquee text (do NOT use the deprecated `\u003Cmarquee>` element).\n- `letter-spacing: 0` on all UI text; compact 2px\u002F4px\u002F8px padding rhythm (interactive elements still respect the 44×44px minimum in 2.1).\n\n**0.4 Section blueprint:**\n- **Hero:** one large \"application window\" — title bar with product name + minimize\u002Fmaximize\u002Fclose buttons (Material Symbols); a menu-bar strip (File \u002F Edit \u002F View \u002F Help — real in-page anchors where possible, e.g., Help → FAQ; purely decorative items get `aria-hidden`); inside: ASCII-art logo in `\u003Cpre>` (aria-hidden with an `.sr-only` text alternative), headline, subheadline, two CTAs (primary beveled button + secondary link), a CSS-animated marquee welcome line, a blinking \"NEW!\" badge, and a decorative \"dial-up connecting…\" dialog with an animated segmented blue progress bar.\n- **Features (3 cards):** three mini windows, each with title bar, Material Symbol icon, heading, copy. Hover lifts the card.\n- **How It Works (3 steps):** a \"Setup Wizard\" — three numbered step windows (beveled 1\u002F2\u002F3 badges) connected by ASCII arrows (→) or dashed connectors; icon + title + description each.\n- **Testimonials:** a \"Guestbook\" — header with the under-construction barrier; three entries styled as guestbook cards: name, '90s date, 5-star rating (filled Material 'star' icons), quote.\n- **Pricing (3 tiers):** three dialog-box windows; the middle tier is the default\u002Fhighlighted one (bold title, primary raised button, \"Best Value\" label styled as a Win95 tooltip); feature lists with Material 'check' icons; each tier's button opens the confirm modal (see 2.4).\n- **FAQ:** `\u003Cdetails>`\u002F`\u003Csummary>` accordions styled as classic group boxes: summary = full-width beveled row with a +\u002F− Material icon indicator that changes state when open; content in a sunken panel. Native keyboard support required.\n- **Final CTA:** one big dialog window — title bar \"Confirm\", exclamation Material icon, persuasive copy, email signup form (see 2.3) with full validation and an inline success state (check icon + confirmation copy). No `alert()`\u002F`confirm()` ever.\n- **Footer:** a Win95 taskbar — \"Start\" button (scrolls to top), secondary links as taskbar buttons (Guestbook, Webring, Awards, About, Contact, Privacy), a live JS clock, visitor counter, 88×31 CSS badges, \"Best viewed at 800×600\", playful \"© 1999\" line.\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 forbidden anywhere in the HTML.\n- **Class\u002FID selectors only:** every design property, layout rule, and state is targeted via class or ID selectors in `style.css`.\n- **Minimal HTML modifications:** HTML stays clean, semantic (HTML5 landmarks: `header`\u002F`main`\u002F`section`\u002F`footer`), and agnostic of visual styling — retheming must require touching only `style.css`.\n\n### 1.2 CSS Variables & Theme Tokens\nStore all visual tokens in `:root` under exactly these names, plus theme extras:\n\n```css\n:root {\n  --primary: #000080;        \u002F* Title Blue *\u002F\n  --secondary: #FF00FF;      \u002F* Retro Magenta — dark surfaces only *\u002F\n  --bg-primary: #C0C0C0;     \u002F* System Gray — page canvas *\u002F\n  --bg-secondary: #FFFFFF;   \u002F* Window White — window interiors *\u002F\n  --text-primary: #000000;\n  --text-secondary: #404040; \u002F* readable dark gray; NEVER #808080 as text on light bg *\u002F\n  --text-success: #008000;\n  --text-error: #CC0000;\n  --border-default: #808080; \u002F* Border Silver *\u002F\n  --border-error: #FF0000;\n  --border-success: #008000;\n\n  \u002F* Bevel system *\u002F\n  --bevel-highlight: #FFFFFF; --bevel-light: #DFDFDF;\n  --bevel-shadow: #808080;   --bevel-dark: #0A0A0A;\n  --title-bar-bg: #000080;   --title-bar-text: #FFFFFF;\n\n  \u002F* Neon accents — dark surfaces ONLY *\u002F\n  --terminal-green: #00FF00; --dos-cyan: #00FFFF; --alert-yellow: #FFFF00;\n\n  \u002F* Shape, depth, motion — sharp corners, hard shadows *\u002F\n  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;\n  --shadow-sm: 1px 1px 0 var(--bevel-dark);\n  --shadow-md: 2px 2px 0 var(--bevel-dark);\n  --spacing-gap: 8px;\n  --transition-fast: 60ms; --transition-normal: 120ms;\n  --ease-standard: ease-out; \u002F* steps() allowed for themed blink\u002Fmarquee\u002Fprogress animations *\u002F\n  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;\n\n  --font-base: \"Pixelify Sans\", \"MS Sans Serif\", Tahoma, system-ui, sans-serif;\n  --font-mono: \"VT323\", \"Courier New\", monospace;\n}\n```\n\n- **Contrast pairing (mandatory):** light backgrounds (#C0C0C0, #FFFFFF) pair only with dark text tokens. Neon accents (#00FF00, #00FFFF, #FFFF00, #FF00FF) may appear ONLY on dark surfaces (#000000 or #000080) — terminal windows, title bars, hit counters. On light surfaces use darkened equivalents (#008000, #008080, #808000, #800080).\n- **Light-mode background:** the page canvas is System Gray #C0C0C0, not white — the no-pure-white-default rule is satisfied. **Exception:** window interiors use pure `#FFFFFF` (`--bg-secondary`) because the source palette explicitly demands \"Window White.\"\n- **Radius & shadows:** border-radius is 0 everywhere (sharp corners are canonical here); all shadows are hard-edged (no blur), per the tokens above.\n\n### 1.3 Mandatory Dark Mode Support\nDark Mode must always be defined: tokens under `@media (prefers-color-scheme: dark)` and\u002For a `.dark` class, seamless variable switching without HTML restructuring, `localStorage` persistence falling back to `prefers-color-scheme`, and a visible toggle with correct `aria-pressed`\u002F`aria-label`.\n- **Exception (this theme):** the source specification explicitly sets Dark Mode to \"None\" — ship light-mode-only: do NOT add a theme toggle, and ensure `prefers-color-scheme: dark` never alters the fixed Windows 95 palette.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with Flexbox (plus Grid for the table-look).\n- **Default alignment rule:** every flex container defaults to `align-items: center` unless there is an explicitly justified exception (e.g., form field stacks use `stretch`; title bars center text vertically and push controls right).\n- **Mobile-first:** all rows collapse to single columns below ~768px; no horizontal scrolling anywhere — `\u003Cpre>` ASCII blocks get `overflow-x: auto` (or clamp-scaled font-size) so they never break the viewport; title-bar text truncates with ellipsis on small screens.\n\n### 1.5 Framework & Naming Convention\n- Use Tailwind CSS as the engine, but compose ALL styles in `style.css` via `@layer`\u002F`@apply` so the HTML carries only semantic component classes — no utility-class soup in the markup.\n- **Single naming convention: BEM** (e.g., `.window`, `.window__title-bar`, `.window__controls`, `.btn`, `.btn--danger`, `.card`, `.input-group`) — never mix conventions. All utilities must map back to CSS variables or these reusable class names.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text fonts:** load **Pixelify Sans** (UI\u002Fbase — the bitmap \"MS Sans Serif\" feel) and **VT323** (terminal\u002FASCII) from Google Fonts via `\u003Clink>` in `\u003Chead>`; bind them to `--font-base` and `--font-mono`. ASCII art uses `--font-mono` inside `\u003Cpre>`.\n  - **Exception:** the source spec's bitmap\u002Fsystem-font request is satisfied through the fallback stacks (`\"MS Sans Serif\", Tahoma, system-ui` \u002F `\"Courier New\", monospace`) placed after the mandatory Google Fonts.\n- **Icons:** Google Material Symbols only — raw inline SVGs and local icon files are forbidden. Load once; use e.g. `close`, `remove` (minimize), `crop_square` (maximize), `warning`, `error`, `help`, `check`, `check_circle`, `star` (filled via `font-variation-settings: 'FILL' 1`), `add`\u002F`remove` for FAQ indicators. Render icons small, black, sharp-cornered to fit the 16-bit look.\n- **Custom cursors (exception):** define playful retro cursors in `style.css` only, via `cursor: url(\"data:...\")` 16×16 pixel-art data-URIs with mandatory fallback keywords (`auto`, `pointer`) — never external `.cur` files; never change cursor semantics (links\u002Fbuttons keep a pointer-type cursor).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (Win95 Beveled Push Buttons)\nAll states via CSS classes (`.btn` + modifiers):\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` background #C0C0C0, canonical raised bevel (0.3), `letter-spacing: 0`, minimum touch target 44×44px, `cursor: pointer`.\n- **Hover:** visible shift — brightness bump or inner highlight (or bold label, the classic default-button behavior).\n- **Focus:** distinct retro dotted focus ring via CSS variables (`outline: 1px dotted #000; outline-offset: -4px`) on `:focus-visible` — keyboard navigation must be obvious.\n- **Active\u002FPressed:** bevel inverts (outset → inset) plus press feedback `transform: translate(1px, 1px)` (the retro equivalent of `scale(0.97)`).\n- **Loading:** disables interaction and prevents double-clicks; renders a CSS spinner or animated Material icon (e.g., flipping `hourglass_top`) inside a fixed-width slot so button dimensions never change.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback states driven by `--text-success` \u002F `--text-error` (label\u002Ficon swap, e.g., \"OK!\" or red error text).\n- **Danger:** `.btn--danger` is visually distinct (red label\u002Fborder via `--text-error`\u002F`--border-error`) — never color alone; pair with icon or text.\n\n### 2.2 Card Component (Window Containers)\n- **Default:** flexible flexbox layout, beveled 2px frame, `--bg-secondary` interior, subtle `--border-default` details, title bar with centered white bold text.\n- **Hover:** elevation shift — hard shadow grows (`--shadow-sm` → `--shadow-md`) and\u002For `transform: translateY(-2px)`.\n- **Focus-within:** when a child link\u002Fbutton receives focus, the card frame or title bar highlights (e.g., dashed accent outline).\n- **Loading (skeleton):** CSS-only placeholder — a shimmer or a themed animated segmented progress bar (repeating blocks of #000080) — with zero layout jumps.\n- **Empty state:** structured fallback with a Material icon and clear guidance text in dialog style.\n\n### 2.3 Form & Input Requirements (Sunken Fields)\n- **States:** empty, focused (dotted retro outline ring), filled, valid (success border + `check` icon), invalid (error border `--border-error`, red text, `error` icon, message announced via `aria-live`), disabled, read-only.\n- **Structure:** flex container wrapping `\u003Clabel>`, the input, and a dedicated error-feedback element. Inputs are sunken: `border: 2px inset var(--bevel-shadow)` + inverted inner shadows, background #FFFFFF.\n- The Final CTA email form implements every state; validation lives in `script.js`; feedback is inline — never `alert()`.\n\n### 2.4 Modal \u002F Dialog Box Requirements (Literal Win95 Dialogs)\n- **States:** opening (scale\u002Ffade or stepped retro appear), open, loading (progress bar), success\u002Ferror (icon + message swap), closing — all animated via CSS transitions.\n- **UX:** centered flex container (`align-items: center`), dark backdrop (`rgba(0,0,0,.5)`, optionally with a subtle CSS hatch pattern), `role=\"dialog\"` + `aria-modal=\"true\"` + `aria-labelledby`, Google icon close button (small beveled square with `close` symbol), keyboard focus trap, close via `Esc` and overlay click, focus returns to the trigger.\n- **Content pattern:** exclamation\u002Fquestion Material icon + message + button row (OK \u002F Cancel beveled buttons). Pricing tier buttons open a \"Confirm your plan\" instance of this modal.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid widths and breakpoints without horizontal overflow; grids collapse to one column on mobile.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)`; honor `prefers-reduced-motion` — disable blink, marquee (render static), progress, and modal animations.\n- **Accessibility:** sufficient contrast in the (single) light theme per 1.2's pairing rules; never rely on color alone; semantic HTML5; correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for form errors, toasts, loading, and modal state changes.\n- **Retro-specific a11y:** blinking elements blink slowly (≥1s period) and never carry essential info; marquee is `aria-hidden` decorative; ASCII art is `aria-hidden` with `.sr-only` alternatives; purely decorative window chrome (non-functional menu items, hero min\u002Fmax\u002Fclose) is `aria-hidden` and not focusable — anything functional gets real buttons with `aria-label`s.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Destructive actions:** `.btn--danger` is visually distinct at all times.\n- **Scrollbars:** style retro — `scrollbar-color: #C0C0C0 #808080` plus `::-webkit-scrollbar*` pseudo-elements (beveled gray thumb, classic track) — without breaking scroll usability.\n- **Dynamic feedback region:** a Win95 tooltip\u002Fballoon-styled status area (z-index `--z-toast`) announces successes\u002Ferrors via `aria-live`.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** separate `index.html`, `style.css`, `script.js`. The HTML contains exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` — no inline script blocks, no inline styles.\n- **script.js scope:** modal open\u002Fclose + focus trap, form validation + inline feedback, button loading states, live footer clock, visitor-counter animation. Vanilla JS only.\n- **Naming:** BEM everywhere (per 1.5) — never mix conventions.\n- **Copy:** all user-facing copy in English, themed per 0.4 — no lorem ipsum, no unrequested placeholders.\n- **Assets:** no external images, GIFs, or hotlinks — every visual (pixel art, badges, barriers, counters, cursors) is CSS, ASCII, or Material Symbols.\n",1791954989427]