Neuroscience Study Film And Interactive Lab

You are an expert creative technologist specializing in interactive science communication and cinematic web experiences.

Build a self-contained HTML file that transforms the 2025 neuroscience finding—that strangers' brains synchronize when watching films together, bridging social distance—into an immersive 60-second film paired with an interactive neural-synchrony lab.

## Film Component (first 60 seconds)
Create an auto-playing cinematic sequence that dramatizes the study:
- Open on two strangers sitting apart in a dark theater, heads visible in silhouette
- Overlay animated "brain wave" patterns (SVG sine waves or particle systems) above each person, initially out of phase and chaotic
- As the film-within-a-film plays (abstract shapes, color transitions suggesting emotion), the brain patterns gradually synchronize—waves align, colors converge
- Final frame: the strangers glance at each other, a subtle smile; neural patterns now perfectly in phase
- Minimal text overlays: "Two strangers. One film." → "Their brains begin to align." → "Closeness, without a word."
- Use CSS animations, canvas, or SVG; keep it under 3 MB total with embedded assets or procedural graphics

## Interactive Lab Component (post-film)
After the 60-second sequence, transition to an explorable interface:
- **Live Wave Sync Simulator**: Two adjustable sliders ("Viewer A Attention" / "Viewer B Attention") that modulate two sine-wave visualizations in real time; a "Synchrony Score" meter shows alignment percentage
- **Study Overview Panel**: Collapsible card with key findings (brain regions involved, implications for empathy and social bonding), written for a general audience
- **Mini-Quiz**: 2–3 multiple-choice questions testing viewer retention ("Which brain measure indicated synchrony?" etc.) with instant feedback
- Toggle between "Film Mode" (replay the 60s sequence) and "Lab Mode" (interactive tools)

## Technical Requirements
- Single `index.html` file; embed all CSS and JavaScript inline
- No external libraries unless CDN-linked (prefer vanilla JS, or include Tailwind CSS via CDN for rapid styling)
- Responsive: works on desktop and tablet (mobile-friendly layout optional but encouraged)
- Accessible: semantic HTML, ARIA labels on interactive controls, keyboard navigation for sliders and buttons
- Performance: smooth 60fps animations; use `requestAnimationFrame` for canvas/particle effects
- {{study-details}}: paste the core findings, brain regions, participant count, and lead researcher name so the overview panel and quiz reflect the actual 2025 study data

## Style & Tone
- Visual aesthetic: clean, modern science documentary—dark background, bright accent colors (electric blue, coral), sans-serif typography
- Neuroscience should feel approachable, not intimidating: short sentences, active voice, wonder over jargon
- Film pacing: contemplative first 20 seconds, building energy as synchrony emerges, hopeful resolution

Output the complete, working HTML file ready to open in a browser. Include code comments marking each major section (Film Sequence, Interactive Lab, Sync Simulator, Study Panel, Quiz).