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

# Q&A Community Website

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

## Brief
Build an original multi-view knowledge Q&A application for [BRAND], a fictional community about [COMMUNITY_FOCUS] for [AUDIENCE]. The product promise is [TAGLINE]. Open on the actual trending feed, not a marketing page, and provide working question, topic, answer-editor, and reputation views. All people, questions, answers, metrics, badges, and community activity are invented sample content; visitor changes remain on this device.

- Audience: The in-product audience is [AUDIENCE], from beginners asking their first practical question to experienced members sharing detailed answers. The template itself suits educators, creators, community builders, designers, and developers who need a polished long-form community interface with real client-side interactions.
- Goal: Help a visitor discover a relevant question, understand the quality of its answers, upvote or collapse answers, follow topics, and write a formatted answer with preview. Make search, filters, hash navigation, draft persistence, local publishing, and reputation progress work without accounts, a server, or third-party APIs.
- Tone: Thoughtful, generous, specific, and calm. Answers should sound like experienced peers explaining what they would try and why, with useful constraints and honest uncertainty. Avoid growth-hacking language, empty welcomes, generic encouragement, and claims that sample contributors or metrics are real.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: motion (MIT), lucide-react (ISC), @fontsource-variable/newsreader (OFL), @fontsource-variable/source-sans-3 (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set Vite base to './', build.outDir to 'dist', and build.sourcemap to false. Produce one self-contained index.html application with hashed assets and no server fallback requirement.
  - Configure Tailwind with semantic colors backed by CSS variables, Newsreader and Source Sans 3 font families, tabular numeric utilities, and a small global stylesheet for long-form answer typography, focus rings, scrollbars, and reduced-motion overrides.
  - Implement a tiny hash router without another dependency. Support '#/', '#/question/<question-slug>', '#/topic/<topic-slug>', '#/write/<question-slug>', and '#/reputation'; direct index.html loads show the feed, browser back and forward work, and a missing or unknown slug falls back to the first real question or topic instead of a not-found screen.
  - Keep every variable-derived label, topic, question, full answer, contributor, badge, metric, guideline, diagram definition, and editor example in src/content.ts. Rewrite the entire knowledge base for the supplied variable values so no urban-gardening copy survives in another community.
  - Use React useReducer for app state and small components for the shell, feed, question cards, answers, author cards, topic view, editor, preview, reputation guide, search results, and mobile drawers. Keep derived filtering and sorting functions pure and covered by the actual UI behavior.
  - Persist upvotes, collapsed answer IDs, followed topic IDs, per-question editor drafts, locally published answers, and local reputation adjustments under one versioned localStorage key derived from the slugified [BRAND]. Handle empty or unavailable storage without console errors and provide a confirmed Reset local demo action in the community menu.
  - Use motion/react AnimatePresence and layout transitions only for short route, collapse, drawer, toast, and published-answer feedback. Call useReducedMotion and replace nonessential movement with immediate state changes when requested.
  - Build the editor preview as safe React elements from a small allowlisted Markdown subset: bold, italic, inline code, links, lists, block quotes, and paragraphs. Do not inject raw HTML. Formatting buttons insert syntax at the textarea selection and preserve undo behavior.
  - Import Newsreader Variable and Source Sans 3 Variable locally from Fontsource. Use native buttons, inputs, textarea, nav, main, aside, and article elements; all overlays need accessible names, Escape handling, focus return, and visible keyboard focus.
  - Support '/' or Command/Ctrl+K to focus global question search when the visitor is not already typing. Announce filter counts, votes, follows, save status, and publish results through restrained aria-live regions.

## Variables
- [BRAND] — Community name (default: "Plot & Porch"). Use an invented community name and derive a lowercase slug for the document title and localStorage key.
- [COMMUNITY_FOCUS] — Knowledge subject (default: "urban gardening"). Rewrite every question, answer, topic, contributor specialty, guideline, and diagram for this subject.
- [AUDIENCE] — Community audience (default: "city growers"). The people asking and answering; adjust experience levels and examples to suit them.
- [TAGLINE] — Community tagline (default: "Practical growing answers from people who try them."). A short original promise used beneath the feed title and in community context.
- [FEATURED_TOPIC] — Featured topic (default: "Small-space growing"). Set the featured feed topic and its first question collection; rewrite it for the chosen subject.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/q-a-community-website 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
- Canvas `#F3F0E8` — Overall app background and quiet space around the three-column workspace
- Paper `#FFFDF8` — Question cards, answer bodies, editor, preview, search, and sticky header
- Ink `#202A24` — Headlines, answer text, primary controls, and important icons
- Muted `#68736C` — Metadata, secondary labels, inactive icons, and helper copy
- Forest `#234B3A` — Primary buttons, followed topics, active navigation, and dark community panels
- Sage `#DDE8D8` — Selected navigation, reputation progress, helpful highlights, and soft diagram fills
- Vermilion `#B84A32` — Brand dot, vote highlights, small underlines, and focused accents; use white text on solid fills
- Blush `#F4DDD4` — Upvoted backgrounds, featured-question accents, and warm badge surfaces
- Line `#D9D4C8` — Hairline card borders, column dividers, input outlines, and answer separators
- Badge Gold `#8A641C` — Highest reputation label and small award details on light backgrounds

### Typography
- Brand, page headings, question titles, pull quotes, and long-form answers: Newsreader Variable (OFL), weights 400/500/600/700
- Navigation, controls, metadata, search, editor chrome, badges, and helper text: Source Sans 3 Variable (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use a 4px base scale. The sticky desktop header is 68px high. The workspace has a 1480px maximum width, 28px outer gutters, and a 208px left rail, minmax(0,760px) center, and 264px right rail with 24px gaps. Feed cards use 22px padding and 18px vertical gaps. Question reading uses a 68px vote rail and a maximum 680px text measure with 20px Newsreader body text at 1.72 line-height. Mobile uses 16px gutters and at least 44px touch targets.
- Radius: Use 10px for buttons and inputs, 14px for standard cards, 18px for featured panels and editor surfaces, and full rounding only for compact chips and status pills. Make geometric portraits rounded squares rather than generic initial circles. Prefer hairline borders; reserve 0 18px 50px rgba(32,42,36,0.14) shadows for search results, drawers, and dialogs.
- Motion: On hash-route changes, fade the new main view in with translateY(6px) over 180ms; do not animate the shared header or side rails and do not delay readable content.
- Motion: Upvote buttons fill and their count crossfades over 140ms. Follow buttons swap label and icon with a 160ms ease-out transition without shifting neighboring controls.
- Motion: Collapsed answers animate height and opacity over 200ms while retaining the author row and Expand answer control; newly published local answers enter with a 220ms fade and 8px rise.
- Motion: Mobile navigation, topic, and contributor drawers slide 16px and fade their backdrop over 200ms. Search results scale from 0.99 to 1 over 140ms.
- Motion: Under prefers-reduced-motion: reduce, remove route travel, height animation, smooth scrolling, and entrance transitions while preserving instant state, focus, and text feedback.
- Imagery: Use no bitmap images, generated portraits, stock photographs, or avatar services. The complete app UI is the first-screen visual anchor, strengthened by a featured question card with an original inline SVG field-note diagram. For the default community, draw a balcony sunlight map with four planters, a pale sun arc, railing lines, and small numeric hour markers; for another subject, replace it with an equally specific technical diagram such as a bread-proofing timeline. Draw eight distinct fictional contributors as original geometric SVG head-and-shoulder portraits with varied skin tones, hair shapes, clothing, and sage, blush, ochre, blue, and clay backgrounds; never use initials-only avatars or resemble real people. Create an original [BRAND] mark from two open book-like rectangular leaves and one vermilion dot, plus a simple matching favicon.

## Pages & Sections
### Trending Questions Feed (`#/`)
1. **Shared application shell and navigation** — Set the document title to '[BRAND] · [COMMUNITY_FOCUS] answers'. A sticky header contains the original book-leaf mark, [BRAND], a Feed link to '#/', a Topics action that opens the topic drawer on mobile and focuses the topic rail on desktop, and a Reputation link to '#/reputation'. Center a global search input with placeholder 'Search [COMMUNITY_FOCUS] questions'. Search matches question titles, excerpts, answer text, and topics case-insensitively, showing up to six grouped results with question and topic labels; selecting one navigates to it and clearing restores the feed. The primary vermilion-outline button reads 'Write an answer' and links to the featured question's editor. A compact community menu includes 'About this demo' and 'Reset local demo'. About explains that all people and metrics are fictional and visitor changes stay in this browser. Put the optional small [CREDIT] link at the bottom of the left rail only.
   Layout: At 1440px use a 68px Paper header with a 1480px inner container and 20px horizontal gaps. The brand occupies the left 208px, search is minmax(240px,520px), and actions sit right. Below it, render the three-column workspace described in Design with sticky side rails offset 92px from the viewport top. At widths below 1180px hide the right rail behind a Contributors button; below 820px hide the left rail behind a Menu button, keep a Search icon that expands the field, and collapse header text links into the drawer.
   Motion: The shell is fully composed on first paint. Search results and menus use the short overlays from Design; route changes never shift the sticky header.
2. **Topic rail and local member summary** — The left rail begins with a Feed navigation item and Compass icon, then 'Topics' with a Plus-free, quiet list: [FEATURED_TOPIC] with 42 questions, Soil & compost with 36, Herb harvests with 28, Balcony fruit with 19, Pest patrol with 24, and Seasonal planning with 31. Each topic links to its real hash route and displays its own name, description, questions, and follow state. A followed topic gets a small Forest dot and Sage row background. Below, a 'Your local profile' panel shows the visitor as 'Guest contributor', a geometric guest portrait, '240 demo reputation points', the Helpful Hand badge, and a progress bar labeled '260 points to Trusted Guide'. Link 'How reputation works' to '#/reputation'. Include Reset local demo in the community menu, not as a prominent rail button.
   Layout: Use 36px navigation rows, 12px gaps between groups, 13px Source Sans labels, and tabular counts aligned right. The local profile sits near the lower part of the sticky rail but remains reachable when vertical space is short. On mobile the same content fills a min(320px,88vw) left drawer with safe-area padding and a labeled Close button.
   Motion: Topic selection changes background and dot color over 140ms. Progress changes by 180ms after local publishing; reduced motion updates instantly.
3. **Featured question and visual field note** — Above the feed show the small uppercase label 'THE [BRAND] COMMUNITY', H1 'Trending in [COMMUNITY_FOCUS]', and [TAGLINE]. Add segmented filters Trending, Newest, and Unanswered with real result ordering and counts; Newest uses the content file's order without displaying dates. The featured card is tagged [FEATURED_TOPIC] and 'Community field note'. Its question reads 'How much morning sun do balcony tomatoes really need?' asked by fictional Lena Ortiz, with 6 answers and 1.8k sample reads. Question excerpt: 'My railing gets direct sun from roughly 7:30 to 10:00, then bright shade. Is that enough for cherry tomatoes in a 20-liter pot, or should I move them to the fire escape?' The featured answer excerpt from Mara Ellis begins 'Four hours of direct morning light can grow cherry tomatoes, but the pot and watering routine will decide whether they fruit well.' A primary text link reads 'Read 6 answers'; the secondary icon button adds or removes one local upvote from its initial 184 sample votes. Clicking the title or answer excerpt opens '#/question/container-tomatoes'.
   Layout: Use an 18px Paper card with a subtle Vermilion top rule. At desktop the question and answer excerpt occupy 62% and the SVG sunlight diagram 38%, with a 20px divider. The H1 is Newsreader 38px and the featured question 28px. The diagram has a Sage background, thin Ink strokes, and no text smaller than 12px. At mobile stack the diagram below the question at 160px high, reduce the page H1 to 32px, and keep both actions visible without horizontal scrolling.
   Motion: Only the vote control animates. The diagram is static; do not add a looping sun, parallax, or an artificial typing effect.
4. **Question stream and working filters** — Render five additional substantial cards, each with a compact upvote rail, one or two topic chips, question title, two-line best-answer excerpt, geometric answer-author portrait, contributor name, reputation badge, answer count, and sample read count. Default questions are: 'Why do my herb stems turn woody before I get a second harvest?' with 96 votes and 4 answers; 'Can self-watering planters cause root rot if the reservoir never empties?' with 81 votes and 5 answers; 'What soil mix drains well in a shallow window box?' with 67 votes and 3 answers; 'How do I keep basil watered through a hot weekend away?' with 54 votes and 0 answers so the Unanswered filter is meaningful; and 'Which compact climbing vegetable suits a trellis on a bright north-facing wall?' with 43 votes and 2 answers. Every question links to its own populated question route; the unanswered question shows the original prompt, related answers from other questions never masquerade as its own, and a clear 'Write the first answer' editor link. Upvotes toggle once per visitor and persist. Search and all three filters update the visible stream and count; the empty state reads 'No questions match “{query}” yet' with Clear search and a link to the featured editor rather than a fake Ask question action.
   Layout: Separate standard cards with 1px Line borders on a shared Paper stream rather than floating every row independently. Each row has a 48px vote rail and a minmax(0,1fr) content area. Keep titles at Newsreader 23px and excerpts at Source Sans 15px. On mobile move vote count and answer count into a compact bottom metadata row while leaving a 44px upvote target.
   Motion: Filtering crossfades the stream over 160ms without large card travel. Upvote state and aria-live confirmation update immediately.
5. **Contributor and community rails** — The right rail has two quiet Paper panels. 'Trusted guides' lists Mara Ellis, container-growing mentor, Trusted Guide, 1,840 points; Priya Nair, soil and compost researcher, Community Anchor, 2,460 points; and Theo Bennett, balcony garden tinkerer, Trusted Guide, 620 points. Each row links to the question containing that person's strongest sample answer, not a nonexistent profile route. 'A better answer includes' lists three compact guidelines: 'Name the conditions you tested', 'Explain the trade-off, not only the rule', and 'Leave room for a different climate or setup'. Link 'Read the community standards' to '#/reputation' where the full guidelines appear. Label all reputation figures as demo data once in the panel footer.
   Layout: Panels use 18px padding with 16px internal gaps. Contributor portraits are 40px rounded squares; names and badges wrap without truncation. Below 1180px these panels open in a right drawer of min(340px,92vw), and below 820px their essential trusted-guide links also appear after the question stream.
   Motion: Rows use background-only hover feedback. The right drawer uses the standard 200ms slide and fade.

### Question and Long-Form Answers (`#/question/container-tomatoes`)
1. **Question header and reading controls** — Resolve the question slug from src/content.ts; '#/question/container-tomatoes' is the default and unknown or missing slugs also show it. Start with breadcrumb links Feed and [FEATURED_TOPIC], then H1 'How much morning sun do balcony tomatoes really need?' Include the full question: 'I am growing two cherry tomato plants in separate 20-liter pots on a third-floor balcony. They get direct sun from about 7:30 to 10:00, then bright shade for the rest of the day. The plants are leafy, but I only see a few flowers. Should I move them somewhere brighter, change the feeding routine, or give the current setup more time?' Show topic chips, 6 sample answers, 1.8k sample reads, and a plain 'Sample community content' disclosure. The main CTA is 'Write an answer' linking to '#/write/container-tomatoes'; a quiet 'Back to questions' link returns to '#/'. Do not show dates or relative-time labels.
   Layout: The center Paper reading surface has 32px desktop padding. H1 is Newsreader 44px at 1.08 line-height with a 16-word maximum measure, question body is 19px at 1.65, and metadata sits below a hairline. At mobile use 22px padding and a 34px H1. Keep the main CTA after the question body on mobile so it does not crowd the title.
   Motion: Use the standard route entrance only; the complete question must be visible immediately without staged reveals.
2. **Voted long-form answers with collapse** — Show four complete default answers beneath a header 'Answers' and a sort select with Most helpful and Original order. Mara Ellis, Trusted Guide, 1,840 points, has 248 votes and the leading answer: begin 'Four hours of direct morning light can grow cherry tomatoes, but leafy growth and only a few flowers suggest that light is still the limiting factor.' Continue with three useful sections: 'Check the whole setup' explains that a 20-liter pot is workable for one compact plant, two plants should not share it, and consistent drainage matters; 'Before moving the plants' recommends three clear-morning observations of direct versus reflected light and avoiding an unsafe fire-escape placement; 'What I would change first' recommends one compact variety per pot, removing only lower leaves that touch the soil, and avoiding extra nitrogen without a diagnosis. Include the pull quote 'More leaves in bright shade are not the same as more fruit.' Theo Bennett, Trusted Guide, 620 points, has 96 votes and an answer titled within the body 'Make a simple light log', with three numbered observations and a reminder that nearby walls can change reflected light. Priya Nair, Community Anchor, 2,460 points, has 71 votes and compares pruning, feeding, and heat stress without promising a universal fix. Jonah Fields, Helpful Hand, 185 points, has 32 votes and describes a reflective-light test with a removable light-colored board, noting wind and watering trade-offs. Each answer is at least 180 words of original, concrete prose with paragraphs, one list or subheading, and no copied reference text. Other question routes use their own full answer data, while the unanswered question correctly shows no answer cards.
   Layout: Each article uses a 64px left vote rail and minmax(0,1fr) body. Place ArrowUp and the count in a 44px-wide vertical control at the top, sticky only within wide answer bodies if it never overlaps text. The author row contains a 48px geometric portrait, name, specialty, original badge, and points. The Collapse answer button sits at the row's right. Long-form subheads are Newsreader 24px, body 20px with a 680px measure, lists retain visible markers, and pull quotes have a 3px Vermilion left rule. Between answers use a full-width hairline and 32px vertical space, not separate nested cards. On mobile the vote control becomes horizontal beneath the author row and body text drops to 18px.
   Motion: Voting toggles the count once and persists. Collapse hides only the body and leaves a compact 'Answer by <name> · <votes> votes' row with Expand answer; animate over 200ms and restore scroll position sensibly.
3. **Answer author card and expertise context** — As the visitor reads the leading answer, the right rail shows 'Answered by Mara Ellis' with her larger 64px geometric portrait, 'Container-growing mentor', Trusted Guide badge, 1,840 demo points, and the short fictional bio 'Mara grows tomatoes and herbs in twelve railing planters and likes answers that begin with observable conditions.' List 'Frequently answers in' with [FEATURED_TOPIC], Balcony fruit, and Herb harvests topic links. Add 'Why this badge' linking to '#/reputation'. When another answer receives focus or its author row is clicked, update this card to that contributor without leaving the question. Do not create fake follow, message, or profile buttons.
   Layout: Use a sticky Paper panel with 20px padding and a Sage badge strip. Below 1180px place the selected author card inline after the relevant answer or in the Contributors drawer; never cover the reading column. At mobile show a compact author disclosure within each answer instead of a separate sticky card.
   Motion: Crossfade contributor details over 140ms when an author row is activated. Do not auto-cycle authors while the visitor is reading.
4. **Related questions and closing answer action** — After the answers show 'Keep reading' with three real question links: self-watering planters and root rot, soil for shallow window boxes, and basil during a hot weekend. Finish with a Forest panel titled 'Have experience with a similar setup?' and copy 'Add the conditions you tested, what changed, and what you would try next.' The Paper button 'Write your answer' opens the editor for the current question. If the visitor has already published locally, prepend their answer under a small 'Published on this device' label and retain the editor action.
   Layout: Related links form a three-row list with Newsreader 20px titles and ArrowUpRight icons. The closing panel spans the reading column with 24px padding, keeping text left and button right on desktop and stacking on mobile.
   Motion: Related links use simple underline and 2px arrow movement. A newly published answer uses the single 220ms entrance and a polite toast.

### Topic Questions and Following (`#/topic/small-space-growing`)
1. **Topic identity and follow control** — Resolve every topic slug from the shared topic data and default to [FEATURED_TOPIC] for a missing or unknown slug. Show an original inline SVG plot-grid emblem, eyebrow 'TOPIC', H1 [FEATURED_TOPIC], and description 'Practical advice for railings, windowsills, patios, and other compact growing spaces.' Display 42 sample questions and 318 sample followers. The Forest button 'Follow topic' toggles to 'Following' with a Check icon, updates the displayed count by one, persists locally, and also marks the topic in the left rail. Add 'Write an answer' linked to the featured question. Include a small 'Sample topic metrics' caption and no dates.
   Layout: Use a wide Forest panel with Paper text, the SVG emblem at right, and a soft Sage plot-grid pattern behind it. The desktop title is Newsreader 46px; actions sit under the description. On mobile place the emblem behind the upper-right at reduced opacity, keep text fully readable, and make both buttons full width only if needed.
   Motion: Follow state crossfades the label and increments the count over 160ms. The plot-grid background remains static.
2. **Curated topic question list** — Provide tabs Top questions, Unanswered, and All questions with actual filtering over the topic's questions. Show the featured tomato question, shallow-window-box soil, hot-weekend basil, and compact climbing vegetable cards with their real votes, excerpts, authors, and answer counts. Add one topic-specific editorial note, 'Start here: match the plant to the light you actually have, then choose the pot.', linking to the tomato question. Every title opens its populated question route. Empty results use 'No unanswered questions in this topic' only when true and offer All questions.
   Layout: Below the topic panel use a two-column area: minmax(0,1fr) question stream and a 240px 'About this topic' rail on wide desktop. Cards follow the feed's quiet row system with a 48px vote rail. On mobile the tabs scroll only if necessary, the question stream stays one column, and the about panel moves below.
   Motion: Tab changes crossfade the list and announce its result count over 160ms without reordering unrelated topics.
3. **Topic guidance and related subjects** — The about panel explains 'Good questions include your available light, pot size, plant variety, and what you have already tried.' List two fictional topic hosts, Mara Ellis and Theo Bennett, with their badges and links to their leading answers. Below show 'Related topics' as linked chips for Balcony fruit, Herb harvests, and Soil & compost; each renders its own topic content and metrics rather than retaining [FEATURED_TOPIC]. End with a small link 'How badges and reputation work' to '#/reputation'.
   Layout: Use 18px padding, 14px body text, compact host rows, and wrapping chips. In the mobile flow place related topics before the footer credit so navigation remains discoverable.
   Motion: Hover uses color and underline only. No automatic topic carousel or follower activity ticker.

### Write an Answer Editor (`#/write/container-tomatoes`)
1. **Question context and draft status** — Resolve the current question and fall back to container-tomatoes. Show breadcrumb links to the question and [FEATURED_TOPIC], H1 'Write an answer', and a compact Paper summary containing the full question title, topic chips, and 'Answering as Guest contributor · demo profile'. Add the visible disclosure 'Your draft and published answer stay on this device.' Prepopulate the first visit with a useful sample draft: 'I would start by tracking the direct light for three clear mornings. Four hours can be enough for a compact cherry tomato, but the combination of light, variety, and consistent watering matters more than any one fix. In my 20-liter pots, I keep one plant per container and avoid adding extra feed when the leaves already look lush. I would also check whether the railing shades the lower half of the plant before moving anything.' The visitor can replace all of it. Save on every change and show 'Draft saved on this device' after a quiet 300ms debounce, or 'Draft is kept for this session' if storage is unavailable.
   Layout: Use a wider center workspace for this route while retaining the shared header and left topic rail on large screens. The question summary sits above the editor with 20px padding. On mobile remove the left rail and place draft status below the title so it never truncates.
   Motion: Save status changes opacity only; do not flash a toast on every keystroke.
2. **Formatting editor with safe live preview** — Provide toolbar buttons Bold, Italic, Link, Bulleted list, Numbered list, Quote, and Inline code with Lucide icons and accessible labels. They insert or wrap the appropriate Markdown at the current selection. The textarea label is 'Your answer', with placeholder 'Share what you observed, what you tried, and what you would do next'. Show a live word count and require at least 40 words before publishing. The Preview panel renders the same draft as safe React elements using the question page's Newsreader long-form styles, including a visible pull quote and list if present. Raw HTML displays as text, never markup. Write and Preview are separate accessible tabs on mobile and simultaneous labeled panes on desktop. Restore the exact per-question draft on return and include Clear draft with confirmation.
   Layout: At 1440px use two equal minmax(0,1fr) Paper panes inside a bordered 18px editor surface; the toolbar spans the editor pane top, textarea fills at least 440px height, and preview has 28px padding with a 680px maximum measure. Below 900px use the Write and Preview tabs and a 52dvh textarea. Keep toolbar buttons 44px on touch screens and allow horizontal wrapping rather than clipping.
   Motion: Preview content crossfades over 120ms after input without animated typing. Tab changes are instant under reduced motion and preserve the textarea selection.
3. **Answer checklist and local publishing** — A right or lower checklist titled 'Make the answer useful' contains 'Name your setup and constraints', 'Explain what you would try first', and 'Say when a different condition changes the advice'. Publishing validates the 40-word minimum, focuses the textarea, and shows a specific error if needed. The Forest 'Publish answer' button appends the answer to the current question under Guest contributor, labels it 'Published on this device', clears only that draft, adds 5 local reputation points with an aria-live message, and navigates to the question with the new answer visible. Secondary 'Return to question' preserves the draft. No button claims the answer was sent to other people.
   Layout: On wide desktop the checklist is a 240px right panel with the publish action sticky below it. On smaller screens place the checklist and actions after the editor, with Publish full width on mobile. Keep a confirmation toast at the bottom center clear of navigation and safe-area insets.
   Motion: Publish uses a brief button pressed state, the standard route transition, and one polite toast. No confetti, fake progress bar, or network-loading spinner.

### Reputation Badges and Community Standards (`#/reputation`)
1. **Original badge ladder and local progress** — H1 reads 'Reputation marks useful participation.' Intro copy: 'Badges help readers understand a contributor's sample history; they are not credentials or a measure of personal worth.' Show the visitor's current 'Guest contributor' card with 240 baseline demo points, the Helpful Hand badge, progress toward Trusted Guide at 500 points, and a visible note that publishing locally adds 5 points. The four original levels are New Voice at 0 points with a single outlined square emblem, Helpful Hand at 100 with two overlapping squares, Trusted Guide at 500 with a small compass-star emblem, and Community Anchor at 1,500 with a concentric-ring emblem. Draw all four emblems as original SVG, not copies of any existing community badges. Explain that sample contributor points are fictional and local changes never sync anywhere.
   Layout: Use a Paper hero with the current progress on the left and a large Sage badge composition on the right. Below, four level cards form a desktop row with distinct emblem shapes, point thresholds, and one-sentence descriptions; at mobile use a two-column grid with readable 15px text and no clipped emblems.
   Motion: Progress and point totals animate only after a local publish action. Badge emblems remain static and reduced motion removes progress animation.
2. **How points and answers work** — Provide a compact three-column table headed Contribution, Reader value, and Sample points. Rows: 'Publish a complete answer', 'Adds experience others can evaluate', +5; 'Receive an upvote on an answer', 'A reader found the answer useful', +10; 'Receive a topic-host commendation', 'A host marked an especially careful explanation', +25. Label the table 'Illustrative community rules' and implement only the local publish +5 adjustment; do not add fake commendation buttons or simulate incoming votes. A second panel 'Voting and collapsing' explains that an upvote is a local signal in this demo and collapsing only changes the visitor's own reading view.
   Layout: Use a readable table with sticky header only if the viewport requires scrolling, tabular numbers aligned right, and row descriptions at 15px. Stack the two explanatory panels below the table in two desktop columns and one mobile column.
   Motion: No animated counting or fake incoming reputation events. Rows use simple hover background.
3. **Community standards and reset** — Title this section 'A useful answer leaves a clear trail.' Four numbered standards are: 01 'Start with the conditions' — light, space, tools, and constraints change the advice; 02 'Separate observation from guesswork' — make uncertainty visible; 03 'Offer a next step, not a universal rule' — respect different setups; 04 'Keep people and places safe' — never recommend unstable railings, blocked exits, or risky shortcuts. Finish with 'Explore the questions' linking to '#/' and a quiet 'Reset local demo' button that asks for confirmation before clearing votes, follows, drafts, published answers, collapses, and local point adjustments.
   Layout: Use a Forest standards panel with four horizontal numbered rows on desktop and stacked rows on mobile. Actions appear after the standards in a Paper footer band with adequate separation between primary navigation and destructive reset.
   Motion: Standards appear together with the route, not as scroll-hidden cards. Reset uses a standard accessible confirmation dialog with focus trapping and a 160ms fade.

## Assets
- font: Self-host Newsreader Variable and Source Sans 3 Variable through @fontsource-variable/newsreader and @fontsource-variable/source-sans-3 (OFL). Import the local package CSS in src/main.tsx; never use Google Fonts, Adobe Fonts, or another font CDN.
- icon: Use lucide-react (ISC) for Search, Menu, X, PenLine, ArrowUp, ArrowLeft, ArrowUpRight, ChevronDown, Check, Compass, BookOpen, Users, Award, BadgeCheck, Plus, Bold, Italic, Link, List, ListOrdered, Quote, Code2, Eye, Info, and RotateCcw. Draw only the original brand and badge emblems yourself; do not import brand icons.
- image: Use no bitmap images and request no generated assets. Create the eight fictional geometric contributor portraits, guest portrait, book-leaf [BRAND] mark and favicon, plot-grid topic emblem, four badge emblems, and question-specific field-note diagrams as original inline SVG/CSS in the project. No stock photographs, real likenesses, external avatars, placeholder services, logos, or recognizable community artwork.

## Don'ts
- Do not add a backend, server code, API routes, authentication, accounts, a database, websockets, analytics, external APIs, or real multi-user publishing. All interactions and persistence are local to the browser and clearly disclosed.
- Do not load scripts, styles, fonts, icons, avatars, or images from a CDN or remote URL. Keep every runtime asset local and use relative paths with Vite base './'.
- Do not use the names, logos, mascots, slogans, exact layouts, signature orange-and-blue palettes, recognizable vote treatments, or badge artwork of existing Q&A, forum, or social products.
- Do not copy questions, answers, comments, profiles, guidelines, credentials, or reputation histories from real communities or publications. Keep the complete knowledge base original and rewrite it for the supplied variables.
- Do not use real people's names, portraits, usernames, endorsements, employers, universities, or achievements. All contributors are fictional geometric SVG people with no resemblance to real individuals.
- Do not use initials-only avatars, stock-photo services, generated bitmap portraits, anime or game characters, real brand logos, commercial fonts, restricted UI source, or dependencies without an allowed permissive license.
- Do not turn the feed into a marketing landing page or add a typography-only hero, pricing, testimonials, feature sections, or a promotional sign-up wall. The first screen must be the rich working community app.
- Do not leave search, feed filters, question links, upvotes, collapse controls, topic follows, editor formatting, preview, draft saving, publish, reputation navigation, or reset actions nonfunctional; every visible control must have a real local result.
- Do not pretend that sample metrics, votes, followers, reputation, badges, answers, or contributors are live or factual. Never simulate incoming activity or claim that a local answer reached other people.
- Do not display calendar dates, relative posting times, fake online statuses, real-world timestamps, or factual claims about current activity.
- Do not use dangerouslySetInnerHTML for editor preview or answer rendering, allow raw HTML execution, or inject untrusted markup. Render the allowlisted Markdown subset as safe React elements.
- Do not add continuous ambient animation, scroll-jacking, parallax, autoplay carousels, fake network spinners, confetti, or motion that ignores prefers-reduced-motion.
- Do not produce source maps, copy src/ into dist/, exceed 20 MB in dist/, or require more than the single npm run build command for production output.
- Do not use bare-directory links or routes that require a server fallback. Keep all navigation on index.html and the declared hash routes; unknown question and topic slugs must show the first populated item.
- Do not add SEO metadata, Open Graph tags, JSON-LD, sitemap instructions, keyword-stuffed headings, or heading-hierarchy rules. A plain [BRAND] document title and original favicon are enough.
- Do not mention VibeFather inside the product UI except for the optional small [CREDIT] link in the left-rail footer.

---
— Prompt by VibeFather · https://vibefather.ai/t/q-a-community-website · 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.