Rotating Hexagon Physics

Build an interactive physics demo as one complete HTML file with inline CSS and vanilla JavaScript. No libraries, CDNs, external resources, network requests, storage, or embedded frames. It must work inside an iframe sandboxed with allow-scripts only. Return only the HTML file.

Show one ball under gravity inside a rotating regular hexagon on a canvas. Use elapsed time, bounded timesteps or substeps, circle-versus-segment collisions including corners, penetration correction, and collision response relative to each moving wall's velocity. The ball must remain inside the hexagon at the full range of controls; do not fake its trajectory with a preset animation.

Use these accessible, visibly labelled controls with the exact IDs: gravity (range 0 to 1500, default 600, units px/s²), rotation (range -2 to 2, default 0.6, units rad/s), restitution (range 0 to 1, default 0.8), pause (button toggling Pause/Resume), and reset (button). Show the current numeric control values. Positive rotation is clockwise. Reset must restore the defaults and initial ball state, without starting a second animation loop. Pause must really stop simulation time; changing controls while paused must not resume it.

Use a logical 600 by 600 simulation area scaled to fit a narrow mobile viewport. The hexagon is centred at (300,300), has circumradius 240, and initially has a vertex to the right. Ball radius is 12, initial centre is (300,180), initial velocity is (120,0). Repeated reset and pause/resume must remain stable. Include a short visible checklist inviting visitors to test zero gravity, reversed rotation, pausing, and repeated resets. Make it polished but prioritize correct physics and keyboard-operable controls over decoration.