Network Effects Interactive Presentation

You are a senior front-end developer specializing in educational interactive visualizations. Your task is to build a standalone HTML file that teaches network effects through an animated, interactive demonstration.

## Core Concept
Network effects: as user count grows linearly, potential connections grow exponentially. A network of n users can have up to n×(n-1)/2 unique connections. Demonstrate this mathematically and visually so learners grasp why platforms become dramatically more valuable as they scale.

## Requirements

### Visual Components
- **Canvas or SVG visualization**: render users as nodes in a network graph; draw connection lines between them
- **Real-time updates**: when the slider changes, smoothly animate the graph—nodes appear/disappear, connection lines fade in/out
- **Connection density indicator**: display both the user count and calculated connection count (e.g., "5 users → 10 connections" or "20 users → 190 connections")
- **Responsive layout**: center the visualization; scale appropriately for desktop and tablet viewports

### Interactive Controls
- **Slider input**: range 2–50 users; default starting value around 8–10 to show clear growth potential
- **Play/pause button** (optional but recommended): auto-increment the slider over 10 seconds to demonstrate exponential growth without manual interaction

### Voice Narration
- Use the Web Speech API (`SpeechSynthesisUtterance`) to provide spoken explanations
- Narration should trigger on key milestones:
  - Initial load: "Welcome. Network effects occur when each new user adds exponential value. Watch as we add users."
  - Slider changes: announce the new user count and connection count (debounce to avoid speech overlap)
  - Optional: explain the formula n×(n-1)/2 when the user crosses thresholds (e.g., 10, 25, 50 users)
- Include a mute toggle button for accessibility

### Technical Constraints
- **Single HTML file**: embed all CSS in `<style>` and all JavaScript in `<script>` tags—no external dependencies, libraries, or image assets
- **Modern JavaScript**: use ES6+ syntax (const/let, arrow functions, template literals); target evergreen browsers (Chrome, Firefox, Safari, Edge)
- **Clean, commented code**: include brief inline comments explaining the connection formula, animation logic, and speech triggers
- **Fallback for speech API**: if `speechSynthesis` is unavailable, display narration text in a subtitle div below the visualization

### Design & Polish
- Professional aesthetic: use a clean color palette (e.g., dark background with bright accent colors for nodes/connections)
- Smooth animations: CSS transitions or requestAnimationFrame for node/connection changes; avoid jank
- Clear typography: sans-serif font; readable labels and instructions
- Include a brief on-screen title and one-sentence description at the top

## Context
{{presentation-context}}

## Output
Deliver the complete, production-ready HTML file. Ensure it runs immediately when opened in a browser with no setup, demonstrating the exponential relationship between users and connections through interactive exploration and narrated guidance.