The user wants a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the fluid. This is the classic "Fluid Simulation" by Pavel Dobryakov / Michael Ash. I'll implement it in a single self-contained index.html.

Let me write a complete fluid simulation. This is the well-known GPU fluid simulation using WebGL with ping-pong framebuffers. I'll implement the full algorithm:
- advection
- divergence
- curl (vorticity)
- pressure solve
- gradient subtract
- splat

Let me write it carefully. I'll create one file index.html.

Let me write the full GPU-based fluid simulation code adapted from the well-known implementation, self-contained with no external resources.

I'll write the shaders and the simulation logic. Let me produce a complete, correct implementation.

Let me think about the structure:
- Two fragment shader programs: base (FULLSCREEN_VERTEX_SHADER + frg shader), display (FULLSCREEN_VERTEX_SHADER + displayShaders).
- Framebuffers for dye, velocity, divergence, curl, pressure.
- Helper functions compileShader, createProgram, getUniforms, createFramebuffer, createDoubleFramebuffer, resizeFramebuffer, getResolution.
- Sim functions: splat, advection, divergence, curl, vorticity, pressure, gradientSubtract.
- Pointer handling: pointerDown, pointerMove, splat on down and move.
- Benchmark: FPS tracking.

Let me write it. I'll adapt from the classic implementation using GL_FRAGMENT_PRECISION_HIGH and PACKED float texture usage via WEBGL_color_buffer_float / OES_texture_half_float.

I'll write a robust version. Let me write out all the code.

Since I need it to be fully self-contained, I'll inline everything.

Let me write the JS with all shaders.

I'll write it now.

The code got messy with a few duplicate/leftover splat functions. Let me clean up the file. There's a duplicate `splat` function at the top that has leftover placeholder code, and an unused `applySplat`, and unused `splatFS_velocity`/`splatFS_color` constants. Also `blit` is used in places where the framebuffer is already bound — the blit function rebinds the framebuffer, which is fine.

Let me review the whole thing carefully for correctness.

Issues:
1. The `splat` function at the top is broken/leftover. I define it twice? No — I define `splat` once at top with leftover code, then later use `splat` in pointer handlers. The `splat` at top binds velocity.write and uses velocityProgram (advectionProgram) with weird placeholder uniforms. This won't work. I should replace `splat` with a clean implementation.

Let me rewrite the file more cleanly. There's a lot of duplication and dead code. Let me rewrite the whole file properly.

Let me consolidate:
- `splat(x, y, dx, dy, color)` should write dye and velocity. Actually the pointer handlers call `splat(pos, dx, dy, color)` AND `splatColor(...)`. Let me make `splat` do both: add dye and add velocity. Then remove separate splatColor calls.

Let me rewrite cleanly. The velocity splat needs to ADD to existing velocity (blend), and dye splat adds to existing dye.

For the velocity splat with additive: I can enable blending. Since velocity is a float texture storing values, blending 'ADD' would add the splat to the existing velocity. Let me use gl.blendFunc(gl.ONE, gl.ONE) with blend equation ADD, and draw to velocity.write (which currently holds the read content already... actually I can render the splat directly onto velocity.write with additive blend over the previous write content).

Approach: 
- For velocity: bind velocity.write, enable ADD blending (ONE, ONE), draw splat quad. This adds splat on top of whatever's in velocity.write. velocity.write currently holds previous frame's swapped content? In the frame flow, velocity.read is current. velocity.write is "old". Hmm.

Better approach: copy the read into write, then additively splat. Or enable blending and render the splat directly using the read as base. Simplest correct: 
1. Render splat (with additive blend ONE/ONE) into write which already contains the previous state. Since we swap each frame, velocity.write contains the state from two frames ago — but advection produced fresh output in write each frame then swapped. Actually after swap, write holds the old read (the pre-update velocity). So write isn't current.

Cleanest: do splat as: bind write, clear, render base = read (copy), render splat additively. But rendering copy then splat in same fbo.

Let me just do: 
- Render splat into write using copy shader won't add. 

Alternative simpler and standard: The original implementation splats by drawing a colored+velocity quad with blending disabled, REPLACING the pixel in write, then it advects. Wait, original uses blend for the dye splat (blendFunc(ONE, ONE_MINUS_SRC_ALPHA)) and for velocity splat uses blendFunc(ONE, ONE) additive? Let me recall.

Actually the original implementation's `splat` function:
```
function splat (x, y, dx, dy, color) {
  gl.viewport(0, 0, velocity.read.width, velocity.read.height);
  gl.bindFramebuffer(gl.FRAMEBUFFER, velocity.write.fbo);
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, velocity.read.texture);
  gl.uniform1i(uVelocity, 0);
  gl.uniform2f(uPoint, x, y);
  gl.uniform3f(uColor, dx, dy, 0);
  gl.uniform1f(uRadius, splatRadius);
  blit(velocity.write);
  velocity.swap();

  gl.viewport(0, 0, dye.read.width, dye.read.height);
  gl.bindFramebuffer(gl.FRAMEBUFFER, dye.write.fbo);
  gl.uniform1i(uVelocity, 0);
  gl.uniform2f(uPoint, x, y);
  gl.uniform3f(uColor, color.r, color.g, color.b);
  gl.uniform1f(uRadius, splatRadius);
  blit(dye.write);
  dye.swap();
}
```
Wait that overwrites velocity.write entirely with the splat — no, it uses the splat shader that blends. Hmm, in the original the splat shader does `gl_FragColor = texture2D(uSource, vUv) + color * d`? No...

Actually the original splat shader reuses the advection-style: no. Let me recall the original `splat.frag`:
```
precision highp float;
varying vec2 vUv;
uniform sampler2D uSource;
uniform vec2 texelSize;
uniform vec2 point;
uniform float radius;
uniform vec3 color;
void main () {
  vec2 p = vUv - point;
  float d = exp(-length(p) / radius);
  gl_FragColor = texture2D(uSource, vUv) + color * d;
}
```
Hmm that reads source and adds. But they blit to velocity.write binding uSource as velocity.read. And with blending disabled. So it adds source + color*d. For velocity, color = (dx,dy,0)*force? Actually they pass dx*? Let me just implement it this way — it's clean and correct. It renders write = read + splat. Then swap.

And there's no separate dye splat needed; the same splat does both velocity and dye in the original, color being the dye color. The dye gets the color*d added, and velocity gets (dx,dy)*d added.

But the original uses TWO splat calls — one for velocity (color=(dx,dy,0)) and one for dye (color = dye rgb). Both render `source + color*d`.

Let me implement exactly that with a single splat shader. Clean.

Let me rewrite the whole file cleanly. I'll drop all the leftover applySplat, copyVelocityToWrite duplication, splatText leftovers, and dead code.

Let me rewrite carefully and fully.

Plan the file:

Shaders: base vertex, splat frag, blur(copy), advection, divergence, curl, vorticity, pressure, gradientSubtract, display.

Splat frag:
```
precision highp float;
varying vec2 vUv;
uniform sampler2D uSource;
uniform vec2 texelSize;
uniform vec2 point;
uniform float radius;
uniform vec3 color;
void main(){
  vec2 p = vUv - point;
  float d = exp(-dot(p,p)/ ... );
```
Let me use d = exp(-length(p)*... ) Actually original: `float d = exp(-length(p) / radius);` Hmm exp(-len/radius) with radius ~0.25 is too strong (near 1 at center, decays slowly). That creates big splats. Fine, matches original look.

I'll follow: d = exp(-length(p) / radius).

But to have swirl, velocity needs dx,dy*force. color=vec3(dx,dy,0) for velocity. Good.

splat function:
```
function splat(x, y, dx, dy, color) {
  // velocity
  gl.viewport(0,0,velocity.read.width, velocity.read.height);
  gl.bindFramebuffer(gl.FRAMEBUFFER, velocity.write.fbo);
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, velocity.read.texture);
  gl.useProgram(splatProgram);
  u = splatProgram.uniforms;
  gl.uniform1i(u.uSource, 0);
  gl.uniform2f(u.texelSize, velocity.texelSizeX, velocity.texelSizeY);
  gl.uniform2f(u.point, x, y);
  gl.uniform1f(u.radius, splatRadius);
  gl.uniform3f(u.color, dx, dy, 0);
  blit(velocity.write);
  velocity.swap();

  // dye
  gl.viewport(0,0,dye.read.width, dye.read.height);
  gl.bindFramebuffer(gl.FRAMEBUFFER, dye.write.fbo);
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, dye.read.texture);
  gl.useProgram(splatProgram);
  gl.uniform2f(u.point, x, y);
  gl.uniform1f(u.radius, splatRadius);
  gl.uniform3f(u.color, color[0]/255, color[1]/255, color[2]/255);
  gl.uniform2f(u.texelSize, dye.texelSizeX, dye.texelSizeY);
  blit(dye.write);
  dye.swap();
}
```

Blit resets viewport & framebuffer and draws fullscreen triangle strip.

Now the pressure loop — I had a messy version. Let me write it cleanly:
```
gl.useProgram(pressureProgram.program);
gl.uniform1i(uDivergence, 0);
gl.uniform1i(uPressure, 1);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, divergence.texture);
for (i...){
  gl.bindFramebuffer(gl.FRAMEBUFFER, pressure.write.fbo);
  gl.viewport(0,0,pressure.width,pressure.height);
  gl.activeTexture(gl.TEXTURE1);
  gl.bindTexture(gl.TEXTURE_2D, pressure.read.texture);
  blit(pressure.write);
  pressure.swap();
}
```

blit re-binds pressure.write fbo and draws. Since it binds framebuffer already, fine. But blit sets viewport to target dims — good.

Wait, blit uses the current bound vertex attrib and element buffer set up in the IIFE. It binds framebuffer (target=pressure.write) and draws. Good. But after first iteration we set uniforms once. uPressure uniform unit 1, uDivergence unit 0 — set once before loop, persists. Good.

Pressure clear initially: pressure starts as cleared black. Good.

Now step:
```
function step(dt) {
  gl.disable(gl.BLEND);

  // Curl
  bindFramebuffer curlTex, viewport curl, useProgram curl
  texture0 = velocity.read
  uniform uVelocity=0
  blit(curlTex)

  // Vorticity -> velocity.write
  bindFrame velocity.write, viewport velocity.write
  useProgram vorticity
  tex0 = velocity.read, tex1 = curlTex
  uVelocity=0, uCurl=1, curl, dt
  blit(velocity.write)
  velocity.swap()

  // Divergence
  divergence fbo, viewport
  use grad... divergence
  tex0=velocity.read, uVelocity=0
  blit(divergence)

  // Pressure
  ...
  // Gradient subtract -> velocity.write
  bindFrame velocity.write
  useProgram gradientSubtract
  tex0=velocity.read (uVelocity=0), tex1=pressure.read (uPressure=1)
  blit(velocity.write); velocity.swap()

  // Advect velocity
  // Advect dye
  // Display
}
```

All good. Let me also make sure `gl.blendFunc` not needed since splat uses source-add, and discrete step disables blend. But the frame before splat disables blend — step disables blend each frame. But pointer events happen between frames after blend disabled, so splat renders without blending enabled — good since splat adds in shader.

Now display shader: I tone-map. Keep simple `gl_FragColor = vec4(pow(texture...rgb, vec3(1.0/2.2)), 1.0)`. Actually the dye already got gamma from splat? No. Keep gamma 1.0/2.2 which brightens a lot; maybe use sqrt-ish 1.0/1.6. Let me use pow 0.45 for nice look.

Let me also handle the initial empty state: dye starts black, so screen black with HUD. Good.

Let me also ensure `isMobile` defined before use in simRes — yes I reference isMobile() at top in simRes/dyeRes const declarations; isMobile function is defined later via function declaration (hoisted). Good, function declarations hoist.

Let me rewrite the entire file cleanly.

The text was deemed large. Let me write a clean version.

Let me also double check blit: it uses gl.vertexAttribPointer(0,...) and enableVertexAttribArray(0) once at setup; the fullscreen vertex shader uses `attribute vec2 aPosition` at location 0. Good.

I need to make sure display program uses same base vertex shader (FULLSCREEN_VERTEX_SHADER) which declares varyings vUv etc. and uses texelSize uniform but we only need vUv. Since shader uses texelSize uniform, we must set it or it's just unused uniform (fine, defaults 0). It's declared but if not set, fine.

Actually the display shader compiled with FULLSCREEN_VERTEX_SHADER referencing uniform texelSize; getUniforms will include it, we don't set, that's fine (unused warnings ok).

Let me write clean.

One more: the splat shader's uSource needs texelSize? No, it uses vUv and point/radius only, plus samples uSource at vUv. Fine, no texelSize needed but I'll pass anyway.

Let me finalize.

Let me review my code for issues. I have several awkward spots. Let me simplify the splat logic. The `splat` function is messy with leftover unused code. Let me rewrite it cleanly.

Issues:
1. In `splat()` there's leftover broken code with velocityProgram uniforms for texelSize/dt that don't exist in advection... actually advectionProgram has texelSize, dt, dissipation, dyeTexelSize uniforms. But the splat function uses them in a confusing way before calling applySplat. Let me clean it up.

2. `applySplat` for 'velocity' copies existing velocity then draws splat on top. The splat shader uses `gl_FragColor = vec4(velocity * d * d, 0.0, 1.0)` which would overwrite the copied velocity entirely, not add. Since we want to add on top, but the copy then the splat overwrites. Actually the splat clears write then copies read then draws splat which overwrites with just the splat contribution — losing the copied velocity. We want to keep both. Better to just clear and draw splat, and swap, since each frame the dye gets advected from read; the old velocity is in read, and write becomes new read after swap. So we don't need to copy. Actually the standard approach: splat writes into write fbo a fresh splat (cleared), then swap so read = splat. But then previous velocity is lost — that's fine at the moment of splat because the previous velocity was already used in the last step. Hmm, but splatting overwrites the whole velocity write buffer with just the splat, losing any recent velocity from previous step. In the original implementation, splat renders with blending? Actually the original uses a special splat shader that adds to existing. Let me reconsider.

The classic implementation does:
```
function splat(x, y, dx, dy, color) {
  gl.viewport(0, 0, velocity.read.width, velocity.read.height);
  gl.bindFramebuffer(gl.FRAMEBUFFER, velocity.write.fbo);
  gl.activeTexture(gl.TEXTURE0);
  gl.bindTexture(gl.TEXTURE_2D, velocity.read.texture);
  ...
  drawColor with splat shader that reads existing and adds
}
```

Actually in the original, the splat framebuffer is a separate `splat` FBO, and it draws the splat into it, which is then bled onto velocity in the next step. The splat shader draws the user splat into the frame buffer.

Let me simplify: I'll make splat write the velocity contribution directly. The splat adds impulse. If we just clear to 0 and write the splat, we lose previous velocity. But since pointer is moving continuously and we step each frame, losing velocity in between is acceptable-ish but would cause stutter. Better approach: enable additive blending OR copy existing then add.

Simplest robust approach: copy previous velocity into write, then draw splat with blending enabled to add on top. Let me use `gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE);` for the splat draw then disable.

Let me rewrite more cleanly. I'll restructure the whole script for cleanliness. Let me rewrite the file.

Also there were leftover unused functions (splatColor duplicates applySplat color path). Let me clean up.

Let me rewrite the whole file cleanly.

The file is messy. Let me rewrite the entire file cleanly with a well-structured approach. I'll rewrite the whole thing to be clean and correct.

Key design decisions:
- Splat approach: copy existing target into write buffer, then draw splat with additive blending ON TOP. This preserves previous content and adds impulse/dye.
- Actually with blending, reading the existing and adding works. But note the advection step each frame copies... no, advection reads from `read` and writes to `write`, then swaps. So `write` is free for splatting. Splatting into `write` then swap makes the new state = old state + splat. Good.

Let me write clean code. I'll rewrite the whole file.

Now I have leftover helper functions `makeProgram` and `linkUniforms` that are dead code but harmless. Let me remove them for cleanliness. Actually they reference `getUniforms(null)` which would throw if called, but they're never called. Let me remove them.

Also there's a display blit using `GL.drawArrays(GL.TRIANGLES, 0, 3)` — but my quad is drawn with ELEMENT_ARRAY_BUFFER using indices [0,1,2,0,2,3]. For drawArrays with 3 vertices it would draw only the first 3 vertices (-1,-1,-1,1,1,1) which is the top-left triangle of the quad, leaving bottom-right half black. I should use `blit(null)` which uses drawElements, or drawArrays with 6 vertices. Let me use blit(null) for consistency.

Also need to make sure the display uses gl.drawElements with the index buffer. Let me change display to call blit(null).

Also check: in the splat for 'velocity', value = [dx, dy, 0] so rgb=(dx,dy,0). But the splat shader outputs vec4(color*d, 1.0) where color is uValue. For velocity we only need r,g (x,y components); b is 0, fine. Good.

One concern: The advection for dye uses bilerp on velocity of sim resolution but dyeTexelSize is dye resolution; the velocity texture is sim resolution. Sampling velocity at dye coordinates is fine (sampler handles it).

Let me also double check the `makeProgram`, `linkUniforms`, and `program` functions. I have both `makeProgram`/`linkUniforms` (dead) and `program`. Let me remove the dead ones.

Let me clean up and fix display draw.

Now let me verify there are no leftover references and the file is syntactically valid. Let me check the file for any remaining issues with node syntax check. I can extract the script and run node --check.

JS parses fine. Let me double check the final file is complete and the index.html ends properly. Let me verify the last lines.

Let me also reconsider a potential bug: in the splat function for velocity, the value uses dx,dy which can be large (up to SPLAT_FORCE magnitude). splatRadius*1.4 falloff. Fine.

One concern: the bilerp coordinate for advection—using half-pixel offsets. Standard implementation. Good.

Another consideration: the order of splat operations relative to step. On mousedown we splat dye only (no velocity impulse). On move we splat velocity then dye. That's fine.

Potential issue: After pointer down splat('dye') copies existing dye (read) into write then adds new color and swaps. Fine since step swaps each frame; read is latest. Good.

I think the implementation is solid. Let me verify the file tail.

The file is complete and valid. Let me do a final check on the structure—make sure there are no obvious issues. Let me view the whole file once more quickly to double check there are no leftover issues.

The implementation should be good. Let me summarize.

The file ends with index.html present as required. Done.