Sistema solar en píxeles

Implementa por completo un "sitio web interactivo del sistema solar con estilo pixel art en blanco y negro" (puramente estático, funciona de forma local y puede desplegarse en hosting estático). Todos los requisitos se enumeran a continuación; impleméntalos y verifica cada punto.

[1. Base técnica]
1. Sitio puramente estático: importmap + ESM nativo; three.js y todas las dependencias incluidas localmente; cero CDN, cero paso de compilación, cero backend; el punto de entrada es index.html.
2. Estrategia de recursos de doble vía: la geometría usa esferas integradas / mallas paramétricas de three.js; las texturas usan imágenes astronómicas reales (NASA Visible Earth, mapas lunares LRO, SolarSystemScope), organizadas en tres niveles de calidad — estándar / HD 4K / ultra 8K — con un gestor de carga de texturas (caché de Promise, distinción entre espacio de color SRGB y lineal, anisotropía ≤ 8, reintento ante fallos y retorno al nivel estándar).
3. Renderizador: antialias, salida SRGB, ACESFilmicToneMapping (exposición ≈ 1.05), DPR ≤ 2 (≤ 1.5 en dispositivos móviles), plano cercano 0.002, fondo de escena negro.

[2. Contenido de la escena (todo en 3D en tiempo real; no presentar imágenes ni videos como si fueran 3D)]
1. Elementos: el Sol + ocho planetas + la Luna (anclada por marea y en órbita alrededor de la Tierra). Los planetas interiores orbitan más rápido y los exteriores más lento, rotan a velocidades proporcionales reales y usan inclinaciones axiales reales (Saturno 27°, Urano 82°).
2. Sol: esfera emisiva + halo tenue; una luz puntual para iluminación + una luz ambiental tenue.
3. Tierra: texturas duales de día/noche intercambiadas en tiempo real mediante el "producto punto entre la normal y la dirección del Sol" (transición del terminador), con luces nocturnas de ciudades autoiluminadas (interruptor independiente); una capa de nubes separada (1.006R, alphaMap) y una capa atmosférica de luz de borde Fresnel (1.025R, multiplicada por un factor de luz solar), con las tres capas activables individualmente.
4. Saturno: la esfera y los anillos comparten el mismo grupo de inclinación de 27°; el anillo es una malla paramétrica en el plano XZ, las UV asignan una textura de franjas largas por radio, doble cara, alphaTest ≈ 0.04, depthWrite = false.
5. Luna: textura de superficie lunar en 8K (ofrece niveles 4K / 8K en la web); la iluminación en primeros planos debe oscurecerse para lograr un aspecto realista de gris medio.
6. Fondo: puntos estelares fijos y dispersos (no una gran textura de nebulosa).

[3. Sistema de interacción]
1. Selección de cuerpos: clic en el catálogo / clic mediante raycast en la escena (los cuerpos pequeños tienen una esfera de selección invisible ampliada) / navegación anterior-siguiente.
2. Cámara de enfoque: la cámara se fija continuamente al cuerpo objetivo en movimiento (traslación sincronizada en cada fotograma) y nunca es arrastrada por el movimiento orbital; distancia de visualización = radio delimitador / factor de llenado de vista (predeterminado 0.7, Luna 0.78, Sol 0.45 con borde negro); transiciones suaves ease-out de 850ms que siguen el objetivo en tiempo real incluso durante la transición; el arrastre del usuario toma el control de inmediato (cancela el movimiento programado de la cámara).
3. Preajustes de vista: seis posiciones de cámara — cara iluminada / terminador / región polar / borde / lado nocturno / detalle (compuestas a partir de desplazamientos de "dirección hacia el Sol × lateral × arriba"; cuando el objetivo está en el origen, usa una dirección fija para evitar la degeneración de vector cero).
4. Tiempo y visualización: pausar todo, interruptor independiente de rotación, interruptor independiente de órbita, velocidad de 0–4×, interruptor de líneas orbitales, interruptor de etiquetas, restablecer vista; los estados de rotación/órbita deben mantenerse estrictamente sincronizados con la UI.

[4. UI en pixel art en blanco y negro (con el espíritu de careers.kimi.com, negro/blanco/gris puros, sin azul)]
1. Fuente monoespaciada como base; fuente de píxeles para números / encabezados cortos / navegación (con licencia OFL, alojada localmente); una fuente clara para el texto chino del cuerpo.
2. Barra superior: logotipo SOLAR SYSTEM (texto en inglés más su nombre en chino) a la izquierda, "Vista general / Cuerpos / Ajustes de visualización" a la derecha.
3. Selector de cuerpos: agrupado por estrella / planeta / luna, numeración de dos dígitos, elemento actual resaltado (sin grandes bloques de color), desplazable.
4. Placa inferior izquierda: número (p. ej., 05/10) + título grande (nombre en chino + inglés) + etiqueta de tipo + una línea poética + datos de diámetro + "Ver detalles ↗"; en el modo de vista general, mostrar "tamaños y distancias ajustados para la presentación".
5. Barra de herramientas inferior: pausar / rotación / órbita / velocidad / líneas orbitales / restablecer vista (ícono + texto corto) + control anterior/siguiente (el nombre en inglés del cuerpo actual se muestra en el centro).
6. Panel de detalles (se desliza desde la derecha): introducción, datos clave (con unidades y marcas de "aprox."), botones de enfoque de observación (cada uno vinculado a un estado real de cámara/capa y mostrando "actual"), fuentes de datos, enlaces de lectura adicional; el panel de ajustes se divide en grupos de "Vista / Calidad".
7. Paso de eventos: la capa de UI a pantalla completa usa pointer-events: none; solo botones / listas / paneles / barra de herramientas usan auto; el desplazamiento dentro de un panel no debe propagarse al lienzo. Reemplaza el sistema solar por el sistema de exoplanetas TRAPPIST-1: una enana roja y siete planetas rocosos. Conserva la UI en pixel art, la cámara de enfoque y los controles de tiempo, y usa los parámetros reales de TRAPPIST-1 para cada planeta. [5. Apertura pixelada y efectos de movimiento]
1. Apertura: una superficie lunar a pantalla completa con tramado ordenado Bayer de 1 bit (muestreo de imagen → cuantización en escala de grises → 4 niveles de gris → matriz 4×4); el tamaño del bloque de tramado se afina suavemente de 14px a 1.5px según el progreso de carga (el propio progreso es el indicador de carga), con un título en fuente de píxeles centrado, una máscara radial oscura y un botón "Comenzar a explorar →"; la entrada requiere un clic del usuario (sin entrada automática).
2. Salida: después del clic, el título se desvanece durante 220ms; luego la matriz numérica se disuelve en una onda — un frente de onda diagonal la recorre (con perturbación por celda), los bloques de píxeles se encogen y se desvanecen a lo largo del gradiente de la onda y, tras unos 800ms, aparece la vista general del sistema solar.
3. Otros efectos de movimiento: al cambiar de cuerpo, el título grande y la línea poética aparecen mediante un efecto de descifrado aleatorio (unos 320/420ms); los caracteres de los botones de navegación hacen un desplazamiento de dos capas (350ms, desfase de 30ms por carácter, activado tanto al pasar el cursor como al enfocar); los paneles transicionan con opacidad + desplazamiento de 12px (unos 220ms); el título del panel de detalles se revela mediante una máscara de bloques dispersos (≤ 700ms).
4. Con prefers-reduced-motion, todo se reduce a cambios directos.

[6. Mejoras de información]
1. Retícula de observación: una retícula delgada sigue el mouse, con las coordenadas LAT/LON de la superficie del planeta señalada mostradas en vivo en la parte superior derecha (oculta en pantallas táctiles).
2. Tarjeta de vista previa al pasar el cursor por el catálogo (nombre / diámetro / distancia del Sol / línea poética).
3. Control completo por teclado: ←/→ cambia cuerpos, ↑/↓ acerca/aleja, Espacio pausa, 1–0 salta directamente, O vista general, D detalles, S ajustes, H tarjeta de atajos, Esc cierra paneles.
4. Registro de observación: la esquina inferior derecha muestra un registro monoespaciado desplazable de las últimas 3 acciones.

[7. Móvil y accesibilidad]
1. Catálogo con desplazamiento horizontal y el elemento seleccionado desplazado automáticamente a la vista; detalles / ajustes como hojas inferiores cerrables; objetivos táctiles ≥ 44px; adaptación a áreas seguras; la barra de herramientas y los paneles no deben superponerse.
2. Botones semánticos, aria-pressed / aria-selected correctos, foco visible, Escape cierra paneles y devuelve el foco al botón que los activó, estado de carga anunciado mediante una región en vivo ligera.

[8. Criterios de aceptación (prueba cada punto)]
1. La apertura pixelada es visible al iniciar; al hacer clic, se disuelve en una onda hacia la vista general (Sol centrado, líneas orbitales, etiquetas de planetas).
2. Recorre los diez cuerpos uno por uno: el nombre / la selección del catálogo / los datos permanecen sincronizados, la cámara sigue suavemente sin perder el objetivo, sin esferas negras, sin errores de compilación de shaders ni errores 404.
3. Los tres interruptores de capa de la Tierra muestran efectos visibles, los anillos de Saturno son coplanares con su ecuador, el terminador de la Luna se ve natural sin quedar blanco lavado y el Sol es un disco con borde negro (no una superficie solar a pantalla completa).
4. Verifica con capturas de pantalla en escritorio 1440×900 y teléfono 390×844: sin oclusiones ni desbordamientos; cero errores en la consola; completamente utilizable con movimiento reducido activado.

Primero enumera el orden de implementación (escena → interacción → UI → movimiento → aceptación), y luego entrega directamente los archivos ejecutables. No entregues marcadores de posición a medio terminar ni inventes recursos o datos.

Implementa por completo un "sitio web interactivo del sistema solar con estilo pixel art en blanco y negro" (puramente estático, funciona de forma local y puede desplegarse en hosting estático). Todos los requisitos se enumeran a continuación; impleméntalos y verifica cada punto.

[1. Base técnica]
1. Sitio puramente estático: importmap + ESM nativo; three.js y todas las dependencias incluidas localmente; cero CDN, cero paso de compilación, cero backend; el punto de entrada es index.html.
2. Estrategia de recursos de doble vía: la geometría usa esferas integradas / mallas paramétricas de three.js; las texturas usan imágenes astronómicas reales (NASA Visible Earth, mapas lunares LRO, SolarSystemScope), organizadas en tres niveles de calidad — estándar / HD 4K / ultra 8K — con un gestor de carga de texturas (caché de Promise, distinción entre espacio de color SRGB y lineal, anisotropía ≤ 8, reintento ante fallos y retorno al nivel estándar).
3. Renderizador: antialias, salida SRGB, ACESFilmicToneMapping (exposición ≈ 1.05), DPR ≤ 2 (≤ 1.5 en dispositivos móviles), plano cercano 0.002, fondo de escena negro.

[2. Contenido de la escena (todo en 3D en tiempo real; no presentar imágenes ni videos como si fueran 3D)]
1. Elementos: el Sol + ocho planetas + la Luna (anclada por marea y en órbita alrededor de la Tierra). Los planetas interiores orbitan más rápido y los exteriores más lento, rotan a velocidades proporcionales reales y usan inclinaciones axiales reales (Saturno 27°, Urano 82°).
2. Sol: esfera emisiva + halo tenue; una luz puntual para iluminación + una luz ambiental tenue.
3. Tierra: texturas duales de día/noche intercambiadas en tiempo real mediante el "producto punto entre la normal y la dirección del Sol" (transición del terminador), con luces nocturnas de ciudades autoiluminadas (interruptor independiente); una capa de nubes separada (1.006R, alphaMap) y una capa atmosférica de luz de borde Fresnel (1.025R, multiplicada por un factor de luz solar), con las tres capas activables individualmente.
4. Saturno: la esfera y los anillos comparten el mismo grupo de inclinación de 27°; el anillo es una malla paramétrica en el plano XZ, las UV asignan una textura de franjas largas por radio, doble cara, alphaTest ≈ 0.04, depthWrite = false.
5. Luna: textura de superficie lunar en 8K (ofrece niveles 4K / 8K en la web); la iluminación en primeros planos debe oscurecerse para lograr un aspecto realista de gris medio.
6. Fondo: puntos estelares fijos y dispersos (no una gran textura de nebulosa).

[3. Sistema de interacción]
1. Selección de cuerpos: clic en el catálogo / clic mediante raycast en la escena (los cuerpos pequeños tienen una esfera de selección invisible ampliada) / navegación anterior-siguiente.
2. Cámara de enfoque: la cámara se fija continuamente al cuerpo objetivo en movimiento (traslación sincronizada en cada fotograma) y nunca es arrastrada por el movimiento orbital; distancia de visualización = radio delimitador / factor de llenado de vista (predeterminado 0.7, Luna 0.78, Sol 0.45 con borde negro); transiciones suaves ease-out de 850ms que siguen el objetivo en tiempo real incluso durante la transición; el arrastre del usuario toma el control de inmediato (cancela el movimiento programado de la cámara).
3. Preajustes de vista: seis posiciones de cámara — cara iluminada / terminador / región polar / borde / lado nocturno / detalle (compuestas a partir de desplazamientos de "dirección hacia el Sol × lateral × arriba"; cuando el objetivo está en el origen, usa una dirección fija para evitar la degeneración de vector cero).
4. Tiempo y visualización: pausar todo, interruptor independiente de rotación, interruptor independiente de órbita, velocidad de 0–4×, interruptor de líneas orbitales, interruptor de etiquetas, restablecer vista; los estados de rotación/órbita deben mantenerse estrictamente sincronizados con la UI.

[4. UI en pixel art en blanco y negro (con el espíritu de careers.kimi.com, negro/blanco/gris puros, sin azul)]
1. Fuente monoespaciada como base; fuente de píxeles para números / encabezados cortos / navegación (con licencia OFL, alojada localmente); una fuente clara para el texto chino del cuerpo.
2. Barra superior: logotipo SOLAR SYSTEM (texto en inglés más su nombre en chino) a la izquierda, "Vista general / Cuerpos / Ajustes de visualización" a la derecha.
3. Selector de cuerpos: agrupado por estrella / planeta / luna, numeración de dos dígitos, elemento actual resaltado (sin grandes bloques de color), desplazable.
4. Placa inferior izquierda: número (p. ej., 05/10) + título grande (nombre en chino + inglés) + etiqueta de tipo + una línea poética + datos de diámetro + "Ver detalles ↗"; en el modo de vista general, mostrar "tamaños y distancias ajustados para la presentación".
5. Barra de herramientas inferior: pausar / rotación / órbita / velocidad / líneas orbitales / restablecer vista (ícono + texto corto) + control anterior/siguiente (el nombre en inglés del cuerpo actual se muestra en el centro).
6. Panel de detalles (se desliza desde la derecha): introducción, datos clave (con unidades y marcas de "aprox."), botones de enfoque de observación (cada uno vinculado a un estado real de cámara/capa y mostrando "actual"), fuentes de datos, enlaces de lectura adicional; el panel de ajustes se divide en grupos de "Vista / Calidad".
7. Paso de eventos: la capa de UI a pantalla completa usa pointer-events: none; solo botones / listas / paneles / barra de herramientas usan auto; el desplazamiento dentro de un panel no debe propagarse al lienzo. Agrega un modo de aula con cuatro capítulos — estrella, planetas rocosos, gigantes gaseosos, lunas. La cámara se detiene en cada etapa, muestra tres puntos clave estilo pizarrón y el docente avanza cada punto con la barra espaciadora. [5. Apertura pixelada y efectos de movimiento]
1. Apertura: una superficie lunar a pantalla completa con tramado ordenado Bayer de 1 bit (muestreo de imagen → cuantización en escala de grises → 4 niveles de gris → matriz 4×4); el tamaño del bloque de tramado se afina suavemente de 14px a 1.5px según el progreso de carga (el propio progreso es el indicador de carga), con un título en fuente de píxeles centrado, una máscara radial oscura y un botón "Comenzar a explorar →"; la entrada requiere un clic del usuario (sin entrada automática).
2. Salida: después del clic, el título se desvanece durante 220ms; luego la matriz numérica se disuelve en una onda — un frente de onda diagonal la recorre (con perturbación por celda), los bloques de píxeles se encogen y se desvanecen a lo largo del gradiente de la onda y, tras unos 800ms, aparece la vista general del sistema solar.
3. Otros efectos de movimiento: al cambiar de cuerpo, el título grande y la línea poética aparecen mediante un efecto de descifrado aleatorio (unos 320/420ms); los caracteres de los botones de navegación hacen un desplazamiento de dos capas (350ms, desfase de 30ms por carácter, activado tanto al pasar el cursor como al enfocar); los paneles transicionan con opacidad + desplazamiento de 12px (unos 220ms); el título del panel de detalles se revela mediante una máscara de bloques dispersos (≤ 700ms).
4. Con prefers-reduced-motion, todo se reduce a cambios directos.

[6. Mejoras de información]
1. Retícula de observación: una retícula delgada sigue el mouse, con las coordenadas LAT/LON de la superficie del planeta señalada mostradas en vivo en la parte superior derecha (oculta en pantallas táctiles).
2. Tarjeta de vista previa al pasar el cursor por el catálogo (nombre / diámetro / distancia del Sol / línea poética).
3. Control completo por teclado: ←/→ cambia cuerpos, ↑/↓ acerca/aleja, Espacio pausa, 1–0 salta directamente, O vista general, D detalles, S ajustes, H tarjeta de atajos, Esc cierra paneles.
4. Registro de observación: la esquina inferior derecha muestra un registro monoespaciado desplazable de las últimas 3 acciones.

[7. Móvil y accesibilidad]
1. Catálogo con desplazamiento horizontal y el elemento seleccionado desplazado automáticamente a la vista; detalles / ajustes como hojas inferiores cerrables; objetivos táctiles ≥ 44px; adaptación a áreas seguras; la barra de herramientas y los paneles no deben superponerse.
2. Botones semánticos, aria-pressed / aria-selected correctos, foco visible, Escape cierra paneles y devuelve el foco al botón que los activó, estado de carga anunciado mediante una región en vivo ligera.

[8. Criterios de aceptación (prueba cada punto)]
1. La apertura pixelada es visible al iniciar; al hacer clic, se disuelve en una onda hacia la vista general (Sol centrado, líneas orbitales, etiquetas de planetas).
2. Recorre los diez cuerpos uno por uno: el nombre / la selección del catálogo / los datos permanecen sincronizados, la cámara sigue suavemente sin perder el objetivo, sin esferas negras, sin errores de compilación de shaders ni errores 404.
3. Los tres interruptores de capa de la Tierra muestran efectos visibles, los anillos de Saturno son coplanares con su ecuador, el terminador de la Luna se ve natural sin quedar blanco lavado y el Sol es un disco con borde negro (no una superficie solar a pantalla completa).
4. Verifica con capturas de pantalla en escritorio 1440×900 y teléfono 390×844: sin oclusiones ni desbordamientos; cero errores en la consola; completamente utilizable con movimiento reducido activado.

Primero enumera el orden de implementación (escena → interacción → UI → movimiento → aceptación), y luego entrega directamente los archivos ejecutables. No entregues marcadores de posición a medio terminar ni inventes recursos o datos.