We need answer by creating index.html single-page app. Need inspect cwd maybe empty. Need implement. Need be careful with requirements. Need all in one self-contained file. Need no external resources. Need collision detection ourselves. Need canvas likely. Need balls dropping from center of heptagon that spins 360 deg every 5 sec. Balls affected by gravity and friction, collide with each other, bounce realistically off rotating walls; show each ball's spin via rotation of number. Implement collision detection ourselves.

Need create index.html. Need maybe include instructions? final concise. Need implement robust.

Let's reason physics. Need single-page app with canvas. Need heptagon centered perhaps center of canvas. Balls start at center, dropping from center? "dropping from the center of a heptagon that spins..." Could mean inside spinning heptagon, balls released from center and fall under gravity. Need heptagon rotates. Walls rotate. Balls collide with each other and walls. Need ball spin visual via number rotation. Need realistic bounce off rotating walls.

We'll write HTML with canvas, style. JS physics.

Coordinate system: canvas logical maybe 900x900, center at (0,0), y down. Gravity positive y. Heptagon centered at canvas center. Rotating at angular velocity omega = 2π/5 rad/s. Heptagon vertices radius R. Need walls segments. Balls within heptagon. If dropped from center, gravity makes them fall to bottom wall. Heptagon rotates, walls impart tangential velocity. Need collision detection with rotating walls.

Coordinate representation:
Ball {x,y,vx,vy,r,m,angle,omegaSpin}
Gravity: vy += g*dt. Air friction: v *= exp(-airDrag*dt). Maybe rolling friction? Since balls collide with walls, spin update from tangential relative velocity.

Need "spin via rotation of its number": draw number rotated by ball.angle. Need update ball.angle += spin*dt.

Need ball-ball collisions: for each pair if dist < sum radii, normal n=(pos diff)/dist. Relative velocity along normal? Need impulse. Elastic collision with restitution maybe 0.86. Equal masses. Positional correction. Compute impulse scalar j=-(1+e)*relVelNormal/(invMassSum) if relVelNormal<0. Apply impulses. Friction tangent impulse maybe. Need implement ourselves.

Ball-wall collisions: Heptagon is convex polygon. Need determine inside. For each edge oriented CCW, inside is left side? Canvas y down flips orientation. Need choose. Vertices computed angle maybe -π/2 + i*2π/7 + theta. If angle increasing in canvas y down, orientation? Standard canvas x right y down, polygon vertices in increasing angle from top: (0,-R), (R sin?, etc). This is clockwise? Let's calculate signed area using y-down coordinates? Param x=R cos φ, y=R sin φ with φ=-π/2 then increasing. In standard math y up, increasing is CCW. In canvas y down, visual appears clockwise? But algebra area sum x_i y_{i+1}-... with y down may be negative? Let's not rely. We can define edge normals inward. For each edge from a to b, compute edge = b-a. For polygon vertices CCW in mathematical coordinates but canvas y down maybe area negative. Need inside test.

Maybe easier use local angle? But rotating heptagon walls. Need collision with line segments. Since balls are inside convex polygon. For each wall, compute inward unit normal n. Need orientation independent. Compute polygon center c. For edge a->b, normal candidates perpendicular. We can choose n = perpendicular(edge)/len; if dot(n, center - midpoint) <0, flip. Then n points inward. Distance d = dot(ball - a, n) = distance to wall inward. Collision if d < r. At collision, relative velocity at contact = ball.v - wallPointVelocity. Wall point velocity due to rotation: v_wall = omega × (p - center). In 2D canvas: angular velocity positive? If angle increases with time. For vector r=(dx,dy), v = (-omega*dy, omega*dx) if mathematical x right y down? Need check: x'=x cos - y sin, y'=x sin + y cos for positive angle in canvas coordinate? In canvas y down, positive angle rotates clockwise visually? Matrix standard still x'=x cos - y sin, y'=x sin + y cos maps top point (0,-R) to (R sin, -R cos) = right/down? At small angle, top moves right, so clockwise. That's okay. v = (-ω dy, ω dx). Good.

For collision with wall, we need wall moving. Compute rel = ball.v - vWall. Normal component vn = dot(rel,n). Since n inward. If ball outside/penetrating, rel along inward? If moving into wall from inside, wall normal inward, ball velocity toward wall outward => rel dot n negative. So if vn <0 and d<r, apply impulse. Need j=-(1+e)*vn (mass=1). v_new = v -? If n inward and vn negative, to reflect: v_rel_new = v_rel - (1+e)*vn*n? Since vn=dot(rel,n). If vn=-10, subtract (1+e)*(-10)n = add 20n, correct. ball.v = rel_new + vWall. Position correction: ball.pos += (r-d+epsilon)*n (inward). Then spin update from tangential friction: tangent = perpendicular(n) maybe t=(-n.y,n.x). Relative tangential velocity at contact due to ball spin: For ball surface velocity at contact = v_ball + ω_spin × r_contact. Contact point relative from center to wall is -r*n (towards wall/outward). Spin surface velocity = ω × (-r n) = (-ω * (-r n_y), ω * (-r n_x)) = (ω r n_y, -ω r n_x) = -ω r t? If t=(-n_y,n_x), spin vel = -ω r t. Total surface relative tangent = dot(rel + spinVel, t). We want friction impulse to reduce tangent. Need simple: vt = dot(rel, t) + dot(spinVel,t) = dot(rel,t) - spin*r. Apply tangential impulse to linear and angular. For sphere/circle with mass=1, moment inertia I = 0.5*m*r^2 maybe. Tangential impulse Jt = -vt / (invMass + r^2/invI?) Actually impulse J along t at contact. Linear vel changes by J*t. Angular vel changes by torque / I. For impulse J at contact vector r_c = -r*n. Torque scalar = r_c × Jt = r_c.x*Jt.y - r_c.y*Jt.x = (-r n) cross (Jt t) = -r Jt (n×t). If t=(-n_y,n_x), n×t = n_x*n_x - n_y*(-n_y)=1. Torque=-r Jt. Angular change = torque/I = -r Jt/I. Surface tangential velocity change = Jt + (-r Δω) = Jt + r^2 Jt/I = Jt(1+r^2/I). With I=0.5 r^2 => factor 3. So Jt=-vt/3. Clamp to friction coefficient * normalImpulse maybe. Normal impulse magnitude? jn=-(1+e)*vn. Use Coulomb clamp |Jt| <= μ*jn. Then apply: v += Jt*t; spin -= r*Jt/I. Need sign check. If vt positive along t, Jt negative, spin +=? spin -= rJt/I positive. Surface spin velocity -spin*r decreases. Fine.

But note wall moving imparts energy; restitution maybe 0.9. Need avoid sticking.

Ball-ball collisions: Need spin too? "collide with each other" maybe linear enough. Could include spin friction. But okay.

Need heptagon spins 360 every 5 seconds. Need maybe display rotation speed? Not necessary.

Need balls "dropping from the center": start positions maybe random small circle around center with zero velocity; gravity. But if at center all collide initially. Need maybe spawn sequentially from center? "Show 20 numbered balls (1 to 20) dropping from the center" Could start all at center with tiny random offsets, zero velocities. They will collide. Could be okay. But maybe "dropping from center" means they emerge from center downward. We can set initial positions on small circle near center, velocities random small. Maybe ball 1..20.

Need "collide with each other, and bounce realistically off rotating walls". Need implement all collision detection ourselves. We'll write code.

Need ensure index.html present. Need maybe no external resources.

Let's plan app:

HTML:
<!doctype html><html lang="en"><head><meta charset...><title>Spinning Heptagon Balls</title><style> body... canvas... overlay? </style></head><body>
<div id="wrap"><canvas id="scene"></canvas><div class=controls>...</div></div>
<script>
(() => { 'use strict'; ...})();
</script>
</body></html>

Need maybe responsive high DPI canvas. Use CSS width min(94vmin,900px). Canvas actual size based on devicePixelRatio. Use requestAnimationFrame.

Physics constants:
const G=900 px/s^2? If canvas 900, heptagon radius maybe 330. Balls radius maybe 18. Gravity 700 px/s^2. g*dt. Need balls not too fast.

Canvas logical size: maybe 900x900 CSS. We'll set canvas.width=900*dpr, height=900*dpr, context.setTransform(dpr,0,0,dpr,0,0). Use W=H=900.

Heptagon:
const sides=7;
const radius=340;
const center={x:450,y:450};
const spinPeriod=5; omega=2π/5.
function getHeptagon(angle) { for i 0..6 φ = -Math.PI/2 + i*2π/7 + angle; x=center.x+R cos φ; y=center.y+R sin φ; }

Need walls with inward normals each frame. function getWalls(angle) returns array {a,b,n,centerMid, len}. Compute edge=b-a; perp=(-edge.y,edge.x); n=perp/len; if dot(n, center-mid)<0 n=-n. This is inward.

Need collision detection:
Substeps: dt from rAF; clamp dt=0.033; for safety split into substeps maybe 3-5. Since balls 20, O(400) okay. Use fixed substeps 1/240? Maybe.
function step(dt) {
  const substeps = Math.max(1, Math.ceil(dt/(1/240))); h=dt/substeps;
  for each substep:
    angle += omega*h;
    gravity & air drag:
      for b: b.vy += G*h; const damp = Math.exp(-0.08*h); b.vx*=damp; b.vy*=damp;
    integrate: b.x += b.vx*h; b.y += b.vy*h; b.angle += b.spin*h; b.spin *= Math.exp(-0.02*h)
    collisions ball-ball maybe multiple iterations:
      for iter=0;iter<2;iter++ resolveBallBall();
    resolveWalls();
    resolveBallBall again?
}
Order maybe integrate, ball-ball, wall.

Need "bouncing realistically off rotating walls": wall collision uses moving wall velocity. But if heptagon rotates, walls are moving, collision impulse with wall point velocity. Need position correction after integration. If wall rotates into ball, d<r and vn maybe positive/negative. Need handle even if vn>=0? If wall moving into ball, rel = ball.v - wall.v. vn = dot(rel,n). If wall point velocity has inward component? Since wall point velocity tangent, dot with normal = 0 exactly for rigid rotation around center (for a point on wall, v_wall perpendicular to radius; normal not necessarily radial? For edge, wall point velocity may have normal component because edge point is not on circle? Actually rotating rigid body, wall normal rotates too. The point velocity may have component normal to edge due to rotation: dot(v_wall,n) maybe not zero if n not perpendicular to radius? For a line segment rotating, each point velocity includes component along line normal. So wall can push. If vn>=0 but d<r due to penetration, still need resolve. Use if d<r. If vn<0, normal impulse; if vn>=0, no normal impulse but position correction. But if wall moving inward into ball, rel dot n maybe positive? Wait n inward, wall point velocity along n? If wall moves inward, v_wall dot n positive, rel = ball - wall, dot maybe ball.v dot n - positive. If ball stationary, vn negative, impulse. Good.
If d<r, position correction. If vn<0, apply normal impulse. If vn>=0 but overlap due to numerical, no bounce.

Need maybe include wall friction? We handle tangential friction with moving wall. Good.

Need ball-ball collisions with spin? Could include friction and spin. But requirement only show spin; spin can be from wall friction and collisions. We can implement ball-ball friction too maybe.

Ball-ball:
For each pair i<j:
 dx=b.x-a.x, dy=b.y-a.y, dist2...
 if dist<minDist:
  nx=dx/dist, ny=dy/ny
  overlap=minDist-dist
  correction = overlap/(invMassSum) maybe 0.5 each: a.x -= nx*overlap*0.5; b.x += nx*overlap*0.5; etc.
  relVx=(b.vx-a.vx), relVy...
  velAlongNormal=relVx*nx+relVy*ny
  if velAlongNormal<0:
    e=0.88
    j=-(1+e)*velAlongNormal/(invMassSum)
    impulseX=j*nx; impulseY=j*ny
    a.v -= impulse (mass 1), b.v += impulse
    Tangential friction with spin:
      tangent = (-ny,nx)
      contact point relative from a center to contact = r_a*n (towards b), for b = -r_b*n.
      surfaceVelAtContactA = a.v + spinA × r_a*n = a.v + (-spinA*r_a*n.y, spinA*r_a*n.x)
      surfaceVelAtContactB = b.v + spinB × (-r_b*n) = b.v + (spinB*r_b*n.y, -spinB*r_b*n.x)
      vt = dot(surfaceVelB - surfaceVelA, tangent)
      invI=1/(0.5*r^2)
      jt = -vt/(invMassSum + rA^2*invIA + rB^2*invIB) maybe factor. Clamp μ*j.
      Apply to linear: a.v -= jt*t; b.v += jt*t
      a.spin -= (rA*jt)/IA? torque at contact rA n cross jt t = rA*jt (n×t)=rA*jt. Δω = torque/I = rA*jt/IA. Wait impulse on A is -jt*t at contact? We applied a.v -= jt*t, so impulse on A = -jt*t. Torque = rA n × (-jt t)= -rA*jt. ΔωA=-rA*jt/IA. For B, impulse = jt*t at contact -rB n; torque = (-rB n) × (jt t) = -rB*jt. ΔωB=-rB*jt/IB. Hmm sign? Let's derive with vt = surfaceB - surfaceA along t. To reduce vt, apply impulse +Jt on B, -Jt on A. Jt=-vt/denom. If vt positive (B surface faster along t), Jt negative: B impulse negative t, A positive t. Torque A at rA n with impulse -Jt t: torque = rA * (-Jt) (n×t)= -rA Jt. Since Jt negative, positive spin. Good ΔωA=-rA*Jt/IA. B impulse Jt t at -rB n: torque = (-rB n) × (Jt t)= -rB Jt. ΔωB=-rB*Jt/IB. So same.
      Clamp |Jt| <= μ*j maybe.
  else maybe still positional.

Need wall collision spin:
For each ball, for each wall:
 d=dot(pos-a,n)
 if d < r:
  p = pos - n*(r-d)?? Correction pos += n*(r-d+0.05). But if ball deeply outside, maybe project. Since n inward.
  vWall = (-omega*py, omega*px) where p maybe contact point? Use contact point = pos - n*r? Actually wall point closest to ball = ball.pos - n*d? The wall point at projection onto infinite line: pos - n*d. But wall point velocity at contact on rotating body = omega × (wallPoint - center). Use pContact = pos - n*d (on line). vWall = (-omega*(pContact.y-c.y), omega*(pContact.x-c.x)).
  rel = ball.v - vWall.
  vn = dot(rel,n)
  if vn<0:
    jn=-(1+wallRestitution)*vn
    rel += jn*n? Since ball.v = rel + vWall; rel_new = rel - (1+e)*vn*n = rel + jn*n.
    ball.v = rel_new + vWall
  tangent=(-n.y,n.x)
  vt = dot(rel,t) - ball.spin*ball.r
  denom=1 + r^2/I = 3 for solid circle. But mass=1. Jt = -vt / denom. Clamp |Jt| <= wallFriction * max(jn, small). But if no normal impulse, maybe clamp to μ*0.1? Could still spin from moving wall? For no normal impulse but sliding contact, maybe apply small friction if d<r. But okay.
  ball.v += Jt*t
  ball.spin -= (ball.r * Jt) / I. Check sign: impulse on ball Jt*t at contact -r n. Torque = -r Jt. Δω=torque/I = -r Jt/I. Yes.
  Position correction: ball.x += n*(r-d+0.1); ball.y += n*(r-d+0.1). But if multiple walls near corners, repeated. Need after correction maybe re-evaluate.

Potential issue: For a rotating wall, normal n changes over time. We update angle before collision. Good.

Need maybe "heptagon spins 360 degrees every 5 seconds" visually. We can show faint outline and maybe background grid.

Need draw:
- Clear canvas with gradient.
- Draw heptagon fill maybe rgba. Need rotating heptagon. Use current angle.
- Draw walls thick with highlights; maybe arrow/vertices.
- Draw balls with radial gradients, numbers rotated by ball.angle. Need number rotation. For each ball:
  ctx.save(); ctx.translate(b.x,b.y); ctx.rotate(b.angle); draw circle with gradient? Gradient after transform? createRadialGradient in local? We can draw circle with fill style.
  draw circle shadow, fill, stroke.
  Draw number centered: ctx.font = 'bold 18px Inter...'; textAlign center; textBaseline middle; fillStyle; fillText(b.num,0,0)
  Maybe draw small tick on ball to show spin? Number rotation enough.
- Draw a small central release point maybe.
- Use high DPI.

Need "dropping from center" maybe animate balls starting at center. Could initialize with x=center.x + random small, y=center.y+random small, velocities maybe random. But if all at center, collision solver handles. Better:
for i 0..19:
 angle = i*2π/20 + random; dist=random*4; x=center.x+cos*dist; y=center.y+sin*dist; vx=random(-40,40), vy=random(-30,30)
 r=17+random? maybe all same? "balls" maybe varied? Numbered balls 1-20, could radius 15.5. If varied, collision radii. Use same radius 17.5. 20 balls in heptagon radius 340. Fine.
But "dropping from center" perhaps all start at center with velocities downward? Could have a "release" animation: each ball appears from center at intervals? But requirement says show 20 balls dropping from center. We can initialize positions near center and zero velocities. They will fall. Maybe too much collision at center. We can set tiny random offsets. Fine.

Need maybe no external fonts. Use system font.

Need "Implement all collision detection yourself": We can mention in code comments? The app itself. We implement no physics library.

Need maybe controls? Reset button maybe. But single page. Could include a reset button. Not necessary. But maybe nice. Need no network.

Need maybe "friction" includes air drag and wall/ball friction. Need tune.

Let's think of collision math in canvas coordinates. Need verify wall normals.

Example top edge of heptagon at θ=0. Vertices starting top: v0=(450,110), v1=(450+R sin(2π/7),450-R cos? Actually φ=-π/2+0.897= -0.674 rad, x=450+264, y=450-264? Wait top-ish right. Edge v0->v1. Edge = (264,-155). Center-mid=(-132,155). Perp=(-edge.y,edge.x)=(155,264), dot with center-mid = -20580+40920=20340 >0 so n inward. Good.

For bottom edge, n points inward.

Wall collision: Suppose bottom wall horizontal, n points upward (canvas y negative). Ball falling down, rel dot n negative. jn positive; ball.v += jn*n upward. Good.

Wall spin: t=(-n.y,n.x), for n=(0,-1), t=(1,0). Contact point at bottom, p=(x, y_wall). vWall = (-ω*(p.y-c.y), ω*(p.x-c.x)). At bottom p.y>c.y, first positive? -ω*positive = negative x for right side? For clockwise rotation (positive), bottom point moves left? At bottom, rotating clockwise, bottom moves left. vWall.x negative for p.x>center. Good. Rel tangential includes wall. Friction impulse adjusts ball spin.

Need ensure ball remains inside heptagon. For each wall, if d<r. But if ball near vertex, could penetrate two walls. Position correction sequentially. Fine.

Need maybe "rotating walls" if heptagon rotates, balls bounce off walls. Since we use wall velocity, bounce includes rotational energy. Good.

Need maybe "collide with each other" position correction and impulse.

Potential issue: all balls start at center, collisions with each other. If all at exact center, dist=0; random offsets. Good.

Need maybe "drop from center" maybe use "release" at center. We can draw a small center ring.

Need maybe implement "realistic" by continuous collision? Discrete may tunnel if high speed. dt substeps and small radius. Fine.

Need maybe include "Reset" button. Could use button. Need no network. Need maybe keyboard R. Fine.

Need create file. Let's first inspect cwd.

Need write index.html. Need maybe include code. Let's draft carefully.

Detailed code:

HTML:
<meta name viewport content width=device-width initial-scale=1.0 viewport-fit=cover>
<style>
:root { color-scheme: dark; }
html,body { margin:0; height:100%; overflow:hidden; background:#080a12; font-family: ui-sans-serif,...; }
body { display:grid; place-items:center; }
canvas { width:min(96vmin,900px); height:min(96vmin,900px); display:block; border-radius:24px; box-shadow...; background:#080a12; }
.hint { position: fixed; top: 14px; left: 50%; transform...; color...; pointer-events:none; ...}
button { ... }
Maybe overlay.

Need if body display grid, controls? Maybe put canvas and button in .stage.

<body>
<div class="stage">
<canvas id="scene" aria-label="..."></canvas>
<div class="panel"><button id="reset">Reset</button><span>20 numbered balls...</span></div>
</div>
<script>...</script>
</body>

CSS ensure canvas scales. Need high DPI set.

JS:
(() => {
 const canvas=document.getElementById('scene');
 const ctx=canvas.getContext('2d');
 const resetBtn=document.getElementById('reset');
 const LOGICAL=900;
 let dpr=1;
 function resize() {
  dpr=Math.max(1, Math.min(2, window.devicePixelRatio || 1));
  canvas.width=Math.round(LOGICAL*dpr);
  canvas.height=Math.round(LOGICAL*dpr);
  ctx.setTransform(dpr,0,0,dpr,0,0);
 }
 window.addEventListener('resize', resize, {passive:true});
 resize();

 const TAU=Math.PI*2;
 const center={x:LOGICAL/2,y:LOGICAL/2};
 const sides=7, heptR=345, omega=TAU/5;
 let angle=0;
 const G=760, AIR_DRAG=0.045, SPIN_DRAG=0.035;
 const BALL_R=18, BALL_COUNT=20;
 const ballColors = [...]
 let balls=[];

 function rand(min,max)...
 function reset() { angle=0; balls=[]; for i=1..20: const a=...; const dist=Math.sqrt(Math.random())*8; balls.push({num:i,x:center.x+cos(a)*dist,y:center.y+sin(a)*dist,vx:rand(-20,20),vy:rand(-20,20),r:BALL_R+rand(-1.5,1.5),mass:1,angle:rand(0,TAU),spin:rand(-4,4),hue:...}); }
 resetBtn.addEventListener('click', reset);
 window.addEventListener('keydown', e=>{if(e.key.toLowerCase()==='r') reset();});

 function heptagonVerts(a) { const verts=[]; for i: const phi=-Math.PI/2 + i*TAU/sides + a; ...; return verts;}
 function wallsFor(a) { const v=...; const walls=[]; for i: const p=v[i], q=v[(i+1)%sides]; const ex=q.x-p.x, ey=q.y-p.y; const len=Math.hypot(ex,ey); let nx=-ey/len, ny=ex/len; const mx=(p.x+q.x)/2, my=(p.y+q.y)/2; if ((center.x-mx)*nx+(center.y-my)*ny<0) {nx=-nx;ny=-ny;} walls.push({a:p,b:q,nx,ny,cx:(p.x+q.x)/2,cy:(p.y+q.y)/2}); } return walls;}
 function wallVelocityAt(x,y) { const dx=x-center.x, dy=y-center.y; return {x:-omega*dy, y:omega*dx}; }

 function resolveBallBall() {
  for i...
    let dx=b.x-a.x...
    if distSq < min*min:
      if distSq===0: set random? Need avoid zero. Use dx=rand(-0.01,0.01); dy=...; distSq...
      dist=Math.sqrt(distSq); nx=dx/dist...
      overlap=min-dist;
      const correction=overlap*0.5+0.01;
      a.x -= nx*correction; a.y -= ny*correction; b.x += ...
      // if correction pushes outside? Wall later correct.
      const rvx=b.vx-a.vx, rvy=b.vy-a.vy;
      const vn=rvx*nx+rvy*ny;
      if (vn < 0) {
        const restitution=0.86;
        const j=-(1+restitution)*vn/2; // invMassSum=2
        const ix=j*nx, iy=j*ny;
        a.vx-=ix; a.vy-=iy; b.vx+=ix; b.vy+=iy;
        const tx=-ny, ty=nx;
        const invIA=1/(0.5*a.r*a.r), invIB=1/(0.5*b.r*b.r);
        const rvSurfaceX = b.vx + b.spin*b.r*ny - (a.vx - a.spin*a.r*ny)? Wait need formula.
Let's derive surface velocities:
For A contact vector rA = a.r*n. spinVelA = (-spinA*rA.y, spinA*rA.x) = (-spinA*a.r*ny, spinA*a.r*nx)
For B contact vector rB = -b.r*n. spinVelB = (-spinB*(-b.r*ny), spinB*(-b.r*nx)) = (spinB*b.r*ny, -spinB*b.r*nx)
Surface relative B-A along t = dot((b.v+spinVelB)-(a.v+spinVelA), t)
= dot(b.v-a.v,t) + dot(spinVelB-spinVelA,t)
dot(spinVelB,t) = spinB*b.r*ny*tx + (-spinB*b.r*nx)*ty. t=(-ny,nx): = spinB*b.r*(ny*(-ny)+(-nx)*nx)= -spinB*b.r. dot(spinVelA,t)=(-spinA*a.r*ny)*(-ny)+(spinA*a.r*nx)*(nx)=spinA*a.r. So vt=rv·t - spinB*b.r - spinA*a.r. Good.
        const rvx=b.vx-a.vx, rvy=b.vy-a.vy;
        const vt = rvx*tx + rvy*ty - a.spin*a.r - b.spin*b.r;
        const denom = 2 + a.r*a.r*invIA + b.r*b.r*invIB; // =4
        let jt = -vt/denom;
        const maxF = 0.18*j;
        jt = Math.max(-maxF, Math.min(maxF,jt));
        a.vx -= jt*tx; a.vy -= jt*ty; b.vx += jt*tx; b.vy += jt*ty;
        a.spin -= (a.r*jt)/(0.5*a.r*a.r);
        b.spin -= (b.r*jt)/(0.5*b.r*b.r);
      }
 }
}
Need sign for spin update? We derived ΔωA=-rA*Jt/IA, same. Good.

But note if Jt positive, A spin decreases. Fine.

Wall collision:
function resolveWalls(walls) {
 for each ball:
  for each wall:
    const d=(b.x-wall.a.x)*wall.nx+(b.y-wall.a.y)*wall.ny;
    if (d < b.r) {
       const penetration=b.r-d+0.05;
       b.x += wall.nx*penetration; b.y += wall.ny*penetration;
       const contactX = b.x - wall.nx*b.r; const contactY = b.y - wall.ny*b.r; // after correction, contact on wall.
       const wv=wallVelocityAt(contactX, contactY);
       let rvx=b.vx-wv.x, rvy=b.vy-wv.y;
       const vn=rvx*wall.nx+rvy*wall.ny;
       let jn=0;
       if (vn < 0) {
         jn=-(1+0.82)*vn;
         rvx += jn*wall.nx; rvy += jn*wall.ny;
       }
       const tx=-wall.ny, ty=wall.nx;
       const vt=rvx*tx+rvy*ty - b.spin*b.r;
       const invI=1/(0.5*b.r*b.r);
       const denom=1+b.r*b.r*invI; // 3
       let jt=-vt/denom;
       const maxF=0.32*Math.max(jn, 0.08); // maybe small if resting
       jt = Math.max(-maxF, Math.min(maxF,jt));
       rvx += jt*tx; rvy += jt*ty;
       b.vx=rvx+wv.x; b.vy=rvy+wv.y;
       b.spin -= (b.r*jt)*invI;
       // damping normal? maybe no.
    }
  }
}
But position correction before velocity. If wall moving into ball, after correction contact point uses new pos. Good.

However, if ball penetrates multiple walls, wall velocity at contact after correction maybe okay.

Potential issue: For wall collision, if vn>=0 but ball inside and d<r due to wall rotation, no normal impulse, but if wall moving into ball, vn likely negative. If wall moving away, no impulse. Good.

Need maybe "friction" from air drag. Use b.vx *= Math.exp(-AIR_DRAG*h), b.vy *= Math.exp(-AIR_DRAG*h); b.spin *= Math.exp(-SPIN_DRAG*h). But if air drag applied before collision, okay. Need maybe gravity before.

Step:
let last=performance.now();
function animate(now) {
 const raw=(now-last)/1000; last=now; const dt=Math.min(raw,0.05);
 step(dt);
 draw();
 requestAnimationFrame(animate);
}
function step(dt) {
 const substeps = Math.max(1, Math.ceil(dt/(1/240))); const h=dt/substeps;
 const walls=wallsFor(angle); // But angle changes each substep. Need update walls each substep. 
 for s:
   angle=(angle+omega*h)%TAU;
   const walls=wallsFor(angle);
   for b:
     b.vy += G*h;
     const damping=Math.exp(-AIR_DRAG*h);
     b.vx*=damping; b.vy*=damping; b.spin*=Math.exp(-SPIN_DRAG*h);
     b.x += b.vx*h; b.y += b.vy*h; b.angle += b.spin*h;
   for iter=0; iter<2; iter++ resolveBallBall();
   resolveWalls(walls);
   resolveBallBall();
}
}
But walls computed before? angle updated, walls computed. Good.

Potential issue: If ball penetrates wall due to integration, position correction after wall; then ball-ball correction maybe not re-run after wall. Fine.

Need maybe ball-ball collisions before walls. Fine.

Need maybe if ball outside due to wall correction, ball-ball correction could push outside again. But okay.

Need maybe "heptagon spins 360 degrees every 5 seconds" exact. omega=TAU/5.

Need draw:
function draw() {
 ctx.clearRect(0,0,LOGICAL,LOGICAL);
 // background
 const bg=ctx.createLinearGradient(0,0,0,LOGICAL); ...
 ctx.fillRect
 // subtle grid? no.
 const walls=wallsFor(angle);
 // draw heptagon fill:
 ctx.save();
 ctx.beginPath(); verts...
 ctx.fillStyle='rgba(14,21,42,0.72)';
 ctx.fill();
 // maybe draw rotating inner shadow? Use ctx.shadowColor...
 ctx.lineWidth=10; ctx.strokeStyle='rgba(125,211,252,0.95)'; ctx.stroke();
 ctx.lineWidth=2; ctx.strokeStyle='rgba(255,255,255,0.3)';
 // draw wall normals? no.
 // draw center release
 ctx.restore();
 // draw balls sorted by y maybe? for depth. balls.slice().sort((a,b)=>a.y-b.y).forEach(drawBall)
}
Need if draw balls after heptagon, balls appear inside. But if balls hit walls, they should be in front. Good. Maybe draw heptagon outline on top too after balls to show walls. But if outline covers balls at walls, okay. Draw fill before balls, outline after balls maybe. Need walls on top. Draw fill first, balls, then outline/vertices.

Draw ball:
function drawBall(b) {
 ctx.save();
 ctx.translate(b.x,b.y);
 ctx.rotate(b.angle);
 ctx.shadowColor='rgba(0,0,0,0.35)'; ctx.shadowBlur=10; ctx.shadowOffsetY=4;
 const grad=ctx.createRadialGradient(-b.r*0.4,-b.r*0.5,b.r*0.2,0,0,b.r*1.2);
 grad.addColorStop(0,'#ffffff'); grad.addColorStop(0.25,b.light); grad.addColorStop(1,b.dark);
 ctx.fillStyle=grad; ctx.beginPath(); ctx.arc(0,0,b.r,0,TAU); ctx.fill();
 ctx.shadowBlur=0; ctx.shadowOffsetY=0;
 ctx.lineWidth=2; ctx.strokeStyle='rgba(255,255,255,0.45)'; ctx.stroke();
 // small highlight? maybe
 ctx.fillStyle='rgba(255,255,255,0.25)'; ctx.beginPath(); ctx.arc(-b.r*0.35,-b.r*0.45,b.r*0.22,0,TAU); ctx.fill();
 ctx.rotate(-b.angle)? Wait we already rotated. Number rotates with ball; draw text in local rotated coordinate. Good. But if we rotate before drawing ball, text rotates. For number, maybe text should be upright relative to ball's spin. Good.
 ctx.font=`800 ${Math.max(13,b.r*1.05)}px system...`;
 ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillStyle='rgba(5,8,16,0.92)'; ctx.strokeStyle='rgba(255,255,255,0.55)'; ctx.lineWidth=3; ctx.strokeText(String(b.num),0,1); ctx.fillText(...);
 ctx.restore();
}
Need if gradient created after transform, radial gradient coordinates in transformed space? Canvas gradient is in current user space at creation, transformed with context? It should use current transform. Fine.

Need maybe ball colors:
const palettes = [
 {light:'#60a5fa', dark:'#1d4ed8'}, ...
]
Use HSL maybe b.hue.

Need maybe draw "heptagon spin" with text? Not necessary. But maybe panel.

Need maybe reset. Need maybe "R resets".

Need maybe handle tab hidden dt huge; clamp.

Potential issue: The user specifically asks "Show 20 numbered balls (1 to 20) dropping from the center of a heptagon that spins 360 degrees every 5 seconds. The balls are affected by gravity and friction, collide with each other, and bounce realistically off the rotating walls; show each ball's spin via the rotation of its number. Implement all collision detection yourself."

Need maybe no "external resources, CDNs or network requests". We don't use.

Need maybe maybe "center of heptagon" means balls dropping from center of heptagon, not heptagon center of canvas. We set center same.

Need maybe "heptagon spins" around center. Yes.

Need maybe "drop from center" maybe balls start at center and fall. We start near center. Good.

Need maybe "friction" not just air, but collision friction. Good.

Need maybe "realistic" bounce off rotating walls includes wall velocity. Good.

Need maybe "collide with each other" all pairwise. Good.

Need maybe "all collision detection yourself" no library. Good.

Need maybe "self-contained file" all in index.html. Good.

Let's write.

Need verify file exists maybe maybe no syntax errors. Could run quick maybe node parse? It's HTML. Use maybe grep. Need maybe maybe issue with CSS backdrop-filter okay. Need maybe no external resources. Need maybe "all into one self-contained file" yes. Need maybe maybe "heptagon spins 360 degrees every 5 seconds" but CSS? JS. Need maybe maybe "drop from center" but HUD at bottom covers canvas maybe okay.

Need maybe inspect maybe syntax? Use node? Could use bash to test if file present. Maybe use `python`? We can use grep maybe. Need maybe maybe run an HTML parser? Not necessary. But could use `python3 -m html.parser`? Simpler `test -s /tmp/ws/index.html && echo present`.