Sistema Solar em Pixel Art

Implemente integralmente um "site interativo de sistema solar em pixel art preto e branco" (puramente estático, executado localmente e implantável em hospedagem estática). Todos os requisitos estão listados abaixo; implemente-os conforme indicado e verifique cada item.

[1. Base técnica]
1. Site puramente estático: importmap + ESM nativo; three.js e todas as dependências fornecidos localmente; zero CDN, zero etapa de compilação, zero backend; o ponto de entrada é index.html.
2. Estratégia dupla de ativos: a geometria usa esferas integradas / malhas paramétricas do three.js; as texturas usam imagens astronômicas reais (NASA Visible Earth, mapas lunares LRO, SolarSystemScope), organizadas em três níveis de qualidade — padrão / HD 4K / ultra 8K — com um gerenciador de carregamento de texturas (cache de Promise, distinção entre espaço de cor SRGB e linear, anisotropia ≤ 8, nova tentativa em caso de falha e retorno ao nível padrão).
3. Renderizador: antialias, saída SRGB, ACESFilmicToneMapping (exposição ≈ 1.05), DPR ≤ 2 (≤ 1.5 em dispositivos móveis), plano próximo 0.002, fundo de cena preto.

[2. Conteúdo da cena (tudo em 3D em tempo real; não use imagens ou vídeos como se fossem 3D)]
1. Integrantes: o Sol + oito planetas + a Lua (em rotação síncrona, orbitando a Terra). Os planetas internos orbitam mais rápido e os externos, mais devagar; giram em taxas proporcionalmente reais e usam inclinações axiais reais (Saturno 27°, Urano 82°).
2. Sol: esfera emissiva + halo discreto; uma luz pontual para iluminação + uma luz ambiente discreta.
3. Terra: texturas duplas de dia/noite alternadas em tempo real pelo "produto escalar entre a normal e a direção do Sol" (transição do terminador), com luzes urbanas autoluminosas no lado noturno (alternância independente); uma camada separada de nuvens (1.006R, alphaMap) e uma camada atmosférica de luz de contorno Fresnel (1.025R, multiplicada por um fator de luz solar) — todas as três camadas podem ser alternadas individualmente.
4. Saturno: a esfera e os anéis compartilham o mesmo grupo de inclinação de 27°; o anel é uma malha paramétrica no plano XZ, cujas UVs mapeiam uma textura de faixa longa por raio, com duas faces, alphaTest ≈ 0.04, depthWrite = false.
5. Lua: textura de superfície lunar 8K (ofereça níveis 4K / 8K na web); a iluminação em close deve ser escurecida para um visual realista em cinza médio.
6. Fundo: pontos estelares fixos e esparsos (não uma grande textura de nebulosa).

[3. Sistema de interação]
1. Seleção de corpos: clique no catálogo / clique por raycast na cena (corpos pequenos recebem uma esfera de seleção invisível ampliada) / alternância entre anterior e próximo.
2. Câmera de foco: a câmera permanece continuamente fixada no corpo-alvo em movimento (translação sincronizada a cada quadro) e nunca é arrastada pelo movimento orbital; distância de visualização = raio delimitador / fator de preenchimento da vista (padrão 0.7, Lua 0.78, Sol 0.45 com uma borda preta); transições suaves ease-out de 850 ms que acompanham o alvo em tempo real, inclusive durante a transição; o arrasto do usuário assume o controle imediatamente (cancelando o movimento programado da câmera).
3. Predefinições de visualização: seis posições de câmera — face iluminada / terminador / região polar / borda / lado noturno / detalhe (compostas por deslocamentos de "direção em relação ao Sol × lateral × cima"; quando o alvo estiver na origem, use uma direção fixa para evitar a degeneração de vetor zero).
4. Tempo e exibição: pausar tudo, alternância independente de rotação, alternância independente de órbita, velocidade de 0–4×, alternância de linhas orbitais, alternância de rótulos, redefinir visualização; os estados de rotação/órbita devem permanecer estritamente sincronizados com a UI.

[4. UI em pixel art preto e branco (no espírito de careers.kimi.com, preto/branco/cinza puros, sem azul)]
1. Fonte monoespaçada como base; fonte pixelada para números / títulos curtos / navegação (licenciada sob OFL, hospedada localmente); uma fonte de corpo legível para texto em chinês.
2. Barra superior: logotipo SOLAR SYSTEM (texto em inglês mais o nome em chinês) à esquerda, "Visão geral / Corpos / Configurações de exibição" à direita.
3. Seletor de corpos: agrupado por estrela / planeta / lua, numeração de dois dígitos, item atual destacado (sem grandes blocos de cor), rolável.
4. Placa de identificação no canto inferior esquerdo: número (por exemplo, 05/10) + título grande (nome em chinês + inglês) + rótulo de tipo + uma linha poética + dados de diâmetro + "Ver detalhes ↗"; no modo de visão geral, exiba "tamanhos e distâncias ajustados para apresentação".
5. Barra de ferramentas inferior: pausar / rotação / órbita / velocidade / linhas orbitais / redefinir visualização (ícone + texto curto) + seletor anterior/próximo (o nome em inglês do corpo atual aparece no meio).
6. Painel de detalhes (desliza da direita): introdução, dados principais (com unidades e indicações de "aprox."), botões de foco de observação (cada um vinculado a um estado real de câmera/camada e exibindo "atual"), fontes de dados, links de leitura complementar; o painel de configurações é dividido em grupos "Visualização / Qualidade".
7. Passagem de eventos: a camada de UI em tela cheia usa pointer-events: none; somente botões / listas / painéis / barra de ferramentas usam auto; a rolagem dentro de um painel não deve se propagar para o canvas. Substitua o Sistema Solar pelo sistema de exoplanetas TRAPPIST-1: uma anã vermelha e sete planetas rochosos. Mantenha a UI em pixel art, a câmera de foco e os controles de tempo, e use os parâmetros reais do TRAPPIST-1 para cada planeta. [5. Abertura pixelada e efeitos de movimento]
1. Abertura: superfície lunar em tela cheia com dithering ordenado Bayer de 1 bit (amostragem de imagem → quantização em escala de cinza → 4 níveis de cinza → matriz 4×4); o tamanho do bloco de dithering fica gradualmente mais nítido, de 14px para 1.5px, conforme o progresso do carregamento (o próprio progresso é o indicador de carregamento), com título em fonte pixelada centralizado, máscara radial escura e botão "Começar a explorar →"; a entrada exige um clique do usuário (sem entrada automática).
2. Saída: após o clique, o título desaparece em 220 ms; então, a matriz numérica se dissolve em uma onda — uma frente de onda diagonal atravessa a tela (com perturbação por célula), os blocos de pixel encolhem e desaparecem ao longo do gradiente da onda e, após cerca de 800 ms, surge a visão geral do sistema solar.
3. Outros efeitos de movimento: ao alternar corpos, o título grande e a linha poética surgem por um efeito de embaralhamento e decodificação (cerca de 320/420 ms); os caracteres dos botões de navegação fazem uma rolagem em duas camadas (350 ms, intervalo de 30 ms por caractere, acionada tanto no hover quanto no foco); os painéis transitam com opacidade + deslocamento de 12px (cerca de 220 ms); o título do painel de detalhes é revelado por uma máscara de blocos esparsos (≤ 700 ms).
4. Em prefers-reduced-motion, tudo deve ser reduzido a alternâncias diretas.

[6. Aprimoramentos de informação]
1. Mira de observação: uma mira fina acompanha o mouse, com as coordenadas LAT/LON da superfície do planeta apontada exibidas ao vivo no canto superior direito (ocultas em telas sensíveis ao toque).
2. Cartão de prévia ao passar o mouse pelo catálogo (nome / diâmetro / distância do Sol / linha poética).
3. Controle completo por teclado: ←/→ alterna corpos, ↑/↓ aproxima/afasta, Espaço pausa, 1–0 salta diretamente, O visão geral, D detalhes, S configurações, H cartão de atalhos, Esc fecha painéis.
4. Registro de observação: o canto inferior direito mostra um registro monoespaçado rolável das últimas 3 ações.

[7. Dispositivos móveis e acessibilidade]
1. Catálogo rolável horizontalmente, com rolagem automática até o item selecionado; detalhes / configurações como painéis inferiores que podem ser fechados; alvos de toque ≥ 44px; adaptação à área segura; a barra de ferramentas e os painéis não devem se sobrepor.
2. Botões semânticos, aria-pressed / aria-selected corretos, foco visível, Escape fecha painéis e devolve o foco ao botão que os acionou, estado de carregamento anunciado por uma região dinâmica leve.

[8. Critérios de aceitação (teste cada item)]
1. A abertura pixelada fica visível ao iniciar; o clique a dissolve em uma onda até a visão geral (Sol centralizado, linhas orbitais, rótulos dos planetas).
2. Alterne por todos os dez corpos, um a um: nome / seleção no catálogo / dados permanecem sincronizados, a câmera acompanha suavemente sem perder o alvo, sem esferas pretas, sem erros de compilação de shader, sem erros 404.
3. As três alternâncias de camada da Terra mostram efeitos visíveis, os anéis de Saturno são coplanares ao seu equador, o terminador da Lua parece natural sem estourar o branco, e o Sol é um disco com borda preta (não uma superfície solar em tela cheia).
4. Verifique com capturas de tela em desktop 1440×900 e celular 390×844: sem obstrução, sem overflow; zero erros no console; totalmente utilizável com redução de movimento ativada.

Primeiro liste a ordem de implementação (cena → interação → UI → movimento → aceitação), depois entregue diretamente os arquivos executáveis. Não entregue placeholders incompletos nem invente ativos ou dados.

Implemente integralmente um "site interativo de sistema solar em pixel art preto e branco" (puramente estático, executado localmente e implantável em hospedagem estática). Todos os requisitos estão listados abaixo; implemente-os conforme indicado e verifique cada item.

[1. Base técnica]
1. Site puramente estático: importmap + ESM nativo; three.js e todas as dependências fornecidos localmente; zero CDN, zero etapa de compilação, zero backend; o ponto de entrada é index.html.
2. Estratégia dupla de ativos: a geometria usa esferas integradas / malhas paramétricas do three.js; as texturas usam imagens astronômicas reais (NASA Visible Earth, mapas lunares LRO, SolarSystemScope), organizadas em três níveis de qualidade — padrão / HD 4K / ultra 8K — com um gerenciador de carregamento de texturas (cache de Promise, distinção entre espaço de cor SRGB e linear, anisotropia ≤ 8, nova tentativa em caso de falha e retorno ao nível padrão).
3. Renderizador: antialias, saída SRGB, ACESFilmicToneMapping (exposição ≈ 1.05), DPR ≤ 2 (≤ 1.5 em dispositivos móveis), plano próximo 0.002, fundo de cena preto.

[2. Conteúdo da cena (tudo em 3D em tempo real; não use imagens ou vídeos como se fossem 3D)]
1. Integrantes: o Sol + oito planetas + a Lua (em rotação síncrona, orbitando a Terra). Os planetas internos orbitam mais rápido e os externos, mais devagar; giram em taxas proporcionalmente reais e usam inclinações axiais reais (Saturno 27°, Urano 82°).
2. Sol: esfera emissiva + halo discreto; uma luz pontual para iluminação + uma luz ambiente discreta.
3. Terra: texturas duplas de dia/noite alternadas em tempo real pelo "produto escalar entre a normal e a direção do Sol" (transição do terminador), com luzes urbanas autoluminosas no lado noturno (alternância independente); uma camada separada de nuvens (1.006R, alphaMap) e uma camada atmosférica de luz de contorno Fresnel (1.025R, multiplicada por um fator de luz solar) — todas as três camadas podem ser alternadas individualmente.
4. Saturno: a esfera e os anéis compartilham o mesmo grupo de inclinação de 27°; o anel é uma malha paramétrica no plano XZ, cujas UVs mapeiam uma textura de faixa longa por raio, com duas faces, alphaTest ≈ 0.04, depthWrite = false.
5. Lua: textura de superfície lunar 8K (ofereça níveis 4K / 8K na web); a iluminação em close deve ser escurecida para um visual realista em cinza médio.
6. Fundo: pontos estelares fixos e esparsos (não uma grande textura de nebulosa).

[3. Sistema de interação]
1. Seleção de corpos: clique no catálogo / clique por raycast na cena (corpos pequenos recebem uma esfera de seleção invisível ampliada) / alternância entre anterior e próximo.
2. Câmera de foco: a câmera permanece continuamente fixada no corpo-alvo em movimento (translação sincronizada a cada quadro) e nunca é arrastada pelo movimento orbital; distância de visualização = raio delimitador / fator de preenchimento da vista (padrão 0.7, Lua 0.78, Sol 0.45 com uma borda preta); transições suaves ease-out de 850 ms que acompanham o alvo em tempo real, inclusive durante a transição; o arrasto do usuário assume o controle imediatamente (cancelando o movimento programado da câmera).
3. Predefinições de visualização: seis posições de câmera — face iluminada / terminador / região polar / borda / lado noturno / detalhe (compostas por deslocamentos de "direção em relação ao Sol × lateral × cima"; quando o alvo estiver na origem, use uma direção fixa para evitar a degeneração de vetor zero).
4. Tempo e exibição: pausar tudo, alternância independente de rotação, alternância independente de órbita, velocidade de 0–4×, alternância de linhas orbitais, alternância de rótulos, redefinir visualização; os estados de rotação/órbita devem permanecer estritamente sincronizados com a UI.

[4. UI em pixel art preto e branco (no espírito de careers.kimi.com, preto/branco/cinza puros, sem azul)]
1. Fonte monoespaçada como base; fonte pixelada para números / títulos curtos / navegação (licenciada sob OFL, hospedada localmente); uma fonte de corpo legível para texto em chinês.
2. Barra superior: logotipo SOLAR SYSTEM (texto em inglês mais o nome em chinês) à esquerda, "Visão geral / Corpos / Configurações de exibição" à direita.
3. Seletor de corpos: agrupado por estrela / planeta / lua, numeração de dois dígitos, item atual destacado (sem grandes blocos de cor), rolável.
4. Placa de identificação no canto inferior esquerdo: número (por exemplo, 05/10) + título grande (nome em chinês + inglês) + rótulo de tipo + uma linha poética + dados de diâmetro + "Ver detalhes ↗"; no modo de visão geral, exiba "tamanhos e distâncias ajustados para apresentação".
5. Barra de ferramentas inferior: pausar / rotação / órbita / velocidade / linhas orbitais / redefinir visualização (ícone + texto curto) + seletor anterior/próximo (o nome em inglês do corpo atual aparece no meio).
6. Painel de detalhes (desliza da direita): introdução, dados principais (com unidades e indicações de "aprox."), botões de foco de observação (cada um vinculado a um estado real de câmera/camada e exibindo "atual"), fontes de dados, links de leitura complementar; o painel de configurações é dividido em grupos "Visualização / Qualidade".
7. Passagem de eventos: a camada de UI em tela cheia usa pointer-events: none; somente botões / listas / painéis / barra de ferramentas usam auto; a rolagem dentro de um painel não deve se propagar para o canvas. Adicione um modo de sala de aula com quatro capítulos — estrela, planetas rochosos, gigantes gasosos, luas. A câmera para em cada etapa, mostra três pontos-chave no estilo de quadro negro, e o professor avança cada ponto com a barra de espaço. [5. Abertura pixelada e efeitos de movimento]
1. Abertura: superfície lunar em tela cheia com dithering ordenado Bayer de 1 bit (amostragem de imagem → quantização em escala de cinza → 4 níveis de cinza → matriz 4×4); o tamanho do bloco de dithering fica gradualmente mais nítido, de 14px para 1.5px, conforme o progresso do carregamento (o próprio progresso é o indicador de carregamento), com título em fonte pixelada centralizado, máscara radial escura e botão "Começar a explorar →"; a entrada exige um clique do usuário (sem entrada automática).
2. Saída: após o clique, o título desaparece em 220 ms; então, a matriz numérica se dissolve em uma onda — uma frente de onda diagonal atravessa a tela (com perturbação por célula), os blocos de pixel encolhem e desaparecem ao longo do gradiente da onda e, após cerca de 800 ms, surge a visão geral do sistema solar.
3. Outros efeitos de movimento: ao alternar corpos, o título grande e a linha poética surgem por um efeito de embaralhamento e decodificação (cerca de 320/420 ms); os caracteres dos botões de navegação fazem uma rolagem em duas camadas (350 ms, intervalo de 30 ms por caractere, acionada tanto no hover quanto no foco); os painéis transitam com opacidade + deslocamento de 12px (cerca de 220 ms); o título do painel de detalhes é revelado por uma máscara de blocos esparsos (≤ 700 ms).
4. Em prefers-reduced-motion, tudo deve ser reduzido a alternâncias diretas.

[6. Aprimoramentos de informação]
1. Mira de observação: uma mira fina acompanha o mouse, com as coordenadas LAT/LON da superfície do planeta apontada exibidas ao vivo no canto superior direito (ocultas em telas sensíveis ao toque).
2. Cartão de prévia ao passar o mouse pelo catálogo (nome / diâmetro / distância do Sol / linha poética).
3. Controle completo por teclado: ←/→ alterna corpos, ↑/↓ aproxima/afasta, Espaço pausa, 1–0 salta diretamente, O visão geral, D detalhes, S configurações, H cartão de atalhos, Esc fecha painéis.
4. Registro de observação: o canto inferior direito mostra um registro monoespaçado rolável das últimas 3 ações.

[7. Dispositivos móveis e acessibilidade]
1. Catálogo rolável horizontalmente, com rolagem automática até o item selecionado; detalhes / configurações como painéis inferiores que podem ser fechados; alvos de toque ≥ 44px; adaptação à área segura; a barra de ferramentas e os painéis não devem se sobrepor.
2. Botões semânticos, aria-pressed / aria-selected corretos, foco visível, Escape fecha painéis e devolve o foco ao botão que os acionou, estado de carregamento anunciado por uma região dinâmica leve.

[8. Critérios de aceitação (teste cada item)]
1. A abertura pixelada fica visível ao iniciar; o clique a dissolve em uma onda até a visão geral (Sol centralizado, linhas orbitais, rótulos dos planetas).
2. Alterne por todos os dez corpos, um a um: nome / seleção no catálogo / dados permanecem sincronizados, a câmera acompanha suavemente sem perder o alvo, sem esferas pretas, sem erros de compilação de shader, sem erros 404.
3. As três alternâncias de camada da Terra mostram efeitos visíveis, os anéis de Saturno são coplanares ao seu equador, o terminador da Lua parece natural sem estourar o branco, e o Sol é um disco com borda preta (não uma superfície solar em tela cheia).
4. Verifique com capturas de tela em desktop 1440×900 e celular 390×844: sem obstrução, sem overflow; zero erros no console; totalmente utilizável com redução de movimento ativada.

Primeiro liste a ordem de implementação (cena → interação → UI → movimento → aceitação), depois entregue diretamente os arquivos executáveis. Não entregue placeholders incompletos nem invente ativos ou dados.