[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-715-MANDALA-radial-symmetry-studio":3},"# SYSTEM PROMPT — CODING AGENT BRIEF\n\n**Build the complete \"MANDALA — Radial Symmetry Studio\" landing page. Production-grade code, delivered on the first attempt, in exactly three files: `index.html`, `style.css`, `script.js`.**\n\n---\n\n## 0. PROJECT BRIEF\n\n- Deliver a **single-page, artistic\u002Fcreative landing page** for *Mandala*, a fictional radial-symmetry design studio.\n- Visual identity: **2020s contemporary glassmorphism** — translucent glass panels floating over luminous indigo\u002Fperiwinkle gradient fields, concentric radial \"mandala\" motifs, soft glows, generous rounded geometry, serene and precise.\n- **Mode exception (explicit):** the source spec designates **Light as the primary mode** — Light is the default presentation. **Dark Mode remains mandatory** and must be fully tokenized, styled, persisted, and toggleable.\n- **Framework exception (explicit):** per the zero-build, three-file deliverable, use **hand-authored custom CSS** (the sanctioned \"clean custom CSS\" path). Do **not** add Tailwind, any framework CDN, or any build step.\n- Required sections, in order: sticky header (page chrome + theme toggle), 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- **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:** markup stays semantic and style-agnostic (5 landmarks, one `\u003Ch1>`, heading hierarchy in order). Changing the theme must require editing CSS only.\n\n### 1.2 CSS Variables & Theme Tokens\n- Store **all** visual tokens in `:root` and the dark-theme selectors. These tokens are **mandatory**: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n- **Contrast pairing:** every light background token pairs with a dark text token and every dark background token with a light text token — in both themes. Concrete values are fixed in §5.2; do not deviate.\n- **Light background:** never pure white. The light page surface is `#e9ecf7`; if a near-white surface is ever needed, use `#fefefe`, never `#ffffff`.\n- **Geometry, depth, motion, stacking tokens (mandatory):** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`. Define all of them even if unused, to prevent stacking conflicts.\n- **No hard-coded colors, sizes, or durations in rules** — reference `var(--...)` everywhere.\n\n### 1.3 Mandatory Dark Mode Support\n- Define dark tokens under **both** `@media (prefers-color-scheme: dark)` (as the flash-free, no-JS fallback) **and** a `.dark` class on `\u003Chtml>`. Keep both dark token blocks identical.\n- JS must set an explicit class (`.dark` or `.light`) on `\u003Chtml>` at boot: **localStorage first**, else `matchMedia` system preference, else Light. The class must win over the media query so stored preferences always apply.\n- The theme switch must animate seamlessly (transition background\u002Fcolor tokens); set `color-scheme` correctly per theme.\n- **Persistence + toggle:** user choice persists via `localStorage`; a visible toggle in the header shows the correct `aria-pressed` state and a descriptive `aria-label` (e.g., \"Switch to dark theme\").\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build all layout structure with **Flexbox** (`display: flex`). Every flex container defaults to `align-items: center` unless a documented exception exists (e.g., stretched pricing cards — justify it in a CSS comment).\n- **Mobile-first:** multi-column rows collapse to columns below 768px; no fixed widths; **no horizontal scrolling at any viewport from 320px to 1920px**.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- Load **Google Fonts** via `\u003Clink>`: **\"Fraunces\"** for display headings (`--font-display`) and **\"Inter\"** for body\u002FUI (`--font-base`). No other font sources.\n- Icons: **Google Material Symbols (Rounded style)** via the standard stylesheet, using `\u003Cspan class=\"material-symbols-rounded\">icon_name\u003C\u002Fspan>`.\n- **Raw inline SVGs and local icon files are explicitly forbidden** — including for the mandala ornaments, glows, and avatars: generate every ornament with pure CSS gradients (§5.4). Verify each icon name exists in Material Symbols Rounded.\n\n### 1.5 — *(folded into §0 framework exception: custom CSS, BEM naming, no utility-class mixing.)*\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--sm`)\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` pill radius; minimum touch target **44×44px**; font-weight 600; Google Icon where semantically meaningful (e.g., `arrow_forward` on CTAs).\n- **Hover:** brightness\u002Fglow shift, `cursor: pointer` (gate hover styles behind `@media (hover: hover) and (pointer: fine)`).\n- **Focus:** distinct `:focus-visible` ring built from tokens (2px outline + soft glow shadow).\n- **Active\u002FPressed:** `transform: scale(0.97)` feedback.\n- **Loading (`.is-loading`):** button is `disabled`, `aria-busy=\"true\"`, `pointer-events: none`, double-clicks impossible; a CSS-only conic-gradient spinner appears absolutely centered via a pseudo-element **without changing button dimensions**; label dims to 0.35 opacity.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError (`.is-success`, `.is-error`):** temporary feedback states driven by `--text-success` \u002F `--text-error` (border + icon + adjacent message — never color alone).\n\n### 2.2 Card Component (`.card`, glass surface)\n- **Default:** flexbox layout, glass styling per §5.3, 1px `--glass-border`, elevation from tokens.\n- **Hover:** `transform: translateY(-2px)` plus intensified glow.\n- **Focus-within:** card border highlights when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** define a `.skeleton` shimmer keyframe utility in CSS (linear-gradient sweep) for reuse; it must not cause layout jumps.\n- **Empty state:** not required (no async content on this page) — do not invent empty content.\n\n### 2.3 Form & Input (Final CTA email capture)\n- **Structure:** flex container wrapping a programmatically associated `\u003Clabel>` (may be visually hidden), `\u003Cinput type=\"email\" autocomplete=\"email\" required>`, and a dedicated error\u002Fsuccess message container with `role=\"status\"` \u002F `aria-live=\"polite\"`, linked via `aria-describedby`.\n- **States in CSS:** empty, focus (token ring), filled, **valid** (`--border-success` + `check_circle` icon + message), **invalid** (`--border-error` + `error` icon + message: e.g., \"Please enter a valid email address.\"), disabled. Never rely on color alone.\n- JS validates on submit (`novalidate` on the form), simulates async (loading ~1.2s), then resolves to the success state (\"You're on the list — check your inbox.\") announced via the live region.\n\n### 2.4 Modal \u002F Popup — **Out of scope.** Do not add modals, overlays, hamburger menus, or carousels. On mobile, hide the middle nav links and keep logo + theme toggle + CTA visible.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` typography (H1 ≈ `clamp(2.6rem, 6vw, 4.5rem)`), no horizontal overflow, sticky header offset via `scroll-padding-top`.\n- **Smooth animations:** every state change transitions with `var(--transition-normal) var(--ease-standard)`. **`prefers-reduced-motion: reduce` must disable all rotation, shimmer, transforms, and smooth scrolling** (instant opacity changes only).\n- **Accessibility (a11y):** AA contrast in **both** modes — glass surfaces must keep ≥ 0.5 background alpha so text contrast holds. Skip link, semantic landmarks, logical focus order, full keyboard operability (native `\u003Cdetails>`\u002F`\u003Csummary>` for FAQ, native buttons everywhere), `aria-live` for dynamic feedback, visible focus rings on every interactive element. `--secondary` may never be used for body text in Light mode (fails AA on `#e9ecf7`).\n- **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n- **Destructive actions:** none on this page; still define `.btn--danger` styling distinct in both themes for reuse.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js`. Exactly **one** `\u003Cscript src=\"script.js\" defer>` reference; **zero** inline `\u003Cscript>` or `style` blocks. Standard `\u003Clink>` for `style.css`.\n- **Naming convention:** BEM only (`.card`, `.card__title`, `.card--featured`, `.section__eyebrow`). Never mix conventions; no ad-hoc utility classes.\n- **Copy:** write polished, real **English** copy in a serene, precise, poetic-minimal studio voice — **lorem ipsum is forbidden**. All user-facing text in English.\n- **Assets:** zero `\u003Cimg>` tags, zero external requests beyond Google Fonts + Material Symbols. Avatars are CSS initial circles; all imagery is CSS-generated.\n\n---\n\n## 5. MANDALA DESIGN LANGUAGE\n\n### 5.1 Concept\nRadial symmetry: concentric rings, centered compositions, circular glow badges, glass panels floating over an ambient aurora of blurred indigo\u002Fperiwinkle orbs.\n\n### 5.2 Token Map (author these exact values)\n\n| Token | Light (default, `:root`) | Dark (`.dark` + media fallback) |\n|---|---|---|\n| `--primary` | `#1d2140` | `#c9cdea` |\n| `--text-on-primary` | `#c9cdea` | `#141628` |\n| `--secondary` | `#7f84ad` | `#7f84ad` |\n| `--bg-primary` | `#e9ecf7` | `#0d0e1c` |\n| `--bg-secondary` (glass) | `rgba(254,254,254,0.55)` | `rgba(20,22,40,0.55)` |\n| `--text-primary` | `#171a2b` | `#c9cdea` |\n| `--text-secondary` | `#4a4f78` | `#7f84ad` |\n| `--text-success` | `#1e6f4f` | `#63d6a5` |\n| `--text-error` | `#b3261e` | `#f28b82` |\n| `--border-default` | `rgba(23,26,43,0.14)` | `rgba(201,205,234,0.16)` |\n| `--border-success` \u002F `--border-error` | `#1e6f4f` \u002F `#b3261e` | `#63d6a5` \u002F `#f28b82` |\n| `--glass-border` | `rgba(127,132,173,0.35)` | `rgba(201,205,234,0.18)` |\n| `--glow-primary` | `rgba(127,132,173,0.35)` | `rgba(201,205,234,0.16)` |\n| `--bg-inverse` (footer) | `#171a2b` | `#141628` |\n| `--focus-ring` | `#1d2140` | `#c9cdea` |\n\nExtensions: `--radius-pill: 999px`, `--radius-sm\u002Fmd\u002Flg: 10\u002F18\u002F28px`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4,0,0.2,1)`, `--spacing-gap: 1.5rem`, `--z-header: 30`, plus mandated `--z-dropdown\u002F--z-modal\u002F--z-toast`, theme-tuned `--shadow-sm\u002F--shadow-md`, and a `--gradient-text` stop pair per theme. **No colors outside this palette and its rgba tints** (plus the semantic success\u002Ferror hues above).\n\n### 5.3 Glass \u002F Glow \u002F Blur Recipes\n- **Glass:** `background: var(--bg-secondary);` + `backdrop-filter: blur(18px) saturate(140%);` (+ `-webkit-` prefix) + `border: 1px solid var(--glass-border)` + inset top highlight. Provide an `@supports not (backdrop-filter…)` fallback raising background alpha to 0.92.\n- **Glow:** layered `box-shadow` rings using `--glow-primary` on badges, featured cards, and focus states.\n- **CSS filters:** use `filter: brightness()\u002Fsaturate()` for hover intensification — **never on ancestors of glass elements** (an ancestor `filter` breaks `backdrop-filter` sampling; blur the orb pseudo-elements themselves, behind the glass).\n\n### 5.4 Radial Ornament & Background System\n- A fixed, full-viewport background layer (pseudo-element, `z-index` behind content, hidden overflow) holding 3–4 blurred radial-gradient orbs (`filter: blur(80px+)`) in `#c9cdea`, `#7f84ad`, and `#1d2140` alphas per theme.\n- A **mandala ring** ornament (hero + Final CTA): a circular element built purely from `repeating-conic-gradient` + `repeating-radial-gradient`, masked into a ring with a radial-gradient `mask`, rotating at 60–90s linear infinite (disabled under reduced motion), glowing softly.\n- **Gradient headline:** H1\u002FH2 use `background-clip: text` with `--gradient-text`, wrapped in `@supports` with a solid `--text-primary` fallback.\n\n---\n\n## 6. PAGE STRUCTURE & SECTION SPECIFICATIONS\n\nWrite real on-theme copy; suggested key copy may be refined within the voice rules.\n\n**6.0 Shell & Header.** `\u003Chtml lang=\"en\">`, viewport meta, `\u003Ctitle>Mandala — Radial Symmetry Studio\u003C\u002Ftitle>` + meta description. Skip link → main. Sticky glass header (`.header`, `--z-header`): wordmark \"Mandala\" with `flare` icon in a glowing circular badge; anchor links (Features, Process, Testimonials, Pricing, FAQ); theme toggle (icons `dark_mode`\u002F`light_mode`); small `.btn--primary` \"Start a project\" → `#cta`.\n\n**6.1 Hero.** `min-height: 92svh`, centered flex column. Eyebrow: \"The Radial Symmetry Studio\". H1: \"Design in perfect balance.\" Lede (1–2 sentences). Primary button \"Start a project\" + `.btn--ghost` \"See how it works\". Rotating mandala ring behind the headline; three glass stat chips (\"120+ brands centered\", \"9 design awards\", \"98% retention\").\n\n**6.2 Features — 3 glass cards.** Section pattern: `.section__eyebrow`, `.section__title`, `.section__lede`. Cards: icon badge (`filter_center_focus`, `blur_on`, `auto_awesome`), titles \"Radial Composition\" \u002F \"Layered Translucency\" \u002F \"Luminous Gradients\", one-sentence descriptions, \"Explore\" link with `arrow_forward`. Full card state matrix (§2.2).\n\n**6.3 How It Works — 3 steps.** Steps \"01 Compose\", \"02 Layer\", \"03 Illuminate\": glowing numbered circles, short descriptions, connected by a CSS dotted guide line (horizontal desktop → vertical mobile).\n\n**6.4 Testimonials — 3 glass quote cards.** `format_quote` icon, quote copy, star row (`star`\u002F`star_half`, with `aria-label` e.g., \"Rated 5 out of 5\"), CSS initials-avatar circles, fictional names + roles (e.g., \"Iris Chen — Creative Director, Studio Lumen\").\n\n**6.5 Pricing — 3 tiers.** Glass cards \"Sprout $290\u002Fmo\", \"Bloom $540\u002Fmo\" (featured: `--card--featured`, glow ring, scale on desktop only, \"Most loved\" badge, primary button; others ghost buttons), \"Radiance $1,180\u002Fmo\". Feature lists with `check` icons; footnote line.\n\n**6.6 FAQ — 5 items.** Native `\u003Cdetails>`\u002F`\u003Csummary>` accordion; custom chevron (`expand_more`) rotating 180° on open; summary focus ring; marker removed; topics: timeline, revisions, deliverables\u002Fformats, licensing, changing tiers.\n\n**6.7 Final CTA.** Large glass panel over an intensified radial glow burst; H2 \"Ready to find your center?\"; email capture per §2.3 with `.btn--primary` \"Request an invite\".\n\n**6.8 Footer.** `--bg-inverse` surface with `--text-on-inverse` pairing: brand blurb (\"Crafted in radial symmetry — every pixel in orbit.\"), three secondary link columns (Studio \u002F Resources \u002F Company), icon-only social links (`alternate_email`, `rss_feed`, `link`) with `aria-label`s, Privacy\u002FTerms links, dynamic © year, back-to-top link (`arrow_upward`). Links get a hover underline transition.\n\n---\n\n## 7. ACCEPTANCE CHECKLIST (verify before delivering)\n\n1. Zero `style=\"\"`, zero inline `\u003Cscript>`, zero inline SVGs, zero `\u003Cimg>`, zero external requests beyond Google Fonts\u002FMaterial Symbols.\n2. All mandated tokens defined in Light **and** Dark; both dark blocks identical; toggle persists via localStorage with correct `aria-pressed`.\n3. BEM naming only; no horizontal scroll from 320px–1920px; all touch targets ≥ 44px.\n4. Buttons show all 7 states; cards show hover + focus-within; skeleton keyframes exist; form shows valid\u002Finvalid\u002Fsuccess\u002Floading with `aria-live` feedback.\n5. `prefers-reduced-motion` honored; focus rings visible everywhere; AA contrast in both modes; one `\u003Ch1>`; FAQ keyboard-native.\n6. Real English copy throughout — no lorem ipsum, no unrequested placeholders.\n",1791954991598]