We need respond by creating index.html in current dir. Need inspect maybe three.min.js exists. Need build single-page web app self-contained with CSS/JS inline, load pre-provided three.min.js via script src="three.min.js". No external resources. Need interactive 3D Rubik's Cube clickable face rotations, orbit-drag camera, scramble button. Need write file. Need maybe use current directory /tmp/ws. Need inspect.

Need create index.html. Need maybe can write full. Need think implementation.

Requirements:
- single-page web app, all CSS style, JS script inline, no external resources except script src="three.min.js" exact filename.
- Interactive 3D Rubik's Cube with clickable face rotations, orbit-drag camera, scramble button.
Need robust. Use Three.js global THREE.

Need design:
- 3x3x3 cube made of 27 cubies. Each cubie is box with black base plus colored stickers on outer faces.
- Camera orbit controls? Three.min.js maybe no OrbitControls included. Need implement orbit-drag camera ourselves (no external). Could use Raycaster and mouse drag to rotate camera around target. Touch support optional.
- Clickable face rotations: Need identify face clicks. Could use raycaster on invisible pivot/rotation planes or cubie groups. Need support face rotation animations. We need render interactive 3D Rubik's cube. Clicking face rotates it. Need prevent rotating while animating. Need face rotation logic.

Need decide coordinate conventions. Three.js default: camera at (5,4,5), lookAt origin. Cubies positions x,y,z. Face rotations:
- U: y = +1.5, rotate around world Y? Standard? Clicking top face. In Three.js object.rotation.y positive? Need visual orientation. Need define click face and rotation axis. We can define face rotations:
  - U: y = +size/2+epsilon, rotate +90° around Y? Need determine sign. If top face viewed from outside (above looking down), positive y rotation? Let's use axes and directions intuitive:
    - X face (right): rotate around X. If viewed from outside +X looking toward origin, clockwise? But not critical.
    - X face (left): rotate around X.
    - Y face (top): rotate around Y.
    - Y face (bottom): rotate around Y.
    - Z face (front): rotate around Z.
    - Z face (back): rotate around Z.
Need ensure face selection maps correctly.

Need animate groups. Approach:
- Create cubie groups at integer positions (-1,0,1). Each cubie group contains box mesh with colored sticker materials. To rotate a face, create pivot group at origin, add all cubies on selected face to pivot. Animate pivot.rotation[axis] by angle. On completion, detach cubies from pivot and set cubie.position? Important: if pivot group rotates child cubies, their local positions are transformed under pivot. If we detach after pivot.rotation=angle, child local positions remain original? Let's reason:
  - cubie group has position at cubie coordinates, no rotation initially.
  - pivot at origin contains cubie as child. Cubie world position = pivot world * cubie local position. If pivot rotates, world positions rotate. When we set pivot.rotation to final and detach cubie, its local position remains original (e.g. (1,1,0)), not rotated. Need update cubie.position to new world position after rotation. Also update cubie.rotation to accumulated rotation? Since cubie mesh/stickers need orientation. If we set cubie.position to rotated position and cubie.rotation to accumulated rotation, then detach with pivot.rotation final. Need compute world quaternion and position. But if cubie local rotation accumulates? For cubies on face, their orientation changes relative to world by pivot rotation. We can update cubie.rotation.setFromQuaternion(worldQuat * maybe inverse of cubie local? Need be careful.

Alternative:
- Each cubie is a group at integer position. For rotations, we can rotate only cubie groups about their centers using a temporary pivot at cubie center? But to animate slice, can group them in slice group at origin and animate. After animation, set each cubie.position = rotated position, cubie.rotation = accumulated orientation. Need compute orientation.

Detailed:
- Each cubie group local coordinates: position = (x,y,z). Its mesh has box centered at origin. Stickers as small boxes on cubie local faces. Initially cubie.rotation identity.
- When rotating face, for each cubie in slice, add to pivot.
- Animate pivot.rotation[axis] from current to target. Since pivot initially identity. At end, pivot.rotation[axis]=targetAngle.
- For each cubie:
  - worldPos = cubie.getWorldPosition(new THREE.Vector3()).
  - worldQuat = cubie.getWorldQuaternion(new THREE.Quaternion()).
  - cubie.position.copy(worldPos); cubie.rotation.copy(worldQuat); pivot.remove(cubie).
But after setting cubie.rotation=worldQuat and position=worldPos, if pivot is removed, world orientation remains correct. Need also maybe set cubie.userData.rotation? Not needed.
- Then update cubie.userData.position = rounded cube coordinate (integers) for future selection. But if cubie.rotation not identity, its local face stickers orientation? Its local coordinates are cubie's own axes; stickers are attached to local faces. If cubie.rotation is world orientation, local face mapping remains correct. Good.
- But after detach, pivot remains in scene? We can remove pivot. Need if pivot.rotation set final, after removal no effect.

Potential issue: if a cubie has been rotated in previous moves, its group position is rotated integer coordinate and its rotation is accumulated world quaternion. Adding it to pivot and animating pivot rotates it further. getWorldQuaternion includes accumulated rotation. After final, set rotation to worldQuat. Good.

Potential issue: Raycaster on cubie meshes with rotations. Need click face. We can raycast cubie meshes or invisible face planes. If we raycast cubie meshes, click on side of cube will select nearest cubie, but need determine clicked face from intersection face normal? For BoxGeometry raycast returns face normal in local? For mesh with transformed geometry, normalMatrix transforms face normal to world. Need compute normal direction. But if click on side of cubie, normal indicates which face of cubie. Then determine if cubie lies on an outer face and click face. However clicking on internal edges may hit non-face cubie? We can choose face based on normal axis. For all visible outer cubie faces. Need ignore non-corner? Actually clicking any cubie face whose normal points outward from cube maps to cube face. For a cubie on front layer z=1, clicking its front face normal +Z maps F. For a corner, click top front face normal +Y/+Z maps U/F. Good. For side faces on side layer x=1 maps R. For cubies on top face y=1, normal +Y maps U. For bottom y=-1 maps D. For back z=-1 maps B.
Need if click on cubie side but cubie not on outer face along that normal, e.g. click side face of a cubie in middle layer z=0, x=0? Its side face normal +X but x=0, not outer face; should ignore maybe no move. But clicking side face of a corner cubie on side layer x=1 maps R. So condition cubie.userData.position[axis] equals normal axis sign. Use current position.
Need if click on a cubie face not exactly outer due to edges, normal can be face of cubie; good.
Need map:
normal.x > 0.5 => 'R', axis x, angle +? or -? Need determine.
normal.x < -0.5 => 'L', axis x.
normal.y > 0.5 => 'U', axis y.
normal.y < -0.5 => 'D', axis y.
normal.z > 0.5 => 'F', axis z.
normal.z < -0.5 => 'B', axis z.
Need decide rotation direction. For face clicked, rotate face 90° clockwise as seen from outside? We can implement signs:
- For normal +axis, rotate +90 around axis? Let's test orientation visually. In right-handed coordinates, positive rotation about axis follows right-hand rule. Viewed from +axis looking toward origin, positive rotation appears clockwise or counterclockwise? Need recall. In XY plane looking down +Z? Actually viewer at +Z looking toward origin along -Z. Positive rotation about +Z maps +X to +Y. On screen with x right, y up, that is counterclockwise. So positive around +Z is counterclockwise as viewed from +Z. For a clockwise face turn as seen from outside, use negative angle for +axis faces. But standard cube notation maybe U clockwise viewed from top? Could be counter? Need not exact. We can make intuitive: clicking a face rotates it in the direction of mouse? Hmm.

Clickable face rotations: no specific direction. We can choose:
  +axis face: rotate +90 around axis (CCW from outside)
  -axis face: rotate -90 around axis? Need consistent clockwise as seen from outside? For normal -axis, viewer at -axis looking +axis, positive rotation about -axis equals negative about axis. Viewed from -axis, positive about -axis maps? E.g. view from -Z looking +Z, screen x right? Need positive around -Z maps +X to -Y (clockwise? On screen x right y up, +X to -Y is clockwise). So positive about -axis gives clockwise as viewed from -axis. Thus if we use angle = normalSign * 90°? For +Z angle +90 = CCW; for -Z angle -90 = CCW? Wait normalSign -1 => angle -90 around Z. As viewed from -Z, -Z axis positive rotation? Need positive around -Z is -90 around Z, and viewed from -Z, positive around -Z appears? Let's derive: View from -Z looking +Z, coordinate on screen x right, y up? If looking from negative z, the screen's y up maybe world +Y, x right maybe world +X? A positive rotation about -Z maps world +X to -Y, which on screen is down, so clockwise. So angle -90 around Z is clockwise as viewed from -Z. That matches "clockwise as seen from outside" for -Z. For +Z, clockwise as seen from outside would be -90 around Z. So if we always use angle = normalSign * 90, +Z gives CCW, -Z gives CCW? Wait for +Z, normalSign=+1 angle=+90 = CCW; for -Z normalSign=-1 angle=-90 = CCW as viewed from -Z? Need not consistent. If we want clockwise for all outside, angle = -normalSign*90? For +Z -90 clockwise; for -Z +90 (positive around -Z) clockwise. So angle = -normalSign * PI/2. But standard notation? Doesn't matter.
Could implement face signs:
  R (+X): +90? maybe clockwise as seen from right? For +X, positive around X maybe? Need view from +X, screen y up? On screen x? Hard.
Maybe choose:
  R: +90, L: -90, U: +90, D: -90, F: +90, B: -90. This is common for clockwise? Let's test F: +Z positive = CCW as seen from front. Standard Singmaster F is clockwise as seen from front, which is +90? Wait screen x right, y up, positive rotation maps x to y, CCW. But Rubik's F clockwise as seen from front maybe actually +90? Let's recall coordinate conventions in Three? If front is +Z and camera at +Z looking -Z, positive z rotation is CCW on screen. A clockwise turn of front face as you look at it would rotate top edge right? In cube notation F is clockwise viewed from front, which maybe corresponds to +90 in right-handed if axes x right, y up, z out? Let's visualize a square in XY plane, viewer at +Z, positive rotation maps top? A point at top (0,1) rotates to (-1,0), moving left; top edge goes left, that's clockwise? Wait square rotation positive CCW means a point at top moves left, right side moves up. Clockwise means top moves right. So +90 is CCW. Rubik's F clockwise viewed from front would top edge move right. So -90. But many cube coordinate conventions have front face rotation clockwise as +90 due to different screen orientation. Not critical.
Maybe better implement mouse-click face rotates "toward the clicked face" maybe no direction.
Need ensure animations work with click detection.

Scramble button:
- On click, run sequence of random legal face moves, no animation? Could animate sequentially or simultaneous? "Scramble button" should scramble cube. We can run random moves perhaps with animation speed? Simpler: generate 25 random moves and call performFaceRotation for each, maybe sequential with animation. But if user clicks scramble during animation, disable. Button text "Scramble" and "Scrambling...". We can also skip animation for scramble for speed? Could use performFaceRotation with animate true. 25 moves may take long. Better scramble quickly? Requirement just button. We can generate moves and animate sequential maybe okay. Could run 20 moves with shorter duration. Or use performMove with animate=false for immediate random scramble, but then less visual. Maybe scramble button should animate with speed. We can implement scramble button that disables and runs random moves sequentially with animate true. But 25*400ms = 10s. Could be acceptable. Could use 18 moves * 320ms. Use random.

Orbit drag camera:
- Use pointerdown/move/up on renderer.domElement. Track pointer. On pointerdown, store start. On pointermove, if dragging, update spherical camera target radius, theta, phi based on dx/dy. Need orbit around target. Use spherical coords:
  camera.position.x = target.x + radius * sin(phi) * sin(theta)
  camera.position.y = target.y + radius * cos(phi)
  camera.position.z = target.z + radius * sin(phi) * cos(theta)
  camera.lookAt(target)
Initialize theta maybe -0.75, phi 0.85, radius 7. On drag dx: theta -= dx*0.005, dy: phi -= dy*0.005? Need clamp phi [0.1, Math.PI-0.1]. On wheel zoom maybe nice. Need implement no OrbitControls. Touch: pointer events.

Click detection:
- Need distinguish drag vs click. On pointerup, if movement small and not dragging? But orbit drag will also pointerup. We can set dragging if moved > 3. On pointerup, if not moved and not animating, raycast.
- Raycast: Need set raycaster from normalized mouse. Objects: cubie meshes. Need maybe raycast all mesh children. Use getObjectsFrom? Simpler: const meshes = []; each cubie add to scene? We can add cubie group to scene and raycast scene? Raycaster.intersectObjects(cubies.map(c=>c.userData.mesh), false). Need store mesh in cubie.userData.mesh. But if cubie is child of pivot during animation, still in scene. Fine.
- For click, raycast meshes. Need if selected object belongs to cubie. Mesh parent is cubie. Need normal. BoxGeometry normals. Need compute face normal in world:
  const normal = new THREE.Vector3().setFromMatrixColumn(mesh.matrixWorld, 0)? For a box face, intersection.face.normal is local face normal; transform by normalMatrix:
  const normalMatrix = new THREE.Matrix3().getNormalMatrix(mesh.matrixWorld);
  const normal = new THREE.Vector3().applyMatrix3(normalMatrix).setFromMatrixColumn? Actually intersection.face.normal transformed by normalMatrix, then normalize.
  const normal = new THREE.Vector3().copy(intersection.face.normal).applyMatrix3(normalMatrix).normalize();
  But if mesh has no rotation? fine. For cubie group rotations, mesh local face normal transformed by cubie rotation. 
- Need choose intersection with smallest distance.
- If no intersection ignore.
- Determine axis:
  const abs = normal.abs();
  if abs.x >= abs.y && abs.x >= abs.z: axis='x'; sign=normal.x>0?1:-1; face = sign>0?'R':'L';
  else y, z.
- Determine cubie position from cubie.userData.position. If Math.abs(pos[axis]) != 1? If not outer face, ignore. But if clicked on side of a cubie in middle layer, its side normal maps to outer side but cubie pos axis not 1, so ignore. If clicked on inner faces of visible cubies? Actually ray hits front face of middle-layer cubie z=0, normal +Z; pos.z=0, ignore. Good.
- If clicked on corner cubie side face x=1 z=0, pos.x=1 so R. If clicked on top face y=1 z=0, U. Good.
- If clicked on a cubie with normal diagonal? Box face normals axis-aligned.
- Perform move.

Need create cube:
- Cubie size maybe 0.92, gap 0.06. Positions integer -1..1. Box geometry size 1. Sticker size 0.78, thickness 0.012. Need place stickers slightly outside cubie face: z = size/2 + 0.006, etc. Materials:
  - white top? Standard: U white, D yellow, F green, B blue, R red, L orange. Need assign per cubie:
    For each face axis and sign, if position[axis] == sign, add sticker with color.
  - Base material black.
  - Use MeshStandardMaterial with roughness etc. No textures.
  - Need maybe add bevel? BoxGeometry no bevel. Could use EdgesGeometry lines for cubie outlines? But stickers on faces. Black gaps visible.
- For each cubie group, add box mesh black, stickers. Need maybe add invisible hit mesh? Mesh raycast works. But sticker materials can block ray? Raycaster intersects mesh faces including sticker boxes and base. If click on sticker, object is sticker mesh not cubie mesh. Need handle both. If raycast all meshes, parent may be sticker mesh -> parent is cubie. But normal should be sticker face normal. If click on sticker, parent cubie. Good. If raycast base mesh only, click on sticker might not be captured. So include all meshes (base and stickers). But if click on sticker, intersection object parent cubie. Need set userData.cubie on all meshes. Use meshes array all mesh children.
- Need maybe add edges to show cubie boundaries. Use black material.

- Scene setup:
  - renderer = new THREE.WebGLRenderer({antialias: true}); set pixel ratio; size.
  - append to #app.
  - camera Perspective.
  - lights: ambient, directional, maybe hemisphere.
  - CSS full screen.
  - UI overlay: title, instructions, buttons. Need self-contained.
  - Use DOM element controls.
  - Add status text "Click a face to rotate. Drag to orbit. Wheel to zoom."
  - Button scramble.
  - Maybe reset button optional? User didn't ask. Could include reset? Maybe not.
- Need handle resize.
- Animation loop:
  - requestAnimationFrame(render)
  - During moves, animate pivot.rotation[axis] += delta. Need compute progress.
Implementation of performFaceRotation:
```
let isAnimating=false;
let moveQueue=[];
const cubeSize = 1.1; const cubeOffset = 1; const MOVE_DURATION=420;

function performFaceRotation(face, animate=true, duration=MOVE_DURATION) {
 if (isAnimating) return;
 const move = normalizeMove(face);
 if (!move) return;
 isAnimating=true;
 updateStatus(`Rotating ${move.face}...`);
 const pivot = new THREE.Group();
 scene.add(pivot);
 const slice = cubies.filter(c => Math.abs(c.userData.position[move.axis]) === 1 && c.userData.position[move.axis] === move.sign);
 slice.forEach(c => {
   c.userData.wasInPivot = true;
   pivot.add(c);
 });
 const angle = move.angle;
 if (!animate) {
   pivot.rotation[move.axis] = angle;
   commitPivot(cubies, pivot);
   scene.remove(pivot);
   isAnimating=false;
   return;
 }
 const start = performance.now();
 function step(now) {
   const t = Math.min(1, (now-start)/duration);
   const eased = easeInOutCubic(t);
   pivot.rotation[move.axis] = angle * eased;
   renderer.render(scene,camera);
   if (t < 1) requestAnimationFrame(step);
   else {
     pivot.rotation[move.axis] = angle;
     commitPivot(cubies,pivot);
     scene.remove(pivot);
     isAnimating=false;
     updateStatus(...);
   }
 }
 requestAnimationFrame(step);
}
```
Need ensure if cube is rotated, pivot.rotation[axis] set absolute angle, not delta. Since pivot starts identity. Good. But if face cubie has world position with non-identity orientation, adding to pivot and setting pivot rotation absolute works: worldQuat = pivotQuat * cubieLocalQuat? Since pivot is parent, yes. At end pivot.rotation=angle, commit worldQuat. Good.
Need commitPivot:
```
function commitPivot(pivot) {
  for (const cubie of pivot.children) {
    const pos = new THREE.Vector3();
    const quat = new THREE.Quaternion();
    cubie.getWorldPosition(pos);
    cubie.getWorldQuaternion(quat);
    cubie.position.copy(pos);
    cubie.rotation.copy(quat);
    cubie.userData.position = {x: Math.round(cubie.position.x), y: Math.round(cubie.position.y), z: Math.round(cubie.position.z)};
    cubie.userData.rotation = quat.clone();
    scene.add(cubie);
  }
}
```
But if pivot is child of scene, scene.add(cubie) after removal? If cubie already scene child? Actually cubie was removed from scene by pivot.add(cubie) (pivot is child of scene). When removing from pivot, cubie.parent is pivot. scene.add(cubie) adds to scene. Good. Need no duplicate.
Need maybe pivot.children is live array. commit before scene.remove(pivot). Good.
Need if slice empty? no.

Need normalize face:
```
const faceMoves = {
 R:{axis:'x', sign:1, angle:Math.PI/2},
 L:{axis:'x', sign:-1, angle:-Math.PI/2},
 U:{axis:'y', sign:1, angle:Math.PI/2},
 D:{axis:'y', sign:-1, angle:-Math.PI/2},
 F:{axis:'z', sign:1, angle:Math.PI/2},
 B:{axis:'z', sign:-1, angle:-Math.PI/2}
}
```
Need maybe use angle = sign * Math.PI/2. Good.

Potential issue: when commit, cubie.position rounded may be -1,0,1 but due to rotation around face, positions should remain integer. Good.
Potential issue: if pivot.rotation axis set angle, and cubie local position e.g. for R face x=1, y=1,z=1, pivot rotates around x, y/z swapped. world position (1,1,-1) etc. round.
Potential issue: if cubie rotation stored as worldQuat, and later adding to pivot, getWorldQuaternion includes worldQuat. Good.
Potential issue: if commit called after pivot.rotation=angle but pivot is in scene; getWorldQuaternion uses pivot.matrixWorld. Need updateMatrixWorld? renderer update before render; but after setting rotation, matrixWorld might be stale. Need call pivot.updateMatrixWorld(true) before getWorldPosition/Quaternion. So commit calls pivot.updateMatrixWorld(true).
Potential issue: after setting cubie.rotation = worldQuat, local position = worldPos. But if cubie has a non-identity rotation, its local geometry orientation is worldQuat. This is okay because parent scene identity. But when adding to pivot, cubie local position worldPos, local rotation worldQuat. Pivot rotates around origin, cubie local rotation included. Good.
Potential issue: if cubie.position is worldPos and rotation is worldQuat, then cubie's local face normal? The mesh is at origin relative to cubie. Good.

Need maybe support undo? Not required.

Need scramble:
```
const scrambleMoves = [];
function scramble() {
 if (isAnimating) return;
 isAnimating=true;
 scrambleButton.disabled=true;
 const moves = [];
 const faces = ['R','L','U','D','F','B'];
 for (let i=0; i<20; i++) {
   let move;
   do random; while (same axis and opposite? maybe avoid repeats)
   moves.push(move);
 }
 let i=0;
 const duration=260;
 function next() {
   if (i >= moves.length) { isAnimating=false; scrambleButton.disabled=false; updateStatus(`Scrambled (${moves.length} moves).`); return; }
   const face = moves[i].face;
   updateStatus(`Scrambling ${i+1}/${moves.length}: ${face}...`);
   performFaceRotation(face, true, duration);
 }
 // But performFaceRotation sets isAnimating; next called inside its completion. Need avoid recursion? Could implement performFaceRotation accepts onComplete callback.
```
Better implement performFaceRotation with callback:
```
function performFaceRotation(face, animate=true, duration=420, onComplete) {
 if (isAnimating) { if (onComplete) onComplete(); return; }
 isAnimating=true;
 ...
 function finish() { ... isAnimating=false; if(onComplete) onComplete(); }
}
```
Then scramble:
```
function runScramble() {
 const moves = generateScramble(24);
 let i=0;
 isAnimating=true;
 scrambleButton.disabled=true;
 updateStatus('Scrambling...');
 function runNext() {
   if (i>=moves.length) { isAnimating=false; scrambleButton.disabled=false; updateStatus(`Scrambled (${moves.length} moves).`); return; }
   const face = moves[i].face;
   performFaceRotation(face, true, 320, () => { i++; runNext(); });
 }
 runNext();
}
```
But performFaceRotation sets isAnimating=true. In runNext after performFaceRotation returns, isAnimating true. Fine. On finish callback, set isAnimating=false then runNext. But runNext calls performFaceRotation; it sees isAnimating false. Good.
Need avoid `performFaceRotation` calls `updateStatus('Rotating...')` and then callback status. Fine.
Potential issue: `performFaceRotation` if isAnimating returns immediately; in scramble callback if somehow isAnimating true, might skip. But no.
Need maybe if user click during scramble, ignored because isAnimating true.
Need maybe scramble generate random legal sequence:
```
const faces = ['R','L','U','D','F','B'];
function randomMove(prev) {
  let move;
  do { move = faces[Math.floor(Math.random()*faces.length)]; } while (move === prev.face || (prev && prev.axis === move.axis && prev.sign !== move.sign));
  return move;
}
```
Need maybe include prime moves? For scramble, face rotations can be 90 only. Could include 180? But click face rotation is 90. Scramble can include 90.
Need maybe button "Scramble" with id.
Need maybe reset? Could include but not necessary. If include, user didn't ask. But okay maybe extra. Simpler include only scramble and status.

Need maybe face rotations clickable via raycast on UI overlay? Ensure pointer events on renderer only, not overlay? UI overlay can block. Use CSS pointer-events for overlay? The UI should be clickable. Renderer canvas full screen. UI overlay with pointer-events none except button? Need canvas handles drag. If overlay covers with pointer-events none, button pointer events auto. But overlay pointer-events none means canvas receives clicks even over text, maybe okay. Button needs pointer-events auto. Could set #ui {pointer-events:none}; #scrambleButton {pointer-events:auto}. But if overlay text blocks? no.
Need maybe instructions overlay bottom.

Need maybe if user drags on button? no.

Need maybe mobile.

Need create index.html. Need ensure no external. The script src "three.min.js". Need no CDN.
Need maybe use `defer`? Inline script after external. Since script src at top? Put in head? Could include external script then inline script after DOM. For single file:
```
<!doctype html>
<html>
<head>
<meta charset...
<style>...</style>
</head>
<body>
<div id="app"></div>
<div id="ui">...</div>
<script src="three.min.js"></script>
<script>
(() => { ... })();
</script>
</body>
</html>
```
Need no modules.

Need maybe handle if THREE undefined? Not necessary. But could show error.

Need maybe use `THREE.MathUtils.degToRad`.
Need maybe use `renderer.outputEncoding = THREE.sRGBEncoding;` in older three.min.js. Current version maybe 2022? `THREE.sRGBEncoding` exists. Good.
Need maybe use `renderer.setClearColor(0x0b1020, 1);`.
Need maybe add grid? Not necessary. Could add ground? Maybe not.
Need maybe add background CSS gradient.

Need maybe use CSS:
- body margin 0, overflow hidden, background radial gradient, font system.
- #app fixed inset 0.
- canvas display block.
- .panel top left, backdrop blur.
- button styled.
- status.

Need maybe include "Drag to orbit • Click a face to turn • Wheel to zoom" in overlay.

Need maybe render cube centered.

Need maybe create labels? Not required.

Need maybe ensure clickable face rotations with raycaster. Need maybe if click on back face visible? Camera can orbit. If back face visible, click works.

Potential issue: raycaster intersects sticker boxes; sticker face normal transformed by sticker mesh local transform. Sticker mesh position e.g. local z=0.506, rotation identity. Its face normal for front sticker is (0,0,1). Good.
Potential issue: raycaster can hit a sticker on a side face before base; fine.
Potential issue: clicking face of cubie on outer side but not face normal outward due to cubie rotation. Suppose cubie rotated, its local sticker face normals are in cubie local coordinates, but cubie group rotation represents its world orientation. Raycast normal transformed to world, so okay.
Potential issue: If cubie is rotated, its position is integer but group rotation not identity. Stickers are on local faces. A cubie's outer visible face normal in world may not align with its current position? Example a cubie on R face rotates, its local +X face maybe no longer world +X? Wait cubie.rotation is world orientation. The cubie group local faces are rotated relative to world by cubie.rotation. For a cubie on R face, its local +X face should align with world +X? Is that true after moves? A cubie in R layer may have been rotated by R moves around x, so its local +X face remains world +X. If later moved by U/F moves, its local axes rotate, but the cubie is on some outer face based on current position. The face normal of a sticker on the current outer side should match outward normal? A cubie orientation after cube moves is such that stickers move with cubie; if it is on R layer, its local face with red sticker may or may not face world +X? Actually in a solved cube after moves, red stickers can be on other faces; a cubie's local axes rotate with the cubie, but its position is on an outer layer. The local face normal that points outward from cube should be aligned with outward normal if cubie orientation is physically consistent? Yes for any cubie in a face layer, the sticker on that face is on the outward normal. But a cubie could be on R layer with its local +X face facing world +X after an R move only; after U move, it moves to U layer, etc. The local face that points outward from its current layer is the one with the sticker on that layer; it should align with layer normal. Good.
Need maybe if raycast hits base mesh side of a cubie that is on outer side, normal outward. Good.

Need maybe for face selection, using intersection face normal can be ambiguous at edges/corners. If click on a corner, ray may hit side face of a cubie in middle? We ignore if not outer along normal. Good.
Potential issue: If click on a cubie that is on outer face but the clicked face normal points outward, but cubie.userData.position axis has sign equal normal sign. Good.

Need maybe use `event.preventDefault()` on pointerdown? To prevent text selection. CSS user-select none.
Need maybe set canvas `touch-action: none;`.

Need maybe if pointer leaves canvas? Use pointer capture on renderer.domElement. On pointerdown setPointerCapture. On pointermove use event clientX/Y. On pointerup release.
Need maybe pointer events on canvas only. Good.

Need maybe if pointerup after drag, no click. Need track pointerDown.
```
let pointerDown = null, pointerMoved = false;
canvas.addEventListener('pointerdown', e => {
  pointerDown = {x:e.clientX,y:e.clientY};
  pointerMoved=false;
  canvas.setPointerCapture(e.pointerId);
});
canvas.addEventListener('pointermove', e => {
  if (!pointerDown) return;
  const dx=e.clientX-pointerDown.x; dy...
  if (Math.hypot(dx,dy)>2) pointerMoved=true;
  if (pointerMoved) updateOrbit(dx,dy);
});
canvas.addEventListener('pointerup', e => {
  if (!pointerDown) return;
  const wasClick = !pointerMoved && !isAnimating;
  canvas.releasePointerCapture...
  if (wasClick) handleCanvasClick(e);
  pointerDown=null;
});
```
Need if drag begins, pointerMoved true, updateOrbit. If not moved, no update. If pointerup after no move but during animation, ignore.
Need maybe if pointerdown and animation starts, no click.
Need maybe pointermove while isAnimating? Orbit still works? Could allow. But if click during animation ignore. Maybe okay.
Need maybe if pointerdown over UI overlay with pointer-events none, canvas receives. Good.
Need maybe if pointerdown over button, canvas not receive. Good.

Orbit update:
```
function updateOrbit(dx,dy) {
  theta -= dx * 0.006;
  phi -= dy * 0.006;
  phi = Math.max(0.25, Math.min(Math.PI-0.25, phi));
  updateCamera();
}
```
Need maybe initial theta = -Math.PI/4, phi = Math.PI/3.
Need maybe wheel:
```
canvas.addEventListener('wheel', e => {
  e.preventDefault();
  radius *= Math.exp(e.deltaY * 0.001);
  radius = clamp(radius, 4, 12);
  updateCamera();
}, {passive:false});
```

Need maybe animate renderer:
```
function animate() { requestAnimationFrame(animate); renderer.render(scene,camera); }
```

Need maybe add axes? no.

Need maybe if `THREE` unavailable due to script load? Since script in same directory. We can show message:
```
if (!window.THREE) { document.body.innerHTML=...; return; }
```
But if THREE not loaded? It is.

Need maybe code comments? Fine.

Need maybe create "Rubik's Cube" title.
Need maybe "Scramble" button.
Need maybe status.

Need maybe `index.html` present. Use write.

Need review file maybe for bug. We should inspect maybe line around addSticker. I notice bug: create cubie stickers using addSticker(cubie, 'x', 1) but inside addSticker sets sticker.position[axis] = cubieSize/2... then overrides if axis. But geometry dimensions for x/y/z are okay: for x uses (stickerSize, stickerSize, stickerSize) but if axis x, should maybe thickness only in x; but if axis x, we set position.x but geometry is cube 0.76, not thin. Hmm for stickers on x faces, we created cube sticker of size 0.76 all axes, which protrudes along y/z too, may overlap? It's okay but not thin; all stickers are little cubes slightly raised, black gaps maybe visible. For y, geometry (stickerSize, stickerSize, stickerSize), okay. For z, cube. Not ideal but fine. However `addSticker` has `sticker.position[axis] = cubieSize / 2 + stickerThickness / 2 + 0.002;` then override. Fine.
Potential issue: BoxGeometry for sticker all axes; if sticker on x face, extends y/z by 0.38 and might cover black gaps around sticker, okay.
Potential issue: `allMeshes` includes sticker meshes. Raycaster hits sticker top face before body. Good.
Potential issue: `getRaycastCubie` uses `hit.face.normal`, but if hit.object is sticker mesh, face normal local. Normal matrix transforms. Good.
Potential issue: `commitPivot` loops `for (const cubie of pivot.children)` while scene.add(cubie) changes parent but not pivot.children. Fine.
Potential issue: `performFaceRotation` when isAnimating and onComplete called, in scramble if isAnimating true? no. But in `runScramble`, isAnimating false. `performFaceRotation` sets true. On finish, isAnimating false then onComplete. Good.
Potential issue: `runScramble` calls `performFaceRotation` which if animate true schedules requestAnimationFrame. It sets isAnimating true. If user clicks scramble again, disabled. Good.
Potential issue: `finish` calls `scene.remove(pivot)` after scene.add(cubie). Good.
Potential issue: `updateOrbit` while isAnimating: allowed. If user drags during animation, camera moves, raycast still works. Good.
Potential issue: `pointerDown` set; if pointerup after pointerMoved false but isAnimating true due to animation started by wheel? no. If isAnimating true from scramble and pointerdown then pointerup no click. Good.
Potential issue: `handleCanvasClick` if `performFaceRotation` returns because isAnimating true, no status. Good.

Need maybe test syntax by node? Use `node --check index.html` maybe not valid HTML but JS parser? It can parse script? Not directly. Use maybe `node --check` on extracted script? Or use `python`? Not necessary but can run `node --check <(sed...)`? Maybe no. Need maybe inspect with grep? Could use `node --check` on temp script. Let's extract script maybe.

Process substitution not works. Need maybe use bash to extract to temp file.

Need maybe ensure no external resources. yes. Need maybe maybe `stickerMaterials[color]` key by numeric color values; object keys coerced to strings. Fine.
Need maybe maybe bug in addSticker geometry: I attempted to create sticker geometry but not orientation. For x sticker, cube geometry all axes. Fine.
But maybe issue: `addSticker(cubie, 'x', 1, stickerMaterials[stickerColors.R]);` and inside addSticker:
```
const geo = new THREE.BoxGeometry(
          axis === 'y' ? stickerSize : stickerSize,
          axis === 'x' ? stickerSize : stickerSize,
          axis === 'z' ? stickerSize : stickerSize
        );
```
This is always cube. Fine.
Need maybe if raycaster hits sticker mesh, parent cubie. Good.
Need maybe if click on edge/corner, hit face normal could be -x/-y etc. Good.
Need maybe if click on sticker on face but cubie position not matching normal sign? We ignore. Good.

But I should consider if cubie rotation after moves and raycast normal sign match current position sign always? Let's reason deeper. Suppose a cubie is on R face (pos.x=1) but its local face normal that raycast hits could be +X? If cubie rotated by U move, its local axes rotate, but the face on the outside of the R layer should align with world +X because the cubie is in R layer and the cube's physical constraints. However after a U move, a cubie from R layer moves to U layer, not R. So if pos.x=1, it was rotated by R/L moves maybe around x, which preserve local x face orientation. If later it moves to U layer, pos.y=1. So for pos.x=1, it may have undergone U/D/F/B moves too that rotate it into R layer; its local x face should align with world +X because to be in R layer, its sticker on R face? Is that always? Physical cube cubie can be on R layer with its local red sticker not facing +X if it has been permuted? Wait cubie orientation matters. A corner cubie on R layer could have its red sticker on U/F/D/B faces, not on R, depending on orientation. But the cubie's local axes are tied to cubie geometry, not sticker colors. The cubie group rotation represents orientation. If it's in R layer, one of its local faces points +X, but it may not be the original red sticker face. Raycaster hit on its +X outward face could be any sticker color. We map by normal sign +X to R. That's correct, because the entire face slice R should rotate. So okay.
Potential issue: if click on cubie on R layer but its outward face normal is +X, okay. If click on side face of cubie on R layer but its outward face normal not +X? impossible for a cubie on outer layer, one local face should point outward. If cubie orientation is not identity, its local face normals are rotated; one will equal +X if it is on R layer. Good.
Need maybe if click on cubie on R layer but ray hits a sticker on a side face that is not outward from cube, e.g. its top face normal +Y but y<1. We ignore because pos.y not sign. Good.

Potential issue: The pivot rotation and commit orientation. Let's test mentally with cube rotations.
Initial cubie at (1,1,0), rotation identity. Add to pivot. Pivot rotates 90 around X. At end, worldPos (1,0,-1), worldQuat rotationX(90). Set cubie.position (1,0,-1), cubie.rotation rotX(90). Remove. Now cubie's local geometry orientation in world is rotX(90). Good.
Next rotate U face y=1. This cubie pos y=0 so not included. Good.
Next rotate R face x=1. Include. Add to pivot. Pivot identity, cubie local pos (1,0,-1), local rot rotX(90). Pivot rotates 90. WorldQuat = rotX(90)*rotX(90)=rotX(180). worldPos (1,1,-1) maybe. Set position, rotation. Good.
No issue.

Potential issue: `scene.add(cubie)` after commit while `cubie` is still in `pivot.children`. Since `pivot` is child of scene, removing from pivot automatically updates parent. Adding to scene okay. But if `scene.add(cubie)` while `cubie` still child of pivot? Actually after `pivot.remove(cubie)`? Wait commitPivot doesn't explicitly remove cubie from pivot; it calls scene.add(cubie). In Three.js, Object3D.add will remove from its current parent if any? I think Object3D.add calls parent.remove(child) if child.parent !== this. So scene.add(cubie) will remove from pivot. But if pivot.remove? Let's check: Object3D.add: if child.parent !== this, child.parent && child.parent.remove(child), child.parent=this, child._matrixAutoUpdate=true, updateMatrix. So yes. But pivot.children still contains cubie? When Object3D.remove is called, it removes from children. Since scene.add calls parent.remove(child) on pivot, it removes from pivot.children. Good.
Potential issue: `commitPivot` loops over pivot.children while scene.add(cubie) modifies children. But in JS for-of over a live array? `for (const cubie of pivot.children)` uses array iterator; if array is modified, behavior? It may skip or maybe continue. Better to use `const children = pivot.children.slice();` to be safe. Let's edit.

I accidentally JSON invalid? Actually oldText contains newline with unescaped? I used in JSON string maybe okay? The error says edits.0 must be object, maybe because tool call malformed due to newline? Wait I passed object. It might be because JSON string contains literal newline not escaped? The tool schema requires JSON; in the message, I wrote `\n` inside string, but maybe the JSON parser in tool call accepted? It says edits.0 must be object, weird. Maybe because `newText` string includes `\n` but not escaped? In JSON, newline in string must be escaped; the UI maybe raw? Need use edit with oldText as exact block, but the oldText includes actual newlines. It can be passed in JSON with escaped newlines. I did. The tool error maybe due to malformed JSON? Let's use read snippet to get exact.

Need edit maybe use exact block. I'll use python? But instruction use edit. Need oldText exactly includes newlines. In JSON, we can include actual newlines? It should work. The prior error maybe due to not wrapping? Let's try smaller.

Again malformed. Maybe tool call JSON got parsed incorrectly because of unescaped newline? The interface displays raw? Wait I used JSON in a code block? The tool call is not valid JSON because I included unescaped newline in string? Actually in the message I used `\n` sequences but rendered as actual? It appears in error with `\n` in JSON text, so it is valid. Why says edits.0 must be object? It seems the tool call was parsed as `{"edits": "[...]"}` not array? The error message displays `edits: "["..."]"` maybe because actual value is string? Hmm maybe I accidentally put `edits` as a string due to not using JSON object? Let's look at tool call:
```
{"edits": "[
  {
...
]"
```
Actually I see in my tool call message after validation failed:
```
"edits": "[
  {
...
]"
```
Yes the outer `edits` value is a string containing the array, not an array. I must have accidentally included an extra `[`? Let's inspect the tool call I sent: It starts:
```
{"edits": "[
  {
...
```
I see I included an extra `[` before { maybe from mistake. It should be `{"edits": [` not `{"edits": "["`. The displayed error shows string. Need resend correct.

Still says edits.0 object? Wait error says "edits.0: must be object" but display has `edits: "["`? Hmm maybe tool wrapper interprets `edits` string not array. It is definitely string. I need ensure valid JSON. The tool call I typed has `{"edits": "["` due to extra [ maybe? Let's count: In the displayed error, after `"edits": "["` yes. It is a string. Why am I typing that? Looking at my previous tool call content, I see:
```
{"edits": "[
  {
...
```
I accidentally included a `[` after colon. It should be:
```
{"edits": [
  {
...
```
Let's do that.

Need re-run syntax.

Need maybe inspect around addSticker for bug: The geometry for stickers maybe all equal; no issue. But maybe material object key with numeric values; fine.
Potential issue: `stickerMaterials[color]` where color is number, object key string. `stickerMaterials[stickerColors.R]` okay.
Potential issue: UI pointer-events. `#ui pointer-events:none`, controls pointer-events auto. But topbar/hint not clickable. Good.
Potential issue: `button` inside #ui with pointer-events auto, but parent #ui pointer-events none? In CSS, pointer-events none on parent means descendants can still be target if they set pointer-events auto? For HTML, pointer-events is inherited? It is not inherited? Actually pointer-events property applies to element and descendants if set? If parent none, events pass through it, but descendants with pointer-events auto can still receive? I think yes if descendant has pointer-events auto. In CSS, pointer-events none means element not target, but descendants can be if they have pointer-events other than none. Good.
Potential issue: `#ui` flex with status at bottom. Good.
Potential issue: `#status` pointer-events none? It inherits? Since #ui none, #status not set. It might block canvas clicks over status. But status is at bottom right; could block. Need set `.status { pointer-events: none; }` maybe. Currently #ui pointer-events none applies to children? Actually if parent pointer-events none, event won't target parent, but child with auto might target? For a child, pointer-events none? If child not set, default auto, so status might block clicks over it. Better set `.status { pointer-events: none; }`. Also topbar maybe could block clicks over text, but okay? To allow clicking through instructions, set all .topbar, .status pointer-events none. Controls auto. Let's edit.

Need include unique old text.

Need maybe add topbar pointer-events none? #ui none enough, but child pointer auto? topbar default auto maybe could block. Let's set topbar pointer-events none too.

Need syntax again.

Need final response concise. Mention file created and script src. But before final maybe maybe test rendering? Could run browser? Not available. Maybe use grep? Need maybe ensure no external URL.