Make flask resizable and keep water fill proportional

[Testtesttestestes]

Motivation

• Allow the flask (container) to be resized at runtime so its width/height can be adjusted and the liquid adapts visually and physically.
• Keep the percentage-based fill behavior so changing the flask size preserves the desired water level expressed by progress.

Description

• Added UI sliders Flask Width and Flask Height and forwarded them into RealisticProgressBar as flaskWidth/flaskHeight props so the shape can be changed at runtime.
• Made the component compute flaskHalfSize and flaskRadius, used when generating initial particle positions and when reinitializing the SPH simulation.
• Added _flaskShape state and setFlaskShape API in src/sph/sph.js and threaded u_flask_half_size / u_flask_radius uniforms into the particle update and pressure passes.
• Updated marching-squares renderer (src/sph/renderer.js / src/sph/ms.frag) to accept the dynamic flask shape and use it for rendering/refraction, and updated update.frag/pressure.frag to use the uniforms for collision, density and respawn logic so active particle count (controlled by u_progress) still represents the fill percentage.

Testing

• Ran a production build with npm run build which completed successfully.
• Started the dev server and captured a visual regression screenshot via an automated Playwright script which produced artifacts/flask-resizable.png (first attempt timed out, second run succeeded).
• Committed the changes and created the PR after the build and validation artifacts were generated.

---

Codex Task