[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-314-Glitch-Art":3},"# BUILD PROMPT — \"DATAMOSH\" \u002F\u002F GLITCH ART LANDING PAGE\n\n**Directive:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in the **Glitch Art** style (output category: **Dark Tech & Cyber**) in a single pass — full code on the first attempt, no TODOs, no stubs. Every rule below is mandatory.\n\n---\n\n## 0. PROJECT BRIEF & THEME SPECIFICATION\n\n### 0.1 Product Concept & Copy Direction\n- **Product:** \"DATAMOSH\" — a browser-based glitch-art studio (datamoshing, pixel sorting, chromatic aberration tools for video\u002Fphoto creators).\n- **All user-facing copy must be written in English.** Tone: terminal \u002F error-log register (`SIGNAL_ACQUIRED`, `ERR\u002F\u002F`, `\u002F\u002FSYS:`), cyberpunk-adjacent but always legible and professional. Write real, specific copy for every section — lorem ipsum is forbidden.\n- Copy seeds (expand, don't pad): Hero H1 \"CORRUPT THE SIGNAL. MAKE IT ART.\" · Features: Datamosh Engine \u002F Pixel Sorter \u002F Chromatic Suite · Steps: 01 UPLOAD → 02 CORRUPT → 03 EXPORT · Pricing tiers: GLITCH ($0) \u002F DATAMOSH ($19\u002Fmo, featured) \u002F SINGULARITY ($49\u002Fmo) · 5 real FAQ Q&As · Footer columns: Product, Company, Resources, Legal.\n\n### 0.2 Theme Definition — Glitch Art (2010s–present)\n- **Keywords:** datamosh, databending, RGB channel split \u002F chromatic aberration, pixel sorting, block corruption, tearing, scan glitches, jitter, noise, broken-signal energy.\n- **Visual register:** neon-on-black, sharp 0px corners, monospace typography, hard stepped motion, error-art framing.\n- **Both light and dark themes must be built and validated before delivery** (the source spec declares no single mode; validate in light and dark before publishing).\n\n### 0.3 Design Tokens (Mandatory Mapping)\nDefine exactly these tokens. The source catalog's `--color-*` names are **remapped** to the mandatory semantic names below — do not use `--color-*` names.\n\n```css\n:root, [data-theme=\"dark\"] {\n  \u002F* mandatory semantic tokens — dark (default) *\u002F\n  --bg-primary: #050505;\n  --bg-secondary: #0d0d0d;\n  --text-primary: #f2f2f2;\n  --text-secondary: #8a8a8a;\n  --primary: #ff003c;\n  --secondary: #00f0ff;\n  --text-success: #00ff5f;\n  --text-error: #ff003c;\n  --border-default: #ff003c;\n  --border-error: #ff003c;\n  --border-success: #00ff5f;\n\n  \u002F* supplementary theme tokens *\u002F\n  --accent: #00f0ff;\n  --on-primary: #050505;    \u002F* text on red surfaces — ≥5:1, never #111 *\u002F\n  --border-muted: #262626;  \u002F* subtle dividers *\u002F\n\n  \u002F* radius — Glitch Art is sharp: all 0px *\u002F\n  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 0px;\n\n  \u002F* shadows — RGB channel split *\u002F\n  --shadow-sm: 2px 0 var(--primary), -2px 0 var(--secondary);\n  --shadow-md: 4px 0 var(--primary), -4px 0 var(--secondary);\n  --shadow-rgb-split: 2px 0 #ff003c, -2px 0 #00f0ff;\n\n  \u002F* typography *\u002F\n  --font-base: 'Space Mono', 'Courier New', monospace;\n  --font-display: 'Major Mono Display', var(--font-base);\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\n  \u002F* spacing *\u002F\n  --spacing-gap: 24px;\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\n  \u002F* motion *\u002F\n  --transition-fast: 120ms;\n  --transition-normal: 250ms;\n  --ease-standard: steps(2, jump-none);        \u002F* signature stepped glitch easing *\u002F\n  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); \u002F* non-glitch transitions *\u002F\n\n  \u002F* signature effects *\u002F\n  --chromatic: drop-shadow(2px 0 #ff003c) drop-shadow(-2px 0 #00f0ff);\n  --noise: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 2px);\n\n  \u002F* elevation\u002Fstacking *\u002F\n  --z-scanlines: 50; --z-header: 90; --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n}\n\n[data-theme=\"light\"] {\n  \u002F* pre-validated for ≥4.5:1 text contrast — do not lighten these *\u002F\n  --bg-primary: #e9e9e9;      \u002F* never pure white *\u002F\n  --bg-secondary: #fefefe;\n  --text-primary: #0a0a0a;\n  --text-secondary: #4a4a4a;\n  --primary: #c10030;\n  --secondary: #006670;\n  --text-success: #006b30;\n  --text-error: #c10030;\n  --border-default: #c10030;\n  --border-error: #c10030;\n  --border-success: #006b30;\n  --accent: #006670;\n  --on-primary: #fefefe;\n  --border-muted: #cfcfcf;\n  \u002F* neon kept for decorative split shadows only (never for text in light mode) *\u002F\n  --shadow-sm: 2px 0 #ff003c, -2px 0 #00f0ff;\n  --shadow-md: 4px 0 #ff003c, -4px 0 #00f0ff;\n  --noise: repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 2px);\n}\n```\n\n### 0.4 Typography & Icons\n- **Fonts (Google Fonts, mandatory):** Space Mono (body) and Major Mono Display (display headings), loaded via `\u003Clink>` tags, bound to `--font-base` \u002F `--font-display`.\n- **Icons (Google Material Symbols Outlined, mandatory):** loaded via the standard stylesheet link; used as `\u003Cspan class=\"material-symbols-outlined\" aria-hidden=\"true\">icon_name\u003C\u002Fspan>`. **Raw inline SVGs and local icon files are forbidden.**\n\n### 0.5 Required Sections\nHeader\u002FNav (sticky) · Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links · Demo Modal · Toast.\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 visual property, layout rule, and state is styled via classes\u002FIDs in `style.css`.\n- **Minimal HTML Modifications:** HTML stays semantic and style-agnostic — reskinning must require editing `style.css` only. The only permitted data hooks are `data-text` attributes on glitch headings and `data-theme` on `\u003Chtml>`.\n\n### 1.2 CSS Variables & Theme Tokens\n- All tokens from **0.3** live in `:root` \u002F theme selectors; components consume only `var(--...)` — no raw hex values inside component rules (hex is allowed only inside the token definitions and keyframes that mirror token colors).\n- **Contrast Pairing:** every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in both themes.\n- Radius, shadow, spacing, transition, easing, z-index, and signature effect tokens (`--chromatic`, `--noise`) must all be defined and used as specified above.\n\n### 1.3 Mandatory Dark Mode Support\n- **Dark is the default theme** (Glitch Art is dark-native): hardcode `data-theme=\"dark\"` on `\u003Chtml>`; `[data-theme=\"light\"]` overrides tokens per 0.3.\n- **Toggle:** a visible button in the header swaps themes. It must carry `aria-pressed=\"true\"` when dark mode is active, an `aria-label` that updates (\"Switch to light mode\" \u002F \"Switch to dark mode\"), and a Material Symbols icon swap (`dark_mode` \u002F `light_mode`).\n- **Persistence:** store the choice in `localStorage` (e.g., key `datamosh-theme`); on first visit fall back to `prefers-color-scheme`; if no preference, remain dark. Theme switching must not require any HTML restructuring.\n- Both themes must be visually validated before delivery.\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structures with **Flexbox** (`display: flex`).\n- **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., multi-line text columns may use `flex-start`).\n- **Mobile-first:** rows convert to columns below 768px; no horizontal scrolling at any viewport width down to 320px.\n\n### 1.5 Styling Approach & Naming Convention\n- Use **clean, hand-written custom CSS** (no framework) in `style.css`, organized with native CSS `@layer` blocks in this order: `tokens`, `base`, `layout`, `components`, `effects`, `utilities`.\n- **One naming convention only: BEM** (`.block`, `.block__element`, `.block--modifier`). Never mix conventions; every utility\u002Fcomponent class must map back to the tokens.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Include in `\u003Chead>`: Google Fonts preconnects, the Space Mono + Major Mono Display stylesheet, and the Material Symbols Outlined stylesheet.\n- All icons are Material Symbols; **inline SVGs are forbidden** (explicit exception: none requested, so none granted).\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons\nStyle all states via CSS classes (`.btn` base):\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; 2px border; `box-shadow: var(--shadow-rgb-split)`; `transition: transform var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast), filter var(--transition-fast)`.\n- **Hover:** brightness shift + intensified chromatic shadow + a brief jitter burst (short `steps()` keyframe), `cursor: pointer`.\n- **Focus:** distinct `:focus-visible` ring using `outline: 2px solid var(--secondary); outline-offset: 2px`.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** `disabled` + `aria-busy=\"true\"`; CSS ring spinner (or rotating Material Symbol) rendered in the icon slot without changing button dimensions; label switches to \"TRANSMITTING…\"; prevents double-clicks.\n- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`, no transform.\n- **Success\u002FError feedback (`.is-success` \u002F `.is-error`):** temporary states driven by `--text-success` \u002F `--text-error` (border + icon + label change, e.g., \"SIGNAL RECEIVED\"), reverting after ~3s.\n- **Variants:** `.btn--primary` (background `var(--primary)`, color `var(--on-primary)`), `.btn--ghost` (transparent, bordered), `.btn--danger` (defined in CSS, visually distinct in both themes, reserved for destructive actions).\n\n### 2.2 Cards\n- **Default:** flexbox layout, `background: var(--bg-secondary)`, 2px border, `box-shadow: var(--shadow-rgb-split)`, `padding: var(--space-6)`, radius 0.\n- **Hover:** `transform: translateY(-2px)` + intensified chromatic shadow + brief jitter burst.\n- **Focus-within:** border highlight when a child link\u002Fbutton receives focus.\n- **Loading (`.card--skeleton`):** shimmer animation (sweeping gradient keyframe) defined in CSS to prevent layout jumps — used inside the demo modal.\n- **Empty state (`.card--empty`):** structured fallback with a Material Symbol icon and guidance text; define the class even if unused on the page.\n\n### 2.3 Forms & Inputs\n- **Structure:** `.input-group` flex container wrapping a `\u003Clabel>`, the input, and a dedicated error-feedback element (`\u003Cp class=\"input-group__error\" role=\"status\" aria-live=\"polite\">`), wired via `for`\u002F`id` and `aria-describedby`.\n- **States (all styled):** empty, focused (outline ring via `--primary`), filled, valid (success border + check icon), invalid (error border + error icon + text message — never color-only), disabled, read-only.\n- The newsletter form in the Final CTA is the live instance of every state.\n\n### 2.4 Modal\n- **States:** opening, open, loading (skeleton content), closing — all animated via CSS transitions (glitch tear-in: `clip-path` slice resolving to full + slight translate; tear-out reversed).\n- **UX:** centered flex container (`align-items: center`) over a backdrop overlay; Material Symbols `close` button; keyboard focus trapping; close via `Esc` and overlay click; body scroll locked while open; focus returns to the trigger on close.\n- **A11y:** `role=\"dialog\"`, `aria-modal=\"true\"`, `aria-labelledby` pointing at the modal title.\n\n### 2.5 Toast \u002F Live Feedback\n- Fixed-position toast at `z-index: var(--z-toast)`, `aria-live=\"polite\"`, success\u002Ferror variants (icon + text, never color-only), auto-dismiss after ~4s plus a close button. Used to confirm newsletter signup.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n### 3.1 Responsive by Default\nFluid sizing (`clamp()` for headings), responsive breakpoints, zero horizontal overflow from 320px up.\n\n### 3.2 Motion & Glitch Governance\n- All state changes transition via `transition: var(--transition-normal)` (or `--transition-fast`); glitch easing uses `var(--ease-standard)`.\n- **Broken-signal rule:** glitch\u002Fjitter\u002Ftear animations are burst-based — short corruption bursts inside longer rest cycles (e.g., a 4s animation where corruption occupies only the first ~0.5s). Never run high-intensity distortion continuously.\n- **`prefers-reduced-motion: reduce`:** disable ALL glitch, jitter, scan, tear, and smooth-scroll animations; keep only static ±2px chromatic offsets; transitions reduced to opacity\u002Fcolor only.\n- **Readability guard:** the base text layer is always fully legible; effect layers are offset copies\u002Fslices behind or clipped around it. The fixed scanline overlay uses `var(--noise)` at low opacity, `pointer-events: none`, and `z-index: var(--z-scanlines)` (below header, dropdown, modal, and toast).\n\n### 3.3 Accessibility\n- **Contrast:** ≥4.5:1 for text, ≥3:1 for large text and UI borders in BOTH themes (the 0.3 values are pre-validated — do not alter them without re-checking).\n- Never rely on color alone to communicate state (pair color with icon + text).\n- Semantic HTML5 (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`, one `h1`); correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability — no mouse-only interactions; `aria-live` regions for form errors, toasts, and loading states.\n- Style `::selection` (red background, `--on-primary` text) as a thematic flourish.\n\n### 3.4 Feedback & Destructive Actions\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- `.btn--danger` \u002F delete actions must be visually distinct in both light and dark themes.\n\n---\n\n## 4. PAGE SECTION SPECIFICATIONS\n\n### 4.1 Header \u002F Nav (sticky)\nFlex nav on `var(--bg-secondary)` with 2px bottom border: text logo with glitch hover, links (Features, How It Works, Testimonials, Pricing, FAQ) with chromatic text-shadow hover and smooth in-page scrolling (`scroll-behavior: smooth` + `scroll-padding-top` matching header height), the theme toggle (per 1.3), and a `.btn--primary` \"Get Access\" CTA. Mobile: hamburger button (Material Symbols `menu`\u002F`close`) with `aria-expanded` + `aria-controls`, menu converts to a column panel, closes on link click and `Esc`.\n\n### 4.2 Hero\nStatus eyebrow line (`\u002F\u002FSYS: SIGNAL_ACQUIRED v2.0.4`), `h1.glitch` headline with `data-text` attribute — implement the signature effect with `::before`\u002F`::after` copies via `content: attr(data-text)`, one tinted `var(--primary)` offset left, one `var(--secondary)` offset right, animated with `clip-path: inset()` slice keyframes on burst cycles (per 3.2); at rest only a static ±2px chromatic `text-shadow` remains. Subcopy, primary CTA scrolling to Pricing, ghost CTA \"View Demo\" opening the modal (4.10). Include a CSS-only \"corrupted terminal\" visual (block corruption via clipped pseudo-element slices, pixel-sort bands via stacked gradients, tearing via translate keyframes, noise overlay). No external images.\n\n### 4.3 Features — 3 cards\nSection kicker + `h2` with chromatic hover. Three `.card` blocks, each with a Material Symbol (`broken_image`, `graphic_eq`, `blur_on` or similar), title, and real copy. Hover\u002Ffocus-within per 2.2.\n\n### 4.4 How It Works — 3 steps\nSteps 01 \u002F 02 \u002F 03 with glitch-styled numerals, icon + title + copy each; on desktop a flex row connected by an animated scanline\u002Ftear divider; column layout on mobile.\n\n### 4.5 Testimonials\nThree quote cards: avatar as an initials block (no external images), quote, name, muted role. Hover applies the chromatic quote shadow.\n\n### 4.6 Pricing — 3 tiers\nGLITCH \u002F DATAMOSH \u002F SINGULARITY. Middle tier uses `.card--featured` with a `.badge` (\"MOST CORRUPTED\" — badge text `var(--on-primary)` on `var(--primary)`, radius 0) and the `.btn--primary`; other tiers use `.btn--ghost`. Feature lists use Material Symbols `check` icons. Prices get a glitch hover.\n\n### 4.7 FAQ\nFive native `\u003Cdetails>`\u002F`\u003Csummary>` accordions: custom rotating `expand_more` icon, `:focus-visible` ring on summary, styled open state, real Q&A copy. No JS required.\n\n### 4.8 Final CTA\nGlitch `h2` + copy + newsletter form implementing the full lifecycle per 2.3\u002F2.1: validate email on submit → invalid: inline error with icon + `aria-live` message → valid: button loading state (~1.2s simulated) → success state + toast (2.5).\n\n### 4.9 Footer\nThree to four secondary-link columns, a social row rendered as text links or generic Material Symbols (brand SVGs are forbidden), copyright line, a decorative `END_OF_TRANSMISSION \u002F\u002F` status line, and a back-to-top link (`arrow_upward`).\n\n### 4.10 Demo Modal\nPer 2.4, opened from the hero ghost CTA: title, close button, a simulated player area that shows `.card--skeleton` shimmer briefly then reveals a CSS \"signal\" visual (scanlines + chromatic offset blocks), full focus trap and `Esc`\u002Foverlay-close behavior.\n\n### 4.11 Toast\nPer 2.5.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n### 5.1 Files\n- **`index.html`** — semantic markup, Google Fonts + Material Symbols links, `data-theme=\"dark\"` on `\u003Chtml>`, zero inline styles, and exactly one script reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`.\n- **`style.css`** — all tokens, components, states, glitch effects, and theme variants, organized in `@layer` blocks per 1.5.\n- **`script.js`** — behavior only: theme toggle + persistence, mobile nav, modal open\u002Fclose\u002Ffocus-trap, form validation + states, toast. No styling logic in JS.\n\n### 5.2 Naming\nBEM only, consistent across all three files; utility classes map back to tokens.\n\n### 5.3 Copy\nAll user-facing copy in English, real and theme-appropriate; placeholders only where content was genuinely unspecified (there should be none).\n\n### 5.4 Pre-Delivery Validation Checklist\nBefore finishing, verify: both themes meet contrast thresholds · keyboard-only pass through every interactive element · no horizontal scroll at 320px · `prefers-reduced-motion` silences all glitch motion · modal traps focus, closes on `Esc`\u002Foverlay, restores focus · form errors\u002Fsuccess announce via `aria-live` · zero inline styles\u002Fscripts · no console errors.\n",1791954984676]