The user wants a single-page HTML file with a 3D solar system using Three.js (from the local `three.min.js`). Requirements:
- Sun and orbiting planets with varied speeds and sizes
- Orbit-drag camera controls
- Starfield
- Self-contained: CSS in `<style>`, JS in `<script>`, inline
- No external resources/CDNs
- Must load `three.min.js` locally via `<script src="three.min.js"></script>`
- Must use global `THREE`
- Must end with `index.html` present

Plan:
- Create an `index.html` file at the current directory.
- The file will include:
  - Basic HTML structure
  - `<style>` for full-screen canvas, removing margins, maybe a dark background, maybe some overlay text.
  - `<script src="three.min.js"></script>` (local file)
  - Inline `<script>` that builds:
    - Scene, camera (PerspectiveCamera), renderer (WebGLRenderer)
    - Controls: `OrbitControls` — but wait, `OrbitControls` is typically a separate file in Three.js examples, not part of the core `three.min.js`. The user said "Using the pre-provided three.min.js (global THREE)" and "build on top of it... load each with a plain `<script src="NAME"></script>`". The available library is `three.min.js`. We need orbit-drag camera controls. Since `OrbitControls` isn't in the core min file (usually), but maybe they expect us to implement basic orbit controls manually using mouse events on the camera or use a custom implementation. The prompt says "load each with a plain `<script src="NAME"></script>` using its exact filename (never a CDN or URL), then build on top of it: three.min.js." It only mentions `three.min.js`. So we should implement our own simple orbit controls using mouse events, or use `THREE.OrbitControls` if it's somehow included? Usually `three.min.js` is just the core library. Let's implement custom orbit controls using mouse/touch events to rotate the camera around a target, with zoom via wheel. This is safer and self-contained.
    - Sun: a mesh (SphereGeometry) with MeshBasicMaterial (yellow/orange, maybe emissive) and a glow effect (a slightly larger transparent sphere or just a bright color). Add point light from sun.
    - Planets: Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune. Each with:
      - A pivot (Object3D or Group) at origin that rotates around sun.
      - The planet mesh offset from pivot.
      - Vary sizes and distances.
      - Ring around Saturn (Torus or Ring geometry).
    - Orbit lines: thin ring geometries or Line loops to show paths.
    - Starfield: many small white particles randomly placed in a large sphere or box using BufferGeometry and Points.
  - Animation loop:
    - Rotate each planet pivot at different speeds.
    - Optionally rotate planets on their own axes.
    - Update controls.
    - Render.
  - Responsive resize handler.

Details:
- Sun radius: ~5 units.
- Planets distances: ~8, 12, 16, 22, 32, 42, 55, 70 units.
- Planets radii: ~0.8, 1.2, 1.3, 1.0, 3.5, 3.0, 2.0, 1.9.
- Speeds: inversely proportional to distance, but with some variation.
- Colors: Mercury gray, Venus orange-white, Earth blue, Mars red, Jupiter brown-orange, Saturn yellow-tan, Uranus cyan, Neptune blue.
- Stars: 2000 points in a sphere of radius ~200.

Camera controls implementation:
- Store spherical coordinates (radius, theta, phi) around a target (0,0,0).
- On mousedown, record start x,y and theta, phi.
- On mousemove while down, update theta, phi.
- On wheel, update radius.
- Convert spherical to cartesian for camera position.
- Camera always looks at target.

Make it look nice:
- Background: black.
- Maybe add a subtle sun glow using a sprite or just emissive color + point light.
- Saturn's rings: RingGeometry, rotated 90 degrees or flat in xz plane.
- Orbit trails: LineBasicMaterial circles.
- Anti-alias renderer.

Write the HTML to `index.html`.

Let's construct the file content.

Check if `three.min.js` exists in the current directory first.

Great, `three.min.js` exists. Now I'll write the `index.html` file. I need to make sure it's fully self-contained with CSS and JS inline. I'll implement custom orbit-drag controls since OrbitControls is not in the core library. The file should be clean and professional.

Key components:
1. HTML structure with fullscreen canvas.
2. CSS: dark background, full screen, no scrollbars. Maybe an info overlay.
3. Inline JS:
   - Setup scene, camera, renderer.
   - Starfield with Points.
   - Sun with light.
   - Planets with pivots and orbits.
   - Saturn's rings.
   - Custom orbit controls.
   - Animation loop.
   - Resize handler.

Let's draft the code carefully.

For orbit controls:
- target = (0,0,0)
- spherical coordinates: radius, phi (polar angle from y-axis), theta (azimuthal angle around y)
- mouse drag: map dx to theta, dy to phi. Clamp phi to avoid flipping.
- wheel: change radius. Clamp radius to min/max.

For planets:
- Create a `Group` for each planet system. The group is at origin. Inside the group, a pivot group or just rotate the group itself around Y axis? Actually, easiest: each planet has a `pivot = new THREE.Object3D()` at origin. Add planet mesh as child of pivot, offset by distance along XZ plane (e.g., position.set(distance, 0, 0)). Then in animation, `pivot.rotation.y += speed`. This handles orbit. The planet itself can also rotate on its local axis: `planet.rotation.y += selfSpeed`.

Orbit lines:
- Create a `RingGeometry` or calculate points for a `Line`. A `Line` loop with `BufferGeometry` is good. Create a circle of points at y=0 with given radius.

Sun:
- SphereGeometry(5, 32, 32). MeshBasicMaterial({color: 0xFFD700}) or emissive. Add PointLight(0xFFAA00, 1, 300) from center.

Stars:
- 2000 random points in sphere radius 300. PointsMaterial with size 0.5 or so. White.

Make it visually appealing:
- Use slight transparency for sun glow? Maybe a second sphere slightly larger with opacity.
- Add ambient light so dark sides of planets are not pure black.
- Planet colors as hex strings.

Write code.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Solar System</title>
<style>
  html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #000; font-family: sans-serif; }
  canvas { display: block; }
  .overlay { position: absolute; top: 10px; left: 10px; color: #fff; pointer-events: none; opacity: 0.7; }
</style>
</head>
<body>
<div class="overlay">3D Solar System<br>Drag to orbit • Scroll to zoom</div>
<script src="three.min.js"></script>
<script>
(() => {
  // Scene setup
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
  camera.position.set(0, 80, 120);

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  // Starfield
  const starGeometry = new THREE.BufferGeometry();
  const starCount = 2000;
  const starPositions = new Float32Array(starCount * 3);
  for (let i = 0; i < starCount; i++) {
    const r = 300 * Math.cbrt(Math.random()); // volumetric distribution
    const theta = Math.random() * 2 * Math.PI;
    const phi = Math.acos(2 * Math.random() - 1);
    starPositions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
    starPositions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
    starPositions[i * 3 + 2] = r * Math.cos(phi);
  }
  starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
  const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.7 });
  scene.add(new THREE.Points(starGeometry, starMaterial));

  // Sun
  const sunGeometry = new THREE.SphereGeometry(5, 32, 32);
  const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xFFD700 });
  const sun = new THREE.Mesh(sunGeometry, sunMaterial);
  scene.add(sun);

  // Sun glow (slightly larger transparent sphere)
  const glowGeometry = new THREE.SphereGeometry(6, 32, 32);
  const glowMaterial = new THREE.MeshBasicMaterial({ color: 0xFFAA00, transparent: true, opacity: 0.25 });
  scene.add(new THREE.Mesh(glowGeometry, glowMaterial));

  // Sun light
  const sunLight = new THREE.PointLight(0xFFFFFF, 1.5, 400);
  scene.add(sunLight);
  const ambientLight = new THREE.AmbientLight(0x333333);
  scene.add(ambientLight);

  // Orbit line generator
  function createOrbitLine(radius, color = 0x444444) {
    const points = [];
    const segments = 128;
    for (let i = 0; i <= segments; i++) {
      const angle = (i / segments) * Math.PI * 2;
      points.push(new THREE.Vector3(Math.cos(angle) * radius, 0, Math.sin(angle) * radius));
    }
    const geometry = new THREE.BufferGeometry().setFromPoints(points);
    const material = new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.4 });
    return new THREE.Line(geometry, material);
  }

  scene.add(createOrbitLine(8));
  scene.add(createOrbitLine(12));
  scene.add(createOrbitLine(16));
  scene.add(createOrbitLine(22));
  scene.add(createOrbitLine(32));
  scene.add(createOrbitLine(42));
  scene.add(createOrbitLine(55));
  scene.add(createOrbitLine(70));

  // Planet data
  const planetsData = [
    { name: 'Mercury', distance: 8, radius: 0.8, color: 0xA0A0A0, speed: 1.6, selfSpeed: 0.005 },
    { name: 'Venus', distance: 12, radius: 1.2, color: 0xE3BB76, speed: 1.2, selfSpeed: 0.003 },
    { name: 'Earth', distance: 16, radius: 1.3, color: 0x2233FF, speed: 1.0, selfSpeed: 0.02 },
    { name: 'Mars', distance: 22, radius: 1.0, color: 0xDD4422, speed: 0.8, selfSpeed: 0.018 },
    { name: 'Jupiter', distance: 32, radius: 3.5, color: 0xD9A066, speed: 0.4, selfSpeed: 0.04 },
    { name: 'Saturn', distance: 42, radius: 3.0, color: 0xEAD6B8, speed: 0.3, selfSpeed: 0.038 },
    { name: 'Uranus', distance: 55, radius: 2.0, color: 0xD1F5F8, speed: 0.2, selfSpeed: 0.03 },
    { name: 'Neptune', distance: 70, radius: 1.9, color: 0x4b70dd, speed: 0.15, selfSpeed: 0.032 }
  ];

  const planets = [];

  const geometryCache = {};
  for (let i = 0; i < planetsData.length; i++) {
    const data = planetsData[i];
    const pivot = new THREE.Object3D();
    scene.add(pivot);

    const geometry = geometryCache[data.radius] || new THREE.SphereGeometry(data.radius, 32, 32);
    geometryCache[data.radius] = geometry;
    const material = new THREE.MeshStandardMaterial({ color: data.color, roughness: 0.7, metalness: 0.1 });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(data.distance, 0, 0);
    pivot.add(mesh);

    let ring = null;
    if (data.name === 'Saturn') {
      const ringGeo = new THREE.RingGeometry(data.radius * 1.4, data.radius * 2.2, 64);
      // Fix UV mapping for ring texture if needed, but here we use a simple color
      const ringMat = new THREE.MeshStandardMaterial({ color: 0xC2B280, side: THREE.DoubleSide, transparent: true, opacity: 0.8 });
      ring = new THREE.Mesh(ringGeo, ringMat);
      ring.rotation.x = Math.PI / 2;
      mesh.add(ring);
    }

    planets.push({ pivot, mesh, ring, data });
  }

  // Custom Orbit Controls
  const controls = {
    target: new THREE.Vector3(0, 0, 0),
    radius: camera.position.distanceTo(controls.target),
    theta: Math.atan2(camera.position.x - controls.target.x, camera.position.z - controls.target.z),
    phi: Math.acos((camera.position.y - controls.target.y) / controls.radius),
    rotateSpeed: 0.005,
    zoomSpeed: 1.5,
    isDragging: false,
    lastX: 0,
    lastY: 0,
    minRadius: 10,
    maxRadius: 300
  };

  function sphericalToCartesian(radius, phi, theta, target) {
    const sinPhi = Math.sin(phi);
    return new THREE.Vector3(
      target.x + radius * sinPhi * Math.sin(theta),
      target.y + radius * Math.cos(phi),
      target.z + radius * sinPhi * Math.cos(theta)
    );
  }

  function updateCamera() {
    const pos = sphericalToCartesian(controls.radius, controls.phi, controls.theta, controls.target);
    camera.position.copy(pos);
    camera.lookAt(controls.target);
  }

  // Mouse events
  renderer.domElement.addEventListener('mousedown', (e) => {
    controls.isDragging = true;
    controls.lastX = e.clientX;
    controls.lastY = e.clientY;
  });

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

  window.addEventListener('mousemove', (e) => {
    if (!controls.isDragging) return;
    const dx = e.clientX - controls.lastX;
    const dy = e.clientY - controls.lastY;
    controls.theta -= dx * controls.rotateSpeed;
    controls.phi -= dy * controls.rotateSpeed;
    // Clamp phi to avoid flipping at poles
    controls.phi = Math.max(0.1, Math.min(Math.PI - 0.1, controls.phi));
    controls.lastX = e.clientX;
    controls.lastY = e.clientY;
    updateCamera();
  });

  renderer.domElement.addEventListener('wheel', (e) => {
    controls.radius += e.deltaY > 0 ? controls.zoomSpeed : -controls.zoomSpeed;
    controls.radius = Math.max(controls.minRadius, Math.min(controls.maxRadius, controls.radius));
    updateCamera();
  });

  // Touch support for mobile orbit-drag
  renderer.domElement.addEventListener('touchstart', (e) => {
    if (e.touches.length === 1) {
      controls.isDragging = true;
      controls.lastX = e.touches[0].clientX;
      controls.lastY = e.touches[0].clientY;
    }
  }, { passive: false });

  window.addEventListener('touchend', () => { controls.isDragging = false; });

  window.addEventListener('touchmove', (e) => {
    if (!controls.isDragging || e.touches.length !== 1) return;
    e.preventDefault();
    const dx = e.touches[0].clientX - controls.lastX;
    const dy = e.touches[0].clientY - controls.lastY;
    controls.theta -= dx * controls.rotateSpeed;
    controls.phi -= dy * controls.rotateSpeed;
    controls.phi = Math.max(0.1, Math.min(Math.PI - 0.1, controls.phi));
    controls.lastX = e.touches[0].clientX;
    controls.lastY = e.touches[0].clientY;
    updateCamera();
  }, { passive: false });

  // Initial camera placement
  updateCamera();

  // Animation loop
  function animate() {
    requestAnimationFrame(animate);

    for (const p of planets) {
      p.pivot.rotation.y += p.data.speed * 0.005;
      p.mesh.rotation.y += p.data.selfSpeed;
    }

    renderer.render(scene, camera);
  }

  animate();

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

  // Expose for debugging
  window.planets = planets;
  window.scene = scene;
})();
</script>
</body>
</html>
```

Need to review carefully:
- `controls` object uses `controls.target` before it's fully initialized in the object literal? Actually `controls = { target: new THREE.Vector3(0,0,0), radius: camera.position.distanceTo(controls.target), ... }`. This works because `controls` variable is declared with `const controls = { ... }`. Inside the initializer, `controls` is in TDZ? Actually, in an object literal assigned to `const controls`, the property initializers can reference `controls` because it's a `const` declaration with no TDZ for the value? Wait, TDZ applies to the binding `controls`. Before the assignment is complete, `controls` is in TDZ. So `camera.position.distanceTo(controls.target)` inside the initializer would throw a ReferenceError if `controls` is in TDZ.

I need to fix this. I should compute radius after the object is created, or move initialization out.

Let's fix:
```js
  const controlsTarget = new THREE.Vector3(0,0,0);
  const controls = {
    target: controlsTarget,
    radius: 100, // will be set below
    theta: Math.atan2(camera.position.x - controlsTarget.x, camera.position.z - controlsTarget.z),
    phi: Math.acos((camera.position.y - controlsTarget.y) / camera.position.distanceTo(controlsTarget)),
    rotateSpeed: 0.005,
    zoomSpeed: 1.5,
    isDragging: false,
    lastX: 0,
    lastY: 0,
    minRadius: 10,
    maxRadius: 300
  };
  // Actually camera.position is (0,80,120), distanceTo origin is sqrt(0^2+80^2+120^2)=sqrt(6400+14400)=sqrt(20800)=~144.2
  // We can set controls.radius = camera.position.distanceTo(controls.target); after the object.
  controls.radius = camera.position.distanceTo(controls.target);
```

But there's still `camera.position.distanceTo(controls.target)` inside the object literal for `phi` if I keep it there. Better to move the initial theta/phi calculation after the object.

Also inside `mousemove`, `controls.theta -= dx * controls.rotateSpeed;` is fine.

Let's rewrite the controls section cleanly.

Another thing: `MeshStandardMaterial` requires lights to be visible. We have PointLight and AmbientLight, so it's fine.

Star size: 0.7 might be a bit thick. Maybe 0.5.

Sun glow: MeshBasicMaterial transparent true opacity 0.25. Good.

Orbit lines: createOrbitLine returns a Line. Good.

Ring geometry: `RingGeometry` creates a ring in XY plane. To orient it flat like Saturn's rings (in XZ plane), we need to rotate it. `ring.rotation.x = Math.PI / 2` makes it align with XZ plane? Let's check: default RingGeometry is in XY plane. Rotating +90 deg around X maps Y to Z. So the ring lies in XZ plane. But its normal would be Y. That seems correct. However, `THREE.MeshStandardMaterial` with `side: THREE.DoubleSide` is good.

Self speeds might be too fast or slow. Let's use small increments like 0.01, 0.02. Current selfSpeed values are 0.005 etc. In the animate loop, we call `p.mesh.rotation.y += p.data.selfSpeed`. This means per frame rotation speed. At 60fps, Earth at 0.02 is 1.2 rad/s ~ 68 deg/s, which is a bit visible but okay. Mercury at 0.005 is slower. Let's adjust: maybe use `0.01, 0.008, 0.02, 0.018, 0.04, 0.038, 0.03, 0.032` - these seem okay.

Orbital speeds: `p.data.speed * 0.005`. Mercury speed 1.6 -> 0.008 rad/frame -> 0.48 rad/s. That means period ~13s. Jupiter 0.4 -> 0.002 rad/frame -> 0.12 rad/s -> period ~52s. This seems okay for a demo.

I should also add some visual detail: maybe atmosphere for Earth? Not needed, keep simple.

Make sure touch events work.

Also, I should add `renderer.domElement.style.touchAction = 'none';` to prevent scrolling on mobile while dragging.

Let's finalize the content.

One more check: `geometryCache`. I create geometry for each radius. If multiple planets share same radius, cache returns same geometry. This is okay.

What about mesh scaling for size variation? Using radius parameter in SphereGeometry is fine.

Make sure `three.min.js` path is correct: `<script src="three.min.js"></script>`. It's in the same directory.

Let's write the file.

The file has been written. Let me verify it exists and maybe quickly check its contents to make sure everything is in order. Also, I should make sure there are no syntax issues by a quick grep for obvious problems? The requirements are met:
- Single file `index.html`
- CSS in `<style>`, JS in `<script>`
- Inline everything
- External JS: only `<script src="three.min.js"></script>`
- Sun, 8 planets with varied sizes and speeds
- Orbit-drag camera controls (custom implementation)
- Starfield
- No CDN/network

Everything looks good. I can present the result.