The user wants a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the fluid. I need to create a single self-contained HTML file with embedded CSS and JavaScript, with no external resources.

I'll implement a Navier-Stokes fluid simulation using WebGL for performance, or use Canvas 2D. Given that real-time fluid simulation needs to be fast, I should use WebGL. However, to keep it self-contained and reasonably complex, I can use a simplified stable fluids approach on Canvas 2D with imageData, but that might be slow at high resolutions. WebGL would be much better for performance. But writing a full WebGL fluid sim in a single file is doable.

I'll create a WebGL-based fluid simulation. The typical approach is:
- Use a ping-pong buffer technique for velocity and dye fields.
- Implement the staggered grid or standard grid solver with advection, diffusion, projection steps.
- Use mouse interaction to add velocity and dye.

I'll use fragment shaders to perform the simulation steps on textures. I'll need framebuffers, textures, and shaders.

Key components:
1. Advection shader - moves velocity/dye along velocity field (semi-Lagrangian)
2. Divergence shader - computes divergence of velocity
3. Pressure (Jacobi) shader - solves Poisson equation
4. Gradient subtraction shader - subtracts pressure gradient from velocity to make it divergence-free
5. Splat shader - adds velocity and dye from mouse input
6. Display shader - renders dye to screen

Parameters:
- Viscosity (low for inviscid)
- Diffusion factor
- Timestep

For the mouse interaction:
- On mouse move, track position and previous position to compute velocity.
- Add splats of color (random hues cycling) and velocity.

I'll make it full-screen, handle window resize.

Write the HTML file with inline CSS to remove margins, canvas full screen, body overflow hidden.

Now I'll write the code. Since it's a single file, I'll embed everything.

Important: Use raw WebGL API, no libraries. Need to manage textures and framebuffers carefully.

Implementation details:
- Use float textures (OES_texture_float) for precision. Fallback to HALF_FLOAT if needed.
- Sim resolution should be lower than screen for performance (e.g., 512x512 or scaled).
- Mouse coordinates need to be mapped to simulation space.

I'll follow the classic WebGL fluid simulation approach similar to https://github.com/PavelDoGreat/WebGL-Fluid-Simulation/blob/master/script.js but heavily simplified and condensed.

Let me write the code step by step in the final output.

I need to ensure no external references, all in one file.

Potential structure:
- HTML: canvas element
- Script:
  - WebGL context and extension setup
  - Shader sources as template strings
  - Texture/framebuffer creation helpers
  - Simulation configuration
  - Input handling
  - Render loop

I'll try to keep it concise but functional.

The user asked to create a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the fluid. I've written an `index.html` file at `/workspace/index.html` that implements a WebGL-based Navier-Stokes fluid solver (advection, divergence, pressure projection, gradient subtraction) with ping-pong buffers, pointer-based interaction, colorful dye splats, and a full-viewport canvas. The file is self-contained: all CSS is in a `<style>` tag and all JavaScript is in a `<script>` tag, with no external resources or CDN dependencies.

I should provide a concise confirmation to the user and confirm the file path.