The user wants me to create a single-page web app that visualizes the Lorenz attractor using Three.js. Let me plan this out:

1. **Lorenz Attractor**: A system of three differential equations:
   - dx/dt = σ(y - x)
   - dy/dt = x(ρ - z) - y
   - dz/dt = xy - βz
   
   Classic parameters: σ = 10, ρ = 28, β = 8/3

2. **Visual requirements**:
   - Glowing 3D butterfly trajectory
   - Draws over time (animated)
   - Orbit-drag camera controls (OrbitControls)

3. **Technical requirements**:
   - Single self-contained `index.html`
   - CSS in `<style>` tag, JS in `<script>` tag
   - Load `three.min.js` with `<script src="three.min.js"></script>` (already in current dir)
   - NO external resources, CDNs, or network requests
   - OrbitControls - but it's not in three.min.js... I need to handle this. Wait, the requirement says "three.min.js" is the only library file. I can't load OrbitControls from a CDN.

Hmm, this is a challenge. The instructions say "Use NO external resources, CDNs or network requests". So I need to either:
- Implement orbit controls myself (drag-to-rotate camera)
- Or use the three.min.js's built-in features

Let me check if three.min.js includes OrbitControls. It typically doesn't in the basic build. I'll need to implement orbit-drag camera controls myself. That's actually fine and would be a good approach - I'll write my own simple OrbitControls.

Let me design the visualization:

**Approach for "drawing over time"**:
- Use a `BufferGeometry` with `Line` or `LineSegments`
- Pre-allocate a large buffer (say 50,000 points)
- On each frame, step the Lorenz simulation forward by N substeps and add points to the line
- Use a `drawRange` on the geometry to control how many points are drawn
- Color can fade based on age (using vertex colors) for that glowing trail effect

**Glow effect**:
- Use `LineBasicMaterial` with vertex colors
- Add multiple lines with decreasing opacity (additive blending) for bloom-like effect without post-processing
- Or use additive blending
- Or render multiple offset/transparent passes

Actually, for a really nice glow, I could:
1. Draw the main line with bright color
2. Draw the same line slightly thicker (LineMaterial) with low opacity
3. Add particle sprites at the head for extra glow
4. Use vertex colors that shift through a gradient (blue → cyan → white → orange → red) for that classic attractor look

Since we don't have post-processing, I'll fake bloom by:
- Drawing multiple semi-transparent lines stacked
- Or using sprites at the trail head
- Or using `AdditiveBlending`

Let me think about implementation details:

```javascript
const sigma = 10, rho = 28, beta = 8/3;
const dt = 0.005;
const maxPoints = 60000;

let x = 0.1, y = 0, z = 0;
let pointCount = 0;

const positions = new Float32Array(maxPoints * 3);
const colors = new Float32Array(maxPoints * 3);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.setDrawRange(0, 0);

const material = new THREE.LineBasicMaterial({
    vertexColors: true,
    transparent: true,
    blending: THREE.AdditiveBlending,
    depthWrite: false
});

const line = new THREE.Line(geometry, material);
scene.add(line);
```

For colors, I want a gradient that looks "glowing". The classic Lorenz attractor visualization uses colors that vary along the trajectory. I'll use a gradient based on time/age: maybe deep blue → cyan → magenta → orange → white.

Actually a common look is:
- Start (new points): bright white/cyan
- Middle: magenta/orange
- End: deep red/purple

Or use a parameter like (z+something) to color based on z-coordinate, which gives a beautiful 3D rainbow effect.

Let me think about orbit controls. I'll implement them myself:

```javascript
let isDragging = false;
let prevX = 0, prevY = 0;
let theta = 0; // horizontal angle
let phi = Math.PI / 2; // vertical angle
let radius = 100;

canvas.addEventListener('mousedown', (e) => {
    isDragging = true;
    prevX = e.clientX;
    prevY = e.clientY;
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const dx = e.clientX - prevX;
    const dy = e.clientY - prevY;
    theta -= dx * 0.005;
    phi -= dy * 0.005;
    phi = Math.max(0.1, Math.min(Math.PI - 0.1, phi));
    prevX = e.clientX;
    prevY = e.clientY;
});

canvas.addEventListener('mouseup', () => isDragging = false);
canvas.addEventListener('mouseleave', () => isDragging = false);

canvas.addEventListener('wheel', (e) => {
    radius *= e.deltaY > 0 ? 1.1 : 0.9;
    radius = Math.max(20, Math.min(500, radius));
});

function updateCamera() {
    camera.position.x = radius * Math.sin(phi) * Math.cos(theta);
    camera.position.y = radius * Math.cos(phi);
    camera.position.z = radius * Math.sin(phi) * Math.sin(theta);
    camera.lookAt(0, 0, 0);
}
```

For "drawing over time":
- Step the Lorenz equation by N steps per frame
- Update buffer attributes
- Increment drawRange

Let me also add:
- A "reset" button to clear and restart
- Auto-rotate option (toggle)
- Speed control (number of integration steps per frame)

Visual design:
- Black background with subtle gradient (radial)
- Maybe a starfield background for depth
- Glowing trail head (small sphere sprite)
- UI overlay with controls

Let me write the full HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lorenz Attractor — Glowing Butterfly</title>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
        background: #000; 
        color: #fff; 
        font-family: 'Courier New', monospace;
        overflow: hidden;
        height: 100vh;
    }
    #canvas { display: block; width: 100vw; height: 100vh; }
    .panel {
        position: fixed;
        top: 20px;
        left: 20px;
        padding: 16px 20px;
        background: rgba(10, 10, 20, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        font-size: 12px;
        z-index: 10;
        max-width: 280px;
    }
    .panel h1 {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 2px;
        margin-bottom: 12px;
        color: #6df;
        text-transform: uppercase;
    }
    .panel p { line-height: 1.5; margin-bottom: 8px; opacity: 0.85; }
    .row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
    .row label { flex: 0 0 90px; font-size: 11px; opacity: 0.8; }
    .row input[type=range] { flex: 1; }
    .row .val { flex: 0 0 40px; text-align: right; font-size: 11px; color: #6df; }
    button {
        background: rgba(109, 221, 255, 0.1);
        border: 1px solid rgba(109, 221, 255, 0.4);
        color: #6df;
        padding: 6px 12px;
        font-family: inherit;
        font-size: 11px;
        cursor: pointer;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.2s;
    }
    button:hover { background: rgba(109, 221, 255, 0.2); }
    button:active { transform: scale(0.96); }
    .btns { display: flex; gap: 8px; margin-top: 12px; }
    .toggle {
        display: inline-flex; align-items: center; cursor: pointer; user-select: none;
    }
    .toggle input { margin-right: 6px; }
    .info {
        position: fixed;
        bottom: 20px;
        left: 20px;
        font-size: 11px;
        opacity: 0.5;
        z-index: 10;
    }
    .stat {
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 11px;
        z-index: 10;
        text-align: right;
        opacity: 0.7;
    }
    .stat span { color: #6df; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="panel">
    <h1>Lorenz Attractor</h1>
    <p>σ(y−x), x(ρ−z)−y, xy−βz</p>
    <div class="row">
        <label>σ sigma</label>
        <input type="range" id="sigma" min="1" max="30" step="0.1" value="10">
        <span class="val" id="sigmaVal">10.0</span>
    </div>
    <div class="row">
        <label>ρ rho</label>
        <input type="range" id="rho" min="1" max="60" step="0.1" value="28">
        <span class="val" id="rhoVal">28.0</span>
    </div>
    <div class="row">
        <label>β beta</label>
        <input type="range" id="beta" min="0.5" max="10" step="0.01" value="2.667">
        <span class="val" id="betaVal">2.67</span>
    </div>
    <div class="row">
        <label>steps/frame</label>
        <input type="range" id="steps" min="1" max="50" step="1" value="6">
        <span class="val" id="stepsVal">6</span>
    </div>
    <div class="row">
        <label>dt</label>
        <input type="range" id="dt" min="0.001" max="0.02" step="0.001" value="0.005">
        <span class="val" id="dtVal">0.005</span>
    </div>
    <div class="btns">
        <button id="reset">Reset</button>
        <button id="autoon">Auto</button>
        <label class="toggle"><input type="checkbox" id="glow" checked> Glow</label>
    </div>
</div>
<div class="info">drag to orbit · scroll to zoom</div>
<div class="stat">points: <span id="count">0</span></div>

<script src="three.min.js"></script>
<script>
// ... main code
</script>
</body>
</html>
```

Now the main script. Let me think about how to make the glow look really good without post-processing:

1. **Multi-pass line rendering**: Draw the line 2-3 times with different scales or alpha. With additive blending, this naturally creates a bloom-like effect.

2. **Vertex colors**: Use a color gradient based on:
   - Time/age (newer = brighter)
   - z-coordinate (classic rainbow)

3. **Trail head**: A small glowing point at the current position to indicate where the line is being drawn.

For multiple lines for glow, I'll use the same geometry but draw with two materials - or actually easier: render the same `Line` twice, once as a regular line, once with thicker scale. Hmm, LineBasicMaterial linewidth doesn't work on most platforms. So let me use multiple offset lines, or use sprites.

Alternative approach: Render the line multiple times with `THREE.AdditiveBlending` and slightly varying opacities/colors. Actually, since `LineBasicMaterial.linewidth` is typically ignored on most browsers, I'll instead use a custom approach:

**Sprite-based approach**: At each new point, create a sprite (point) with a radial gradient texture. With many sprites and additive blending, this gives a beautiful glowing trail.

Let me use **Points** with a custom point shader/canvas texture:

```javascript
// Create a radial gradient texture for glow points
function createGlowTexture() {
    const c = document.createElement('canvas');
    c.width = c.height = 64;
    const ctx = c.getContext('2d');
    const g = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
    g.addColorStop(0, 'rgba(255,255,255,1)');
    g.addColorStop(0.2, 'rgba(255,200,150,0.8)');
    g.addColorStop(0.5, 'rgba(200,100,255,0.3)');
    g.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, 64, 64);
    return new THREE.CanvasTexture(c);
}
```

Then `Points` material with vertex colors and additive blending. This creates that glowing particle trail look.

But to also get a continuous line look, I'll combine:
- A `Line` for continuous trail (1px)
- `Points` for the glow blob effect

Actually let me simplify: use just `Points` with a soft glow texture. It'll look beautiful and glowy.

But actually for "trajectory" feel, the line is important. Let me do BOTH:
- A thin line with vertex colors (continuous trajectory)
- Points on top with glow texture (the "glow" effect)

This combination will be stunning.

Let me write the actual code:

```javascript
const canvas = document.getElementById('canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000008);

const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000008, 0.0008);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(80, 60, 100);
camera.lookAt(0, 0, 25);

// === Lorenz parameters ===
let params = {
    sigma: 10,
    rho: 28,
    beta: 8/3,
    stepsPerFrame: 6,
    dt: 0.005
};

// === State ===
const MAX_POINTS = 80000;
let pointCount = 0;
let x = 0.1, y = 0, z = 0;

// === Line geometry (continuous trajectory) ===
const linePos = new Float32Array(MAX_POINTS * 3);
const lineCol = new Float32Array(MAX_POINTS * 3);
const lineGeo = new THREE.BufferGeometry();
lineGeo.setAttribute('position', new THREE.BufferAttribute(linePos, 3));
lineGeo.setAttribute('color', new THREE.BufferAttribute(lineCol, 3));
lineGeo.setDrawRange(0, 0);
const lineMat = new THREE.LineBasicMaterial({
    vertexColors: true,
    transparent: true,
    opacity: 0.9,
    blending: THREE.AdditiveBlending,
    depthWrite: false
});
const lineObj = new THREE.Line(lineGeo, lineMat);
scene.add(lineObj);

// === Glow points (soft glow texture) ===
const glowPos = new Float32Array(MAX_POINTS * 3);
const glowCol = new Float32Array(MAX_POINTS * 3);
const glowGeo = new THREE.BufferGeometry();
glowGeo.setAttribute('position', new THREE.BufferAttribute(glowPos, 3));
glowGeo.setAttribute('color', new THREE.BufferAttribute(glowCol, 3));
glowGeo.setDrawRange(0, 0);

const glowTex = createGlowTexture();
const glowMat = new THREE.PointsMaterial({
    size: 1.5,
    map: glowTex,
    vertexColors: true,
    transparent: true,
    blending: THREE.AdditiveBlending,
    depthWrite: false,
    sizeAttenuation: true
});
const glowObj = new THREE.Points(glowGeo, glowMat);
scene.add(glowObj);

// === Trail head ===
const headMat = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    transparent: true,
    opacity: 1,
    blending: THREE.AdditiveBlending
});
const headGeo = new THREE.SphereGeometry(0.6, 12, 12);
const head = new THREE.Mesh(headGeo, headMat);
scene.add(head);

// === Color gradient function ===
// Map z value (-30 to 60) to color
function zColor(z, target) {
    // Normalize z
    const t = Math.max(0, Math.min(1, (z + 30) / 90));
    // Gradient: deep blue → cyan → magenta → orange → white
    if (t < 0.25) {
        // Blue to cyan
        const u = t / 0.25;
        target[0] = 0.1 + u * 0.0;
        target[1] = 0.2 + u * 0.8;
        target[2] = 0.9 - u * 0.4;
    } else if (t < 0.5) {
        // Cyan to magenta
        const u = (t - 0.25) / 0.25;
        target[0] = 0.1 + u * 0.9;
        target[1] = 1.0 - u * 0.4;
        target[2] = 0.5 + u * 0.5;
    } else if (t < 0.75) {
        // Magenta to orange
        const u = (t - 0.5) / 0.25;
        target[0] = 1.0;
        target[1] = 0.6 - u * 0.4;
        target[2] = 1.0 - u * 0.8;
    } else {
        // Orange to white/yellow
        const u = (t - 0.75) / 0.25;
        target[0] = 1.0;
        target[1] = 0.2 + u * 0.8;
        target[2] = 0.2 + u * 0.6;
    }
}

// === Integration step ===
function step() {
    const dx = params.sigma * (y - x);
    const dy = x * (params.rho - z) - y;
    const dz = x * y - params.beta * z;
    x += dx * params.dt;
    y += dy * params.dt;
    z += dz * params.dt;
}

function addPoint() {
    if (pointCount >= MAX_POINTS) {
        // Shift everything back to make room (or just stop)
        return;
    }
    const i3 = pointCount * 3;
    linePos[i3] = x;
    linePos[i3+1] = y;
    linePos[i3+2] = z;
    glowPos[i3] = x;
    glowPos[i3+1] = y;
    glowPos[i3+2] = z;
    const col = [0,0,0];
    zColor(z, col);
    // Boost brightness
    const boost = 1.5;
    lineCol[i3] = col[0] * boost;
    lineCol[i3+1] = col[1] * boost;
    lineCol[i3+2] = col[2] * boost;
    glowCol[i3] = col[0];
    glowCol[i3+1] = col[1];
    glowCol[i3+2] = col[2];
    pointCount++;
}

// === Orbit camera ===
let isDragging = false;
let prevX = 0, prevY = 0;
let theta = Math.PI * 0.25;
let phi = Math.PI * 0.4;
let radius = 140;
let autoRotate = false;

function updateCamera() {
    camera.position.x = radius * Math.sin(phi) * Math.cos(theta);
    camera.position.y = radius * Math.cos(phi);
    camera.position.z = radius * Math.sin(phi) * Math.sin(theta);
    camera.lookAt(0, 0, 25);
}

canvas.addEventListener('pointerdown', (e) => {
    isDragging = true;
    prevX = e.clientX;
    prevY = e.clientY;
    canvas.setPointerCapture(e.pointerId);
});
canvas.addEventListener('pointermove', (e) => {
    if (!isDragging) return;
    const dx = e.clientX - prevX;
    const dy = e.clientY - prevY;
    theta -= dx * 0.006;
    phi -= dy * 0.006;
    phi = Math.max(0.05, Math.min(Math.PI - 0.05, phi));
    prevX = e.clientX;
    prevY = e.clientY;
});
canvas.addEventListener('pointerup', (e) => {
    isDragging = false;
    try { canvas.releasePointerCapture(e.pointerId); } catch {}
});
canvas.addEventListener('pointerleave', () => isDragging = false);
canvas.addEventListener('wheel', (e) => {
    e.preventDefault();
    radius *= e.deltaY > 0 ? 1.08 : 0.92;
    radius = Math.max(30, Math.min(500, radius));
}, { passive: false });

// === Resize ===
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// === Reset ===
function reset() {
    pointCount = 0;
    x = 0.1; y = 0; z = 0;
    lineGeo.setDrawRange(0, 0);
    glowGeo.setDrawRange(0, 0);
}

document.getElementById('reset').onclick = reset;
document.getElementById('autoon').onclick = () => {
    autoRotate = !autoRotate;
    document.getElementById('autoon').textContent = autoRotate ? 'Stop' : 'Auto';
};

// Sliders
['sigma', 'rho', 'beta', 'steps', 'dt'].forEach(id => {
    const el = document.getElementById(id);
    const valEl = document.getElementById(id + 'Val');
    el.addEventListener('input', () => {
        valEl.textContent = parseFloat(el.value).toFixed(id === 'beta' ? 3 : (id === 'dt' ? 3 : 1));
        if (id === 'sigma') params.sigma = parseFloat(el.value);
        if (id === 'rho') params.rho = parseFloat(el.value);
        if (id === 'beta') params.beta = parseFloat(el.value);
        if (id === 'steps') params.stepsPerFrame = parseInt(el.value);
        if (id === 'dt') params.dt = parseFloat(el.value);
    });
});

// Glow toggle
document.getElementById('glow').addEventListener('change', (e) => {
    glowObj.visible = e.target.checked;
});

// === Animate ===
function animate() {
    requestAnimationFrame(animate);
    
    // Step Lorenz
    for (let i = 0; i < params.stepsPerFrame; i++) {
        step();
        addPoint();
    }
    
    lineGeo.setDrawRange(0, pointCount);
    glowGeo.setDrawRange(0, pointCount);
    lineGeo.attributes.position.needsUpdate = true;
    lineGeo.attributes.color.needsUpdate = true;
    glowGeo.attributes.position.needsUpdate = true;
    glowGeo.attributes.color.needsUpdate = true;
    
    head.position.set(x, y, z);
    const pulse = 0.5 + 0.5 * Math.sin(Date.now() * 0.005);
    head.material.opacity = 0.7 + pulse * 0.3;
    
    if (autoRotate) {
        theta += 0.005;
    }
    updateCamera();
    
    document.getElementById('count').textContent = pointCount;
    
    renderer.render(scene, camera);
}

animate();
```

Wait, I'm updating position attribute every frame. That's wasteful for the full buffer. Better approach: only mark dirty up to current pointCount. Or even simpler, just always re-upload — it's not that slow.

Actually `needsUpdate = true` on `BufferAttribute` will re-upload the entire buffer to GPU. For 80k points that's 80k*3*4 = 960KB per frame which is fine.

Hmm but I should consider performance. Let me limit MAX_POINTS to maybe 30,000 for safety, and add a circular buffer or just stop adding when full.

Actually, let me just stop when full and have a "reset" button.

Let me also add a starfield for ambiance.

Let me finalize the code. Some thoughts:
- The color gradient should look pleasing. Let me think about a good palette.
- For a "butterfly" feel, I want bright magenta/pink for the wings, with cooler blue tones elsewhere
- Or a "cosmic" palette: deep blue → cyan → white → orange → red

I'll use a smooth interpolation through multiple key colors.

Let me also think about what "drawing over time" means exactly:
- Initial state: empty
- Each frame: add more points
- The line "grows" from start
- Once full, stays at max
- Reset starts over

This is what I have. Good.

Let me also consider adding:
- Stars/particles in background for depth
- Subtle axis indicators (very faint)
- A subtle floor grid (very faint)

Actually let me keep it minimal — focus on the attractor itself. I'll add a starfield for depth.

Let me write the final code now. I'll be thorough.

One concern: `LineBasicMaterial.linewidth` is ignored on most WebGL implementations. So my line will be 1px regardless. That's OK because the Points layer will add the glow. The line itself should still be visible.

Hmm actually for "butterfly trajectory" feel, maybe a thicker line would help. Let me check if I can use `MeshLine` or similar... no, I can't load external libs. So I'll rely on Points + Line combo.

Let me also think about color brightness. With additive blending and a glowing texture, colors will brighten naturally. I should NOT pre-boost too much or it will look washed out.

Let me write the final version. I'll also add:
- Subtle background gradient (use a fragment shader on a fullscreen quad? or just CSS)
- Maybe a starfield

For starfield:
```javascript
const starCount = 1000;
const starGeo = new THREE.BufferGeometry();
const starPos = new Float32Array(starCount * 3);
for (let i = 0; i < starCount; i++) {
    starPos[i*3] = (Math.random() - 0.5) * 1500;
    starPos[i*3+1] = (Math.random() - 0.5) * 1500;
    starPos[i*3+2] = (Math.random() - 0.5) * 1500;
}
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
const starMat = new THREE.PointsMaterial({
    color: 0xffffff,
    size: 1,
    sizeAttenuation: false
});
scene.add(new THREE.Points(starGeo, starMat));
```

This adds stars far away. Good.

Let me also think about camera target. The Lorenz attractor with default params spans roughly:
- x: -20 to 20
- y: -30 to 30
- z: 0 to 50

So I'll center the camera lookAt at (0, 0, 25) and scale to fit nicely.

Actually for the visualization, I should scale the points. Otherwise with x,y in -30 to 30 and z up to 50, the camera distance should be around 100-150.

Let me NOT scale (use raw values) and just position the camera correctly.

OK let me finalize. I think I have a solid plan. Let me also add:
- A "Pause" button
- Maybe show current (x, y, z) values
- A trail length slider

Actually let me keep the controls minimal so it doesn't get cluttered. The key UI:
- Title
- Parameter sliders: σ, ρ, β
- Speed: steps/frame, dt
- Reset button, Auto button
- Glow toggle

That's enough. Let me also make the panel collapsible for cleanliness... no, let me just make it look nice.

Let me code it up now.

Actually one more thing: I want the "drawing" to feel smooth. With max 80k points and dt=0.005, the simulation takes 400 time units before filling. At 60fps with 6 steps/frame, that's 360 steps/sec = 1.8 time units/sec, so ~220 seconds to fill. That might be too long. Let me increase default steps to 15 and maybe lower dt slightly.

Actually, for the user to see the trajectory fill up reasonably fast, let me use:
- dt = 0.005 (default)
- stepsPerFrame = 10 (default)
- That gives 50 substeps/sec at 60fps = 300 substeps/sec
- 80k points / 300 = 267 sec ≈ 4.5 minutes to fill

That's a lot. Let me use 30,000 max points and 20 steps/frame as default:
- 20 steps * 60fps = 1200 substeps/sec
- 30k / 1200 = 25 sec to fill. 

Or, the user can change parameters. Let me use:
- MAX_POINTS = 50,000
- Default stepsPerFrame = 15
- 15 * 60 = 900/sec
- 50000 / 900 ≈ 55 sec to fill. That's reasonable.

Let me also think about the visual "feel". When the line is short, the user sees just a curve being drawn. When it's full, the butterfly shape is visible. So the user should be able to wait ~1 minute for full beauty, or hit reset.

Alright, let me finalize and write.

One more design choice: how the points fade with age. Should the line/points fade over time so newer points are brighter? Or stay constant? Let me think...

Option A: Constant brightness (all points same brightness). Looks like a solid line.
Option B: Older points dimmer. Looks like a fading trail.

For a "butterfly" visualization, constant is better - we want to see the full shape.

But for "drawing over time" feel, fade might be cool. Hmm. Let me do a slight fade but mostly constant. Actually let me do constant brightness with bright color. The user can reset to start over.

Wait, but if I use vertex colors and the geometry doesn't change colors after creation, I can't fade over time without rewriting colors each frame. So let me just use static colors. The "drawing over time" comes from the fact that NEW points are added at the end. The line literally grows.

OK I'll do that. Static vertex colors based on z value. Line grows from origin.

Actually, I want to think about something. The trail starts at (0.1, 0, 0) which is on the z=0 plane. The first few points will all be near there, then the trajectory will spiral out. The "head" of the trail will be the moving point.

Let me make the head of the trail visibly distinct - a small glowing sphere. ✓

Alright, let me write the final code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lorenz Attractor</title>
<style>
    /* CSS here */
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="panel">
    <!-- UI here -->
</div>
<script src="three.min.js"></script>
<script>
    /* JS here */
</script>
</body>
</html>
```

Let me also add touch support for orbit controls (pointer events should handle this naturally).

One more thought: I want to make sure the line is visible. With additive blending on a black background, the line will glow. Good. But I need to make sure the brightness is right.

Let me also make sure the camera control feels smooth. Pointer events on the canvas:
- pointerdown: start drag, capture pointer
- pointermove: update angles
- pointerup: end drag
- pointercancel: end drag
- wheel: zoom

I think I have it. Let me write the full file now.

Actually, let me reconsider the color scheme. The classic "Lorenz butterfly" is often shown in a single color or a blue-to-red gradient based on z. Let me use a cool palette:

```
z = -30: deep purple/violet
z = 0: blue/cyan  
z = 25: cyan/green
z = 50: yellow/white
```

Or for a more cosmic look:
```
z = -30: deep blue (0.1, 0.1, 0.6)
z = 0: cyan (0.0, 0.8, 1.0)
z = 25: white/cyan (0.7, 1.0, 1.0)
z = 50: orange (1.0, 0.6, 0.2)
```

I'll interpolate smoothly through these keypoints.

For the glow texture, I want it to be soft white with maybe a hint of warmth. The user can vary glow color via vertex colors of the points.

Let me code now:

```javascript
function lorenzColor(t, target) {
    // t in [0, 1], 0 = low z, 1 = high z
    // Key colors
    const keys = [
        [0.15, 0.10, 0.50],  // deep blue
        [0.10, 0.60, 1.00],  // cyan-blue
        [0.80, 1.00, 0.95],  // near-white cyan
        [1.00, 0.70, 0.30],  // orange
        [1.00, 0.30, 0.10]   // red-orange
    ];
    const N = keys.length - 1;
    const scaled = t * N;
    const idx = Math.min(N - 1, Math.floor(scaled));
    const u = scaled - idx;
    for (let i = 0; i < 3; i++) {
        target[i] = keys[idx][i] * (1 - u) + keys[idx+1][i] * u;
    }
}
```

This gives a nice cosmic gradient.

OK let me write the full file. I'll think about layout, aesthetics, and add a few touches like a title and a tagline.

Final code coming up:

Wait, one more thing. I should test that the line actually shows. Three.js Line uses gl.LINE_STRIP. With AdditiveBlending, even 1px lines should glow nicely.

For glow, I'll set:
- LineBasicMaterial with vertexColors, AdditiveBlending, opacity 0.85
- Points with soft glow texture, AdditiveBlending, size ~2

These together should create a beautiful glowing trail.

Let me also add: when the line reaches MAX_POINTS, stop drawing (or wrap). I'll just stop and show "trail complete" message.

Actually, to make it more interesting, let me wrap the buffer around - keep last N points always. Hmm, that's complex with line strips. Let me just stop at MAX_POINTS.

Or: use two passes. First, draw the initial part as solid. Second, draw the recent part with brighter glow.

Simpler: just stop when full. User hits reset.

Final structure:
1. CSS for UI
2. Three.js setup (scene, camera, renderer)
3. Lorenz integration state
4. Geometry buffers (line + points)
5. Color function
6. Update functions (addPoint, step)
7. Orbit controls
8. UI bindings (sliders, buttons)
9. Animation loop
10. Resize handler

Let me write it all in one shot now.

Actually one more thing - I want to make sure the simulation continues to evolve when the user changes parameters. So if sigma changes mid-run, the trajectory should evolve with new parameters. Currently the integration uses `params.sigma` etc., so this works automatically.

I also want to handle the edge case where the trajectory goes way off-screen (chaotic, can go to large values). I'll clamp the display by setting `setDrawRange` and just let the points be far away (but they'll be visible at the camera zoom level). Or use a max distance and stop the line. Let me not worry about this - chaotic attractors stay bounded under the right parameters.

OK final code time. Let me write it.

For the glow texture:
```javascript
function createGlowTexture() {
    const size = 128;
    const c = document.createElement('canvas');
    c.width = c.height = size;
    const ctx = c.getContext('2d');
    const g = ctx.createRadialGradient(size/2, size/2, 0, size/2, size/2, size/2);
    g.addColorStop(0, 'rgba(255,255,255,1)');
    g.addColorStop(0.15, 'rgba(255,230,200,0.9)');
    g.addColorStop(0.4, 'rgba(255,180,140,0.3)');
    g.addColorStop(0.7, 'rgba(255,100,80,0.05)');
    g.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, size, size);
    const tex = new THREE.CanvasTexture(c);
    tex.needsUpdate = true;
    return tex;
}
```

Hmm but I'm using vertex colors, which will multiply with the texture color. So the texture should be white-ish and the vertex colors provide the hue. Let me use a pure white-to-transparent gradient:

```javascript
g.addColorStop(0, 'rgba(255,255,255,1)');
g.addColorStop(0.3, 'rgba(255,255,255,0.5)');
g.addColorStop(1, 'rgba(255,255,255,0)');
```

But that gives a flat white glow. I want some warmth. Hmm. OK let me use a slightly warm white and let vertex colors do the work:

```javascript
g.addColorStop(0, 'rgba(255,255,255,1)');
g.addColorStop(0.2, 'rgba(255,250,240,0.7)');
g.addColorStop(0.5, 'rgba(255,240,220,0.2)');
g.addColorStop(1, 'rgba(255,255,255,0)');
```

This gives a slightly warm soft glow. With AdditiveBlending and vertex colors, the final color will be vertex_color * glow_intensity, which gives a nice colored glow.

Alright, let me write the final file.

One more thought: I should make the panel not too big and use a small font. The UI should be elegant, not overwhelming.

Let me also add a subtle "Compass" or axis indicator in the corner? No, too much. Keep minimal.

Let me think about adding axes to the scene. A simple axes helper might help orient the user. Three.js has AxesHelper. But it might clutter. Let me skip it and just provide orbit controls.

Actually, since the trajectory is bounded around (0, 0, 25) in the Lorenz system, I'll center the camera there. The user can orbit around this center.

OK, writing the final file now.

Oh wait, I should also handle the case where the line crosses itself - that's the whole point of the attractor. The line will naturally pass through itself, and the additive blending will make those crossings extra bright. 

One issue: when many points accumulate at similar locations (e.g., where the trajectory loops), they will all add their color and might create hotspots. That's actually a feature for the visual - those "wings" of the butterfly will be extra bright. 

Final code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lorenz Attractor — Glowing Butterfly</title>
<style>
:root {
    --accent: #6df;
    --accent-glow: rgba(109, 221, 255, 0.4);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { 
    background: #000; 
    color: #e0e0e8; 
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}
#canvas { 
    display: block; 
    width: 100vw; 
    height: 100vh; 
    cursor: grab;
    touch-action: none;
}
#canvas:active { cursor: grabbing; }
.panel {
    position: fixed;
    top: 20px;
    left: 20px;
    padding: 18px 22px;
    background: rgba(8, 8, 16, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 11px;
    z-index: 10;
    max-width: 300px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    user-select: none;
}
.panel h1 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 4px;
    color: var(--accent);
    text-transform: uppercase;
}
.subtitle {
    font-size: 10px;
    opacity: 0.5;
    letter-spacing: 1px;
    margin-bottom: 14px;
    text-transform: uppercase;
}
.equations {
    font-size: 10px;
    opacity: 0.6;
    line-height: 1.6;
    margin-bottom: 14px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 2px solid var(--accent);
    border-radius: 3px;
    font-family: 'Georgia', serif;
    font-style: italic;
}
.row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin: 9px 0; 
}
.row label { 
    flex: 0 0 80px; 
    font-size: 10px; 
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.row input[type=range] { 
    flex: 1; 
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
}
.row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px var(--accent-glow);
}
.row input[type=range]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px var(--accent-glow);
}
.row .val { 
    flex: 0 0 38px; 
    text-align: right; 
    font-size: 10px; 
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 12px 0;
}
.btns { 
    display: flex; 
    gap: 8px; 
    margin-top: 4px;
    flex-wrap: wrap;
    align-items: center;
}
button {
    background: rgba(109, 221, 255, 0.08);
    border: 1px solid rgba(109, 221, 255, 0.3);
    color: var(--accent);
    padding: 6px 12px;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: all 0.2s;
}
button:hover { 
    background: rgba(109, 221, 255, 0.18); 
    box-shadow: 0 0 8px var(--accent-glow);
}
button:active { transform: scale(0.95); }
button.active { 
    background: rgba(109, 221, 255, 0.25);
    border-color: var(--accent);
}
.toggle {
    display: inline-flex; 
    align-items: center; 
    cursor: pointer; 
    user-select: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.8;
}
.toggle input { 
    margin-right: 6px; 
    accent-color: var(--accent);
}
.info {
    position: fixed;
    bottom: 18px;
    left: 20px;
    font-size: 10px;
    opacity: 0.4;
    z-index: 10;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.stat {
    position: fixed;
    bottom: 18px;
    right: 20px;
    font-size: 10px;
    z-index: 10;
    text-align: right;
    opacity: 0.5;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.stat .num { 
    color: var(--accent); 
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="panel">
    <h1>Lorenz Attractor</h1>
    <div class="subtitle">A Chaotic Butterfly</div>
    <div class="equations">
        dx/dt = σ(y − x)<br>
        dy/dt = x(ρ − z) − y<br>
        dz/dt = xy − βz
    </div>
    <div class="row">
        <label>σ sigma</label>
        <input type="range" id="sigma" min="1" max="30" step="0.1" value="10">
        <span class="val" id="sigmaVal">10.0</span>
    </div>
    <div class="row">
        <label>ρ rho</label>
        <input type="range" id="rho" min="1" max="60" step="0.1" value="28">
        <span class="val" id="rhoVal">28.0</span>
    </div>
    <div class="row">
        <label>β beta</label>
        <input type="range" id="beta" min="0.5" max="10" step="0.01" value="2.67">
        <span class="val" id="betaVal">2.67</span>
    </div>
    <div class="divider"></div>
    <div class="row">
        <label>steps</label>
        <input type="range" id="steps" min="1" max="40" step="1" value="12">
        <span class="val" id="stepsVal">12</span>
    </div>
    <div class="row">
        <label>dt</label>
        <input type="range" id="dt" min="0.001" max="0.02" step="0.001" value="0.005">
        <span class="val" id="dtVal">0.005</span>
    </div>
    <div class="divider"></div>
    <div class="btns">
        <button id="reset">Reset</button>
        <button id="autoon">Auto</button>
        <label class="toggle"><input type="checkbox" id="glow" checked> Glow</label>
        <label class="toggle"><input type="checkbox" id="head" checked> Head</label>
    </div>
</div>
<div class="info">drag to orbit · scroll to zoom</div>
<div class="stat">points · <span class="num" id="count">0</span></div>

<script src="three.min.js"></script>
<script>
(function() {
    'use strict';
    
    // ============ Three.js Setup ============
    const canvas = document.getElementById('canvas');
    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000, 1);
    
    const scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x000000, 0.0012);
    
    const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 3000);
    
    // ============ Stars Background ============
    const starCount = 1500;
    const starPos = new Float32Array(starCount * 3);
    const starCol = new Float32Array(starCount * 3);
    for (let i = 0; i < starCount; i++) {
        const r = 800 + Math.random() * 400;
        const phi = Math.random() * Math.PI * 2;
        const theta = Math.acos(2 * Math.random() - 1);
        starPos[i*3] = r * Math.sin(theta) * Math.cos(phi);
        starPos[i*3+1] = r * Math.sin(theta) * Math.sin(phi);
        starPos[i*3+2] = r * Math.cos(theta);
        const c = 0.4 + Math.random() * 0.6;
        starCol[i*3] = c;
        starCol[i*3+1] = c;
        starCol[i*3+2] = c * (0.9 + Math.random() * 0.2);
    }
    const starGeo = new THREE.BufferGeometry();
    starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
    starGeo.setAttribute('color', new THREE.BufferAttribute(starCol, 3));
    const starMat = new THREE.PointsMaterial({
        size: 1.5,
        vertexColors: true,
        transparent: true,
        opacity: 0.6,
        sizeAttenuation: false,
        depthWrite: false
    });
    scene.add(new THREE.Points(starGeo, starMat));
    
    // ============ Lorenz Parameters ============
    const params = {
        sigma: 10,
        rho: 28,
        beta: 8 / 3,
        stepsPerFrame: 12,
        dt: 0.005
    };
    let x = 0.1, y = 0, z = 0;
    
    // ============ Trail Buffers ============
    const MAX_POINTS = 60000;
    let pointCount = 0;
    
    const linePos = new Float32Array(MAX_POINTS * 3);
    const lineCol = new Float32Array(MAX_POINTS * 3);
    const lineGeo = new THREE.BufferGeometry();
    lineGeo.setAttribute('position', new THREE.BufferAttribute(linePos, 3));
    lineGeo.setAttribute('color', new THREE.BufferAttribute(lineCol, 3));
    lineGeo.setDrawRange(0, 0);
    const lineMat = new THREE.LineBasicMaterial({
        vertexColors: true,
        transparent: true,
        opacity: 0.95,
        blending: THREE.AdditiveBlending,
        depthWrite: false
    });
    scene.add(new THREE.Line(lineGeo, lineMat));
    
    // Glow Points (same data, soft glow texture)
    const glowPos = new Float32Array(MAX_POINTS * 3);
    const glowCol = new Float32Array(MAX_POINTS * 3);
    const glowGeo = new THREE.BufferGeometry();
    glowGeo.setAttribute('position', new THREE.BufferAttribute(glowPos, 3));
    glowGeo.setAttribute('color', new THREE.BufferAttribute(glowCol, 3));
    glowGeo.setDrawRange(0, 0);
    
    function makeGlowTexture() {
        const s = 128;
        const c = document.createElement('canvas');
        c.width = c.height = s;
        const ctx = c.getContext('2d');
        const g = ctx.createRadialGradient(s/2, s/2, 0, s/2, s/2, s/2);
        g.addColorStop(0, 'rgba(255,255,255,1)');
        g.addColorStop(0.15, 'rgba(255,255,255,0.85)');
        g.addColorStop(0.4, 'rgba(255,255,255,0.25)');
        g.addColorStop(0.7, 'rgba(255,255,255,0.05)');
        g.addColorStop(1, 'rgba(255,255,255,0)');
        ctx.fillStyle = g;
        ctx.fillRect(0, 0, s, s);
        const tex = new THREE.CanvasTexture(c);
        tex.needsUpdate = true;
        return tex;
    }
    
    const glowMat = new THREE.PointsMaterial({
        size: 2.2,
        map: makeGlowTexture(),
        vertexColors: true,
        transparent: true,
        blending: THREE.AdditiveBlending,
        depthWrite: false,
        sizeAttenuation: true
    });
    const glowPoints = new THREE.Points(glowGeo, glowMat);
    scene.add(glowPoints);
    
    // ============ Trail Head ============
    const headGeo = new THREE.SphereGeometry(0.7, 16, 16);
    const headMat = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        transparent: true,
        opacity: 1,
        blending: THREE.AdditiveBlending,
        depthWrite: false
    });
    const head = new THREE.Mesh(headGeo, headMat);
    scene.add(head);
    
    // Outer halo for head
    const haloGeo = new THREE.SphereGeometry(1.8, 16, 16);
    const haloMat = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        transparent: true,
        opacity: 0.4,
        blending: THREE.AdditiveBlending,
        depthWrite: false
    });
    const halo = new THREE.Mesh(haloGeo, haloMat);
    scene.add(halo);
    
    // ============ Color Palette ============
    const palette = [
        [0.20, 0.10, 0.55],  // deep indigo
        [0.10, 0.45, 0.95],  // azure
        [0.30, 0.95, 1.00],  // cyan
        [0.95, 1.00, 0.85],  // pale yellow
        [1.00, 0.55, 0.20],  // amber
        [1.00, 0.20, 0.30]   // crimson
    ];
    function lorenzColor(t, target) {
        t = Math.max(0, Math.min(1, t));
        const N = palette.length - 1;
        const scaled = t * N;
        const idx = Math.min(N - 1, Math.floor(scaled));
        const u = scaled - idx;
        for (let i = 0; i < 3; i++) {
            target[i] = palette[idx][i] * (1 - u) + palette[idx+1][i] * u;
        }
    }
    const zMin = -30, zMax = 60;
    
    // ============ Simulation Step ============
    function stepLorenz() {
        const dx = params.sigma * (y - x);
        const dy = x * (params.rho - z) - y;
        const dz = x * y - params.beta * z;
        x += dx * params.dt;
        y += dy * params.dt;
        z += dz * params.dt;
    }
    
    const tmpCol = [0, 0, 0];
    function addPoint() {
        if (pointCount >= MAX_POINTS) return;
        const i3 = pointCount * 3;
        linePos[i3] = x;
        linePos[i3+1] = y;
        linePos[i3+2] = z;
        glowPos[i3] = x;
        glowPos[i3+1] = y;
        glowPos[i3+2] = z;
        const t = (z - zMin) / (zMax - zMin);
        lorenzColor(t, tmpCol);
        const boost = 1.4;
        lineCol[i3]   = tmpCol[0] * boost;
        lineCol[i3+1] = tmpCol[1] * boost;
        lineCol[i3+2] = tmpCol[2] * boost;
        glowCol[i3]   = tmpCol[0] * 1.1;
        glowCol[i3+1] = tmpCol[1] * 1.1;
        glowCol[i3+2] = tmpCol[2] * 1.1;
        pointCount++;
    }
    
    // ============ Orbit Camera Control ============
    let theta = Math.PI * 0.30;
    let phi = Math.PI * 0.42;
    let radius = 130;
    const target = new THREE.Vector3(0, 0, 25);
    let isDragging = false;
    let prevX = 0, prevY = 0;
    let autoRotate = false;
    
    function updateCamera() {
        camera.position.x = target.x + radius * Math.sin(phi) * Math.cos(theta);
        camera.position.y = target.y + radius * Math.cos(phi);
        camera.position.z = target.z + radius * Math.sin(phi) * Math.sin(theta);
        camera.lookAt(target);
    }
    
    canvas.addEventListener('pointerdown', (e) => {
        isDragging = true;
        prevX = e.clientX;
        prevY = e.clientY;
        try { canvas.setPointerCapture(e.pointerId); } catch(err) {}
    });
    canvas.addEventListener('pointermove', (e) => {
        if (!isDragging) return;
        const dx = e.clientX - prevX;
        const dy = e.clientY - prevY;
        theta -= dx * 0.006;
        phi -= dy * 0.006;
        phi = Math.max(0.08, Math.min(Math.PI - 0.08, phi));
        prevX = e.clientX;
        prevY = e.clientY;
    });
    function endDrag(e) {
        isDragging = false;
        if (e && e.pointerId != null) {
            try { canvas.releasePointerCapture(e.pointerId); } catch(err) {}
        }
    }
    canvas.addEventListener('pointerup', endDrag);
    canvas.addEventListener('pointercancel', endDrag);
    canvas.addEventListener('pointerleave', endDrag);
    
    canvas.addEventListener('wheel', (e) => {
        e.preventDefault();
        const factor = e.deltaY > 0 ? 1.08 : 0.92;
        radius *= factor;
        radius = Math.max(30, Math.min(400, radius));
    }, { passive: false });
    
    // ============ UI Bindings ============
    function bindSlider(id, fmt, onSet) {
        const el = document.getElementById(id);
        const valEl = document.getElementById(id + 'Val');
        el.addEventListener('input', () => {
            const v = parseFloat(el.value);
            valEl.textContent = fmt(v);
            onSet(v);
        });
    }
    bindSlider('sigma', v => v.toFixed(1), v => params.sigma = v);
    bindSlider('rho',   v => v.toFixed(1), v => params.rho   = v);
    bindSlider('beta',  v => v.toFixed(2), v => params.beta  = v);
    bindSlider('steps', v => v.toFixed(0), v => params.stepsPerFrame = v | 0);
    bindSlider('dt',    v => v.toFixed(3), v => params.dt = v);
    
    document.getElementById('reset').onclick = () => {
        pointCount = 0;
        x = 0.1; y = 0; z = 0;
        lineGeo.setDrawRange(0, 0);
        glowGeo.setDrawRange(0, 0);
    };
    
    const autoBtn = document.getElementById('autoon');
    autoBtn.onclick = () => {
        autoRotate = !autoRotate;
        autoBtn.classList.toggle('active', autoRotate);
        autoBtn.textContent = autoRotate ? 'Stop' : 'Auto';
    };
    
    document.getElementById('glow').addEventListener('change', (e) => {
        glowPoints.visible = e.target.checked;
    });
    
    const headCheck = document.getElementById('head');
    headCheck.addEventListener('change', (e) => {
        head.visible = e.target.checked;
        halo.visible = e.target.checked;
    });
    
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
    
    // ============ Animation Loop ============
    const countEl = document.getElementById('count');
    let lastTime = performance.now();
    
    function animate() {
        requestAnimationFrame(animate);
        const now = performance.now();
        const dtReal = (now - lastTime) * 0.001;
        lastTime = now;
        
        // Step simulation
        for (let i = 0; i < params.stepsPerFrame; i++) {
            stepLorenz();
            addPoint();
        }
        
        // Update GPU buffers
        const drawn = pointCount;
        lineGeo.setDrawRange(0, drawn);
        glowGeo.setDrawRange(0, drawn);
        lineGeo.attributes.position.needsUpdate = true;
        lineGeo.attributes.color.needsUpdate = true;
        glowGeo.attributes.position.needsUpdate = true;
        glowGeo.attributes.color.needsUpdate = true;
        
        // Update head
        head.position.set(x, y, z);
        halo.position.set(x, y, z);
        const pulse = 0.7 + 0.3 * Math.sin(now * 0.005);
        head.scale.setScalar(1 + 0.2 * Math.sin(now * 0.008));
        halo.scale.setScalar(1 + 0.4 * Math.sin(now * 0.006));
        haloMat.opacity = 0.25 + 0.15 * Math.sin(now * 0.005);
        
        // Update camera
        if (autoRotate) {
            theta += dtReal * 0.3;
        }
        updateCamera();
        
        // Update counter
        countEl.textContent = drawn.toLocaleString();
        
        renderer.render(scene, camera);
    }
    
    updateCamera();
    animate();
})();
</script>
</body>
</html>
```

Hmm wait, `params.stepsPerFrame | 0` with bitwise OR on a float... but I'm parsing to float then OR. Actually since the slider has step 1, values are integers, but parseFloat returns a float. Let me use `Math.round(v)` instead.

Also I'm using `v | 0` in the bindSlider which converts to int. With the step=1 slider, this is fine.

Wait, actually `parseFloat('12') | 0 === 12` so it works, but `parseFloat('12.0') | 0 === 12` also. Just being safe with `Math.round`.

Let me also check: when sliders are dragged, the simulation changes in real-time. That's the desired behavior.

One concern: when MAX_POINTS is reached, the line stops growing. I should either:
- Stop adding points and freeze
- Wrap around (complex with line strips)
- Reset and continue

Let me just stop and let the user hit reset. The butterfly will be fully drawn.

But for a long-running demo, it'd be nice to keep adding. Let me add a "loop" option - when buffer is full, reset it and continue. Actually, let me make the MAX_POINTS higher (say 100,000) so it takes longer.

With 12 steps/frame at 60fps = 720 substeps/sec.
At dt=0.005, 720*0.005 = 3.6 time units/sec.
100k points / 720 = 139 sec ≈ 2.3 min.

That's reasonable.

Or, let me implement a circular buffer:
- When full, shift the array (or use a ring buffer with offset)
- Reset indices but keep all points

Actually, let me use a simpler approach: when full, freeze the simulation (set stepsPerFrame=0 effectively) and show "Trail Complete". The user can reset.

Or better: continue but only add the LAST N points (rolling window). Hmm complex.

Simplest: just freeze at MAX_POINTS. Show count, when it hits max show "complete".

Let me go with that. The user can hit reset.

Actually one more idea: when MAX is reached, automatically reset and continue. Then it's a continuous drawing experience. But the user might miss the full butterfly. Hmm.

Let me make it manual: freeze at MAX, user hits reset. The "drawing over time" is the core experience.

OK final code. Let me put it all together and write the file.

Actually let me reconsider the line width. WebGL's gl.lineWidth is limited to 1.0 on most browsers. So the Line will be 1px thin. The Points with glow texture will provide the visual weight.

To make it look fuller:
- Larger point size (maybe 3-4)
- Or render the line twice with slight offset? Complex.
- Or use TubeGeometry along the curve? Very expensive.

The Points layer at size 2.2 with glow texture should give a nice "fat glowing line" appearance. Let me also consider using Line2 from three.js but that's in examples/jsm/lines/, not in three.min.js. Can't use it.

I'll rely on Points + Line combo. Looks great.

Let me finalize. I think my plan is solid.

One final touch: I want to ensure the very first point doesn't sit at origin making the line "pop in". Since I start at (0.1, 0, 0) which is essentially origin, after 1 step the line will start moving. That's fine. The first frame might just show a single bright point at origin. Then the line starts to grow. OK.

Actually let me pre-step the simulation a few times before adding points, to ensure the line has some initial structure. Like, run 50 steps first to "settle" the trajectory, then start adding visible points.

Hmm, but the user wants to see the drawing process from the beginning. Let me NOT pre-step. They see the very first moment.

Actually wait - if I pre-step say 50 substeps before showing, the user sees a line that "starts" from a position that's already on the attractor. That's better visually. Let me do that.

```javascript
// Pre-step to settle
for (let i = 0; i < 100; i++) stepLorenz();
```

But this changes the visual story. Hmm. Let me not pre-step. User sees the trajectory emerge from origin.

Actually you know what, the trajectory does start at origin (well, near it). The Lorenz attractor with these params spirals out from the origin and settles onto the strange attractor within a few time units. So the user sees:
1. Frame 1: tiny line near origin
2. Frames 2-100: line spiraling outward
3. Frames 100+: line tracing the butterfly

That's actually a beautiful visual story. Let me keep it that way.

OK final code, writing now.

Oh wait, I realize the line might appear short initially because few points. With 12 steps/frame * 60fps = 720 points/sec, after 1 second we have 720 points which is enough for visible curve. Good.

Let me also add a minimum trail length check - if the user resets and the trajectory is short, the head sphere should be visible. The head is always at (x,y,z) which is the current state, even if no points are drawn yet. Good.

One last thought: I'm using `canvas` directly as the WebGL render target. This means I need to set `renderer.setSize` and the canvas gets resized automatically. I'm already doing this in the resize handler. Good.

Let me write the file now.

Hmm, one more consideration: the canvas events. I want pointer events on the canvas, but the canvas is the same size as the window. So clicking anywhere should drag. Good. But I also have UI panels overlaying. The panels have higher z-index, so clicks on panels don't reach canvas. Good.

Wheel zoom: should work on canvas only. The panels block wheel from reaching canvas (since they're on top with pointer events). Actually wheel events also bubble. Let me check... if the wheel happens over the panel, it scrolls the panel (which doesn't scroll). If the panel doesn't scroll, the wheel event continues to canvas. Hmm but the panel has overflow visible by default and no scrollable content, so wheel won't be captured by it. The wheel will reach the document and bubble.

Actually wheel events on the panel will not be captured by the canvas since the panel is in front. But I attached the wheel listener to `canvas`, so the wheel must hit canvas for it to fire. If wheel happens over panel, the panel gets the event (since z-index), and it doesn't bubble to canvas through pointer events... actually wheel events DO bubble through the DOM. So the wheel over panel would bubble up to body, not to canvas (since canvas is a sibling, not a parent).

So wheel over panel: panel doesn't handle it, event bubbles to body, doesn't reach canvas. Wheel over canvas (not panel): canvas handles it.

Hmm that's a UX inconsistency. Let me attach the wheel listener to `window` or `document` and use `e.target` to check if it's the canvas or panel area. Or, make the panel `pointer-events: none` for wheel (not possible).

Simpler: attach wheel to window, always handle. Then wheel always zooms, regardless of where it happens. But that's annoying if the user wants to scroll the panel.

Actually let me just attach to canvas. Most of the screen is canvas, so wheel zooms work most of the time. Fine.

Or actually, I can attach to window and check `e.target === canvas` or use preventDefault carefully:

```javascript
window.addEventListener('wheel', (e) => {
    if (e.target.closest('.panel')) return;  // ignore wheel over panel
    e.preventDefault();
    radius *= e.deltaY > 0 ? 1.08 : 0.92;
    radius = Math.max(30, Math.min(400, radius));
}, { passive: false });
```

This is cleaner. Let me use this approach.

But wait, the listener attached to window with passive: false and preventDefault might be bad. Let me just attach to canvas. Simpler.

OK let me just write the file now.

Actually one more issue: when I attach `wheel` to canvas, the canvas listener fires for wheel events on canvas only. If the wheel is over the panel, no zoom. That's actually OK behavior - the panel area is small and the user can just move their mouse to canvas to zoom.

OK final code:

Let me also reconsider the colors. The Lorenz attractor has two "wings" - one at z>25 and one at z<25 roughly. Coloring by z gives a nice 3D feel where you can tell which wing you're looking at. Let me make the palette span a good range:

z = -30: deep indigo/purple
z = 0: blue/cyan
z = 25: green/yellow
z = 50: orange/red

This gives a heat-map feel.

Let me also think about the panel position. Top-left might conflict with the bright spot of the trajectory. Let me put it top-left anyway since it's a common position and the panel is small.

Alright, writing the file now. No more deliberation.

One last thing: I should add a slight tilt to the initial camera so the user sees the 3D nature immediately. Default phi ~ 0.42π ~ 75° (a bit above horizon) gives a nice view. Theta ~ 0.3π gives a slight rotation. Good.

I want the camera to be at angle that shows the butterfly shape clearly. The attractor is roughly symmetric around z-axis. Camera should be offset in x and y. Let me set:
- theta = -π/4 (slightly back from positive x)
- phi = 0.4π (above the z axis)
- radius = 130

That should give a nice 3D view.

Let me also pre-rotate slightly so we see both wings. With camera at theta=π/4 and phi=π*0.4:
- camera.x = 130 * sin(0.4π) * cos(π/4) ≈ 130 * 0.95 * 0.71 ≈ 87
- camera.y = 130 * cos(0.4π) ≈ 130 * 0.31 ≈ 40
- camera.z = 130 * sin(0.4π) * sin(π/4) ≈ 87

So camera is at (87, 40, 87) looking at (0, 0, 25). That gives a 3/4 view. Good.

OK writing the file now for real.

Actually I realized my color palette might be too wide in hue range. Let me restrict to a more harmonious palette:

Cool:
[0.1, 0.1, 0.5],  // indigo
[0.0, 0.5, 0.9],  // blue
[0.2, 0.9, 1.0],  // cyan
[0.6, 1.0, 0.9],  // light cyan-green

Warm:
[1.0, 0.9, 0.5],  // pale yellow
[1.0, 0.5, 0.2],  // orange
[1.0, 0.2, 0.3]   // red

Hmm that's still pretty wide. Let me go with the full spectrum. It looks beautiful on Lorenz attractors.

Actually you know what, let me look at this more carefully. The colors I'm using are:

palette = [
    [0.20, 0.10, 0.55],  // deep indigo (z=-30)
    [0.10, 0.45, 0.95],  // azure (z≈-5)
    [0.30, 0.95, 1.00],  // cyan (z≈15)
    [0.95, 1.00, 0.85],  // pale yellow (z≈30)
    [1.00, 0.55, 0.20],  // amber (z≈45)
    [1.00, 0.20, 0.30]   // crimson (z=60)
];

zMin = -30, zMax = 60, range = 90.

The Lorenz attractor with default params:
- z oscillates roughly in [0, 50]
- Center of mass around z = 25

So most points will be in the cyan-yellow-orange range. That's good - bright and vibrant.

z < 0 happens briefly during transients. Those few points will be deep blue. Good.

OK colors are fine. Let me write the file.

For boost in lineCol - I'm using 1.4x which might be too bright with additive blending. Let me try 1.2 first. Actually with AdditiveBlending, multiple points accumulate, so even small brightness per point adds up. Let me use 1.0 boost (no boost).

Hmm let me think. The line is one point per pixel. Two overlapping line points double brightness. Three overlapping triple. So bright areas (where trajectory passes through itself) become very bright - which is exactly what we want for the "butterfly wings" glow effect.

For glowCol, I'm using 1.1x boost. The Points layer adds on top of the Line, making things even brighter.

OK let me just write it and trust the visual result.

Let me also consider: with MAX_POINTS = 60000 and ~720 points/sec, it fills in ~83 seconds. That's about 1.5 minutes. Fine.

Final code coming up:

Actually let me also add a touch sensor for pinch zoom on mobile:

```javascript
let lastTouchDist = 0;
canvas.addEventListener('touchstart', (e) => {
    if (e.touches.length === 2) {
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        lastTouchDist = Math.hypot(dx, dy);
    }
}, { passive: false });
canvas.addEventListener('touchmove', (e) => {
    if (e.touches.length === 2) {
        e.preventDefault();
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        const dist = Math.hypot(dx, dy);
        const factor = lastTouchDist / dist;
        radius *= factor;
        radius = Math.max(30, Math.min(400, radius));
        lastTouchDist = dist;
    }
}, { passive: false });
```

Pointer events should handle single-finger drag on mobile. Two-finger pinch needs touch events.

Hmm, mixing pointer and touch events can cause issues. Let me use pointer events throughout for drag, and add touch events for pinch zoom:

```javascript
canvas.addEventListener('touchstart', (e) => {
    if (e.touches.length === 2) {
        const t = e.touches;
        lastTouchDist = Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY);
        // Cancel any in-progress drag
        isDragging = false;
    }
});
canvas.addEventListener('touchmove', (e) => {
    if (e.touches.length === 2) {
        e.preventDefault();
        const t = e.touches;
        const dist = Math.hypot(t[0].clientX - t[1].clientX, t[0].clientY - t[1].clientY);
        radius *= lastTouchDist / dist;
        radius = Math.max(30, Math.min(400, radius));
        lastTouchDist = dist;
    }
}, { passive: false });
```

Wait but touchstart/touchmove will fire alongside pointer events. With `touch-action: none` on canvas, the browser won't try to scroll on touch, so the touch should be reliable.

Actually, with pointer events handling drag, I think mobile single-finger drag will work via pointer events. For two-finger pinch, I need to detect 2+ touches and use the touch-specific events.

Hmm this is getting complex. Let me just support pointer events + wheel, and let mobile single-finger drag work via pointer. For pinch, I'll skip it for now - the user can use the wheel emulation or just zoom in by orbiting closer.

Actually you know what, let me just add a "zoom slider" in the UI for explicit zoom. That way pinch isn't needed.

```html
<div class="row">
    <label>zoom</label>
    <input type="range" id="zoom" min="30" max="400" step="1" value="130">
    <span class="val" id="zoomVal">130</span>
</div>
```

OK adding that. The user can adjust zoom via slider OR wheel.

Final UI:
- σ, ρ, β sliders
- steps, dt sliders
- zoom slider
- Reset, Auto buttons
- Glow, Head toggles

Let me organize the panel better.

OK I'm going to stop deliberating and write the file. Let me check the current directory first to confirm three.min.js exists.

Good, three.min.js is there. Now let me write the complete index.html file.

Now let me verify the file is well-formed and test it. Let me check the file structure and make sure everything is in place.

Good. Now let me do a quick syntax sanity check on the JS - I'll try to evaluate the script with Node to catch syntax errors (just the JS portion extracted).

JS syntax is clean. Let me also do a basic structural check — make sure all UI element IDs referenced in JS exist in HTML.

All IDs are present. The bindSlider function creates IDs for `*Val` programmatically using string concatenation, so those are fine.

Let me also do a quick visual sanity check by serving the file and using curl to inspect:

Everything is good:
- ✓ `three.min.js` is loaded as a plain script tag with no CDN
- ✓ No external/CDN references — fully sandboxed
- ✓ CSS in `<style>` tag, JS in inline `<script>` tag
- ✓ All UI element IDs match between HTML and JS
- ✓ JS syntax is valid

Let me give the user a concise summary of what was built.