We need respond by creating index.html in current dir. Need inspect current dir maybe three.min.js exists. Need build single-page self-contained with inline CSS/JS no external resources except script src three.min.js. Need orbit-drag camera controls. But note no OrbitControls external. Need implement custom orbit controls in JS. Use THREE global. Need Lorenz attractor glowing 3D butterfly trajectory draws over time. Single file. Need likely use Three.js from pre-provided. Need maybe check file.

Need create index.html. Need think implementation.

Requirements:
- Single-page web app.
- CSS in style tag, JS in script tag, inline.
- No external resources, CDNs/network.
- Load three.min.js with <script src="three.min.js"></script> exact filename.
- Visualize Lorenz attractor as glowing 3D butterfly trajectory that draws over time.
- Orbit-drag camera controls.

Need likely use Three.js global. Need maybe support old three.min.js version. Let's inspect maybe version?

r128 maybe. Need implement compatible. Use BufferGeometry, Points, LineBasicMaterial maybe no additive blending? We can use THREE.AdditiveBlending.

Need create glowing effect. Since no postprocessing external, can fake glow:
- Main trajectory line with LineBasicMaterial color cyan/blue additive, transparent, linewidth maybe ignored but ok.
- Surrounding duplicate line with thicker? WebGL line width mostly 1. Could use tube geometry as it draws over time? We can create TubeGeometry for polyline path? Updating as it draws over time expensive but okay for maybe 5000 points. Glow can be many line segments/points.
- Use Points with additive blending and vertex colors maybe glowy particles along path.
- Also create "comet" point at current head with Sprite or sphere with emissive material.
- Use bloom-like halos: add multiple transparent spheres/points? Since no postprocessing.
- Use additive blending with transparent line segments and particles.
- Draw over time: integrate Lorenz equations step by step, adding line segments/points to buffer each frame. Need maybe path arrays. Use Lorenz parameters sigma=10, rho=28, beta=8/3, dt=0.012. Start near x=0.1 y=0 z=1.0. Keep maybe 25000 points max. The attractor has extents ~ +/-20. Need scale maybe 0.7? Actually x,y around +/-18, z 0-50. Use camera at (0,-80,45?) or (0,-75,55), look at (0,0,25). We can map coordinates directly.

Need orbit-drag camera controls:
- Implement pointerdown/move/up:
  - left drag rotates camera around target (azimuth/elevation)
  - wheel zoom distance
  - maybe right/middle drag pan
  - touch support
  - inertia optional.
- Need set camera spherical coords. Use THREE.Spherical? r128 has. Or implement ourselves.

Need self-contained. Need maybe "global THREE" script order:
<script src="three.min.js"></script>
<script>
(() => { ... })();
</script>
Need use document.addEventListener('DOMContentLoaded'? If script after body and after three.min.js okay.

Need maybe handle resize.

Need visual design:
- black background with subtle grid/stars? No external.
- CSS overlay with title, controls hints, stats.
- Canvas full viewport.
- Maybe UI panel with buttons: reset, pause/resume, speed slider, glow slider? But user asked app. Could include minimal controls. Need not overdo.
- "glowing 3D butterfly trajectory that draws over time" maybe include animation of line drawing.
- Could precompute all points but reveal gradually. Better integrate in realtime.

Implementation details:
- Scene, PerspectiveCamera, WebGLRenderer antialias true, powerPreference high-performance.
- set pixel ratio min(2, window.devicePixelRatio)
- renderer.setClearColor(0x02030a,1)
- Add ambient? For lines no.
- Add sphere head: MeshBasicMaterial additive transparent? MeshBasicMaterial no emissive? Additive blending.
- Maybe create a sprite glow with canvas texture? But no external. Could create CanvasTexture of radial gradient. But "self-contained" okay. However THREE r128 has CanvasTexture. Need maybe use SpriteMaterial map texture transparent additive. Could create radial gradient with canvas.

- Create a dynamic line:
  Option 1: Use THREE.BufferGeometry with positions/color arrays. Each frame, add point. To draw line segments, positions length = n*3. Need set drawRange(0,n). We can set attributes with maxPoints capacity. Color attribute maybe per vertex. Use LineBasicMaterial with vertexColors true, blending additive, transparent true, opacity 0.85, depthWrite false.
  - To create fade/tail? If entire line uniform, older points remain. "draws over time" okay. Could have vertex colors from blue->cyan->magenta/orange.
  - For glow, create duplicate geometry with opacity 0.18 maybe same positions, bigger? Lines no thickness. Could use Points with same positions, size maybe 0.35, additive, transparent, opacity 0.28. Points create starry glow. Also create "head sprite".
  - To make "glowing line" in 3D, create tube geometry updated? Maybe dynamic tube is heavier but possible. Use line and points enough.
  - Another trick: Use additive blending and transparent line at same path with opacity 0.55, and a Points "halo" with larger size.

- Max points maybe 35000. Memory okay. positions 35000*3*4=420KB; color same. Multiple.
- Lorenz integration:
  const maxPoints = 32000;
  positions = new Float32Array(maxPoints*3), colors = new Float32Array(maxPoints*3)
  count=0;
  function stepLorenz() {
     const stepsPerFrame = Math.floor(speedSlider.value) maybe 1-20.
     for each step:
        dx = sigma*(y-x)*dt; dy=(x*(rho-z)-y)*dt; dz=(x*y-beta*z)*dt; x+=dx...
        positions[count*3]=x*scale maybe; y*scale; z*scale - center? If direct z 0-50, target at (0,0,25). We can use z-25 to center. x,y as is. Scale 1.0.
        colors: t=count/maxPoints; color based on angle/t; maybe HSL.
        count++;
        if count >= maxPoints: shift? To simulate infinite drawing, could wrap and shift arrays. But buffer geometry attributes can't shift easily. Could use ring buffer and update positions each frame; but line continuity wrap issue. Simpler: when max reached, stop or reset? User wants draws over time; can loop/restart after full attractor with fade. Could implement ring buffer to continuously draw by clearing and restarting every N points. But "draws over time" maybe line fills. We can reset after max and fade? Maybe okay.
        Maybe implement "fade tail" by not max too long. Could use maxPoints=28000 and when full reset count=0; maybe user sees re-drawing. But if line remains, no.
        Alternative use ring buffer with positions array circular and drawRange 0 count. But geometry order must be sequential; ring buffer would make line jump. Could use two segments.
        Simpler: use max 20000; after full, reset count=0 and geometry.setDrawRange(0,0); colors reset. This creates repeated drawing. Include "auto restarts".
     geometry.attributes.position.needsUpdate=true; color.needsUpdate=true; geometry.setDrawRange(0,count);
     head.position.set(x*scale,y*scale,z*scale-25)
  }
- But if count max then geometry.setDrawRange 0,0 and count=0. Need maybe "reset attractor".

- Maybe pre-seed? If starting from one point, it takes a while to form butterfly. We can integrate multiple steps per frame and start at 0.1. Maybe initial count 1. Need "draws over time". Fine.
- But Lorenz path quickly forms. Use dt=0.012, stepsPerFrame=3 maybe 360/s. Need stable enough. Euler okay. Maybe use RK4 for accuracy. Let's implement RK4 to be nice.
  function lorenzRK4(x,y,z,dt) returns.
  But simple Euler enough. Use dt=0.012 maybe stable. Use RK4 for smooth.
- Need maybe "butterfly" orientation. Camera target maybe (0,0,25). Use coordinate mapping:
  const scale = 0.85;
  px = x*scale;
  py = y*scale;
  pz = (z-25)*scale;
  target = (0,0,0).
- Maybe add axes? Not necessary. Could add subtle grid floor? Maybe add a faint reference grid/plane at z=-25? But Lorenz attractor in 3D. Could add "butterfly silhouette" maybe no.

- Glow:
  - Create radial gradient sprite:
    const canvas = document.createElement('canvas'); 128x128; ctx radial gradient from rgba(120,240,255,1) center to transparent edge; texture = new THREE.CanvasTexture(canvas); spriteMat = new THREE.SpriteMaterial({map:texture, color:0x7df9ff, transparent:true, blending:AdditiveBlending, depthWrite:false}); sprite scale set (8,8,1).
  - Also smaller magenta/orange sprite maybe.

- Points:
  const glowGeom = new THREE.BufferGeometry();
  setAttribute('position', new THREE.BufferAttribute(positions,3));
  setAttribute('color', new THREE.BufferAttribute(colors,3));
  setDrawRange(0,0);
  const glowMat = new THREE.PointsMaterial({size:0.65, vertexColors:true, transparent:true, opacity:0.35, blending:THREE.AdditiveBlending, depthWrite:false, sizeAttenuation:true});
  const glow = new THREE.Points(glowGeom, glowMat);
  Need if same geometry with positions/colors. Update both attributes.
  But for line and points use same geometry? Could create separate geometries with same attributes? Can't share one BufferAttribute? Yes can. But if setDrawRange on one, other? Use two geometries referencing same attributes maybe okay. Or create two BufferGeometries and same BufferAttribute objects. Easier:
  const positionAttr = new THREE.BufferAttribute(positions,3);
  const colorAttr = new THREE.BufferAttribute(colors,3);
  const lineGeom = new THREE.BufferGeometry();
  lineGeom.setAttribute('position', positionAttr); lineGeom.setAttribute('color', colorAttr); lineGeom.setDrawRange(0,0);
  const pointGeom = new THREE.BufferGeometry(); pointGeom.setAttribute('position', positionAttr.clone? Actually can share? If share, both update. I think okay but geometry attributes can be shared. However dispose might double? Not issue. But if setDrawRange separately. Use same attributes? Fine.
  But if both share same attributes and one geometry setDrawRange, okay.
  But if BufferAttribute object is shared, both needUpdate true. Good.
- But if using same attr, line and points draw same.
- Material:
  const lineMat = new THREE.LineBasicMaterial({ vertexColors:true, transparent:true, opacity:0.78, blending:THREE.AdditiveBlending, depthWrite:false});
  const haloMat = new THREE.PointsMaterial({ size:0.35, vertexColors:true, transparent:true, opacity:0.42, blending:Additive, depthWrite:false, sizeAttenuation:true});
  const sparkMat = new THREE.PointsMaterial({ size:1.2, vertexColors:true, transparent:true, opacity:0.9, blending:Additive, depthWrite:false});
  Maybe only every 4th point for spark? If PointsMaterial draws all points. Could create separate sparkle geometry? Not necessary.
- Color:
  function colorAt(i) {
    const t = i / maxPoints;
    const hue = (0.52 + t*0.18 + Math.sin(t*Math.PI*6)*0.03) % 1; // cyan to purple
    const sat = 0.95;
    const light = 0.55 + 0.15*Math.sin(t*Math.PI*2);
    const c = new THREE.Color().setHSL(hue,sat,light);
    colors[idx] = c.r; ...
  }
  Need avoid new Color per point? Fine 20000. Could use HSL helper? THREE.Color.setHSL. Good.
- Maybe "butterfly trajectory" can be colored by lobe: x sign? 
  if x>0 hue=0.52 cyan, if x<0 hue=0.82 magenta, else transition. Nice.
  const side = Math.tanh(x/5); hue = 0.55 + (side+1)*0.13 + t*0.06; 
- Need maybe "glowing 3D butterfly trajectory" perhaps include two wings? Lorenz attractor itself. Could add transparent "wings" surfaces? Not necessary.

- Camera controls:
  - State: target = new THREE.Vector3(0,0,0); spherical = {radius:75, theta:Math.PI*0.75? phi:Math.PI*0.45?}
  - updateCamera:
    const sinPhi = Math.sin(phi);
    camera.position.set(target.x + radius*sinPhi*Math.sin(theta), target.y + radius*Math.cos(phi), target.z + radius*sinPhi*Math.cos(theta));
    camera.lookAt(target);
  - pointer down:
    isDragging = true; lastX/Y; movement; pointer capture.
    pointermove:
      dx = e.clientX-lastX; dy...
      theta -= dx*0.005; phi -= dy*0.005? Need clamp phi 0.08 to Math.PI-0.08.
      For left drag rotate. For right or middle pan:
        Need compute camera right/up vectors:
          camera.updateMatrixWorld();
          right = new THREE.Vector3().setFromMatrixColumn(camera.matrix,0).normalize();
          up = new THREE.Vector3().setFromMatrixColumn(camera.matrix,1).normalize();
          panScale = radius * 0.001;
          target.addScaledVector(right, -dx*panScale);
          target.addScaledVector(up, dy*panScale);
      But pointer events can't easily distinguish right? e.button for mousedown; e.buttons for move. If e.buttons===2 or 4 pan, else rotate.
    - wheel:
      e.preventDefault(); radius *= Math.exp(e.deltaY*0.001); clamp 25-180.
    - double click reset.
    - Add passive false for wheel.
  - Touch: pointer events support. Need CSS touch-action:none on canvas.
  - Maybe include "orbit-drag camera controls" in UI.

- Could use "renderer.domElement" pointer events. Need pointer capture. 
  canvas.addEventListener('pointerdown', e => { dragging=true; last...; canvas.setPointerCapture(e.pointerId); });
  canvas.addEventListener('pointerup', e => { dragging=false; canvas.releasePointerCapture...});
  canvas.addEventListener('pointercancel', ...)
  canvas.addEventListener('pointermove', ...)
  Need if pointermove while not dragging? no.
  Need context menu prevent.

- Maybe "auto rotate" toggle? Not required. Could include "Rotate" maybe disabled? But user asked orbit-drag. Could include "Auto spin" button? Nice but maybe not needed.

- Need "draws over time" and "glowing" perhaps with time-based pulsing:
  - In animate:
    const pulse = 0.75 + 0.25*Math.sin(elapsed*0.003)
    haloMat.opacity = 0.18 + 0.12*pulse;
    head.scale.setScalar(1.0+0.15*Math.sin(elapsed*0.008));
    head.material.opacity = 0.85 + 0.15...
    renderer.render(scene,camera)
- Need maybe fade background? Use transparent? no.

- Need maybe star field:
  - Create 800 random points around scene with low opacity white, additive. Use BufferGeometry positions random in sphere/cube. PointsMaterial size 0.15, opacity 0.35. This adds depth. But no network. Good.
- Need maybe "butterfly" maybe add subtle transparent "wings" mesh? Could create two translucent shapes? Hmm.
- Need maybe "glowing 3D butterfly trajectory" more visually:
  - Add "wings" as two transparent filled surfaces? Could create parametric mesh for Lorenz? Too much.
  - Use "TubeGeometry" for recent path? Maybe not dynamic.
  - Could use "line segments" with additive and points. Good.
- Need maybe "orbit-drag camera controls" with mouse cursor style.

- Need maybe "loading" if THREE missing? But script loaded. Could include fallback text.
- Need maybe ensure no external resources. The only external script is local three.min.js. No fonts.
- Need maybe use <script src="three.min.js"></script> exactly. No module.

Potential issue: BufferGeometry.setDrawRange count is in vertices for Line/Points, yes.

Potential issue: Sharing same BufferAttribute between two geometries and setting needsUpdate on one attr works. Good.

Potential issue: If using LineBasicMaterial linewidth > 1 ignored; set 1.
Potential issue: THREE.PointsMaterial size in world units? sizeAttenuation true. Good.

Potential issue: WebGLRenderer antialias; additive blending with transparent line maybe okay.

Potential issue: CanvasTexture from gradient might need texture.needsUpdate = true automatically. Good.

Potential issue: The script src local relative to index.html. Good.

Potential issue: "all into one self-contained file" but includes three.min.js separate pre-provided. User explicitly says load each. Good.

Need create index.html. Need maybe include accessibility? Fine.

Let's draft robust code. Need maybe no external.

Let's formulate HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Lorenz Attractor — Glowing Butterfly</title>
<style>
:root { color-scheme: dark; }
html, body { margin:0; height:100%; overflow:hidden; background:#02030a; font-family: ...; }
#app { position:fixed; inset:0; }
canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
canvas.dragging { cursor:grabbing; }
.overlay { position:fixed; left:clamp(14px,2vw,28px); top:...; max-width: 360px; pointer-events:none; color:...; text-shadow...; }
.title etc.
.controls { position:fixed; right:..., bottom:...; pointer-events:auto; display:flex; ...; backdrop-filter blur; }
button, input styling.
.badge etc.
#hint maybe.
</style>
</head>
<body>
<div id="app"></div>
<div class="overlay">
 <div class="eyebrow">Lorenz system</div>
 <h1>Glowing 3D Butterfly</h1>
 <p>Drag to orbit. Wheel/pinch to zoom. Double-click to reset.</p>
</div>
<div class="controls">
  <button id="resetBtn">Reset</button>
  <button id="pauseBtn">Pause</button>
  <label>Speed <input id="speed" type="range" min="1" max="24" value="8"></label>
  <label>Glow <input id="glow" type="range" min="0" max="100" value="65"></label>
</div>
<div class="readout"><span id="points">0</span> points</div>
<script src="three.min.js"></script>
<script>
(() => { ... })();
</script>
</body>
</html>

Need maybe "readout" pointer-events none.

JS:
(() => {
 'use strict';
 if (!window.THREE) { document.body.innerHTML = ...; return; } // But this changes page. Fine.
 const container = document.getElementById('app');
 const scene = new THREE.Scene();
 scene.fog = new THREE.FogExp2(0x02030a, 0.012);
 const camera = new THREE.PerspectiveCamera(55, window.innerWidth/window.innerHeight, 0.1, 1000);
 const renderer = new THREE.WebGLRenderer({antialias:true, alpha:false, powerPreference:'high-performance'});
 renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.outputEncoding = THREE.sRGBEncoding? maybe r128 has sRGBEncoding. Could set. renderer.physicallyCorrectLights? no.
 container.appendChild(renderer.domElement);
 const canvas = renderer.domElement;

 // UI
 const pointsEl...
 let paused=false;
 pauseBtn.addEventListener('click', () => { paused = !paused; pauseBtn.textContent = paused ? 'Resume' : 'Pause'; });
 resetBtn.addEventListener('click', resetAttractor);
 speedInput.addEventListener('input', () => stepsPerFrame = parseInt(...));
 glowInput.addEventListener('input', updateGlow);

 // materials
 const target = new THREE.Vector3(0,0,0);
 let radius=78, theta=0.72*Math.PI? Need coordinates.
 let phi=0.48*Math.PI maybe elevation? If phi is polar from y axis, phi=1.15 rad (65°) gives y=33, z/x radius* sin 65 ~70. Good. theta maybe 0.65π? Camera x negative? Use theta = Math.PI * 0.75; z = radius sin phi cos theta = 78*0.9* -0.707 = -50, x=78*0.9*0.707=50. Good.
 updateCamera.

 // Add lights? For mesh head no lights if MeshBasic. For grid maybe line.
 // Stars
 function createStars() {
  const count=900; positions = new Float32Array(count*3); colors...
  for i: random spherical radius 100-220, maybe y -30 to 80; colors blue/purple.
  const mat = new THREE.PointsMaterial({size:0.22, vertexColors:true, transparent:true, opacity:0.45, blending:Additive, depthWrite:false, sizeAttenuation:true});
  scene.add(new THREE.Points(geom,mat));
 }
 // subtle orbit rings? 
 function createGuideRings() { maybe use THREE.LineLoop circles in xz/y? 
   const ringMat = new THREE.LineBasicMaterial({color:0x38415f, transparent:true, opacity:0.18, blending:Additive});
   Add three rings radius 38 around target with rotations. But line rings can show axes.
 }
 // Attractor geometry:
 const maxPoints=34000; const positions = new Float32Array(maxPoints*3); const colors = new Float32Array(maxPoints*3);
 const positionAttr = new THREE.BufferAttribute(positions,3);
 const colorAttr = new THREE.BufferAttribute(colors,3);
 const lineGeom = new THREE.BufferGeometry();
 lineGeom.setAttribute('position', positionAttr); lineGeom.setAttribute('color', colorAttr); lineGeom.setDrawRange(0,0);
 const pointGeom = new THREE.BufferGeometry();
 pointGeom.setAttribute('position', positionAttr); pointGeom.setAttribute('color', colorAttr); pointGeom.setDrawRange(0,0);
 const lineMat = new THREE.LineBasicMaterial({vertexColors:true, transparent:true, opacity:0.88, blending:THREE.AdditiveBlending, depthWrite:false});
 const line = new THREE.Line(lineGeom,lineMat); scene.add(line);
 const glowMat = new THREE.PointsMaterial({size:0.52, vertexColors:true, transparent:true, opacity:0.42, blending:THREE.AdditiveBlending, depthWrite:false, sizeAttenuation:true});
 const glow = new THREE.Points(pointGeom,glowMat); scene.add(glow);
 const head = createHead(); scene.add(head);
 function createHead() {
  const group = new THREE.Group();
  const core = new THREE.Mesh(new THREE.SphereGeometry(0.75,24,16), new THREE.MeshBasicMaterial({color:0xffffff, transparent:true, opacity:0.95, blending:Additive, depthWrite:false}));
  group.add(core);
  const spriteMat = new THREE.SpriteMaterial({map:createGlowTexture(), color:0x7df9ff, transparent:true, opacity:0.75, blending:Additive, depthWrite:false});
  const sprite = new THREE.Sprite(spriteMat); sprite.scale.set(8,8,1); group.add(sprite);
  const sprite2 = new THREE.Sprite(new THREE.SpriteMaterial({map:createGlowTexture(0xff4fd8?), ...})); maybe same texture with color.
  return group;
 }
 Need createGlowTexture maybe color in material. Canvas white gradient.

 // Lorenz state:
 const params = {sigma:10, rho:28, beta:8/3, dt:0.012, scale:0.9};
 let x=0.1, y=0, z=1.0, count=0, stepsPerFrame=8, glowLevel=0.65;
 function resetAttractor() {
   x=0.1; y=0; z=1.0; count=0; lineGeom.setDrawRange(0,0); pointGeom.setDrawRange(0,0); positionAttr.needsUpdate=true; colorAttr.needsUpdate=true; pointsEl.textContent='0';
 }
 function addPoint() {
  const idx=count*3;
  const px=x*params.scale, py=y*params.scale, pz=(z-25)*params.scale;
  positions[idx]=px; positions[idx+1]=py; positions[idx+2]=pz;
  const t=count/(maxPoints-1);
  const side = Math.tanh(x/8);
  const hue = 0.54 + (side+1)*0.12 + t*0.08;
  const sat = 0.95;
  const light = 0.55 + 0.12*Math.sin(t*Math.PI*2);
  const c = colorScratch.setHSL(hue % 1, sat, light);
  colors[idx]=c.r; ...
  count++;
  lineGeom.setDrawRange(0,count);
  pointGeom.setDrawRange(0,count);
  positionAttr.needsUpdate=true;
  colorAttr.needsUpdate=true;
  head.position.set(px,py,pz);
  pointsEl.textContent = count.toLocaleString();
 }
 // Need colorScratch defined before addPoint. const colorScratch = new THREE.Color();
 function lorenzStep() {
   const {x,y,z} = integrateRK4? Could do in-place.
 }
 function lorenzRK4Step() {
   const dt = params.dt;
   const k1x = sigma*(y-x), k1y = x*(rho-z)-y, k1z = x*y-beta*z;
   const k2x = sigma*((y+0.5*dt*k1y)-(x+0.5*dt*k1x)), ...
   ...
   x += dt/6*(k1x+2*k2x+2*k3x+k4x); etc.
 }
 function animate(now) {
   requestAnimationFrame(animate);
   const elapsed=now*0.001;
   if (!paused) {
      for (let i=0; i<stepsPerFrame; i++) { lorenzRK4Step(); addPoint(); }
      if (count >= maxPoints) resetAttractor(); // But this resets after adding last point; maybe okay. But if reset in same frame, points shows 0. Better if count >= maxPoints { resetAttractor(); } But resetAttractor sets count=0. Good.
   }
   // rotate stars maybe
   starField.rotation.y = elapsed*0.005;
   // pulse
   const pulse = 0.5+0.5*Math.sin(elapsed*2.2);
   glowMat.opacity = 0.18 + glowLevel*0.35*pulse? Wait glowLevel 0-1.
   lineMat.opacity = 0.52 + glowLevel*0.36;
   head.children[0].material.opacity = 0.85 + 0.15*pulse;
   head.scale.setScalar(0.9 + 0.14*pulse);
   renderer.render(scene,camera);
 }
 requestAnimationFrame(animate);
})();
Need if resetAttractor called after max, it clears and then first point? But addPoint called count=maxPoints, then reset sets count=0, no new point. Next frame draws. Fine. But count max; geometry draw range 0. Good.
Potential issue: if resetAttractor called in animate, it sets head position? Not. Fine.

- UI speed input:
  const speedInput = document.getElementById('speed');
  let stepsPerFrame = Number(speedInput.value);
  speedInput.addEventListener('input', () => { stepsPerFrame = Number(speedInput.value); speedValue.textContent = stepsPerFrame;});
Maybe include span speedValue.
- Glow input:
  let glowLevel=Number(glowInput.value)/100;
  glowInput.addEventListener('input', () => { glowLevel=...; glowValue.textContent = `${...}%`;});
Need update labels.

- Controls:
  const controls = { dragging:false, pointerId:null, lastX:0, lastY:0, mode:'rotate' };
  canvas.addEventListener('contextmenu', e=>e.preventDefault());
  canvas.addEventListener('pointerdown', (e) => {
    controls.dragging=true; controls.pointerId=e.pointerId; controls.lastX=e.clientX; controls.lastY=e.clientY; controls.mode = (e.button===1 || e.button===2 || e.buttons & 6) ? 'pan' : 'rotate'; canvas.classList.add('dragging'); canvas.setPointerCapture(e.pointerId);
  });
  canvas.addEventListener('pointermove', (e) => {
    if (!controls.dragging || e.pointerId !== controls.pointerId) return;
    const dx = e.clientX - controls.lastX;
    const dy = e.clientY - controls.lastY;
    controls.lastX=e.clientX; controls.lastY=e.clientY;
    if (controls.mode === 'pan' || (e.buttons & 6)) { panCamera(dx,dy); } else { rotateCamera(dx,dy); }
  });
  function endPointer(e) { if (e.pointerId === controls.pointerId) { dragging=false; pointerId=null; canvas.classList.remove('dragging'); try release... } }
  canvas.addEventListener('pointerup', endPointer); pointercancel; pointerleave? If pointer capture, pointerup enough. Could add pointerleave only if no capture? maybe.
  canvas.addEventListener('wheel', (e) => { e.preventDefault(); zoomCamera(e.deltaY); }, {passive:false});
  canvas.addEventListener('dblclick', resetCamera);
  Need maybe prevent page scroll on touch. CSS touch-action none.

  function rotateCamera(dx,dy) {
    theta -= dx * 0.006;
    phi -= dy * 0.006; // If dy positive drag down? Usually drag down moves camera up? If dy positive, phi +=? Let's think. phi polar from y axis. If drag down, want camera move down? maybe no matter. Use phi = clamp(phi + dy*0.006, 0.08, Math.PI-0.08). Drag up (dy negative) phi decreases -> camera above. Hmm.
    updateCamera();
  }
  function zoomCamera(delta) { radius = clamp(radius * Math.exp(delta*0.001), 22, 180); updateCamera(); }
  function panCamera(dx,dy) {
    const right = new THREE.Vector3();
    const up = new THREE.Vector3();
    camera.getWorldDirection(forward); forward.cross? To get right: right.setFromMatrixColumn(camera.matrixWorld,0); up.setFromMatrixColumn(camera.matrixWorld,1);
    const panScale = radius * 0.0012;
    target.addScaledVector(right, -dx * panScale);
    target.addScaledVector(up, dy * panScale);
    // clamp target maybe? Not necessary.
    updateCamera();
  }
  resetCamera: radius=78; theta=0.75*Math.PI; phi=1.12; target.set(0,0,0); updateCamera();
  Need maybe reset attractor too? Double-click reset camera. UI reset resets attractor. Maybe separate "Reset view" button? Could include "Reset" resets attractor only? UI label "Reset path". Maybe double-click resets view. Add button "Reset view"? Simpler: button id resetBtn "Reset path"; maybe add "View" button? But too much. Could make reset button reset both. Hmm.
  - User likely wants orbit controls, not UI. "Reset" can reset path. "Double-click to reset view" overlay.
  - Maybe add "Reset" button resets both path and view? That is fine. But if path reset, okay.
  - Could add separate "Reset view" in button? Let's include two buttons maybe "Reset path" and "Reset view". But controls panel small.
  - Buttons: <button id="resetPathBtn">Reset path</button><button id="resetViewBtn">Reset view</button><button id="pauseBtn">Pause</button>. That's okay.
  - Sliders: speed, glow.

- Need maybe "butterfly trajectory" maybe add "butterfly body" along z? Not necessary.

Potential issue: "orbit-drag camera controls" maybe user expects mouse drag to orbit. Good.

Need maybe create "tube" for glow? Could consider dynamic tube geometry for recent path with MeshBasicMaterial additive. But updating tube geometry each frame is more complex. But maybe we can create "ribbon/tube" by making a TubeGeometry from all points every 50 frames? Then glowy tube with MeshBasicMaterial. But no need.

Potential issue: "glowing" without postprocessing might be subtle. PointsMaterial plus additive line plus sprite head should be okay. Could add a second line with same geometry but color white, opacity 0.32 and PointsMaterial bigger. Good.
- Use two point clouds:
  - coreLine: line opacity 0.85
  - haloPoints: size 0.9 opacity 0.32
  - sparklePoints: maybe every 8th point? To avoid all points. We can create separate sparkle positions? But dynamic maybe.
  - Since PointsMaterial draws all points; if size 1.2 and opacity 0.12, all points create glow.
- Could create "comet tail" by drawing only recent points? But line full path. Glow points all path. Good.

Potential issue: Need maybe use "THREE.ColorManagement.enabled" in r128? Not. Not necessary.

Need maybe use "renderer.setAnimationLoop" instead of requestAnimationFrame. r128 has. requestAnimationFrame okay.

Potential issue: Local file opened file:// with script src local works. No network.

Need maybe "three.min.js" loaded before inline script. Good.

Need maybe "global THREE" if script loaded. Good.

Let's write file.

Need ensure file present. Maybe validate no external resources? script local. CSS no network. Need maybe use "Inter" font but not loaded; system fallback. Fine. Need maybe "all into one self-contained file" index. Need final concise. But before final maybe inspect if syntax okay? Could use node? Browser not. Maybe run grep script src.