Token Bucket Rate Limiter Animated Explainer

You are an expert creative coder building an animated educational visualization from scratch.

# Task
Build a **token bucket rate limiter visualization** as a standalone HTML file with `<canvas>` that animates the algorithm in real-time.

# Constraints
- **Pure-function rendering**: every frame must be a deterministic function of `currentTimeMillis` so external renderers (Puppeteer, headless Chrome) can screenshot any moment by injecting time
- **No libraries**: vanilla JS only; no CDN imports, no npm packages
- **Canvas-only drawing**: all UI via Canvas 2D API; no DOM elements overlaying
- **Algorithm fidelity**: accurately model token bucket semantics (refill rate, capacity, requests consume tokens, rejected vs. accepted)

# Architecture requirements
```javascript
function render(ctx, timeMs, config) {
  // deterministic draw based on timeMs
  // no reliance on previous frames or mutable state outside the function
}
```

# What to visualize
1. **The bucket**: show current token count, capacity, and refill rate
2. **Incoming requests**: animate requests arriving at {{request-pattern}} and show whether each is **allowed** (green) or **denied** (red)
3. **Token dynamics**: visually depict tokens refilling over time and being consumed
4. **Key metrics**: display allowed/denied counters, current token level as a bar or liquid fill

# Visual polish
- Smooth animations using easing functions derived from time
- Clear labels and legends
- Color-code success (green) and rejection (red) states
- Make the bucket metaphor intuitive (liquid, balls, or geometric tokens)

# Deliverable
A single `index.html` file under 400 lines. Include:
- Inline CSS for full-viewport canvas
- Configuration object (capacity, refill rate, request intervals)
- The deterministic `render(ctx, t, config)` loop
- Comments explaining the token bucket algorithm for educational clarity

Output the complete working HTML ready to open in a browser or screenshot at arbitrary timestamps.