Pixel Solar System

Fully implement an "interactive solar system website in black-and-white pixel art style" (pure static, runs locally, deployable to static hosting). All requirements are listed below; implement them accordingly and verify each item.

[1. Technical Baseline]
1. Pure static site: importmap + native ESM; three.js and all dependencies vendored locally; zero CDN, zero build step, zero backend; entry point is index.html.
2. Dual-track asset strategy: geometry uses three.js built-in spheres / parametric meshes; textures use real astronomical imagery (NASA Visible Earth, LRO lunar maps, SolarSystemScope), organized in three quality tiers — standard / HD 4K / ultra 8K — with a texture loading manager (Promise cache, SRGB vs linear color space distinction, anisotropy ≤ 8, retry on failure and fall back to the standard tier).
3. Renderer: antialias, SRGB output, ACESFilmicToneMapping (exposure ≈ 1.05), DPR ≤ 2 (≤ 1.5 on mobile), near plane 0.002, black scene background.

[2. Scene Content (all real-time 3D; no images or videos passed off as 3D)]
1. Members: the Sun + eight planets + the Moon (tidally locked, orbiting Earth). Planets orbit faster on the inside and slower on the outside, rotate at true proportional rates, and use real axial tilts (Saturn 27°, Uranus 82°).
2. Sun: emissive sphere + faint halo; a point light for illumination + a faint ambient light.
3. Earth: day/night dual textures switched in real time by the "normal · sun direction dot product" (terminator transition), with night-side city lights self-illuminating (independent toggle); a separate cloud shell (1.006R, alphaMap) and an atmospheric Fresnel rim-light shell (1.025R, multiplied by a sunlight factor) — all three layers individually toggleable.
4. Saturn: sphere and rings share the same 27° tilt group; the ring is a parametric mesh on the XZ plane, UVs map a long-stripe texture by radius, double-sided, alphaTest ≈ 0.04, depthWrite = false.
5. Moon: 8K lunar surface texture (offer 4K / 8K tiers on web); close-up lighting must be darkened to a mid-gray realistic look.
6. Background: sparse fixed star points (not a large nebula texture).

[3. Interaction System]
1. Body selection: click in the catalog / raycast click in the scene (small bodies get an enlarged invisible pick sphere) / previous-next cycling.
2. Focus camera: the camera continuously locks onto the moving target body (synced translation every frame) and is never carried away by orbital motion; viewing distance = bounding radius / view fill factor (default 0.7, Moon 0.78, Sun 0.45 with a black rim); 850ms ease-out smooth transitions that track the target in real time even during the transition; user dragging takes over immediately (canceling the programmed camera move).
3. Viewing presets: six camera positions — lit face / terminator / polar region / limb / night side / detail (composed from "direction toward Sun × sideways × up" offsets; when the target is at the origin, use a fixed direction to avoid zero-vector degeneration).
4. Time and display: pause all, independent rotation toggle, independent orbit toggle, 0–4× speed, orbit lines toggle, label toggle, reset view; rotation/orbit states must stay strictly in sync with the UI.

[4. Black-and-White Pixel-Style UI (in the spirit of careers.kimi.com, pure black/white/gray, no blue)]
1. Monospace font as the base; pixel font for numbers / short headings / navigation (OFL-licensed, self-hosted); a clear body font for Chinese body text.
2. Top bar: SOLAR SYSTEM logo (English text plus its Chinese name) on the left, "Overview / Bodies / Display Settings" on the right.
3. Body selector: grouped by star / planet / moon, two-digit numbering, current item highlighted (no large color blocks), scrollable.
4. Bottom-left nameplate: number (e.g. 05/10) + large title (Chinese name + English) + type label + one poetic line + diameter data + "View details ↗"; in overview mode, show "sizes and distances adjusted for presentation".
5. Bottom toolbar: pause / rotation / orbit / speed / orbit lines / reset view (icon + short text) + previous/next stepper (current body's English name shown in the middle).
6. Detail panel (slides out from the right): introduction, key facts (with units and "approx." marks), observation-focus buttons (each bound to a real camera/layer state and showing "current"), data sources, further-reading links; the settings panel is split into "View / Quality" groups.
7. Event pass-through: the fullscreen UI layer uses pointer-events: none; only buttons / lists / panels / toolbar use auto; scrolling inside a panel must not propagate to the canvas. Replace the Solar System with the TRAPPIST-1 exoplanet system: one red dwarf and seven rocky planets. Keep the pixel-art UI, focus camera and time controls, and use the real TRAPPIST-1 parameters for each planet. [5. Pixelated Opening and Motion Effects]
1. Opening: a fullscreen 1-bit Bayer ordered-dithered lunar surface (image sampling → grayscale quantization → 4 gray levels → 4×4 matrix); the dither block size smoothly sharpens from 14px to 1.5px with loading progress (the progress itself is the loading indicator), with a pixel-font title centered, a dark radial mask, and a "Start Exploring →" button; entry requires a user click (no auto-entry).
2. Exit: after the click, the title fades out over 220ms, then the number matrix dissolves in a wave — a diagonal wavefront sweeps across (with per-cell perturbation), pixel blocks shrink and fade along the wave gradient, and after about 800ms the solar system overview appears.
3. Other motion effects: when switching bodies, the large title and poetic line land via a scramble-decode effect (about 320/420ms); navigation button characters do a two-layer roll (350ms, 30ms stagger per character, triggered on both hover and focus); panels transition with opacity + 12px offset (about 220ms); the detail panel title reveals through a sparse block mask (≤ 700ms).
4. Under prefers-reduced-motion, everything degrades to direct switching.

[6. Information Enhancements]
1. Observation crosshair: a thin crosshair follows the mouse, with the LAT/LON coordinates of the pointed-at planet surface shown live at the top right (hidden on touchscreens).
2. Catalog hover preview card (name / diameter / distance from Sun / poetic line).
3. Full keyboard control: ←/→ switch bodies, ↑/↓ dolly, Space pause, 1–0 jump directly, O overview, D details, S settings, H shortcut card, Esc close panels.
4. Observation log: the bottom-right corner shows a scrolling monospace record of the last 3 actions.

[7. Mobile and Accessibility]
1. Horizontally scrollable catalog with the selected item auto-scrolled into view; details / settings as closable bottom sheets; touch targets ≥ 44px; safe-area adaptation; toolbar and panels must not overlap each other.
2. Semantic buttons, correct aria-pressed / aria-selected, visible focus, Escape closes panels and returns focus to the triggering button, loading state announced via a lightweight live region.

[8. Acceptance Criteria (test each item)]
1. The pixel opening is visible on launch; clicking dissolves it in a wave into the overview (Sun centered, orbit lines, planet labels).
2. Switch through all ten bodies one by one: name / catalog selection / data stay in sync, the camera tracks smoothly without losing the target, no black spheres, no shader compile errors, no 404s.
3. Earth's three layer toggles show visible effects, Saturn's rings are coplanar with its equator, the Moon's terminator looks natural without washing out white, and the Sun is a disk with a black rim (not a fullscreen sun surface).
4. Verify with screenshots at desktop 1440×900 and phone 390×844: no occlusion, no overflow; zero console errors; fully usable with reduced-motion enabled.

First list the implementation order (scene → interaction → UI → motion → acceptance), then deliver runnable files directly. Do not deliver half-finished placeholders, and do not fabricate assets or data.

Fully implement an "interactive solar system website in black-and-white pixel art style" (pure static, runs locally, deployable to static hosting). All requirements are listed below; implement them accordingly and verify each item.

[1. Technical Baseline]
1. Pure static site: importmap + native ESM; three.js and all dependencies vendored locally; zero CDN, zero build step, zero backend; entry point is index.html.
2. Dual-track asset strategy: geometry uses three.js built-in spheres / parametric meshes; textures use real astronomical imagery (NASA Visible Earth, LRO lunar maps, SolarSystemScope), organized in three quality tiers — standard / HD 4K / ultra 8K — with a texture loading manager (Promise cache, SRGB vs linear color space distinction, anisotropy ≤ 8, retry on failure and fall back to the standard tier).
3. Renderer: antialias, SRGB output, ACESFilmicToneMapping (exposure ≈ 1.05), DPR ≤ 2 (≤ 1.5 on mobile), near plane 0.002, black scene background.

[2. Scene Content (all real-time 3D; no images or videos passed off as 3D)]
1. Members: the Sun + eight planets + the Moon (tidally locked, orbiting Earth). Planets orbit faster on the inside and slower on the outside, rotate at true proportional rates, and use real axial tilts (Saturn 27°, Uranus 82°).
2. Sun: emissive sphere + faint halo; a point light for illumination + a faint ambient light.
3. Earth: day/night dual textures switched in real time by the "normal · sun direction dot product" (terminator transition), with night-side city lights self-illuminating (independent toggle); a separate cloud shell (1.006R, alphaMap) and an atmospheric Fresnel rim-light shell (1.025R, multiplied by a sunlight factor) — all three layers individually toggleable.
4. Saturn: sphere and rings share the same 27° tilt group; the ring is a parametric mesh on the XZ plane, UVs map a long-stripe texture by radius, double-sided, alphaTest ≈ 0.04, depthWrite = false.
5. Moon: 8K lunar surface texture (offer 4K / 8K tiers on web); close-up lighting must be darkened to a mid-gray realistic look.
6. Background: sparse fixed star points (not a large nebula texture).

[3. Interaction System]
1. Body selection: click in the catalog / raycast click in the scene (small bodies get an enlarged invisible pick sphere) / previous-next cycling.
2. Focus camera: the camera continuously locks onto the moving target body (synced translation every frame) and is never carried away by orbital motion; viewing distance = bounding radius / view fill factor (default 0.7, Moon 0.78, Sun 0.45 with a black rim); 850ms ease-out smooth transitions that track the target in real time even during the transition; user dragging takes over immediately (canceling the programmed camera move).
3. Viewing presets: six camera positions — lit face / terminator / polar region / limb / night side / detail (composed from "direction toward Sun × sideways × up" offsets; when the target is at the origin, use a fixed direction to avoid zero-vector degeneration).
4. Time and display: pause all, independent rotation toggle, independent orbit toggle, 0–4× speed, orbit lines toggle, label toggle, reset view; rotation/orbit states must stay strictly in sync with the UI.

[4. Black-and-White Pixel-Style UI (in the spirit of careers.kimi.com, pure black/white/gray, no blue)]
1. Monospace font as the base; pixel font for numbers / short headings / navigation (OFL-licensed, self-hosted); a clear body font for Chinese body text.
2. Top bar: SOLAR SYSTEM logo (English text plus its Chinese name) on the left, "Overview / Bodies / Display Settings" on the right.
3. Body selector: grouped by star / planet / moon, two-digit numbering, current item highlighted (no large color blocks), scrollable.
4. Bottom-left nameplate: number (e.g. 05/10) + large title (Chinese name + English) + type label + one poetic line + diameter data + "View details ↗"; in overview mode, show "sizes and distances adjusted for presentation".
5. Bottom toolbar: pause / rotation / orbit / speed / orbit lines / reset view (icon + short text) + previous/next stepper (current body's English name shown in the middle).
6. Detail panel (slides out from the right): introduction, key facts (with units and "approx." marks), observation-focus buttons (each bound to a real camera/layer state and showing "current"), data sources, further-reading links; the settings panel is split into "View / Quality" groups.
7. Event pass-through: the fullscreen UI layer uses pointer-events: none; only buttons / lists / panels / toolbar use auto; scrolling inside a panel must not propagate to the canvas. Add a classroom mode with four chapters — star, rocky planets, gas giants, moons. The camera stops at each stage, shows three blackboard-style key points, and the teacher advances each point with the space bar. [5. Pixelated Opening and Motion Effects]
1. Opening: a fullscreen 1-bit Bayer ordered-dithered lunar surface (image sampling → grayscale quantization → 4 gray levels → 4×4 matrix); the dither block size smoothly sharpens from 14px to 1.5px with loading progress (the progress itself is the loading indicator), with a pixel-font title centered, a dark radial mask, and a "Start Exploring →" button; entry requires a user click (no auto-entry).
2. Exit: after the click, the title fades out over 220ms, then the number matrix dissolves in a wave — a diagonal wavefront sweeps across (with per-cell perturbation), pixel blocks shrink and fade along the wave gradient, and after about 800ms the solar system overview appears.
3. Other motion effects: when switching bodies, the large title and poetic line land via a scramble-decode effect (about 320/420ms); navigation button characters do a two-layer roll (350ms, 30ms stagger per character, triggered on both hover and focus); panels transition with opacity + 12px offset (about 220ms); the detail panel title reveals through a sparse block mask (≤ 700ms).
4. Under prefers-reduced-motion, everything degrades to direct switching.

[6. Information Enhancements]
1. Observation crosshair: a thin crosshair follows the mouse, with the LAT/LON coordinates of the pointed-at planet surface shown live at the top right (hidden on touchscreens).
2. Catalog hover preview card (name / diameter / distance from Sun / poetic line).
3. Full keyboard control: ←/→ switch bodies, ↑/↓ dolly, Space pause, 1–0 jump directly, O overview, D details, S settings, H shortcut card, Esc close panels.
4. Observation log: the bottom-right corner shows a scrolling monospace record of the last 3 actions.

[7. Mobile and Accessibility]
1. Horizontally scrollable catalog with the selected item auto-scrolled into view; details / settings as closable bottom sheets; touch targets ≥ 44px; safe-area adaptation; toolbar and panels must not overlap each other.
2. Semantic buttons, correct aria-pressed / aria-selected, visible focus, Escape closes panels and returns focus to the triggering button, loading state announced via a lightweight live region.

[8. Acceptance Criteria (test each item)]
1. The pixel opening is visible on launch; clicking dissolves it in a wave into the overview (Sun centered, orbit lines, planet labels).
2. Switch through all ten bodies one by one: name / catalog selection / data stay in sync, the camera tracks smoothly without losing the target, no black spheres, no shader compile errors, no 404s.
3. Earth's three layer toggles show visible effects, Saturn's rings are coplanar with its equator, the Moon's terminator looks natural without washing out white, and the Sun is a disk with a black rim (not a fullscreen sun surface).
4. Verify with screenshots at desktop 1440×900 and phone 390×844: no occlusion, no overflow; zero console errors; fully usable with reduced-motion enabled.

First list the implementation order (scene → interaction → UI → motion → acceptance), then deliver runnable files directly. Do not deliver half-finished placeholders, and do not fabricate assets or data.