# Prompt A — build (identical to all three; each launched inside its own empty folder)

Build a small, focused web app for **a biology graduate student**.

## TASK
A standalone page that gives a pleasant **overview of the immunoglobulin locus in mouse and
human** (click to toggle), and lets the user **zoom all the way down to the codons and
nucleotides**. IGV/UCSC don't have a consistently annotated Ig locus, so it's hard to see where
the isotypes and V genes sit — make that legible. **Colour homologous V regions with similar
colours.** Make zooming in and out easy so the user really doesn't get lost.

Then a **guided-but-easy-to-break-out-of, not-heavy-handed** selection mode: let the user choose
a **V/D/J (heavy)** or **V/J (light)**, and make it easy to understand **how it all comes
together** — allowing for **N- and P-nucleotide addition.**

## REQUIRED CORE (must be present and correct)
- Human **and** mouse immunoglobulin loci, toggleable.
- Continuous zoom from a whole-locus overview down to individual **nucleotides and codons**.
- Homologous **V families coloured consistently** (and comparably across the two species).
- Navigation that keeps the user oriented (overview/minimap/jump/relative position — your call).
- A **V(D)J recombination** mode: pick V/(D)/J, assemble the junction with **N- and
  P-nucleotide** addition, and show the result down to the sequence/reading-frame level.
- Tolerant of real interaction: deep zoom, species/locus switching, and messy recombination
  input shouldn't crash or silently corrupt.

## OPTIONAL EXTRAS
Anything you judge a biology grad student would genuinely value — your call. We deliberately do
**not** prescribe a feature list. Extras that hurt the core count against you, not for you.

## HANDLING AMBIGUITY
Intentionally not exhaustive. Make sensible, defensible choices and document your assumptions in
the README. Prefer graceful degradation over guessing. Ig loci carry hundreds of V genes and
large intergenic tracts — a curated/schematic representation is fine **if you're honest about it**
(say what's real reference sequence vs synthetic/representative, and that spacing is schematic).

## CORRECTNESS & PERFORMANCE BAR
Biologically correct where it counts: segment order (V→D→J→C), D only in heavy, correct isotypes,
the conserved CDR3 anchors (Cys → Trp/Phe), the 12/23 rule, palindromic P-nucleotides, and an
honest productive/non-productive call. UI stays responsive at the largest locus and deepest zoom.

## CONNECTIVITY & DEPENDENCIES
**OFFLINE** — self-contained, zero network requests, no CDN fonts/scripts. Must work opened via
`file://` **and** served from a nested subfolder `host/<repo>/<your-folder>/`, so use **relative
asset paths** only (`./app.js`, `style.css`) — never root-absolute (`/app.js`).

## PLACEMENT & PORTABILITY
You are already inside your own folder; everything goes directly here; your main page must be
`index.html` at the top of your folder. No nested project subfolder; don't touch siblings; no
build step.

## ACCESSIBILITY
Keyboard-operable, labelled controls, adequate contrast, results announced (aria-live).

## DISCLAIMER (in-app)
Teaching tool; not validated for clinical/research use — verify against IMGT.

## DELIVERABLES (directly in your folder)
`index.html` + assets; `README.md` (including your assumptions); `stats.md`. The UX and design
are yours.