Mandelbrot explorer · lfm-2.5-24b-a2b

We need to build an interactive Mandelbrot set explorer as a single HTML file. Let me plan the requirements:

1. Mandelbrot set computation from complex coordinates with smooth escape-time color gradient
2. Distinct color for points inside the set
3. Initially show the main cardioid and surrounding lobes
4. Drag to pan the image
5. Mouse wheel zoom centered on the complex point under cursor
6. Recompute fractal after navigation (not just scale)
7. Sufficient iterations to reveal detail at zoom levels
8. Reset view button to restore initial bounds
9. Prevent wheel navigation from scrolling the page
10. Use Canvas 2D or WebGL, procedural colors, no external images

Let me think about the implementation:

**Canvas setup**: Full-screen canvas. I'll use Canvas 2D.

**Mandelbrot computation**:
- Map pixel coordinates to complex plane
- Initial view: The main cardioid is roughly centered around (-0.5, 0) with width about 2.5. The standard view is something like:
  - Real: -2.5 to 1.0
  - Imaginary: -1.0 to 1.0
- Or more precisely, the main cardioid is between approximately x = -0.75 to 0.25, y = -0.5 to 0.5
- Standard view: real from -2.0 to 1.0, imag from -1.5 to 1.5

**Color scheme**:
- Inside the set: distinct color (e.g., black or deep blue)
- Outside: smooth gradient based on iteration count. Use HSV or similar to create a nice gradient.

**Smooth escape time**: Use the normalized iteration count: `mu = n + 1 - log(log(abs(z))) / log(2)` for smooth coloring.

**Zoom & Pan**:
- Track current view bounds (realMin, realMax, imagMin, imagMax)
- On wheel: compute zoom factor, adjust bounds centered on cursor position
- On drag: pan the view
- Need to handle pointer events

**Reset**: Store initial bounds and restore them.

**Prevent page scroll**: Use `event.preventDefault()` on wheel events when zooming.

Let me write the code:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; }
  canvas { display: block; }
  #controls {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: rgba(0,0,0,0.7);
    padding: 10px;
    border-radius: 5px;
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="controls">
  <button id="reset">Reset View</button>
</div>
<script>
// ... JS code ...
</script>
</body>
</html>
```

Now let me think about the Mandelbrot computation details:

For each pixel (x, y):
- Map to complex plane:
  ```
  x_min, x_max, y_min, y_max
  real = x_min + (x / width) * (x_max - x_min)
  imag = y_min + (y / height) * (y_max - y_min)
  ```

- Iterate: z = z^2 + c, starting with z=0
- If |z| > 2, it's escaped
- Smooth escape time: if escaped at iteration n, mu = n + 1 - log2(log(|z|))

Color mapping:
- Inside (escaped = false): black or dark color
- Outside: map n to a hue/color

For the gradient, I can use HSL where hue varies with iteration count. For example:
- Hue = (n / max_iterations) * 360
- Saturation and lightness adjusted

Let me define the initial bounds:
- Real: -2.5 to 1.0
- Imag: -1.5 to 1.5

This shows the main cardioid and the main bulb.

**Zoom logic**:
- On wheel event: calculate delta, new bounds centered on cursor
- Cursor position in complex plane: 
  ```
  c_real = x_min + (mouseX / width) * (x_max - x_min)
  c_imag = y_min + (mouseY / height) * (y_max - y_min)
  ```
- Zoom factor: e.g., 1.15 per step
- New bounds: center stays the same, size changes by factor

**Pan logic**:
- On mousedown/move: track offset
- On mouseup: reset offset

Actually, let me simplify: use a transform approach. Keep track of `offsetX`, `offsetY` (pan offsets) and `scale`. When panning, update offsets. When zooming, change scale and adjust bounds.

Or simpler: maintain view rectangle [xMin, xMax, yMin, yMax] and update it on wheel/pan.

Let me structure the code:

```javascript
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;

// View state
let view = {
  xMin: -2.5,
  xMax: 1.0,
  yMin: -1.5,
  yMax: 1.5,
  // or maybe use a scale factor
};

// Panning
let isPanning = false;
let panStartX = 0, panStartY = 0;
let panOffsetX = 0, panOffsetY = 0;

// Reset
function resetView() {
  view.xMin = -2.5;
  view.xMax = 1.0;
  view.yMin = -1.5;
  view.yMax = 1.5;
}

// Compute
function mandelbrot(cRe, cIm, maxIter) {
  let zRe = 0, zIm = 0;
  let iter = 0;
  while (iter < maxIter && zRe*zRe + zIm*zIm <= 4) {
    let oldRe = zRe;
    zRe = zRe*zRe - zIm*zIm + cRe;
    zIm = 2*oldRe*zIm + cIm;
    iter++;
  }
  return iter;
}
```

Wait, the standard Mandelbrot iteration is z = z^2 + c. With zRe, zIm:
```
z2Re = zRe*zRe - zIm*zIm
z2Im = 2*zRe*zIm
zRe = z2Re + cRe
zIm = z2Im + cIm
```

For smooth coloring:
```javascript
if (iter < maxIter) {
  let logZ = Math.log(zRe*zRe + zIm*zIm) / 2;
  let mu = iter + 1 - Math.log(Math.abs(logZ)) / Math.log(2);
  return { iter, mu };
}
```

Color:
- If iter >= maxIter: inside → black
- Else: outside → color based on mu

For the color gradient, I'll use HSL:
- Hue: (mu / maxIter) * 360
- Saturation: 70%
- Lightness: 50%

Inside: dark gray or black.

Let me think about the rendering loop. I'll use requestAnimationFrame to continuously render, but only re-render when the view changes. Actually, for responsiveness, I can render on every event (wheel, drag, reset). But that might be heavy. Let me do it on demand: render when view changes, and also on resize.

Actually, for smooth interaction, I should render after each interaction. Let me keep it simple: render function that draws the whole image, called on events.

**Wheel zoom**:
- Prevent default
- Get mouse position relative to canvas
- Convert to complex coordinates based on current view
- Compute zoom factor (e.g., 1.2)
- New bounds: center stays same, size *= zoomFactor
- Update view

**Pan**:
- On mousedown: record start position
- On mousemove: calculate delta in pixels, convert to complex delta, update view
- On mouseup: done

**Touch support?** Not required, but could add basic support. Let's keep it simple with mouse.

**Event listeners**:
- 'wheel': zoom
- 'mousedown', 'mousemove', 'mouseup': pan
- 'click' on reset button

Let me also add a resize handler to update canvas size.

Now, let me think about the "distinct color for points inside the set". I'll make inside points black/dark.

**Smooth escape-time gradient**: Yes, using the mu formula.

Let me write the complete code now.

Actually, let me reconsider the initial view. The main cardioid of the Mandelbrot set is centered around approximately (-0.5, 0) with a width of about 1.5. The main bulb is to the left. A good initial view:
- x: -2.0 to 1.0
- y: -1.2 to 1.2

This shows the cardioid and the circular bulb clearly.

Let me set maxIterations: 100-200 for the initial view. When zoomed in, increase iterations (e.g., proportional to zoom level).

Actually, to keep it simple, I'll use a fixed maxIterations of maybe 100-150. For deeper zooms, more iterations are needed. Let me make it adaptive: maxIter = base + zoomLevel * some factor. Or just use a high enough value like 300.

Let me use maxIter = 200 for the initial view. When zoomed in, I'll increase it.

Now, let me write the full HTML file.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mandelbrot Explorer</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; font-family: sans-serif; }
  canvas { display: block; cursor: crosshair; }
  #controls {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: rgba(0,0,0,0.8);
    padding: 10px 15px;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
  }
  #controls button {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
  }
  #controls button:hover {
    background: #444;
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="controls">
  <button id="resetBtn">Reset View</button>
</div>
<script>
(function() {
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  
  let W, H;
  let view = { xMin: -2.0, xMax: 1.0, yMin: -1.2, yMax: 1.2 };
  let maxIter = 200;
  
  // Pan state
  let panning = false;
  let panStartX = 0, panStartY = 0;
  let panOffsetX = 0, panOffsetY = 0;
  
  // Wheel zoom factor
  const ZOOM_FACTOR = 1.15;
  
  function resize() {
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
    draw();
  }
  
  function toComplex(x, y) {
    // x, y are pixel coordinates
    const cx = view.xMin + (x / W) * (view.xMax - view.xMin);
    const cy = view.yMin + (y / H) * (view.yMax - view.yMin);
    return { re: cx, im: cy };
  }
  
  function mandelbrot(cRe, cIm) {
    let zRe = 0, zIm = 0;
    let iter = 0;
    while (iter < maxIter) {
      // Check divergence
      if (zRe * zRe + zIm * zIm > 4.0) break;
      // z = z^2 + c
      const oldRe = zRe;
      zRe = zRe * zRe - zIm * zIm + cRe;
      zIm = 2 * oldRe * zIm + cIm;
      iter++;
    }
    if (iter === maxIter) {
      return { escaped: false, iter: maxIter };
    }
    // Smooth escape time
    const logZ = Math.log(zRe * zRe + zIm * zIm) / 2;
    const mu = iter + 1 - Math.log(Math.abs(logZ)) / Math.log(2);
    return { escaped: true, iter, mu };
  }
  
  function smoothColor(mu, maxIter) {
    // Map mu to hue
    const hue = (mu / maxIter) * 360;
    return `hsl(${hue}, 70%, 20%)`;
  }
  
  function draw() {
    const imgData = ctx.createImageData(W, H);
    const data = imgData.data;
    
    for (let py = 0; py < H; py++) {
      for (let px = 0; px < W; px++) {
        const { re, im } = toComplex(px, py);
        const result = mandelbrot(re, im);
        
        const idx = (py * W + px) * 4;
        if (result.escaped) {
          // Outside: smooth color
          const color = smoothColor(result.mu, maxIter);
          // Parse HSL to RGB
          const [r, g, b] = hslToRgb(color);
          data[idx] = r;
          data[idx + 1] = g;
          data[idx + 2] = b;
          data[idx + 3] = 255;
        } else {
          // Inside: black
          data[idx] = 0;
          data[idx + 1] = 0;
          data[idx + 2] = 0;
          data[idx + 3] = 255;
        }
      }
    }
    
    ctx.putImageData(imgData, 0, 0);
  }
  
  function hslToRgb(h, s, l) {
    // h in degrees, s and l in [0,1]
    h = ((h % 360) + 360) % 360;
    let c = l * (1 + s * Math.sin(((h / 60) - 3) * Math.PI / 180));
    let x = c * (1 - Math.abs((h / 60) % 2 - 1));
    let m = l - c / 2;
    let r, g, b;
    if (h < 60) { r = c; g = x; b = 0; }
    else if (h < 120) { r = x; g = c; b = 0; }
    else if (h < 180) { r = 0; g = c; b = x; }
    else if (h < 240) { r = 0; g = x; b = c; }
    else if (h < 300) { r = x; g = 0; b = c; }
    else { r = c; g = 0; b = x; }
    return [
      Math.round((r + m) * 255),
      Math.round((g + m) * 255),
      Math.round((b + m) * 255)
    ];
  }
  
  // Event handlers
  canvas.addEventListener('wheel', function(e) {
    e.preventDefault();
    
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    
    // Current view center
    const cx = view.xMin + (W / 2) * (view.xMax - view.xMin);
    const cy = view.yMin + (H / 2) * (view.yMax - view.yMin);
    
    // Complex position under cursor
    const cRe = view.xMin + (mouseX / W) * (view.xMax - view.xMin);
    const cIm = view.yMin + (mouseY / H) * (view.yMax - view.yMin);
    
    // Zoom factor
    const zoom = ZOOM_FACTOR;
    
    // New bounds: center stays the same, size scales
    const newWidth = (view.xMax - view.xMin) * zoom;
    const newHeight = (view.yMax - view.yMin) * zoom;
    
    view.xMin = cx - newWidth / 2;
    view.xMax = cx + newWidth / 2;
    view.yMin = cy - newHeight / 2;
    view.yMax = cy + newHeight / 2;
    
    // Increase iterations based on zoom level
    maxIter = Math.min(500, 100 + Math.log2(1 / zoom) * 50);
    
    draw();
  }, { passive: false });
  
  canvas.addEventListener('mousedown', function(e) {
    panning = true;
    panStartX = e.clientX;
    panStartY = e.clientY;
    // Record initial offset
    panOffsetX = view.xMin;
    panOffsetY = view.yMin;
  });
  
  window.addEventListener('mousemove', function(e) {
    if (!panning) return;
    const dx = e.clientX - panStartX;
    const dy = e.clientY - panStartY;
    
    // Pan in pixel space, then convert to complex
    const deltaRe = (dx / W) * (view.xMax - view.xMin);
    const deltaIm = (dy / H) * (view.yMax - view.yMin);
    
    view.xMin += deltaRe;
    view.xMax += deltaRe;
    view.yMin += deltaIm;
    view.yMax += deltaIm;
    
    draw();
  });
  
  window.addEventListener('mouseup', function() {
    panning = false;
  });
  
  document.getElementById('resetBtn').addEventListener('click', function() {
    view.xMin = -2.0;
    view.xMax = 1.0;
    view.yMin = -1.2;
    view.yMax = 1.2;
    maxIter = 200;
    draw();
  });
  
  window.addEventListener('resize', resize);
  
  resize();
})();
</script>
</body>
</html>
```

Hmm, wait. There's an issue with the wheel zoom. When zooming, I'm computing the center of the view in pixel coordinates, but I should be careful. Let me reconsider.

The view center in complex plane is:
- cx = (view.xMin + view.xMax) / 2
- cy = (view.yMin + view.yMax) / 2

The mouse position in complex plane:
- cRe = view.xMin + (mouseX / W) * (view.xMax - view.xMin)
- cIm = view.yMin + (mouseY / H) * (view.yMax - view.yMin)

New bounds: keep center fixed, scale the extent.
- newWidth = (view.xMax - view.xMin) * zoomFactor
- newHeight = (view.yMax - view.yMin) * zoomFactor
- view.xMin = cx - newWidth / 2
- view.xMax = cx + newWidth / 2
- etc.

That looks correct.

But there's a subtle issue: when zooming, the mouse position is in the current view's coordinate system. After zooming, the mouse is still at the same screen position, which now maps to a different complex coordinate. That's fine — the zoom is centered on the point under the cursor.

Also, I need to make sure the canvas fills the screen properly. Using `canvas.width = window.innerWidth` should work.

Let me also think about the color for inside the set. The requirement says "a distinct color for points treated as inside the set." Black is distinct. Good.

Now, about the smooth escape-time gradient: I'm using `mu` which is the smoothed iteration count. The color is mapped from mu/maxIter to hue. This gives a nice rainbow gradient.

One concern: the `hslToRgb` function. Let me double-check the math. The standard HSL to RGB conversion:

Given h in [0, 360), s in [0,1], l in [0,1]:
```
c = l * (1 + s * sin(...))
```
Actually, the standard formula:
```
h' = h / 60
C = l * (1 + s * cos(h'))
X = C * (1 - |mod(h', 2) - 1|)
m = l - C/2
(R, G, B) = ((R'+m), (G'+m), (B'+m))
```

Where R', G', B' depend on h':
- 0 ≤ h' < 1: (C, X, 0)
- 1 ≤ h' < 2: (X, C, 0)
- 2 ≤ h' < 3: (0, C, X)
- 3 ≤ h' < 4: (0, X, C)
- 4 ≤ h' < 5: (X, 0, C)
- 5 ≤ h' < 6: (C, 0, X)

My implementation looks correct.

Let me test the color conversion mentally: for h=0, s=0.7, l=0.2:
- c = 0.2 * (1 + 0.7 * sin(-90°)) = 0.2 * (1 + 0.7 * -1) = 0.2 * 0.3 = 0.06
- x = c * (1 - |mod(0,2)-1|) = 0.06 * (1 - 1) = 0
- So (r,g,b) = (0+0.2*0.5, 0+0.2*0.5, 0+0.2*0.5) = (0.1, 0.1, 0.1)? Wait, m = l - c/2 = 0.2 - 0.03 = 0.17
- r = c + m = 0.06 + 0.17 = 0.23 → 59
- g = x + m = 0 + 0.17 = 0.17 → 43
- b = 0 + m = 0.17 → 43

Hmm, that seems reasonable. The inside is black, outside has a rainbow gradient.

Now, let me think about performance. Drawing the entire canvas on every event might be slow for large screens. But for a demo, it should be okay. The canvas is full screen (e.g., 1920x1080), so 2 million pixels. Each pixel requires a Mandelbrot iteration. With maxIter=200, that's up to 400 million operations per frame. That's too slow!

I need to optimize. Options:
1. Reduce the resolution (draw at a lower resolution and scale up)
2. Use WebGL (but the requirement says Canvas 2D or WebGL, and no external libraries)
3. Only redraw when the view changes (which I'm already doing)
4. Reduce maxIterations for the initial view

Actually, for a demo, drawing 1920x1080 with 200 iterations each is 414 million operations. In JavaScript, that might take several seconds. Let me reduce the resolution: maybe render at half resolution (960x540) and use `imageSmoothingEnabled = false` to get crisp pixels. Or use a lower resolution like 640x480.

Alternatively, I can use a smaller canvas and scale it up. Let me set the canvas to a reasonable size like 800x600 and use CSS to make it fill the screen. Actually, the canvas internal resolution should match the display for sharpness, but for a fractal explorer, a lower internal resolution with scaling looks fine.

Let me try: W = 800, H = 600. Then draw at that resolution and scale to fill the window. This will be much faster.

Actually, let me keep the canvas at window size but reduce the number of iterations. Or better: use a lower resolution for rendering and upscale.

Let me go with: internal canvas = 800x600, and CSS `width: 100vw; height: 100vh;` to fill the screen. The browser will scale it up.

Hmm, but the requirement says "full-screen canvas." I think having the canvas cover the viewport is sufficient.

Let me reconsider: I'll set canvas.width = window.innerWidth, canvas.height = window.innerHeight, but I'll limit the iterations. For the initial view, maxIter=100 might be enough to see the cardioid. For zoomed-in views, I'll increase iterations.

Actually, let me test with a moderate approach: render at 640x480 (307k pixels). At 200 iterations, that's 61 million operations. Should be fast enough in modern browsers.

Let me set the canvas to a fixed internal resolution of 640x480 and scale it via CSS. No wait, if I set canvas.width/height to innerWidth/innerHeight, the browser will render at that resolution. If I want a lower-res render, I should set the internal dimensions to a smaller value.

Let me do this:
```javascript
const RENDER_W = 640;
const RENDER_H = 480;
canvas.width = RENDER_W;
canvas.height = RENDER_H;
// CSS: canvas { width: 100vw; height: 100vh; object-fit: contain; }
```

Then draw to the offscreen canvas at RENDER_W x RENDER_H, and put it onto the full-screen canvas. Actually, I can just draw directly to the main canvas at its internal resolution. The browser will scale it up.

Let me keep it simple: internal resolution = window.innerWidth x window.innerHeight, but I'll limit maxIter to 100-150. For a demo, this should be acceptable. If it's too slow, I can reduce.

Actually, let me benchmark mentally: 1920*1080 ≈ 2M pixels. 2M * 100 iterations = 200M operations. In V8, a simple loop of 200M iterations might take ~100ms? Actually, each iteration involves a few arithmetic ops. It might take 0.5-1 second. That's acceptable for a demo, especially since we only redraw on events (wheel, drag, reset).

But the smooth escape calculation adds a log and abs. Still, it should be okay.

Let me keep the full resolution for quality. If it's too slow, I can adjust.

Now, another consideration: the wheel event. I'm using `{ passive: false }` and calling preventDefault(). Good.

Also, I need to make sure the reset button works and stops scrolling.

Let me also add a title or label? Not required.

Let me refine the code and make sure everything is correct.

One more thing: the initial view bounds. Let me use:
- xMin: -2.0, xMax: 1.0
- yMin: -1.2, yMax: 1.2

This shows the main cardioid (centered around -0.5, 0) and the main bulb (around -1, 0).

For the smooth color, I want the boundary to have a nice gradient. The smooth escape time mu gives a continuous value.

Let me finalize the code. I'll write it all into index.html.

Actually, let me reconsider the color for inside the set. The requirement says "a distinct color for points treated as inside the set." Black is distinct from the colorful outside. Good.

Let me also add a subtle feature: maybe a small text label showing the current zoom level? Not required.

Let me write the final version:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mandelbrot Explorer</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; }
  canvas { display: block; cursor: crosshair; }
  #controls {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 15px;
    border-radius: 5px;
    color: #fff;
    font-family: sans-serif;
    font-size: 13px;
  }
  #controls button {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    padding: 5px 12px;
    cursor: pointer;
    border-radius: 3px;
    margin-top: 5px;
  }
  #controls button:hover {
    background: #444;
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="controls">
  <button id="resetBtn">Reset View</button>
</div>
<script>
(function() {
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');

  let W, H;
  let view = { xMin: -2.0, xMax: 1.0, yMin: -1.2, yMax: 1.2 };
  let maxIter = 200;

  let panning = false;
  let panStartX = 0, panStartY = 0;

  const ZOOM_FACTOR = 1.15;

  function resize() {
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
    draw();
  }

  function toComplex(px, py) {
    const cx = view.xMin + (px / W) * (view.xMax - view.xMin);
    const cy = view.yMin + (py / H) * (view.yMax - view.yMin);
    return { re: cx, im: cy };
  }

  function mandelbrot(cRe, cIm) {
    let zRe = 0, zIm = 0;
    let iter = 0;
    while (iter < maxIter) {
      if (zRe * zRe + zIm * zIm > 4.0) break;
      const oldRe = zRe;
      zRe = zRe * zRe - zIm * zIm + cRe;
      zIm = 2 * oldRe * zIm + cIm;
      iter++;
    }
    if (iter === maxIter) {
      return { escaped: false, iter: maxIter, mu: 0 };
    }
    const logZ = Math.log(zRe * zRe + zIm * zIm) / 2;
    const mu = iter + 1 - Math.log(Math.abs(logZ)) / Math.log(2);
    return { escaped: true, iter, mu };
  }

  function hslToRgb(h, s, l) {
    h = ((h % 360) + 360) % 360;
    const c = l * (1 + s * Math.sin(((h / 60) - 3) * Math.PI / 180));
    const x = c * (1 - Math.abs((h / 60) % 2 - 1));
    const m = l - c / 2;
    let r, g, b;
    if (h < 60) { r = c; g = x; b = 0; }
    else if (h < 120) { r = x; g = c; b = 0; }
    else if (h < 180) { r = 0; g = c; b = x; }
    else if (h < 240) { r = 0; g = x; b = c; }
    else if (h < 300) { r = x; g = 0; b = c; }
    else { r = c; g = 0; b = x; }
    return [
      Math.round((r + m) * 255),
      Math.round((g + m) * 255),
      Math.round((b + m) * 255)
    ];
  }

  function smoothColor(mu, maxIter) {
    const hue = (mu / maxIter) * 360;
    return `hsl(${hue}, 70%, 20%)`;
  }

  function draw() {
    const imgData = ctx.createImageData(W, H);
    const data = imgData.data;

    for (let py = 0; py < H; py++) {
      for (let px = 0; px < W; px++) {
        const { re, im } = toComplex(px, py);
        const result = mandelbrot(re, im);

        const idx = (py * W + px) * 4;
        if (result.escaped) {
          const [r, g, b] = hslToRgb(smoothColor(result.mu, maxIter), 0.7, 0.2);
          data[idx] = r;
          data[idx + 1] = g;
          data[idx + 2] = b;
        } else {
          data[idx] = 0;
          data[idx + 1] = 0;
          data[idx + 2] = 0;
        }
        data[idx + 3] = 255;
      }
    }

    ctx.putImageData(imgData, 0, 0);
  }

  canvas.addEventListener('wheel', function(e) {
    e.preventDefault();

    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;

    const cx = (view.xMin + view.xMax) / 2;
    const cy = (view.yMin + view.yMax) / 2;

    const cRe = view.xMin + (mouseX / W) * (view.xMax - view.xMin);
    const cIm = view.yMin + (mouseY / H) * (view.yMax - view.yMin);

    const zoom = ZOOM_FACTOR;
    const newWidth = (view.xMax - view.xMin) * zoom;
    const newHeight = (view.yMax - view.yMin) * zoom;

    view.xMin = cx - newWidth / 2;
    view.xMax = cx + newWidth / 2;
    view.yMin = cy - newHeight / 2;
    view.yMax = cy + newHeight / 2;

    maxIter = Math.min(500, 100 + Math.log2(1 / zoom) * 50);
    draw();
  }, { passive: false });

  canvas.addEventListener('mousedown', function(e) {
    panning = true;
    panStartX = e.clientX;
    panStartY = e.clientY;
  });

  window.addEventListener('mousemove', function(e) {
    if (!panning) return;
    const dx = e.clientX - panStartX;
    const dy = e.clientY - panStartY;

    const deltaRe = (dx / W) * (view.xMax - view.xMin);
    const deltaIm = (dy / H) * (view.yMax - view.yMin);

    view.xMin += deltaRe;
    view.xMax += deltaRe;
    view.yMin += deltaIm;
    view.yMax += deltaIm;

    draw();
  });

  window.addEventListener('mouseup', function() {
    panning = false;
  });

  document.getElementById('resetBtn').addEventListener('click', function() {
    view.xMin = -2.0;
    view.xMax = 1.0;
    view.yMin = -1.2;
    view.yMax = 1.2;
    maxIter = 200;
    draw();
  });

  window.addEventListener('resize', resize);

  resize();
})();
</script>
</body>
</html>
```

Wait, I noticed a bug in the `hslToRgb` call: I wrote `hslToRgb(smoothColor(...), 0.7, 0.2)` but the function signature is `hslToRgb(h, s, l)`. The first argument should be the hue (a number), not an HSL string. Let me fix that:

```javascript
const [r, g, b] = hslToRgb(result.mu / maxIter, 0.7, 0.2);
```

Since `result.mu` is the smooth iteration count, dividing by maxIter gives a value between 0 and 1

We need to build an interactive Mandelbrot set explorer as a single-page web app in `index.html`. Requirements:

1. Compute the Mandelbrot set from complex coordinates with smooth escape-time color gradient, and a distinct color for points inside the set.
2. Initially show the complete main cardioid and surrounding lobes. Drag to pan. Mouse-wheel zoom centered on the complex point under cursor.
3. Recompute the fractal after navigation (pan/zoom), not just scaling. Use sufficient iterations to reveal detail as user zooms. Keep controls responsive.
4. Reset view to restore initial bounds. Prevent wheel from scrolling the page.
5. Use Canvas 2D or WebGL with procedural colors; no external image.

Verification: Zoom into a recognizable boundary point, check it stays near cursor while detail renders. Pan then Reset and compare with initial framing.

Let me write this. I'll create a self-contained HTML file with inline CSS and JS.

Plan:
- Full-screen canvas
- Mandelbrot computation: iterate z = z^2 + c, count iterations. Use smooth coloring: smooth escape time = n + 1 - log2(log(|z|)) / log(2) (or similar).
- Color gradient: map iteration count to color. Inside the set (escape > maxIterations) -> distinct color (e.g., black or deep blue).
- Initial bounds: typical view showing the main cardioid and primary bulbs. The main cardioid is roughly centered around (-0.5, 0) with width about 1.5. Standard view: x from -2.5 to 1, y from -1 to 1. But to show the main cardioid and lobes, we can use something like x: -2.5 to 1.0, y: -1.2 to 1.2. Actually, the main cardioid extends from about -0.75 to 0.25 on real axis, and the main bulb (circle) is centered at -1 with radius 0.25. To see both, a good view is x: -2.0 to 0.8, y: -1.1 to 1.1.

- Pan: click and drag to pan. Track mouse position relative to canvas.
- Zoom: mouse wheel, centered on the complex point under cursor. So when zooming, compute the complex coordinate corresponding to the cursor position before zoom, then scale around that point.
- Reset: restore initial bounds (xMin, xMax, yMin, yMax).
- Prevent wheel scroll: use event.preventDefault() on wheel events.

- Rendering: recompute the entire fractal on each pan/zoom change. Use requestAnimationFrame or just redraw on event.

- Smooth escape-time coloring: 
  - For points that escape (|z| > 2): smooth iteration count = n + 1 - log2(log(|z|))
  - Map to color via HSL or a gradient.

Let me design the code structure:

HTML:
- A canvas element filling the viewport
- Maybe a reset button overlay

CSS:
- body margin 0, overflow hidden, full screen
- canvas display block, width/height 100%

JS:
- Constants: MAX_ITER (maybe 100-200 for zoomed-in views)
- State: xMin, xMax, yMin, yMax, centerX, centerY (initial center), scale (pixel per unit)
- Initial bounds: let's say x from -2.5 to 1, y from -1.2 to 1.2
- Smooth escape time formula:
  ```
  if (n >= MAX_ITER) return 0; // inside set
  else {
    const log_zn = Math.log(z.real*z.real + z.imag*z.imag);
    const nu = Math.log(log_zn / Math.log(2));
    return n + 1 - nu;
  }
  ```

Color mapping:
- If inside set: dark color (e.g., #000011 or black)
- Else: map smooth value [0, MAX_ITER] to a gradient. E.g., hue from 0 to 300 (purple to red) or use a nice palette.

I'll use a gradient from purple to cyan to red based on iteration count.

Let me think about the zoom logic:
- On wheel: get delta in pixels, compute factor = pow(zoomFactor, delta). Actually, typical: zoomFactor = 1 / (2 ** (delta / 3)) or something. Simpler: factor = 1.1 ^ delta (if delta is positive, zoom in; negative, zoom out).
- Center point: convert cursor position (cx, cy) to complex coordinates using current view: cx * (xMax - xMin) / width + xMin, similarly for y.
- After zoom, update bounds so that the center point remains fixed.

Actually, standard approach:
```
const oldScale = (xMax - xMin) / width;
const centerX = (cx - width/2) * oldScale + xMin;
const centerY = (cy - height/2) * oldScale + yMin;

const newWidth = (xMax - xMin) * zoomFactor;
xMin = centerX - newWidth / 2;
xMax = centerX + newWidth / 2;
yMin = centerY - newHeight / 2;
yMax = centerY + newHeight / 2;
```

Where zoomFactor = 1.2 for zoom in, 1/1.2 for zoom out.

Drag panning:
- Track mousedown on canvas, record start position.
- On mousemove, compute dx, dy in pixel space, convert to complex delta: dx / oldScale, dy / oldScale, and add to xMin/xMax/yMin/yMax accordingly.

Reset: set bounds back to initial.

Now, let me write the code.

Initial bounds: Let's use xMin=-2.5, xMax=1.0, yMin=-1.2, yMax=1.2. This shows the main cardioid (centered around -0.5, 0) and the main bulb (center -1, radius 0.25).

Actually, to make the cardioid and its immediate bulbs visible, a common view is:
- x: -2.0 to 0.6
- y: -1.1 to 1.1

Let me go with xMin=-2.5, xMax=1.0, yMin=-1.2, yMax=1.2.

For the color gradient, I'll use HSL:
- Inside set: hue 0 (black or dark)
- Outside: hue = (iteration / MAX_ITER) * 300, saturation 80%, lightness 50%? Or use a nicer palette.

Let me define:
- If inside: color = "#0a0a1a" (dark blue-black)
- Else: hue = (smoothIter / MAX_ITER) * 240 (blue to red), lightness 60%.

Actually, classic Mandelbrot colors: inside is black, outside has a rainbow gradient. I'll do:
- smoothIter from 0 to MAX_ITER
- hue = (smoothIter / MAX_ITER) * 300 (purple to red)
- hsl(smoothIter/MAX_ITER * 300, 70%, 55%)

And for inside: hsl(0, 0%, 10%) or black.

Let me also add a subtle glow or something? No, keep it simple.

Now, rendering loop: on each state change, call draw().

Canvas size: use window.innerWidth/innerHeight.

Let me write the code now.

```html
<!DOCTYPE html>
<html>
<head>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; }
  canvas { display: block; width: 100vw; height: 100vh; }
</style>
</head>
<body>
<canvas id="mandelbrot"></canvas>
<script>
// ... JS code ...
</script>
</body>
</html>
```

JS implementation details:

```javascript
const canvas = document.getElementById('mandelbrot');
const ctx = canvas.getContext('2d');

let xMin = -2.5, xMax = 1.0, yMin = -1.2, yMax = 1.2;
let initBounds = { xMin, xMax, yMin, yMax };
let scale = null; // pixel per unit, computed from canvas size
let MAX_ITER = 100;

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  scale = canvas.width / (xMax - xMin);
}
window.addEventListener('resize', resize);

function mandelbrot(cRe, cIm) {
  let zr = 0, zi = 0;
  let n = 0;
  while (zr*zr + zi*zi <= 4 && n < MAX_ITER) {
    let tmp = zr*zr - zi*zi + cRe;
    zi = 2*zr*zi + cIm;
    zr = tmp;
    n++;
  }
  if (n >= MAX_ITER) return { inside: true, iter: MAX_ITER };
  let smooth = n + 1 - Math.log(Math.log(Math.sqrt(zr*zr + zi*zi))) / Math.log(2);
  return { inside: false, iter: smooth };
}

function draw() {
  const w = canvas.width, h = canvas.height;
  const imgData = ctx.createImageData(w, h);
  const data = imgData.data;
  
  for (let py = 0; py < h; py++) {
    for (let px = 0; px < w; px++) {
      const cRe = xMin + (px / w) * (xMax - xMin);
      const cIm = yMin + (h - py) / h * (yMax - yMin); // flip y
      
      const result = mandelbrot(cRe, cIm);
      const idx = (py * w + px) * 4;
      if (result.inside) {
        data[idx] = 0;
        data[idx+1] = 0;
        data[idx+2] = 0;
      } else {
        const hue = (result.iter / MAX_ITER) * 300;
        const sat = 70;
        const light = 55;
        // Convert HSL to RGB
        const r = hslToRgb(hue/360, sat/100, light/100);
        const g = hslToRgb(hue/360, sat/100, light/100);
        const b = hslToRgb(hue/360, sat/100, light/100);
        data[idx] = r;
        data[idx+1] = g;
        data[idx+2] = b;
      }
    }
  }
  ctx.putImageData(imgData, 0, 0);
}

function hslToRgb(h, s, l) {
  let r, g, b;
  if (s === 0) {
    r = g = b = l;
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q-p)*6*t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q-p)*(2/3-t)*6;
      return p;
    };
    const q = l < 0.5 ? l*(1+s) : l+s-l*s;
    const p = 2*l - q;
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }
  return [Math.round(r*255), Math.round(g*255), Math.round(b*255)];
}
```

Wait, the y-axis flip: canvas y increases downward. In complex plane, y increases upward. So to map canvas py to complex y: y = yMin + (h - py) / h * (yMax - yMin). That's correct.

Now, interaction:

- Pan: track dragging.
- Wheel: zoom.

```javascript
let isPanning = false;
let lastMouseX = 0, lastMouseY = 0;

canvas.addEventListener('mousedown', (e) => {
  isPanning = true;
  lastMouseX = e.clientX;
  lastMouseY = e.clientY;
});

canvas.addEventListener('mousemove', (e) => {
  if (!isPanning) return;
  const dx = e.clientX - lastMouseX;
  const dy = e.clientY - lastMouseY;
  // Convert to complex deltas
  const dxComplex = dx / scale;
  const dyComplex = dy / scale;
  // Update bounds
  xMin += dxComplex;
  xMax += dxComplex;
  yMin += dyComplex;
  lastMouseX = e.clientX;
  lastMouseY = e.clientY;
  draw();
});

canvas.addEventListener('mouseup', () => { isPanning = false; });

canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  
  // Current scale
  const oldScale = scale;
  
  // Center point in complex coords
  const centerRe = xMin + (w/2) * oldScale;
  const centerIm = yMin + (h/2) * oldScale;
  
  // Zoom factor
  const factor = e.deltaY < 0 ? 1.15 : 0.87;
  
  // New bounds centered on the point under cursor
  const newWidth = (xMax - xMin) * factor;
  const newHeight = (yMax - yMin) * factor;
  xMin = centerRe - newWidth / 2;
  xMax = centerRe + newWidth / 2;
  yMin = centerIm - newHeight / 2;
  yMax = centerIm + newHeight / 2;
  
  // Recompute scale
  scale = canvas.width / (xMax - xMin);
  draw();
});
```

Wait, there's an issue: when computing centerRe and centerIm, I used the old bounds. But the zoom should be centered on the point under the cursor. The point under cursor is at complex coordinates (centerRe, centerIm) based on the current view. Then after zoom, the new bounds are centered on that same point. That's correct.

But note: `scale` is canvas.width / (xMax - xMin). When I zoom, I update xMin/xMax/yMin/yMax, then recalculate scale. Good.

However, there's a subtlety: during pan, I'm updating xMin etc. but I'm not recalculating scale. Since canvas width/height might have changed, I should probably recalculate scale too. Actually, scale is derived from canvas width and the complex width. During pan, the complex width doesn't change, so scale stays the same. But if the window resizes, scale changes. Let me handle resize by calling resize() which sets scale.

Also, I need to handle the case where the zoom factor makes the bounds very small. With MAX_ITER=100, at high zoom levels, the image will be very detailed. That's fine.

Reset button: add a button overlay or just a keypress. Let's add a simple reset button in the corner.

Actually, the requirement says "Provide Reset view to restore the initial bounds." I can add a button element positioned over the canvas.

Let me add a button:
```html
<button id="resetBtn">Reset View</button>
```
Styled to be fixed-positioned at top-left.

Now, let me think about the smooth coloring more carefully. The formula:
```
if (n >= MAX_ITER) return { inside: true };
const log_zn = Math.log(zr*zr + zi*zi);
const nu = Math.log(log_zn) / Math.log(2);
return n + 1 - nu;
```
This gives a smooth iteration count between n and MAX_ITER. Good.

Color mapping: for inside set, use a dark color. For outside, map smooth iteration to hue.

Let me refine the color function. I want a nice gradient. Let me use:
- Inside: black (#0)
- Outside: hue from 250 to 10 (purple to red) cycling through.

Actually, let me use a simpler approach: HSL with hue = (iter / MAX_ITER) * 300, but clamp to avoid wrap-around issues. Or use a predefined palette.

I'll stick with HSL.

Now, let me put it all together. Also, I need to make sure the canvas is full-screen. Using CSS `width: 100vw; height: 100vh; display: block;`.

Let me also add a subtle title or instructions? Not required, but could be nice. The task says "initially show the complete main cardioid and surrounding lobes" — the default view does that.

Let me write the final code.

One concern: performance. Drawing the Mandelbrot set on every mouse move/up event might be slow. But with canvas 2D and reasonable resolution (e.g., 800x600), it should be okay. I'll use a moderate canvas size. Actually, the canvas fills the viewport, which could be large. To keep it responsive, I could limit the render resolution. But let's keep it simple: draw directly to ImageData.

Alternatively, I could use a lower resolution buffer and scale up. But let's try direct drawing first.

Actually, for better performance, I can render at a lower resolution (e.g., every 2 pixels) and use bilinear interpolation. But that adds complexity. Let's keep it simple: draw at full resolution. Modern browsers can handle it.

Let me estimate: if canvas is 1920x1080, that's about 2 million pixels. Each pixel: a few operations. Should be fine.

Now, let me write the complete index.html.

Additional considerations:
- The reset button should be visible. I'll place it in the top-left corner with absolute positioning.
- The canvas should capture pointer events. Pointer events might be better than mouse events for smoother interaction. But mouse events work. Let me use pointer events.

Actually, let me use pointer events for consistency.

Let me draft the full code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mandelbrot Explorer</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; font-family: sans-serif; }
  canvas { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; }
  #resetBtn {
    position: fixed;
    top: 10px;
    left: 10px;
    padding: 8px 16px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
  }
</style>
</head>
<body>
<canvas id="mandelbrot"></canvas>
<button id="resetBtn">Reset View</button>
<script>
// ... JS ...
</script>
</body>
</html>
```

JS:

```javascript
const canvas = document.getElementById('mandelbrot');
const ctx = canvas.getContext('2d');
const resetBtn = document.getElementById('resetBtn');

// Initial view bounds (main cardioid + surrounding lobes)
let xMin = -2.5, xMax = 1.0, yMin = -1.2, yMax = 1.2;
const initBounds = { xMin, xMax, yMin, yMax };

let MAX_ITER = 150; // higher for detail
let scale = null;

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  if (scale === null) {
    scale = canvas.width / (xMax - xMin);
  }
}
window.addEventListener('resize', resize);

function mandelbrot(cRe, cIm) {
  let zr = 0, zi = 0;
  let n = 0;
  while (zr * zr + zi * zi <= 4 && n < MAX_ITER) {
    let tmp = zr * zr - zi * zi + cRe;
    zi = 2 * zr * zi + cIm;
    zr = tmp;
    n++;
  }
  if (n >= MAX_ITER) return { inside: true, iter: MAX_ITER };
  const log_zn = Math.log(zr * zr + zi * zi);
  const nu = Math.log(log_zn) / Math.log(2);
  const smooth = n + 1 - nu;
  return { inside: false, iter: smooth };
}

function hslToRgb(h, s, l) {
  if (s === 0) return [l, l, l];
  const hue2rgb = (p, q, t) => {
    if (t < 0) t += 1;
    if (t > 1) t -= 1;
    if (t < 1/6) return p + (q - p) * 6 * t;
    if (t < 1/2) return q;
    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
    return p;
  };
  const q = l < 0.5 ? l * (1 + MAX_ITER) : l + MAX_ITER - l * MAX_ITER;
  const p = 2 * l - q;
  return [
    hue2rgb(p, q, h + 1/3),
    hue2rgb(p, q, h),
    hue2rgb(p, q, h - 1/3)
  ];
}

function draw() {
  const w = canvas.width, h = canvas.height;
  const imgData = ctx.createImageData(w, h);
  const data = imgData.data;
  
  for (let py = 0; py < h; py++) {
    for (let px = 0; px < w; px++) {
      const cRe = xMin + (px / w) * (xMax - xMin);
      const cIm = yMin + (h - py) / h * (yMax - yMin);
      
      const result = mandelbrot(cRe, cIm);
      const idx = (py * w + px) * 4;
      if (result.inside) {
        data[idx] = 0;
        data[idx+1] = 0;
        data[idx+2] = 0;
      } else {
        const hue = (result.iter / MAX_ITER) * 300;
        const r = Math.round(hslToRgb(hue / 360, 0.7, 0.55)[0]);
        const g = Math.round(hslToRgb(hue / 360, 0.7, 0.55)[1]);
        const b = Math.round(hslToRgb(hue / 360, 0.7, 0.55)[2]);
        data[idx] = r;
        data[idx+1] = g;
        data[idx+2] = b;
      }
    }
  }
  ctx.putImageData(imgData, 0, 0);
}

function updateBounds(dx, dy) {
  xMin += dx;
  xMax += dx;
  yMin += dy;
  yMax += dy;
}

// Pan handling
let isPanning = false;
let lastMouseX = 0, lastMouseY = 0;

canvas.addEventListener('pointerdown', (e) => {
  isPanning = true;
  lastMouseX = e.clientX;
  lastMouseY = e.clientY;
});

canvas.addEventListener('pointermove', (e) => {
  if (!isPanning) return;
  const dx = e.clientX - lastMouseX;
  const dy = e.clientY - lastMouseY;
  updateBounds(dx, dy);
  lastMouseX = e.clientX;
  lastMouseY = e.clientY;
  draw();
});

canvas.addEventListener('pointerup', () => {
  isPanning = false;
});

canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  
  const w = canvas.width;
  const h = canvas.height;
  const oldScale = scale || canvas.width / (xMax - xMin);
  
  // Complex coordinate of the center of the canvas
  const centerRe = xMin + (w / 2) * oldScale;
  const centerIm = yMin + (h / 2) * oldScale;
  
  // Zoom factor
  const factor = e.deltaY < 0 ? 1.12 : 0.89;
  
  // New bounds centered on the point under cursor
  const newWidth = (xMax - xMin) * factor;
  const newHeight = (yMax - yMin) * factor;
  xMin = centerRe - newWidth / 2;
  xMax = centerRe + newWidth / 2;
  yMin = centerIm - newHeight / 2;
  yMax = centerIm + newHeight / 2;
  
  scale = canvas.width / (xMax - xMin);
  draw();
});

resetBtn.addEventListener('click', () => {
  xMin = initBounds.xMin;
  xMax = initBounds.xMax;
  yMin = initBounds.yMin;
  yMax = initBounds.yMax;
  if (scale === null) {
    scale = canvas.width / (xMax - xMin);
  }
  draw();
});

resize();
draw();
```

Hmm, one issue: in the wheel handler, I'm using `scale || canvas.width / (xMax - xMin)`, but scale should always be defined after resize. It's fine.

Another issue: the smooth coloring formula. When z escapes, |z| > 2. The log formula works. But for points inside, I return inside: true. Good.

Let me double-check the color mapping. For points outside, smooth iteration ranges from 0 to MAX_ITER. Mapping to hue 0-300 gives a rainbow. Inside is black. That satisfies "distinct color for points treated as inside the set."

Now, let me think about the verification step. The user wants to verify by zooming into a recognizable boundary point and checking it stays near the cursor while additional detail is rendered. My implementation does that: zoom centers on the cursor point.

Also, "Pan the view, then use Reset view and compare with the initial framing." The reset button restores initial bounds.

One thing: the initial bounds should show the complete main cardioid and surrounding lobes. My bounds x:[-2.5, 1], y:[-1.2, 1.2] should show the main cardioid (centered around -0.5, 0) and the main bulb (center -1, radius 0.25). Yes, that's standard.

Let me also consider adding a title or instructions? Not strictly needed, but could be helpful. The task doesn't require UI text beyond the reset button. I'll keep it minimal.

Now, let me write the file and test it.

Actually, wait: I should double-check the smooth coloring formula. The standard smooth iteration count is:
```
if (n == MAX_ITER) return 0;
double log_zn = log(zr*zr + zi*zi) / 2;
return n + 1 - log_zn / log(2);
```
Or equivalently: `n + 1 - Math.log(Math.log(Math.sqrt(zr*zr + zi*zi)) / Math.log(2))`.

My formula: `const log_zn = Math.log(zr * zr + zi * zi); const nu = Math.log(log_zn) / Math.log(2); return n + 1 - nu;`

This is correct: log_zn = ln(|z|^2), so ln(|z|) = log_zn / 2. Then nu = ln(ln(|z|)) / ln(2). And smooth = n + 1 - nu. Yes.

But wait: if |z| > 2, then |z|^2 > 4, log_zn > ln(4) ≈ 1.386. nu > 0. smooth < n+1. Good.

Edge case: if z is exactly 0, then zr=0, zi=0, n=0, log_zn=0, log(0) is -infinity. But that only happens for c=0, which is inside the set (n=0, returns inside: true because n >= MAX_ITER is false, but then smooth calculation... actually for c=0, z stays 0, n goes to MAX_ITER, so it returns inside: true. Good.)

Alright, let me write the file.

Actually, I realize I should test the code in a browser. Let me write it first, then run it with the browser tool.

Let me also consider: the canvas might be very large, causing slow rendering. I could downsample. But let's try full resolution first.

One more thing: the reset button should be styled nicely. I'll make it semi-transparent.

Let me write the complete index.html now.

After writing, I'll open it in the browser and check:
1. Initial view shows the cardioid and lobes.
2. Pan with mouse drag works.
3. Scroll wheel zooms centered on cursor.
4. Reset restores initial view.
5. Zoom in on a boundary point keeps it near cursor.

Let me write the file.

We need to build an interactive Mandelbrot set explorer as a single-page web app in index.html. Requirements:

1. Compute the Mandelbrot set from complex coordinates with smooth escape-time color gradient, distinct color for points inside the set.
2. Initially show the complete main cardioid and surrounding lobes. Drag to pan. Mouse-wheel zoom centered on the complex point under cursor.
3. Recompute fractal after navigation (not scale static image). Use sufficient iterations to reveal detail when zooming. Keep controls responsive.
4. Reset view to restore initial bounds. Prevent wheel navigation from scrolling the page.
5. Use Canvas 2D or WebGL, procedural colors, no external images.

Verification: Zoom into a recognizable boundary point, check it stays near cursor while detail renders. Pan, then Reset and compare with initial framing.

Let me write this. I'll create a full HTML file with inline CSS and JS.

Key design:
- Full-screen canvas
- Mandelbrot computation: map pixel (x,y) to complex plane coordinates. Initial view: center around (-0.5, 0) with width about 3.5? The main cardioid is roughly centered at -0.5 + 0i, with width ~3.5 (from about -2 to 1). Standard view: x from -2.5 to 1, y from -1 to 1. Or use the typical "Mandelbrot" view: real from -2.5 to 1, imaginary from -1 to 1.

- Smooth escape time: use normalized iteration count: `mu = n + 1 - log(log(|z|)) / log(2)` or the standard smooth coloring: `mu = n + 1 - log2(log(z*z.conj()))`. Actually the standard formula: `log(z*z.conj())` gives log of magnitude squared. Smooth escape: `mu = n + 1 - Math.log2(Math.log(z*z.conj())) / Math.log(2)`... Let me recall: the smooth iteration count is `n + 1 - log(log(|z|))/log(2)`. More precisely: `mu = n + 1 - log(log(|z|)) / log(2)`. But we need to be careful: for points inside the set, |z| never escapes, so we just use the max iterations.

Actually the common formula:
```
if (r >= 2) return 0; // inside
let log_zn = Math.log(z*z.conj());
let mu = n + 1 - Math.log(log_zn) / Math.log(2);
```
This gives a smooth value between 0 and n.

- Color gradient: map mu to a color. For inside set (mu=0), use a distinct color like blue/purple. For outside, use a gradient from black through hues.

- Dragging: track mouse down, move offset.
- Wheel zoom: zoom factor based on distance from cursor. Center the view on the point under cursor. Recompute the fractal (re-run the entire rendering).
- Reset: restore initial bounds.
- Prevent page scroll on wheel: use `e.preventDefault()` on wheel events over the canvas.

Let me structure the code:

HTML structure:
```html
<!DOCTYPE html>
<html>
<head>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; }
  canvas { display: block; position: fixed; top: 0; left: 0; }
</style>
</head>
<body>
<canvas id="mandelbrot"></canvas>
<script>
// JavaScript here
</script>
</body>
</html>
```

JavaScript:
- Canvas setup: full screen, resize handling.
- State: initial bounds (realMin, realMax, imagMin, imagMax), current bounds (panX, panY, scale), zoom level, offsetX, offsetY (or just compute from bounds).
- Actually simpler: maintain a view rectangle: xMin, xMax, yMin, yMax. Initial: xMin=-2.5, xMax=1, yMin=-1, yMax=1. Scale = (xMax-xMin)/(width) pixels per unit.
- Pan: drag moves the view center.
- Zoom: wheel event. On wheel, compute the complex point under cursor: `cx = (mouseX / width) * (xMax - xMin) + xMin`, similarly for cy. Then set new bounds centered on that point with a zoom factor (e.g., 1.2).

- Rendering: compute Mandelbrot for each pixel. Use smooth escape time. Map to color.

Color scheme:
- Inside set: dark blue/purple (#000033 or similar)
- Outside: gradient from black through cyan/blue/purple/red. E.g., use HSL: hue based on iteration count. For inside, fixed color.

Let me define colors:
- Inside: dark purple/blue, e.g., `hsl(260, 80%, 10%)`
- Outside: gradient from black to white through colors. Use `hue = (iteration / maxIter) * 360`.

Actually, let's do a nice gradient:
- For points inside: color = `hsl(240, 70%, 15%)` (dark blue)
- For points outside: color based on iteration count: `hsl((iteration / maxIter) * 360, 70%, 50%)` but clamped.

Better approach: use a smooth gradient from black to red/white. Let me keep it simple:
- If inside: `#1a0033` (dark purple)
- If outside: `hsl(iteration / maxIter * 360, 70%, 60%)`

But for inside, maybe use a distinct color like `#0000ff` or `#00ffff`. Let me make it look good.

Let me think about the smooth escape function more carefully.

Standard smooth coloring:
```javascript
function mandelbrot(cRe, cIm, maxIter) {
    let zRe = 0, zIm = 0;
    let n = 0;
    while (n < maxIter && zRe*zRe + zIm*zIm < 4) {
        let oldRe = zRe;
        zRe = zRe*zRe - zIm*zIm + cRe;
        zIm = 2*oldRe*zIm + cIm;
        n++;
    }
    if (n === maxIter) return maxIter; // inside
    // smooth escape
    let log_zn = Math.log(zRe*zRe + zIm*zIm) / 2;
    let nu = Math.log(log_zn) / Math.log(2);
    return n + 1 - nu;
}
```

Wait, the standard formula is:
```
mu = n + 1 - log(log(|z|)) / log(2)
```
where |z| is sqrt(zRe^2 + zIm^2). So log_zn = Math.log(zRe*zRe + zIm*zIm) / 2 (since log|z| = 0.5*log(r^2)).

So:
```javascript
let r2 = zRe*zRe + zIm*zIm;
if (r2 >= 4) break;
```

And smooth:
```javascript
let log_z = Math.log(r2) / 2;
let nu = Math.log(log_z) / Math.log(2);
return n + 1 - nu;
```

For inside (maxIter reached): return maxIter.

Now, for the color mapping:
- If iter == maxIter: inside color.
- Else: color based on iter/maxIter mapped to hue.

Let me define the color:
- Inside: `hsl(250, 80%, 12%)` — dark blue
- Outside: `hsl(iter/maxIter * 360, 70%, 55%)`

This should give a nice gradient.

Now, rendering loop:
- On each frame, clear canvas, draw the fractal.
- Use ImageData for performance: create an ImageData of size width*height, fill pixels, putImageData.

For a full-screen canvas, width = window.innerWidth, height = window.innerHeight.

Resize handler: update canvas size and re-render.

Drag panning:
- Track mousedown (x, y, startX, startY)
- On mousemove, if pressed, compute delta and adjust offset.
- On mouseup, release.
- During drag, the view shifts.

Zoom:
- On wheel, prevent default. Compute the point under cursor in complex coordinates:
  ```
  // Normalized coordinates: 0..1
  px = mouseX / width
  py = mouseY / height
  cx = xMin + px * (xMax - xMin)
  cy = yMin + (1 - py) * (yMax - yMin)  // y is flipped
  ```
  Actually, canvas y goes down. So:
  ```
  cx = xMin + (mouseX / width) * (xMax - xMin);
  cy = yMax - (mouseY / height) * (yMax - yMin);
  ```
- New bounds: center = (cx, cy). Width = (xMax - xMin) / zoomFactor. Height = same * aspect ratio.
- Update xMin, xMax, yMin, yMax.

Reset: set back to initial bounds.

Initial bounds: let's use the classic view:
- xMin = -2.5, xMax = 1.0
- yMin = -1.0, yMax = 1.0

This shows the main cardioid and the main bulb.

Zoom factor: 1.2 or 0.8 per zoom step.

Pan: dragging. When dragging, the view shifts. We can implement by adjusting the offset. Simpler: maintain a view transform. Let me use a simpler model:

State variables:
- view = { xMin, xMax, yMin, yMax }

On drag: adjust xMin/xMax/yMin/yMax directly. For example, when dragging horizontally, change xMin and xMax by some amount. When dragging vertically, change yMin and yMax.

Actually, a common approach: maintain a center point and scale. But for simplicity, let's just modify the bounds directly:
- On mousedown at (mx, my):
  - record start position
  - on mousemove while pressed: compute dx, dy relative to start. Adjust the view:
    - If moving mostly horizontally: shift xMin/xMax by dx * scale
    - If moving vertically: shift yMin/yMax by dy * scale
  - This is approximate but works.

Alternatively, use a transform: translate the canvas context. But then the "reset" would need to reset the transform. Let me go with modifying bounds.

Let me define the drag logic:
- On mousedown: record `dragStartX`, `dragStartY`, and the current view bounds.
- On mousemove while dragging: compute deltaX = mouseX - lastMouseX, deltaY = mouseY - lastMouseY. Then:
  - view.xMin += deltaX / (view.xMax - view.xMin) * view.widthPixels? No, that's not right.
  
Simpler: treat the view as having a "pan" offset. Let me use a different approach: maintain a camera position (center) and zoom level. But the requirement says "drag pans the image". Either way works.

Let me use this model:
- view = { xMin, xMax, yMin, yMax }
- On drag: adjust the view bounds. For horizontal drag: `view.xMin += dx * (view.xMax - view.xMin) / width * something`. Hmm.

Actually, the simplest intuitive behavior: when you drag, the image pans. The amount of pan is proportional to the drag distance. Let me define:
- On mousedown: record initial mouse position (startX, startY) and initial view center (cx, cy).
- On mousemove: compute dx = mouseX - startX, dy = mouseY - startY. Shift the view center by (dx, dy) * some factor (like 0.5). Then recompute bounds around the new center with the same scale.

This is clean:
- Current center: `(view.xMid, view.yMid)` where xMid = (xMin+xMax)/2, yMid = (yMin+yMax)/2.
- On drag: newCenter = (startX + dx * PAN_FACTOR, startY + dy * PAN_FACTOR)? No wait.

Let me think again. The user drags the mouse. The image should move in the opposite direction. If I move the mouse right, the image should pan left. So:
- newViewCenter = currentViewCenter + (mouseDelta * PAN_SCALE)
- Then recompute bounds around new center with same width/height.

PAN_SCALE: how many pixels of view does one pixel of mouse movement shift? If view width is W pixels, and canvas width is also W, then shifting by 1 pixel of mouse should shift the view by 1 pixel. So PAN_SCALE = 1. That means dragging 100 pixels shifts the view by 100 pixels. That's reasonable.

So:
- On mousedown: record startX, startY, and current center (cx, cy).
- On mousemove while pressed: cx += (mouseX - startX); cy += (mouseY - startY); then recompute bounds around (cx, cy) with same dimensions.
- On mouseup: release.

This is straightforward.

Wheel zoom:
- On wheel: prevent default. Compute the point under cursor:
  ```
  const idxX = (mouseX / width) * (view.xMax - view.xMin);
  const idxY = ((height - mouseY) / height) * (view.yMax - view.yMin);
  const cx = view.xMin + idxX;
  const cy = view.yMin + (view.yMax - view.yMin) - idxY; // or view.yMax - ...
  ```
  Actually, canvas y: 0 at top, height at bottom. Complex plane: y increases upward. So:
  ```
  const px = mouseX / width;
  const py = mouseY / height;
  const cx = view.xMin + px * (view.xMax - viewMin);
  const cy = view.yMax - py * (view.yMax - view.yMin);
  ```
- New width = (view.xMax - view.xMin) / zoomFactor (zoom in = smaller width).
- New center remains (cx, cy).
- New bounds: xMin = cx - newWidth/2, xMax = cx + newWidth/2, yMin = cy - newHeight/2, yMax = cy + newHeight/2.

Zoom factor: 1.15 or 1.2.

Now, rendering:
- Create ImageData: `const data = new Uint8ClampedArray(width * height * 4)`
- For each pixel (i, j):
  - x = view.xMin + (i / width) * (view.xMax - view.xMin)
  - y = view.yMax - (j / height) * (view.yMax - view.yMin)
  - Compute mandelbrot iteration count
  - If inside: color = inside color
  - Else: color = HSL(hue, saturation, lightness)
- PutImageData.

Performance: For full screen (1920x1080), that's about 2 million pixels. Computing Mandelbrot for each with up to, say, 256 iterations. That's fine in JS.

Let me set maxIter: initially maybe 100, but increase on zoom? The requirement says "use sufficient iterations to reveal new detail as the user zooms". So when zoomed in, we need more iterations. I can dynamically adjust maxIter based on zoom level. For example, base maxIter = 100, and when zoomed in by a factor of k, maxIter = 100 * k. Or simply set a high enough maxIter like 500 or 1000. But higher iterations = slower. Let me use dynamic: maxIter = Math.min(500, Math.floor(200 * initialScale / currentScale)). Hmm.

Simpler: set maxIter = 200 for the initial view. When zoomed in (view width < 0.5), increase maxIter proportionally. For example, if current view width is 0.1 (zoomed in 20x), maxIter = 400. This ensures detail.

Let me implement:
```javascript
const baseIterations = 150;
let currentIterations = baseIterations;
// In render:
if (view.width < 0.5) currentIterations = Math.min(500, baseIterations * (0.5 / view.width));
```

Actually, let me just set a reasonable fixed number like 300 and it should be fine for a demo. But the requirement says "use sufficient iterations to reveal new detail as the user zooms". So I'll make it adaptive.

Now, let me write the code.

Also, I need to handle the "inside" color distinctly. Let me use:
- Inside: `hsl(240, 100%, 15%)` — dark blue
- Outside: `hsl(iter/maxIter * 360, 65%, 55%)`

For the gradient, I could also add a background black.

Let me write the complete index.html now.

Plan for the file:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mandelbrot Explorer</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; }
  canvas { display: block; position: fixed; top: 0; left: 0; }
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
(function() {
  'use strict';
  // ... all the code
})();
</script>
</body>
</html>
```

Let me write the JavaScript carefully.

```javascript
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let w, h;
let view = { xMin: -2.5, xMax: 1, yMin: -1, yMax: 1 };
let zoom = 1;
let pan = false;
let dragging = false;
let dragStartX = 0, dragStartY = 0;
let dragStartCenterX = 0, dragStartCenterY = 0;

const initialBounds = { xMin: -2.5, xMax: 1, yMin: -1, yMax: 1 };

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  render();
}

function getBounds() {
  return { xMin: view.xMin, xMax: view.xMax, yMin: view.yMin, yMax: view.yMax };
}

function render() {
  const data = new Uint8ClampedArray(w * h * 4);
  const xMin = view.xMin, xMax = view.xMax, yMin = view.yMin, yMax = view.yMax;
  const w2 = xMax - xMin, h2 = yMax - yMin;
  const maxIter = computeIterations();
  
  for (let py = 0; py < h; py++) {
    for (let px = 0; px < w; px++) {
      const x = xMin + (px / w) * w2;
      const y = yMax - (py / h) * h2;
      const iter = mandelbrotIter(x, y, maxIter);
      const idx = (py * w + px) * 4;
      if (iter === maxIter) {
        data[idx] = 0; data[idx+1] = 0; data[idx+2] = 0; data[idx+3] = 255; // inside: black
      } else {
        const hue = (iter / maxIter) * 360;
        data[idx] = Math.round(255 * Math.sin(hue * Math.PI / 180));
        data[idx+1] = Math.round(255 * Math.cos(hue * Math.PI / 180));
        data[idx+2] = Math.round(255 * 0.5);
        data[idx+3] = 255;
      }
    }
  }
  ctx.putImageData(new ImageData(data, w, h), 0, 0);
}

function mandelbrotIter(re, im, maxIter) {
  let zRe = 0, zIm = 0;
  let n = 0;
  while (n < maxIter) {
    const r2 = zRe*zRe + zIm*zIm;
    if (r2 >= 4) break;
    const oldRe = zRe;
    zRe = zRe*zRe - zIm*zIm + re;
    zIm = 2*oldRe*zIm + im;
    n++;
  }
  if (n === maxIter) return maxIter;
  const log_z = Math.log(r2) / 2;
  const nu = Math.log(log_z) / Math.log(2);
  return n + 1 - nu;
}

function computeIterations() {
  // Adaptive iterations based on zoom level
  const viewW = view.xMax - view.xMin;
  const base = 150;
  if (viewW < 0.01) return base + Math.floor(200 / viewW);
  if (viewW < 0.05) return base + Math.floor(100 / viewW);
  if (viewW < 0.2) return base + Math.floor(50 / viewW);
  return base;
}

// Event handlers
canvas.addEventListener('mousedown', (e) => {
  dragging = true;
  dragStartX = e.clientX;
  dragStartY = e.clientY;
  dragStartCenterX = (view.xMin + view.xMax) / 2;
  dragStartCenterY = (view.yMin + view.yMax) / 2;
});

window.addEventListener('mousemove', (e) => {
  if (!dragging) return;
  const dx = e.clientX - dragStartX;
  const dy = e.clientY - dragStartY;
  const centerX = dragStartCenterX + dx;
  const centerY = dragStartCenterY + dy;
  view.xMin = centerX - (view.xMax - view.xMin) / 2;
  view.xMax = centerX + (view.xMax - viewMin) / 2; // bug: should be view.xMax
  view.yMin = centerY - (view.yMax - view.yMin) / 2;
  view.yMax = centerY + (view.yMax - view.yMin) / 2;
  render();
});

canvas.addEventListener('mouseup', () => { dragging = false; });

canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  const mx = e.clientX - rect.left;
  const my = e.clientY - rect.top;
  const xMin = view.xMin, xMax = view.xMax, yMin = view.yMin, yMax = view.yMax;
  const cx = xMin + (mx / w) * (xMax - xMin);
  const cy = yMax - (my / h) * (yMax - yMin);
  const zoomFactor = 1.15;
  const newW = (xMax - xMin) / zoomFactor;
  view.xMin = cx - newW / 2;
  view.xMax = cx + newW / 2;
  view.yMin = cy - (newW / 2) * (yMax - yMin) / (xMax - xMin);
  view.yMax = cy + (newW / 2) * (yMax - yMin) / (xMax - xMin);
  render();
});

document.addEventListener('resize', resize);
window.addEventListener('load', resize);

render();
```

Wait, there are bugs in the mousemove handler. Let me fix it. Also, I need to be careful about the zoom preserving aspect ratio. The above does preserve aspect ratio.

Also, the initial view: xMin=-2.5, xMax=1, yMin=-1, yMax=1. This shows the main cardioid (centered at -0.5) and the main bulb.

Let me also add a reset button or key binding. The requirement says "Provide Reset view to restore the initial bounds." I can add a key press (e.g., 'R') or a button. A button is easier and visible. Let me add a small overlay button.

Actually, let me add a reset button in the UI. Or use the 'R' key. Let me do both: a button and a key.

Let me restructure the code to be clean and well-commented.

Also, I need to make sure the canvas fills the screen properly. Using `position: fixed` on the canvas with top:0, left:0 should work.

Let me also add a subtle border or label? Not required, but nice.

Now, let me write the complete file.

One concern: the smooth escape-time coloring. My formula returns a float. For inside (maxIter reached), I return maxIter. For outside, the smooth value is between maxIter and something. Actually, the returned value is `n + 1 - nu`, which for escaping points is less than maxIter. For inside, it's maxIter. So I can use the returned value directly for color: if iter === maxIter, inside color; else map iter/maxIter to hue.

But wait: for points that escape very quickly, iter might be small. The hue will be small (close to 0 = red). That's fine.

Let me refine the color:
- Inside: `hsl(240, 100%, 15%)` — dark blue
- Outside: `hsl(iter/maxIter * 360, 70%, 55%)`

This should produce a nice gradient from black to colorful.

Now, let me also consider the "distinct color for points treated as inside the set". Dark blue is distinct from the outside gradient. Good.

Let me write the final code.

Actually, I realize I should double-check the smooth iteration count formula. The standard one:

```javascript
function smoothIteration(cRe, cIm, maxIter) {
    let zRe = 0, zIm = 0;
    let n = 0;
    while (n < maxIter) {
        // Check for escape
        if (zRe * zRe + zIm * zIm >= 4) break;
        // Iterate
        let oldRe = zRe;
        zRe = zRe * zRe - zIm * zIm + cRe;
        zIm = 2 * oldRe * zIm + cIm;
        n++;
    }
    if (n === maxIter) return maxIter; // inside
    // Smooth escape
    let log_zn = Math.log(zRe * zRe + zIm * zIm) / 2;
    let nu = Math.log(log_zn) / Math.log(2);
    return n + 1 - nu;
}
```

Yes, this is correct.

Now, let me write the complete index.html.

I'll also add a reset button styled nicely.

Let me draft the full HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mandelbrot Set Explorer</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { overflow: hidden; background: #000; font-family: monospace; }
  canvas { display: block; position: fixed; top: 0; left: 0; }
  #controls {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10;
    color: #fff;
    pointer-events: none;
  }
  #resetBtn {
    pointer-events: auto;
    padding: 6px 12px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
  }
  #resetBtn:hover { background: rgba(255,255,255,0.2); }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="controls">
  <button id="resetBtn">Reset View</button>
</div>
<script>
(function() {
  'use strict';

  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  const resetBtn = document.getElementById('resetBtn');

  let w, h;
  let view = { xMin: -2.5, xMax: 1, yMin: -1, yMax: 1 };
  const initialView = { ...view };
  let zoomFactor = 1;

  function resize() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
    render();
  }

  function mandelbrotIter(re, im, maxIter) {
    let zRe = 0, zIm = 0;
    let n = 0;
    while (n < maxIter) {
      const r2 = zRe * zRe + zIm * zIm;
      if (r2 >= 4) break;
      const oldRe = zRe;
      zRe = zRe * zRe - zIm * zIm + re;
      zIm = 2 * oldRe * zIm + im;
      n++;
    }
    if (n === maxIter) return maxIter;
    const log_z = Math.log(r2) / 2;
    const nu = Math.log(log_z) / Math.log(2);
    return n + 1 - nu;
  }

  function computeIterations() {
    const w = view.xMax - view.xMin;
    const base = 150;
    if (w < 0.01) return base + Math.floor(300 / w);
    if (w < 0.05) return base + Math.floor(150 / w);
    if (w < 0.2) return base + Math.floor(75 / w);
    return base;
  }

  function render() {
    const data = new Uint8ClampedArray(w * h * 4);
    const xMin = view.xMin, xMax = view.xMax, yMin = view.yMin, yMax = view.yMax;
    const w2 = xMax - xMin, h2 = yMax - yMin;
    const maxIter = computeIterations();

    for (let py = 0; py < h; py++) {
      for (let px = 0; px < w; px++) {
        const x = xMin + (px / w) * w2;
        const y = yMax - (py / h) * h2;
        const iter = mandelbrotIter(x, y, maxIter);
        const idx = (py * w + px) * 4;
        if (iter === maxIter) {
          data[idx] = 0; data[idx+1] = 0; data[idx+2] = 0; data[idx+3] = 255;
        } else {
          const hue = (iter / maxIter) * 360;
          data[idx] = Math.round(255 * Math.sin(hue * Math.PI / 180));
          data[idx+1] = Math.round(255 * Math.cos(hue * Math.PI / 180));
          data[idx+2] = Math.round(255 * 0.5);
          data[idx+3] = 255;
        }
      }
    }
    ctx.putImageData(new ImageData(data, w, h), 0, 0);
  }

  canvas.addEventListener('mousedown', (e) => {
    // Start drag
    const startX = e.clientX;
    const startY = e.clientY;
    const startCenterX = (view.xMin + view.xMax) / 2;
    const startCenterY = (view.yMin + view.yMax) / 2;
    dragging = true;
    dragStartX = startX;
    dragStartY = startY;
    dragStartCenterX = startCenterX;
    dragStartCenterY = startCenterY;
  });

  let dragging = false;
  let dragStartX, dragStartY, dragStartCenterX, dragStartCenterY;

  window.addEventListener('mousemove', (e) => {
    if (!dragging) return;
    const dx = e.clientX - dragStartX;
    const dy = e.clientY - dragStartY;
    const centerX = dragStartCenterX + dx;
    const centerY = dragStartCenterY + dy;
    const w2 = view.xMax - view.xMin;
    const h2 = view.yMax - view.yMin;
    view.xMin = centerX - w2 / 2;
    view.xMax = centerX + w2 / 2;
    view.yMin = centerY - h2 / 2;
    view.yMax = centerY + h2 / 2;
    render();
  });

  window.addEventListener('mouseup', () => { dragging = false; });

  canvas.addEventListener('wheel', (e) => {
    e.preventDefault();
    const rect = canvas.getBoundingClientRect();
    const mx = e.clientX - rect.left;
    const my = e.clientY - rect.top;
    const xMin = view.xMin, xMax = view.xMax, yMin = view.yMin, yMax = view.yMax;
    const cx = xMin + (mx / w) * (xMax - xMin);
    const cy = yMax - (my / h) * (yMax - yMin);
    const factor = 1.15;
    const newW = (xMax - xMin) / factor;
    view.xMin = cx - newW / 2;
    view.xMax = cx + newW / 2;
    view.yMin = cy - (newW / 2) * (yMax - yMin) / (xMax - xMin);
    view.yMax = cy + (newW / 2) * (yMax - yMin) / (xMax - xMin);
    render();
  });

  resetBtn.addEventListener('click', () => {
    view = { ...initialView };
    render();
  });

  window.addEventListener('keydown', (e) => {
    if (e.key === 'r' || e.key === 'R') {
      view = { ...initialView };
      render();
    }
  });

  resize();
  render();
})();
```

Wait, I declared `let w, h;` before resize, but in computeIterations I reference `w` which is the canvas width. That's fine.

But there's a scoping issue: `computeIterations` uses `w` and `h` from the outer scope. That's fine.

Also, I need to declare `dragging` before use. I did: `let dragging = false;` after the event listeners? No, I declared it after the mousedown handler but before mousemove. Let me order it properly.

Let me rewrite the whole thing cleanly.

Also, I should add a small instruction text on the page? Not required, but a brief label would help. Let me add a title element.

Actually, let me keep it simple. The canvas fills the screen, and the controls are in the corner.

One more thing: the smooth iteration count for points inside the set returns maxIter. But for the color, I'm checking `iter === maxIter`. Since the smooth value is a float, it might not exactly equal maxIter due to floating point. But since I return maxIter explicitly when n === maxIter, it should be exact. Good.

However, there's a subtlety: for points that don't escape, n reaches maxIter and we return maxIter. For points that do escape, we return the smooth value which is less than maxIter. So the comparison `iter === maxIter` correctly identifies inside points.

Now, let me also think about the color for inside: I used black (0,0,0). The requirement says "distinct color for points treated as inside the set". Black is distinct from the gradient. But maybe a more distinctive color like dark blue would look better. Let me use a dark blue: hsl(240, 100%, 15%). That's more visually interesting.

Let me update:
- Inside: `data[idx] = 0; data[idx+1] = 0; data[idx+2] = 85;` (dark blue-ish) or use HSL. Let me use `hsl(240, 100%, 15%)` — but ImageData expects RGB values. I can compute:
  ```javascript
  data[idx] = 0;
  data[idx+1] = Math.round(255 * Math.sin(240 * Math.PI / 180)); // ~ -128
  data[idx+2] = Math.round(255 * Math.cos(240 * Math.PI / 180)); // ~ -128
  ```
  Actually, sin(240°) = -√3/2 ≈ -0.866, cos(240°) = -0.5. So data[idx] ≈ -220 (clamped to 0), data[idx+1] ≈