Double pendulum · hy4

We need build single self-contained index.html. Need use browser tools brief pass. Need careful implement physics stable RK4 coupled equations. Need colorful fading bounded trail lower bob. Controls. Canvas responsive perhaps devicePixelRatio. Need ensure initial angles and units. Need verify via browser inspect/screenshot/motion clicks etc. Need understand browser tool outputs maybe screenshot and DOM. We'll write robust.

Let's derive equations for equal masses m, lengths L, angles θ1, θ2 from downward vertical. Standard double pendulum equations:

θ1'' = [ -g(2m1+m2) sin θ1 - m2 g sin(θ1 - 2θ2) - 2 sin(θ1-θ2) m2 (ω2² L2 + ω1² L1 cos(θ1-θ2)) ] / [ L1 (2m1 + m2 - m2 cos(2θ1-2θ2)) ]

θ2'' = [ 2 sin(θ1-θ2) ( ω1² L1 (m1+m2) + g(m1+m2) cosθ1 + ω2² L2 m2 cos(θ1-θ2)) ] / [ L2 (2m1+m2 - m2 cos(2θ1-2θ2)) ]

For equal m=m and L:
den = L(3 - cos 2Δ) [since 2m1+m2=3m, minus m cos(2Δ)].
a1 numerator / m:
-3g sinθ1 - g sin(θ1-2θ2) -2 sinΔ( L ω2² + L ω1² cosΔ)
divide L(3 - cos 2Δ).
a2 numerator: 2 sinΔ[ ω1² L (2m) + 2mg cosθ1 + ω2² L m cosΔ] / [L m(3-cos2Δ)] = 2 sinΔ [2L ω1² + 2g cosθ1 + L ω2² cosΔ]/[L(3-cos2Δ)].

Alternative via Lagrangian matrix:
For equal m, L:
2 L θ1'' + L cosΔ θ2'' + L sinΔ ω2²? Need signs. Let's derive to avoid errors.

Coordinates x1=L sinθ1, y1=L cosθ1 (down positive); x2=x1+L sinθ2, y2=y1+L cosθ2.
Vel x1=L cosθ1 ω1, y1=-L sinθ1 ω1.
v2x=L cosθ1ω1+L cosθ2ω2; v2y=-L sinθ1ω1-L sinθ2ω2.
T = 1/2 m L² ω1² + 1/2m [L²ω1²+L²ω2²+2L²ω1ω2(cosθ1cosθ2+sinθ1sinθ2=cosΔ)] = (1/2)mL²[2ω1²+ω2²+2ω1ω2 cosΔ].
V = mg y1 + mg y2 with y downward so potential = -m g y1 - m g y2 = -mgL(2 cosθ1 + cosθ2).

Euler Lagrange matrix M:
∂T/∂ω1=mL²(2ω1+ω2 cosΔ)
d/dt = mL²(2 a1 + a2 cosΔ - ω2 sinΔ (ω1-ω2))
∂T/∂θ1 = derivative cross term - mL² ω1ω2 sinΔ, potential effect in L=T-V where V=-... so +? EL d/dt ∂L/∂ω - ∂L/∂θ=0. ∂L/∂θ1 = ∂T/∂θ1 - ∂V/∂θ1 = -mL² ω1ω2 sinΔ - (2mgL sinθ1) [V derivative: 2mgL sin θ1 + mgL sinθ2; wait V=-mgL(2 cosθ1+cosθ2), derivative = +mgL(2 sinθ1+sinθ2). So ∂L/∂θ1=-mL²ω1ω2 sinΔ - mgL(2sinθ1+sinθ2?) Careful V includes both particles: first mass y1=Lcosθ1 and second y2=Lcosθ1+Lcosθ2 -> V=-mgL(2cosθ1+cosθ2). derivative wrt θ1 = +2mgL sinθ1. Ah only 2 sinθ1, θ2 component derivative separately. Thus ∂L/∂θ1=-mL²ω1ω2 sinΔ -2mgL sinθ1.
EL: mL²[2a1+a2 cosΔ -ω2 sinΔ(ω1-ω2)] - [-mL²ω1ω2 sinΔ -2mgL sinθ1]=0
= 2L a1+L cosΔ a2 - L ω2 sinΔ ω1 + L ω2² sinΔ + Lω1ω2 sinΔ +2g sinθ1=0
cross cancel: =2L a1+L cosΔ a2+L ω2² sinΔ+2g sinθ1=0.
So 2L a1 + L cosΔ a2 = -L ω2² sinΔ - 2g sinθ1.

θ2:
∂T/∂ω2=mL²(ω2+ω1cosΔ)
d= mL²[a2+a1 cosΔ -ω1 sinΔ(ω1-ω2)]
∂L/∂θ2: derivative cos(θ1-θ2) wrt θ2 = +sinΔ, so +mL²ω1ω2 sinΔ; -V derivative = -mgL sinθ2. So = mL²ω1ω2 sinΔ - mgL sinθ2.
EL subtract:
mL²[a2+a1cosΔ -ω1²sinΔ+ω1ω2sinΔ] - [mL²ω1ω2sinΔ-mgLsinθ2]=0
=> L a2+LcosΔ a1 -Lω1² sinΔ+g sinθ2=0
=> L cosΔ a1 + L a2 = Lω1² sinΔ - g sinθ2.

Matrix A [[2, cosΔ],[cosΔ,1]] * [L a1, L a2]? Actually divide L perhaps define u1=L a1, u2=L a2:
2u1 + c u2 = -L ω2² sinΔ - 2g sinθ1 = b1
c u1 + u2 = L ω1² sinΔ - g sinθ2 = b2
det=2-c².
u1=(b1 - c b2)/det, u2=(2b2-c b1)/det.
a1=u1/L, a2=u2/L. This is straightforward and exact equal masses/lengths. Compare standard formula to validate. Let's evaluate with script maybe. For θ1=120°, θ2=-10°, zero velocities, Δ=130°, c=-.643, s=.766, L=1, g=9.81. b1=-2g sin120=-16.99. b2=-g sin(-10)=+1.703. c b2=-1.095. u1=(-16.99 - (-1.095))/(2-.413)= -10.02, a1=-10.02 rad/s². u2=(3.406 - c*b1 = -10.93? c*b1 =10.92; 3.406 -10.92=-7.51 /1.587=-4.73). Standard formula: θ1'' numerator -3g sinθ1=-25.49; -g sin(θ1-2θ2)= -9.81 sin140=-6.305, -0 = -31.8 / (3-cos260? cos260=-.174, denominator 3.174) = -10.02. θ2'' =2s [2g cosθ1]/[3-cos2Δ] =1.532*(-9.81)/3.174=-4.735. Yes.

Need stable integration. RK4 fixed dt perhaps 1/480 or 1/600 seconds, accumulator based on real time, cap frame delta to avoid freeze, max substeps maybe 60 to avoid lag. Ordinary playback. Need avoid energy drift. RK4 dt=1/600 likely stable for chaotic double pendulum. Could use 1/1000 perhaps. User says numerically stable scheme and time step ordinary playback doesn't explode/freeze. RK4 at 1/1000 or 1/600. Need maybe energy conservation check. We'll implement RK4 with dt=1/1000? 1000 steps per simulated sec; at 60fps ~16.7 steps/frame, fine. But high CPU okay. Or dt=1/600 gives 10 per frame. Chaotic with high velocities perhaps energies; we can test long simulation via Node algorithmic. Could use symplectic? Coupled system nonseparable but RK4 is stable small dt. 1/1000 gives solid. Need perhaps use simulation speed optional? Not required. Avoid external. Use actual elapsed wall time with accumulator; cap wall step at 0.05 sec and max simulation steps to 80. If tab hidden, requestAnimationFrame pauses; cap avoids freeze.

Trail: bounded fading trail at lower bob. Need "colorful fading trail". Could store points with simulation time / age, max e.g. 1200 points or 8 seconds. Draw as segments with hue based on time or speed, alpha based on age. Need use canvas. Could maybe use offscreen trail canvas with fading via translucent fill every frame, but pause/resume and reset easier with explicit points. Bounded array (e.g. 900 points sampled every ~1/60 sec or maybe every RK integration? Need enough). Colorful via HSL hue based on path sequence/time, gradients perhaps stroke each segment. Fading alpha from age. Need clear trail on reset. Need not clear on pause; explicit trail remains. Need ensure "fading trail" perhaps animate fade even paused? If age based simulation time then pauses freeze trail, fine. More intuitive age based simulation time. Need trail lifetime e.g. 5 seconds, bounded max points. Need sampling at fixed simulation intervals; push lower bob position every ~1/120 simulated second. Bound 900 (7.5 sec) and prune age > TRAIL_LIFETIME. Since lower bob can move fast, maybe sample every 1/120 = 240? Need draw smooth. Could sample at every rendered frame, but if frame rate differs, explicit age; perhaps sample every 2-3 RK dt (1/120). Use accumulator trailAccumulator and push every 1/120. We'll compute lower bob positions in simulation. Maybe need render path lines between points. Draw 2 or 3 passes glow + thin bright stroke. For each segment use hue from point index or time and alpha age^1.5. Use `globalCompositeOperation = 'lighter'` on dark background for colorful glow. Need ensure rods visible and pendulum entire within canvas. Choose L in drawing units based on canvas min dimension. Need transform: pivot at maybe x=w/2, y=h*0.32? With total reach 2L downward and upward; to remain visible need fit both full circles. Need canvas dimensions possibly 1200x800 and area. If pivot centered at h/2 and L = min(w,h)*0.21, total reach 2L=0.42*min dimension. Then x spread <=0.42*min dimension; center and fit if width >= min dimension; vertical from center ±0.42*min dimension fits height if min=height -> 0.08 to 0.92. Good. Choose pivot=(w/2,h/2), L= min(w,h)*0.21 or 0.215; total radius=.43 min, fits. Could allocate UI top overlay but center okay. For mobile tall/wide? min dimension works; fit both axes. Need maybe draw dial / guides and energy info. Not required but nice. Canvas area entire viewport with controls overlay top left. Need responsive, high DPI.

Need initial angles 120° and -10° from downward. Coordinate: y increases down, x=L sin θ, y=L cos θ. At θ1=120°, first bob x=.866L to right, y=-.5L (up/right). At θ2=-10°, second rod x=-.174L (left), y=.985L down; second bob is x=.692L, y=.485L below pivot. Good. Need ensure visible.

Masses equal, lengths equal; perhaps m=1, L=1 physics units and g=9.81. Draw scaled L. Need maybe show stated values in UI: m1=m2=1, ℓ1=ℓ2=1, g=9.81. Initial θ1=120°, θ2=-10°, ω=0. Need perhaps a status readout showing current θ1, θ2 (degrees), energy maybe. Since verify samples might rely on inspecting DOM. Could add a readout with current `data-*` attributes or visible text. Browser inspect output maybe can read DOM. We can provide simple readouts for state and pause status and maybe trail count. This aids verification. Need perhaps expose an API `window.__pendulum`? Could for testing directly inspect state and perform clicks. But user doesn't require; adding internal object could help. We can expose `window.pendulumDebug` with getState, reset, etc. But avoid relying on it perhaps. Could still use visual screenshots and DOM inspection. Need run browser tool. Need understand available browser tool: action reload, inspect, screenshot, motion, click, drag, key, type, scroll. We'll use screenshot and inspect. It likely returns screenshot attachment plus DOM/console. Need maybe use browser `inspect` with text? Need see. We'll create HTML, then browser reload and screenshot. Need perhaps simulate pauses/resumes by click coordinates. Add buttons with IDs and clear labels. Need maybe detect pause via status readouts and state over time.

Let's design UI polished but not overkill:
- full-page dark radial gradient background maybe canvas itself with drawn gradient.
- header top-left glass panel: title "Planar Double Pendulum", tagline "Chaotic motion from coupled equations" maybe.
- controls row buttons Pause (id pauseBtn), Reset (id resetBtn), status pill (`running`) with dot.
- readout rows for θ1, θ2, ω1 maybe and trail samples. Need not clutter.
- bottom-right compact note with equations? Could include energy diagram. But not needed.
- canvas full screen, CSS width 100%; height 100%; display block.
- pointer-events none on overlays except controls.
- maybe legend at bottom-left "m₁ = m₂ = 1 · ℓ₁ = ℓ₂ = 1 · g = 9.81 · RK4 Δt = ..." etc.
- Need avoid fonts external; system stack.

Canvas drawing:
- resize with devicePixelRatio: set canvas.width = Math.round(rect.width*dpr), height analogous; `ctx.setTransform(dpr,0,0,dpr,0,0)`; use CSS px dimensions. Could set transform each draw; if browser resizes, resize. Use ResizeObserver or window resize listener. Need update pivot and L dynamically. Existing trail points store physical coordinates (world normalized units relative to pivot, with x,y in units L) rather than canvas pixels, so resize maps correctly. Excellent: physics positions x1=sinθ1, y1=cosθ1 (L=1); x2=x1+sinθ2,y2=y1+cosθ2. Store trail `{x:x2,y:y2,t:simTime,hue:...}` in physical units. Render using pivot + x*drawL etc. Then resize doesn't distort.

- Each frame:
  - requestAnimationFrame(loop)
  - now = performance.now()
  - if running:
    delta = Math.min((now-last)/1000, 0.05)
    accumulator += delta
    let steps=0
    while(accumulator>=DT && steps<MAX_STEPS) { state=rk4(state,DT); simTime+=DT; trail sampling; steps++; accumulator-=DT; }
    if steps==MAX_STEPS maybe accumulator=0 to avoid freeze.
  - else accumulator=0 maybe no time.
  - last=now
  - prune trail by simTime - TRAIL_SECONDS and max length. Since simTime paused, no fade during pause.
  - render.
  - update DOM readouts once every maybe 100ms to avoid overhead.
- For pause/resume, `running` toggle; button text "Pause"/"Resume"; status pill.
- Reset: `state={a1:deg2rad(120),a2:deg2rad(-10),w1:0,w2:0}`, `simTime=0`, `accumulator=0`, `trail=[]`, `hue=...`, `last=performance.now()` maybe; `running`? Requirement reset restores initial conditions and clears trail. Should it resume running or preserve paused state? Typically reset restores initial pose and starts running; but verification might pause then reset and expect starting pose and cleared trail. If reset auto-runs, screenshot might capture slight motion; better reset should keep current pause state? Need think. Requirement "Reset restores stated initial conditions and clears trail." Could preserve running state (if paused, remains paused so starting pose visible); if running, resets and motion starts immediately. But user may expect reset and replay. Could implement Reset to set paused? Then need Resume from paused. Verification asks "then reset and confirm that the starting pose and cleared trail return." If reset sets paused, easy verify. But likely they expect reset while running to start anew. We can preserve `running` and maybe add `freeze` for brief 200ms? No. Better: reset to initial conditions, clear trail, and keep paused state. If currently running, it continues. If paused, stays paused. But after pause/resume, running. Then reset will immediately evolve before screenshot. However browser screenshot could happen right after click; state may move ~few ms from initial. Hard to visually confirm exact pose. Could implement reset sets `running=false` and button "Resume"; then starting pose stable and trail clear. But then Reset must be followed by Resume to run; standard reset often does not automatically pause. Could arguably be acceptable. We can design reset to force pause to make verification clean, with status "Reset · paused" and resume needed. But user may expect reset simply resets and continues. Need choose robust. Maybe reset should restore initial conditions and pause for one frame, then resume if it had been running. But testing can call reset button and then inspect quickly enough. Could expose `holdUntil` to keep initial pose for e.g. 600ms upon reset while running then resume, but that's external driving/time weird.

Could implement reset always paused, with button text "Reset" and small note "Reset pauses at t=0; press Resume to replay." That fully satisfies reset; Pause/Resume exists. This may be most verifiable. However typical behavior "Reset restores initial conditions and clears trail" doesn't mandate preserving running state. We'll document. Need maybe user verification sequence: sample moments (running), pause/resume, then reset. They can inspect starting pose because paused. Good.

But perhaps they'd expect after Reset simulation to run automatically. Could add autoplay behavior with initial hold 0.35s? Don't complicate. Could set reset to pause if running; if already paused stays paused. Then clear. We'll clearly label status "Paused at initial state". This is sensible for scientific inspection. Could maybe make Reset button preserve running via Shift+click? Not needed.

Alternatively implement reset as two states: if running, reset and continue; if paused, reset and stay paused. Verification likely resets while running and screenshot might be slightly after. Could expose exact pose via DOM readout; screenshot likely ~<100ms, initial angular accel 10 rad/s² gives 0.05 rad after .1 s ~3 degrees, visible maybe. Could use browser click then immediate screenshot; perhaps 20ms, less. But still. Better pause-on-reset to guarantee exact.

Need perhaps support keyboard space P/R. Nice but not necessary. Could add accessible buttons with focus.

Trail colors: store hue computed `hue=(simTime*65+190)%360` or based on speed / index. "colorful" should show a spectrum. Maybe hue based on lower bob speed or path progress. Use `(point.hue = (195 + simTime * 90) % 360)` giving cyan->magenta->red->yellow over 4s. Use `hsl(${hue}, 100%, 65%)` and alpha. Could perhaps hue based on speed mapped across full wheel to make dynamic multicolor: speed = hypot(v2x,v2y) (units per sec), hue=(200 + speed*35) %360. Since speed varies broad, colors from cyan to pink etc. Or use hue = (190 + i * 0.7)%360, so along trail spectrum. Need ensure colorful around path. Use `hue = (200 + simTime*85)%360` could transition slowly. Trail lasts 6 sec => 510° range nearly full spectrum. Good. Need draw gradient segments with alpha based on age. Set lineCap='round'; lineJoin='round'. For each segment:
```
const age = simTime - p0.t;
const fade = Math.max(0, 1-age/TRAIL_SECONDS);
const alpha = Math.pow(fade,1.7);
```
Maybe draw first pass thick glow with alpha 0.18*fade and lineWidth 10; second pass core with alpha .9*fade and lineWidth 2.5. Use `ctx.strokeStyle = hsla(...)`; `globalCompositeOperation='lighter'`; could be expensive for ~720 points *2 per frame ~1440 strokes at 60fps, okay perhaps. Need maybe use one path per segment due different hue/alpha. 600 segments. Could sample 1/90 sec for 5 sec=450 points. Fine.

Need "bounded fading trail": both max points and max age. We can set `TRAIL_SECONDS=6`, `MAX_TRAIL_POINTS=720`, sample every 1/120 sec. Since 6*120=720 exactly. Bounded. Prune:
```
while (trail.length && trail[0].t < simTime - TRAIL_SECONDS) trail.shift();
if (trail.length > MAX_TRAIL_POINTS) trail.splice(0,trail.length-MAX_TRAIL_POINTS)
```
shift per frame can be O(n), minor. Better use index but not needed. Could sample every 1/90, max 600. Let's use `TRAIL_SAMPLE_DT=1/90`, lifetime 5.5, max 600, ~495. Smoother enough. Maybe with fast motion, distance between samples can be large; lower bob max speed maybe ~? With energy initial potential, could reach 8 units/s; at 1/90 = .09 units*L ~15px, okay. Segment line okay. Sample every 1/120=.0083, max 720, ~10px. Use 1/120.

Need maintain connected rods and constant length. Compute positions from angles, so exact. Draw rods: maybe dark shadow then bright gradient from pivot to bob1 and bob1 to bob2. Need use canvas linear gradients. Draw pivot ring, rods with rounded line caps. Bobs with radial gradients; maybe equal radius. Draw lower bob with bright white center and colored glow. Need maybe draw circular guide rings around pivot radius L and 2L subtly, to emphasize planarity. But helpful visual. Draw crosshair maybe.

Need background: `drawBackground()` fill linear/radial gradient dark navy, subtle grid/dots. Can draw radial gradient centered at pivot:
```
const bg=ctx.createRadialGradient(pivot.x, pivot.y, 0, ..., Math.max(w,h)*0.75); addColorStop...
ctx.fillRect(...)
```
CSS body gradient unnecessary if canvas paints. Could add star-like static dots generated once deterministic; but no need. We can draw concentric circles and radial guide lines at 30° increments, with low alpha. Need keep rods visible. Could draw grid of lines every 40px low alpha. Not overdo.

Need maybe draw angle arcs from downward vertical to rods and labels θ1 θ2? Could be nice but may clutter. Add small arcs near pivot for θ1 and near first bob for θ2. But angle convention downward vertical; could draw dashed downward reference lines at pivot and bob1. This helps verify. Need possibly label initial angles. Could draw small dashed vertical down from pivot to L and from bob1 to L, and arcs from downward to rod direction. But dynamic arcs can be computed. Might be nice. Yet required only draw fixed pivot etc. Could include subtle dashed reference lines and angle labels. Need ensure trail not obscured. Let's consider.

Canvas drawing order:
1. background and guides (grid, circles radius L, 2L, downward dashed lines)
2. trail (glow and core)
3. rods (shadow, main)
4. bobs and pivot
5. maybe labels top? UI overlay handles.

Guide downward lines at pivot to pivot + (0,L) and first bob + (0,L), with dash; arcs:
- from downward angle π/2 in screen coordinates? Our vector angle from downward: x = sin θ, y=cos θ. As canvas angle α = atan2(y,x) from +x axis; downward α=π/2. A clockwise? θ positive x positive, y cos; for θ=120°, x=.866,y=-.5 => α=-30° = π/2 - θ = -30°; so α = π/2 - θ. Starting downward α0=π/2 and rod direction α=π/2 - θ. Canvas arc from α0 to α with anticlockwise maybe. For θ positive, target angle smaller, so anticlockwise true; for θ negative target larger, anticlockwise false. Use ctx.arc(x,y,r,π/2,π/2-θ, θ>0). Need if θ beyond ±180 maybe normalize? Angles can grow unbounded due chaos. We can normalize state angles after each RK4 step? Could keep angles within [-π,π] to avoid large numbers and make arc work. Physics sin/cos periodic; angular velocity unaffected. We can wrap θ1/θ2 to [-π,π] after each step to prevent float precision issues over long run. Need rk4 stage angles may drift; wrap only state after full step. Since Δ uses sin/cos periodic, wrapping each individually by 2π doesn't change Δ modulo 2π. Fine. Use `wrapAngle()`.
- For arc at bob1 from downward to second rod.
- Labels "θ₁", "θ₂" at arc midpoint; perhaps font 12px. Need derive label position with angle αmid=π/2 - θ/2? Actually if from down toward rod, geometric midpoint; okay. Use small radius = 30 or 36.
- Maybe angle values in UI enough.

Need energy calculation to monitor stability and perhaps show "energy drift". Could compute total energy in normalized units:
T = 0.5 m L² [2ω1²+ω2²+2ω1ω2 cosΔ]
V = -m g L (2cosθ1+cosθ2)
E=T+V.
At initial, E0=-g(2cosθ1+cosθ2)= -9.81*(2*(-.5)+.9848)= -9.81*(-.01519)=+0.149? Wait 2cos120=-1, cos-10=.9848 sum=-.0152, negative times -g = +0.149. Fine. Use energy drift readout `ΔE` maybe. RK4 at dt=1/1000 should drift tiny over minutes. Show maybe `<0.01%`. We can display simulation time and trail points. That helps verify stable integration. Need perhaps no need but nice.

Need internal testing hook:
```
window.doublePendulum = {
  getState: () => ({...state, simTime, running, trailLength: trail.length, lowerBob: positions(...), rodLengths: [...], energy}),
  pause: () => setRunning(false),
  resume: () => setRunning(true),
  reset
};
```
Could be useful for browser inspect, but browser tool maybe no way to execute JS directly? `inspect` may return DOM; could use `key` etc. There might be no `evaluate` action. We can use visible readouts. But hook can be exposed to internal tests perhaps. It doesn't violate requirements. Need be careful no external assets. Inline JS only.

Could add `data-state` attribute to canvas or body with state information each frame:
```
app.dataset.running=...
app.dataset.theta1=...
```
Then browser inspect can read. Or use `<output id=...>`. We'll use visible outputs and maybe `canvas.dataset`. Browser inspect likely returns DOM snapshot including text; need see. We'll use IDs and text.

Need run browser tools. Browser actions have no `evaluate`, so can't read JS state except DOM. We can use `inspect` maybe returns full DOM including attribute values. We'll add `data-...` to `#app` updated at every readout. Also add status. Need maybe initial screenshot shows exact pose and no trail. After wait, screenshot and inspect. We can use browser action `motion` maybe captures multiple frames. The tool likely can use `motion` to capture animation over e.g. 1sec. We'll see. Could also use bash to run a headless browser? Browser tool is available. Need maybe test physics via Node separately to ensure no explosion/freeze, using code copied or extracted. We can do `node` with equations and integrate long duration. Might be prudent. Need use tools efficiently within 15 min. We have plenty token but time limited maybe, still.

Let's first create file. Need ensure no syntax errors. Could write complete HTML. Let's plan detailed JS.

HTML:
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" ...>
<title>Planar Double Pendulum</title>
<style>
:root { color-scheme: dark; ... }
* { box-sizing: border-box; }
html,body { margin:0;width:100%;height:100%;overflow:hidden;background:#050713; font-family: ...; color:#f4f7ff; }
#stage { position:relative;width:100vw;height:100vh; }
canvas { display:block; width:100%;height:100%; }
.panel { position:absolute; top:20px;left:20px; ... pointer-events:auto; }
...
@media (max-width:640px) { ... }
</style>
</head>
<body>
<div id=app data-running="true" ...>
 <canvas id=canvas aria-label=...></canvas>
 <section class=panel>
  <div class=eyebrow>...</div>
  <h1>Double Pendulum</h1>
  <p>...</p>
  <div class=controls>
    <button id=pauseBtn ...>Pause</button>
    <button id=resetBtn ...>Reset</button>
    <span id=status ...><i></i><span id=statusText>Running</span></span>
  </div>
  <div class=readouts> ... </div>
 </section>
 <div class=legend>...</div>
 <div class=hint>Space pause • R reset</div>
</div>
<script>
(() => { 'use strict'; ...})();
</script>
</body>
</html>
```
Could use `aria-live` on status but not needed.
Need go light on panel so canvas visible. Panel width ~340 px, top-left; pendulum centered maybe first bob area could overlap panel at upper-right? At initial θ1=120°, first bob upper-right, second lower-right; center pivot. Depending viewport 1200x800, panel covers x=20..360, y=20..250; pendulum at x=600±? drawL=168; first bob at x=745,y=416; second at x=716,y=498. No overlap. Good. At full swing radius 336, pendulum x min=264 might under panel but panel translucent. Fine.

Maybe panel top-left with compact readouts. Legend bottom-left.

CSS:
```
.panel { backdrop-filter: blur(18px); background: linear-gradient(...rgba...); border:1px solid rgba; border-radius:20px; box-shadow...}
h1 {font-size:clamp(1.25rem, ...);}
button {...}
button.primary { background: linear-gradient(135deg,#a855f7,#22d3ee); color:#08101f; }
...
```
No external fonts.

Could use `button` on mobile scale. `touch-action: manipulation`.

JS details:

Constants:
```
const G=9.81, M=1, L=1;
const DEG=Math.PI/180;
const INITIAL = Object.freeze({theta1:120*DEG, theta2:-10*DEG, omega1:0, omega2:0});
const DT=1/1000;
const MAX_FRAME_DT=0.05;
const MAX_STEPS_PER_FRAME=80; // 0.08 sec simulation, enough; at 60fps need ~17 steps. If frame delta capped .05 =>50 steps. max80.
const TRAIL_SECONDS=5.5;
const TRAIL_SAMPLE_DT=1/120;
const MAX_TRAIL_POINTS=700;
```
`MAX_STEPS_PER_FRAME=60` enough for .05/dt=50. Use 60.

State:
```
let s={...INITIAL}, simTime=0, trail=[], trailAccumulator=0, running=true, accumulator=0,lastTime=performance.now(), hue=190;
let lastReadout=0;
let view={w:0,h:0,dpr:1,pivotX:0,pivotY:0,scale:1};
```
Need trail initial point? "clears trail" means array empty. If running, first sample after dt or maybe push initial at t=0? Reset clears then if paused stays empty. If running, we can push initial point at t=0 after reset to show path. But then reset state no trail? Immediately running adds initial point; okay. To ensure clear after reset paused, don't push until stepping. Could have `trail=[]` and when running first update sample at t=0 maybe via `addTrailPoint()` before loop? We can push initial point on start? But initial screenshot before any frame may show one colored dot (not line). Fine. Need avoid drawing segment if only one point, maybe draw glowing dot for latest point. But clear means no trail if paused; no point. Add sample at t=0 when reset if running? Could leave empty and sample after 1/120 sec. That's okay. On first few frames path starts. We'll add `trailAccumulator=0` and sample after each step when >= interval.

`derivatives(q)`:
```
const d=q.t1-q.t2;
const sinD=Math.sin(d), cosD=Math.cos(d);
const b1 = -L*q.w2*q.w2*sinD - 2*G*Math.sin(q.t1);
const b2 = L*q.w1*q.w1*sinD - G*Math.sin(q.t2);
const det = 2 - cosD*cosD;
const u1=(b1-cosD*b2)/det;
const u2=(2*b2-cosD*b1)/det;
return {dt1:q.w1,dt2:q.w2,dw1:u1/L,dw2:u2/L};
```
Need check b1 units: earlier equation 2 L a1 + L c a2 = -L ω2² sinΔ -2g sinθ1, yes b1 = -L ω2² sinΔ -2g sinθ1. u1=L a1. det dimensionless. b2 = L ω1² sinΔ - g sinθ2. Fine. Since L=1. Need perhaps include mass matrix consistent with equal masses. Yes.

`addScaled(q,k,h)`:
```
return {t1:q.t1+h*k.dt1, ...}
```
`rk4(q,h)`:
```
const k1=derivatives(q);
const k2=derivatives(advance(q,k1,h/2)); ...
return wrap(advance(q,{... weighted...},h))
```
Need avoid object allocation maybe fine 1000 steps/s * 4 -> 4000 objects/s, okay. Could use arrays for efficiency but clarity. Use a helper `weighted(k1,k2,k3,k4)` returning derivative. Then `advance`. Wrap:
```
function wrap(a){ return ((a+Math.PI)%(2*Math.PI)+2*Math.PI)%(2*Math.PI)-Math.PI; }
```
Could apply to stages? Not needed. After RK step:
```
q.t1=wrap(q.t1); q.t2=wrap(q.t2);
```
Potential issue at wrap boundary: RK4 derivative from q before wrapping maybe stage q with angle >π; derivatives periodic, fine. Returned wrap equivalent. But if q.t1 wraps by -2π, then next step Δ changes by -2π, sin/cos periodic, fine. No issue. `omega` continuous.

Maybe angular velocities can grow but energy bounds; from E0=0.149, potential min=-29.43 (both down), max kinetic ~29.58, angular speeds bounded ~sqrt(30)~5.5 or more, so no explosion. RK4 stable.

Could compute acceleration via standard equations rather than matrix; matrix makes coupled clear. Need maybe comment equations. Need maybe show no damping/driving. We can include comment:
```
// Lagrangian mass matrix for m1=m2=m, l1=l2=L:
// [2, cosΔ; cosΔ,1] [L α1; L α2] = [...]
```
This satisfies requirement and helps evaluator.

`positions(q)` returns in units L:
```
x1=sin(t1), y1=cos(t1);
x2=x1+sin(t2), y2=y1+cos(t2)
```
Lengths constant by construction. Need for trail sampling. Also compute lower bob velocity maybe for hue:
```
vx=cos(t1)*w1 + cos(t2)*w2
vy=-sin(t1)*w1 - sin(t2)*w2
speed=hypot(vx,vy)
```
Hue based on time and speed:
```
const hue = (190 + simTime*72 + speed*11) % 360;
```
Over 5.5 sec 396° plus speed variations => full spectrum. Good. Use lower bob position physical.
`trail.push({x2,y2,t:simTime,hue})`.
Need prune after update. If paused, simTime same, no fade; clear on reset.

`addTrailPoint` sample:
```
trailAccumulator += DT;
if(trailAccumulator + 1e-9 >= TRAIL_SAMPLE_DT) { trailAccumulator %= TRAIL_SAMPLE_DT; ...}
```
Since DT=1/1000 and sample=1/120≈.008333, not exact multiple; use while:
```
trailAccumulator += DT;
if (trailAccumulator >= TRAIL_SAMPLE_DT) {
 trailAccumulator -= TRAIL_SAMPLE_DT;
 add...
}
```
Floating can drift but fine. Could set integer `stepCount` and sample every 8 steps (=0.008 sec, 125Hz) to avoid. Let `TRAIL_SAMPLE_STEPS=8`, `stepCounter++`; if >=8 push, reset. Then max 5.5*125=688, bounded 720. Use that. Set `TRAIL_SECONDS=5.5`, `MAX_TRAIL_POINTS=720`. Good. Need after reset stepCounter=0. Then sample at 8ms. Could compute lower bob position after step. Good.

`pruneTrail()` each frame:
```
const cutoff=simTime-TRAIL_SECONDS;
let drop=0;
while(drop<trail.length && trail[drop].t<cutoff) drop++;
if(drop) trail.splice(0,drop); // splice once
if(trail.length>MAX) trail.splice(0,trail.length-MAX);
```
Need if simTime paused no drop since cutoff constant. Fine.

`updateReadouts(now)` every 100ms:
```
const p=positions(s); const energy=...
const deg1=normalize maybe state already [-π,π].
document...textContent=`${(s.t1/DEG).toFixed(1)}°`;
...
simTime text = `${simTime.toFixed(2)} s`;
trail text = `${trail.length} pts`;
energy drift maybe absolute `${(energy-initialEnergy).toExponential(1)} J` or percentage. Since E0 near .149, percent ambiguous. Use `ΔE 0.0000 J`. Need calculate `energy` maybe `Math.abs(E-E0)`; display `<0.0001` etc.
app.dataset.running=String(running); app.dataset.theta1=...
app.dataset.theta2=...
app.dataset.trailLength=...
app.dataset.simTime=...
```
Need also update status right away on buttons, not only readout. `setRunning`.
Use `output` tags or spans.

`updateMotion`:
```
function frame(now) {
 const elapsed=Math.min((now-lastTime)/1000, MAX_FRAME_DT);
 lastTime=now;
 if(running) {
   accumulator += elapsed;
   let steps=0;
   while(accumulator >= DT && steps < MAX_STEPS) {
      s = rk4(s, DT);
      simTime += DT;
      stepCounter++;
      if(stepCounter>=TRAIL_SAMPLE_STEPS) { ... }
      accumulator -= DT;
      steps++;
   }
   if(steps===MAX_STEPS && accumulator>=DT) accumulator=0; // avoid backlog
   pruneTrail();
 }
 render();
 if(now-lastReadout>80) {updateReadouts(); lastReadout=now;}
 requestAnimationFrame(frame);
}
```
Potential slight time drift from floating remainder; fine. At initial `lastTime=performance.now()`; first frame maybe ~16ms -> 16 steps. Good.
If paused, accumulator=0 (set on pause), but elapsed while paused discarded because lastTime updates each frame. On resume, no jump. Good.
If reset while running but resets to paused (we decide), set running=false and accumulator=0, lastTime=performance.now(); `frame` continues. Need update button/status. Great.

`setRunning(value)`:
```
running=value;
if(!running) accumulator=0;
pauseBtn.textContent = running ? 'Pause' : 'Resume';
pauseBtn.setAttribute('aria-pressed', String(!running));
statusText.textContent = running ? 'Running' : 'Paused';
status.classList.toggle('paused', !running);
app.dataset.running=...;
```
Should status perhaps "Paused at t = 0" on reset. Could set generic Paused.
`reset()`:
```
s={...INITIAL}; simTime=0; trail=[]; stepCounter=0; accumulator=0; lastTime=performance.now(); setRunning(false); statusText.textContent='Paused · t = 0'; readout...
render();
```
But `setRunning(false)` sets status "Paused"; then override with `Paused · t = 0`. On resume `setRunning(true)` sets Running. Nice. Maybe label button "Resume". Need Clear trail confirmed via `trail=[]`. Initial pose exact. We could add an `initialFlash`? No.

Potential user expectation reset auto-runs: maybe show small text "Reset holds the initial pose. Press Resume to replay." in panel subtitle or legend. Add `.note` under controls? Could put `<p class="microcopy">Reset pauses at t = 0; Resume replays.</p>`. That clarifies. Good.

Keyboard:
```
window.addEventListener('keydown', e => {
 if(e.code==='Space' && !/button|input/.test(document.activeElement.tagName)) {e.preventDefault(); setRunning(!running);}
 if(e.key.toLowerCase()==='r' && ...) reset();
});
```
If focus on button, space triggers button click by browser; avoid double toggling by check activeElement. Could still handle R. Not required. Could include.

Resize:
```
function resize() {
 const rect=canvas.getBoundingClientRect();
 const dpr=Math.min(window.devicePixelRatio||1,2);
 view.w=rect.width; view.h=rect.height; view.dpr=dpr;
 canvas.width=Math.max(1,Math.round(rect.width*dpr));
 canvas.height=...
 ctx.setTransform(dpr,0,0,dpr,0,0);
 view.pivotX=rect.width/2; view.pivotY=rect.height/2;
 view.scale=Math.min(rect.width,rect.height)*0.215;
 render();
}
window.addEventListener('resize', resize);
```
Need note when `canvas.width` reset, context state default, set transform. Each render maybe call `ctx.setTransform(dpr,...); ctx.clearRect(0,0,w,h);`. Since resize sets it, but context state may be changed by save/restore? We use save/restore and set composite each time; ensure base transform. Could call `ctx.setTransform(view.dpr,0,0,view.dpr,0,0)` at start of render. Then clearRect in CSS units? With transform dpr, `clearRect(0,0,w,h)` clears dpr-scaled area, yes. Or use `ctx.fillRect` full. Good.

Background:
```
function drawBackground() {
 const {w,h,px,py,scale}=view;
 const bg=ctx.createRadialGradient(px,py,0,px,py,Math.max(w,h)*0.75);
 bg.addColorStop(0,'#121a38'); bg.addColorStop(.55,'#080d20'); bg.addColorStop(1,'#03050e');
 ctx.fillStyle=bg; ctx.fillRect(0,0,w,h);
 // grid
 ctx.save();
 ctx.strokeStyle='rgba(126,160,255,0.045)';
 ctx.lineWidth=1;
 const spacing=44;
 for(let x=(px%spacing); x<w; x+=spacing)... 
 ...
 // circles
 ctx.setLineDash([3,9]); stroke circle scale and 2*scale maybe.
 // vertical/horiz crosshair?
 ctx.restore();
}
```
Need origin maybe px. Use loops from `px%spacing`; careful negative none. Fine.

Guides:
```
ctx.save();
ctx.strokeStyle='rgba(155,180,255,.12)';
ctx.setLineDash([4,8]);
ctx.beginPath(); ctx.arc(px,py,scale,...); ctx.arc(px,py,2*scale,...); ctx.stroke();
ctx.beginPath(); ctx.moveTo(px,py-scale*2); ctx.lineTo(px,py+scale*2); ... maybe full diameter lines.
ctx.stroke();
ctx.setLineDash([]);
```
Concentric circles alone might make center clear. Need not clutter with full crosshairs maybe draw horizontal/vertical low alpha.

`drawReferences(p)` after background, before trail:
- downward reference from pivot to (px,py+scale*0.8), dashed
- at first bob to (x1,y1+scale*0.7), dashed. Could be under rods.
- arcs:
```
function drawAngleArc(cx,cy,theta,color,label) {
 const r=Math.min(34, scale*.2); 
 ctx.beginPath(); ctx.arc(cx,cy,r,Math.PI/2,Math.PI/2-theta, theta>0); ...
 const a=Math.PI/2-theta/2;
 ctx.fillText(label,cx+Math.cos(a)*(r+12), cy+Math.sin(a)*(r+12));
}
```
But for large |θ| >π, state wrapped so fine. For θ near π, arc direction anticlockwise from 90° to -90° (180°) and label at 0 rad? Need formula: start=π/2, end=π/2-θ. Mid=(start+end)/2=π/2-θ/2. Works. `ctx.arc(cx,cy,r,start,end, theta>0)`: For theta positive, end<start, anticlockwise=true gives decreasing angle; correct. For negative, end>start, anticlockwise=false gives increasing. Good. But at θ=-170°, end=π/2+170°=260°, arc from90 to260 clockwise positive -> 170°, fine. At θ=170°, end=-80°, anticlockwise from 90 to -80 -> 170°, fine. Good. At θ near ±180, okay.
- Need use `ctx.fillText` with centered baseline.

Trail drawing:
```
function drawTrail() {
 if(trail.length===0) return;
 ctx.save();
 ctx.globalCompositeOperation='lighter';
 ctx.lineCap='round'; ctx.lineJoin='round';
 // glow
 for(let i=1;i<trail.length;i++) {
  const p0=..., p1=...
  const fade=...
  if(fade<=0) continue;
  const hue=(p0.hue+p1.hue)/2 maybe need handle wrap; use p1.hue.
  ctx.strokeStyle=`hsla(${hue}, 95%, 62%, ${0.16*fade*fade})`;
  ctx.lineWidth=10*fade+2? maybe width = 3+8*fade.
  ctx.beginPath(); moveTo(...); lineTo(...); ctx.stroke();
 }
 // core
 for(...){
  alpha=.85*Math.pow(fade,1.3);
  ctx.strokeStyle=...
  ctx.lineWidth=2.4;
 }
 // head glow maybe draw radial gradient at last point, but lower bob itself will cover.
 ctx.restore();
}
```
Need map:
```
function toScreen(p){return [px+p.x*scale,py+p.y*scale]}
```
Need if trail point hue wraps, use numeric mod 0..360. `hsla` accepted.
Maybe use one loop and draw glow and core in same iteration to reduce mapping:
```
ctx.beginPath(); moveTo; lineTo;
ctx.lineWidth=...; strokeStyle glow; stroke();
ctx.lineWidth=2; strokeStyle core; stroke();
```
Same path can be stroked twice with different styles. Great. Use `ctx.globalCompositeOperation='screen'` or 'lighter'. `lighter` can saturate. Fine.
Need perhaps avoid zero-length segments; no issue.
Draw a fading dot at trail start? Not needed.

Rods:
```
function drawRods(p) {
 const coords screen...
 // shadow thick translucent black
 ctx.save(); ctx.lineCap='round';
 ctx.strokeStyle='rgba(0,0,0,.45)'; ctx.lineWidth=10; draw both paths; 
 // first rod gradient
 let g1=ctx.createLinearGradient(...); addColorStop 0 '#8dd9ff', 1 '#c084fc'; 
 ctx.lineWidth=6; ...
 // second gradient maybe '#f0abfc','#fbbf24' or cyan->pink
 // inner highlight line 1px with white alpha
 ...
 ctx.restore();
}
```
Need draw both rods as separate paths with gradient.
- Draw first rod from pivot to bob1.
- Draw second from bob1 to bob2.
- Use `ctx.shadowBlur` maybe can be expensive but okay. Could avoid shadows on rods.
- Bob drawing:
```
function drawBob(x,y,r,colors,label, glowColor) {
 ctx.save();
 ctx.shadowColor=...; ctx.shadowBlur=22;
 const grad=ctx.createRadialGradient(x-r*.3,y-r*.35,r*.1,x,y,r);
 add stops white? and color.
 ctx.fillStyle=grad; ctx.beginPath(); arc; fill();
 ctx.shadowBlur=0; ctx.strokeStyle='rgba(255,255,255,.8)'; ctx.lineWidth=1.5; stroke();
 ctx.fillStyle='rgba(5,8,20,.75)'; ctx.font='600 10px...'; fillText(label...)
 ctx.restore();
}
```
Equal masses perhaps equal drawn radius. Use r=14 or scale*0.075 (if scale=172 => 12.9), clamp 10..16. Both same radius. First bob color cyan/blue, second orange/pink. Trail lower bob colorful. Need perhaps lower bob glow hue current, use `hue = (190+simTime*72)%360`. Could use hsl color. But bob can be white core with magenta ring. Maybe set gradient color from current hue to pale.
- Pivot:
```
ctx.beginPath(); arc(px,py,9,...); fill radial gold/white; stroke.
ctx.beginPath(); arc(px,py,14,...); stroke dashed; ...
```
Need fixed pivot obvious. Could draw support triangle above? The pivot is fixed at center; draw small bracket: horizontal line from px-28 to px+28 at py-16, two diagonal lines to pivot, and circle. But might imply fixed support. Add:
```
ctx.strokeStyle='rgba(... .5)'; lineWidth=2;
moveTo(px-28,py-18); lineTo(px+28,py-18); 
moveTo(px-20,py-18); lineTo(px,py); ...
```
But with rod moving through, okay. Or draw small ring and label "fixed pivot" with leader. Not necessary. Draw support bracket in dark gray behind.

Need draw center labels maybe. Fine.

`drawScene`:
```
render(){
 if(!view.w) return;
 ctx.setTransform(...);
 drawBackground();
 const p=positions(s);
 drawGuides(p);
 drawTrail();
 drawRods(p);
 drawBobs(p);
 drawPivot();
}
```
Order pivot perhaps support behind rods; do support in guides then pivot after.

Need perhaps draw trail after guides but before rods; yes.

Need draw lower bob current point even if trail only length 1; bob covers.

Need initial screenshot: no trail, rods at exact angles, panel. At t≈0.016 after reload, angles will have changed slightly due acceleration (θ1 ~ -0.0013 rad = -.07°), negligible. Need maybe initial animation starts automatically. Good.

Need energy:
```
function totalEnergy(q){
 const c=Math.cos(q.t1-q.t2);
 const kinetic=.5*M*L*L*(2*q.w1*q.w1+q.w2*q.w2+2*q.w1*q.w2*c);
 const potential=-M*G*L*(2*Math.cos(q.t1)+Math.cos(q.t2));
 return kinetic+potential;
}
const INITIAL_ENERGY=totalEnergy(INITIAL);
```
Need verify formula. T from earlier with m=1, L=1: 1/2(2ω1²+ω2²+2ω1ω2cosΔ). Yes. V=-g(2cosθ1+cosθ2). Good.
DOM readouts:
```
<div class="metric"><span>θ₁</span><output id="theta1">120.0°</output></div>
...
<div class="metric"><span>t</span><output id="time">0.00 s</output></div>
<div class="metric"><span>trail</span><output id="trailCount">0 / 720</output></div>
<div class="metric"><span>ΔE</span><output id="energy">0.0000</output></div>
```
Could show ω1, ω2 too? Maybe 2 rows 3 columns:
- θ1, θ2, t
- ω1, ω2, trail
- ΔE maybe full width. To avoid clutter. Could use a compact 2x3 grid. Let's include θ₁, θ₂, t on one row; ω₁, ω₂, trail on another; energy drift in footer. That is useful to verify coupled motion. Need perhaps initial ω exactly 0. DOM reflects. Great.

Use `formatSigned`? Values with sign.
```
function fmt(n,d=1){return (Math.abs(n)<0.05?0:n).toFixed(d);}
theta output includes degree.
omega output rad/s.
```
Need wrap angles; initial θ1=120°, θ2=-10°. At reset exact. Good.
`app.dataset...` perhaps:
```
app.dataset.running = running;
app.dataset.simTime = simTime.toFixed(3);
app.dataset.theta1Deg = (s.t1/DEG).toFixed(2);
app.dataset.theta2Deg=...
app.dataset.trailPoints = trail.length;
app.dataset.rod1Px maybe scale? but rod lengths in world units always 1.
app.dataset.rod1Length = distance...toFixed(6); etc.
app.dataset.energyDrift=...
```
This helps verification/inspection. Need maybe update dataset immediately on reset. We'll call `updateReadouts(performance.now(), true)`.

`updateReadouts` can compute positions and actual rod lengths:
```
const rod1=Math.hypot(p.x1,p.y1);
const rod2=Math.hypot(p.x2-p.x1,p.y2-p.y1);
app.dataset.rod1Length=rod1.toFixed(6);
...
app.dataset.lowerX=p.x2.toFixed(4); ...
```
Could be useful. But no need to expose too much. Add.

`window.doublePendulum` object:
```
Object.defineProperty(window,'doublePendulum',{value:{get state(){...}, pause:..., resume:..., reset}});
```
Need avoid using `state` with `running` getter maybe.
```
window.doublePendulum = {
 getState: () => ({...}),
 pause:()=>setRunning(false),
 resume:()=>setRunning(true),
 reset
};
```
Potential evaluation by test harness could call. Fine.

Need maybe handle context 2d null? Not necessary. Could get `const ctx = canvas.getContext('2d');`.

Need maybe use `ResizeObserver` on canvas to call resize; window resize enough. Could use both. Initial call `resize(); reset?` Need order:
- define functions
- attach event listeners
- `resize()` then `setRunning(true)` then `updateReadouts` then `requestAnimationFrame(frame);`
- initial `running=true`, state initial, trail empty.
- Potential initial frame immediately starting. Good.

Need reset pause behavior: on load running true. reset sets paused. If user wants replay, click Resume. Fine.

Could perhaps add distinct "Reset" with `title="Return to 120° / −10° and clear trail (pauses at t=0)"`.

Need status pill styling:
```
.status.paused { background: rgba(251,191,36,.12); border-color...}
.status .dot { ... animation pulse }
.status.paused .dot { background:#fbbf24; box-shadow...; animation:none;}
@keyframes pulse...
```
Need maybe `prefers-reduced-motion` disable pulse.

Need use Unicode θ, ω, ℓ etc. Fine.

Need no external network. All inline.

Let's write.

Need verify in browser initial output and console, representative checks. Need perhaps first run Node physics extraction? Could browser reload/inspect. Let's use browser reload and screenshot perhaps parallel? Browser tools potentially need sequential because reload then screenshot. We can call reload first.

Interesting reload DOM shows t=0.22 and screenshot t=0.12 maybe tool captured different times, fine. Initial output screenshot shows pendulum connected, but trail not visible at 0.12? 14 pts yet not visibly maybe because trail segments short and lower bob glow? Need inspect. At t=0.12, lower bob moves maybe enough to show short trail, but screenshot maybe near bob only. Need sample later to see colorful fading trail. Need use motion maybe wait? Browser actions don't specify wait. We can call screenshot after some time (between calls). Need perhaps tool has implicit time interval. Could use `motion` to capture frames. Let's call motion with maybe no args? Need know action. Do `motion` perhaps returns frames over 1 sec.

Motion frames look excellent: colorful trail, connected rods, chaotic coupled motion, energy drift tiny. Need note trail appears bounded at 687/688 points (<720), age fades. Great. Need verify pause/resume and reset. Use browser click on Pause coordinates (75,151) perhaps note screenshot 1200x800, panel button at x~78,y151. Need click and inspect DOM, then perhaps motion to confirm freezing? Motion could capture frames after pause; should remain same. Then click Resume (same location) and inspect/motion to confirm motion. Then click Reset (x140,y151) and inspect/screenshot. Need perhaps use `click` action with x,y. Let's do pause, then inspect maybe motion. Need maybe call click then inspect in same? Browser actions sequential. Let's call click.

Need check pause freezes state over time. Call motion.

Pause works, trail frozen. Need resume. Click same x (76,151). Then motion maybe confirm state changes. Need then reset. Let's click resume.

Resume works. Need perhaps verify motion after resume more clearly: DOM time 12.05 from 11.96, angles changed. Good. Need reset click x=140,y151. Then inspect and maybe screenshot. Need click.

Reset works exactly. Need perhaps maybe check after reset + resume to ensure replay works and trail starts. Could click Resume and motion. Need representative check yes. Also maybe inspect rod lengths dataset via browser `inspect` after reset to confirm 1.000000. Browser inspect might include DOM attributes? Need perhaps use `inspect` action. Could call `browser inspect` returns DOM text maybe not attributes. Could use bash to parse? We can use browser `inspect` maybe tool returns `dom` only visible text. But hook exists. Need perhaps test with `bash` Node by extracting code? Could run quick simulation to check energy long-term and rod lengths. Browser already shows energy drift ~-4e-9 after 12 sec, stable. Need maybe check long duration ordinary playback doesn't explode/freeze. We can run Node replay of equations for 5 minutes perhaps. But browser motion already 12s and energy tiny. Could be enough. Yet requirement asks numerically stable integration so long playback. Could test 120s with Node quickly by copying functions. Need maybe no need but could be valuable. There is time. Need check no console errors: all tool results `console:[]`, good.

Need potential issue: reset pauses at t=0 and user must press Resume to replay. That's fine and communicated. Need maybe check after reset resume starts from initial and trail. Let's click Resume and motion maybe short. Do that.

Need maybe sample later again after resume to confirm trail. Could motion. But already got earlier. Maybe do one `motion` to ensure. Need perhaps inspect dataset attributes via `inspect` to check rod lengths. Let's call browser inspect maybe returns DOM text plus attributes? It may output `dom` only. Could call `bash` to use Node with jsdom? Not installed perhaps. But can compute equations directly. Need perhaps parse `index.html` with regex to run script in fake DOM? Hard. Browser console has no errors. Could use browser `inspect` with custom? Let's call inspect maybe returns DOM snapshot including attributes.

Looks great. Need maybe check browser console errors from all calls: none. Need perhaps run Node long-run stability and check equations. Could parse script or duplicate quickly. Might be useful to verify long-term no explosion/freeze. Need also maybe check that trail remains bounded at 688 points regardless of time. Motion showed 688. Good. Need maybe check pause screenshot after reset? We have click output screenshot maybe not visible here but tool said attached; we can trust DOM. Could call screenshot to visually confirm starting pose and cleared trail after reset. Need maybe reset again then screenshot. We should do because user specifically asks confirm starting pose and cleared trail return. We have DOM but visual screenshot would be stronger. Need reset then screenshot. Could call click reset then screenshot. It will pause at t=0. Do that. Need perhaps browser `screenshot` after reset to visually see starting pose and no trail. Let's do reset click then screenshot perhaps sequential calls. Could call click then screenshot separately. Need maybe not clear currently running? yes. Let's do.

Starting pose visual correct: pivot at center (600,400), first rod up-right at 120° from down, second rod down-left slight -10°, lower bob below right. No trail. Good. Need perhaps verify rod lengths from data attributes via browser inspect or maybe not needed. Screenshot clearly connected rods of equal apparent length. Need perhaps check high-DPI etc not required. Need maybe quick long-run stability via Node to ensure no explosion. Could derive simple script from same equations and simulate e.g. 10 minutes (600k steps) quickly. Let's do bash with node inline. Need maybe use `node -e` and check max energy drift, max |ω|. We can write quick script in bash heredoc. But tool rules say use bash for commands; fine. Need ensure not create separate file. Could run Node inline. This also verifies equations and stable integration over long time. Need maybe no need but useful. Let's do.

Great. Need maybe check that file exists and maybe size. Also maybe check no external references. Use grep `http`, `src=`, etc. Could run bash. Need perhaps final report concise with actual checked behaviors and unverified. Need mention that reset pauses at t=0 by design; press Resume to replay. Need mention no console errors. Need mention long-run numeric test maybe. Need note unverified: maybe very long browser playback / mobile/resizing / keyboard shortcuts? We didn't verify keyboard shortcuts or small-screen responsiveness. Need explicitly say "not verified" as requested. Need perhaps include no external resources check. Let's run quick `ls` and grep.

Need perhaps maybe final answer with path and what checked. But before final, let's re-evaluate requirements and possible pitfalls.

- Model two point masses connected by massless rigid rods under gravity, without damping or external driving. Use coupled equations rather than independent sine-wave animations. We did exact Lagrangian equal mass/length matrix, RK4.
- equal masses and rod lengths, g=9.81, initial angles 120 and -10 degrees from downward vertical, zero velocities. We did.
- Draw fixed pivot, both rods and bobs, bounded fading trail lower bob. Keep rod lengths constant and pendulum visible. We did positions via trig; scale fits 2L reach.
- Pause/Resume and Reset. Reset restores initial and clears trail. We did; reset pauses at t=0 by design. Could user expect Reset to auto-run? It still restores and clear; Resume provided. We should mention.
- Stable integration scheme/time step. RK4 0.001s, cap backlog, energy drift tiny. Good.
- Verify sample at several moments to inspect coupled motion, connected rods, lower trail. We did via motion frames. Pause/resume check. Reset check. Need mention.
- Run app browser and inspect initial output and console. Console empty. We did.
- single HTML file inline CSS/JS no external assets, no network. Grep found none.
- End with index.html present. Yes.

Need maybe consider reset after pause/resume sequence: We paused, resume, reset. Reset paused. Good.
- Pause/Resume control clear: Pause button toggles label. Good.
- Bounded trail: max 720; actual 688 due lifetime. Good.

Potential issue: state wrapping angles can cause angle arcs to flip direction at ±π, but that's okay. No rod discontinuity because sin/cos continuous. Good.
Potential issue: guide circle radius 2L and scale chosen 0.215*min, so circle extends 0.43*min from center; for width=1200,height=800 radius=344, y=400 ±344 ->56..744, fits; circle is 688 diameter, bottom UI at y~740 may overlap but only subtle. Pendulum visible. For very wide/short screen, min=height, pivot y=center, radius 0.43h fits. For narrow portrait, min=width, pivot x=center, radius 0.43w fits; y center ±0.43w also fits if h>w. Good.
- Lower bob trail physical points positioned relative pivot; resize works. Good.
- `window.addEventListener('resize', resize)` maybe devicePixelRatio change doesn't always trigger on zoom but browser likely. Fine.
- Browser `reload` on initial had time 0.12 in screenshot and DOM 0.22; perhaps tool captures separately; okay.
- `lastReadout` force parameter weirdly ignores `now` from frame; no issue.
- `updateReadouts(force=false)` called from `frame`; if force=false and less than 80ms return. Good.
- `reset()` calls `setRunning(false)` which sets lastFrame=performance.now(); then `updateReadouts(true)` and `render()`. Fine.
- `frame` continues even paused; render each frame, no changes. Fine.
- `statusText` after `setRunning(true)` from resume "Running". Fine.
- Keyboard R when button focused doesn't reset; could be okay. Space on button triggers native click; aria-pressed maybe. Fine.
- `canvas` has no fallback text; not needed.

Need maybe include final note that long browser playback was not verified; only 12s browser and 600s offline integration. "Unverified: small-screen resize, keyboard shortcuts, and actual multi-minute in-browser playback; a separate 600s integration test was stable." That's honest. Need maybe mention console clean and no external refs. Could be concise.

Need maybe perhaps we should leave app in reset paused state? The file itself always loads running; browser state currently paused from clicks but irrelevant to saved file. Fine.

Need perhaps final answer no extra rewriting. Need mention file path clearly. Example:

`index.html` is complete and self-contained.

Implemented...
Checked in browser:
- initial render and console (no errors)
- motion frames at t ~0.1,5,5.5,6.2 etc: coupled non-sinusoidal motion, rods connected/equal, colorful age-fading trail capped ~688 points
- Pause held time/angles/trail unchanged over ~1.7s motion capture; Resume advanced them
- Reset returned 120°, -10°, ω=0, t=0, trail=0, exact start pose; screenshot shows no trail, paused by design; Resume replays.
- 600s standalone integration had max energy drift 3.7e-7 J, finite velocities; no external refs.

Unverified: keyboard shortcuts, responsive/resizing behavior, very long in-browser session beyond ~12s, different device DPRs. No console errors.

Need be precise: offline 600s simulation via Node is not browser.session but same equations; okay. Maybe mention "separate 600 s numerical check" not "standalone integration test". Fine.

Need perhaps mention reset pauses by design to allow pose inspection; press Resume to replay. Good.

Need maybe mention initial screenshot after reload looked at initial pose; yes.

Let's finalize.