Build a fluid simulation (stable fluids style) inside a single HTML file. Use a WebGL fluid simulation (classic GPU fluid simulation). Or write a Canvas 2D Navier-Stokes simulation on a grid. For a nice result, a WebGL implementation is best. Write a compact WebGL stable-fluids simulation: advection, vorticity, pressure solve, dye. Based on the well-known Pavel Dobryakov-style implementation, but write it myself.

Need to be careful about completeness. Write a self-contained WebGL fluid simulation with the following shaders:

- Base quad program
- Advection
- Divergence
- Pressure (Jacobi)
- Gradient subtract
- Curl + vorticity confinement
- Splat
- Display

Use half-float framebuffers, linear filtering with fallback. Keep it reasonably robust: check for half-float linear support, and fall back to nearest if needed.

Let's write the code.

Key components:

1. WebGL context, extensions (OES_texture_half_float, OES_texture_half_float_linear for WebGL1, or use WebGL2 with EXT_color_buffer_float).
2. Framebuffer object (FBO) creation.
3. Shaders.
4. Simulation loop: velocity advection, curl, vorticity, divergence, pressure Jacobi about 20 iterations, gradient subtract, dye advection, draw.
5. Mouse pointer events, splats on move/drag (colorful dyes). Also an initial random splat.

Support manual filtering fallback: use NEAREST when linear filtering is not supported, and sample with bilinear interpolation inside the shader (the classic implementation does this). To keep the code small, do this: if linear is not supported, use NEAREST and handle bilinear inside the advection shader (like the original). Include that too.

Let's write the complete file.

Shaders (GLSL ES 1.0 style for both WebGL1 and WebGL2? Use WebGL2 with a fallback to WebGL1, and use `#define` for texture... easier to write in GLSL 100 and use WebGL1-style code that works in both contexts via a getContext('webgl2') fallback... actually simpler: try webgl2, if not, webgl. In webgl2, EXT_color_buffer_float is required for rendering half-float; the texture format is RGBA16F / HALF_FLOAT. In WebGL1, use OES_texture_half_float with format RGBA, type ext.HALF_FLOAT_OES.

Write a getSupportedFormat function similar to the famous implementation.

Let's write it. Aim for a file of about 500 lines.

Shader list:

baseVertexShader: position, texcoord varying.

copy/clear shader for pressure dissipation — use a clear shader that multiplies pressure by dissipation.

splatShader: draw a gaussian splat of color onto the target.

advectionShader: with MANUAL_FILTERING define option.

divergence, curl, vorticity, pressure, gradientSubtract, display.

Pointer handling: pointermove while dragging -> compute delta, splat velocity and dye. Also splat when pressed. Cycle color based on hue over time.

Touch events too.

Handle resize by recreating framebuffers while preserving? Just reinitialize.

Now let's write the code.

Simulation resolution: dye at 1024 (or based on device), simulation at 128/256.

Let's carefully write out the complete code.

const canvas = document.getElementById('c');
getWebGLContext: try webgl2, then webgl; set up extensions and texture parameters.

Implement the following:

function getWebGLContext(canvas) {
  const params = { alpha: true, depth: false, stencil: false, antialias: false, preserveDrawingBuffer: false };
  let gl = canvas.getContext('webgl2', params);
  const isWebGL2 = !!gl;
  if (!isWebGL2) gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);
  let halfFloat, supportLinearFiltering;
  if (isWebGL2) {
    gl.getExtension('EXT_color_buffer_float');
    supportLinearFiltering = gl.getExtension('OES_texture_float_linear');
  } else {
    halfFloat = gl.getExtension('OES_texture_half_float');
    supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear');
  }
  gl.clearColor(0,0,0,1);
  const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
  let formatRGBA, formatRG, formatR;
  if (isWebGL2) {
    formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType);
    formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType);
    formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType);
  } else {
    formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
    ... same
  }
  return { gl, ext: {...} };
}

getSupportedFormat: create a test fbo and check framebuffer completeness; if R fails, fall back R->RG->RGBA.

Then programs, FBOs, blit.

Now write the whole thing and make sure names are consistent.

Also add a subtle overlay instruction text ("drag to swirl"). Good.

Let's write the file.

Quick sanity check: make sure the file is roughly valid — maybe run a simple syntax check on the script portion with node? Might be able to extract the script and run node --check on it.

No Python. Either use Node itself to extract it, or use sed/awk.

Also, verify that no external resources are being used — quick grep for http. And confirm that it's a single file.

No external references, single file, valid syntax. Done. Summarize.