The user wants me to create a single-page web app with:
- 20 numbered balls (1-20) dropping from the center of a heptagon
- The heptagon spins 360 degrees every 5 seconds
- Balls affected by gravity and friction
- Balls collide with each other
- Balls bounce off rotating walls realistically
- Each ball shows its spin via rotation of its number
- All collision detection implemented myself
- Single self-contained index.html file
- No external resources, no network

Let me think about this carefully:

1. **Heptagon geometry**: A regular heptagon has 7 sides. I need to compute the vertices and edges, then check ball-edge collisions.

2. **Rotation**: The heptagon rotates 360° per 5 seconds = 72°/s = 2π/5 rad/s.

3. **Ball physics**: 
   - Gravity (e.g., 500 px/s² downward)
   - Friction (air resistance + wall friction)
   - Inter-ball collisions (elastic or slightly inelastic)
   - Wall collisions (reflect velocity, apply restitution)

4. **Ball-wall collision with rotating wall**: When a ball hits a wall that's moving tangentially, the wall's velocity at the contact point should be added. Reflection across the wall normal, then account for relative velocity.

5. **Ball-ball collision**: Circle-circle collision. Compute normal between centers, separate them, exchange velocity components along normal.

6. **Number rotation**: Each ball has an angular velocity that changes based on collisions (friction with walls and other balls).

7. **Self-implementation**: I cannot use any physics library. I need to implement everything from scratch.

Let me design the canvas size: 800x800 or so. Heptagon centered, fits inside.

Let me compute heptagon vertices:
- Center at (cx, cy), radius R
- Vertices: (cx + R*cos(θ_i), cy + R*sin(θ_i)) for θ_i = -π/2 + i*2π/7

For ball-wall collision:
- For each edge, compute the line segment. Find closest point on the line segment to the ball center. If distance < ball.radius, collision.
- The normal is from the closest point to the ball center.
- Move the ball out of the wall.
- Reflect velocity: v' = v - 2(v·n)n (for stationary wall)
- For rotating wall: the wall's velocity at contact point = ω × r (perpendicular to r). Adjust the relative velocity, reflect, then add wall velocity back.

The heptagon rotates as a rigid body. Each point on the heptagon has velocity = ω × (point - center), which in 2D is (-ω*(y-cy), ω*(x-cx)).

For ball-ball collision:
- Distance between centers < sum of radii? Collision.
- Normal = (center2 - center1) / distance
- Relative velocity along normal
- If approaching, separate them by half overlap each, then exchange momentum along normal

Let me write this all out:

```javascript
// Constants
const WIDTH = 800, HEIGHT = 800;
const CX = WIDTH/2, CY = HEIGHT/2;
const HEPT_RADIUS = 350; // circumradius
const GRAVITY = 800; // px/s²
const BALL_RADIUS = 18;
const RESTITUTION = 0.65;
const FRICTION = 0.998;
const WALL_FRICTION = 0.85;
const ROTATION_SPEED = 2 * Math.PI / 5; // rad/s
const MAX_BALLS = 20;

// Heptagon state
let heptAngle = 0;

// Balls
let balls = [];
for (let i = 1; i <= 20; i++) {
  balls.push({
    id: i,
    x: CX + (Math.random() - 0.5) * 20,
    y: CY + (Math.random() - 0.5) * 20,
    vx: (Math.random() - 0.5) * 50,
    vy: (Math.random() - 0.5) * 50,
    angle: 0,
    angularVel: (Math.random() - 0.5) * 2,
    radius: BALL_RADIUS,
    color: `hsl(${(i * 17) % 360}, 70%, 60%)`
  });
}
```

Now physics step:
1. Apply gravity: vy += GRAVITY * dt
2. Apply friction (air): vx *= FRICTION, vy *= FRICTION
3. Update positions
4. Compute heptagon vertices (current rotation)
5. For each ball, check wall collisions, resolve
6. For each pair of balls, check collisions, resolve
7. Update ball angles (visual spin)

Wall collision for ball with heptagon edge:
- Edge: from v1 to v2 (in world coords)
- Find closest point on segment to ball center
- d = ball.pos - closestPoint
- dist = |d|
- if dist < ball.radius:
   - normal = d / dist
   - penetration = ball.radius - dist
   - ball.pos += normal * penetration
   - Wall velocity at closestPoint: wallVel = ω × (closestPoint - center) = (-ω*(closestPoint.y - CY), ω*(closestPoint.x - CX))
   - Relative velocity: vRel = ball.vel - wallVel
   - vRelNormal = vRel · normal
   - if vRelNormal < 0: // approaching
       - Reflect: vRelNew = vRel - (1 + RESTITUTION) * vRelNormal * normal
       - Apply tangential friction: 
         tangent = (-normal.y, normal.x)
         vTan = vRel · tangent
         vTanNew = vTan * WALL_FRICTION
         vRelNew = vRel - (vRel - vRelNew) tangent... 
         Actually: vRelNew = vNormalReflected + vTanNew * tangent
         where vTanNew = vTan * WALL_FRICTION
       - ball.vel = vRelNew + wallVel
       - Also affect angular velocity due to friction

Let me think about the angular update for the ball spin:
- When ball hits wall, the tangential friction imparts angular velocity
- dω = (vRelTan_after - vRelTan_before) / radius (or similar)

I'll add: ball.angularVel += (vTan - vTanNew) / ball.radius * something. Sign convention matters here.

Actually let's simplify. The ball's spin can be triggered by:
- Wall friction: the ball slides along the wall, friction between ball surface and wall creates rotation
- Ball-ball collision: similar effect

For wall: when the ball is moving tangentially, the friction slows it down and rotates the ball.
dω = (delta_tan_velocity) / radius

Let me write:
```
const tangent = { x: -normal.y, y: normal.x };
const vTanBefore = vRel.x * tangent.x + vRel.y * tangent.y;
const vTanAfter = vTanBefore * WALL_FRICTION;
ball.angularVel += (vTanBefore - vTanAfter) / ball.radius; // approximation
// or with proper sign for rotation direction
```

Hmm, the sign. If ball moves in +tangent direction (slides forward), and wall is below it, friction acts in -tangent direction on the ball. This causes ball to spin in a direction that... if wall is below ball, +tangent to right means top moves right, bottom stays (friction), so rotation is clockwise in standard coords (in screen coords y is flipped).

Actually, for visual purposes, I want the number to rotate based on the ball's spin. Let me just track angularVel in radians/sec and rotate the number accordingly.

```
ball.angle += ball.angularVel * dt;
ball.angularVel *= 0.99; // damping
```

For ball-ball collisions:
```
const dx = b2.x - b1.x, dy = b2.y - b1.y;
const dist = Math.hypot(dx, dy);
const minDist = b1.radius + b2.radius;
if (dist < minDist && dist > 0) {
  const nx = dx / dist, ny = dy / dist;
  const overlap = minDist - dist;
  // separate
  b1.x -= nx * overlap / 2;
  b1.y -= ny * overlap / 2;
  b2.x += nx * overlap / 2;
  b2.y += ny * overlap / 2;
  // relative velocity
  const rvx = b2.vx - b1.vx, rvy = b2.vy - b1.vy;
  const velAlongNormal = rvx * nx + rvy * ny;
  if (velAlongNormal < 0) {
    const e = RESTITUTION;
    const j = -(1 + e) * velAlongNormal / 2; // equal masses
    b1.vx -= j * nx; b1.vy -= j * ny;
    b2.vx += j * nx; b2.vy += j * ny;
    // friction-induced spin
    const tangent = { x: -ny, y: nx };
    const relTan = rvx * tangent.x + rvy * tangent.y;
    b1.angularVel -= relTan / b1.radius * 0.3;
    b2.angularVel += relTan / b2.radius * 0.3;
  }
}
```

Now the heptagon drawing. Vertices at angles:
```
function heptVertices(angle) {
  const verts = [];
  for (let i = 0; i < 7; i++) {
    const a = angle + i * 2 * Math.PI / 7 - Math.PI/2;
    verts.push({
      x: CX + HEPT_RADIUS * Math.cos(a),
      y: CY + HEPT_RADIUS * Math.sin(a)
    });
  }
  return verts;
}
```

Wait, if I use cos and sin with screen coords (y down), then -π/2 puts the first vertex at the top. Good.

For drawing the heptagon, I'll fill it and stroke it.

I want the balls to drop from the center, but the heptagon is the container. Let me have them start near center with small random offsets and small initial velocities so they spread out as they fall.

Let me also have a "drop" button or just continuous spawn? The user said "20 numbered balls (1 to 20) dropping from the center". So I'll spawn all 20 at the start, with small staggered times or all at once.

Actually, "dropping from the center" suggests they fall from center. Let me spawn them all at start, perhaps with small initial spread and random velocities. Gravity will pull them down, the spinning heptagon walls will redirect them.

I'll add a "Reset" button to restart, and maybe a slider for spin speed.

Let me design the visuals:
- Background: dark blue/black
- Heptagon: outlined, semi-transparent fill, maybe with glow
- Balls: bright colors with white numbers
- Number rotates with ball spin

Let me write the full code now.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spinning Heptagon Ball Pit</title>
<style>
  * { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #1a1f3a 0%, #05060f 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #fff;
    overflow: hidden;
  }
  h1 {
    margin: 10px 0;
    font-weight: 300;
    letter-spacing: 4px;
    font-size: 18px;
    color: #aab;
  }
  .wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  canvas {
    background: #0a0d20;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(80,120,255,0.25), inset 0 0 80px rgba(0,0,0,0.6);
    display: block;
  }
  .controls {
    margin-top: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
  }
  button, input[type=range] {
    background: #1c2244;
    color: #dde;
    border: 1px solid #3a4480;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
  }
  button:hover { background: #2a3270; }
  label { font-size: 13px; color: #99a; }
</style>
</head>
<body>
<h1>SPINNING HEPTAGON · 20 BALLS</h1>
<div class="wrap">
  <canvas id="c" width="780" height="780"></canvas>
  <div class="controls">
    <label>Spin: <input type="range" id="spin" min="0" max="100" value="72"><span id="spinVal">72°/s</span></label>
    <label>Gravity: <input type="range" id="grav" min="0" max="2000" value="900"><span id="gravVal">900</span></label>
    <button id="reset">Reset Balls</button>
    <button id="drop">Drop More</button>
  </div>
</div>
<script>
(() => {
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  const W = canvas.width, H = canvas.height;
  const CX = W/2, CY = H/2;
  const HEPT_R = 340;
  const BALL_R = 19;
  const RESTITUTION = 0.72;
  const WALL_FRICTION = 0.78;
  const AIR_DRAG = 0.999;
  const ANG_DAMP = 0.985;

  let spinDeg = 72; // deg/s
  let gravity = 900;

  const balls = [];
  let nextId = 1;
  let heptAngle = 0;
  let lastT = performance.now();

  function spawnBall(x, y) {
    balls.push({
      id: nextId++,
      x: x + (Math.random() - 0.5) * 10,
      y: y + (Math.random() - 0.5) * 10,
      vx: (Math.random() - 0.5) * 80,
      vy: (Math.random() - 0.5) * 80,
      angle: Math.random() * Math.PI * 2,
      angVel: (Math.random() - 0.5) * 4,
      r: BALL_R,
      color: `hsl(${(nextId * 23 + 200) % 360}, 75%, 62%)`
    });
  }

  function resetBalls() {
    balls.length = 0;
    nextId = 1;
    for (let i = 0; i < 20; i++) {
      spawnBall(CX, CY);
    }
  }

  resetBalls();

  function heptVerts() {
    const v = [];
    for (let i = 0; i < 7; i++) {
      const a = heptAngle + i * 2 * Math.PI / 7 - Math.PI/2;
      v.push({x: CX + HEPT_R * Math.cos(a), y: CY + HEPT_R * Math.sin(a)});
    }
    return v;
  }

  function closestPointOnSegment(p, a, b) {
    const abx = b.x - a.x, aby = b.y - a.y;
    const apx = p.x - a.x, apy = p.y - a.y;
    const ab2 = abx*abx + aby*aby;
    let t = (apx*abx + apy*aby) / ab2;
    t = Math.max(0, Math.min(1, t));
    return { x: a.x + abx*t, y: a.y + aby*t, t };
  }

  function wallPointVel(px, py, omega) {
    // ω in +z (CCW in standard math, CW in screen). For positive omega = CCW rotation in screen coords (since y is flipped, but CCW math = CW visual). Whatever, just use formula:
    // v = ω × r = (-ω * (py - CY), ω * (px - CX))
    return { vx: -omega * (py - CY), vy: omega * (px - CX) };
  }

  function resolveWallCollisions(ball, verts, omega, dt) {
    for (let i = 0; i < 7; i++) {
      const a = verts[i], b = verts[(i+1) % 7];
      const cp = closestPointOnSegment(ball, a, b);
      const dx = ball.x - cp.x, dy = ball.y - cp.y;
      let dist = Math.hypot(dx, dy);
      if (dist < ball.r && dist > 1e-6) {
        const nx = dx/dist, ny = dy/dist;
        const pen = ball.r - dist;
        ball.x += nx * pen;
        ball.y += ny * pen;
        const wv = wallPointVel(cp.x, cp.y, omega);
        const rvx = ball.vx - wv.vx, rvy = ball.vy - wv.vy;
        const vN = rvx*nx + rvy*ny;
        if (vN < 0) {
          // reflect normal component
          const jN = -(1 + RESTITUTION) * vN;
          let nvx = rvx + jN * nx;
          let nvy = rvy + jN * ny;
          // tangent friction
          const tx = -ny, ty = nx;
          const vT = rvx*tx + rvy*ty;
          const vT2 = vT * WALL_FRICTION;
          nvx += (vT2 - vT) * tx;
          nvy += (vT2 - vT) * ty;
          ball.vx = nvx + wv.vx;
          ball.vy = nvy + wv.vy;
          // induce spin from friction
          ball.angVel += (vT - vT2) / ball.r * 0.5;
        }
      } else if (dist <= 1e-6) {
        // edge case: push ball outward along segment direction
        const sx = -(b.y - a.y), sy = (b.x - a.x);
        const sl = Math.hypot(sx, sy);
        const nx = sx/sl, ny = sy/sl;
        ball.x = cp.x + nx * ball.r;
        ball.y = cp.y + ny * ball.r;
      }
    }
  }

  function resolveBallCollisions(dt) {
    for (let i = 0; i < balls.length; i++) {
      for (let j = i+1; j < balls.length; j++) {
        const a = balls[i], b = balls[j];
        const dx = b.x - a.x, dy = b.y - a.y;
        let dist = Math.hypot(dx, dy);
        const minD = a.r + b.r;
        if (dist < minD && dist > 1e-6) {
          const nx = dx/dist, ny = dy/dist;
          const overlap = minD - dist;
          a.x -= nx * overlap/2;
          a.y -= ny * overlap/2;
          b.x += nx * overlap/2;
          b.y += ny * overlap/2;
          const rvx = b.vx - a.vx, rvy = b.vy - a.vy;
          const vN = rvx*nx + rvy*ny;
          if (vN < 0) {
            const e = RESTITUTION;
            const j = -(1 + e) * vN / 2;
            a.vx -= j * nx; a.vy -= j * ny;
            b.vx += j * nx; b.vy += j * ny;
            // friction at contact -> spin
            const tx = -ny, ty = nx;
            const vT = rvx*tx + rvy*ty;
            const damp = 0.5;
            a.angVel -= vT * damp / a.r;
            b.angVel += vT * damp / b.r;
          }
        } else if (dist <= 1e-6) {
          // separate arbitrarily
          a.x -= 0.5; b.x += 0.5;
        }
      }
    }
  }

  function step(dt) {
    const omega = spinDeg * Math.PI / 180; // rad/s
    heptAngle += omega * dt;
    
    for (const ball of balls) {
      ball.vy += gravity * dt;
      ball.vx *= AIR_DRAG;
      ball.vy *= AIR_DRAG;
      ball.x += ball.vx * dt;
      ball.y += ball.vy * dt;
      ball.angle += ball.angVel * dt;
      ball.angVel *= ANG_DAMP;
    }
    
    const verts = heptVerts();
    for (const ball of balls) {
      resolveWallCollisions(ball, verts, omega, dt);
    }
    resolveBallCollisions(dt);
  }

  function drawHeptagon(verts) {
    // fill
    ctx.beginPath();
    ctx.moveTo(verts[0].x, verts[0].y);
    for (let i = 1; i < 7; i++) ctx.lineTo(verts[i].x, verts[i].y);
    ctx.closePath();
    const grad = ctx.createRadialGradient(CX, CY, 50, CX, CY, HEPT_R);
    grad.addColorStop(0, 'rgba(40, 60, 130, 0.4)');
    grad.addColorStop(1, 'rgba(20, 30, 70, 0.15)');
    ctx.fillStyle = grad;
    ctx.fill();
    
    // stroke with glow
    ctx.save();
    ctx.shadowColor = 'rgba(100, 180, 255, 0.7)';
    ctx.shadowBlur = 20;
    ctx.beginPath();
    ctx.moveTo(verts[0].x, verts[0].y);
    for (let i = 1; i < 7; i++) ctx.lineTo(verts[i].x, verts[i].y);
    ctx.closePath();
    ctx.strokeStyle = 'rgba(140, 200, 255, 0.9)';
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.restore();
    
    // vertex dots
    for (const v of verts) {
      ctx.beginPath();
      ctx.arc(v.x, v.y, 5, 0, Math.PI*2);
      ctx.fillStyle = '#cde6ff';
      ctx.fill();
    }
  }

  function drawBall(b) {
    ctx.save();
    ctx.translate(b.x, b.y);
    // shadow
    ctx.beginPath();
    ctx.arc(2, 3, b.r, 0, Math.PI*2);
    ctx.fillStyle = 'rgba(0,0,0,0.4)';
    ctx.fill();
    // ball body with gradient
    const g = ctx.createRadialGradient(-b.r*0.4, -b.r*0.4, b.r*0.1, 0, 0, b.r);
    g.addColorStop(0, lighten(b.color, 30));
    g.addColorStop(1, b.color);
    ctx.beginPath();
    ctx.arc(0, 0, b.r, 0, Math.PI*2);
    ctx.fillStyle = g;
    ctx.fill();
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
    ctx.lineWidth = 1.5;
    ctx.stroke();
    
    // number (rotates with ball spin)
    ctx.rotate(b.angle);
    ctx.fillStyle = '#fff';
    ctx.font = 'bold 20px -apple-system, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.shadowColor = 'rgba(0,0,0,0.7)';
    ctx.shadowBlur = 3;
    ctx.fillText(b.id, 0, 1);
    ctx.shadowBlur = 0;
    ctx.restore();
  }

  function lighten(hsl, amount) {
    // hsl string like "hsl(x, y%, z%)"
    const m = hsl.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/);
    if (!m) return hsl;
    const h = +m[1], s = +m[2], l = Math.min(95, +m[3] + amount);
    return `hsl(${h}, ${s}%, ${l}%)`;
  }

  function draw() {
    // background
    ctx.fillStyle = 'rgba(8, 10, 25, 0.95)';
    ctx.fillRect(0, 0, W, H);
    // subtle grid
    ctx.strokeStyle = 'rgba(80,100,180,0.06)';
    ctx.lineWidth = 1;
    for (let i = 0; i <= W; i += 40) {
      ctx.beginPath();
      ctx.moveTo(i, 0); ctx.lineTo(i, H); ctx.stroke();
    }
    for (let i = 0; i <= H; i += 40) {
      ctx.beginPath();
      ctx.moveTo(0, i); ctx.lineTo(W, i); ctx.stroke();
    }
    
    const verts = heptVerts();
    drawHeptagon(verts);
    for (const b of balls) drawBall(b);
    
    // info
    ctx.fillStyle = 'rgba(180,200,255,0.5)';
    ctx.font = '11px monospace';
    ctx.textAlign = 'left';
    ctx.fillText(`Balls: ${balls.length}`, 12, H - 12);
    ctx.textAlign = 'right';
    ctx.fillText(`ω = ${spinDeg}°/s`, W - 12, H - 12);
  }

  function loop(now) {
    let dt = (now - lastT) / 1000;
    lastT = now;
    if (dt > 0.05) dt = 0.05; // clamp for stability
    // sub-step for stability
    const subSteps = 4;
    const sdt = dt / subSteps;
    for (let i = 0; i < subSteps; i++) step(sdt);
    draw();
    requestAnimationFrame(loop);
  }

  document.getElementById('spin').addEventListener('input', e => {
    spinDeg = +e.target.value;
    document.getElementById('spinVal').textContent = spinDeg + '°/s';
  });
  document.getElementById('grav').addEventListener('input', e => {
    gravity = +e.target.value;
    document.getElementById('gravVal').textContent = gravity;
  });
  document.getElementById('reset').addEventListener('click', resetBalls);
  document.getElementById('drop').addEventListener('click', () => {
    if (balls.length < 60) {
      spawnBall(CX, CY);
    }
  });
  
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>
```

Wait, I need to double-check the rotation direction. The heptagon spins 360 degrees every 5 seconds, so 72°/s. Direction wasn't specified, let me use positive (CCW in standard math, but in screen coords with y-down, it's actually CW visually). Either way is fine, the user said "spins 360 degrees every 5 seconds" so any direction.

Let me reconsider the angular velocity formula for the wall:
The wall is rotating about (CX, CY) with angular velocity ω (rad/s, positive = CCW in standard math, but in screen coords y-down means positive ω visually = CW).

A point at position (px, py) relative to center has velocity:
v = ω × r
In 2D, if ω = ω*k̂ (out of screen, +z), and r = (px-CX, py-CY, 0):
v = ω*k̂ × r = ω*(-(py-CY), px-CX, 0)

So vx = -ω*(py - CY)
   vy = ω*(px - CX)

In screen coords (y-down), positive ω means CCW rotation if we use standard math, but since y-axis is flipped, positive ω visually appears as CW rotation. That's fine for our purposes.

Let me also think about whether the ball could fall through the heptagon edges if it's moving very fast. With sub-stepping (4 sub-steps per frame at 60fps), each sub-step is ~4ms. At 900 px/s² gravity, after 1 second a ball could be moving at 900 px/s, traveling ~3.6 px in one sub-step. That's small enough not to tunnel. Should be fine.

For safety, I could also use continuous collision detection, but let's not over-engineer.

Let me also add a contact shadow for depth perception.

Now, the heptagon drawing has a stroke issue with shadow + closed path. Let me reconsider. Actually that should be fine.

One concern: when balls get really crowded, they may jitter. Let me add position correction (relaxation) — but for now, the simple approach should be okay.

Let me also think about ball-ball collision more carefully. With 20 balls in a relatively small heptagon (340px radius) and 19px radius balls, they will frequently collide. The collisions should be smooth.

Let me finalize and write the file.

Actually, let me reconsider the wall collision. When the ball is at the closest point exactly on the segment, my formula works. But what about when the ball center is outside the heptagon? The normal should still point inward (from wall to ball). Since I compute the normal as (ball - closestPoint), and the ball is outside, this points outward. So when I push the ball by the normal * penetration, I'm pushing it further out! That's wrong.

Wait, let me reconsider. The ball should be INSIDE the heptagon. The walls contain the ball. If the ball is outside, it should be pushed back in.

Hmm, actually if the ball is inside the heptagon and moving outward, and the wall is closer than the ball radius, then I compute:
- closestPoint on wall
- dx = ball.x - cp.x, dy = ball.y - cp.y

If the ball is inside the heptagon, this vector points from the wall toward the ball center, which is INWARD. So normal = (dx, dy) / dist points INWARD. When I push ball += normal * penetration, I push it further inward. That's correct!

If the ball is outside (penetration through the wall), the vector points outward. But this shouldn't happen with sub-stepping.

So the math works as long as we don't tunnel. Good.

Let me also reconsider ball-ball collisions. The normal points from ball1 to ball2 (since I compute b.x - a.x). When I separate: a moves away from b (in -normal direction), b moves away from a (in +normal direction). Correct.

OK let me finalize.

Oh, I should make sure the ball's spin (rotation of number) is visually apparent. Let me make sure the number rendering looks good even when rotated. Using bold sans-serif should be fine.

Let me also ensure the angular velocity has damping so balls eventually stop spinning. ANG_DAMP = 0.985 per substep means after 1 second (240 sub-steps), 0.985^240 ≈ 0.026, so ~3% of original. That's enough decay for a second. Maybe I should reduce damping... let me set ANG_DAMP = 0.998 so spins last longer.

Actually per substep at 240Hz, 0.998^240 ≈ 0.62. After 5 seconds: 0.998^1200 ≈ 0.09. That's nice.

Let me also reconsider WALL_FRICTION. 0.78 means tangential velocity drops to 78% on each wall bounce. That should be enough to slow things down but not stop them.

For ball-ball friction in collisions: the damping factor 0.5 makes tangential relative velocity reduce by half? Actually I have:
```
const damp = 0.5;
a.angVel -= vT * damp / a.r;
b.angVel += vT * damp / b.r;
```
This isn't quite right — it just adds to angular velocity based on tangential velocity, not damping. Let me think...

Actually for ball-ball collision, I don't want to dampen the tangential velocity of the balls themselves (they keep sliding past each other). But I do want to transfer some of that into spin. So the formula:
- Tangential relative velocity at contact = vT
- This creates friction force at contact
- Ball a spins one way, ball b spins the other way
- The friction force also slows them down somewhat

Let me just add to angular velocity and not worry about tangential damping between balls. That's simpler and more realistic-looking. The spin will look natural.

OK I think I'm overthinking this. Let me just write it and see.

One more thought: the initial hept angle. I have heptAngle = 0 and vertices computed from `heptAngle + i * 2π/7 - π/2`. So vertex 0 is at angle -π/2 (top), vertex 1 is at angle 2π/7 - π/2 (upper-right), etc. That's a heptagon with a vertex pointing up. Good.

Let me make sure the canvas size fits well in the viewport. 780x780 is reasonable.

Actually let me make the canvas 800x800 to match my early constants.

Let me finalize the code. Here it goes:

```javascript
// I should also limit velocity to prevent tunneling
function clampVel(b, max) {
  const sp = Math.hypot(b.vx, b.vy);
  if (sp > max) {
    b.vx = b.vx / sp * max;
    b.vy = b.vy / sp * max;
  }
}
```

I'll call this in the step function.

OK let me write the file now.

Actually wait, one concern about wall collision. The formula `ball.x += nx * pen; ball.y += ny * pen;` assumes nx, ny point from wall toward ball center (i.e., inward). And the velocity reflection assumes the ball is moving INTO the wall (vN < 0 where normal points inward). 

Let's verify: if ball is inside heptagon, normal (ball - cp) points inward (from wall toward ball). Ball velocity vN = v · n is positive if ball moves inward (away from wall), negative if moving toward wall. We only reflect if vN < 0. Good.

After reflection: v' = v - 2*(v·n)*n. If v·n is negative (moving toward wall, which means in -n direction since n points inward... wait no. n points inward. v·n < 0 means v has component in -n direction, which is outward. So ball moving outward toward wall. After reflection, v·n becomes positive (inward). Good.

OK I think we're correct. Let me write the file.

Let me also think about whether I want balls to ever escape the heptagon. With proper physics, they shouldn't, but I could add a safety: if ball goes too far outside, push back. Let's not bother.

Hmm wait, in my collision response, I have:
```
ball.vx = nvx + wv.vx;
ball.vy = nvy + wv.vy;
```
Where nvx, nvy is the relative velocity after reflection, and wv is the wall velocity. So I add the wall velocity back to get the absolute velocity. Correct.

For the spin induced by wall friction: I have:
```
ball.angVel += (vT - vT2) / ball.r * 0.5;
```
This is an approximation. The change in tangential velocity is (vT2 - vT), which is negative (vT2 < vT). For ball moving in +t direction (positive vT), friction from wall reduces vT. This imparts a rotation... let me think.

If wall is below ball (normal pointing up, +y in screen coords), tangent pointing right. Ball sliding right (vT > 0). Wall friction on ball is leftward (-t direction). This makes ball rotate... top of ball moves right (matches ball translation right? no, friction pushes left).

Actually, for a ball rolling on a surface without slipping, when the ball moves right, friction acts leftward on the ball (opposing sliding), and the ball rotates such that the bottom moves left (and top moves right relative to center, since ball rotates CW). 

In screen coords with y-down, "below ball" means +y direction. Normal pointing from wall to ball is -y. But I'm using normal from ball toward wall (i.e., outward from heptagon, downward in this case).

Let me re-examine. The normal n = (ball - cp)/dist. If ball is inside heptagon, cp is on the wall, so n points from wall inward to ball. So n points away from the wall, toward ball center. If wall is "below" ball (ball is above wall), n points up (-y in screen coords).

Tangent t = (-ny, nx). If n = (0, -1), then t = (1, 0). Right direction. OK.

If ball moves right (vT > 0, since vT = v · t = vx when t = (1,0)), the ball is sliding. Friction acts on ball in -t direction = leftward. Ball's angular velocity: imagine ball rotating CW (top moves right, bottom moves left). In screen coords, that's negative rotation (since positive angle in canvas rotates CW by default? actually canvas rotates CCW for positive angle in screen coords with y-down... wait no).

In canvas 2D context with default transform (y-down), positive rotation goes CW visually. So a CW rotating ball has positive angular velocity in canvas coords.

If ball slides right (positive vT), friction is leftward (-t), the ball will spin CW (positive angVel in canvas). 

My formula: angVel += (vT - vT2) / r * 0.5. With vT > 0 and vT2 = vT * 0.78, vT - vT2 > 0, so angVel increases. Good, this is positive (CW rotation in canvas), which matches expectation.

But wait, is it exactly the right direction? Let's see. The ball sliding right on a wall (wall below it) — actually that's only if the wall is horizontal. In our heptagon, the wall could be at any angle. Let me think generally.

If the ball is on a wall and slides tangentially, friction creates torque on the ball. The torque is in the direction that would oppose sliding. If ball slides in +t direction relative to wall, friction on ball is in -t direction at the contact point. This creates torque = r × F, where r is from center to contact point = -n * r_ball (radius). So torque = (-n * r_ball) × (-t * F_mag) = (n × t) * r_ball * F_mag.

n × t in 2D: n = (nx, ny), t = (-ny, nx). Cross product (z-component): nx * nx - ny * (-ny) = nx² + ny² = 1. Wait, n × t = nx * nx - (-ny) * ny = nx² + ny² = 1. So torque is positive (out of screen).

In canvas 2D, positive torque = positive angVel direction. Positive angVel in canvas = CW visually. So the ball will rotate CW.

If ball slides in +t direction, friction creates CW rotation. ✓

My formula says: angVel += (vT - vT2) / r. If vT is positive and vT2 < vT, then angVel increases (CW rotation). ✓

Great, the direction is correct. The magnitude may not be perfectly accurate but it should look natural.

OK let me write the file.

Actually, I realize the wall friction code should handle the case where vT2 - vT is positive vs negative. Let me think again. We have vT before reflection, vT2 = vT * WALL_FRICTION. The change is vT2 - vT (negative since WALL_FRICTION < 1). The friction impulse on ball is in -t direction with magnitude proportional to (vT - vT2). This impulse, applied at contact point -n*r, creates torque. 

I think the formula is approximately right for visual purposes. Let me move on.

One last thought: I should make sure balls don't get stuck inside each other. If multiple balls overlap simultaneously, my pairwise resolution should handle it iteratively. Maybe run 2-3 iterations per step.

Actually, the iterative approach (multiple sub-steps + multiple ball-ball collision passes) should help. Let me do 2 passes per step.

OK writing the file now.

Let me also add a "demo" quality: show the heptagon rotating visibly. The blue glow effect should make it look nice.

Final file structure:

```html
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<h1>SPINNING HEPTAGON · 20 BALLS</h1>
<canvas></canvas>
<div class="controls">...</div>
<script>...</script>
</body>
</html>
```

Let me also add a small subtitle/description and a counter or something to show physics stats. Keep it minimal.

Let me write thisout now.

Empty workspace. Let me writethe file.

I noticed I made an error — I declared `RESTITUTION` as `const` but the slider tries to mutate it. I need to fix this. Let me change `const RESTITUTION` to `let RESTITUTION` and remove the broken listener code and replace it with proper workingcode.

Let me also add the reset, drop, and clear button handlers — they were missing fromthe UI wiring. Let me check the current state of the file.

Now let me verify the finalfile by reading through key sections.

Looks good. Let me also verify that the file is syntactically valid by doing a quick parse check via node.

JS parses cleanly. Let me also verify there are no external resources (no http/https URLs, no CDN references).

No external resources. Now let me also do a more thorough self-check by looking at a couple more critical sections:

1. The step function for stability
2. The drawing routines3. The UI wiring at the end

Looks complete and correct. Let me also note one concern: in the draw loop, the order is:
1. drawBackground() — fills with semi-transparent black (motion blur)
2. drawHeptagon()
3. drawBall() for each
4. drawHUD()

This means the heptagon and balls are drawn AFTER the background fade. The motion blur is created by the semi-transparent fill each frame rather than the other way around. So balls drawn this frame will be fully visible; balls from previous frames will be slightly faded. That's actually a nice motion blur effect.

But wait — drawBackground uses 'rgba(7, 9, 26, 0.55)' which is semi-transparent. So it partially obscures whatever was drawn previously. Then the heptagon and balls are drawn on top. So the heptagon and balls drawn THIS frame will not have motion trails in front of them, but earlier-drawn balls will fade. That's the right order.

Actually I want to double-check that the background gets fully painted initially. On the first frame, the canvas starts transparent, and we paint rgba(7,9,26,0.55) over it. The result is darker than the actual CSS background. But that's fine — the heptagon and balls will be drawn on top.

Hmm, but since we use a semi-transparent fill for "motion blur", each frame we lose a tiny bit of contrast for old balls. After many frames, the background settles to the equivalent of an opaque color. Let me verify: if we repeatedly fill with alpha 0.55, the accumulated alpha after N frames is 1 - (1-0.55)^N = 1 - 0.45^N. After 10 frames, 1 - 0.00034 ≈ 1.0. So after a few frames, the background is fully opaque. Good.

Now let me also think about potential issues:

1. **Tunneling**: With sub-stepping at SUB=4 and max speed 1400 px/s, in one sub-step a ball moves max 1400/60/4 ≈ 5.8 px. Ball radius is 19. So no tunneling under normal physics.

2. **Ball-ball overlap**: 2 passes per sub-step should resolve most overlaps.

3. **Wall normal direction**: I established it's correct (points from wall to ball = inward when ball is inside).

4. **Spin direction**: I verified the formula's sign.

5.**Initial state**: 20 balls spawn at center with small random spread. They'll fall and bounce.

I think this is solid. Let me confirm the file is in place.