Sistema solare pixel

Implementa completamente un "sito web interattivo del sistema solare in stile pixel art bianco e nero" (puramente statico, eseguibile in locale e distribuibile su hosting statico). Tutti i requisiti sono elencati di seguito: implementali e verifica ogni punto.

[1. Base tecnica]
1. Sito puramente statico: importmap + ESM nativo; three.js e tutte le dipendenze incluse localmente; nessun CDN, nessuna fase di build, nessun backend; punto di ingresso index.html.
2. Strategia delle risorse su due binari: la geometria usa sfere integrate di three.js / mesh parametriche; le texture usano immagini astronomiche reali (NASA Visible Earth, mappe lunari LRO, SolarSystemScope), organizzate in tre livelli di qualità — standard / HD 4K / ultra 8K — con un gestore di caricamento delle texture (cache Promise, distinzione tra spazio colore SRGB e lineare, anisotropia ≤ 8, nuovo tentativo in caso di errore e fallback al livello standard).
3. Renderer: antialias, output SRGB, ACESFilmicToneMapping (esposizione ≈ 1.05), DPR ≤ 2 (≤ 1.5 su dispositivi mobili), piano near 0.002, sfondo della scena nero.

[2. Contenuto della scena (tutto in 3D in tempo reale; nessuna immagine o video spacciati per 3D)]
1. Corpi: il Sole + otto pianeti + la Luna (in rotazione sincrona, in orbita attorno alla Terra). I pianeti interni orbitano più velocemente e quelli esterni più lentamente, ruotano a velocità proporzionali reali e usano inclinazioni assiali reali (Saturno 27°, Urano 82°).
2. Sole: sfera emissiva + debole alone; una luce puntiforme per l'illuminazione + una debole luce ambientale.
3. Terra: doppie texture diurne/notturne commutate in tempo reale tramite il "prodotto scalare tra normale e direzione del Sole" (transizione del terminatore), con luci urbane sul lato notturno autoilluminate (interruttore indipendente); un guscio di nubi separato (1.006R, alphaMap) e un guscio atmosferico con luce di contorno Fresnel (1.025R, moltiplicato per un fattore di luce solare) — tutti e tre i livelli attivabili singolarmente.
4. Saturno: sfera e anelli condividono lo stesso gruppo con inclinazione di 27°; l'anello è una mesh parametrica sul piano XZ, le UV mappano una texture a strisce lunghe in base al raggio, doppia faccia, alphaTest ≈ 0.04, depthWrite = false.
5. Luna: texture della superficie lunare 8K (offri livelli 4K / 8K sul web); l'illuminazione ravvicinata deve essere scurita per un aspetto realistico grigio medio.
6. Sfondo: punti stellari fissi e radi (non una grande texture di nebulosa).

[3. Sistema di interazione]
1. Selezione dei corpi: clic nel catalogo / clic con raycast nella scena (i corpi piccoli ricevono una sfera di selezione invisibile ingrandita) / scorrimento precedente-successivo.
2. Telecamera di focalizzazione: la telecamera rimane continuamente agganciata al corpo bersaglio in movimento (traslazione sincronizzata a ogni frame) e non viene mai trascinata dal moto orbitale; distanza di visualizzazione = raggio di ingombro / fattore di riempimento della vista (predefinito 0.7, Luna 0.78, Sole 0.45 con bordo nero); transizioni fluide ease-out di 850 ms che seguono il bersaglio in tempo reale anche durante la transizione; il trascinamento dell'utente subentra immediatamente (annullando il movimento programmato della telecamera).
3. Preimpostazioni di visualizzazione: sei posizioni della telecamera — faccia illuminata / terminatore / regione polare / bordo / lato notturno / dettaglio (composte da offset di "direzione verso il Sole × laterale × alto"; quando il bersaglio è all'origine, usa una direzione fissa per evitare la degenerazione del vettore zero).
4. Tempo e visualizzazione: pausa generale, interruttore di rotazione indipendente, interruttore di orbita indipendente, velocità 0–4×, interruttore delle linee orbitali, interruttore delle etichette, ripristino della vista; gli stati di rotazione/orbita devono restare rigorosamente sincronizzati con l'interfaccia.

[4. Interfaccia in pixel art bianco e nero (nello spirito di careers.kimi.com, solo nero/bianco/grigio, niente blu)]
1. Font monospaziato come base; font pixel per numeri / titoli brevi / navigazione (con licenza OFL, ospitato localmente); font leggibile per il testo cinese.
2. Barra superiore: logo SOLAR SYSTEM (testo inglese più nome cinese) a sinistra, "Panoramica / Corpi / Impostazioni di visualizzazione" a destra.
3. Selettore dei corpi: raggruppato per stella / pianeta / luna, numerazione a due cifre, elemento corrente evidenziato (senza grandi blocchi di colore), scorrevole.
4. Targhetta in basso a sinistra: numero (ad es. 05/10) + titolo grande (nome cinese + inglese) + etichetta del tipo + una riga poetica + dati sul diametro + "Visualizza dettagli ↗"; nella modalità panoramica mostra "dimensioni e distanze adattate per la presentazione".
5. Barra degli strumenti inferiore: pausa / rotazione / orbita / velocità / linee orbitali / ripristino vista (icona + testo breve) + selettore precedente/successivo (al centro è mostrato il nome inglese del corpo corrente).
6. Pannello dei dettagli (si apre da destra): introduzione, dati principali (con unità e indicazioni "circa"), pulsanti di messa a fuoco dell'osservazione (ciascuno associato a uno stato reale di telecamera/livello e con indicazione "corrente"), fonti dei dati, link di approfondimento; il pannello delle impostazioni è diviso in gruppi "Vista / Qualità".
7. Passaggio degli eventi: il livello dell'interfaccia a schermo intero usa pointer-events: none; solo pulsanti / liste / pannelli / barra degli strumenti usano auto; lo scorrimento all'interno di un pannello non deve propagarsi al canvas. Sostituisci il Sistema Solare con il sistema di esopianeti TRAPPIST-1: una nana rossa e sette pianeti rocciosi. Mantieni l'interfaccia in pixel art, la telecamera di focalizzazione e i controlli temporali e usa i parametri reali di TRAPPIST-1 per ogni pianeta. [5. Apertura pixelata ed effetti di movimento]
1. Apertura: una superficie lunare Bayer a dithering ordinato a 1 bit a schermo intero (campionamento dell'immagine → quantizzazione in scala di grigi → 4 livelli di grigio → matrice 4×4); la dimensione del blocco di dithering si definisce gradualmente da 14px a 1.5px con il progresso di caricamento (il progresso stesso è l'indicatore di caricamento), con titolo in font pixel centrato, maschera radiale scura e pulsante "Inizia l'esplorazione →"; l'accesso richiede un clic dell'utente (nessun accesso automatico).
2. Uscita: dopo il clic, il titolo svanisce in 220 ms, poi la matrice numerica si dissolve a ondate — un fronte d'onda diagonale attraversa lo schermo (con perturbazione per cella), i blocchi pixel si restringono e svaniscono lungo il gradiente dell'onda e, dopo circa 800 ms, appare la panoramica del sistema solare.
3. Altri effetti di movimento: quando si cambia corpo, il titolo grande e la riga poetica si compongono con un effetto di decodifica scramble (circa 320/420 ms); i caratteri dei pulsanti di navigazione eseguono uno scorrimento a due livelli (350 ms, sfalsamento di 30 ms per carattere, attivato sia al passaggio del mouse sia al focus); i pannelli effettuano una transizione con opacità + offset di 12px (circa 220 ms); il titolo del pannello dei dettagli appare attraverso una maschera a blocchi radi (≤ 700 ms).
4. Con prefers-reduced-motion, tutto passa direttamente da uno stato all'altro.

[6. Miglioramenti informativi]
1. Mirino di osservazione: un mirino sottile segue il mouse, con le coordinate LAT/LON della superficie del pianeta puntato mostrate in tempo reale in alto a destra (nascosto sui touchscreen).
2. Scheda di anteprima al passaggio sul catalogo (nome / diametro / distanza dal Sole / riga poetica).
3. Controllo completo da tastiera: ←/→ cambiano corpo, ↑/↓ avvicinano/allontanano, Spazio mette in pausa, 1–0 salta direttamente, O panoramica, D dettagli, S impostazioni, H scheda scorciatoie, Esc chiude i pannelli.
4. Registro di osservazione: nell'angolo in basso a destra viene mostrato un record monospaziato scorrevole delle ultime 3 azioni.

[7. Mobile e accessibilità]
1. Catalogo a scorrimento orizzontale con l'elemento selezionato portato automaticamente in vista; dettagli / impostazioni come pannelli inferiori chiudibili; target tattili ≥ 44px; adattamento alla safe area; barra degli strumenti e pannelli non devono sovrapporsi.
2. Pulsanti semantici, aria-pressed / aria-selected corretti, focus visibile, Escape chiude i pannelli e riporta il focus al pulsante che li ha attivati, stato di caricamento annunciato tramite una live region leggera.

[8. Criteri di accettazione (testa ogni elemento)]
1. L'apertura pixelata è visibile all'avvio; il clic la dissolve a ondate nella panoramica (Sole centrato, linee orbitali, etichette dei pianeti).
2. Passa in rassegna tutti e dieci i corpi uno alla volta: nome / selezione nel catalogo / dati restano sincronizzati, la telecamera segue fluidamente senza perdere il bersaglio, nessuna sfera nera, nessun errore di compilazione dello shader, nessun 404.
3. I tre interruttori dei livelli della Terra producono effetti visibili, gli anelli di Saturno sono complanari con il suo equatore, il terminatore della Luna appare naturale senza diventare bianco slavato e il Sole è un disco con bordo nero (non una superficie solare a schermo intero).
4. Verifica con screenshot su desktop 1440×900 e telefono 390×844: nessuna occlusione, nessun overflow; zero errori nella console; pienamente utilizzabile con reduced-motion attivato.

Prima elenca l'ordine di implementazione (scena → interazione → UI → movimento → accettazione), poi fornisci direttamente i file eseguibili. Non fornire segnaposto incompleti e non inventare risorse o dati.

Implementa completamente un "sito web interattivo del sistema solare in stile pixel art bianco e nero" (puramente statico, eseguibile in locale e distribuibile su hosting statico). Tutti i requisiti sono elencati di seguito: implementali e verifica ogni punto.

[1. Base tecnica]
1. Sito puramente statico: importmap + ESM nativo; three.js e tutte le dipendenze incluse localmente; nessun CDN, nessuna fase di build, nessun backend; punto di ingresso index.html.
2. Strategia delle risorse su due binari: la geometria usa sfere integrate di three.js / mesh parametriche; le texture usano immagini astronomiche reali (NASA Visible Earth, mappe lunari LRO, SolarSystemScope), organizzate in tre livelli di qualità — standard / HD 4K / ultra 8K — con un gestore di caricamento delle texture (cache Promise, distinzione tra spazio colore SRGB e lineare, anisotropia ≤ 8, nuovo tentativo in caso di errore e fallback al livello standard).
3. Renderer: antialias, output SRGB, ACESFilmicToneMapping (esposizione ≈ 1.05), DPR ≤ 2 (≤ 1.5 su dispositivi mobili), piano near 0.002, sfondo della scena nero.

[2. Contenuto della scena (tutto in 3D in tempo reale; nessuna immagine o video spacciati per 3D)]
1. Corpi: il Sole + otto pianeti + la Luna (in rotazione sincrona, in orbita attorno alla Terra). I pianeti interni orbitano più velocemente e quelli esterni più lentamente, ruotano a velocità proporzionali reali e usano inclinazioni assiali reali (Saturno 27°, Urano 82°).
2. Sole: sfera emissiva + debole alone; una luce puntiforme per l'illuminazione + una debole luce ambientale.
3. Terra: doppie texture diurne/notturne commutate in tempo reale tramite il "prodotto scalare tra normale e direzione del Sole" (transizione del terminatore), con luci urbane sul lato notturno autoilluminate (interruttore indipendente); un guscio di nubi separato (1.006R, alphaMap) e un guscio atmosferico con luce di contorno Fresnel (1.025R, moltiplicato per un fattore di luce solare) — tutti e tre i livelli attivabili singolarmente.
4. Saturno: sfera e anelli condividono lo stesso gruppo con inclinazione di 27°; l'anello è una mesh parametrica sul piano XZ, le UV mappano una texture a strisce lunghe in base al raggio, doppia faccia, alphaTest ≈ 0.04, depthWrite = false.
5. Luna: texture della superficie lunare 8K (offri livelli 4K / 8K sul web); l'illuminazione ravvicinata deve essere scurita per un aspetto realistico grigio medio.
6. Sfondo: punti stellari fissi e radi (non una grande texture di nebulosa).

[3. Sistema di interazione]
1. Selezione dei corpi: clic nel catalogo / clic con raycast nella scena (i corpi piccoli ricevono una sfera di selezione invisibile ingrandita) / scorrimento precedente-successivo.
2. Telecamera di focalizzazione: la telecamera rimane continuamente agganciata al corpo bersaglio in movimento (traslazione sincronizzata a ogni frame) e non viene mai trascinata dal moto orbitale; distanza di visualizzazione = raggio di ingombro / fattore di riempimento della vista (predefinito 0.7, Luna 0.78, Sole 0.45 con bordo nero); transizioni fluide ease-out di 850 ms che seguono il bersaglio in tempo reale anche durante la transizione; il trascinamento dell'utente subentra immediatamente (annullando il movimento programmato della telecamera).
3. Preimpostazioni di visualizzazione: sei posizioni della telecamera — faccia illuminata / terminatore / regione polare / bordo / lato notturno / dettaglio (composte da offset di "direzione verso il Sole × laterale × alto"; quando il bersaglio è all'origine, usa una direzione fissa per evitare la degenerazione del vettore zero).
4. Tempo e visualizzazione: pausa generale, interruttore di rotazione indipendente, interruttore di orbita indipendente, velocità 0–4×, interruttore delle linee orbitali, interruttore delle etichette, ripristino della vista; gli stati di rotazione/orbita devono restare rigorosamente sincronizzati con l'interfaccia.

[4. Interfaccia in pixel art bianco e nero (nello spirito di careers.kimi.com, solo nero/bianco/grigio, niente blu)]
1. Font monospaziato come base; font pixel per numeri / titoli brevi / navigazione (con licenza OFL, ospitato localmente); font leggibile per il testo cinese.
2. Barra superiore: logo SOLAR SYSTEM (testo inglese più nome cinese) a sinistra, "Panoramica / Corpi / Impostazioni di visualizzazione" a destra.
3. Selettore dei corpi: raggruppato per stella / pianeta / luna, numerazione a due cifre, elemento corrente evidenziato (senza grandi blocchi di colore), scorrevole.
4. Targhetta in basso a sinistra: numero (ad es. 05/10) + titolo grande (nome cinese + inglese) + etichetta del tipo + una riga poetica + dati sul diametro + "Visualizza dettagli ↗"; nella modalità panoramica mostra "dimensioni e distanze adattate per la presentazione".
5. Barra degli strumenti inferiore: pausa / rotazione / orbita / velocità / linee orbitali / ripristino vista (icona + testo breve) + selettore precedente/successivo (al centro è mostrato il nome inglese del corpo corrente).
6. Pannello dei dettagli (si apre da destra): introduzione, dati principali (con unità e indicazioni "circa"), pulsanti di messa a fuoco dell'osservazione (ciascuno associato a uno stato reale di telecamera/livello e con indicazione "corrente"), fonti dei dati, link di approfondimento; il pannello delle impostazioni è diviso in gruppi "Vista / Qualità".
7. Passaggio degli eventi: il livello dell'interfaccia a schermo intero usa pointer-events: none; solo pulsanti / liste / pannelli / barra degli strumenti usano auto; lo scorrimento all'interno di un pannello non deve propagarsi al canvas. Aggiungi una modalità classe con quattro capitoli — stella, pianeti rocciosi, giganti gassosi, lune. La telecamera si ferma in ogni fase, mostra tre punti chiave in stile lavagna e l'insegnante avanza di un punto alla volta con la barra spaziatrice. [5. Apertura pixelata ed effetti di movimento]
1. Apertura: una superficie lunare Bayer a dithering ordinato a 1 bit a schermo intero (campionamento dell'immagine → quantizzazione in scala di grigi → 4 livelli di grigio → matrice 4×4); la dimensione del blocco di dithering si definisce gradualmente da 14px a 1.5px con il progresso di caricamento (il progresso stesso è l'indicatore di caricamento), con titolo in font pixel centrato, maschera radiale scura e pulsante "Inizia l'esplorazione →"; l'accesso richiede un clic dell'utente (nessun accesso automatico).
2. Uscita: dopo il clic, il titolo svanisce in 220 ms, poi la matrice numerica si dissolve a ondate — un fronte d'onda diagonale attraversa lo schermo (con perturbazione per cella), i blocchi pixel si restringono e svaniscono lungo il gradiente dell'onda e, dopo circa 800 ms, appare la panoramica del sistema solare.
3. Altri effetti di movimento: quando si cambia corpo, il titolo grande e la riga poetica si compongono con un effetto di decodifica scramble (circa 320/420 ms); i caratteri dei pulsanti di navigazione eseguono uno scorrimento a due livelli (350 ms, sfalsamento di 30 ms per carattere, attivato sia al passaggio del mouse sia al focus); i pannelli effettuano una transizione con opacità + offset di 12px (circa 220 ms); il titolo del pannello dei dettagli appare attraverso una maschera a blocchi radi (≤ 700 ms).
4. Con prefers-reduced-motion, tutto passa direttamente da uno stato all'altro.

[6. Miglioramenti informativi]
1. Mirino di osservazione: un mirino sottile segue il mouse, con le coordinate LAT/LON della superficie del pianeta puntato mostrate in tempo reale in alto a destra (nascosto sui touchscreen).
2. Scheda di anteprima al passaggio sul catalogo (nome / diametro / distanza dal Sole / riga poetica).
3. Controllo completo da tastiera: ←/→ cambiano corpo, ↑/↓ avvicinano/allontanano, Spazio mette in pausa, 1–0 salta direttamente, O panoramica, D dettagli, S impostazioni, H scheda scorciatoie, Esc chiude i pannelli.
4. Registro di osservazione: nell'angolo in basso a destra viene mostrato un record monospaziato scorrevole delle ultime 3 azioni.

[7. Mobile e accessibilità]
1. Catalogo a scorrimento orizzontale con l'elemento selezionato portato automaticamente in vista; dettagli / impostazioni come pannelli inferiori chiudibili; target tattili ≥ 44px; adattamento alla safe area; barra degli strumenti e pannelli non devono sovrapporsi.
2. Pulsanti semantici, aria-pressed / aria-selected corretti, focus visibile, Escape chiude i pannelli e riporta il focus al pulsante che li ha attivati, stato di caricamento annunciato tramite una live region leggera.

[8. Criteri di accettazione (testa ogni elemento)]
1. L'apertura pixelata è visibile all'avvio; il clic la dissolve a ondate nella panoramica (Sole centrato, linee orbitali, etichette dei pianeti).
2. Passa in rassegna tutti e dieci i corpi uno alla volta: nome / selezione nel catalogo / dati restano sincronizzati, la telecamera segue fluidamente senza perdere il bersaglio, nessuna sfera nera, nessun errore di compilazione dello shader, nessun 404.
3. I tre interruttori dei livelli della Terra producono effetti visibili, gli anelli di Saturno sono complanari con il suo equatore, il terminatore della Luna appare naturale senza diventare bianco slavato e il Sole è un disco con bordo nero (non una superficie solare a schermo intero).
4. Verifica con screenshot su desktop 1440×900 e telefono 390×844: nessuna occlusione, nessun overflow; zero errori nella console; pienamente utilizzabile con reduced-motion attivato.

Prima elenca l'ordine di implementazione (scena → interazione → UI → movimento → accettazione), poi fornisci direttamente i file eseguibili. Non fornire segnaposto incompleti e non inventare risorse o dati.