[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-732-BETWEEN-STATIONS-a-night-radio":3},"# SYSTEM PROMPT — CODING AGENT\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Your output must be final, shippable code — no drafts, no TODOs, no placeholder scaffolds.\n\n---\n\n## PROJECT BRIEF\n\n**Product & Copy:** \"BETWEEN STATIONS — a night radio\" is a streaming service broadcasting hand-tuned music, warm static, and low-voiced hosts for people awake in the small hours. Write **all user-facing copy in English**, on-theme, and final. No lorem ipsum.\n\n**Type \u002F Keywords:** Audio\u002FMusic — noise, radio, tuner, audio, music, gradient.\n**Era:** 2020s contemporary — clean section rhythm, confident type scale, generous spacing.\n**Theme Mode:** Light mode is the **default** presentation (source spec: ✓ Light \u002F ○ Dark). Dark mode remains **mandatory** (see Rule 1.3) — it is this brand's natural \"after lights-out\" counterpart. Do not drop it.\n**Palette (source):** #17120c, #0e0a07, #5a3f26 (primary family) · #4a3320, #3a2917, #2c1e10 (secondary family). Derive all tints, borders, glows, and gradients from these warm brown\u002Famber hues only — no outside hues (success\u002Ferror tokens excepted).\n**Required Visual Effects:** Glow, Neumorphism, Gradients, Hover effects, Noise\u002FGrain — implemented 100% in CSS.\n**CSS Techniques:** Flexbox, Transitions, Transforms, Gradients, Box Shadows, Border Radius.\n**Sections (in this order):** Header\u002FNav · Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.\n\n**Creative Direction:** The light theme should read as \"warm paper lit by a radio dial\" — candlelit cream surfaces, deep brown ink, an amber tuner accent. Dark mode is the room after lights-out. The signature motif is a **neumorphic tuner card** in the hero: a frequency dial with tick marks, a glowing amber needle, an ON AIR indicator, and animated waveform bars. Reserve the mono typeface for frequencies, timestamps, and readouts. A film-grain \"FM static\" overlay sits over the entire page in both themes.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n### 1.1 CSS-First Architecture & Zero Inline CSS\n\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML. No presentational attributes (`bgcolor`, `width` on non-media elements, etc.).\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must live in `style.css`, targeted via class or ID selectors (BEM classes in the markup are the styling hooks).\n* **Minimal HTML Coupling:** Markup must stay semantic and style-agnostic. Runtime updates (theme, needle position, accordion state) must occur via class toggles or CSS custom properties — never by injecting inline styles into the HTML.\n\n### 1.2 CSS Variables & Theme Tokens\n\nAll visual tokens must be defined as CSS variables. Use this baseline (you may fine-tune values, never structure, and only within the palette hue families):\n\n```css\n:root { \u002F* LIGHT — default *\u002F\n  --font-display: 'Fraunces', serif;\n  --font-base: 'Inter', sans-serif;\n  --font-mono: 'Space Mono', monospace;\n\n  --bg-primary: #f4ead9;      \u002F* warm candlelit cream — never #ffffff; use #fefefe if near-white is truly needed *\u002F\n  --bg-secondary: #ece0c9;\n  --primary: #5a3f26;\n  --secondary: #4a3320;\n  --accent-glow: #c9884a;     \u002F* amber derived from the #5a3f26 hue family *\u002F\n  --text-primary: #17120c;\n  --text-secondary: #5a3f26;\n  --text-on-primary: #f4ead9;\n  --text-success: #2e6b4f;\n  --text-error: #a63d2f;\n  --border-default: rgba(90, 63, 38, 0.28);\n  --border-success: rgba(46, 107, 79, 0.55);\n  --border-error: rgba(166, 61, 47, 0.55);\n\n  \u002F* Neumorphism & glow *\u002F\n  --nm-out: 8px 8px 18px rgba(14,10,7,.18), -8px -8px 18px rgba(254,254,254,.85);\n  --nm-in: inset 6px 6px 12px rgba(14,10,7,.16), inset -6px -6px 12px rgba(254,254,254,.70);\n  --glow-sm: 0 0 12px rgba(201,136,74,.35);\n  --glow-md: 0 0 28px rgba(201,136,74,.50);\n  --gradient-warm: linear-gradient(135deg, #5a3f26, #2c1e10);\n  --gradient-glow: linear-gradient(135deg, #c9884a, #5a3f26);\n\n  \u002F* Shape, motion, depth *\u002F\n  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px;\n  --shadow-sm: 0 1px 3px rgba(14,10,7,.14);\n  --shadow-md: 0 6px 18px rgba(14,10,7,.18);\n  --spacing-gap: clamp(1.25rem, 3vw, 2.5rem);\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-grain: 60; --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;\n}\n```\n\nDark tokens (under both `.dark` and the no-JS baseline `@media (prefers-color-scheme: dark)`):\n\n```css\n--bg-primary: #0e0a07; --bg-secondary: #17120c;\n--primary: #c9884a;        \u002F* brightened for contrast against dark surfaces *\u002F\n--secondary: #8a6a45;\n--text-primary: #f4ead9; --text-secondary: #b39872;\n--text-on-primary: #17120c;\n--text-success: #6fbf8f; --text-error: #e08a7a;\n--border-default: rgba(201,136,74,.28);\n--nm-out: 8px 8px 18px rgba(0,0,0,.60), -8px -8px 18px rgba(90,63,38,.14);\n--nm-in: inset 6px 6px 12px rgba(0,0,0,.65), inset -6px -6px 12px rgba(90,63,38,.12);\n--gradient-warm: linear-gradient(135deg, #2c1e10, #17120c);\n```\n\n* **Contrast Pairing:** Every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforce this in **both** themes. Verify all text\u002Fbackground pairs meet WCAG AA (4.5:1 body text, 3:1 large text and UI boundaries); adjust derived shades within the same hue families until they pass.\n* **Neumorphism tokens must adapt per theme** (`--nm-out`, `--nm-in`) so soft dual shadows read correctly on cream and on near-black.\n\n### 1.3 Mandatory Dark Mode Support\n\n* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` (no-JS first-visit baseline, prevents flash) and a `.dark` class on `\u003Chtml>`. Also define a `.light` class to force light over a dark system preference.\n* **Theme Switching:** All colors must flow through variables so themes switch with zero HTML restructuring. The neumorphic shadows, glows, and grain opacity must retune for dark mode (shadows darker\u002Fdeeper, glow slightly stronger).\n* **Persistence:** `script.js` reads `localStorage` (\"bstations-theme\"); falls back to `prefers-color-scheme` on first visit; applies `.dark`\u002F`.light` immediately on parse. The header must contain a visible toggle button using Material Symbols (`light_mode` \u002F `dark_mode`) with correct `aria-pressed` state and an `aria-label` of \"Toggle dark mode\" (update label text to reflect the current state).\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n\n* **Default Alignment Rule:** Every flex container defaults to `align-items: center`. Any deviation (e.g., `stretch` for equal-height cards, `flex-start` for step copy) must be a deliberate, commented exception.\n* **Mobile-Friendly First:** Build at 320px upward. Multi-column rows (features, pricing, testimonials, footer columns, hero) must collapse to a single column or wrap (`flex-wrap: wrap` with `flex: 1 1 \u003Cmin-basis>`) on small viewports. Use `min-width: 0` on flex children containing text. Horizontal scrolling is forbidden at any width.\n* **Fluid Type\u002FSpacing:** Use `clamp()` for headings, section padding, and container widths; no fixed pixel page widths.\n\n### 1.5 Styling Approach\n\n* Given this design's heavy custom effects (neumorphism, glow, grain, gradients), write **clean, hand-authored CSS in `style.css`** organized into `@layer` blocks: `tokens`, `base`, `components`, `utilities`. Tailwind utilities are permitted only if every utility maps back to the CSS variables above — never mix Tailwind utility naming with BEM naming in the same file.\n* Every button, card, and input must resolve to generic reusable classes (`.btn`, `.card`, `.input-group`), not one-off rules.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n\n* **Text:** Load via Google Fonts `\u003Clink>`: **Fraunces** (display\u002Fheadings, 500–700, include italic), **Inter** (body, 400–600), **Space Mono** (frequency\u002Ftime readouts, 400\u002F700). Bind them to `--font-display`, `--font-base`, `--font-mono`.\n* **Icons:** Use **Google Material Symbols Rounded** via the official stylesheet; configure `font-variation-settings` for FILL\u002FWGHT. Every icon must carry an accessible name: either visible adjacent text or an `aria-label`\u002Fvisually-hidden label on the icon's link\u002Fbutton.\n* **Raw inline SVGs and local icon files are forbidden.** *Exception clause:* the noise\u002Fgrain texture may reference an `feTurbulence` SVG **as a data-URI background-image inside `style.css`** — no `\u003Csvg>` element may appear in the HTML markup, and the exception applies to texture only, never to icons.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Buttons\n\nAll states via CSS classes on `.btn` \u002F `.btn--primary` \u002F `.btn--ghost` \u002F `.btn--danger`:\n\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`. Minimum touch target 44×44px. `.btn--primary` uses `--gradient-warm` (or `--primary`) with `--text-on-primary` text; `.btn--ghost` uses neumorphic raised surface with `--border-default`.\n* **Hover:** Brightness\u002Fglow shift (`--glow-sm`) with `cursor: pointer`, animated via `var(--transition-fast)`.\n* **Focus:** A distinct visible focus ring (`outline` or `box-shadow` using `--accent-glow`) on `:focus-visible` — never remove outlines.\n* **Active\u002FPressed:** `transform: scale(0.97)` with transition snap-back.\n* **Loading:** `.is-loading` — disables pointer events (prevents double-clicks), swaps the label for a rotating Material Symbol (`progress_activity` with a CSS spin) or CSS ring **without changing button dimensions** (reserve label width).\n* **Disabled:** `opacity: 0.5`, desaturated\u002Fgreyscale, `cursor: not-allowed`.\n* **Success\u002FError:** `.btn--success` \u002F `.btn--error` temporary feedback styles driven by `--text-success` \u002F `--text-error` and paired border tokens.\n* **Danger:** `.btn--danger` must be visually distinct in **both** themes (error-tinted surface\u002Fborder, never a bare color swap of primary).\n\n### 2.2 Cards\n\n* **Default:** Flexbox column layout (contents centered or stretch per Rule 1.4 exceptions), surface `--bg-secondary` on a `--bg-primary` page, `--border-default` border, `--radius-lg`, elevation via `--nm-out`.\n* **Hover:** `transform: translateY(-2px)` plus a subtle glow or shadow shift.\n* **Focus-within:** Card border brightens when any child link\u002Fbutton receives focus.\n* **Loading (Skeleton):** Define `.card--skeleton` with a shimmer keyframe (gradient sweep on `--bg-secondary` tones) sized to the real content so layout never jumps.\n* **Empty State:** Define `.card--empty` — a Material Symbol (e.g., `sensor_busy`), a short guidance line, and a suggested action; pair it with the skeleton pattern.\n\n### 2.3 Forms & Inputs\n\n* **Structure:** `.input-group` flex container wrapping: a `\u003Clabel>` (visually hidden only if the design genuinely supports it), the input, and a dedicated error-feedback element (`role=\"status\"` \u002F `aria-live=\"polite\"`, linked via `aria-describedby`).\n* **States — all styled as classes:** empty, `:focus` (outline ring using `--accent-glow`), filled, valid (`.input--valid`: `--border-success` + `check` icon), invalid (`.input--error`: `--border-error`, error text\u002Ficon — never color alone), disabled, read-only.\n* **Validation:** `script.js` validates the Final CTA email field on submit; feedback appears in the live region with matching button loading → success\u002Ferror states (Rule 2.1). Simulate an ~800ms async submit.\n\n### 2.4 Modals & Overlays\n\n* No modal is requested for this page — but native `alert()`, `confirm()`, and `prompt()` are **prohibited**. If you introduce any overlay, it must meet: open\u002Fopen\u002Floading\u002Fsuccess\u002Fclosing states animated via CSS transitions; centered flex container (`align-items: center`); backdrop overlay; Material Symbol `close` button; focus trapping; Escape and overlay-click closing; `role=\"dialog\"`, `aria-modal=\"true\"`, labelled by its heading; stacked at `--z-modal`.\n\n### 2.5 Page Sections — Build Requirements\n\n**Header:** Sticky; `--bg-primary` surface with a hairline `--border-default` bottom; brand wordmark \"BETWEEN STATIONS\" in Fraunces with a small `graphic_eq` icon; anchor nav links (Frequencies, How It Works, Pricing, FAQ) with `scroll-behavior: smooth` on `html` (disabled under reduced motion); theme toggle (Rule 1.3); a compact `.btn--primary` \"Listen Now\" CTA. On mobile, collapse nav behind a `menu`-icon button (`aria-expanded`, keyboard operable, `--z-dropdown`). Include a visually hidden skip link as the first focusable element.\n\n**Hero:** Two-column flex (copy left, tuner right; stacked on mobile). H1 in Fraunces, e.g., *\"For the hours nobody claims.\"* Subcopy explaining the night-radio concept. CTAs: `.btn--primary` \"Tune in free\" (with `play_arrow`) and `.btn--ghost` \"Browse frequencies\". A mono-font frequency strip: `87.7 NIGHT DRIVE · 91.3 STATIC GARDEN · 98.1 LAST CALL · 104.1 FIRST LIGHT`.\nThe **tuner card** is CSS-only: a neumorphic panel (`--nm-out`, `--radius-lg`) containing — an inset dial well (`--nm-in`) with tick marks drawn from `repeating-linear-gradient` and mono MHz labels; a thin amber needle (gradient background, `--glow-md` box-shadow, slow idle-drift keyframe animation); a flex row of 5–7 waveform bars with staggered `scaleY` keyframes; an ON AIR chip (pulsing dot **plus** visible text — never color alone, with an sr-only \"Live now\" status). All decorative animation elements are `aria-hidden=\"true\"`. Background: a soft radial `--gradient-glow` wash behind the section in both themes.\n\n**Features — 3 cards:** `.card` instances, each with a neumorphic raised icon chip (`tune`, `noise_aware`, `bedtime`), an H3, and one–two sentences of real copy. Suggested angles: hand-tuned frequencies with human hosts; a warm static bed you can sink into; a drift-off sleep timer that fades the broadcast as you fall asleep. Layout: flex row, wrapping to one column under ~800px, equal heights, Rule 2.2 hover\u002Ffocus states.\n\n**How It Works — 3 steps:** Horizontal stepper (column on mobile). Each step: a neumorphic circular dial marker with a mono number (01\u002F02\u002F03), an H3, and copy — e.g., 1) Pick your hour and frequency block; 2) Press play and let it run — the drift is the point; 3) Set the drift-off timer; the station signs off with you. Connect steps with a thin `--gradient-glow` \"signal line\" that collapses gracefully on mobile.\n\n**Testimonials — 3 quote cards:** Real English quotes from three night listeners (e.g., a night-shift ER nurse, a long-haul driver, a novelist who writes until dawn). Each card: a Material `star` rating row (five icons plus sr-only text \"Rated 5 out of 5\"), the quote in Fraunces italic, and name\u002Frole attribution. Flex row → column; Rule 2.2 states apply; define the skeleton and empty-state classes even if unused at runtime.\n\n**Pricing — 3 tiers:** \"Static\" (Free — one frequency, 30-minute drift-off timer), \"Signal\" ($6\u002Fmo — all frequencies, downloads, unlimited timer), \"Shortwave\" ($60\u002Fyr — everything in Signal, full archive, lossless stream). Feature lists use Material `check` icons; unavailable features use muted `close` icons with reduced opacity (icon + mute, not color alone). The middle tier is `.card--featured`: gradient border (layered `background-clip` technique), `--glow-md` halo, a \"MOST TUNED-IN\" badge, slight `scale` emphasis; its CTA is `.btn--primary`, others `.btn--ghost`. All CTAs receive full Rule 2.1 state sets.\n\n**FAQ:** 5 questions (e.g., Is it really free? What plays at 3 AM? Can I download broadcasts? How does the drift-off timer work? Which devices are supported?). Implement as native, styled `\u003Cdetails>`\u002F`\u003Csummary>` accordions: chevron Material icon that rotates when open, smooth open\u002Fclose transition, `:focus-visible` ring on the summary, generous tap target, no color-only state indication.\n\n**Final CTA:** A full-width band layered with `--gradient-warm`, a glow radial, and the grain overlay. Headline in Fraunces (e.g., *\"The night is long. Stay tuned.\"*). Email-capture form built exactly per Rule 2.3 with a `.btn--primary` submit demonstrating loading → success (\"You're on the frequency\" + `check`) and error states, all announced through the `aria-live` region.\n\n**Footer:** Brand wordmark + tagline (\"Broadcasting nightly from somewhere between midnight and morning\"). Secondary link groups in wrapping flex columns: Frequencies \u002F Schedule \u002F Archive · About \u002F Hosts \u002F Careers \u002F Press · Help \u002F Privacy \u002F Terms \u002F Cookies. Social row using Material Symbols (`rss_feed`, `podcasts`, `mail`, `public`) — each link `aria-label`ed, focus-visible; `href=\"#\"` is acceptable for unspecified destinations but link text must be real. Copyright row with the year injected by `script.js`.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by Default:** Fluid type and spacing via `clamp()`; breakpoints without horizontal overflow at any width from 320px up.\n* **Smooth Animations:** Every state change transitions via `transition: var(--transition-normal)` (hovers may use `--transition-fast`) with `--ease-standard`. Animate only `transform` and `opacity` for performance.\n* **Reduced Motion:** Under `@media (prefers-reduced-motion: reduce)`, disable the needle drift, waveform bars, shimmer, pulses, hover transforms, and smooth scrolling — retain color\u002Fopacity transitions only.\n* **Accessibility (a11y):** Semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); one `h1`, logical H2-per-section hierarchy; full keyboard operability (no mouse-only interactions); visible focus everywhere; `aria-live` regions for form and toast-like feedback; sufficient contrast in **both** modes; never rely on color alone for any state.\n* **Mandatory Visual Feedback:** Every click, hover, focus, and submission triggers a visible change.\n* **Grain Overlay:** `body::after` — fixed, full-viewport, `pointer-events: none`, z-index `--z-grain` (above content, below dropdown\u002Fmodal\u002Ftoast), `feTurbulence` data-URI or CSS-gradient static per Rule 1.6; opacity ~0.05 in light, ~0.08 in dark (drive it with a `--grain-opacity` token).\n* **Stacking Discipline:** grain (60) \u003C header\u002Fdropdown (100) \u003C modal (1000) \u003C toast (1100). No `z-index` values outside the tokens.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** Three separate files — `index.html`, `style.css`, `script.js`. Exactly one script reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline `\u003Cscript>` logic, no inline styles.\n* **Naming Convention:** BEM exclusively (`.btn`, `.btn--primary`, `.card`, `.card__title`, `.card--featured`, `.tuner__needle`, `.input-group__error`). Never mix conventions.\n* **JS Scope (from-scratch build):** Theme toggle + persistence, mobile menu, FAQ behavior (if enhanced beyond native), email validation with simulated async submit and full button states, footer year. Runtime changes via classes\u002Fcustom properties only. Prohibit `alert()`\u002F`confirm()`\u002F`prompt()`.\n* **No Unrequested Placeholders:** Since no copy was supplied, write final, original English copy for every heading, paragraph, testimonial, tier, question, and link. `href=\"#\"` only for unspecified footer\u002Fsocial destinations.\n* **Assets:** Google Fonts + Material Symbols via official links only.\n\n**Definition of Done — verify before outputting:** zero `style=` attributes; dark mode fully tokenized, toggled, persisted, and contrast-safe; every button exhibits hover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled styles; form shows valid\u002Finvalid\u002Fsuccess states with `aria-live`; cards show hover\u002Ffocus-within plus defined skeleton\u002Fempty classes; grain + glow + neumorphism present in both themes; keyboard-only pass completes every interaction; reduced-motion pass silences all decorative animation; no horizontal scroll at 320px; only Google-sourced fonts\u002Ficons used.\n",1791954991930]