The user wants to impress their dad who is a professor writing papers on zinc oxide (ZnO) defects. I should create an impressive, scientifically accurate, interactive website/simulation about ZnO defects. Key physics about ZnO defects: - ZnO is a II-VI semiconductor, wurtzite structure (most common), wide bandgap ~3.37 eV - Point defects: Oxygen vacancies (V_O), Zinc vacancies (V_Zn), Zinc interstitials (Zn_i), Oxygen interstitials (O_i), Antisites (Zn_O, O_Zn) - These defects create energy levels in the bandgap (donors and acceptors) - Oxygen vacancies are often blamed for n-type conductivity and green luminescence (~2.4-2.5 eV emission) - Zinc vacancies cause acceptor states - Defect formation energies depend on Fermi level and chemical potentials (Zn-rich vs O-rich conditions) - Kröger-Vink notation - Photoluminescence (PL) spectroscopy shows defect emissions What would impress a professor: 1. Interactive 3D crystal structure (wurtzite ZnO) where you can click to add/remove defects 2. Band diagram showing defect levels, with a Fermi level slider 3. Simulated photoluminescence spectra that change with defect concentrations 4. Defect formation energy diagram vs Fermi level (classic Janotti & Van de Walle style plot) 5. Kröger-Vink notation displayed Let me build a single-file HTML app with: - Three.js for 3D wurtzite crystal visualization with defects - Canvas-based band diagram with draggable Fermi level - Simulated PL spectrum that updates based on defect concentrations - Formation energy plot (V_O, V_Zn, Zn_i, O_i as function of Fermi level, Zn-rich vs O-rich toggle) - Charge state transitions This is a big build. Let me structure it: **Layout:** - Header: "ZnO Defect Explorer" with subtitle - Left panel: 3D crystal viewer (Three.js) - Right panel: tabs or sections for Band Diagram, Formation Energies, PL Spectrum - Controls: defect type selection, charge states, chemical potential conditions **Physics details:** Wurtzite structure: hexagonal, lattice parameters a = 3.25 Å, c = 5.21 Å. Space group P6_3mc. Wurtzite unit cell positions (for a simple visualization): - Zn at (1/3, 2/3, 0), (2/3, 1/3, 1/2) - O at (1/3, 2/3, 3/8), (2/3, 1/3, 7/8) where u ≈ 0.382 for oxygen relative to zinc. In Cartesian with hexagonal lattice: a1 = a(1, 0, 0) a2 = a(-1/2, √3/2, 0) a3 = c(0, 0, 1) Defect formation energy (Janotti & Van de Walle formalism): E_f(D^q) = E_tot(D^q) - E_tot(bulk) - Σn_i μ_i + q(E_F + E_V) + E_corr For visualization, I'll use approximate values from literature: - V_O: formation energy ~ low in Zn-rich, transition levels ε(2+/0) around ~1.7-2.3 eV above VBM... Actually V_O is a deep donor, ε(2+/0) at about 1.7-2.4 eV (varies by method). Negative-U behavior. - V_Zn: acceptor, ε(0/1-) ~ 0.1-0.3 eV, ε(1-/2-) ~0.9-1.2 eV above VBM... Actually V_Zn transitions: ε(0/−) ≈ 0.18 eV, ε(−/2−) ≈ 0.87 eV - Zn_i: shallow donor - O_i: acceptor - Zn_O antisite: donor (shallow-ish) - O_Zn antisite: acceptor Band diagram energy levels (approximate, from literature): - V_O (2+/0): ~1.7-2.0 eV above VBM (deep) - V_Zn (0/1-): ~0.1-0.3 eV above VBM (shallow acceptor) - V_Zn (1-/2-): ~0.9-1.2 eV - Zn_i: shallow donor near CBM - Green luminescence ~2.4-2.5 eV (often attributed to V_O or V_Zn-related transitions) For the PL simulation: I'll model the emission spectrum as sum of Gaussians: - Near-band-edge (NBE) UV emission at ~3.3 eV (375 nm) - Green band ~2.45 eV (510 nm) - scales with oxygen vacancy concentration - Yellow/orange ~2.1-2.2 eV - O interstitial related - Red ~1.8-1.9 eV - excess oxygen Sliders for defect concentrations → spectrum changes. Also show RGB color of the emission (convert spectrum to color!). That's a nice touch — "luminescence preview" showing what color the sample glows. Formation energy plot: E_f vs Fermi level for each defect, with kinks at charge transition levels. Use slope = charge state q. Values approximate from Janotti & Van de Walle (2007): - Zn-rich conditions: V_O has low formation energy... actually under Zn-rich: E_f(V_O^2+) ~ 0.5-1 eV for E_F at VBM. V_O is a deep donor, so it remains +2 for most of gap... hmm, actually with negative-U, V_O transitions directly 2+ ↔ 0 at ε ≈ 1.7-2.3 eV. Under O-rich, V_O formation energy increases by 2μ_O... Let me set up a simple model: E_f^q(E_F) = E_f^q(E_F=0) + q·E_F Reference formation energies at E_F = 0 (VBM), Zn-rich: - V_O^2+: ~0.8 eV, transition to 0 at ε(2+/0) = 2.0 eV → V_O^0 at E_F=0 would be 0.8 + 2×2.0 = 4.8 eV? Wait: E_f(V_O^0) = E_f(V_O^2+) + 2×ε where ε is the transition level. At the transition level, E_f(V_O^2+) + 2ε = E_f(V_O^0). So if ε(2+/0) = 2.0 eV, then E_f(V_O^0) - E_f(V_O^2+) = 4.0 eV. V_Zn: E_f(V_Zn^2-) at E_F=0... it's negative-U too. Transitions: ε(0/2-) ~ 0.5 eV? Reported values: V_Zn is a negative-U acceptor with ε(0/2-) ≈ 0.5-1.1 eV. Let me use ε(0/2-) ≈ 1.1 eV... Actually Janotti & Van de Walle PRB 76, 165202 (2007) report: V_Zn transitions (0/−) at 0.18 eV, (−/2−) at 0.87 eV using LDA+U... HSE results differ. Let me just use approximate representative numbers and label them as "representative values." Under Zn-rich vs O-rich: μ_Zn + μ_O = ΔH(ZnO) ≈ -3.6 eV. Zn-rich: μ_Zn = 0, μ_O = -3.6 eV. O-rich: μ_O = 0, μ_Zn = -3.6 eV. Wait, ΔH_f(ZnO) ≈ -3.63 eV. So: - V_O formation under Zn-rich is lower (removing O costs less when O is poor... actually E_f(V_O) = ... + μ_O; with μ_O = -3.6 under Zn-rich, removing oxygen is easier). Yes: Zn-rich → low V_O formation energy; O-rich → high. - V_Zn: opposite — low under O-rich. I'll implement the toggle between Zn-rich and O-rich which shifts the curves. Defects to include in formation energy plot: - V_O (donor, +2/0, ε at ~2.0 eV) - V_Zn (acceptor, 0/2-, ε at ~1.1 eV) — or two levels - Zn_i (donor, +2/0 shallow... actually Zn_i is a shallow donor, +2 throughout most of gap) - O_i (acceptor) - Zn_O (antisite donor, shallow) - O_Zn (antisite acceptor, high formation energy) Keep it to ~5 defects for clarity. **3D Crystal:** Wurtzite supercell 3×3×2 with Zn (grey/blue) and O (red) atoms, bonds drawn. Click to cycle defects? Or buttons: "Create V_O" removes random oxygen atoms (show vacancy as faint ghost sphere), "Create V_Zn", "Add Zn interstitial" places atom at interstitial site. Rotating, orbit controls. Counter of defects feeds into PL spectrum! That's the wow factor: defects you create in the crystal change the simulated PL spectrum and the emission color swatch. Interstitial sites in wurtzite: octahedral-ish sites at (0, 0, ~0.6) etc. I can just place at approximate positions like (0, 0, 0.5c)... doesn't need to be perfect, but let me use plausible positions: tetrahedral interstitial site. I'll place Zn_i at positions like (2/3, 1/3, 0) — actually that might coincide... In wurtzite, the interstitial sites are at (0,0,z)-type positions in the hexagonal channels. I'll place at (0, 0, 3/8) and (0, 0, 7/8)-ish in each cell — the open channels. Good enough visually. **Implementation plan:** Tech: Three.js via CDN (use r128 from cdnjs for reliability, with OrbitControls from cdn... Actually OrbitControls for non-module three r128 is available at https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js). Use that. Tailwind via CDN for styling. But careful: Tailwind CDN + custom canvas. Should be fine. Layout: - Dark scientific theme, glassmorphism panels - Title bar with simulated "spectrometer" aesthetic - Grid: left = 3D crystal (Three.js canvas), right column = tabs: [Band Diagram | Formation Energy | PL Spectrum] - Bottom or side: controls Interactive features: 1. Crystal: - Buttons: Remove O (create V_O), Remove Zn (create V_Zn), Add Zn_i, Add O_i, Reset - Defect counts tracked - Vacancies shown as dashed-wireframe ghost spheres; interstitials glow 2. Band diagram canvas: - VBM/CBM, defect levels as dashed lines that get brighter with concentration - Fermi level draggable → occupancy changes, showing ionization - Electron/hole transition arrows animating for PL? Maybe show green emission arrow from CBM to V_O level. 3. Formation energy plot: - Lines E_f vs E_F, slope = q, kinks at transition levels - Toggle Zn-rich/O-rich - Lowest-energy defect highlighted (thermodynamically dominant) 4. PL spectrum: - Gaussian sum: NBE 380nm + green (V_O) + yellow (O_i) + red - Fill under curve with wavelength→color gradient (visible spectrum colors) - Emission color swatch: convert integral RGB → show glow - Log scale toggle? Keep linear. Also a small "physics notes" footer with equations (Kröger-Vink, formation energy formula). KaTeX might be heavy; I can render equations as styled HTML text. Spectral color conversion: implement approximate wavelength-to-RGB for 380-780nm, weight by intensity, normalize. Let me now write the formation energy model concretely. Bandgap Eg = 3.37 eV. E_F from 0 (VBM) to 3.37 (CBM). Defect model (representative, inspired by Janotti & Van de Walle): For each defect, list of (charge q, formation energy at E_F=0 under reference conditions, ...). Better: define transition levels and a base formation energy. Approach: define for each defect a set of charge states; for simplicity give each defect one or two charge states with transition level ε: E_f^q(E_F) = A_q + q·E_F, where A_q is formation energy at VBM. Define using base: pick E_f at VBM for the most negative... hmm easier: define E_f of neutral defect E0 (chemical part, condition-dependent), and transition levels. Then for a given E_F, charge states are determined by transition levels, and E_f(E_F) = E0 + Σ over ionized electrons... Let me just do the standard: For donor with transition ε(q+1/q): for E_F < ε, stable charge q+1... wait charge (q+1)+ vs q+? Let me define each defect with segments: V_O: charges +2 (E_F < 2.0), 0 (E_F > 2.0). E_f^0 at VBM = 4.5 eV (Zn-rich). Then E_f^{2+}(E_F) = E_f^0(0) - 2·2.0 + 2·E_F = 4.5 - 4.0 + 2E_F = 0.5 + 2E_F. Check continuity at E_F=2.0: 0.5+4.0=4.5 ✓. V_Zn: charges 0 (E_F < 1.1), 2- (E_F > 1.1) [negative-U]. E_f^0 at VBM = 2.0 eV (Zn-rich)? Under Zn-rich V_Zn is expensive; under O-rich cheap. Zn-rich E_f^0 ≈ 3.3? Let me pick: Zn-rich: V_Zn^0 = 3.5 eV; then V_Zn^{2-}: 3.5 - 2(1.1) + ... E_f^{2-}(E_F) = E0 - 2·1.1 - 2E_F = 3.5 - 2.2 - 2E_F = 1.3 - 2E_F. At E_F = 3.37: 1.3 - 6.74 = -5.44 → negative formation energy, meaning spontaneous. That's actually physical — V_Zn formation energy goes very negative near CBM under O-rich (compensating acceptors). Hmm but visually maybe cap the y-axis at [-1, 8]. O-rich adjustments: shifting chemical potentials: O-rich lowers μ_Zn by 3.6 and raises μ_O by 3.6. So: - V_O (remove O): E_f += +μ_O change = +3.6 → V_O more costly under O-rich ✓ - V_Zn (remove Zn): +μ_Zn change = -3.6 → cheaper ✓ (E_f^0 = 3.5 - 3.6 ≈ -0.1? That gives negative even neutral... For O-rich, V_Zn^0 E_f ≈ 0.2 eV. Let me set Zn-rich V_Zn^0 = 3.8, then O-rich = 0.2. OK.) - Zn_i (add Zn): E_f += -μ_Zn → Zn-rich: -... adding Zn: E_f includes -μ_Zn; under O-rich μ_Zn = -3.6 so E_f increases by 3.6. Zn_i cheap under Zn-rich ✓. - O_i (add O): cheaper under O-rich ✓. - Zn_O (add Zn, remove O): change = -μ_Zn + μ_O → under O-rich: +3.6 + 3.6? Hmm: E_f(Zn_O) = ... - μ_Zn + μ_O. Going Zn-rich → O-rich: Δμ_Zn = -3.6, Δμ_O = +3.6 → ΔE_f = +3.6 + 3.6 = +7.2. That's large; fine, antisites become very costly. Hmm, that makes Zn_O shoot off chart under O-rich. Cap display range and let lines clip. Zn_i: shallow donor, charges +2 (E_F < ~3.0?), let's make it +2 throughout with transition near CBM ε(2+/0) = 3.2? Actually Zn_i is a shallow donor with (2+/0)... reported shallow, ionization ~ near CBM. Set ε = 3.0. Zn-rich E_f(Zn_i^0) = 3.4? Let me choose numbers so that under Zn-rich, at mid-gap-ish, Zn_i^{2+} competes with V_O. Let me tabulate (Zn-rich, E_f at VBM E_F=0 for each charge segment): - V_O: +2: 0.7; transition at 2.0; 0: 4.7 - V_Zn: 0: 3.8; 2-: 3.8 - 2(1.1) = 1.6; transition at 1.1 - Zn_i: +2: 1.2; transition at 3.0; 0: 1.2+6.0=7.2 (mostly +2 in gap) - O_i: acceptor, 2-: with transition ε(0/2-) = 1.0? O_i^0 Zn-rich = 4.3? Hmm O_i under Zn-rich expensive; under O-rich ~1.5. Set Zn-rich O_i^0 = 4.6, transition (0/2-) at 1.2 → 2-: 4.6-2.4 = 2.2 at VBM... Eh, these are all "representative" — I'll add a disclaimer "Representative values inspired by Janotti & Van de Walle, PRB 76, 165202 (2007)". A professor will appreciate the citation framing. Plot: x from 0 to 3.37, y from -1 to 8 eV. Draw each defect's stable-charge piecewise line (only the lowest charge state at each E_F), with kinks at transitions. Color-coded. Legend. Also shade near-band edges. Highlight dominant defect (lowest E_f) at a draggable E_F marker? Could sync the Fermi level slider across the band diagram and formation energy plot — nice touch: one "Fermi level" control affecting both. Actually let me unify: a vertical dashed line on formation energy plot and horizontal line on band diagram, both draggable (drag on either, or a slider). **Band diagram:** Canvas: y-axis energy 0..3.37 eV (or -0.5 to 3.8). Draw VBM and CBM bands (with slight band curvature? no, keep flat). Defect levels: - V_O: ε(2+/0) at 2.0 eV (deep donor) — drawn in upper half - V_Zn: levels at 0.3 and 1.1 eV (acceptor) — near VBM - Zn_i: shallow donor at ~3.2 eV (just below CBM, ~0.05-0.3 below) - O_i: at ~1.2? or draw as acceptor Fermi level line draggable. Occupancy: level filled (electron) if below E_F (with Fermi-Dirac smearing, T=300K). Show ionized vs neutral with color intensity. Show arrows: excitation (VBM→CBM) and green emission (CBM electron → V_O^+ level ≈ 2.4 eV emission?). The green band in ZnO ~2.4-2.5 eV often assigned to electron transitions involving V_O or V_Zn... commonly CBM → V_Zn or V_O^{2+/+}... There's debate; I'll label green as "V_O-related (debated)". A professor would enjoy the nuance note. **PL spectrum:** Peaks (Gaussian in energy space, plot vs wavelength nm and maybe vs eV toggle — keep nm with color gradient): - NBE excitonic: 3.30 eV (~376 nm), width 0.06 eV, amplitude: base strong, reduced as defects increase (defects provide nonradiative/radiative competing channels) - Green: 2.45 eV (~505 nm), width 0.25 eV, amp ∝ V_O count - Yellow: 2.15 eV (~577 nm), width 0.22 eV, amp ∝ O_i count - Orange-red: 1.9 eV (~653 nm), width 0.25 eV, amp ∝ V_Zn? Red band in ZnO sometimes linked to V_Zn or excess O... I'll link red to V_Zn modestly. Actually yellow (~2.1) often O_i, red ~1.75 linked to O excess. Fine: red ∝ V_Zn (say "V_Zn-related red/orange"). Convert spectrum to perceived RGB: sum over λ: I(λ)·rgb(λ), then render a "sample under UV lamp" swatch — a rounded rectangle glowing with that color. Cool visual. Counts from crystal feed in: nVO, nVZn, nZni, nOi. Also add sliders to scale counts up (since a 200-atom crystal can only hold a few defects) — or just scale counts by factor internally (ppm-like). Sliders could override: "Defect concentration" sliders linked to crystal counts with a multiplier. Simpler: the crystal IS the control; amplitudes = f(counts). Plus an overall "excitation power" slider maybe. Keep it clean. **Tabs or all visible?** Screen space: left half crystal, right half stacked: Band Diagram (top) and tabs for Formation Energy / PL? Better: right side has two panels: PL spectrum (with glow swatch) and a tab switcher for Band Diagram vs Formation Energy. Hmm. Let me do: - Left column (55%): 3D crystal + defect buttons + counters - Right column (45%): top = PL spectrum + emission swatch; bottom = tabs [Formation Energy | Band Diagram]; Fermi level slider below them. That fits a 1400x900 viewport. Make it responsive-ish. **Kröger-Vink & equations footer:** show formation reaction when a defect is created, e.g.: V_O: O_O^× → V_O^{••} + ½O₂(g) + 2e′ ... Actually Kröger-Vink: null → V_O^{••} + 2e' + ½O₂ ... The reaction: O_O^× ⇌ V_O^{••} + 2e′ + ½ O₂(g). Show this dynamically when user creates defects — cute! A "reaction log" line that updates: e.g., creating V_O shows `O_O^× → V_O^{••} + 2e′ + ½O₂(g)`; V_Zn: `Zn_Zn^× → V_Zn^{″} + 2h^{•} + Zn(g)` hmm: Zn_Zn^× ⇌ V_Zn^{″} + 2h^• + Zn(g)? In Kröger-Vink: Zn_Zn^× → V_Zn″ + 2h• + Zn(gas) is not standard but conveys. For Zn_i: Zn(g) → Zn_i^{••} + 2e′. O_i: ½O₂ → O_i^{″} + 2h^•. Use superscripts via Unicode: • (bullet above), ″ double prime, ×. Format with ^{.

**Three.js crystal:**
- Build wurtzite lattice 3×3×2 unit cells → 2 Zn + 2 O per cell → 72 atoms. Let me do 3×3×3 = 108 atoms? Bonds: each Zn tetrahedrally bonded to 4 O. Compute bonds by distance cutoff (~2.0 Å for Zn-O ~1.98 Å).
- Zn color: #8fa3bf (silvery blue-grey), O: #e74c3c (red). Sizes: Zn r=0.74 (ionic) vs O r... visually Zn slightly bigger or similar; Shannon radii: Zn2+ 0.74, O2- 1.24 → O bigger. Draw O radius 0.5, Zn 0.45 relative.
- Vacancy: remove atom, add wireframe ghost sphere (dashed edges look — use wireframe sphere with low opacity) + faint pulsing.
- Interstitial: add smaller glowing sphere at channel site with point light? maybe emissive material.
- Click-to-create: raycast; clicking an O atom creates V_O there; clicking Zn creates V_Zn; buttons choose mode. Also buttons "auto" add random. Mode selector: [V_O, V_Zn, Zn_i, O_i] — clicking on crystal applies: vacancy modes need clicking matching atom type; interstitial modes click anywhere → add at random free channel site. Also "+ Add" random buttons. And "Reset crystal".
- OrbitControls with damping, auto-rotate slow.
- Bond highlighting near defects? Maybe highlight neighbors of vacancies. Skip for scope.

Performance: ~110 atoms + ~220 bonds → fine with individual meshes, or use InstancedMesh. Individual meshes simpler for removal/raycast. OK.

Three.js CDN: use non-module build r128 from cdnjs: https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js and OrbitControls from https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js — these exist. Yes.

Tailwind: https://cdn.tailwindcss.com — fine.

Fonts: Google Fonts — "Space Grotesk" or "Inter" + "JetBrains Mono" for scientific feel. Use link tags.

Now the Fermi level sync: a range slider 0..3.37 plus draggable lines. Band diagram: Fermi level horizontal line; formation plot: vertical line. Slider updates both; dragging on either updates slider. Good.

Charge state display: at current E_F, show each defect's stable charge: V_O: +2 or 0, V_Zn: 0 or 2−, etc. Show chips.

**Let me define the defect dataset (single source of truth):**

```js
const DEFECTS = {
VO: {
name: 'Oxygen vacancy', kv: 'V_O^{••}', color: '#22d3ee',
type: 'donor',
levels: [ {q1:2, q2:0, eps: 2.0} ], // negative-U: 2+ → 0
// formation: neutral at VBM (Zn-rich): 4.7; o-rich shift: +3.6
E0: 4.7, dMu: +3.6 // change in E0 going Zn-rich→O-rich
},
VZn: { name:'Zinc vacancy', kv:'V_Zn^{″}', color:'#f472b6', type:'acceptor',
levels:[{q1:0,q2:-2,eps:1.1}], E0: 3.8, dMu:-3.6 },
Zni: { name:'Zn interstitial', kv:'Zn_i^{••}', color:'#a3e635', type:'donor',
levels:[{q1:2,q2:0,eps:3.05}], E0: 6.9, dMu:+3.6 }, // shallow-ish; neutral high
Oi: { name:'O interstitial', kv:'O_i^{″}', color:'#fbbf24', type:'acceptor',
levels:[{q1:0,q2:-2,eps:1.2}], E0: 4.4, dMu:-3.6 },
ZnO_as: { name:'Zn on O antisite', kv:'Zn_O^{••}' ... } // maybe skip antisites to reduce clutter. Keep 4 intrinsic + note.
}
```

Wait — formation energies: E_f^q(E_F) = E0 + q·E_F + correction... Let me recompute carefully.

Standard: E_f(D^q) = E_f^chem(D) + q·E_F where E_f^chem is at E_F=0 referenced to VBM. For the neutral, E_f^0 = E0 (independent of E_F). For charge q, the line is E0_q + q·E_F. Transition ε(q/q') where lines cross: E0_q + q·ε = E0_q' + q'·ε → ε = (E0_q' - E0_q)/(q - q').

Given E0 (neutral) and ε(q/q'):
For V_O: neutral E0=4.7 (Zn-rich), ε(2+/0)=2.0 → E0_{2+} = E0 - 2·ε = 4.7-4.0 = 0.7. Line: 0.7+2E_F for E_F<2.0. At E_F=0: 0.7 ✓ low — good (V_O^{2+} cheap under Zn-rich — matches literature narrative).
O-rich: E0 → 8.3, E0_{2+} = 4.3. Line: 4.3+2E_F. Good, much higher.

V_Zn: E0=3.8 (Zn-rich), ε(0/2−)=1.1 → E0_{2-} = E0 + 2·ε = 3.8+2.2 = 6.0. Line for q=-2: 6.0 - 2E_F for E_F>1.1. At E_F=3.37: 6.0-6.74 = -0.74. OK.
O-rich: E0=0.2 → E0_{2-}=2.4; at E_F=3.37: 2.4-6.74 = -4.34 (very negative, cap plot at -1.5 maybe). Hmm y-range [-1.5, 9]. Negative formation energy indicates instability/compensation — actually that's a real point from the literature (V_Zn compensates n-type; spontaneous formation limiting n-type doping). I'll annotate: "E_f < 0 → spontaneous compensation". Nice pedagogical touch.

Zn_i: E0 (neutral) = 6.9? ε(2+/0) = 3.05 → E0_{2+} = 6.9 - 6.1 = 0.8. Line: 0.8+2E_F up to 3.05. At E_F=0: 0.8 eV — cheap under Zn-rich ✓. O-rich: E0=10.5, E0_{2+}=4.4.

O_i: E0=4.4 (Zn-rich), ε(0/2−)=1.2 → E0_{2-} = 4.4+2.4=6.8 → line 6.8-2E_F for E_F>1.2. O-rich: E0=0.8 → E0_{2-}=3.2.

Hmm wait, O_i dMu: adding O: E_f has -μ_O; O-rich μ_O=0 vs Zn-rich μ_O=-3.6 → O-rich cheaper by 3.6 → dMu = -3.6 ✓.
V_O: removing O: +μ_O → O-rich more expensive by +3.6 ✓.
V_Zn: removing Zn: +μ_Zn; O-rich μ_Zn = -3.6 → cheaper: dMu=-3.6 ✓.
Zn_i: -μ_Zn → O-rich: +3.6 ✓.

Good, consistent.

Band diagram levels to show (with labels):
- Zn_i (2+/0): 3.05 eV — shallow donor (actually shallow means close to CBM: 3.37-3.05=0.32 below CBM, eh "shallow-ish"). Maybe set Zn_i level at 3.2 (0.17 below CBM)? But formation model uses 3.05. Keep consistent 3.05; call it donor.
- V_O (2+/0): 2.0 eV — deep donor
- O_i (0/2−): 1.2 eV
- V_Zn (0/2−): 1.1 eV — hmm V_Zn and O_i close. Fine, offset labels. Actually let me give V_Zn two levels to be richer: (0/−) 0.3 and (−/2−) 0.9? But formation model uses single negative-U at 1.1. Simplicity > completeness; I'll do single levels and mention negative-U. Actually for V_Zn, let me use the two-transition version in the band diagram only? Inconsistent — no. Keep negative-U single transitions; add note "negative-U center".

Hmm, for the band diagram maybe show V_Zn with acceptor levels drawn near VBM since it's the main p-type acceptor... The (0/2−) at 1.1 is mid-gap-ish lower. OK.

PL arrows on band diagram: draw animated arrows: NBE (CBM→VBM, UV ~3.3 eV), green: CBM(3.37)→V_O-related... Green emission energy 2.45 eV. If arrow from CBM (3.37) to level at 0.9 eV above VBM → 2.47 eV ≈ green! One common assignment: conduction band electron → V_Zn (acceptor level ~0.9 eV) gives ~2.4-2.5 eV green. Another: V_O^{+} level to valence... I'll draw green arrow CBM→V_Zn level labeled "green ~2.45 eV (CBM → V_Zn)". And yellow: CBM→O_i 1.2 → 2.17 eV ✓ matches yellow 2.15! Nice, consistent story: green ← V_Zn, yellow ← O_i, red...? Hmm but I tied green PL to V_O counts earlier. Debate in literature: green luminescence has been attributed to both V_O and V_Zn (and Cu). Let me make green intensity ∝ (V_O + 0.5·V_Zn)? Cleaner: green ∝ V_O (classic assignment) but arrow drawn CBM→V_Zn... inconsistent.

Resolution: make the green band respond to BOTH: "green band (V_O / V_Zn — assignment debated)". Arrow: draw from CBM to a "defect band" region. Or draw two arrows. Simplest impressive approach: draw arrows from CBM to each acceptor/defect level with the emitted photon energy labeled and wavelength-colored, and intensity of arrow/label ∝ that defect's count:
- CBM → V_Zn (1.1): ΔE = 2.27 eV ≈ 546 nm (green-yellow)
- CBM → O_i (1.2): 2.17 eV ≈ 572 nm (yellow)
- V_O: transition from its level? V_O is donor: electron captured... emission: V_O^{2+} + h ... For the PL model, I'll say green ∝ V_O via "DAP-like" transition from shallow donor (Zn_i) to V_Zn? Overcomplicating.

Pragmatic: PL amplitudes:
- UV NBE: base 1.0, damped by total defects: A_nbe = 1/(1+0.15·N_total)
- Green 2.42 eV: A = 0.9·nVO + 0.35·nVZn (label "V_O / V_Zn related — debated")
- Yellow 2.12 eV: A = 0.8·nOi
- Red 1.85 eV: A = 0.5·nVZn (V_Zn deeper transitions / O-rich red) — plausible literature has red bands under O-rich.
- Also small blue-violet ~3.0 eV from Zn_i: A = 0.4·nZni (Zn_i-related blue emission ~2.9-3.0 eV is reported!). Yes — Zn_i gives blue/violet emission ~2.9 eV (440 nm). Add: Violet 2.95 eV: A=0.5·nZni.

That's a rich spectrum tied to all 4 defect types.

Spectrum plot: x-axis 350-750 nm. y: intensity. Filled gradient under curve approximating emission color at each wavelength (clipPath fill with linear gradient of spectral colors) + white curve line on top. Also compute composite color → big glowing swatch "Sample under 325 nm He-Cd excitation".

Emission color composite: integrate I(λ)·XYZ approx via simple wavelength→RGB function weighted by intensity in 380-720 range; if total tiny, show near-black with UV label "invisible (UV only)".

Band diagram arrows: animate 3 arrows: UV (CBM→VBM vertical), green (CBM→V_Zn), yellow (CBM→O_i). With photon λ labels. Animated dashes. Also electrons (dots) relaxing. Keep moderate: draw static arrows with animated dash offset; fine.

**Reaction log:** show latest Kröger-Vink reaction as user adds defects:
- V_O: O_O^× → V_O^{••} + 2e′ + ½O₂↑
- V_Zn: Zn_Zn^× → V_Zn^{″} + 2h^{•} + Zn↑
- Zn_i: Zn(g) → Zn_i^{••} + 2e′
- O_i: ½O₂(g) → O_i^{″} + 2h^{•}
Also charge neutrality note.

**Extra wow:** "paper-style" caption under each figure, like "Fig. 1 — ...". A professor will smile. Also a fake "export figure" button? Maybe a "Download PL data (CSV)" button — genuinely useful vibe. Small effort: generate CSV from computed spectrum, download via blob. Add it.

Also a "Defect equilibria cheat sheet" collapsible with the formation energy equation rendered nicely (HTML sup/sub).

Header stats: computed "net doping" estimate? Carrier concentration from charge neutrality at chosen E_F given counts — that's overkill; skip or simple "net charge" indicator: q_net = 2nVO - 2nVZn + 2nZni - 2nOi (times ionization state at E_F!). Could compute ionized charges from E_F and show "predicted type: n-type/p-type/compensated". That's a nice touch: chip showing n-type if donors ionized dominate. Compute: for each defect, stable q at E_F; total = Σ count·q; plus background. Show "Net defect charge: +x|e| per supercell → n-type character" (since electrons compensate).

**Now write the code.** Structure:

```html

meta, title
Google fonts
tailwind CDN
style block (custom scrollbar, glow effects, canvas styling, range slider styling)

title, subtitle, badges

canvas
controls: mode buttons (4), action buttons (add random, reset), hint
counters chips for 4 defects + net-type chip
reaction line (Kröger-Vink)
caption "Fig. 1"

tabs buttons

equations + references + disclaimer

```

Order of scripts: three.min.js, OrbitControls.js (needs THREE global), then main script.

Careful details:

Wurtzite positions. Fractional coords in hexagonal basis. Convert: pos = f1·a1 + f2·a2 + f3·c where a1=(a,0,0), a2=(-a/2, a·√3/2, 0), c=(0,0,ch).

Atoms per cell:
Zn: (1/3, 2/3, 0), (2/3, 1/3, 1/2)
O: (1/3, 2/3, u), (2/3, 1/3, u+1/2), u=0.3825

Supercell nx=3, ny=3, nz=2 → 72 atoms. Center the structure around origin for nicer orbiting.

Bonds: connect Zn-O pairs with distance < 2.3 Å (bond length ~1.98). Use cylinder between points. With supercell, internal atoms have 4 bonds. Bonds at surface dangling fine.

Interstitial channel sites: hexagonal channels at (0,0,z) — positions (0,0,0.25)? In wurtzite the prominent interstitial sites: octahedral at (1/3? ...). Known: Zn_i prefers the "octahedral" site in the channel: e.g., (0, 0, 0.5)? Hmm. Common cited interstitial sites in wurtzite: tetrahedral (1/3,2/3,~0.7)?? To avoid overlap with lattice atoms at (1/3,2/3,z) and (2/3,1/3,z), channels run along (0,0,z). Place interstitials at (0, 0, k) for k in {0.25? no...}. Any z in channel is open since no atoms at (0,0,z). I'll place at z fractional = layer midpoints: for visual spread use z = (cell z + 0.25 or 0.75). When adding, pick random (ix,iy,iz, phase) from free sites not already occupied; track occupied set. Offset slightly: (0,0, z) exactly is fine.

Slight nuance: with a1, a2 basis, channel at fractional (0,0) maps to corner of the parallelogram cells — at the supercell corners. Visually channels at cell corners shared between cells — fine, still open hexagonal channels. Hmm, actually is (0,0,z) a channel in wurtzite? Wurtzite has atoms at (1/3,2/3) and (2/3,1/3) columns; (0,0) column is empty → yes, open channel along c at (0,0).

Rendering: spheres MeshStandardMaterial? Use MeshPhongMaterial. Lighting: ambient + directional + point. Background transparent over CSS gradient. autoRotate.

Ghost vacancies: wireframe icosahedron/sphere, color = cyan/pink matching defect, opacity pulsing via time-based material.opacity in animate loop (store in ghosts array).

Interstitial glow: emissive material + scale pulse.

Raycasting: pointerdown vs click-drag conflict with OrbitControls — use 'click' but only treat as defect-creation if pointer moved < 5px between down/up. Implement manually with pointerdown/up.

Modes: 'VO','VZn','Zni','Oi'. For VO: only O atoms clickable (raycast against oxygen meshes); highlight on hover (scale up + emissive). For VZn: Zn atoms. For interstitial modes: click anywhere on canvas background? Clicking adds to random free site (nearest free site not needed — random). Also each mode button doubles as "add random" via small "+" button? Keep: click atoms for vacancies; for interstitials, clicking anywhere adds one. Also an explicit "Add (random)" button per defect row in a control list. Let me design controls as 4 rows:

Each row: color dot, name + KV symbol, count badge, [+] button, [−] button (remove one — for vacancies, heal a vacancy: restore atom; for interstitial, remove). Reset all button. Nice and functional without relying only on raycast.

The [−] for vacancy: pick a ghost, restore its atom (need to store original atom data: element, position, mesh to re-add or just make original mesh visible again — simpler: keep atom meshes, toggle visible; vacancy = atom invisible + ghost visible). Restoring also restores bonds: bonds as cylinders referencing atom pair — store bond list with atom ids; when atom removed, hide its bonds; restored → show.

Atoms: id, el, pos(Vector3), mesh, removed(bool), bonds[].

PL + band + formation redraw on state change; animate loop handles pulsing; PL canvas redrawn on change (static) — but arrows animate? Keep arrows static styled; animate only in three.js loop. Band diagram static canvas redrawn on E_F/count changes. Fine.

Fermi slider: input range 0..337 → eV 0..3.37 step 0.005. Update readouts, both canvases.

Formation energy drawing: for E_F grid 0..3.37 step 0.01, for each defect compute min over charge states of E_f^q. Charge states: derive from levels: with one transition q_hi (for E_F < eps) and q_lo. For donor {q1:2,q2:0,eps}: if E_FO^••. Use HTML strings.

Now, sizes: canvases need fixed internal resolution with devicePixelRatio scaling and resize handling. I'll write helper to fit canvas to container with DPR.

Three.js container height ~ 480px. Right column PL ~ 230px, tabs canvas ~ 300px. Fermi slider row ~ 60px.

Let me think about the overall aesthetic: deep navy background (#060a13), panels rgba(15,23,42,.7) with border slate-800, backdrop-blur, subtle grid background pattern via CSS radial/linear gradients. Accent cyan. Mono font for numbers. Headers with tracking-widest uppercase small labels — "figure legend" style. This will look like a polished scientific instrument.

Edge cases:
- Prevent removing more atoms than available.
- Net-type chip: compute Σ q·count with q at current E_F; >0 → "n-type (donor-dominated)", <0 → "p-type (acceptor-dominated)", 0 → "stoichiometric / compensated".
- Reset button restores all.

OrbitControls CDN check: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js — exists (examples/js was removed in later versions but 0.128 has it). THREE r128 cdnjs: https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js — exists. OrbitControls non-module expects global THREE — works.

Tailwind CDN: https://cdn.tailwindcss.com — fine.

Now let me also double check counts→PL amplitude scaling. Max defects maybe ~12 each. Amplitudes: green A=0.9·nVO → with 5 VO, A=4.5 vs NBE base 1 damped 1/(1+0.15·N). Spectrum normalize to max=1 for display (autoscale) so relative shape matters; but swatch brightness uses normalized too. Autoscale PL to peak 1. Also show "counts are scaled ×10³ cm⁻³-ish"? Add note: "amplitudes ∝ defect population in supercell". Fine.

For the band diagram arrow opacities: use normalized amplitudes from same PL model. Good consistency story.

Alright — also drag Fermi on band canvas: mousedown near line → drag → update slider. And on FE canvas: vertical line drag. Implement both with pointer events, hit tolerance 8px.

Charge state chips under Fermi slider: for each defect show KV with current stable charge, e.g., V_O^{2+} colored chips. Update on E_F change.

Let me now also handle the "impressive" factor: subtle animations — panel entrance fade, animated scanline on PL canvas? Maybe a thin moving highlight on the spectrum (like spectrometer sweep) — nice: animate a vertical line sweeping across PL repeatedly with requestAnimationFrame when idle? Could annoy; make subtle slow sweep. I'll add gentle sweep using CSS overlay div animated. Sure, small CSS keyframe.

Header: blinking "● LIVE" indicator + "He-Cd 325 nm excitation" label. Fun instrument vibe.

Write the KV strings:
- VO: `V_O^••` charge states 2+/0: V_O^{••} ⇌ V_O^{×} + 2e′
- VZn: `V_Zn^″`
- Zni: `Zn_i^••`
- Oi: `O_i^″`

Reaction log strings:
- add VO: `O_O^× → V_O^•• + 2 e′ + ½ O₂(g) ↑`
- add VZn: `Zn_Zn^× → V_Zn^″ + 2 h^• + Zn(g) ↑`
- add Zni: `Zn(g) → Zn_i^•• + 2 e′`
- add Oi: `½ O₂(g) → O_i^″ + 2 h^•`
- remove → "defect annihilated / lattice restored".

Now code. I'll be careful with length but this needs to be complete. Let me draft the main script mentally then write final.

Key globals:
```js
const EG = 3.37;
const DEFECTS = { VO: {...}, VZn: {...}, Zni: {...}, Oi: {...} };
let counts = {VO:0, VZn:0, Zni:0, Oi:0};
let EFermi = 1.6; // initial mid-gap-ish... maybe 3.0 n-type since ZnO is natively n-type! Set 3.1 default — "as-grown ZnO is n-type". Good story.
let mu = 'Znrich';
```

Formation energy funcs as derived.

Band levels for diagram: VO eps=2.0 (donor), Zni eps=3.05 (donor), VZn eps=1.1, Oi eps=1.2.

Charge at EF: donor VO: EF<2.0 → +2 else 0. VZn: EF<1.1 → 0 else −2. Zni: EF<3.05 → +2 else 0. Oi: EF<1.2 → 0 else −2.

Net charge chip.

PL model:
```js
function plPeaks(){
const N = counts.VO+counts.VZn+counts.Zni+counts.Oi;
return [
{E:3.30, w:0.055, A: 1.0/(1+0.12*N), name:'NBE'},
{E:2.95, w:0.12, A: 0.45*counts.Zni, name:'Zn_i violet'},
{E:2.42, w:0.22, A: 0.85*counts.VO + 0.30*counts.VZn, name:'green'},
{E:2.12, w:0.20, A: 0.75*counts.Oi, name:'yellow'},
{E:1.85, w:0.24, A: 0.45*counts.VZn, name:'red'},
];
}
```
Intensity vs λ: convert peak E(eV) to λ=1240/E; amplitude preserved; width in nm approx: wλ = w_E·λ/E ≈ 1240·w_E/E². Compute Gaussian in nm domain.

Colors: λ 376 NBE; 420 violet (2.95eV); 512 green; 585 yellow; 670 red.

Composite RGB: iterate λ 380..730 step 2.

Band arrows:
- NBE: from CBM to VBM, λ≈376 (violet), alpha=A_nbe.
- green: CBM→V_Zn level (1.1): ΔE=2.27→546nm... but our green peak is 2.42. Slight mismatch — arrows are illustrative; label "≈2.3–2.5 eV green band". Alternatively draw green arrow from Zn_i level? Let me instead draw arrows whose ΔE matches peaks: green 2.42 → from CBM to level at 0.95 eV — between VZn(1.1) — close enough, draw to V_Zn and label ~2.3 eV? Hmm.

Cleaner: label arrows with computed ΔE and λ from actual levels:
- CBM→VZn(1.1): 2.27 eV ≈ 546 nm "green-yellow"
- CBM→Oi(1.2): 2.17 eV ≈ 572 nm "yellow"
But green peak tied to VO... draw green arrow from V_O level? V_O at 2.0 (donor): hole transition VBM→V_O? Emission electron from V_O level to VBM: 2.0 eV (red). Hmm.

You know what, the green band assignment is genuinely debated — I'll draw the green arrow from just below CBM (shallow donor / Zn_i) to V_Zn level, and caption honestly: "green band commonly assigned to transitions involving V_O and/or V_Zn (still debated)". For the arrow: from Zni level (3.05) to VZn (1.1): ΔE=1.95 red. From CBM 3.37→VZn 1.1 = 2.27. Peak model 2.42. Meh. I'll set green peak E = 2.35 eV (527 nm, still green) and draw CBM→V_Zn arrow labeled 2.27 eV ≈ green. Honestly close enough for an illustrative tool, and the caption acknowledges model freedom. Actually simplest defensible: make PL green amplitude depend on VO AND VZn, arrows drawn to V_Zn; caption explains both assignments exist. Good.

Now drawing helpers. Canvas setup:

```js
function setupCanvas(canvas){
const dpr = window.devicePixelRatio||1;
const r = canvas.getBoundingClientRect();
canvas.width = r.width*dpr; canvas.height=r.height*dpr;
const ctx=canvas.getContext('2d'); ctx.setTransform(dpr,0,0,dpr,0,0);
return ctx;
}
```
Redraw on resize (ResizeObserver or window resize).

FE plot geometry: margins {l:46,r:10,t:14,b:30}. xMap: EF 0..3.37; yMap: -1.5..9 inverted.

Draw: axes, gridlines at integer eV, x label "E_F (eV) — 0 = VBM, 3.37 = CBM", y label "formation energy (eV)". Shade y<0 region. For each defect: path over EF samples of min-charge Ef, clipped; stroke colored 2px; at transition eps draw circle marker; label KV near line start... labels: place at right end or at minimum-curvature point; simpler: legend chips top-left inside canvas. Also current-EF vertical white dashed + at intersection with each line small dot; dominant defect name bottom.

Band diagram geometry: energy axis vertical: range [-0.6, 3.9]. CBM rect from 3.37..3.9, VB rect -0.6..0. Fill VB with gradient (electron-filled: blue-grey), CB lighter. Mid defect region white-ish background (panel bg). Defect levels dashed lines with labels right side. EF line white. Arrows: from x center-ish; draw arrow line with arrowhead; color by wavelength rgb; label λ. Animate? static ok.

Also small text: "T = 300 K" and Fermi-Dirac note? Add subtle.

Interactivity on band canvas drag EF: pointerdown: if |y - yEF| < 10 → dragging; move → EF = energy at y; update slider & redraw all. Same on FE canvas with x.

Also hovering FE canvas could show tooltip values — skip for scope; maybe simple: show dominant defect + Ef at EF in a readout div updated on EF change.

Tabs: buttons toggle hidden class on canvases container.

Now Three.js scene:

```js
const container = document.getElementById('crystal');
scene, camera (fov 45), renderer alpha:true antialias
lights: ambient 0.55, dir (2,4,3) 0.9, point cyan subtle
controls: OrbitControls, enableDamping, autoRotate speed 0.6, min/max distance
build lattice:
a=3.25, c=5.21, u=0.3825
a1=(a,0,0), a2=(-a/2, a*sqrt3/2, 0)
for i<3,j<3,k<2 cells: atoms
center offset: compute bbox center, subtract.
spheres: sphereGeo shared (radius 1), scaled per element: Zn 0.55? Let's O r=0.62, Zn r=0.55 — visually distinct colors matter more.
Actually ionic: O2- bigger: O 0.7, Zn 0.55.
materials: Zn #9db4d8 metalness .3 roughness .35; O #ef4444.
bonds: for each Zn find O within 2.4 → cylinder radius .12 color #475569 opacity .9.
```

Bond cylinder between p1,p2: standard quaternion from up vector.

Vacancy ghost: sphere wireframe (new THREE.SphereGeometry(r,12,8), wireframe material color defect, transparent .5) + inner glow sprite? Keep wireframe + pulsing opacity.

Interstitial: sphere r=0.5, emissive color, plus THREE.PointLight? Too many lights; just emissive + pulse scale.

Store atoms array; ghosts array; inter array; bonds: {mesh, a:atomIdA, b:atomIdB}.

API:
```js
function addDefect(type, atomId?){
VO: pick atom el==='O' && !removed (random or given) → hide mesh, hide its bonds, ghost
VZn: same with Zn
Zni: pick free site → create mesh
Oi: same (different color/emissive)
counts++, updateAll()
}
function removeDefect(type){ reverse last of that type (stack per type) }
```
Track per-type stack of created items for undo.

Click handling: pointerdown record x,y; pointerup: if dist<6 and mode is VO/VZn: raycast atoms of matching el (only visible), if hit addDefect(mode, id). If mode Zni/Oi: any click on canvas adds at random free site. Change cursor to crosshair.

Hover highlight: pointermove raycast, scale hovered atom 1.25, cursor pointer. Slight cost fine.

Animation loop: controls.update, pulse ghosts (opacity = .35+.25*sin(t*3+phase)), interstitials scale pulse, render.

updateAll(): counts badges, reaction log (called separately), PL redraw, band redraw, FE redraw (charge chips), net-type chip, swatch.

Initial demo state: add 2 VO + 1 VZn on load so visuals are rich, log shows. Hmm, or start pristine? Starting with a couple defects shows features immediately. Yes: 2×V_O, 1×V_Zn, 1×Zn_i.

EF default: 3.05? Let's default 2.9 (n-type, near Zn_i level). Eh — 3.10. Net-type chip: with 2VO(+2 each at EF... wait at EF=3.1>2.0 VO neutral!) Hmm: at high EF donors neutralize. n-type ZnO: EF near CBM → VO^0, Zni^0(EF>3.05→0)... then net charge 0 → "compensated"? Physically at EF near CBM, donors are neutral and the electrons are in the conduction band. My "net defect charge" chip would mislead. Better metric: count donor electrons available: ionized donor charge assumes EF below levels... Let me instead show "defect charge at current E_F" which is physically the defect charge state, and note that positive defect charge ⇒ compensating electrons in CB. At EF=3.1: VO^0, Zni^0, VZn^{2-} (−2×1), Oi^{2-}... net negative → would say p-type?? But with EF near CBM the sample is clearly n-type. The chip should just reflect EF position: "E_F near CBM → n-type". That's cleaner and correct: EF > Eg/2+something → n-type. Simple: EF > 2.2 "n-type regime", EF < 1.2 "p-type regime", else "near-intrinsic/compensated". With note. OK do that, and separately list defect charge states as chips (which is correct physics at that EF).

Also default EF 3.10 shows VO^0, VZn^{2-}, Zni^0, Oi^{2-} chips — fine, and formation plot shows VZn^{2-} strongly negative → "spontaneous acceptor compensation — why p-type ZnO is hard!" That's the money insight.

Slider range 0..3.37.

Now writing all of it. Also remember: full HTML in single code block, no mention of iframe. Include all script/link tags. Let me be thorough but efficient.

CSS custom:
```css
body{font-family:'Inter',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
.panel{...}
range slider styling
keyframes: sweep, fadeUp, blink
scrollbar
```

Tailwind handles most.

For the spectral gradient: build in JS as canvas linear gradient with computed stops.

Let me write wavelengthToRGB (approx, 380–780):

```js
function waveRGB(w){
let r=0,g=0,b=0;
if(w>=380&&w<440){r=-(w-440)/60;g=0;b=1;}
else if(w<490){r=0;g=(w-440)/50;b=1;}
else if(w<510){r=0;g=1;b=-(w-510)/20;}
else if(w<580){r=(w-510)/70;g=1;b=0;}
else if(w<645){r=1;g=-(w-645)/65;b=0;}
else if(w<=780){r=1;g=0;b=0;}
// intensity falloff
let f=1;
if(w<420) f=0.3+0.7*(w-380)/40;
else if(w>700) f=0.3+0.7*(780-w)/80;
return [r*f,g*f,b*f];
}
```

Composite color from spectrum:

```js
let R=0,G=0,B=0;
for(w=380;w<=730;w+=2){const I=intensityAt(w);const c=waveRGB(w);R+=I*c[0];G+=I*c[1];B+=I*c[2];}
normalize: max channel → 255; brightness factor = min(1, totalNorm*3)?
```

For pristine sample: only NBE at 376 — w loop starts 380 → almost nothing → very dim violet. Add tail: include 376 by starting at 375. waveRGB(375) → r= -(375-440)/60=1.08 clamp 1, b=1, f=0.3·? w<420: f=0.3+0.7*(w-380)/40 → negative at 375 → clamp 0. So handle w<380: use f=0.3. I'll clamp f≥0 and r,g,b into [0,1]. Fine — faint deep violet glow.

CSV download:

```js
const rows=['wavelength_nm,intensity_au'];
for(w=350;w<=750;w++) rows.push(w+','+intensityAt(w).toFixed(5));
blob download 'zno_pl_simulated.csv'
```

Tabs and chips. Charge chips HTML: for each defect: `V_O^{0}` — build with innerHTML using kv(charge) strings.

kvWithCharge helper:
```js
function kvq(d,q){ // d.kvBase like 'V_O', q like 2,0,-2
const sup = q===0?'×':(q>0?'•'.repeat(q):'′'.repeat(-q));
// subscript split: 'V_O' → V + sub O
}
```
Represent kv as {pre:'V', sub:'O'} etc. Build string: `${pre}_${sub}^${sup}`. For q=+2, sup '••'; -2: '″' (double prime) nicer than ′′. Use: -1:'′', -2:'″'. +1:'•', +2:'••'.

Defect data:

```js
const DEF = {
VO:{pre:'V',sub:'O',name:'Oxygen vacancy',color:'#22d3ee',qHi:2,qLo:0,eps:2.00,E0:4.7,dMu:3.6,el:'O',kind:'vacancy'},
VZn:{pre:'V',sub:'Zn',name:'Zinc vacancy',color:'#f472b6',qHi:0,qLo:-2,eps:1.10,E0:3.8,dMu:-3.6,el:'Zn',kind:'vacancy'},
Zni:{pre:'Zn',sub:'i',name:'Zn interstitial',color:'#a3e635',qHi:2,qLo:0,eps:3.05,E0:6.9,dMu:3.6,kind:'interstitial'},
Oi:{pre:'O',sub:'i',name:'O interstitial',color:'#fbbf24',qHi:0,qLo:-2,eps:1.20,E0:4.4,dMu:-3.6,kind:'interstitial'},
};
```
qHi valid for EF cutoff, and I only bond Zn–O pairs anyway. O–O ~3.2. OK.

Atoms count: cells 3·3·2=18 ×4 = 72 atoms. Bonds: interior Zn has 4 bonds; total ~ 4·36/2... Zn count 36, each 4 bonds → 144 bonds minus surface dangling (surface Zn have fewer O neighbors present) → maybe ~120 cylinders. Fine.

Ghost geometry per vacancy created on the fly.

Interstitial sites: for cells (i,j,k) site frac (0,0,k+0.30) and (0,0,k+0.80)? Check overlaps: atoms at frac (1/3,2/3,0) etc — (0,0,z) never coincides. Distance from (0,0,z) to nearest atoms ~? Zn at (1/3,2/3,0): lateral distance = |1/3·a1 + 2/3·a2| = compute: a1/3+2a2/3 = (3.25/3 + 2·(−1.625)/3, 2·2.814/3) = (1.083−1.083, 1.876) = (0,1.876). So 1.88 Å lateral → interstitial at (0,0,0.3·5.21=1.56) is ~1.88+ away from atoms → good, ~2.2-2.4 Å actual. OK use phases 0.3 and 0.8? Distance to O at (1/3,2/3,0.3825·5.21=1.99): (0,0,1.56)→ dz .43, lateral 1.88 → 1.93 Å — bit close visually (atoms 0.6-0.7 radius sum 1.3 → ok gap). Fine.

Sites list: for i in 0..2, j in 0..2, k in 0..1, phases [0.30,0.80] → 36 sites; track used.

Also allow clicking empty space for interstitial: any pointerup with little drag while mode is interstitial → add.

Mode buttons UI: 4 buttons with color dot + KV symbol + name; active ring. Below: per-type rows with count and +/− buttons. Hmm that's redundant; merge: rows ARE the mode selectors? Keep both: mode select row (for clicking) and a compact counts panel with +/−. Actually simplify UX: 4 cards (grid 2x2): each shows KV symbol big, name, count, click card = select mode (ring highlight), small "+/−" buttons inside card (stopPropagation). Clean.

Net type chip + reset button row above or below cards.

Reaction log panel below canvas, fixed height, mono.

Right column: PL panel: header row (title + LIVE dot + CSV btn), canvas h-44 (176px) + sweep overlay, bottom row: swatch (flex-1) + readouts (λpeak, dominant band, RGB?). Then FE/band panel: tab buttons + mu toggle (only relevant to FE; show always, greyed in band mode? keep always — it's a global condition; also could affect nothing in band diagram; fine, put toggle inside FE tab area? Simpler: place toggle in panel header next to tabs; note in caption). Fermi slider row: label "E_F", slider, value readout "2.95 eV (0.27 below CBM)" and charge chips row.

Actually charge chips relate to band/FE; put chips under slider. Good.

Charge chips: `V_O^{0}` etc with color dot.

DOM ids: crystalWrap, plCanvas, feCanvas, bandCanvas, efSlider, efVal, chipsRow, reactionLog, countVO... I'll generate cards via JS to reduce HTML repetition. Yes — build defect cards in JS.

Tabs: tabFe, tabBand buttons; canvases container relative; toggle .hidden.

mu toggle: two buttons Zn-rich / O-rich.

Alright, also small detail: FE plot label kinks: at each defect eps, draw small open circle on its line. And charge label near segments? e.g., "+2" above line left of kink, "0" right. Add tiny text — do it: at eps±0.5 offset, y from formula +offset. Might overlap; acceptable.

Time to write final code. I'll aim for completeness and correctness over brevity. Watch out for:

- Template literals with `_{` inside innerHTML — fine.
- Three.js: THREE.CylinderGeometry default along Y; orient via quaternion setFromUnitVectors(up, dir.normalize()).
- renderer.setPixelRatio.
- OrbitControls: THREE.OrbitControls global from examples/js build.
- All DOM queries after DOMContentLoaded (script at end of body anyway).

PL intensity function:

```js
function peaks(){...}
function intenAt(w){ // w nm
let s=0;
for(const p of plPeakCache){ const wl=1240/p.E; const sig=1240*p.w/(p.E*p.E); s+=p.A*Math.exp(-0.5*((w-wl)/sig)**2);}
return s;
}
```
Recompute cache on counts change. Autoscale: find max over 350..750 → scale.

peak λ readout: λ of global max.

Dominant band name: which peak contributes max at that λ — track.

Band canvas arrows alpha: aNBE=A_nbe scaled, etc. Normalize arrow alphas by max peak (excluding NBE?) Use normalized PL: alpha_i = 0.25+0.75·(A_i/A_maxAll). NBE arrow violet color (#8b5cf6-ish via waveRGB(380)).

Let me now write out everything.

Also: I should double check `OrbitControls` r128 examples/js URL on jsdelivr: https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js — I'm fairly confident this exists (the examples/js folder existed until r147 deprecated, removed in r148). And cdnjs r128 three.min.js definitely exists. Use those.

Alternative safer: unpkg three@0.128.0/build/three.min.js and .../examples/js/controls/OrbitControls.js. I'll use cdnjs for three + jsdelivr for controls.

Fonts:
```html

```

Now writing the full HTML. I'll be meticulous with the draw functions.

Also remember interactions:
```js
feCanvas pointer events: drag → EF = xToEF clamp [0,3.37]
bandCanvas: drag → EF = yToE clamp
slider input → EF
```
updateFromEF(): redraw fe, band, chips, efVal text.

Counts change → redraw PL + band + fe? FE doesn't depend on counts. PL + band arrows + swatch + cards' counts + net chip + reaction log.

Reset: restore all atoms/bonds, remove ghosts/interstitials, counts=0, log "lattice restored".

Let me also add a subtle background: CSS body background with radial gradients + a faint hex pattern? Use layered gradients; plus a fixed inset grid via repeating-linear-gradient at low opacity.

Panel entrance: CSS animation fadeUp applied with staggered animation-delay via inline style.

Let me make sure the reaction log: height ~ 3 lines, scrollable, newest on top, each entry colored, with time? Use step counter "step 004". Nice instrument vibe: prefix with index.

Write CSV button handler.

OK also the "charge neutrality / net type" chip: from EF:
EF>=2.4: "n-type regime — donors ionized, e⁻ in CB" hmm if EF high donors neutral... The statement "n-type regime" from EF position is fine: EF near CBM ⇔ n-type. Text:
- EF > 2.4 → "n-type (E_F near CBM)"
- EF < 1.0 → "p-type (E_F near VBM)"
- else → "near-intrinsic / compensated"
Add tooltip title.

Also in FE panel a readout: "at E_F: dominant = V_O^{0}, E_f = 4.7 eV" line. Good — put in chips row? Put as small mono text right of mu toggle. Place under slider: "lowest-E_f defect: ...".

Let me count vertical space in right column: PL panel ~ 250px; tab panel: header 40 + canvas 260 + slider row 46 + chips 30 + caption ~ 40 → ~ 420. Total ~ 690 + gaps. Left column: header 30 + canvas 460 + cards ~ 120 + log ~ 70 + caption 40 → ~ 720. OK for typical screens; page scrolls anyway.

Mobile: grid-cols-1 stacks. Fine.

Now write it. I'll write the code in one pass, mentally checking syntax.

Key drawing functions detail:

drawFE():
```js
const ctx=fit(feCanvas); const W=feCanvas.clientWidth,H=feCanvas.clientHeight;
geom: L=48,R=12,T=14,B=30; xmin=0,xmax=3.37,ymin=-1.5,ymax=9;
x=e=>L+(e-xmin)/(xmax-xmin)*(W-L-R);
y=e=>T+(ymax-e)/(ymax-ymin)*(H-T-B);
bg grid: for ef=0..3 vertical lines; for e=-1..9 horizontal every 1, stronger at 0.
shade region y(0)..y(-1.5) rgba(244,63,94,.06) + dashed line at 0 + label "E_f<0: spontaneous".
for each defect: stroke path EF 0..3.37 step .02: efv=efAt; moveTo/lineTo; strokeStyle color; lineWidth 2; shadowBlur? small glow via ctx.shadowColor=color shadowBlur=6.
kink circle at (x(eps), y(E0mu)).
charge labels: text qHi at x(eps)-12 left side, y at efAt(eps-0.45)+(-8); qLo right.
Fermi vertical: x(EF) dashed white; dominant defect: compute min → label top-left inside: "min E_f: V_O^0 · 4.70 eV" mono.
axis labels: y-axis rotated "E_f (eV)"; x-axis "Fermi level E_F (eV)"; tick "0=VBM" left "CBM" right.
VBM/CBM shading: shade left edge 0..0? Add small gradient bars at x(0) labelled E_V and x(3.37) E_C. Draw thin vertical accent lines at 0 and 3.37 (slate).
```

drawBand():
```js
geom: L=54,R=104,T=16,B=28; emin=-0.65,emax=3.95.
y=e=>T+(emax-e)/(emax-emin)*(H-T-B);
CB rect: y(3.95)..y(3.37) fill gradient slate→transparent; VB rect y(0)..y(-0.65).
hatch electrons in VB? draw subtle horizontal lines.
labels: "E_C" at y(3.55) left, "E_V" at y(-0.2), "E_g = 3.37 eV" right.
defect levels: for each defect: y(eps) dashed line color; label right: kv + ε value; alpha by count>0 ? 1 : .45; lineWidth count>0?2.5:1.5.
EF line: y(EF) solid #fff width 1.5, label "E_F" left + value; glow.
arrows: ax positions: x1=W*0.30 (NBE: 3.37→0, color violet #a78bfa, λ=376nm), x2=W*0.55 (3.37→1.10 VZn green: ΔE 2.27→546), x3=W*0.78 (3.37→1.20 Oi yellow: 2.17→571). Hmm x2,x3 arrows end at nearly same y (1.1,1.2) fine.
alpha: from PL peaks normalized (exclude NBE from max? include). arrowhead at bottom; dashed? solid with shadowBlur 8 color. Label λ near middle: "376 nm" etc + "green"/"yellow".
Also small label "ΔE≈2.27 eV".
```

Arrow draw helper:
```js
function arrow(ctx,x,y1,y2,color,alpha){...line + triangle head at y2 pointing down}
```

PL draw:
```js
geom: L=42,R=14,T=10,B=24; wmin=350,wmax=750;
compute maxI sampling 1nm; if maxI<1e-6 maxI=1 (all zero? NBE always >0 since counts damping only → fine, NBE always present).
fill path with spectral gradient; stroke white 1.5; grid; x ticks 400,450,...,700 labels; y label "I (a.u.)".
peak marker: dot at (λmax,1) + label "λ_peak 512 nm".
```

Swatch update: composite → style background/boxShadow; text readouts.

Charge chips: for each DEF: q=chargeAt(EF) → html chip.

Dominant defect readout in FE area: I'll put as div id="domLabel" under tabs header (right side).

Reaction entries: function logRxn(html,color).

Init: create defect cards; add initial defects silently (with log entries): addDefect('VO')×2, 'VZn', 'Zni' — each logs. EF=3.1 default; slider value 3.1.

Slider: min 0 max 3.37 step 0.01.

Fit canvases on resize: window resize listener → redraw all (fit uses clientWidth; canvas has CSS width 100%).

Three.js sizing: renderer.setSize(clientWidth, clientHeight) with false; handle resize.

Edge: OrbitControls attaches to renderer.domElement; pointer events for click on same element — our pointerdown/up on renderer.domElement.

Let me also prevent context menu.

Right — one more check of physics story for defaults: EF=3.1, mu Zn-rich:
- VO: EF>2.0 → q=0, Ef=4.7 (high)
- VZn: EF>1.1 → q=−2, Ef=3.8−2·(3.1−1.1)=3.8−4.0=−0.2 → negative! dominant & spontaneous → caption point ✓
- Zni: EF>3.05 → q=0, Ef=6.9
- Oi: q=−2, Ef=4.4−2·1.9=0.6
Dominant: VZn^{2−} at −0.2 eV → "spontaneous compensation — origin of n-type ceiling".

Under Zn-rich at EF=3.1... hmm actually literature: under Zn-rich n-type, V_Zn formation energy ~0.5-1 eV or negative — yes story holds ("killer" compensating acceptor).

Default EF maybe 1.6 (mid-gap) shows VO^{2+} dominant 0.7+... wait efAt VO at 1.6: q=+2, E0=4.7, Ef=4.7+2·(1.6−2.0)=4.7−0.8=3.9?? Hold on: Ef = E0 + q(EF−eps) = 4.7+2(1.6−2)=3.9. But earlier I computed line 0.7+2EF → at 1.6: 3.9 ✓ consistent (I mis-quoted earlier "0.5+2EF" — recompute: E0_2=4.7−4=0.7, line 0.7+2·1.6=3.9). Hmm so at VBM VO^{2+} is 0.7 eV and rises with slope 2. At EF=1.6: 3.9. Zni^{2+}: 6.9−6.1+2·1.6=0.8+3.2=4.0. VZn^0=3.8, Oi^0=4.4. Dominant at mid-gap: V_Zn^0 (3.8) — all formation energies ~4 eV mid-gap, reasonable-ish (intrinsic ZnO all defects costly mid-gap → low intrinsic carrier conc ✓ good physics!).

At EF→0 (p-type attempt): VO^{2+}=0.7 dominant → donors compensate p-type ✓. At EF→CBM: VZn^{2−} → negative → compensates n-type... wait that says both? VZn compensates n-type (acceptor), VO compensates p-type (donor) — exactly the known "doping asymmetry" story of ZnO! The tool literally demonstrates Janotti–Van de Walle doping limits. Dad will be thrilled. I'll add this insight in the caption: "Note the doping asymmetry: E_F near VBM → V_O^{2+} cheapest (donor compensation); near CBM → V_Zn^{2−} drops below zero (acceptor compensation)."

Set default EF = 0.35 to show VO^{2+} low? Default 3.1 shows negative Ef drama. Keep 3.1.

Hmm, at EF=3.37, VZn: 3.8−2·2.27=−0.74. Earlier formula check: 6.0−2EF at 3.37 = −0.74 ✓.

Y-range −1.5..9: Oi line at EF=0: 4.4 ✓ visible; Zni^0 6.9 at EF 3.37 ✓; VO^0 at 4.7 ✓; O-rich VO^2+ at 4.3..? at EF0: 4.3 ok; O-rich Zni^2+ 4.4+... E0=10.5? Wait Zni dMu +3.6 → E0=10.5 → off chart (ymax 9) mostly; line clipped — fine, indicates unfavorable. VZn O-rich E0=0.2: at EF0 line 0.2, at 3.37: 0.2−2·2.27=−4.34 clipped below −1.5 → shows plunging off chart — dramatic ✓.

O_i O-rich: E0=0.8, EF=3.37: 0.8−2·2.17=−3.54 clipped ✓.

Great, the O-rich toggle tells the "O-rich growth suppresses V_O but promotes compensating acceptors" story.

Now — write it all. I'll now produce the final answer with the single HTML file. Length will be substantial (~900-1100 lines). That's fine.

Also small guard: `Math.exp` loops fine.

Let me make sure Tailwind classes used are standard. Custom CSS for slider thumbs.

Final check of script order at end of body:
```html

```

Write everything now. I'll include a brief intro line before the code block (one sentence), then the code. The user asked to "one-shot" it — deliver the file. Keep intro minimal.}} Here's a complete interactive **ZnO Point-Defect Workbench** — a 3D clickable wurtzite crystal, a simulated photoluminescence spectrometer that computes the actual glow color, formation-energy vs. Fermi-level diagrams (Janotti–Van de Walle style), and Kröger–Vink reaction logging. Save as `zno.html` and open in any browser: ```html ZnO Defect Lab — Interactive Point-Defect Workbench

ZnO Defect Lab

Interactive point-defect workbench · click the crystal, watch the luminescence change

wurtzite · P6₃mc E_g = 3.37 eV a = 3.25 Å · c = 5.21 Å LIVE · He–Cd 325 nm excitation

Crystal Studio

drag = rotate · scroll = zoom · click atom = create defect

● Zn ● O

Reaction log · Kröger–Vink notation

Fig. 1 — Wurtzite ZnO supercell (3×3×2, 72 atoms). Vacancies appear as pulsing wireframe ghosts; interstitials occupy the open hexagonal channels along the c-axis.

Photoluminescence Spectrometer

Sample under UV lamp

λ_peak = —

dominant band: —

NBE quenched by defects; visible bands ∝ defect population

Fig. 2 — Simulated 300 K PL. Violet ≈ 420 nm (Zn_i), green ≈ 510 nm (V_O/V_Zn — assignment still debated), yellow ≈ 585 nm (O_i), red ≈ 670 nm (V_Zn).

growth:

E_F

Fig. 3/4 — Slope of E_f(E_F) = defect charge state q. Note the doping asymmetry: E_F near E_V → V_O^•• cheapest (donor compensation); near E_C → V_Zn^″ plunges below zero (acceptor compensation) — the classic p-type ZnO bottleneck. Drag E_F on either plot.

``` **What it does — the tour for your dad:** - **Fig. 1 — Crystal Studio:** A rotatable 3×3×2 wurtzite supercell. Click an O atom → V_O appears as a pulsing ghost; click Zn → V_Zn; interstitials pop into the open c-axis hexagonal channels. Every creation logs the correct **Kröger–Vink reaction**. - **Fig. 2 — PL Spectrometer:** Live spectrum where violet/green/yellow/red bands scale with the *actual* defect populations you created, NBE quenches accordingly, and the swatch computes the **perceived glow color** by integrating the spectrum against a wavelength→RGB response. Exports CSV. - **Fig. 3 — Formation energies:** E_f vs. E_F with slope = q, kinks at ε(q/q′), and a **Zn-rich/O-rich toggle** demonstrating chemical-potential bounds. It literally reproduces the doping-asymmetry argument: V_Zn^″ goes *negative* near E_C (spontaneous acceptor compensation → the p-type bottleneck), while V_O^•• kills p-type attempts near E_V. - **Fig. 4 — Band diagram** with draggable Fermi level, negative-U transition levels, and emission arrows whose brightness tracks the PL. All parameters are flagged as representative with the Janotti–Van de Walle PRB **76**, 165202 (2007) citation baked into the footer.

One-shot a full extremely impressive website/simulation/tool...