Aquarium breach · hy4

We need build single self-contained index.html, then browser inspect/brief checks. Need plan robust implementation with canvas simulation. Need likely satisfy visual and functional. Need use tools. Let's inspect cwd maybe empty.

Need design. Need potentially browser tool use. Let's reason specs carefully.

Interactive 2D aquarium-breach simulation canvas.

Initial intact glass tank containing water, fish, rocks, plants, floating toy. Visible crack vertically draggable on one side below initial waterline; Press Breach; Reset same initial scene.

Which side? likely right side. Need drag visible crack vertically on right glass side, maybe handle. Need support pointer dragging via canvas. Crack perhaps vertical slot marker at edge, constrained below initial waterline and above floor. User drags crack center vertically; maybe drag handle. Provide UI with crack depth slider? But explicit drag visible crack vertically. Need actual pointer drag on canvas and maybe keyboard? Need robust test. We can make drag handle obvious. Need maybe auto-start scenario position. The crack marker at right wall perhaps dashed vertical opening / grip with arrows. Need handle (orange diamond or pill) at selected center with vertical span representing breach opening. On drag pointer anywhere on crack marker/handle, update crack center y. Could perhaps accept pointer down near right wall anywhere and drag. Also expose state via JS for browser checks perhaps custom DOM summaries / debug attributes. We should include semantic controls buttons. Need instrument simulation accessible for verification (canvas maybe not enough). Could add status readout displaying water line, outflow, breach etc and data attributes perhaps helpful to automated checks. Need actually visually and physically behave.

Need representation coordinate system. Canvas maybe 1000 x 620 with responsive scaling? We can use fixed internal resolution 1000x620 and CSS width:100%, max. Need map pointer coordinates using bounding rect. Room floor y=560; room walls x maybe 25 and 975 (room boundaries). Tank outer x=220 to 720, y=145 to 500 perhaps floor tank bottom y=500, room floor y=560? Need water exiting from right side opening and puddle on room floor. Tank maybe rest on plinth? Need vertical gap to floor? More logical tank bottom at floor y=540; room floor y=570 (baseboard), bottom thickness. But escaped objects collide with room floor y=550. Let's define global W=1000,H=620. Room floor Y=550. room walls x=25 and x=975 from y=60 to floor. Tank outer left=235, right=705, top=130, bottom=545 (bottom glass at floor-ish), water initial surface y=210. Tank width 470, interior 240..700. Floor at inner y


=535 (bottom thickness 10). Outer right wall x=700..710 maybe. Need breach opening on right wall at y chosen initial between waterline+some and inner bottom. Crack center range y=275..470, opening height maybe 62. Need opening below initial waterline: center at maybe 365. Opening rectangle from center-34 to +34. Need crack marker visible before breach showing thin orange/red fracture shape at right wall and grip. Could draw a glowing dashed vertical segment and drag handle with up/down arrows (small labels). Need maybe opening height 54 or 64; fish size perhaps fit? Need objects that fit opening carried out. Fish body length ~32, height 15 can pass opening height 64. Rocks maybe some small pebble fits. Toy maybe diameter 38 fits but is floating at waterline; as water drops may eventually get near crack if water level at opening; however outflow stops when water no longer reaches opening; toy may remain in tank above opening perhaps. Need show at least some fish and small rocks pass through. Need move objects with current then gravity/collide floor, with puddle. Initial fish at varying y including near breach. Plants anchored? "plants bend or drift": anchored plants bend under current, some uprooted plants drift. We can implement several plant objects with anchor and sway; if flow force strong, uproot and drift as loose body. Need rocks sink; toy floats; fish initially swim against current before some swept through. Need "distinct responses to buoyancy, drag, and current": define particles with buoyancy coefficients: rocks negative buoyancy / sink, toy positive / float, fish neutral with self-propulsion against current, plants drag/bend. Need water current vector near breach, varying by horizontal distance and vertical proximity, scaled with outflow. Need simulate water volume/waterline fall continuously using Torricelli-esque Q = Cd*A*sqrt(2*g*(waterSurface? head above center/bottom opening)). Need stop when water no longer reaches opening. For an orifice of finite height, stop perhaps when surface reaches top of opening? Spec says "stops when water no longer reaches it" perhaps when surface above opening top? If opening is from y=center-32 to y=center+32, water reaches opening as long as waterline y < opening bottom. As waterline approaches opening, outflow weakens. Could calculate head = max(0, openingBottom - waterY), so stops at y=openingBottom. But physically once surface drops below


top opening, flow through partial opening; oversimplified okay. Need perhaps Q ∝ sqrt(head), and use jet speed ~sqrt(2*g*head). Waterline falls continuously. Need also show jet curved downward: particles emitted from right wall at the crack, horizontal velocity based on sqrt(head) and gravity acceleration, with slight vertical spread, forming parabolic arcs. Need early outflow sample perhaps status / debug can verify jet particle positions have downward slope. Need implement jet droplets/particles or continuous ribbon shape with Bezier. Need robust visual display. Could compute jet path curve using ballistic equations and render a translucent ribbon from x=right to floor, with droplets. Could also maintain jet particle objects for physics and puddle accumulation. Need early outflow: draw bright cyan stream curving downward. Need maybe test via screenshot and DOM status. Need expose `window.aquariumDebug` with state values / sampleJet() maybe helpful to check actual physics. Add a "Sample" button? Requirement says "Verify: Position the crack, trigger a breach, and sample the early outflow." Could interpret user wants app to provide ability to sample early outflow. Maybe include "Sample outflow" button that opens an overlay/side panel with measured jet trajectory and waterline delta. We should explicitly include a "Sample Outflow" control. Then simulation supports checks. Need perhaps after clicking Breach, sample early outflow button records data from jet particles and waterline. Could display results in HUD. This helps demonstrate behavior and verification. Need design carefully.

Need use browser tool to run and inspect initial output/console, position crack via drag, click Breach, sample early outflow, Reset. We can use browser click/drag/key/etc. Need possibly not enough built-in JS evaluation tool; browser `inspect` might show DOM/console. We can use status text and data attributes. Could perhaps add run-time `window.__sim` API so browser tool might not allow arbitrary JS. `browser` tool actions reload/inspect/screenshot/motion/click/drag/key/type/scroll only; no evaluate. We can inspect DOM text via inspect, maybe screenshot. We can put visible status readouts to verify. Need perhaps add hidden elements with data. We can use `browser inspect` output maybe whole DOM. Let's learn tool behavior once app built. We can use bash to run perhaps playwright? Maybe browser tool employs actual browser. But no direct JS eval. Could embed a debug panel update on screen with numbers. Could add buttons that output measurements. Could also make


canvas respond to clicks. Need likely use coordinate clicks. We'll evaluate through screenshot and inspect.

Let's conceptualize full implementation.

Layout:
- body dark ocean-themed with header, toolbar, perhaps intro.
- app card with canvas and side panel? Single page web app. Canvas maybe 1000x620 scaled. To fit 1200x800 viewport, canvas width maybe 1000 px; header/toolbar around 130, canvas 620 maybe total 770. Need side details perhaps overlay in canvas HUD rather than separate panel.
- Toolbar top: buttons "Breach" (primary), "Reset", "Sample Outflow" maybe. Crack depth readout and status.
- Canvas area responsive with width:min(100%, 1000px), aspect ratio 1000/620, maybe CSS height auto. Need mapping. If browser viewport 1200x800 and canvas 1000x620 plus header maybe ~100 = 720, okay.
- Canvas uses devicePixelRatio perhaps transform scale to fixed logical coords. Set width/height attributes to W*dpr? Easiest set canvas.width=W*DPR, canvas.height=H*DPR; ctx.setTransform(DPR,0,0,DPR,0,0), CSS width 100%, height auto. But if CSS displayed width 1000, internal ratio fixed. Mouse map from rect to W/H. Need avoid dpr scaling weirdness across resizes. Set CSS aspect ratio. Use `ctx.setTransform(canvas.width/W,0,0,canvas.height/H,0,0)` each frame maybe. If canvas.width= W*DPR and height H*DPR with DPR maybe 1 or capped 2, then drawing logical coords scaled. Good. Could just use width=1000 height=620 no DPR for simplicity/screenshot. Set CSS width:100%; max-width:1000px. Browser screenshot likely scale to 1000 widths. Fine.

State object:
```
const W=1000,H=620, FLOOR=550;
const room={left:30,right:970,top:65,floor:FLOOR};
const tank={left:230,right:710,top:120,bottom:545,wall:10};
const interior={left:240,right:700,top:130,bottom:535};
const initialWaterY=205;
const openingHeight=58;
let crackY = 365;
let sim = ...
```
Need note opening center constrained perhaps 275..470 so


top > initialWaterY+? Need all opening top under waterline: min center 205+30+15=250, max center bottom -30 -15=490. Set MIN=270, MAX=470. Good.

At initial state:
- water fill from current waterY to innerBottom.
- rocks: perhaps 7 objects at bottom positions with radii 9-22, some small enough opening. Need initial rocks at rest on bottom; y = innerBottom-r; velocities zero; states "submerged"; `density` ~2.4, buoyant accel negative? In canvas y down, gravity +g, buoyancy subtract `buoyancy*g`. For rocks, buoyancy ratio 0.35 => net down (settle). Toy buoyancy ratio maybe 1.8 => net up and at surface; we can implement float constraint. Fish neutral with swim. Plants anchored at bottom, flexible stems drawn as bezier; under current, tip displacement to right. Some plants uproot if flow strong. Need reset same exact initial scene deterministic (arrays seeded with fixed positions; no Math.random initially, or deterministic PRNG). We can use fixed arrays. Dynamic effects can use random but reset reinitializes with same state. Need same initial scene => deterministic positions and maybe animation phase fixed. Could avoid random entirely for initial and use deterministic noise based on time. For droplets/fragments, use seeded PRNG on breach/reset. Need no changes to initial.

- toy: floating at x=405, y = waterY - radius*0.35 maybe center y=190? Draw rubber duck or ball? "floating toy" can be a red-yellow beach ball / duck. Simpler: orange/white striped beach ball or little rubber duck. Need recognizable. Draw a yellow duck with body/head/beak perhaps. Buoyancy response: center follows waterline with bob; current pushes right, but while in tank maybe constrained by right wall until breach? If waterline above opening, toy floats far above crack and remains in tank; could eventually be carried out if waterline falls near opening and current strong enough near surface? But flow weakens near opening; likely it won't. Need "movable objects that fit the opening can be carried out by the flow" not necessarily toy; fish and small rocks can. Yet demonstrating toy floats is enough. But perhaps we should allow toy to be carried out if crack is high, near waterline; then once waterline falls to crack it could flow out


through opening, maybe nice. Need opening below initial waterline but could be at y=280; initial waterline 205, opening top 250. As waterline drops to ~280, toy at y~270, current near opening and can be pulled out if opening top ~250 and waterline around 280; but water no longer reaches "opening" until y=bottom~310. It could pass during middle. Need make flow current broad enough and apply toy. Could let toy get sucked into current even from above via downward flow near right wall. Need transitions to gravity outside and floor collision. Could be carried out when near opening. Need define all movable objects with width,height,state,buoyancy, etc and passage if `height <= openingHeight*0.9`. Toy height maybe 42, opening 64, fits. Rocks radii maybe 10-18; large ones don't fit. Fish height 16 fits.

Need water physics:
- `waterY` starts 205.
- `escapedVolume` / puddleVolume maybe in arbitrary area units. Each frame `dt` seconds. Tank interior area width=460, water depth initial 330. If outflow Q ~ openingHeight * width? Need reasonable fall rate. Want waterline fall from 205 to crack bottom (~395) within maybe 15-25 seconds for visible continuous fall. Need tune. Could compute head = max(0, openingBottom - waterY) in pixels. `flow = c * sqrt(head / 300)` maybe. Need visual outflow weaken gradually. For crack center 365, opening bottom=397, initial head=192. Flow normalized ~sqrt(192/220)=0.93. Waterline fall rate perhaps 12 px/s initially, declining to zero near opening; total ~20-30 sec. Use `dy/dt = 18 * sqrt(head / 200)`; with head=192, ~17.6 px/s; as head decreases, rate drops; time integral from H0 to 0 = sqrt(H0)/9? calculate dH/dt=-18sqrt(H/200)= -1.273 sqrt(H); solution sqrt(H)=sqrt(H0)-0.6365t, total t=sqrt(192)/0.6365=21.8 sec. Nice. Could be ~20 sec. Need maybe slower/faster depending. Use `fallRate=22*sqrt(head/200)`, total 17.8 sec. Good. Need "sample early outflow


" after maybe 2 sec; waterline begins to fall. Could have status numbers. We can expose waterline and flow.

- Jet speed `v0 = 140 + 240*sqrt(head/220)` perhaps initial ~365 px/s; gravity 520 px/s², starting x=710, y=crackY maybe; hits floor 550 from y=365 (dy=185) in t=sqrt(2*185/520)=0.84s, x travel ~306 px, landing x~1016 beyond wall 970, so need room wall to constrain puddle perhaps jet hits right room wall before floor depending crack. Room right=970; from 710 distance260; t=0.7s; drop ~127 -> y=492, hits wall at y~492 then slides down. Need jet curve visible. Could reduce v0 ~180-260; initial 300 gives t to floor .84, x=252 -> x=962, close to wall; good. With crack center lower y=400, time to floor .75, x=225 ->935. Use `v0=95+210*sqrt(head/200)` -> initial ~300. At low head 20 -> 161, x to floor ~120. Jet clearly curves. Need perhaps show ballistic ribbon from breach to floor/right wall. Compute path x=right+ v0*t, y=startY + 0.5*g*t² + small initial downward velocity based on vertical opening position. Need stop at floor or right wall. Render ribbon with multiple segments, width proportional flow and tapers; draw quadratic path. Could sample path and store in `jetProfile` for debug. Need early outflow sample perhaps calculate y at x positions from ribbon, and report "Δy over first 160 px" or emission vs landing. Display `Jet drop: +XX px across first 160 px` and `Waterline: +XX px` etc. Could add state `jetSamples` from emitted droplets. Need button capture.

- Jet droplets: spawn each frame based on flow; positions from orifice x=right+2, y=crackY + random spread (openingHeight*0.4), x velocity = base speed*(0.75+random*0.5), y velocity maybe -10..20; gravity 500. Update; on hit floor or room wall, add to puddle and remove. Need perhaps droplets merging with puddle and puddle spreading. Visual ribbon plus


droplets. Need not model every water particle too heavily. Need deterministic PRNG reset.

- Puddle: accumulated escaped water on room floor constrained by floor and room walls. Need spread shape dynamically with volume. We can define puddle area outside tank from x=tank.right to room.right, with floor y=550. Need water begins at floor and depth grows and extends horizontally. A simplistic rectangular/wedge pool with volume `V = area`. Since room area right of tank width=260, max depth maybe 80. Need puddle spread constrained by floor and room walls. Could compute `depth = min(60, sqrt(volume/??))`, and `spread = min(rightWall-tankRight, 60 + volume/depth)`. Need make spreading tied to volume, and eventually fill from breach side to right wall with a level free surface. More physically simple: puddle is a flat pool with depth d and width s, where area = d*s; define max width = room.right - tank.right - 4 (256). Prescribe width from volume: `spread=clamp(30 + sqrt(volume)*1.2, 30,maxWidth)`; `depth=min(65,volume/spread)`; if spread at max, depth increases. Yet volume could become huge: tank water volume 460*192 ≈ 88k px²; outside area max width 260 * maybe 100 depth =26k, impossible. Need use scaling for visual volume; can use `puddleDisplayVolume += outflow*dt*0.25` and cap. Or just map water lost (waterY-initial)*tankWidth to puddle depth via factor 0.15. Need visually plausible. Could use fluid "units" scaling: `puddleVolume += (waterLost * interiorWidth)*0.18`, max ~16k; spread max 250 and depth ~64. Great. Need define constraint by floor and room walls; x from tank.right+? maybe 712 to room.right; floor y=550. Draw puddle as polygon with wave surface, from x=tank.right to x=rightEdge, with depth ramps perhaps. Need floor collision for objects use puddle surface? Spec only floor collision. We can consider puddle surface as fluid drag region; objects entering puddle experience buoyancy/drag perhaps. Need escaped water puddle and objects collide with floor. Could implement collision with room floor y=FLOOR-r, then friction. Current/puddle buoyancy


for toy if outside maybe float on puddle. Need "Objects leaving water transition to gravity-driven motion and collide with floor." Could apply gravity to all escaped objects and floor collision; if toy is buoyant perhaps it floats on puddle surface rather than floor. But requirement says objects leaving water transition to gravity-driven motion and collide with floor; likely generic objects. We can ensure fish, rocks, plants, glass fragments fall and hit floor. Toy perhaps could float in puddle due buoyancy; but then doesn't collide with floor. Could bounce/settle on floor then bob? Need perhaps keep explicit gravity for all, and floor collision. Positive buoyancy could apply when in puddle (which is water) - then toy floats. That's internally consistent. But requirement wants objects leaving water to gravity-driven motion and floor collide; we can do that for fish/rocks/fragments; toy may be pulled by gravity until it hits puddle and then floats at its surface. Could still count. Maybe better make toy transition to gravity outside; if no puddle yet, hits floor with bounce, then once puddle rises around it, buoyancy lifts to puddle surface. That shows distinct buoyancy. Need implement.

- Glass fragments: on breach, break panel around selected opening. Draw remaining right wall as segments above and below opening; perhaps cracks radiate from opening and shards. Need fragments rotate, collide, experience resistance in water. Spawn 12 triangular glass shards near right wall around opening, with initial vx rightward and upward/downward spread, angular velocity. While x<right and y>waterY (in water), apply drag proportional to flow/spatial velocity (`v *= exp(-drag*dt)` maybe 2.5), buoyancy and gravity; outside water, normal gravity. Collide floor, right wall, maybe tank walls; friction and rotation damping. Need fragments perhaps fall with jet and land. Need draw translucent angular polygons. Need ensure some inside tank with water resistance. Spawn half outward (x>right) and half inward (x<right) maybe. Need panel breaking around selected opening: remove segment from right glass wall between `openingTop` and `openingBottom`; draw jagged broken edges; shards. Also cracks extend above/below opening; draw white jagged lines. Need perhaps initial intact glass with crack marker being just a "pre-crack" or targeting marker. The phrase "Initially show an intact glass tank ... Let the user drag a visible crack vertically on one side below the initial waterline" means initial crack visible but


tank intact. Could draw a thin red crack on right side (pre-existing fracture) that user can drag vertically. At Breach panel breaks around selected opening. So initial glass remains intact but has a crack line. Need make clear drag handle. We can draw a glowing zigzag line at x=705 from crackY-30 to +30, plus a circular grip at center perhaps to right/left with arrows. Should be visible. Need perhaps allow drag marker by grabbing anywhere within 40 px of right wall near crackY. Maybe add pointer cursor and hover. Need use pointer events.

- Crack position: user drag vertically. Need prevent drag after breach perhaps. On pointerdown if not breached and near crack x within maybe 55 and y within 50, set dragging. On pointermove, set crackY clamp from pointer y to MIN..MAX. Need possibly support direct click at a target y near right wall; if near wall anywhere below waterline, snap crack to y. Need hint "Drag ↕ crack on right glass". Need perhaps add keyboard arrows to adjust selected crack for accessibility; could make canvas focusable and arrow keys. But not required. Could add hidden range? However user says drag. We can still add `ArrowUp/ArrowDown` controls. Need maybe provide a slider? Might be okay but not needed; visible crack can be dragged. Need ensure browser drag action works: tool `drag` from x,y to x,y likely coordinates viewport. Need know canvas position. We'll use screenshot and perhaps compute. If canvas max width 1000 and centered, left offset perhaps (1200-1000)/2 =100, header maybe 100. Tool coordinates 1200x800. Need account. Could perhaps make canvas take exactly 1000 width and body no margin, centered via 100px margins. Need identify actual positions via screenshot or DOM inspect. We can set app width 1000 and margin 0 auto; header etc. Canvas CSS width 1000px (max width 100%). On viewport 1200, x offset 100. y offset maybe header ~100. Need browser screenshot to see. Could add direct click target, though tool drag coordinates. We can query DOM rect via `inspect` maybe.

- UI:
```
<header>
<h1>Aquarium Breach Lab</h1><p>Drag the glowing crack ...</p>
<div class=toolbar>
<button id=breachBtn>Breach</button>
<button id=resetBtn>Reset</button>


<button id=sampleBtn>Sample outflow</button>
<div class=readout ...>
```
Maybe a compact HUD over canvas with:
`Mode: INTACT`, `Waterline: 205 px`, `Head: 0`, `Outflow: 0%`, `Crack y: 365 px`, `Escaped: ...`, `Swept out: 0`. Plus measurement panel that Sample button fills. Could make data attributes on canvas or body:
```
document.body.dataset.state = ...
document.body.dataset.waterline = waterY.toFixed(1)
...
```
Then browser inspect can check. Need perhaps `window.__aquarium = {getSnapshot, ...}` accessible if browser tool can evaluate? no need but nice.
Could include a visible "diagnostic strip" under toolbar with `<output id="metrics">...`. Need ensure not too cluttered.

- `Sample Outflow` behavior: At any time, capture:
  - state
  - waterline drop = waterY-initialY
  - normalized outflow = currentFlow (0..1)
  - jet curvature computed from ballistic profile: y at x=origin+120 and y at x=origin+220; difference; ensure positive downward. Or from actual droplets: collect early droplets near x range and fit? Need "sample the early outflow" likely button should record data from jet: sample first 8 particles emitted? Could maintain `earlyJetSamples` as array of trajectory points from a tracer. Could spawn a "tracer" set at breach with x,y,vx,vy and record positions until floor. On `Breach`, create maybe 5 tracer particles flagged `tracer`. Then `Sample` computes:
    - `jetDrop = tracer.y - tracer.startY`
    - `jetRun = tracer.x - startX`
    - `slope = drop/run²` (parabolic)
    - waterline change.
  - Show panel `Sample @ t=...: jet x +..., y +...; waterline +...; outflow ...; objects in current ...`. Need maybe button auto-sample early if pressed after a breach. Could perhaps automatically sample at 1 second after breach and store; button displays last sample. Need requirement "sample the early outflow" in verification; we can click it shortly after breach. Could provide `Sample` button and perhaps an automatic snapshot at 0.75s. We can also update sample panel on click. Need details.

  - Could


have button enabled only after breach, but perhaps sample before yields message "Breach first." After breach, live tracer. Need click within a few seconds. Maybe make "Sample outflow" produce a freeze-frame of tracer and report. Need allow repeated samples. We can have `sampleNow()` after breach: create a fresh tracer at the orifice with current velocity, track it for 0.7 seconds asynchronously? Could compute expected profile instantly from current speed and gravity, and show numeric result. But "sample" might mean inspect actual positions; better maintain actual tracer droplets. On Breach, repeatedly spawn tracer at perhaps every 0.12 sec during first 1.2 sec and record path points. Button reads those. Or use live `traceDroplets` array. Let's implement robustly:
    - At breach, spawn tracers periodically (while t<3s perhaps) with `trace: true`; each tracer stores `originX`, `originY`, `path` every update (maybe capped). On update, if tracer hits floor/wall, mark `landed=true`, retain path.
    - `sampleOutflow()` selects first tracer with >=3 points and drop >20, e.g. x advance >100, then computes y drop at last point, max slope, curvature (compare vertical displacement to linear extrapolation). Shows:
      `Jet: +N px forward, +M px down (parabolic), waterline +K px, outflow P%, current-affected N objects.`
    - Also show small mini graph in DOM? Could use canvas overlay or CSS. Could add `<canvas id=sampleGraph>` but requirement single canvas? It says on a canvas; can have second small canvas perhaps but simpler avoid. Could draw sample markers on main canvas when sample active: highlight tracer path with dots and display a tooltip card. Need maybe use HTML overlay panel with text.
    - Use invisible status `<div id="liveMetrics" aria-live=...>` and data attributes.

Need "sample early outflow" perhaps explicit sample bracket drawn on canvas: a small cyan dashed path with numbered points and a label `SAMPLE: Δy +...`. Could implement.

Physics details:

Object class:
```
function makeMovable({type,x,y,r,w,h,mass,buoyancy,drag,thrust,...}) 
```
Use x,y center; velocities vx,vy; angle,omega; state inTank/inFlight/outside; escaped boolean; passable; life? Need consistent.

Initial scene:
```
const initialState = () => {
 waterY=205;
 mode='intact';
 breached=false;
 flow=0;
 puddleVolume=0;
 objects = [
  rock(x=300,y=525,r=18,...),
  rock(...),
  ... small pebbles near right side perhaps x=625,y=520,r=10
  fish(x=370,y=270,...), fish(x=470,y=330,...), fish(x=580,y=350,...), fish(x=620,y=390,...), fish(...),
  toy(x=420,y=...)
 ];
 plants = [
  {x=285, baseY=535, h=95, segments=..., anchored=true, ...},
  ...
 ];
 fragments=[];
 droplets=[];
 crackY=initial? reset should restore same initial scene including crack position? "Reset to restore same initial scene." Does that mean crack position also reset to initial position? Probably yes, same initial scene; set crackY=365. But maybe keep user-selected crack position? "same initial scene" likely reset all including crack position. Could perhaps preserve crack position for convenience? Need strict interpretation: same initial scene => restore crack to initial. We'll set crackY=365. Screenshot after reset should match.
```
Need initial objects move with subtle swimming even before breach but "same initial scene" at reset should be deterministic; can set time=0 and use deterministic sin phase. Plants sway gently. Need no random. Objects fish can animate by sin(t), but initial positions same. Could make fish move slowly before breach; reset reinitializes positions and time=0. Fine.
Need avoid fish moving out of tank before breach. Clamp.

Water current:
When breached and flow >0:
- Need vector field. Since water flows toward opening on right side. Compute for each object:
  - `head = max(0, openingBottom - waterY)`
  - `flow = sqrt(head/200)`, perhaps clamp 1.2.
  - For point (x,y) inside tank and y > waterY:
    - horizontal influence stronger near right and near opening y: `dx = (x - interior.left)/(interior.width)` perhaps horizontal speed from continuity `u = flow*20 + flow*160*exp(-((right-x)/180)^2)` toward right. Need vertical component toward crack: `v = flow*120 * sign(crackY-y) * exp(-((right-x)/170)^2) * exp(-(abs


(y-crackY)/180)^2)` maybe.
    - Add downward suction near wall around crack: vertical vector toward crackY.
    - Need maybe current field visible via streamlines/particles (small dashes) so "nearby objects respond to current". Draw curved streamlines from interior to opening, with arrowheads pulsing based on flow. Also animate current particles that drift toward breach. Need init these on breach or continuously spawn small specks. Could draw 10 bezier curves representing flow from left/mid region to opening; opacity flow. Need maybe fish visibly move right/down. Good.
  - Objects with different `drag` respond:
    - rock: high mass, drag coefficient low, current force scaled by drag/mass; mostly sink, but small pebbles may slide right near bottom and potentially be carried out if x near wall and opening above bottom? Crack at 365, small rock at y=525 needs upward suction to opening; unrealistic. Could spawn small rocks initially around y=400 on shelf? Need "rocks sink" demonstration: maybe on breach a few rocks from elevated ledges fall. Initial tank can include rocks at bottom plus one or two on a rock shelf at mid-height. Then on breach they sink. Need small pebbles near breach perhaps on a ledge at y=365 that can be swept through. Could design rock objects:
      - large rocks at bottom.
      - small pebbles at initial y = crack? But crack can be dragged; need generic. Could place 2 small loose stones on a small rock ledge around y=370, x=560; when breach, they fall/slide with current. But intact initial scene with rocks should be stable; perhaps on a rock shelf/ledge. Add decorative stone shelf at x=540..650,y=390 with small pebbles resting on it. Yet shelf would be fixed and may obstruct breach. Need maybe draw a sloped rock shelf at x=520..620 y=420; small pebbles on top. When current flows, they slide toward right and can be lifted by current into opening if crackY around 365 or 400. Need tune.

Could have small rocks as mobile objects initially at bottom near right x=650,y=525, and strong upward current toward crack can lift them if crack is near bottom. But if crack at 365, up 160 px, improbable. Could still have some small pebbles be swept out due current abstraction. Need at least fish and plants


are carried out. "Movable objects that fit the opening can be carried out by the flow" can be fish and toy; rocks too large don't fit. Need perhaps define objects with `fit = h <= openingHeight` and apply passage. We can have small round stones with diameter 22 fit; if near crack, suction may carry them. Could position one small stone at y=crackY+? dynamically? Since crack is draggable, maybe on Breach we can reposition certain "loose gravel" near crack? Not ideal. Could place loose rocks at several heights on a vertical stack/shelf? Hmm.

Maybe define small pebbles suspended? Rocks should sink; initial scene can have them falling/settling from initial positions above bottom, but should be at rest initially after enough time. Need no. Could use rock shelf at multiple heights. Maybe miniature rocks on plants? no.

Fish: need 5 fish at y = 250,300,350,390,440, x various. They will be sucked toward opening depending crack; at least one near crackY. Pass through if within opening vertical extent and x reaches right wall. Need current vertical pull.

Toy: floating at waterline y=198, x=450. Current near surface might push it toward right. But vertical pull toward opening could drag it down; positive buoyancy attempts surface. Need perhaps tethered? We can show it bobbing and tilting, staying at waterline. If crack near waterline and waterline drops to opening, it may be carried out. Need implement maybe.

Plants: anchored at bottom x=280,370,460,600. Bend to right based on flow and proximity to right wall. One or two at x=620 with `rootStrength` weak; current can uproot, turn into drifting plant object (height maybe 70, width 12) that can fit opening if openingHeight 64? h=70 > opening, perhaps leaves trailing fronds; can still pass with height interpreted 26? Need define height=24 for uprooted clump. Could uproot and be swept out. Need perhaps one plant near right wall at x=640; its tip bends, then root breaks when `flow*proximity` high; turns into mobile object with buoyancy slightly negative / drag high. It could be carried through opening. Need synchronize.

Need "objects leaving the water transition to gravity-driven motion and collide with floor." We need explicit objects state transitions:
- If any movable object's x >


tank.right + 4 and was inTank, set `environment='air'`, `escaped=true`, `vy += gravity*dt`, perhaps initial vy retained, `vx` retains jet horizontal; add puddle interaction.
- floor collision at y+r >= FLOOR: y=FLOOR-r; vy*=-restitution; vx*=friction; omega damp. For rocks/fish/plant/fragments. Need right wall collision x+r>=room.right: x=room.right-r; vx*=-0.25. Need perhaps left wall at tank.right? They won't go back. Need puddle drag if submerged in puddle region: if y > puddleSurfaceY and x>right, apply drag and buoyancy. For rocks sink to floor; fish settle. Toy floats at puddle surface. Need perhaps define object radius/h vertical extent for collisions.

Need initial water exit effect:
- waterline is horizontal line across tank interior, with wave surface. Draw water fill gradient from waterY to innerBottom with alpha.
- submerged objects drawn behind water? Need draw order: room background, tank back, water, current streamlines, plants (some behind), rocks, fish, toy, front glass highlights, water surface, right wall segments, fragments, jet, puddle, maybe puddle foreground. Need physically correct layering:
  1. room background / walls/floor
  2. tank back glass fill
  3. water area
  4. bubbles/streamlines/plants/rocks/fish/toy
  5. glass borders and reflections
  6. jet and puddle outside on top maybe jet should be in front of wall and floor.
  7. fragments and escaped objects
  8. crack marker / labels.
Need puddle drawn behind escaped objects, from x=right to right wall, floor to puddle surface. Need jet drawn before puddle? Jet should meet puddle and perhaps splash. Could draw puddle then jet droplets/stream on top. Need avoid covering room wall perhaps.

Room: floor line from x=25 to975 at y=550; wall perhaps vertical boundaries; lower floor area below 550 cross-hatch/brown. Need maybe also left wall x=30, right wall x=970 with vertical trim. Puddle constrained by right wall x=970 and floor y=550; left boundary tank side x=710. Actually escaped water could also flow left of tank? It exits right, so pool from x=710


to x=970. Need tank occupies x=230..710; floor under tank. Puddle could spread under tank too due floor; but constrained by tank base? Could fill from x=710 leftwards under tank, but tank bottom at y=545 close to floor (5 px gap), so puddle could extend under it. Spec says spreading puddle constrained by floor and room walls; perhaps easier: puddle from x=tank.right (710) to x=rightWall (970), with spreading rightward front, floor. Need show right wall constraint: once reaches right wall, depth rises. Could also spread leftward under the tank along floor to room left wall, eventually. To demonstrate both room walls, maybe puddle center around breach and spreads both left and right, with left boundary down to room.left; but tank base sits on floor and water can visually seep under it. Could draw puddle from leftEdge to rightEdge symmetric around impact point, constrained by room walls. Need more complex but doable. We can define puddle extents `puddleLeft`, `puddleRight` around impact x, spread with volume and clamp to room.left+8, room.right-8; draw a wavy flat surface across that interval. Since tank bottom at y=545 (5 px above floor) covers some puddle; draw puddle over tank base maybe. We can set tank bottom y=535, room floor y=550, leaving 15 px gap. Then puddle can spread beneath tank visually. Need perhaps tank sits on short legs at x=250,690, allowing puddle to spread. Better: tank bottom y=525, room floor y=550, legs from y=525 to550 (25 px). Then water can spread under tank, constrained by room walls. This gives more visible floor area and puddle. Need adjust interior bottom=515, wall 10. Initial water depth from 205 to515 =310. Opening min/max 270..460. Good. Tank top=120, bottom=525. Room floor=550. Tank on four legs? Simpler draw two pedestal blocks at x=255 and x=670 from y=525 to550; puddle behind them maybe. Need escaped objects collide with floor y=550.

Could define puddle extents from impactX (landing point) and spread:
```
let impactX = clamp(calculate landing from current flow, tank.right+40, room.right-20);
puddleVolume += ...;
let half = clamp(Math.sqrt


(puddleVolume)*1.1, 20, ...);
left = clamp(impactX-half, room.left+8, room.right-8);
right=clamp(impactX+half,...);
depth = min(75, puddleVolume / (right-left));
if boundary reached, depth increases.
surfaceY = FLOOR - depth.
```
Need maybe puddle "spreading" visually over time; at first small near impact x, then edges expand. Need draw shape with sloping edges: polygon starts at left,FLOOR; top at left+15,surfaceY; along surface with small waves to right-15; down to right,FLOOR; close. Constrain to walls: if left=room.left+8 etc, vertical edge at wall. Need explicit wall labels maybe. Need never extend below floor or beyond walls. Need collisions with floor and walls.

Need puddle volume mapping from water lost. We can compute continuous:
```
waterLostArea=(waterY-initialWaterY)*interiorWidth;
puddleVolume = min(maxVisual, waterLostArea*0.16);
```
At final waterLost~190*460=87400*0.16=13984. Max area available (room width 940*80=75k), so puddle would be shallow depth~15 if spread huge. Need spread maybe 400 width, depth35. Use sqrt to spread:
```
half = min(420, 30 + sqrt(volume)*2.2)
```
sqrt(14000)=118*2.2=260+30=290, width580, depth24. Nice. For early volume maybe 2000 sqrt=45*2.2=129, width258, depth8. Good.
Need impactX maybe around 900. Spread left reaches641 (under tank) and right clamps at962. Good. Need floor/room walls obvious.

Need current field / water volume consistency: outflow enough to fill puddle. We can show `Flow rate` readout. Need stop when waterline >= openingBottom - maybe set exactly openingBottom when flow zero. We can integrate until 0.5 then set `waterY=openingBottom`, `flow=0`. Need then jet stops after existing droplets clear. Need remove stream ribbon; puddle remains. Need outflow weakens continuously; normalized flow = sqrt(head/referenceHead). Need perhaps `flow` not jump at breach? At t=0 from 0 to computed speed; okay. Need maybe


breach animation with `breachProgress` from 0 to1 over 0.4 sec and ramp flow, so panel visibly breaks. Need if user samples too early maybe flow ramps; can set `breachAge` and `ramp=min(1,age/0.5)`. Need early outflow within ~0.5s. Good.

Need crack in initial state maybe represented by a thin jagged line not opening. Need breach panel "breaking around selected opening": on breach, panel segment shatters into fragments, maybe wall still drawn with jagged cutouts. Need draw crack arms to above/below.

Potential handling of crack drag:
- `crackY` initial 365.
- On pointerdown:
```
const p = pointer(e);
if (!breached && Math.abs(p.x-tank.right)<55 && p.y>initialWaterY+20 && p.y<innerBottom-20) {
 dragging=true;
 crackY=clamp(p.y,...);
 canvas.setPointerCapture(e.pointerId);
}
```
This means clicking anywhere on right wall below waterline sets crack center. Need perhaps only near visible crack for drag but direct positioning convenient. After pointerdown drag vertical. On pointermove if dragging update.
- Cursor `ns-resize` when hover near crack/wall. Could set canvas.style.cursor dynamically.
- Need perhaps add crack handle with text "DRAG" or arrows. Draw at x=right+30, y=crackY, a circular pill and arrows, and a dashed line to wall. Need avoid overlapping jet zone? Initial only. Label maybe `BREACH SITE · DRAG ↕`. On right of tank, enough room to room right. Use x=745. Need draw in initial state only. cracked line on wall x=705. Maybe use strong orange.
- Could also add keyboard focus and arrow keys to adjust crack by 8 px; click to focus canvas. Add `tabindex=0`. Need maybe document-level keydown when canvas focused. Add key handler:
```
if (e.key === 'ArrowUp'||'ArrowDown' && !breached) crackY += ...
```
Maybe plus/minus. Good.
- Need mark crack position in readout `Crack center: 365 px`. Need maybe convert to "below surface: 160 px". Good.

Need browser tests:
1. Reload, screenshot initial. Check console with inspect. Need maybe a console clear. Add no errors.
2. drag crack handle from


some coordinate to another. Need calculate canvas actual position. Could perhaps use browser inspect to see DOM bounding boxes; tool may output. We can use `browser inspect` after initial.
3. click Breach at known button coordinate from screenshot / DOM. Need perhaps use direct selector? tool click uses x,y only. Could use browser inspect to get bounding rect maybe returns metadata. Or can use keyboard shortcuts via `key` if buttons focusable; no selector. Need use screenshot. Could perhaps include large wide button at x approximate. We can use `browser key` with Tab navigation and Enter. But easier with screenshot coordinates. We'll see.
4. early sample: click Sample button maybe after 1 sec. Need maybe `browser motion` captures frames? tool. Could use `browser screenshot` after a few tool calls (time passes). Could trigger sample after e.g. 2 sec. Need use `bash sleep`? Browser runs in persistent page; tool calls likely time between. Could call bash `sleep 2` via parallel? We can execute `sleep 2` with bash, then screenshot. But interaction via browser tool might reload? Need perhaps use `browser action: click` then `bash sleep 2` (process time passes) then browser screenshot. Could use `browser action: motion` to capture frames. We'll see.
5. Check metrics visible with waterline drop, jet drop. Need maybe detect via inspect output. Could also put status in DOM text.
6. Reset click, inspect initial state.
7. Console errors. Need maybe catch errors? Add `window.onerror` to show status? Not necessary but can check inspect console. Need robust code.

Need perhaps implement a simulation test API accessible from URL? Could use hash commands? Browser tool only click. Could add hidden buttons / keyboard shortcuts. We can design with a "Run verification" button that programmatically drags crack / breaches / samples / reset? But that might be overkill and perhaps undermines user interactions. Could include a `Run Check` button? Not required. We might use that to test internal state via visible output. But simpler status panel.

Need guarantee app runs offline. Use no external fonts, no assets. Use CSS only system fonts. Need perhaps include `<meta name=viewport>`. Need no network requests. Avoid emojis? Unicode okay. No external. Need maybe use `requestAnimationFrame`, no timers? fine.

Need write code. Could be ~1000 lines. Need carefully avoid syntax errors. We


can use bash/node to syntax-check extracted JS maybe. Need implement thoughtfully.

Let's outline code structure in detail.

HTML:
```
<!doctype html>
<html lang="en">
<head>...
<style>...</style>
</head>
<body>
<main class="shell">
 <header class="top">
   <div>
     <span class="eyebrow">INTERACTIVE PHYSICS LAB</span>
     <h1>Aquarium Breach</h1>
     <p>...</p>
   </div>
   <div class="legend">...
 </header>
 <section class="controls" aria-label="Simulation controls">
   <button id="breachBtn" class="primary">...</button>
   <button id="resetBtn">...</button>
   <button id="sampleBtn">...</button>
   <div class="readouts">
    <div><span>State</span><strong id=stateOut>INTACT</strong></div>...
   </div>
 </section>
 <div class="canvas-wrap">
  <canvas id="sim" width=1000 height=620 tabindex=0 aria-label=...></canvas>
  <div id="sampleCard" class="sample-card" hidden>...</div> maybe overlay.
  <div class="hint">...</div>
 </div>
 <section class="footer" id="diagnostics">
  <div class="status" id=statusText>...</div>
  <div class="bar"><i id=flowBar></i></div>
  <div id=sampleText>Press ...</div>
 </section>
</main>
<script>...</script>
</body>
</html>
```
Need perhaps CSS sample card overlay top right inside canvas. Need avoid covering jet; position top:12px,right:12px width 280. Could cover room but okay. Maybe draw sample card only after button click and auto-hide? Could place below canvas in footer instead. Simpler: `diagnostics` below canvas with two columns: "Live" and "Sample". Need canvas already 620 high; header 90+controls 60+canvas 620+footer70=840 > 800 viewport, could scroll. Browser tool screenshot only viewport 1200x800, but can still click controls if top. Need fit to 800 maybe reduce canvas display size: canvas CSS width 100%, max-width 1000, but shell maybe width 1040. At viewport 1200, canvas width 960?


height 595 (ratio .62). Header ~70, controls ~58, footer ~50 =773. Good. Set shell max-width:1040, canvas width:100%; internal W=1000 so displayed ~1000 if shell width 1040 padding20 =>1000. height620 => total ~800. Need maybe head 70+controls64+620+diagnostics60+gaps=840. Could shrink canvas via CSS `height: min(62vw, 560px)` and width maybe 100%, but preserve aspect ratio. Use `.canvas-wrap { aspect-ratio:1000/620; } canvas{width:100%;height:100%;}` and shell max-width:960 => displayed 960x595. Then total ~70+60+595+50+30=805. Still slight. Use max-width:920 => canvas920x570, total ~760. Good. Then internal coordinates scale 0.92. Pointer mapping handles. Tool coordinates need offset. Use shell width `min(100%, 940px)`; body padding maybe 10. Canvas displayed 900? `shell{max-width:960px; padding:0 16px}` so content ~928, canvas928x575. header maybe 64, controls60, diagnostics60 + gaps=30 total789. Fits. Good.

Need perhaps make canvas at max-width 940 and height auto; okay.

CSS:
- root colors dark navy, cyan, orange. Buttons.
- body background radial gradient no external.
- shell card border etc.
- canvas background maybe #0b1624; border-radius 14; box shadow.
- controls flex wrap.
- readout pills.
- sample panel with monospace.
- hint absolute overlay bottom left perhaps can be canvas-drawn instead; avoid DOM overlay.
- sample card overlay perhaps bottom right, but diagnostic text below easier.
- `@media` adjust.

Canvas drawing functions:

Constants:
```
const canvas=..., ctx=...
const W=1000,H=620;
const ROOM={left:28,right:972,top:58,floor:550,wall:12};
const TANK={left:225,right:710,top:120,bottom:525,wall:10};
const IN={left:TANK.left+TANK.wall,right:TANK.right-TANK.wall,top:TANK.top+TANK.wall,bottom:TANK.bottom-TANK.wall};
const WATER0=205;
const OPEN_H=62;
const CRACK_MIN=WATER


0 + OPEN_H/2 + 18 =254; MAX=IN.bottom-OPEN_H/2-20=474;
const INITIAL_CRACK=365;
const GRAVITY=560;
```
Maybe initial room wall. Need panel right wall x=TANK.right - wall/2? Draw wall thickness 10 from x=700 to710. Opening cuts from x=700..710. Jet starts x=713.

State:
```
let S;
function reset(){
 if(raf?) no need; cancel? keep loop.
 S={
  mode:'intact', breachAge:0, simTime:0, waterY:WATER0, crackY:INITIAL_CRACK,
  flowNorm:0, flowRamp:0, puddleVol:0, lostWater:0,
  droplets:[], fragments:[], bubbles:[], currentSpecks:[],
  fish:[], rocks:[], plants:[], toy:null, movables:[],
  shards...,
  sample:null, tracerId:0,
  tracerDrops:[],
  escapedCount:0,
  bubbleSeed...
 };
 seed = 12345;
 ...
 updateUI();
}
```
Need maintain global `S` and `rng` state. Use deterministic PRNG:
```
let seed=1234567;
function rand(){ seed=(seed*1664525+1013904223)>>>0; return seed/4294967296; }
function range(a,b){return a+(b-a)*rand();}
```
Reset sets seed fixed. Initial shapes can be fixed arrays.

Movable object common fields:
- `id`, `kind`, `x,y`, `vx,vy`, `r` (collision radius), `w`,`h`, `angle`,`omega`, `mass`, `drag`, `buoyancy`, `region` ('tank','air','puddle'), `escaped`, `passH`, `passW`, `selfSwim`, `inWater`, `settle`, `bounce`, `color`, `phase`, etc.
- fish list.
- rocks list.
- toy object.
- plants anchored separate; when uprooted create movable object `kind='plant'`.

Maybe easier use `S.objects` array with all movable objects, and `S.plants` anchored. Need draw by kinds. Each object:
```
createObj(kind, x,y, opts)
```
Initial fish:
```
[
 {x:330,y:260,dir:1,phase:0,size:1},
 ...
]
```
Fish shape


drawn with body ellipse length 34*s, height 16*s, tail triangle, eye; orientation based on vx or facing. Need fish initially swim against current: when breach, for first maybe 2.5 seconds, each fish has `resistance = 0.5 + ...` and applies leftward thrust (negative x) if inside tank; some stronger. Need perhaps show wake/gill lines. If flow force > resistance and near current, fish gets swept. Need varying strength:
```
fish.swimStrength = [150, 115, 90, 65, 45] // acceleration left
```
Current acceleration on fish maybe 200-400 px/s² near opening; weaker fish swept. Need calculate as force/velocity relaxation:
```
const cv = currentAt(obj.x,obj.y, t);
const relV = {x:cv.x - obj.vx, y:cv.y - obj.vy};
ax += relV.x * obj.drag; // drag coefficient s^-1
ay += relV.y * obj.drag;
if (fish && region==='tank') ax -= fish.swimStrength * flowNorm * (1 - clamp((breachAge-...)) );
```
But current velocity maybe 120-250 px/s, drag coefficient fish 1.4 -> acceleration ~300 leftward thrust; some fish net positive. Need self-propulsion "initially swim against current": for first 3 sec, each fish has thrust `-140 - strength`, then fatigue reduces to 0 and current dominates. Need use `fatigue = clamp(1 - breachAge/4,0,1)` maybe; then all eventually swept. Need some remain. Could vary:
```
const resistanceTime = 1.5 + f.endurance; 
if (breachAge < resistanceTime) ax -= f.swimPower * flowNorm * (1 - breachAge/resistanceTime);
```
Then some with low endurance swept early, others later. Need local current. Need perhaps fish initially move left visually at breach. Could add small tail animation. Need ensure they can escape through opening:
- current x pulls to right; current y pulls toward crackY. When fish x reaches `IN.right - 20`, apply strong suction to `crackY` and then if `Math.abs(y-crackY) < OPEN_H/2 - h/2`, allow crossing wall. Else bounce/slide along inside wall (vx clamp). Need mark `escaped` when `x


> TANK.right + 4`; set region='air'; perhaps initial `vy` from vertical current; vx += jet horizontal. Need perhaps objects can pass through opening only if height <= opening height. All fish pass. Need slowly draw fish from wall to outside.
- For objects that don't fit (large rocks, toy perhaps if bigger), bounce at `IN.right-r`; no escape. Need perhaps "fit opening" explicit. Toy passH=44 <=62, so fits. Plants passH maybe 30<=62. Pebbles r=10 fit. Large rocks r=20 etc h=40<=62 actually fit too! Need define opening height 54 and large rocks h=44 also fit. Need make some rocks too large h=55-60 maybe almost; opening 56 with jagged clearance 48. Need passHeight <= OPEN_H-8 (54). Set big rocks radius 27 => h54 maybe fail if clearance48; small r=10 pass. Need perhaps fish h18 pass; toy h42 pass; plant h34 pass. Need implement `clearOpening = OPEN_H - 12 =50`. Use `fitsOpening(obj)` => `obj.passH <= OPEN_H - 10`. Large rocks with h=56 fail. Need perhaps opening exactly 64, clearance52. Big rocks r=28 =>56 fail. Good.
- For objects in tank near wall, constrain:
```
const wallX=IN.right - obj.r;
if (obj.x > wallX) {
 const aligned = Math.abs(obj.y - crackY) < (OPEN_H/2 - obj.passH/2);
 if (breached && flowNorm>0.05 && aligned && fitsOpening) {
   // allow crossing; perhaps accelerate right
   obj.x += ...
   if (obj.x > TANK.right+3) escapeObject(obj)
 } else {
   obj.x=wallX; obj.vx=Math.min(obj.vx,0)*0.3;
 }
}
```
Need wall top/bottom segments maybe if near opening but water no longer reaches, still no passage? Once flow stopped, perhaps no current; objects could still drift out? Spec says movable objects can be carried out by flow. If flow zero, no need. Need require `flowNorm>0.05`.
- Need perhaps prevent objects leaving through top (water surface) from buoyancy. Clamp y for submerged objects:
  - For rocks, if y<waterY+r, they fall due


gravity; but initial rocks below.
  - Toy floats: target y = waterY - toy.r*0.2 maybe. Use spring `vy += (target-y)*8 - vy*3`, plus current vertical force smaller; keeps near surface and bob.
  - Fish neutral: if y<waterY+10, vy += downward; if y>IN.bottom-r, bounce.
- Buoyancy and gravity:
```
if region==='tank' && y>waterY:
  ay += GRAVITY * (1 - obj.buoyancy); // buoyancy ratio 1 neutral, >1 upward, <1 down
  vx += (cv.x - vx)*obj.drag*dt;
  vy += (cv.y-vy)*obj.drag*dt;
else region==='air':
  ay += GRAVITY;
  vx *= (1 - airDrag*dt)
```
Need avoid float use `vx *= Math.exp(-drag*dt)`, then add current via `vx += (cv.x-vx)*min(1,drag*dt)`.
- For rocks on bottom: floor of tank at IN.bottom. If y+r>bottom clamp, vy negative bounce then friction. Need apply sink by positive net gravity. Need show they sink. We can spawn 3 small stones at mid-height on a ledge. Could do fixed decorative shelf with mobile pebbles at y=380 (on shelf) initially. Add ledge polygon maybe x=540,y=400 to650,y=410; pebbles center y=390. But shelf needs drawn behind objects. Initial scene can show a sloping rock ledge to right. When breached, pebbles can slide right with current and fall. Need model them as mobile rocks starting on top of ledge; gravity will make them fall immediately even before breach unless apply `restingOnShelf` and collision line. Could implement shelf collision for x range. Or start them at bottom and rely on fish. Simpler avoid elevated rocks. "rocks sink" can be shown by fragments? Need distinct response; initial rocks on floor already sunk, but after breach current may lift small ones slightly then settle. Could perhaps show submerged rock acceleration downward. Need visual. Could place a couple of small rocks initially at y=300 and call them "suspended"? That's not physically intact scene. Maybe they could be resting on broad plant leaves? no.

Could define decorative rock arch/cave with top surface at y=405 and small pebbles


rest on it; implement shelf collision. Need not too hard:
- Draw a fixed large rock formation at bottom center/right (x=520..650, y=IN.bottom) with a ledge top at `ledgeY=400` from x=530 to630. Could shape as a tall stone slab. Initial small pebbles at x=550,580,610,y=ledgeY-r. Need collision with horizontal shelf for y+r>ledgeY and x within [530,630]; keep them there. When current pushes them right past x=630, they fall. This demonstrates sinking once they leave ledge. Need perhaps current can push them right. Current near right at x=600,y=390 might be strong. Need `rock.drag` enough. Also crack may be at varying y; if at 365, ledge pebbles near y=390 and hole from334..396 could potentially pass if they reach wall. Nice. Need implement shelf collision only while breached? Could remain. Fixed rock formation is part of scenery. Need draw large rock cluster with sloped top around y=430 maybe. Let's set ledge top y=405, x=530..640. Pebbles y=395 (r=10). Opening center default365, top334,bottom396; pebble center395 is at bottom edge, too low; need suction up 30 px. Could set ledgeY=370, pebbles y=360, fits default opening. Sculpt tall rock pillar from bottom to y=375. Initial tank can have a tall rock arch. Need three pebbles on top. Current pushes right; they fall off ledge at x=640. Then suction aligns to crackY. Good. But when crack dragged to e.g. 300 or 450, vertical current will pull them. Need maybe still. Need not guarantee rocks escape; fish near crack can.

Maybe create a fixed rock tower:
- polygon from (520,515) to (540,385) to (625,375) to (650,515), with top ledge from x=540 to625 at y=375 (sloped slightly). Draw gray gradient. Pebbles at y=365. Need not be too huge to obscure fish. Could be okay.
- shelf collision: if object.kind==='rock' and obj.ledge and x between 540,625 and y+r>ledgeY, clamp y=ledgeY-r; vy=0; vx friction. Once x>625,


gravity pulls down. Need ensure no initial motion until breach. Current horizontal only after breach.
- large bottom rocks don't have ledge.

Could perhaps mark small pebbles with `passH=20` and high drag. Good.

Plants:
- fixed anchored objects `{x,baseY,h,width,phase,rootStrength,bend,uprooted:false,leaves:[...]}`.
- Draw as 3 curved stems using quadratic bezier to tip x+bend, y=baseY-h. Draw leaves along stems as ellipses/triangles. Need current bend:
```
targetBend = flowNorm * 80 * proximity * (0.6+0.4*sin(...)) + gentle sway 3*sin(...)
p.bend += (targetBend-p.bend)*min(1,dt*3)
if (!p.uprooted && flowNorm>0.2 && p.rootStrength small && breachAge>1.2 && p.x>550) uproot(p)
```
On uproot:
```
p.uprooted=true;
create movable plant {x:p.x+targetBend*0.5,y:p.baseY-p.h*0.5, w:22,h:48, r:18, buoyancy:0.95, drag:2.2, ...}
```
Need perhaps only one plant uproots, near right x=630. Others bend but remain rooted. Draw uprooted plant as a loose clump in objects. Need perhaps `sweptOut` count.
- Current on anchored plants affects bend. Need "bend or drift" clearly. Use one near right drifting.

Toy:
- Draw rubber duck maybe. Need shape 50x40. Could use canvas paths with yellow body (ellipse), head circle, orange beak, eye; waterline intersects lower body. Need toy center y maybe waterY-8. Draw with bob and angle. Use passH=42. Need buoyancy response. Need apply in tank:
  - spring to surface target.
  - horizontal current drag; keep within tank walls unless passing opening.
  - vertical current weaker (toy anchored by buoyancy). Maybe if near opening and flow strong, suction can pull down enough to pass. Could increase dynamic downward current near right wall and lower buoyancy with `toy.suctionFactor=0.5`. Need perhaps set `targetY = waterY - 6 + 3*sin(t*3)`; `ay=(targetY-y)*14 - vy*


4 + currentY*0.3`. If currentY downward ~150, multiplied by maybe 0.4 gives 60 acceleration; spring could counter. To allow escape, perhaps if x>IN.right-80 and waterY within opening vertical range, reduce buoyancy and actively pull toward crack. But waterline must drop near opening, by then flow weak. Might still not. Could create a case with high crack (crackY=280, openingBottom311), waterline starts205, drops; toy follows down to ~305, near opening; head small and flow weak but enough maybe. Need suction. We can define during inside tank:
```
if (obj.kind==='toy') {
 const nearMouth = clamp((obj.x-(IN.right-140))/140,0,1);
 const verticalPull = current.y * 0.55 + (crackY-obj.y)*flowNorm*nearMouth*1.5;
 ay += verticalPull;
 ay += (targetY-obj.y)*7 - obj.vy*3; // float
}
```
When waterline approaches opening, targetY ~openingBottom-?; toy around waterY-5, crackY maybe center; for crackY=280, openingBottom311, target ~306, crackY=280 difference -26 (upward), so toy can pass if within opening [249,311], yes. It might drift right and cross. Need x reach wall. Horizontal current near surface might be weaker due proximity to crackY, but nearMouth. Could explicitly give toy current x at least 80*flow. At low flow ~0.1, maybe too weak. Could use flowRamp and `sqrt(flowNorm)` for broad convection; outflow weakens but current persists more broadly. Need no need guarantee toy exit; small pebbles/fish can.

Need fish initial swimming:
- Before breach, fish gently swim horizontally between bounds with `vx=20*sin(...)`? Need avoid drifting too far. Could set baseX, use sinusoidal x around base, and facing direction. But once breach, need switch to physics. Could simply update `x += Math.sin(time*0.8+phase)*8*dt` and keep clamp. Need perhaps fish visually alive with tail wag. Good.
- Use initial `vx=0`; on breach physics. `fish.swimPower` etc.
- Need current drawn as streamlines.

Jet model:
- `flowNorm`: `sqrt(head/refHead)*ramp`; `


head=openBottom - waterY`; refHead maybe `initialWaterY`? For crack at365, initial head=191; use `REFERENCE_HEAD=200`. If crack high at270, openBottom301, head96, initial flowNorm ~0.69. Good. If crack low at470, openBottom501, head296, flowNorm up to1.22. Need clamp1.3. Waterline fall speed based on head. Good.
- `flowRate = flowNorm * ...`.
- `jetSpeed=110+220*flowNorm` maybe initial crack365 flow=.98 =>326; high crack270 .69=>262; low470 1.22=>378.
- Gravity=560. Need draw ribbon:
```
function jetPath(){
 let pts=[];
 for t=0;t<1.6;t+=.03 {
   x=TANK.right+3+jetSpeed*t;
   y=crackY+8+0.5*GRAVITY*t*t + jetVertical*t;
   if(x>=ROOM.right-6) { interpolate to wall; break; }
   if(y>=FLOOR) { interpolate; break; }
 }
 return pts;
}
```
Need perhaps start y from crack center with opening vertical distribution; could draw multiple streamlines starting at y=crackY-18, crackY, crackY+18 and paths. Main center ribbon width = 4+16*flowNorm with taper. Use quadratic shapes:
```
ctx.beginPath();
ctx.moveTo(right,startY-width/2);
for each upper point lineTo(x, y-width*(1-progress)/2);
reverse lower points...
fill gradient
```
Need compute width taper with t. Need perhaps clip to room boundaries.
- `impactX` from path endpoint; use for puddle center.

Droplets spawn:
```
S.spawnAccumulator += flowNorm*dt*80;
while >1 spawn ...
```
Each droplet `{x:right+rand*5,y:crackY+range(-OPEN_H/2+4,...),vx:jetSpeed*range(.75,1.12),vy:range(-20,20),r:range(1.5,4),trace:false,life:0}`.
Need tracer droplets every 0.15 sec early:
```
if breachAge<3 && flowNorm>0.05 { tracerTimer += dt; if >0.15 spawn tracer with r=3, path=[]; }
```
Could simply tag every 8th


spawn as tracer and record path. Need keep `S.tracers` separate from droplets (so not removed on floor until sample). Simpler maintain tracer objects with `x,y,vx,vy,active,path,start...`, update independent; upon floor/wall set active=false and retain. Spawn tracer on Breach and every 0.25s for first 2.5s, `S.tracers` max6. Need sample chooses first that has path length >8 or active with x advance >100. Need no need tie to droplets.
```
function spawnTracer(){
 const start={x:TANK.right+4,y:crackY+maybe0};
 S.tracers.push({..., vx:jetSpeed,vy:0, path:[{x,y,t:0}], landed:false})
}
```
Update each tracer with gravity and room boundary; record every frame. Need path cap maybe 100.
- `sampleNow()` selects tracer with maximum x advance and down drop; calculates:
  - `p0`, `pend`.
  - `drop=pend.y-p0.y`, `run=pend.x-p0.x`.
  - parabolic check drop / (0.5*g*(run/vx)^2) maybe ~1. Could display `Δy=+... px`.
  - `jetAngle = atan(drop/run)` etc.
  - waterlineDrop = waterY-WATER0.
  - flow=...
  - nearCurrent = count objects with abs(vx)>20 etc.
  - escapedCount.
  - `S.sample={...}` and draw highlighted tracer path for 4 sec.
  - `sampleText.innerHTML=...` but avoid injection (values numeric).
  - update body data attributes.
```
Need perhaps sample button after breach automatically spawns tracer if none; and if flow already low, maybe still. Need sample early outflow requirement; we can click after ~1 sec.
- Could auto-generate sample at `breachAge=1.5`: call `sampleNow({auto:true})` and show "Early sample (auto)". Then even if user doesn't click, sample panel has data. Is that considered sampling early outflow? Yes. Could do automatic sample at 1.4s, plus button. Need maybe tests can inspect status after breach and see sample metrics. Let's implement auto capture at 1.35s once, and button captures again. Need initial sample status reset. Need `S.autoSampled=false`. On update


if age>=1.25 && !autoSampled call `captureSample(true)`. Need no side effects from drawing sample highlight maybe auto highlight too. Good.

Need metrics DOM:
- `stateOut`, `waterOut`, `flowOut`, `crackOut`, `escapedOut`, `statusText`, `sampleText`, `flowBar`, maybe `modeBadge`.
- Update every ~100ms to avoid DOM churn:
```
uiTimer += dt; if >.1 updateHUD();
```
- body.dataset:
```
document.body.dataset.simState=S.mode;
document.body.dataset.waterline=S.waterY.toFixed(1);
document.body.dataset.flow=S.flowNorm.toFixed(3);
document.body.dataset.jetDrop=...
document.body.dataset.escaped=...
```
Need perhaps put `<output id="debugOut">` with textual JSON? Could show metrics in footer. Need `inspect` might include output values. Good.
- For browser checking reset, `stateOut` should "INTACT", waterline initial, flow 0, escaped0, sample text reset. Need perhaps `canvas.dataset.mode` etc. Add.

Need line falls continuously: update waterY:
```
if (breached && head>0.4 && breachAge>0.2){
 const fall = FALL_K*Math.sqrt(head/200)*ramp*dt;
 S.waterY=Math.min(S.waterY+fall, openBottom);
 S.puddleVol = ...
 if head <=0.5 { waterY=openBottom; flowNorm=0; status='Outflow stopped...';}
}
```
Need outflow stop: ramp? `flowNorm` based head, so zero. Need perhaps set `S.stopped=true`. Need jet ribbon hidden. Droplets continue until land. Need current field zero. Need no more spawn. Good.
- Need waterline still above opening bottom? At stop waterY=openingBottom exactly, so water no longer reaches bottom. Visually waterline at bottom edge of opening; okay. Could perhaps use `openingTop` instead, but then water still reaches lower part. Spec "no longer reaches it" likely bottom edge. Good.
- Need if crack selected near bottom, water falls to low line and most water drains. Fine.

Need outflow weakens as level approaches opening: flowNorm = sqrt(head/reference). Need show flow bar shrinking. Need jet speed and width shrink. Good.

Physics environment details:
`computeCurrent(x,y)`:
```
if !breached or flow<=0


or y<waterY or x<IN.left etc -> {x:0,y:0}
const nearX = clamp((x-(IN.left+80))/(IN.width-80),0,1);
const toWall = IN.right - x;
const horiz = flowNorm * (15 + 150*Math.exp(-Math.pow(toWall/160,2))) * (0.45+0.55*nearX);
const dy = crackY - y;
const vertical = flowNorm * (dy) * 2.2 * Math.exp(-Math.pow(toWall/180,2)) * Math.exp(-Math.abs(dy)/220);
// maybe sign, cap ±170
return {x:horiz,y:clamp(vertical,-180,180)};
```
But near wall at x=690, dy=100 => 2.2*100*.98*.63*flow ≈136 flow; good. At x=550, toWall=150 exp .5, dy=100 ->68 flow. Need fish move toward crack.
Need broad downward suction near wall: `+ flowNorm*60*(1 - exp(-abs(dy)/...))`? Current toward opening should be vertical toward crack, so if above opening, downward; if below, upward. Fine.
Need perhaps current streamlines visually from left to crack with bezier control. Use `drawCurrent()` if flow>0:
  - 8 curves starting at x=IN.left+30+i*50, y varying around waterY+40..IN.bottom-30, ending at `TANK.right-12, crackY + offset`. Use Bezier with control points. Need avoid all lines cluttering; low alpha. animated dash offset and tiny arrowheads. Use ctx.setLineDash([12,14]); lineDashOffset=-S.time*80*flowNorm; stroke. Need reset line dash. Draw perhaps 6 lines with alpha .08+.16*flow.
  - draw small current particles maybe `S.specks`: initialize at random interior positions, move by `computeCurrent`, respawn at left when reach wall. Need no need if streamlines enough. Could add 20 specks with deterministic positions initialized at breach. Need "nearby objects respond" better visible by object motion, not specks. But current visualization helps.
  - Need current response readout perhaps `obj.vx` etc. Need sample card.

Object physics code:
```
function updateObjects(dt) {
 const flow = S.flowNorm;
 for (const


o of S.objects) {
   if (o.region==='tank') updateTankObject(o,dt,flow);
   else updateAirObject(o,dt);
   // floor collisions global
 }
}
```
Need distinguish inside water vs above water in tank. All objects likely submerged except toy partly above. For `o.region==='tank'`:
```
const submerged = o.y + o.r*0.3 > S.waterY;
if (submerged) {
  const c=computeCurrent(...);
  o.vx += (c.x-o.vx)*clamp(o.drag*dt,0,1);
  o.vy += (c.y-o.vy)*clamp(o.drag*dt,0,1)*o.currentResponse;
  o.vy += GRAVITY*(1-o.buoyancy)*dt;
  // specific fish self swim
  if fish ...
  // toy buoyancy spring
} else {
  o.vy += GRAVITY*dt; // if above water
  ...
}
o.x += o.vx*dt; o.y += o.vy*dt; o.angle += ...
```
Need worry current drag will also instantly force objects to current velocity; with dt=.016, drag*dt ~0.03, okay. Current x up to200, drag2 => acceleration ~400*dt? Actually `vx += (c.x-vx)*0.032` -> ~6px/s per frame, so 360px/s²; fine.
- For rocks, buoyancy=0.2 => net gravity448; drag maybe0.8. On bottom clamp.
- Fish buoyancy=1 => neutral; drag1.3; self swim -170 etc. Fine.
- Toy buoyancy special; net gravity perhaps-? Could set `buoyancy=1.35`; plus spring. Need avoid huge upward acceleration. Use spring only.
- Plant mobile buoyancy=0.9 => slight down; drag2.4.
- Rock on ledge: horizontal current might need overcome friction. Need apply drag1.2; current x ~100 gives vx trends toward100; enough. Need shelf friction `o.vx*=0.995` but still.
- Need object vertical current response perhaps `o.currentY` factor: rocks 0.35, fish1, toy0.4, plant1.2.
- Need self-swim:
```
if (o.kind==='fish' && flow>


0.01){
 const fatigue = clamp((o.endurance - S.breachAge)/o.endurance,0,1);
 o.vx -= o.swimPower * fatigue * flow * dt;
 o.phase += ...
}
```
`swimPower` acceleration px/s² maybe 180-320. Current acceleration ~200, so strong fish resist; weak fish swept.
- Need rock sink demonstration due net downward; on ledge they stay until x>ledgeEnd then fall. Need perhaps initial pebbles start at x 560..610. At breach current near x=560 ~ maybe60, drag1.4 => accelerate84 px/s², to move 60 px in sqrt(2*60/84)=1.2s. Good. Then fall from y365 to bottom515 (150 px) in .73s. Could potentially be swept through opening before falling if near right wall x>625 with current x up to150; distance75px in <1s, fall 200px; might descend below opening. Need vertical current upward if crackY=365 and y grows >365, so current y negative; drag may keep near crack. Could pass maybe. Fine.
- Need perhaps no object escapes too early? Could happen after ~2 sec. Need auto sample at1.25s still early outflow.
- Need screen visual readout `Swept out` count update when escape. Need count only objects, not water. Need mark region `'air'` at x>TANK.right+8 and y within opening. Need perhaps escape object has vx set to `Math.max(o.vx, jetSpeed*0.7)` and vy maybe current y. Then gravity. Need when crossing wall but still region tank, apply no wall collision until fully outside. Need maybe `o.crossing=true`. Simpler:
```
if (near wall) {
 if (canPass) {
  o.crossing=true;
  o.vx = Math.max(o.vx, jetSpeed*0.65);
  o.vy += (crackY-o.y)*2*dt; // etc
  if (o.x > TANK.right + o.r*0.6) escape(o);
 } else ...
}
```
Need avoid false escape if y outside opening once crossing; can check. Need set `o.escapeStarted` and allow wall section.
- Need left wall / top / bottom constraints:
```
if (!o.crossing && o.x < IN


.left+r) { ...}
if (o.y > IN.bottom-r) { clamp; vy=-vy*restitution; vx*=0.8; }
if (o.y < waterY + r*0.4 && !toy) { clamp; vy=Math.max(vy,0); }
```
For fish, can swim at surface but shouldn't leave. Need waterline falling; if surface drops below object y, object might become above water; need push down:
```
if (o.y < S.waterY + o.r*0.5) {
  o.y=S.waterY+o.r*0.5; o.vy=Math.max(0,o.vy);
}
```
Could cause all objects follow waterline from top as it drops (unphysical but okay). Need fish remain submerged. For toy use special target.
- Need water surface can fall below fish initial y; fish should descend with water? Real fish in shrinking water should be constrained under surface; yes. Need push down.
- Need bottom collision.
- Need `ledgeY` collision for pebbles only if y+r>=ledgeY and x within [ledgeStart,ledgeEnd] and y < ledgeY+20 maybe. Need if they're falling past ledge from above; clamp. When x leaves shelf, fall.
- Need large rock decor perhaps fixed drawn. Need not collide with movable objects other than ledge.

Outside physics:
```
function updateOutside(o,dt){
 // gravity
 o.vy += GRAVITY*dt;
 o.vx *= exp(-0.08*dt);
 o.omega *= exp(-0.8*dt);
 // if in puddle water (o.y + maybe > puddleSurface)
 const surf = puddleSurfaceY();
 if (o.x>puddleLeft && o.x<puddleRight && o.y+o.r*0.3 > surf) {
   o.vx *= exp(-2.5*dt);
   o.vy *= exp(-2.0*dt);
   o.vy -= GRAVITY*(o.buoyancy-0.75)*dt; // maybe buoyancy
   if toy: spring toward surf-r/2
 }
 o.x +=...
 o.y +=...
 // right room wall collision
 if (o.x+o.r>ROOM.right-8) ...
 // left room wall if x-r<ROOM.left+8
 // floor
 if(o.y+o.r>=ROOM.floor){...}
}
```
Need floor collision with


puddle: toy could float above surface and not collide until puddle dries; but requirement objects collide with floor. Could set toy buoyancy moderate so it still hits floor then floats as puddle rises. Need no need strict.
- For toy in puddle, `target=surf - r*0.35`; spring to target with damping, so eventually floats. Need maybe if no puddle (surf=floor) target= floor - r*0.35, so still above floor (not collision). Hmm. Maybe allow initial outside toy to fall to floor, then puddle forms and buoyancy after puddle depth>toy.r*0.5. Implement:
```
if puddleDepth>18 && o.kind==='toy': spring target=surf-o.r*0.4
```
Before that gravity to floor. Good.
- Fish/rocks on floor; puddle drag slows them.
- Glass fragments: Need separate arrays or within objects with kind='glass'. Could use same physics but buoyancy/drag in water. Need draw polygon. Need spawn from breach with some inside tank, some outside. Need need water resistance:
```
if f.region==='tank' && f.y>S.waterY:
  f.vx *= exp(-3.5*dt);
  f.vy *= exp(-3.5*dt);
  f.vy += (GRAVITY*(1-f.buoyancy) + current.y*0.3)*dt;
  f.vx += (current.x-f.vx)*1.0*dt;
else gravity
```
Need collision with tank floor and right wall maybe. For fragments crossing opening, set region air when x>right. Need floor collision. Need set `f.r=8`, `passH=14`. Need shape points generated deterministic. Need glass fragments rotate. Need draw with `ctx.translate(x,y);rotate(angle);beginPath...`.
- Could integrate fragments into `S.fragments` separate with similar update. Need avoid complexity of unified objects. Do separate updates. Need draw glass shards translucent with cyan/white stroke. Need 14 shards from crack edges:
```
for i 0..13:
 side = i%2 ? 1:-1 (outward/inward)
 x = TANK.right + (i<8 ? range(2,20): range(-18,-2))
 y = crackY + range(-OPEN_H/2,OPEN_H/2)
 vx = (i<8?range(80,220):range(-60,


60))*flow?
 vy=range(-110,110)
 omega=range(-8,8)
 r=range(5,12)
 region = x>right?'air':'tank'
```
Need panel breaking around opening; shards fly. Need perhaps draw glass wall segments with jagged edges:
```
drawRightWall():
 if intact: fill rect x=700..710 from top tobottom, stroke etc; draw crack line.
 else:
  top segment y=top..openingTop; bottom segment y=openingBottom..bottom; fill.
  draw jagged edges as paths with random deterministic offsets (based on index and crackY? Need stable). Could use `jagPoints` generated at breach (`S.jagTop`, `S.jagBottom`) and draw. Need perhaps avoid wall filled in hole.
```
Need glass cracks radiating from opening corners:
```
drawCrackLine(fromX,fromY,to...).
```
Need draw top/bottom glass with small triangular missing chips.

Glass wall left/top/bottom:
- Draw back fill rectangle with subtle cyan gradient.
- Draw water first, then objects, then glass outlines.
- Glass thickness fill with translucent blue/white; use `ctx.fillRect`.
- Need right wall drawn last over objects? If fish crossing opening, need wall segments on top. Could draw after objects and before escaped objects. Need maybe draw movable objects before wall; if crossing, wall could obscure but opening clear. Fine.
- Draw reflections on left, right. Need initial crack marker on top.

Need draw tank:
1. `drawRoom()`.
2. `drawTankBack()`: outer glass fill; interior background gradient; decorative back bubbles, maybe substrate at bottom.
3. `drawWater()`: clipped to interior from surface to bottom; gradient; surface waves; maybe caustic lines.
4. `drawSubstrate()`: sand at bottom with pebbles, rock tower. Some background plants behind.
5. `drawAnchoredPlants()`, `drawObjectsInTank()`, `drawCurrent()`, `drawWaterSurface()`, `drawGlass()`.
6. `drawPuddle()` outside and under tank maybe should draw before tank back? If puddle under tank, draw after room but before tank legs; if outside right, draw after tank. Could draw puddle after tank glass to overlay floor and tank legs; but should not cover tank glass above bottom. Puddle surface maybe depth up to30, starting y=520, tank bottom=525, so


could overlap bottom 5px; okay. Draw puddle after tank glass but before escaped objects. Need floor line on top.
7. `drawJet()`: main stream from opening, should be on top of wall and puddle. Draw after puddle perhaps.
8. `drawFragments()`, `drawEscapedObjects()`, `drawDroplets()`.
9. `drawCrackMarker()` initial.
10. `drawLabels()`, sample highlights.
Need perhaps water jet particles "escaped water forms puddle" - draw droplets and translucent stream. Need spawn splash rings on impact. Could implement `S.splashes` with x,y,r,life, update. Need not required but visual.

Need draw object outside/inside maybe use same object list but iterate region. Need draw fish with orientation based on velocity/facing. Need draw rocks etc. Need draw toy. Need draw plant clump. Need draw glass fragments separate.

Need draw puddle details:
```
function puddleGeometry(){
 const impactX = S.impactX || 850;
 const half=clamp(25+Math.sqrt(S.puddleVolume)*2.1,25,470);
 let left=clamp(impactX-half, ROOM.left+10, ROOM.right-10);
 let right=clamp(impactX+half, ROOM.left+10, ROOM.right-10);
 let width=Math.max(1,right-left);
 let depth=clamp(S.puddleVolume/width, 0, 70);
 return {left,right,depth,surfaceY:FLOOR-depth};
}
```
Need perhaps puddleVolume from lost water; we can compute each frame:
```
const lost=(S.waterY-WATER0)*IN.width;
S.puddleVolume = lost*0.18 + S.dropletLandVolume maybe;
```
Could also add droplets landing to a separate `puddleVolume` increasing; but mapping waterline itself enough. Need avoid weird puddle updating with flow after stopped. Good. Maybe use `S.puddleVolume += (newLost-oldLost)*0.18`; simple. Need maybe cap depth appropriately. Need `impactX` computed from ballistic path based on current flow, which changes as flow weakens; need moving landing point could shift left, puddle center moves. Better set `S.impactX` at breach to initial landing x, then perhaps blend with current landing; could store `S.impactX=clamp(TANK.right+4+jetSpeed*sqrt(2*(FLOOR-crack


Y)/GRAVITY), 730, ROOM.right-15)` on breach. Need fixed. As jet speed weakens, landing point moves left; puddle center could move via exponential blend. Could set `S.impactX += (currentImpact-S.impactX)*0.02`. Need not. Puddle spreading still around fixed point. Need room walls: half up to500 could clamp left/right. Need if impactX near940, right edge clamps at962, half can extend left to28. Good. Need depth if width clamped: volume/width maybe ~15. Need can rise if both walls reached, but half max470 < half room width472; left maybe~470, right962, width492, depth28. To show depth rise, set half max550 so edges clamp both; width930, depth15. Hmm volume14k/width930=15. Not much. Could scale volume0.35 =>30k, depth32. Need maybe use `puddleVolume=lost*0.28` =>24k, depth26. Fine. Need puddle visually deep enough maybe depth up to45. Use factor0.42 =>36k, depth39. This would imply visual scaling but okay. Need not be physically exact. Use `PUDDLE_VIS_SCALE=0.42`. Need perhaps track `puddleVolume` as display units, not physical; status label maybe "puddle area (scaled)". Fine.
- Need spread half formula `25+sqrt(volume)*1.8`. At volume36k sqrt190*1.8=342+25=367, width734, depth49. Good. Edges from impact880: left513,right1247 clamp962 => width449, depth80 if capped 68. At room right wall, left edge maybe still >room.left; to reach both walls half>850, not. Need spread increase with volume maybe `50+sqrt(volume)*3` =>620 at final, left260,right962 width702 depth51. Doesn't reach left wall. Could spread from impact to both walls eventually with `half=50+volume/50=770` at final, left110,right962 =>852, depth42. Need early volume maybe1000 ->half70, good. Use linear: `half=25+volume/70`; final36k/70=514+25=539, left341,right962. Not left wall. Use /45 =>800+25=825, left55


right962 width907,depth40. Good. At early volume1000 half47, width94, depth10. Nice. Let's use `half=24 + S.puddleVolume/45` clamped max550 maybe. Final36k/45=800 clamp550; left330,right962 width632, depth57. Need not reach left wall; right wall constraint obvious. Could set max900: left80,right962 width882, depth41. Good. Use max900. Need perhaps `puddleLeft=max(ROOM.left+10, impactX-half); puddleRight=min(ROOM.right-10, impactX+half)`. At final impact maybe900, half824 =>left76,right962. Great. Both walls; depth=36k/886=41. Nice. Need perhaps cap depth70. Good.
- Need draw puddle surface wave; if edges at walls, vertical boundary. Need floor line at y=550. Need show room walls vertical and puddle clipped via `ctx.save(); ctx.beginPath(); ctx.rect(ROOM.left+8, maybe top, ROOM.right-ROOM.left-16, FLOOR); ctx.clip(); ...` so constrained. Need floor collision also.
- Need maybe floor line drawn after puddle to show floor, and wall overlays at x=20/980. Good.

Need draw room:
- gradient wall from y=0 to floor.
- grid/tile maybe vertical lines and horizontal floor.
- walls thick at left/right with shadow.
- floor rectangle y=550..620 with tiled diagonal lines.
- maybe label "ROOM FLOOR" at bottom.
- Need subtle ceiling.

Need drawing of water:
- clip to interior rectangle `IN`.
- gradient from waterY to bottom with cyan/blue alpha.
- wave surface: path from IN.left to IN.right with sin; fill from surface to bottom. Need use `waterY + sin(x*...+time)*2`. Need draw water fill with slight transparency. Need perhaps surface highlights.
- Need vertical gradient on back glass.
- Need draw "waterline" as bright line and depth ruler perhaps. Need label dynamic `WATERLINE` at x=250,y=waterY-8.
- Need visualize falling line with ghost initial line dashed at y=WATER0 after breach. Use dashed line labeled "initial". Good. This helps check waterline begins to fall.
- Need waterline maybe drop readout.
- Need draw head arrow from waterline to opening bottom with label `HEAD`. Nice.


Could include.

Need initial state visibly intact: no opening, right wall continuous; crack marker a thin zigzag. Need perhaps no jet/puddle. Need floating toy, fish, rocks, plants. Need substrate.

Need Reset restores same initial scene: reset all arrays, time=0, crackY initial, sample null, buttons states. Need perhaps animation continues with gentle sway; at exact reset screenshot plant bend maybe from time=0. Need clean.

Need UI buttons state:
- `breachBtn.disabled = breached`
- `sampleBtn.disabled = !breached`? Could keep active with message. Better disabled until breached.
- `resetBtn` always.
- state readout.
- `body.dataset`.
- Need pause? Not required. Could add Space to pause? Not needed.
- Need maybe `Breach` click and pointer events on canvas. Need perhaps buttons focused and keyboard accessible.

Need detailed JS code.

Let's write in one file. Need be careful with template literals and HTML. Could use write tool. We'll produce perhaps 900 lines. Need maybe syntax-check with node by extracting script. Let's draft.

First code skeleton and constants. Need avoid use of `roundRect` maybe supported in modern browsers; can use manual path. We can use `ctx.roundRect` maybe likely supported; but avoid compatibility by custom helper. Need use `Path2D`? no external. Need perhaps use `ctx.ellipse`, supported. Need use `ctx.setLineDash`.

Helper:
```
const clamp=(v,a,b)=>...
const lerp=...
function roundedRect(ctx,x,y,w,h,r){...}
function rgba...
```
Need use custom drawing.

State reset:
```
let S, seed=...
function resetSimulation(){
 seed=...
 S={...};
 S.objects=[];
 ...
 addFish(...); addRock(...); etc;
 updateUI(true);
}
```
Need maybe `S.time` global. Need `lastFrame=performance.now()` and animate loop continuously; reset doesn't restart loop. Need perhaps if tab hidden dt clamp .033. Good.

Need define initial objects with fixed data:
```
const fishDefs = [
 {x:330,y:255,size:1,dir:1,power:310,endurance:3.8,phase:0},
 {x:450,y:300,size:0.9,dir:-1,power:240,endurance:3.0,phase:1.4},
 {x:565,y:345,size:1.05,dir:1,power:

190,endurance:2.1,phase:2.8},
 {x:620,y:390,size:0.8,dir:-1,power:110,endurance:1.3,phase:4.1},
 {x:390,y:430,size:.95,dir:1,power:160,endurance:2.6,phase:5.5},
];
```
Need fish near varying crack; maybe at default 365 fish x565,y345 and620,y390. Good.
Fish `r=9*size`, `passH=18*size`, `passW=36*size`, w,h etc. `drag=1.7`, buoyancy1, currentY1, restitution. Need maybe `vx=0,vy=0,angle=0`.
Before breach anim gentle:
```
if (!S.breached) {
 o.x = o.baseX + Math.sin(S.time*.6+phase)*12;
 o.y = o.baseY + Math.sin(S.time*.9+phase)*4;
 o.vx = Math.cos(...)*12 etc;
}
```
Need once breach set baseX? Physics starts from current animated x,y. Need okay. Reset time=0 gives exact. Need object positions deterministic.
- Need fish drawn orientation based on `o.facing` maybe from vx; if vx small use `dir`. `o.facing = o.vx > 8 ? 1 : o.vx < -8 ? -1 : o.dir`. Strong fish swim left against current (vx negative) so face left. Weak fish swept right face right. Tail wag.
- Need fish `swimPower` applies negative acceleration. Could also set `o.vx -= o.swimPower*fatigue*flow*dt;`; flow drops near end, fine.
- Need current response `o.responded=true` if abs(vx)>20 maybe for sample count.

Rocks:
```
addRock(x=280,y=IN.bottom-20,r=20,color)
...
ledge pebbles at x=550,580,610 y=ledgeY-10,r=9 etc with ledge=true.
```
Need roof tower drawn at coordinates. `LEDGE={x1:530,x2:640,y:378}`. Pebble y=368; draw. Need overlap with fish maybe okay.
- large rocks bottom r24/18/16 etc. Need `passH=2r`, some >opening clearance (52) e.g. r


28 ->56 fail; r24->48 fits actually. Need some fail and some fit. Fine.
- `mass` not used maybe but can set; drag=0.7+?; buoyancy=0.25; currentY=0.35.
- Need small pebble passH=18 fits; drag=1.6; buoyancy=.35; currentY=.6; ledge true.
- Need no random initial colors maybe choose from palette.

Toy:
```
addObject({kind:'toy',x:420,y:WATER0-6,vx:0,vy:0,r:22,w:52,h:42,passH:42,passW:52,buoyancy:1.5,drag:1.1,currentY:.3, ...});
```
Need if water surface target y=waterY-8, r maybe20. For collision with bottom etc. Need drawing duck centered at (x,y). Need perhaps y near waterline so body half submerged. Draw body ellipse from y+4 etc, head at x+15,y-14, beak x+27. Need nice.
- Need `passH=36` to fit. Need perhaps `r=20`.
- Need perhaps to show float: bobbing.

Plants:
```
plantDefs = [
 {x:275,h:100,root:2.2,color...},
 {x:350,h:125,...},
 {x:465,h:90},
 {x:610,h:115,root:.45,drifter:true}
]
```
Need baseY=IN.bottom. Need `bend=0`, `phase`.
- Draw up to3 stems with tip offsets. Need use `drawPlant(ctx,p)` with quadratic curves. Need maybe draw leaves along stems. Need avoid negative. Need after uproot, don't draw anchored plant; draw root broken stub maybe.
- Uproot condition:
```
if(p.canUproot && !S.uprooted && S.breachAge>1.5 && S.flowNorm>.2){
  p.uprooted=true;
  const obj=... x=p.x+30,y=p.baseY-p.h*.55 ...
  S.objects.push(obj); S.events...
}
```
Need perhaps on default crack 365, flow~1 and p x610, drift. Good. Need draw ripple.
- Uprooted plant mobile `r=16,w=30,h=46,passH=46` fits. buoyancy=.92, drag=


2.2,currentY=1.1.

Current specks:
```
S.currentSpecks = Array.from({length:26},(_,i)=>({x:IN.left+... deterministic using sin, y:... phase...}))
```
Need not random? use deterministic fractions. On breach each update move by current*dt; if x>right or y out of water, respawn at left with fixed formula. Need draw small white dots with low alpha. Could maybe use seeded rand. Good.

Fragments `spawnFragments()` on breach:
- Need jag points arrays:
```
S.jagTop = Array.from({length:7},... offsets);
S.jagBottom = ...
```
Need stable. Need draw right wall segments with jagged edges perhaps using path:
```
function fillWallSegment(y1,y2, edgeY, direction) ...
```
Simpler fill rect from TANK.top to openTop and from openBottom to TANK.bottom, then draw triangular chips near edges with semi-transparent blue. Need jagged crack lines. Good.
- Need fragments array with 15 shapes. Need `points` generated from polar angles maybe:
```
const pts=[];
for k=0..3: angle=k*...; radius...
```
Need deterministic rng.
- Need spawn splash droplets. Need sequence.

`breach()`:
```
if(S.breached) return;
S.breached=true; S.mode='breaking'; S.breachAge=0; S.breachRamp=0;
S.openTop=crackY-OPEN_H/2; S.openBottom=...;
S.impactX=estimate...
spawnFragments();
spawnTracer();
S.status='Panel fractured...';
updateUI(true)
```
Need set mode perhaps 'FLOATING' after ramp1. Need state text `BREACHED` or `OUTFLOW` / `STOPPED`. Need ease. Could set `S.mode='breached'`; `stateOut` dynamic:
```
if(!breached) INTACT
else if(flow>0.02) FLOWING
else STOPPED
```
Need initial mode intact.
- Need maybe disable crack drag after breach. Good.

`sample`:
```
function captureSample(auto=false){
 if(!S.breached){ sampleText.textContent='Breach first...'; return; }
 let tr = S.tracers.find(t=>t.path.length>8 && t.path[last].x-t.path[0].x>80) ||...
 if(!tr){ sampleText...


 return; }
 const p0=tr.path[0]; let pe=tr.path[last];
 // choose point with x advance near150 if available
 const targetX=p0.x+Math.min(180, ...); choose path point closest
 const drop=...
 const t=(pe.x-p0.x)/tr.vx0;
 const predicted=.5*GRAVITY*t*t
 const curve=drop>0 && ...
 S.sample={p0,pe,path:tr.path.slice(),created:S.time, curve...}
 const waterDrop=S.waterY-WATER0
 ...
 sampleText.innerHTML = ...
```
Need if calling from update at1.25 sec, tracer path length ~75 frames; good. Need `tr.vx0`. Need selection: only first tracer likely started at breach and maybe landed by1.25; path retained. Good.
- Need draw sample overlay: dashed line through path, circles at p0/pe, label `SAMPLE` with Δx/Δy. Need use `S.sample.created` and fade after 5 sec perhaps keep to inspect. Could keep until reset/new sample, no fade. Need not obscure too much; thin yellow dashed. Need label near path. Need perhaps also draw a small "sample ruler" cross. Good.
- Need `sampleText` with lines; use `<strong>Early jet sample</strong> ...`; need maybe no HTML injection from numeric only. Fine.
- Need update body data values, including `jetDrop`. Need if no sample yet `jetDrop=""`.
- Need maybe state metrics card includes `Current-affected: N` and `Swept out: N`.

Need status text dynamic:
- Intact: `Drag the orange crack... then press Breach.`
- Flowing: `Panel open: Torricelli-style outflow ...`
- Stopped: `Waterline reached lower edge of break; outflow stopped.`
- Reset: same.
Need maybe update only every .1s.

Need draw numerical labels on canvas:
- top left small title `TANK / SECTION VIEW`
- waterline label with y value.
- opening label perhaps `BREACH SITE` during crack marker.
- arrow labels for floor/walls.
- legend maybe small chips `rock = sink`, etc. Could draw at top left? Need perhaps no need.
- Need ensure initial scene clearly has all elements. Need draw small labels maybe:
  - `FLOAT` near toy? optional.
  - `BUOYANT TOY`, `SINKING ROCKS`, etc. Could


be too busy. Could draw a small physics legend in upper right of room, but room right area needed for crack marker. Maybe draw in bottom left outside tank? Need perhaps not.
- Could add small tags near objects: `floating toy`, `fish`, `plants`, `rocks` so requirement visually obvious. Might make scene educational. Use low-opacity pill labels with leader lines. Need perhaps initial only. Could draw `drawSceneLabels()`:
  - at x=325,y=165 `FLOATING TOY` pointing to toy at420,197
  - x=265,y=270 `FISH`
  - x=250,y=470 `ROCKS / SINK`
  - x=360,y=470 `ROOTED PLANTS`
  - x=735,y=... `DRAG CRACK ↕`
Maybe too cluttered. Need visual clarity. Could draw tiny cyan labels with alpha. Fine.

Need maybe draw arrows indicating distinct physics after breach:
- rocks downward arrow, toy upward arrow, plants bend arrow, fish swim-left arrow. Could draw small icons/annotations when flowing. Need perhaps not necessary but helps check "distinct responses". Draw physics legend outside tank top right:
```
drawLegendPanel(x=735,y=95,w=220,h=100)
Rows with colored dots:
ROCK  ↓ sink / high mass
TOY   ↑ buoyancy / floats
PLANT ~ bend / drag
FISH  ← swim, then swept →
```
Need room right area from x710..970; panel could be at x735,y80. Crack handle at x750,y365; jet flows from x710,y365 to right; legend at y80 won't interfere. Good. Need draw on canvas with semi-transparent dark panel. Need sample card perhaps below. This explicitly demonstrates model. Need perhaps body controls also legend? Could use CSS. But canvas legend okay.
- Need show `GLASS shards: drag + rotation` perhaps fifth row. Need panel height 122.
- Need labels after breach maybe dynamic indicator values. Good.

Need `drawCrackMarker`:
- initial:
  - draw vertical dashed orange line from crackY-OPEN_H/2 to + at x=TANK.right-5 (inside edge) with jagged zigzag. Need perhaps show potential opening height with semi-transparent bracket on wall:
```
ctx.fillStyle='rgba(255,173,72,.12)'; fillRect(TANK.right-12,top,24,OPEN_H);
ctx


.strokeStyle='#ffb454'; dashed strokeRect...
```
  - jagged line path with 8 points alternating x±4.
  - handle at x=TANK.right+42,y=crackY: rounded orange circle radius20 with up/down arrows; vertical track from CRACK_MIN-? to MAX at x=TANK.right+42.
  - label `DRAG ↕ CRACK` perhaps x=760,y=crackY-35; but may overlap legend? handle at y365, fine.
  - Need maybe track visible from min to max along right wall? Draw faint dashed line x=735 from CRACK_MIN to MAX, with endpoints.
  - Need show opening bracket `OPENING HEIGHT` maybe.
  - Need selected center in readout.
- On breach, crack marker replaced by jagged opening and jet.

Need pointer mapping:
```
function canvasPoint(e){
 const rect=canvas.getBoundingClientRect();
 return {x:(e.clientX-rect.left)*W/rect.width, y:(e.clientY-rect.top)*H/rect.height};
}
```
Need pointerdown:
```
const p=...
if(!S.breached && p.x>TANK.right-55 && p.x<TANK.right+100 && p.y>CRACK_MIN-30 && p.y<CRACK_MAX+30){
 S.dragging=true;
 S.crackY=clamp(p.y,CRACK_MIN,CRACK_MAX);
 canvas.setPointerCapture(e.pointerId);
 updateUI(true);
 e.preventDefault();
}
```
Need perhaps direct click anywhere on right wall below waterline sets crack. If browser drag from handle at x=right+42, fine. Need maybe for easier test, also allow vertical slider track x=right+42. Need perhaps crack handle drawn at x=right+42. Browser drag coordinate mapping from display to internal. Need know displayed scale. We can potentially add an HTML range input mapped to crackY to allow `type`/keyboard; but requirement specifically drag visible crack. Could include a transparent range overlay maybe not necessary. Need maybe browser tool could use key to position crack via arrows. We'll test with drag.
- Need pointermove if dragging; pointerup release.
- Need hover cursor:
```
if(!S.breached && p.x>... ) canvas.style.cursor='ns-resize'; else 'default';
```
- Need maybe `touch-action:none` on canvas.
- Need keyboard:
```
canvas.addEventListener('keydown',e


=> { if(!S.breached && ['ArrowUp',...].includes){...}})
```
Need buttons perhaps keyboard shortcuts `b`,`r`,`s` globally. Could implement. Need browser key action perhaps.
```
document.addEventListener('keydown', e=>{
 if(e.target.tagName==='BUTTON') maybe...
 if(e.key==='b'||'B') breach();
 ...
});
```
Need not conflict with typing (no inputs). Good. Maybe use keyboard to test easier.
- Need perhaps update body `data-crack-y`.

Need draw sample overlay path with use of `S.sample.path`. Need path points stopped at wall/floor. Need perhaps choose endpoint with x advance 160 for early curvature:
```
let end = path.find(p=>p.x-p0.x>=160) || last;
```
Need if wall hit before160 (unlikely) use last. Need compute drop. Need display `drop/run²` maybe:
```
const tApprox=(end.x-p0.x)/Math.max(1,tr.vx0);
const expected=.5*GRAVITY*tApprox*tApprox;
const curvature = expected>0 ? drop/expected :0;
```
Need note initial vy maybe0. Need from tracer. Need if path includes wall collision? Before impact, yes. Need choose `end.t` from path. Good.
- Need `sampleInfo` DOM text:
```
Sample @1.25s · jet +170 px forward / +81 px down (parabolic); waterline +19 px; outflow 0.94; current-affected 6; swept out 0.
```
Need update as numbers.
- Need perhaps expose `window.aquarium = { reset, breach, setCrack, sample, snapshot:()=>... }` for potential browser inspect/eval. Could add. Need no network. Good. This is useful if browser tool might support custom eval via console? But no. Still.
```
window.aquarium = {breach:triggerBreach, reset:resetSimulation, setCrack:y=>..., sample:()=>captureSample(false), snapshot:()=>({...})};
```
Need `setCrack` only if not breached. Could perhaps use URL hash? no.
- Need maybe add `data-state` etc to `canvas` and body. Good.

Need update UI function:
```
function updateUI(force){
 const head=...
 const state = !S.breached?'INTACT':(S.flowNorm>0.015?'FLOWING':'STOPPED');
 stateOut.textContent=...
 waterOut.textContent = `${Math.round(S.waterY)} px / +${...}`
 flowOut...
 crackOut...
 escapedOut...
 statusText...
 flowBar.style.width=...
 breachBtn.disabled=S.breached
 ...
 body.dataset...
}
```
Need performance: update every 0.1 sec, but call force on reset/breach/crack. Need `S.uiClock`.
- Need `mode` perhaps set to `intact`, `flowing`, `stopped`.
- Need `statusText` might change based events. Could use event message with expiration:
```
S.eventText; S.eventUntil.
```
Need status dynamic after uproot/escape. Could set `S.note` and show for2 sec. Need perhaps sample status. Good:
```
function note(msg){S.note=msg;S.noteUntil=S.time+2;}
```
Need when fish escapes: `note('A fish was swept through...')`; but repeated could spam. Set only if count increments. Need okay.
- Need `current-affected` count:
```
S.objects.filter(o=>o.region==='tank' && o.kind!=='toy' && Math.abs(o.vx)>12).length
```
Need sample readout.

Need draw status info near physics legend perhaps dynamic. Need no need.

Need update:
```
function step(dt){
 S.time += dt;
 if(S.breached) {
   S.breachAge += dt;
   updateFlow(dt);
   updateTracers(dt);
   if(!S.autoSampled && age>1.25) captureSample(true);
 }
 updatePlants(dt);
 updateObjects(dt);
 updateFragments(dt);
 updateDroplets(dt);
 updateSplashes(dt);
 updateCurrentSpecks(dt);
 S.uiClock += dt; if >.1 updateUI();
}
```
Need order of waterline update before objects to use current head. Good.
- Need `updateFlow`:
```
const ramp=clamp(S.breachAge/0.45,0,1);
const head=Math.max(0,S.openBottom-S.waterY);
const raw=Math.sqrt(head/200)*ramp;
if(head<=0.5){...} else {
 S.flowNorm=raw;
 S.jetSpeed=110+220*raw;
 const delta=S.waterY;
 S.waterY += 20*Math.sqrt(head/200)*ramp*dt;
 const lostDelta=(S.waterY-delta)*IN.width;
 S.puddleVolume += lostDelta*


PUDDLE_SCALE;
}
S.impactCurrent = estimate...
```
Need flowNorm initially 0 at t0, rises. Need at t1.25 ready. Need `S.flowNorm` computed with pre-update waterY; okay.
- Need perhaps `S.rawFlow` no ramp for waterline? ramp both. Need fine.
- Need if head very small and ramp etc set waterY=openBottom, flowNorm=0, S.stopped=true, note.
- Need no outflow once stopped. Need `S.jetSpeed=0`.
- Need spawn droplets only if flow>0.02.
```
S.dropAccumulator += S.flowNorm*70*dt;
while... spawn
```
Need tracer spawn:
```
S.tracerClock += dt;
if(S.breachAge<3 && S.flowNorm>.05 && S.tracerClock>.28) {spawnTracer();...}
```
Need first tracer at breach when flowNorm=0? Could spawn at `triggerBreach` with `vx` based on initial head/ramp maybe0; shouldn't. Better spawn first tracer at age0.25. In update:
```
if(!S.firstTracer && S.breachAge>0.25 && flow>0) spawnTracer...
```
Then auto sample at1.6 sec maybe path enough. Need calibrate. Could spawn tracer at breach with vx based on `estimateJetSpeed(head)` independent of ramp, but early outflow starts only after ramp. Could do:
```
triggerBreach: spawnTracer at age0 with vx=initial jet speed; its path starts immediately
```
That's okay even if ramp visually ramps; tracer path uses actual jet speed model. Need if sample at1.25, tracer landed by ~0.8s. Good. Need spawn additional tracers every0.35s until3s.
- Need tracer update uses simple gravity and boundary; no drag. Good.
- Need `estimateJetSpeed(head)=110+220*sqrt(head/200)`.
- Need `jetPath` uses `S.jetSpeed` (ramped) maybe disappears at ramp0; fine. At t0.1 maybe partially. Need start at crack center.
- Need update impactX per current. `S.impactX` fixed initial trajectory perhaps. Could compute `estimateImpactX()` each frame from current speed and `crackY+8`; clamp. Need blend to mean. Need puddle center should represent all droplets; use fixed `S


.puddleCenter` initial maybe. Could set to `estimateImpactX(initialHead)` at breach and update slowly toward current; but as flow weakens, jet lands closer to tank, potentially puddle center should shift left. Use `S.puddleCenter += (impact-S.puddleCenter)*min(1,dt*0.5)`; fine. Need puddleGeometry uses center. Need room wall constraint. Good.

Need droplets:
```
function spawnDroplet(){
 const y=crackY+range(-OPEN_H*0.35,OPEN_H*0.35);
 const speed=S.jetSpeed*range(.75,1.1);
 const d={x:TANK.right+3,y,vx:speed,vy:range(-25,20),r:range(1.5,4),life:0};
 S.droplets.push(d)
}
function updateDroplets(dt){
 for d:
  d.life+=dt; d.vy+=GRAVITY*dt; d.x+=...; d.y+=...
  if(d.x>ROOM.right-8) {d.x=...; d.vx*=-.15; d.vy+=...; maybe slide; spawnSplash}
  if(d.y>=FLOOR-1) {spawnSplash; remove}
  if(life>3) remove
}
```
Need if side wall hit above floor, should slide down wall to floor rather than bounce. Could set vx=0, x=wall, continue gravity; then d.y>=floor remove. Need draw droplets on wall maybe. Need puddle volume from waterline already, so don't need add. Need splashes. Need no droplets after flow stopped; existing clear.
- `drawJet` main ribbon uses `jetPathPoints()` and maybe multiple strands. Need compute path until wall or floor. Need width = (4+14*flowNorm)*(1 - 0.5*progress). Need use gradient. Need maybe fill with cyan alpha. Need draw white central streak. Need draw 2-3 thin streams with slight vy offsets to show curvature. Need perhaps sample overlay on top.
```
function computeJetPoints(startY,vy0,speed){
 pts=[{x:TANK.right+3,y:startY}];
 for(let t=.02;t<1.5;t+=.02){...; if wall/floor interpolate; break;}
}
```
Need vertical start maybe crackY-6 + i*6. Initial vy maybe -10+i*10. Need main ribbon


from center. Need perhaps not too many. Need `drawJetRibbon` use upper/lower offset. We can simply stroke a thick line with taper not possible; use polygon. Need perhaps code:
```
const pts=...;
ctx.beginPath();
for i: width=(...); ctx.lineTo(pts[i].x, pts[i].y-width/2);
for reverse: lineTo(...+width/2);
close; fill gradient.
```
Need gradient from cyan to transparent perhaps. Fine.
- Need draw thin highlight curve down center.
- Need `drawDroplets()` circles.
- Need draw splash rings.

Need fragments drawn perhaps before jet or after. Need glass shard resistance in water update. Need floor collision. Need right wall collision. Need perhaps fragments outside can hit room wall. Need inside fragments can collide with tank bottom and left? Could clamp x within tank interior. Need if x>right and region tank -> region air. Need if x<IN.left+r clamp. Need if y>IN.bottom-r clamp. Need if y<S.waterY+r clamp maybe. Need if fragment reaches opening and x>right -> escape. Need drag:
```
if(f.region==='tank'){
 const c=computeCurrent(f.x,f.y)
 f.vx += (c.x*.5 - f.vx)*Math.min(1,3.5*dt)
 f.vy += (c.y*.4 - f.vy)*Math.min(1,3.5*dt)
 f.vy += GRAVITY*(1-f.buoyancy)*dt
 f.omega *= exp(-1.5*dt)
} else {
 f.vy += GRAVITY*dt; f.vx*=exp(-.1dt)
}
```
Need collides floor at FLOOR for outside, tank bottom for inside. Need if fragment inside water eventually hits tank bottom; okay. For outside, floor. Need room wall. Need tank wall opening constraint? A fragment could pass through intact wall if x>right at y outside opening; need constrain x<=IN.right-r except when near opening. Could implement same `canPassOpening`; but fragments are small and primarily near opening; okay. Need if outside opening, bounce.
- Need draw jagged wall and cracks; fragments rotate.

Need glass shards should "experience resistance in water": perhaps include a small text in legend and maybe visible slow drift. Need code actual drag stronger in water. Good.

Need floor collision for outside objects:
```
const


floorY=ROOM.floor;
if(o.y+o.r>=floorY){...}
```
Need perhaps objects can land on tank legs/pedestal? no. Need left room wall. Need right room wall. Need puddle surface drag. Need use `puddleGeometry()` per object perhaps cache `S.puddle` each frame. Need update `S.puddle` in `updateFlow` or draw. Define `getPuddle()` computes. Need use in physics. Need perhaps x extents update each update.

Need collisions with room walls:
- left boundary `ROOM.left+12`, right `ROOM.right-12`.
- If puddle reaches right wall, objects stop there. Need jet droplets also.
- Need floor line y=FLOOR. Need not allow below.

Need object drawing:
```
function drawRock(o){
 ctx.save(); translate/rotate; draw ellipse/polygon; gradient; highlights.
}
```
Need rock shape maybe use fixed points based on id; can use `rockPoints` generated with seed at creation. Need deterministic initial. For each rock, create `pts` from 7 angles with radius variations; use `rand()` but reset resets seed. Need initial scene same. Fine.
- `drawFish`: save translate, scale(facing,1), maybe rotate by angle; body ellipse orange/cyan; tail triangle; fins; eye; stripes. Need fish colors from palette. Need tail wag with `sin(time*8+phase)*5`. Need draw direction. Need if facing left, flip horizontally. Need perhaps use `ctx.scale(o.facing,1)`. Need angle slight from vy/vx. Need draw with body at 0,0. Need eye at x=10. Need tail at -17.
- `drawToy`: duck. Need perhaps rotate `angle` small. Need body and head; waterline crossing. Draw eye, beak, wing. Need white highlight.
- `drawLoosePlant`: draw 3 fronds rotated, small root ball.
- Maybe draw motion trails or small arrows for physics:
```
if breached and region tank and abs(vx)>20 draw small arrow behind object.
```
Need not.

Need `drawAnchoredPlants`: need use p.bend; dashed current arrow maybe. Need draw leaves.
Implementation:
```
for each stem k -1,0,1:
 const baseX=p.x+k*5;
 const tipX=p.x+p.bend + k*12 + sin(...)*3;
 const tipY=base


Y-p.h*(.75+...);
 const cx=p.x+p.bend*.35+k*5;
 ctx.quadraticCurveTo(cx,baseY-p.h*.55,tipX,tipY)
 strokeStyle...
 // leaves along t=.35,.6,.8: compute quadratic point and tangent maybe draw ellipse rotated.
```
Need derive quad point function. Fine.
- Need draw root stones perhaps.

Need `drawFixedRockTower`: polygon with gradient and highlight. Need draw top surface at y=375 from530 to640. Need maybe make rock tower natural:
```
ctx.beginPath();
moveTo(505,IN.bottom); lineTo(525,430); lineTo(540,380); lineTo(625,374); lineTo(650,430); lineTo(665,IN.bottom); close; fill gradient
```
Need pebbles at top y=365. Need perhaps large tower could overlap plant at x610; put drifter plant at x650? Need near right wall x655 perhaps; but tower occupies. Could put drifter plant x660 base at bottom, tall to400; near wall. Need adjust plant defs: x270,350,470,655. Opening right wall at700. Good. Tower x510..640, plant x660 separate. Fine.
- Need tower horizontal ledge from540 to625 y=374. Pebbles at y=365. Need plant x660 leaf height100. Fine.

Need draw sand at bottom y=IN.bottom-12..IN.bottom. Need water fill behind. Need maybe background bubbles.

Need draw current field ribbons:
```
ctx.save(); clip tank interior; paths from x0 to right...
const endY=crackY+(i-3)*8;
ctx.bezierCurveTo(...);
...
```
Need perhaps start below waterY; choose y based on waterY and depth:
```
for i=0..6:
 y0=waterY+35+i*(IN.bottom-waterY-60)/6
 path starts x=IN.left+20+i*10, y0; end x=IN.right-5,y=crackY+(i-3)*6; control points at x=... etc.
```
Need ensure end path within opening. Need draw dashes with offset.
- Need current specks update respawn:
```
for sp:
 c=computeCurrent
 sp.x += c.x*dt*0.7
 sp.y += c.y*dt*0.7
 if x>IN


.right-10 || y<waterY+5||y>IN.bottom-5: respawn at IN.left + rand()*120, y=waterY+rand()*(depth)
```
Need use deterministic rng. Draw small dots/lines trailing. Need perhaps no random on reset until breach? can initialize with deterministic values using `rand()` after objects. Fine.
- Need maybe line dash offset uses S.time. Good.

Need draw water surface after objects maybe could cover toy; need draw surface line over duck to make floating obvious. Good.

Need use `ctx.globalAlpha` carefully save/restore.

Need sample overlay maybe after jet and droplets. Need draw dashed yellow path and labels. Need if S.sample and time-since<8 maybe draw; keep indefinitely until reset perhaps. Fine.

Need note and UI. Need no external assets.

Let's start writing file. Need maybe ~900 lines. We'll use write tool. Ensure no syntax errors. Let's draft carefully.

Need syntax check. Extract script via Python perhaps and node --check. Also inspect file maybe tiny.

No python. Use node itself to read file and extract.

Need syntax okay. Now browser run inspect initial output/console. Need use browser tool. Let's call reload perhaps starts page.

Initial screenshot looks good, no console errors. Need note screen mapping: screenshot viewport seems 1200x800 but image perhaps rendered 1200x800. Canvas from x=135 to1063, y=157 to729. Scale internal 1000/928=1.0776, vertical 620/572=1.084. So internal right wall x=710 => 135+(710*0.928)=794? screenshot crack at x~785/836? Let's calculate: shell from x=135 to1063 width928; canvas internal W=1000 -> scale .928; TANK.right710 =>135+659=794; handle hx=753=>135+699=834. Screenshot indeed. y of crack internal365 => canvas top157+365*.928? Wait displayed canvas height572, scale572/620=.923, so y=157+337=494. Screenshot handle at494. Good. Need drag crack from (834,494) to e.g. (834,430) representing internal y~296. Need perhaps choose default or reposition? Verification explicitly "Position the crack" -> drag. Let's drag handle upward maybe from 834,494 to834,430 (internal y +? delta -64/.923=-69, crack center296). Need then readout should show 296. Need click Breach at x180,y116 maybe. Sample button x364,y116. Reset x258,y116. Need maybe use browser drag. Let's do.

Crack positioned y294. Need perhaps opening top263,bottom325; initial head120, flow0.77. Waterline fall to325, ~maybe 14s. Good. Need breach. Click at (180,116). Then perhaps allow 1.5 s with bash sleep? Need perhaps browser click itself includes time. We'll click then run bash sleep maybe. Need careful: browser page animation continues in real time. Tool calls maybe immediate. Let's click breach.

Uh-oh screenshot after click shows state STOPPED, waterline 205, Q0, puddle0, t=11.86s, despite DOM from click reporting FLOWING 17% at t? There is mismatch: DOM snapshot taken at moment click +0ms maybe state FLOWING 17%, but attached screenshot seems later (t=11.86) and STOPPED. Yet waterline stayed205 and puddle0! This indicates a bug: `updateFlow` may set stopped because head maybe negative? Wait crackY294, openBottom325; head=120. Should flow. But screenshot STOPPED with waterline205 and no waterline fall. Could be `S.breachAge` huge due hidden tab timer? Let's examine. In `triggerBreach`, we set `S.breachAge=0`, `S.breached=true`. `updateFlow`:
```
const ramp=ease(S.breachAge/.45);
const head=...
if(head<=.45)... else normalized...
```
Should rise. But screenshot t=11.86 and stopped. Could `S.stopped` set erroneously because `S.breachAge` not incrementing? Actually maybe browser tool screenshot taken after 11.86 sec from page load and click happened at t=11.86? Yet screenshot showing immediate after click at t=11.86 (page loaded 11.86s before click due our reasoning/tool latency), breachAge=0, flowNorm0. `updateUI(true)` at triggerBreach uses `S.flowNorm` from previous state (0) => state STOPPED due logic `!S.breached ? INTACT : flow>... ? FLOWING : STOPPED`. So immediately after breach with flowNorm0, status STOPPED. DOM tool output from click says FLOWING17% because perhaps after one animation frame. Screenshot attached might be from before click? Tool result DOM and screenshot can be at different timing. But screenshot t=11.86, STOPPED, no jet. Need likely click registered then screenshot captured at another moment maybe pre-click? Strange. Also Breach button still orange enabled in screenshot? It appears orange, not disabled? Actually screenshot Breach button orange, maybe disabled style only opacity .42 would be faded; screenshot seems orange strong. Reset etc. If stopped state after breach, Breach disabled would be faded. It is maybe bright orange? screenshot seems orange. Wait DOM from click output state FLOWING, but screenshot state STOPPED. Maybe


the screenshot actually shows a later time after a weird `R` key? Need inspect current state. Call inspect.

Now screenshot at t20.45s, waterline308, flow29%, jet curved downward, sample data good, puddle from x maybe530 to1020, walls, 3 swept. But note sample auto at t12.27s, meaning page load time was ~11s and first click at t11.86. The tool calls take significant real time due our reasoning; auto sample at1.28s after breach, okay. It shows waterline+16.7, flow72%, current affected8. Great. Need maybe check early outflow after selecting crack and pressing breach; we have auto sample. But need click "Sample outflow" maybe manual after current flow. Could click now maybe at t>9s, sample would show low flow. Requirement says sample early outflow—we already have auto sample. Could perhaps click button to check it works but sample will be late. Could reset and redo with one quick sequence to get manual sample early? Need perhaps browser tool calls can be combined in one `bash`? no. Could perhaps use `key` to reset and then click breach/sample in quick tool calls; reasoning latency doesn't count? Actually tool calls themselves each maybe ~few sec? Need maybe `multi_tool_use.parallel` can run multiple browser actions simultaneously but not sequential; maybe can call reset, breach, sample at once but parallel race condition. Could perhaps add URL hash command or use browser key? No. Could use JS API via `browser` tool not arbitrary. But we can use `browser action: key` with text maybe "rbs" but our key handler processes one keydown per event; browser `key` text perhaps types string? There is `type` action. Need perhaps use `browser action:type` with text "rbs" on a focused element? It might dispatch each keystroke sequentially in same tool call, potentially reset, breach, sample in quick succession. But sample immediately after breach won't have tracer path enough; button auto sample will say "Sampling…" unless first tracer path hasn't been updated yet. Need maybe with text "rbb"? no. Could use `key` action with text field maybe one key. Could perhaps use timeouts via CSS? no.

Need perhaps manually click sample now to verify button works; it would capture latest tracer path and display data with low flow. That is okay. But requirement specifically sample early outflow: auto early sample does that. Need perhaps check "current nearby objects respond" from sample: current-affected8, swept3. Need


maybe visually objects respond: screenshot shows fish near surface, rocks moved, toy at surface, plants bent/uprooted (one plant maybe missing at x661? screenshot plant at x? right side seems no plant? likely uprooted and swept out). Need perhaps need check glass fragments rotation, collision and resistance; screenshot shows fragments on floor/puddle, rotated. Good. Need check puddle constrained by floor and room walls: screenshot puddle spans from x~530 to1020, surface at y~640 screenshot, floor y~667; endpoints at right wall maybe x1008? It seems puddle right edge at screen x1020 maybe canvas right boundary1063/room wall x972 => internal x972 maps x1037; puddle endpoint x1020 perhaps wall. Need check drawPuddle clip: clip rect x=ROOM.left+wall=40 to ROOM.right-...=960? Actually `ctx.rect(ROOM.left + ROOM.wall, ..., ROOM.right - ROOM.left - ROOM.wall*2, ...)`, width=920 from40 to960, so puddle constrained to inner wall boundary x960. Good. Screenshot right edge ~1020 maps internal x954. Fine. Need floor constraint okay.

But possible bug in jet path endpoint? screenshot jet curves downward, good. Need perhaps waterline fall continuously (yes from205 to308). Outflow weakens (72% early to29% now). Need stops eventually; could let run more. Need perhaps inspect after further time to confirm stop. Need perhaps manually sample, then reset. Need perhaps check console no errors. Need perhaps check `Sample outflow` button. Let's click at x364,y116.

Sample button works, though latest tracer path from earlier remains and now outflow0. Need perhaps this could be confusing: manual sample after stop uses previous tracer and says outflow0%, but okay. Auto early sample is overwritten by manual late sample. Could we preserve early sample separately? Perhaps not required. But "sample early outflow" if user clicks after stop, they get historical tracer sample from early outflow but current outflow0. Fine. Need perhaps ensure `Sample outflow` after reset disabled and no stale sample. Need reset check. Click Reset at x258,y116.

Reset works and returns same initial scene, crack365, no puddle, all objects. Need perhaps compare initial screenshot maybe crack handle at y494; reset screenshot handle y494. yes. Need perhaps check console no errors across entire run: inspect output console[] each time. Good.

Need identify and fix clear problems discovered. Potential issue: `drawPuddle` clip uses only y from TANK.bottom-12=513 to floor, okay. Puddle maybe drawn over legs but constrained. Good.

Potential issue: Breach button appears orange even disabled? style `:disabled {opacity:.42}` but screenshot after breach button looked muted brown; okay.

Potential issue: initial state after `triggerBreach` could briefly show STOPPED until first flow frame due `updateUI(true)` with flow0. In screenshot after click was STOPPED at t11.86, perhaps indeed first frame? Let's analyze. DOM from click at +0ms reported FLOWING17%, but attached screenshot after click showed STOPPED; maybe screenshot from a different frame captured at click moment before DOM? Could be browser tool screenshot/WebSocket race. But there is a real bug: If `triggerBreach` calls `updateUI(true)`, S.flowNorm=0, S.breached=true, so state computed STOPPED. It might temporarily say STOPPED for up to first frame (~16ms), not meaningful. Could fix by computing state based on `S.breached && !S.stopped` initially, i.e. state = FLOWING even before first flow update. More robust. Need maybe set `S.flowNorm` to initial normalized flow in triggerBreach? But ramp should start0. Could define `S.pendingFlow=true` or state depends on `S.stopped`. Change `updateUI`:
```
const state = !S.breached ? "INTACT" : (S.stopped ? "STOPPED" : "FLOWING");
S.mode = ...
```
Then initial after breach shows FLOWING, and while flowNorm small no STOPPED. Once `updateFlow` sets stopped=true, STOPPED. This is clearer. Need also status message initial "Glass panel fractured..." note. Good. Also `breachBtn.disabled` correct. Need fix.

Potential issue: `drawJet` uses `jetPoints` loop; if `last` undefined when first t=0 exceeds boundaries could error. But x=TANK.right+3=713 <962, y=crackY <550, so safe. fine.

Potential issue: `updateTankObject` for non-breached rocks does nothing, so rocks remain initial. fine.

Potential issue: `updateObjects` draws rocks in two loops: first loop condition `if (o.region !== "tank" && o.kind !== "plant") continue;` then `if(o.kind==="rock") drawRock`. This will draw loose plants outside? no because condition continues for outside non-plants, then only rocks drawn; then second loop draws only region tank fish/toy/plant, so outside plant not drawn there; third loop draws outside plants. fine. But outside rocks drawn in first loop (region air, kind rock, condition false because kind rock != plant? Wait condition: `if (o.region !== "tank" && o.kind !== "plant") continue;` For outside rock: true && true => continue, so not drawn in first loop. Third loop draws outside rock. okay. For outside plant: true && false => no continue; then `if kind==="rock"` false, so not drawn first; third loop draws. fine. Slight redundant but okay.

Potential issue: when `resetSimulation` called while frame loop may be mid-step? JS single-thread, fine.

Potential issue: `drawPuddle` after reset has `S.puddleVolume=0`, but `S.puddle` from previous state is undefined in new S; `draw()` bottom text uses `S.puddle ? ... :0`; bottom showed Puddle 40px screenshot after reset? Wait reset screenshot bottom text says `t=0.46s · WATER 205px · Q=0% · PUDDLE 40px` maybe zoom: screenshot tiny label looked "PUDDLE 40px"? Let's inspect. In reset screenshot bottom at y715: "PUDDLE 40px" maybe actually "PUDDLE 0px"? Need zoom. Could use browser screenshot perhaps image already. The text likely `PUDDLE 40px`? The DOM shows no puddle visually, so perhaps text confusing due font. Need maybe call inspect with data attributes? Browser inspect only DOM text not attributes. Could perhaps add a visible status with puddle width? Not necessary. But bottom drawing uses `S.puddle ? S.puddle.width : 0`; `updateObjects` each frame sets `S.puddle=puddleGeometry()` even at volume0, which returns depth0, width = 2*half =48 because left/right around center with half24. So bottom text


shows PUDDLE 48px even though no puddle drawn. That is a clear minor inconsistency. Need fix `puddleGeometry` to return width0 when volume<=1:
```
if (S.puddleVolume <= 1) return {left:S.puddleCenter,right:S.puddleCenter,width:0,depth:0,surfaceY:FLOOR};
```
Then floor physics inPuddle won't matter. Need fix. Need also `drawPuddle` early returns. Need bottom text show 0. Good.

Potential issue: puddle "spreading constrained by floor and room walls" okay. Need perhaps increase puddle spread to room left wall; screenshot final width850, left ~420 internal? Actually clipped. fine.

Potential issue: outward glass fragments collide with floor and room wall. screenshot shows glass shards in puddle near right wall/floor, rotated. good.

Potential issue: fish initially swim against current before some swept. Need perhaps screenshot early t20 shows fish maybe at surface left; sample current-affected8; swept3 by t20. But "initially swim against current" not directly visible except code. Could perhaps draw arrow annotation or tail? Physics does apply negative acceleration. Need perhaps maybe count all fish strong eventually swept? 3 objects swept maybe not necessarily fish. Need perhaps inspect snapshot to see kinds escaped? We can add debug maybe not needed. Could maybe write a script to instantiate JS? Hard. Could use browser `window.aquarium.snapshot()` only if arbitrary eval, not available. But screenshot at t34 shows 3 fish remain? Initial 5 fish, screenshot final shows maybe 4 fish: orange at surface left, yellow toy, green, orange near right; one fish maybe outside puddle? Could be 3 swept including fish, plant, pebble. Need likely okay.

Need perhaps fix early state STOPPED and puddle width. Also maybe auto sample at `breachAge >1.28` capture occurs but `S.time` includes page load time, so sample @12.27s not since breach; could be confusing: label says `@ 12.27s` (absolute page time) while requirement early outflow; better use `S.breachAge` so sample displays `@ 1.28s after breach`. Need fix: `captureSample` use `S.breachAge.toFixed(2)` and label `(auto early sample @ +1.28s)` rather than absolute. Also screenshot and DOM then clear. Need perhaps use `S.bre


achAge` in sample display. Need perhaps `S.sample.created=S.time` for drawing but show age. Could add `age:S.breachAge`. Need in sampleText:
```
const sampleAge = S.sample? or S.breachAge
...
<strong>Auto early sample</strong> @ +1.28s ...
```
Manual. More internally clear. Need fix.

Potential issue: sample curvature calculated `predicted=.5*g*t^2`, but tracer has initial vy range(-10,10) and path includes `t`; ratio ~1.05. Good.

Potential issue: `autoSampled` set true before capture; if no best/run<45, capture fails but won't retry. At 1.28s there is first tracer path >45, so okay. Could set `autoSampled=true` only if capture returns true. Need make captureSample return boolean and auto call conditionally. Not critical but robust. Could fix.

Potential issue: manual sample after stop uses `S.flowNorm=0` but tracer path from early. It might be okay. Could preserve `sample.flow` from time of tracer. Better maybe sample should report current outflow at sample time; if clicked after stop, it's 0. fine.

Potential issue: buttons "Breach" state after initial screenshot perhaps disabled style okay. Need maybe direct drag after reset works. We tested before.

Potential issue: state readout "STOPPED" immediately after breach maybe fixed. Need edit code. Need maybe check current `index.html` exact snippets. Use read or rg. We'll use edit with exact strings. Need multiple edits in one call. Let's find snippets.

We have ~5 min; need quick edits. Need read exact snippets around capture/puddle/updateUI/step.

Need exact updateUI snippet.

Need exact step snippet.

Let's make edits:
1. captureSample returns false/true, uses `S.breachAge` label `+${S.breachAge.toFixed(2)}s after breach`, maybe add return true at end. Change early returns.
2. puddleGeometry zero volume branch.
3. updateUI state based stopped.
4. auto sample conditional.

Need exact unique strings. Use one edit call multiple entries.

Need syntax check quickly and reload browser initial/console. Need maybe run through brief affected behavior maybe likely no need full sequence due time. Need browser reload, inspect perhaps console[] and DOM; maybe check initial Puddle 0 via screenshot. Need maybe quick breach to verify state after click and auto sample label. But time. We have ~3 mins. Let's syntax check then reload and perhaps use keyboard shortcuts quickly with `browser key`? Actually need check initial state and console. Then maybe use one `browser action: key` with text "b"? Need know key tool signature may require text field. Could use click breach. Then inspect after maybe >1.3 sec automatically. Need perhaps screenshot. Do fast.

Initial good, bottom PUDDLE0px now. Need quick breach click then inspect maybe after auto sample; perhaps no need drag again because drag already verified before edit; edit didn't touch pointer. But user asks finalize. Need check state after breach not STOPPED. Click breach then maybe inspect immediately.

Screenshot at t4.55s (page time), breach age0, outflow0, no jet yet. Fine. Need perhaps inspect after small time to see auto sample label and console. Could call inspect; time likely several seconds due tool call, auto sample will have occurred. Need maybe use browser inspect.

Great. Need perhaps note a visual issue: waterline label at y284 and toy floating. Puddle appears only on right side because center and spread; constrained by floor and room wall. Jet nicely curved. Some fish swept. Glass fragments. Sample label. Need maybe reset after final edit to verify reset again quickly. We did reset pre-edit; edit didn't touch reset. But perhaps need final check initial saved after edits? We reloaded and inspected; reset function likely same. Could quickly click Reset and inspect DOM, then final. Need maybe also verify crack drag after edits? pointer unchanged. No need. But requirement "Reset and check tank returns intact initial state" we did pre-edit; edits don't affect reset. Could still quick click to ensure no errors. Time maybe ~1-2min. Let's do final reset inspect, then final answer.

Oops after Reset screenshot shows flow bar cyan filled! DOM says outflow0, but flowBar width maybe not reset because CSS transition? Actually screenshot bottom of live status card shows blue bar about half width. Need inspect: `flowBar.style.width = clamp(S.flowNorm*100,0,100)%` called in updateUI(true) on reset; should0. But screenshot might be captured during CSS transition from 75% to 0% (transition .09s linear), and screenshot at t8.41 maybe reset just now; flowBar shrinking. DOM says intact. Need maybe not a clear problem; transient. Could remove transition or force? Better remove CSS transition on flowBar to ensure immediate reset. But not essential. Could edit quickly: `transition: width .09s linear;` -> `transition: none;`. Then need reload. But user asked finalize as soon as possible; this is a minor visual transient. However reset screenshot check could be interpreted as not returning exact initial state. Need fix essential? Could be a clear issue in screenshot. Let's do one quick edit to remove transition, syntax not needed (CSS only). Then perhaps final no browser reload needed? But need save file. We can edit and maybe quickly reload/inspect? Time maybe. Let's do edit.

Need perhaps reload and quick screenshot to confirm initial bar no fill. But no need maybe. Yet final response should mention checks. Need maybe ensure file present. Quick bash ls and maybe node syntax check (CSS edit irrelevant). Could do quickly.

Need final concise report: created index.html, checked initial intact scene and console no errors; dragged crack from365 to294; breach caused curved downward jet, waterline fall (205→284 etc), auto early sample Δx+168, Δy+79 downward, parabola1.06, outflow92→75 then eventually0; nearby objects current-affected7, swept3; puddle constrained floor/walls; manual sample and stop checked; Reset returned intact with waterline205, crack365, flow0, no puddle/sample. Mention unverified: long-term exact collision/buoyancy edge cases at all crack positions, maybe all objects fit/passage at each position; browser console clear. Need mention final unverified behaviors perhaps "I did not exhaustively test every crack height or every individual object collision; physics is simplified". Need not overdo. Need note final file path. Need perhaps mention no external assets. Also note "Console had no errors." Good.

Need ensure no false claim of puddle check perhaps screenshot. Fine. Could mention "visual pass". Need maybe final answer only.