The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Personality Quiz Funnel Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a polished single-page personality quiz funnel for [BRAND], centered on an original [QUIZ_TOPIC] quiz for [AUDIENCE]. The experience moves from an editorial landing page to exactly eight visual questions, a short calculating interlude, a personalized archetype result, and an email-gated [REPORT_NAME] revealed on screen. Keep all answers, scoring, and form behavior local to the browser tab.

- Audience: The primary audience is [AUDIENCE]: people who enjoy a short, low-pressure reflective exercise and want one useful next step. The template owner is a creator, coach, marketer, or small studio using the quiz to introduce a point of view and offer a deeper resource.
- Goal: Get visitors to start the quiz, finish all eight questions, understand why their result fits, and unlock the full [REPORT_NAME]. Make every control functional and make the static email demonstration honest about not sending or storing data.
- Tone: Warm, perceptive, energetic, and specific. Use encouraging plain language rather than vague affirmations. Treat results as flexible creative patterns, never fixed identities, diagnoses, rankings, or scientific measurements.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: React 18 (MIT), Vite 5 (MIT), TypeScript (Apache-2.0), Tailwind CSS 3.4 (MIT), lucide-react (ISC), @fontsource-variable/fraunces (OFL-1.1), @fontsource-variable/dm-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Use Vite 5 with React 18 and TypeScript. Set base: './' in vite.config.ts, set build.sourcemap to false, and emit only the production site to dist/.
  - Configure Tailwind CSS 3.4 with the colors, font families, spacing, radii, shadows, and keyframes below. Put custom keyframes, focus styles, print styles, and reduced-motion overrides in src/index.css.
  - Keep all editable brand copy, quiz topic copy, eight questions, answer choices, four archetypes, FAQs, and report sections in src/content.ts with TypeScript interfaces. Components must read content from that file rather than embedding default-specific strings.
  - When variable values change, rewrite every topic-specific headline, question, answer, archetype name, description, recommendation, FAQ answer, and report item to fit the new [QUIZ_TOPIC], [AUDIENCE], and [REPORT_NAME], while preserving the layout and interaction model.
  - Use one React state machine with the states landing, quiz, calculating, and result. Do not add a router. Keep current question, eight answers, unlocked state, and email input in memory only; do not use localStorage, sessionStorage, cookies, or URL query parameters.
  - Use lucide-react for interface icons and original inline SVG or CSS for decorative artwork. Do not add an animation library; use CSS transitions, keyframes, and a small IntersectionObserver for landing-section reveals.
  - Import Fraunces Variable and DM Sans Variable locally from their Fontsource packages. Create ASSETS.md at the project root listing both font packages, lucide-react, their sources, and their licenses; state that all illustrations are original code-drawn SVG/CSS and that no raster images are used.
  - Support keyboard operation, visible focus, semantic buttons and headings, aria-live progress and result announcements, 44px minimum touch targets, and a reduced-motion mode. Verify 1440×900 and 390×844 with no horizontal overflow or console errors.

## Variables
- [BRAND] — Brand name (default: "Moss & Meter"). An invented studio, creator, or publication name used in the wordmark, footer, and report.
- [QUIZ_TOPIC] — Quiz topic (default: "Creative Work Rhythm"). The reflective subject of the quiz; all questions and results must follow it.
- [AUDIENCE] — Audience (default: "independent creatives"). A concise lowercase audience description used in introductory and result copy.
- [REPORT_NAME] — Full report name (default: "Creative Rhythm Field Guide"). The personalized resource unlocked after the email form.
- [PRIMARY_CTA] — Primary quiz CTA (default: "Find my rhythm"). A short action label for hero and closing quiz-start buttons.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/personality-quiz-funnel-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Paper `#F5F0E6` — Main page background and quiet negative space
- Ink `#20231F` — Headlines, body text, borders, and dark panels
- Chalk `#FFFDF7` — Cards, inputs, and text on Ink panels
- Coral `#F28C78` — Spark accents, selected states, and decorative circles
- Lime `#CBE47A` — Primary buttons, progress fill, and Anchor accents
- Lilac `#C8B9E8` — Weaver cards and report-preview accents
- Teal `#70B8A7` — Pathfinder accents and secondary illustrations
- Muted Ink `#62665E` — Secondary copy and metadata

### Typography
- Display headlines and result archetype names: Fraunces Variable, self-hosted with @fontsource-variable/fraunces; optical sizing enabled (OFL), weights 600/700
- Body, navigation, buttons, form labels, and small metadata: DM Sans Variable, self-hosted with @fontsource-variable/dm-sans (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use an 8px base grid. Landing sections have 104px desktop and 72px mobile vertical padding. Content max-width is 1240px with 40px desktop and 20px mobile gutters. Hero copy max-width is 610px. Card padding is 28–36px desktop and 20–24px mobile; button gaps are 12px.
- Radius: Use 24px for major cards and the quiz stage, 16px for answer cards and inputs, 999px for buttons and small tags. Major cards have a 2px Ink border and a 6px 6px 0 #20231F offset shadow; hover lifts reduce that shadow to 3px 3px 0.
- Motion: Landing sections reveal with opacity 0 to 1 and translateY(18px) to 0 over 500ms using ease-out, staggered by 70ms within a grid; never hide content when IntersectionObserver is unavailable.
- Motion: Primary buttons and answer cards translate 2px upward on hover and return on press over 160ms. Selected answers fill with Lime and show a check icon before advancing.
- Motion: Starting the quiz crossfades and slides the landing view out and quiz view in over 280ms. Each answer advances after a 240ms selected state; question content exits 8px left and enters 8px right.
- Motion: The progress bar and active segment animate width or color over 240ms. The calculating interlude lasts 1100ms and cycles three status phrases; result content follows with a 420ms fade and 14px rise.
- Motion: Decorative hero shapes float no more than 8px over six seconds and an orbit label rotates slowly over 24 seconds; disable both under prefers-reduced-motion.
- Motion: Under prefers-reduced-motion, remove reveals, floating, rotation, smooth scrolling, and slide transforms; use immediate state changes or opacity-only transitions under 80ms.
- Imagery: Use no photographs, AI-generated portraits, external illustrations, or raster placeholders. The hero's visual anchor is a rich, layered quiz UI mock with original CSS/SVG geometric artwork, answer cards, progress, a paper-grid backdrop, and offset color shapes. Give each archetype a reusable original SVG emblem: radiating strokes for Spark, a precise modular grid for Anchor, interlocking loops for Weaver, and a winding contour path for Pathfinder. Keep all geometry abstract and generic.

## Pages & Sections
### Landing, quiz, result, and report funnel (`index.html`)
1. **Shared header and app shell** — On the landing state, show the [BRAND] wordmark with a simple four-dot CSS mark, center links labeled The patterns, How it works, and Questions that scroll to their sections, and a right button labeled Take the quiz. Add a small badge reading 8 questions · 2 minutes. On mobile, keep only the wordmark and Take the quiz button. During quiz and calculating states, replace the center navigation with an Exit quiz text button that returns to the landing state. On the result state, show the wordmark and a Retake quiz button.
   Layout: Sticky top header, 76px high, Paper background at 94% opacity with backdrop blur and a 1px Ink/10 bottom border. Inner row uses the 1240px container. All view changes call window.scrollTo({ top: 0 }) without smooth scrolling in reduced-motion mode. Render one main landmark and a skip link that appears on focus.
   Motion: Header stays stable across states; controls use the shared 160ms tactile hover and press treatment.
2. **Landing hero** — For the defaults, use eyebrow A TWO-MINUTE RESET FOR YOUR CREATIVE PRACTICE, H1 Your best work has a rhythm. Find yours., and body Discover whether you lead with spark, structure, connection, or exploration—and leave with one small experiment for the week ahead. Primary button is [PRIMARY_CTA] with an ArrowRight icon; secondary text button is Meet the four patterns and scrolls to the pattern grid. Under the actions show 8 visual questions, No wrong answers, and One useful next step as three compact checklist items. Rewrite the eyebrow, headline, body, and checklist for other variable values. On the right, compose a realistic preview card with label QUESTION 03 / 08, question When a new idea arrives, what do you do first?, four miniature answer tiles, an eight-segment progress bar with three active segments, and a small Next idea badge. Surround it with a circular NO WRONG ANSWERS stamp, abstract paper-grid shapes, and three offset color cards. Preview answers are static divs, not dead buttons; the only interactive control inside the preview is a Start button that triggers [PRIMARY_CTA].
   Layout: At 1440×900, the hero fills the available first screen with a two-column grid of 52% copy and 48% artwork, centered vertically with 56px minimum top and bottom padding. H1 is Fraunces 72px/0.98, 600 weight, with a Coral hand-drawn SVG underline beneath rhythm. Body is 19px/1.65 and max-width 530px. The right artwork is at least 520px wide and 590px high, with the main quiz card rotated 2 degrees and a second Lilac card rotated -5 degrees behind it. At mobile, stack copy above a 390px-high scaled preview, use H1 clamp(44px, 13vw, 58px), and keep the primary CTA visible without horizontal clipping.
   Motion: Hero copy enters first, followed by the preview card with a 100ms delay. Only decorative shapes float; the quiz card itself remains readable and stable.
3. **Four pattern cards** — Heading: Four ways ideas become finished work. Intro: Most of us use every pattern. This quiz looks for the one you reach for first. Show four cards in this order: The Spark — Idea igniter — You begin by making possibilities visible. Your best next step is a small experiment, not a perfect plan. The Anchor — Thoughtful finisher — You turn loose ideas into dependable progress. Your best next step is protecting enough structure without overplanning. The Weaver — Creative connector — You find momentum through people and shared context. Your best next step is making collaboration intentional. The Pathfinder — Curious explorer — You notice possibilities beyond the obvious route. Your best next step is turning exploration into one concrete choice. Add a footer line to every card: A pattern, not a box. For alternate values, rename the four archetypes and rewrite these descriptions to fit the new topic while preserving their respective roles of experimentation, structure, connection, and exploration.
   Layout: Section id patterns. Heading sits left and intro right in a two-column heading row. Below, four equal cards in one desktop row, two columns on tablet, one on mobile. Each card has a 96px original SVG emblem, number 01–04, archetype name in 30px Fraunces, role label, and 16px body. Backgrounds are Coral, Lime, Lilac, and Teal respectively, with Ink text and borders.
   Motion: Reveal cards with a 70ms stagger. Hover lifts a card 3px and gently rotates its emblem by no more than 3 degrees; no continuous card motion.
4. **How the quiz works** — Eyebrow: SIMPLE BY DESIGN. Heading: Eight choices. One clearer next step. Three numbered steps: 01 Choose what feels natural — Answer instinctively; there are no trick questions or better scores. 02 See your pattern mix — We count your choices across four complementary patterns and show the result, including ties. 03 Put it into practice — Unlock the [REPORT_NAME] for strengths, friction points, and a seven-day experiment. Add a narrow note: Reflective, not clinical. Your result is a prompt for self-observation, not a diagnosis.
   Layout: Use an Ink full-width rounded 32px panel inside the container, with Chalk text. Three columns separated by 1px Chalk/20 vertical rules. Numbers are large Fraunces in the matching accent colors; step titles are 22px and bodies 15px/1.65. Stack on mobile with horizontal separators.
   Motion: Steps reveal as one group. On hover, each number changes from outlined to solid accent text without layout shift.
5. **Field guide preview** — Split heading: A result you can use after the confetti fades. Body: Your [REPORT_NAME] turns the pattern into practical prompts for the next seven days. List four included sections: Your pattern at a glance, Three strengths to protect, Two friction points to watch, and A seven-day experiment. Beside the copy, draw a layered report-page mock showing these exact sample lines for the default Weaver result: Strength — You make room for better ideas by inviting other perspectives. Watch for — A crowded feedback loop can blur your own instinct. Try this week — Share a rough draft with one trusted person before adding more input. Finish with a button labeled Take the quiz that starts at question one.
   Layout: Two-column 44%/56% section. Left copy remains vertically centered. Right is a 520px-high Chalk report sheet with 2px Ink border and offset Coral and Lilac sheets. The sheet has a miniature emblem, [REPORT_NAME], three ruled content rows, and a seven-box week strip. Mobile stacks copy above a 420px-high report mock.
   Motion: The report sheets separate by 8px on hover; no interaction is required to read the sample text.
6. **Questions and closing invitation** — Use five accessible accordion items with exactly one open at a time and the first open initially. Q: How long does the quiz take? A: Most people can finish eight visual questions in about two minutes. You can go back to change an answer before seeing the result. Q: Is this a scientific personality test? A: No. It is an original reflective exercise built around four creative-work patterns, not a validated assessment or clinical tool. Q: What happens to my answers? A: They stay in this browser tab only. Refreshing or leaving resets the quiz; no answer data is transmitted. Q: Will you email me the report? A: In this static demo, submitting the form unlocks the full report on screen. No email is sent or stored. Q: Can I retake it? A: Yes. Retake clears all eight answers and the unlocked report so you can start fresh. Below the accordion, add a Coral closing panel with heading Ready to notice your pattern?, button [PRIMARY_CTA], and note Eight questions · No signup to see your result.
   Layout: Section id questions. FAQ is a centered 860px column with 16px vertical gaps, bordered Chalk rows, Plus icons rotating to X, and answers that do not shift surrounding content after the opening transition. The closing panel is full container width below with 48px padding and a right-aligned abstract sunburst.
   Motion: Accordion answers use a 180ms opacity and 6px translate transition. Closing panel reveals once, without repeated animation on scroll.
7. **Landing footer** — Footer left: [BRAND] and Small reflections for more intentional work. Center: Take the quiz, The patterns, and Questions controls that perform their named actions. Right: Built for reflection, not labels. Bottom line: [CREDIT]. Do not add social links, addresses, dates, or fabricated company metrics.
   Layout: Ink background with Chalk text, 40px vertical padding, a three-column row inside the container, and a fine Chalk/20 separator above the credit line. Stack left-aligned on mobile.
   Motion: Links change to Lime on hover with a 160ms color transition.
8. **Eight-question quiz state** — Create exactly eight original default questions in this fixed order. Each has four answer cards and each answer awards exactly one point to the parenthetical archetype; keep scoring data invisible. Q1 A blank page appears. What do you reach for first? | A loose pencil sketch (Spark) | A short checklist (Anchor) | A conversation with someone (Weaver) | A walk around the block (Pathfinder). Q2 A project deadline moves closer. You… | Make a bold first draft (Spark) | Break the work into checkpoints (Anchor) | Set a quick check-in (Weaver) | Revisit the brief from a new angle (Pathfinder). Q3 Which workspace helps you think? | A table covered in materials (Spark) | A calm desk with a clear plan (Anchor) | A shared studio with conversation (Weaver) | A window seat and room to wander (Pathfinder). Q4 Feedback is most useful when it… | Sparks three new possibilities (Spark) | Names the next concrete fix (Anchor) | Shows how others respond (Weaver) | Challenges the central assumption (Pathfinder). Q5 Choose a Saturday creative reset. | Make something with no plan (Spark) | Finish a satisfying small project (Anchor) | Host a casual making session (Weaver) | Visit somewhere unfamiliar (Pathfinder). Q6 Your notebook is mostly… | Fragments and rapid sketches (Spark) | Lists, systems, and revisions (Anchor) | Quotes, questions, and shared ideas (Weaver) | Observations and surprising connections (Pathfinder). Q7 A stalled project usually needs… | A playful constraint (Spark) | One clearly defined next step (Anchor) | A fresh pair of eyes (Weaver) | Distance and a different input (Pathfinder). Q8 The best compliment about your work is… | It feels alive (Spark) | It really works (Anchor) | It brought people together (Weaver) | It changed how I see things (Pathfinder). Give every answer a short supporting sentence and a suitable Lucide icon in src/content.ts. For alternate values, replace every question, answer, supporting sentence, and icon choice with equally specific topic-appropriate content while preserving one answer per archetype per question.
   Layout: Quiz main uses max-width 980px and min-height calc(100svh - 76px). Top row shows Question N of 8 in mono-like small DM Sans uppercase, a text Back control disabled only on question one, and eight equal progress segments. Beneath it, a 4px full-width track has a Lime fill of N/8. Center a Chalk question card with 36px padding, small icon and topic label, Fraunces 42px question, and a 2×2 answer grid. Answer cards are full-width semantic buttons with icon, answer label, one-line support text, and an ArrowUpRight icon; mobile uses one column and 32px question type. Include an aria-live polite step announcement. Clicking an answer records it and advances after the selected state; Back revisits the previous answer without losing other answers. Exit quiz returns to the landing hero and preserves answers only until refresh, with Resume quiz shown on the hero CTA if a partial quiz exists.
   Motion: Selected answer shows Lime fill and a Check icon for 240ms before advancing. Question transitions follow the shared 280ms pattern; progress animates after each answer. Reduced motion advances immediately without the 240ms delay.
9. **Scoring and calculating interlude** — After question eight, total points for Spark, Anchor, Weaver, and Pathfinder. The highest total is the primary archetype. If multiple archetypes tie, choose the tied archetype answered most recently, scanning answers from question eight backward; if somehow still tied, use the fixed order Spark, Anchor, Weaver, Pathfinder. Keep all four totals for the result's pattern mix. During calculation, show Finding the threads in your choices… then Balancing your four patterns… then Preparing your [REPORT_NAME]… with a small abstract four-part emblem assembling itself.
   Layout: Centered Chalk card, max-width 620px, with a 160px code-drawn emblem above a 34px Fraunces status line and three small progress dots. Keep the shared header. No user control is needed during this short state, and timers must be cleaned up if the component unmounts.
   Motion: Use a 1100ms total interlude with status changes near 0ms, 370ms, and 740ms. Under reduced motion, show one static Preparing your result… message for no more than 100ms before the result.
10. **Personalized result hero** — Default result content: The Spark — Idea igniter — You turn possibility into motion. A rough sketch, a surprising constraint, or a quick prototype helps you discover what an idea can become. Recommendation: Choose one idea and make a deliberately rough version in 25 minutes; stop while the next move still excites you. The Anchor — Thoughtful finisher — You create momentum by giving good ideas a dependable shape. Clear checkpoints help you protect both quality and follow-through. Recommendation: Define the smallest finishable version of your current project, then schedule one distraction-free block to complete its first checkpoint. The Weaver — Creative connector — You do your clearest thinking in relation to other people. Conversation helps you test assumptions and notice what an idea means beyond your own perspective. Recommendation: Share a rough draft with one trusted person and ask a single focused question before gathering more feedback. The Pathfinder — Curious explorer — You find direction by stepping outside the obvious route. New places and unexpected inputs help you connect ideas others might miss. Recommendation: Collect three references from outside your usual field and turn one observed connection into a concrete sketch. For other topics, rewrite all four result names, roles, descriptions, and recommendations while preserving their four scoring roles. Result heading is Your pattern is [archetype name]. Include the label A starting point, not a fixed type and a secondary Retake quiz button. Show Pattern mix as four horizontal bars labeled with all four archetypes, calculated as count ÷ 8 × 100 and rounded to the nearest whole percent; explain Percentages show where your eight answers landed, not a scientific score.
   Layout: Result view begins with a two-column Chalk hero card. Left contains eyebrow YOUR [QUIZ_TOPIC] RESULT, 56px Fraunces archetype heading, role label, 18px description, a Lime recommendation box, and actions. Right contains a 280px original SVG emblem in the archetype color and the four pattern-mix bars. Mobile stacks emblem after the description and before the recommendation; all text remains readable without requiring unlocked content.
   Motion: Reveal result copy, emblem, and bars with a 420ms fade/rise. Bars animate from 0 to their actual widths over 600ms after the result appears; reduced motion shows final widths immediately.
11. **Email-gated full report** — Place a Lilac panel immediately after the result with eyebrow GO A LITTLE DEEPER, heading Your [REPORT_NAME] is ready, and body Enter your email to unlock the on-screen report in this static demo. Use a visible Email address label, an email input with placeholder [email protected], required and type=email, and button Unlock my field guide. Privacy note: Demo only: no email is sent, transmitted, or stored. On valid submit, do not make a network request; set unlocked state in memory, replace the form with Unlocked below — no email was sent, and smoothly reveal the report. On invalid submit, use the native email validation message. The report contains four sections: 1 Your pattern at a glance — repeat the primary description and list the two highest patterns with their answer counts. 2 Three strengths to protect — three topic-specific strengths for the primary archetype. 3 Two friction points to watch — two specific risks with a corrective prompt each. 4 A seven-day experiment — seven short daily actions, each 20 words or fewer, based on the primary recommendation. For the default Weaver, include the strengths You invite useful perspectives, You make shared progress visible, and You help ideas land with other people; friction prompts When does feedback become too many voices? and What do you think before asking the room?; and a seven-day sequence of Choose one rough idea, Write your own goal first, Ask one trusted person, Listen for one surprise, Revise without polling, Share the finished piece, and Note what you learned. End with Print or save this report using window.print() and a Start over button that clears answers and locked state.
   Layout: Locked panel uses a two-column row with copy left and a compact form right. Unlocked report expands below into a Chalk paper sheet max-width 960px with four numbered sections, generous ruled separators, and a seven-row day grid. Print styles hide header, footer, buttons, decorative artwork, and locked panels while printing the unlocked report in black on white. No fake sending spinner or fabricated delivery confirmation.
   Motion: Unlock uses a 300ms opacity and 12px rise reveal and moves focus to the report heading. Start over returns to the landing state without animation under reduced motion.

## Assets
- image: No raster image files. Create all hero, archetype, report, and decorative artwork as original inline SVG and CSS using the specified geometric patterns and palette. Do not use image placeholders or external image URLs.
- icon: Use locally bundled lucide-react icons only for interface and answer-card icons, with consistent 1.8px strokes. Record lucide-react, https://github.com/lucide-icons/lucide, ISC license, in ASSETS.md.
- font: Self-host Fraunces Variable through @fontsource-variable/fraunces and DM Sans Variable through @fontsource-variable/dm-sans, both OFL-1.1. Import package CSS locally and list both packages and licenses in ASSETS.md; never request Google Fonts or another font CDN.

## Don'ts
- Do not add a backend, serverless function, API route, database, authentication, real form endpoint, third-party API, or network-dependent behavior. The email form only unlocks local content and must never claim that an email was sent.
- Do not transmit, persist, or track quiz answers or email input. No localStorage, sessionStorage, cookies, analytics, tracking pixels, or hidden telemetry.
- Do not load any CDN script, stylesheet, font, icon, image, or other remote asset. Bundle all dependencies and use relative asset paths with Vite base './'.
- Do not use Unsplash, Pexels, Pixabay, placeholder-image services, Google Images, recognizable people, real likenesses, anime or game characters, third-party logos, mascots, brand products, or recognizable landmarks.
- Do not copy an existing quiz's name, questions, answers, result types, exact copy, illustrations, icons, code, or scientific framing. Use only the original content model in this prompt and rewrite it for alternate variables.
- Do not present archetypes as diagnoses, clinical advice, psychometrics, validated assessments, rankings, or fixed traits. Do not invent participant counts, ratings, testimonials, or scientific evidence.
- Do not use commercial fonts, fonts.googleapis.com, fonts.gstatic.com, Adobe Fonts, restricted UI source, non-permissive packages, or dependencies outside the fixed stack.
- Do not add routers, bare-directory links, broken anchors, dead buttons, fake loading states, share links that cannot reproduce a result, or nonfunctional social links. Keep the complete experience in index.html.
- Do not emit source maps, copy src/ into dist/, exceed 20 MB in dist/, or require more than npm run build for the production output.
- Do not hard-code topic-specific copy inside components or leave Moss & Meter creative-work content in an alternate-variable build. Keep all editable copy and sample data in src/content.ts and use US English throughout.
- Do not mention VibeFather, its license, pricing, metrics, or membership anywhere in the site except the optional rendered [CREDIT] footer link. Do not add SEO metadata, Open Graph tags, JSON-LD, sitemaps, analytics, or dates; a plain [BRAND] title and favicon are enough.
- Do not sacrifice accessibility or responsive behavior: maintain visible focus, labeled form controls, keyboard-operable answers and accordions, aria-live updates, reduced-motion support, 44px touch targets, zero console errors, and no horizontal overflow at 390×844 or 1440×900.

---
— Prompt by VibeFather · https://vibefather.ai/t/personality-quiz-funnel-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.