ระบบสุริยะพิกเซล

สร้าง “เว็บไซต์ระบบสุริยะแบบอินเทอร์แอกทีฟสไตล์พิกเซลอาร์ตขาวดำ” ให้สมบูรณ์ (เป็นเว็บสแตติกทั้งหมด รันในเครื่องและปรับใช้กับโฮสติ้งสแตติกได้) ข้อกำหนดทั้งหมดอยู่ด้านล่าง ให้พัฒนาตามและตรวจสอบทุกข้อ

[1. พื้นฐานทางเทคนิค]
1. เว็บสแตติกทั้งหมด: importmap + native ESM; three.js และ dependency ทั้งหมดเก็บไว้ในเครื่อง; ไม่ใช้ CDN ไม่ต้องมีขั้นตอน build และไม่มีแบ็กเอนด์; จุดเริ่มต้นคือ index.html
2. กลยุทธ์แอสเซ็ตสองแนวทาง: เรขาคณิตใช้ทรงกลมในตัว / parametric mesh ของ three.js; พื้นผิวใช้ภาพดาราศาสตร์จริง (NASA Visible Earth, แผนที่ดวงจันทร์ LRO, SolarSystemScope) แบ่งเป็น 3 ระดับคุณภาพ — มาตรฐาน / HD 4K / ultra 8K — พร้อมตัวจัดการโหลด texture (Promise cache, แยก color space แบบ SRGB กับ linear, anisotropy ≤ 8, ลองใหม่เมื่อผิดพลาดและย้อนกลับไปใช้ระดับมาตรฐาน)
3. Renderer: antialias, เอาต์พุต SRGB, ACESFilmicToneMapping (exposure ≈ 1.05), DPR ≤ 2 (≤ 1.5 บนมือถือ), near plane 0.002, พื้นหลังฉากสีดำ

[2. เนื้อหาในฉาก (เป็น 3D แบบเรียลไทม์ทั้งหมด; ห้ามนำภาพหรือวิดีโอมาแอบอ้างเป็น 3D)]
1. องค์ประกอบ: ดวงอาทิตย์ + ดาวเคราะห์ 8 ดวง + ดวงจันทร์ (ล็อกด้านเดิมเข้าหาโลกและโคจรรอบโลก) ดาวเคราะห์วงในโคจรเร็วกว่า วงนอกโคจรช้ากว่า หมุนตามอัตราส่วนจริง และใช้มุมเอียงแกนจริง (ดาวเสาร์ 27°, ดาวยูเรนัส 82°)
2. ดวงอาทิตย์: ทรงกลมเปล่งแสง + ฮาโลจาง ๆ; แสง point light สำหรับส่องสว่าง + แสง ambient จาง ๆ
3. โลก: texture กลางวัน/กลางคืนคู่ สลับแบบเรียลไทม์ด้วย “dot product ของ normal · ทิศทางดวงอาทิตย์” (การเปลี่ยนผ่านบริเวณ terminator) โดยแสงเมืองฝั่งกลางคืนเปล่งแสงเองได้ (เปิด/ปิดแยกต่างหาก); มีเปลือกเมฆแยกต่างหาก (1.006R, alphaMap) และเปลือกขอบแสง Fresnel ของชั้นบรรยากาศ (1.025R คูณด้วยปัจจัยแสงอาทิตย์) — เปิด/ปิดแต่ละชั้นได้
4. ดาวเสาร์: ทรงกลมและวงแหวนใช้กลุ่มการเอียง 27° เดียวกัน; วงแหวนเป็น parametric mesh บนระนาบ XZ, UV จับคู่ texture ลายแถบยาวตามรัศมี, แสดงสองด้าน, alphaTest ≈ 0.04, depthWrite = false
5. ดวงจันทร์: texture พื้นผิวดวงจันทร์ 8K (มีระดับ 4K / 8K บนเว็บ); แสงเมื่อซูมใกล้ต้องมืดลงจนดูสมจริงในโทนเทากลาง
6. พื้นหลัง: จุดดาวคงที่แบบเบาบาง (ไม่ใช้ texture เนบิวลาขนาดใหญ่)

[3. ระบบการโต้ตอบ]
1. การเลือกวัตถุ: คลิกในแค็ตตาล็อก / คลิกในฉากด้วย raycast (วัตถุขนาดเล็กมีทรงกลมสำหรับเลือกแบบมองไม่เห็นที่ขยายใหญ่ขึ้น) / วนเลือกก่อนหน้า-ถัดไป
2. กล้องโฟกัส: กล้องล็อกเป้าหมายที่เคลื่อนที่อยู่ตลอดเวลา (ซิงก์การเลื่อนตำแหน่งทุกเฟรม) และไม่ถูกพาไปตามการเคลื่อนที่ในวงโคจร; ระยะมอง = รัศมีขอบเขต / ปัจจัยการเติมพื้นที่มุมมอง (ค่าเริ่มต้น 0.7, ดวงจันทร์ 0.78, ดวงอาทิตย์ 0.45 พร้อมขอบดำ); เปลี่ยนผ่านนุ่มนวลแบบ ease-out 850ms ซึ่งติดตามเป้าหมายแบบเรียลไทม์แม้ระหว่างเปลี่ยนผ่าน; เมื่อผู้ใช้ลาก กล้องจะรับการควบคุมทันที (ยกเลิกการเคลื่อนกล้องตามโปรแกรม)
3. มุมมองสำเร็จรูป: ตำแหน่งกล้อง 6 แบบ — ด้านสว่าง / terminator / บริเวณขั้ว / ขอบดวง / ด้านกลางคืน / รายละเอียด (ประกอบจาก offset “ทิศทางไปยังดวงอาทิตย์ × ด้านข้าง × ด้านบน”; เมื่อเป้าหมายอยู่ที่จุดกำเนิด ให้ใช้ทิศทางคงที่เพื่อหลีกเลี่ยงเวกเตอร์ศูนย์เสื่อมสภาพ)
4. เวลาและการแสดงผล: หยุดทั้งหมด, สลับการหมุนแยก, สลับวงโคจรแยก, ความเร็ว 0–4×, สลับเส้นวงโคจร, สลับป้ายชื่อ, รีเซ็ตมุมมอง; สถานะการหมุน/วงโคจรต้องซิงก์กับ UI อย่างเคร่งครัด

[4. UI พิกเซลสไตล์ขาวดำ (ในแนวทางของ careers.kimi.com ใช้ดำ/ขาว/เทาล้วน ไม่มีสีน้ำเงิน)]
1. ใช้ฟอนต์ monospace เป็นหลัก; ฟอนต์พิกเซลสำหรับตัวเลข / หัวข้อสั้น / การนำทาง (ลิขสิทธิ์ OFL, โฮสต์เอง); ฟอนต์เนื้อหาที่อ่านชัดสำหรับข้อความภาษาจีน
2. แถบด้านบน: โลโก้ SOLAR SYSTEM (ข้อความอังกฤษพร้อมชื่อภาษาจีน) ด้านซ้าย, “ภาพรวม / วัตถุ / การตั้งค่าการแสดงผล” ด้านขวา
3. ตัวเลือกวัตถุ: จัดกลุ่มเป็นดาวฤกษ์ / ดาวเคราะห์ / ดวงจันทร์, เลขสองหลัก, เน้นรายการปัจจุบัน (ไม่ใช้บล็อกสีขนาดใหญ่), เลื่อนได้
4. ป้ายชื่อมุมซ้ายล่าง: ตัวเลข (เช่น 05/10) + ชื่อขนาดใหญ่ (ชื่อจีน + อังกฤษ) + ป้ายประเภท + ข้อความเชิงกวีหนึ่งบรรทัด + ข้อมูลเส้นผ่านศูนย์กลาง + “ดูรายละเอียด ↗”; ในโหมดภาพรวม ให้แสดง “ปรับขนาดและระยะทางเพื่อการนำเสนอแล้ว”
5. แถบเครื่องมือด้านล่าง: หยุด / หมุน / วงโคจร / ความเร็ว / เส้นวงโคจร / รีเซ็ตมุมมอง (ไอคอน + ข้อความสั้น) + ปุ่มก่อนหน้า/ถัดไป (แสดงชื่อภาษาอังกฤษของวัตถุปัจจุบันตรงกลาง)
6. แผงรายละเอียด (เลื่อนออกจากด้านขวา): บทนำ, ข้อเท็จจริงสำคัญ (พร้อมหน่วยและเครื่องหมาย “ประมาณ”), ปุ่มโฟกัสการสังเกต (แต่ละปุ่มผูกกับสถานะกล้อง/เลเยอร์จริงและแสดง “ปัจจุบัน”), แหล่งข้อมูล, ลิงก์อ่านเพิ่มเติม; แผงตั้งค่าแบ่งเป็นกลุ่ม “มุมมอง / คุณภาพ”
7. การส่งผ่านอีเวนต์: เลเยอร์ UI เต็มหน้าจอใช้ pointer-events: none; มีเพียงปุ่ม / รายการ / แผง / แถบเครื่องมือที่ใช้ auto; การเลื่อนภายในแผงต้องไม่ส่งต่อไปยัง canvas. แทนที่ระบบสุริยะด้วยระบบดาวเคราะห์นอกระบบ TRAPPIST-1: ดาวแคระแดง 1 ดวงและดาวเคราะห์หิน 7 ดวง คง UI พิกเซลอาร์ต กล้องโฟกัส และตัวควบคุมเวลาไว้ พร้อมใช้พารามิเตอร์ TRAPPIST-1 จริงสำหรับดาวเคราะห์แต่ละดวง [5. เอฟเฟกต์เปิดและการเคลื่อนไหวแบบพิกเซล]
1. ตอนเปิด: พื้นผิวดวงจันทร์แบบ Bayer ordered-dither 1-bit เต็มหน้าจอ (สุ่มตัวอย่างภาพ → quantize ระดับเทา → ระดับเทา 4 ระดับ → เมทริกซ์ 4×4); ขนาดบล็อก dither คมชัดขึ้นอย่างนุ่มนวลจาก 14px เป็น 1.5px ตามความคืบหน้าการโหลด (ความคืบหน้าเองคือตัวบ่งชี้การโหลด) พร้อมชื่อฟอนต์พิกเซลที่กึ่งกลาง, radial mask สีเข้ม และปุ่ม “เริ่มสำรวจ →”; ต้องคลิกจากผู้ใช้จึงเข้าได้ (ห้ามเข้าอัตโนมัติ)
2. ตอนออก: หลังคลิก ชื่อค่อย ๆ จางใน 220ms จากนั้นเมทริกซ์ตัวเลขสลายเป็นคลื่น — แนวหน้าคลื่นทแยงกวาดผ่าน (มีการรบกวนรายเซลล์), บล็อกพิกเซลหดและจางตามไล่ระดับของคลื่น แล้วหลังราว 800ms จะแสดงภาพรวมระบบสุริยะ
3. เอฟเฟกต์อื่น: เมื่อเปลี่ยนวัตถุ ชื่อใหญ่และบรรทัดเชิงกวีปรากฏด้วยเอฟเฟกต์ scramble-decode (ราว 320/420ms); อักขระปุ่มนำทางหมุนแบบสองชั้น (350ms, หน่วง 30ms ต่ออักขระ, ทำงานทั้งเมื่อ hover และ focus); แผงเปลี่ยนผ่านด้วย opacity + offset 12px (ราว 220ms); ชื่อแผงรายละเอียดเผยผ่าน sparse block mask (≤ 700ms)
4. ภายใต้ prefers-reduced-motion ทุกอย่างลดเหลือการสลับโดยตรง

[6. การเสริมข้อมูล]
1. เป้าเล็งการสังเกต: เป้าเล็งเส้นบางติดตามเมาส์ พร้อมแสดงพิกัด LAT/LON ของพื้นผิวดาวเคราะห์ที่ชี้อยู่แบบสดที่มุมขวาบน (ซ่อนบนหน้าจอสัมผัส)
2. การ์ดพรีวิวเมื่อ hover แค็ตตาล็อก (ชื่อ / เส้นผ่านศูนย์กลาง / ระยะจากดวงอาทิตย์ / บรรทัดเชิงกวี)
3. ควบคุมด้วยแป้นพิมพ์ครบถ้วน: ←/→ สลับวัตถุ, ↑/↓ ดอลลี่, Space หยุด, 1–0 ข้ามไปโดยตรง, O ภาพรวม, D รายละเอียด, S การตั้งค่า, H การ์ดคีย์ลัด, Esc ปิดแผง
4. บันทึกการสังเกต: มุมขวาล่างแสดงบันทึก monospace ที่เลื่อนของการกระทำ 3 รายการล่าสุด

[7. มือถือและการเข้าถึง]
1. แค็ตตาล็อกเลื่อนแนวนอนได้ โดยเลื่อนรายการที่เลือกเข้ามาให้เห็นอัตโนมัติ; รายละเอียด / การตั้งค่าเป็น bottom sheet ที่ปิดได้; พื้นที่แตะ ≥ 44px; รองรับ safe area; แถบเครื่องมือและแผงต้องไม่ซ้อนทับกัน
2. ปุ่มเชิงความหมาย, aria-pressed / aria-selected ถูกต้อง, focus มองเห็นได้, Escape ปิดแผงและคืน focus ไปยังปุ่มที่เรียกใช้, สถานะการโหลดประกาศผ่าน live region แบบเบา

[8. เกณฑ์การยอมรับ (ทดสอบทุกข้อ)]
1. เมื่อเปิดต้องเห็นหน้าพิกเซล; คลิกแล้วสลายเป็นคลื่นเข้าสู่ภาพรวม (ดวงอาทิตย์อยู่กึ่งกลาง, เส้นวงโคจร, ป้ายชื่อดาวเคราะห์)
2. สลับวัตถุทั้ง 10 ดวงทีละดวง: ชื่อ / รายการที่เลือกในแค็ตตาล็อก / ข้อมูลต้องซิงก์กัน, กล้องติดตามอย่างนุ่มนวลโดยไม่เสียเป้าหมาย, ไม่มีทรงกลมดำ, ไม่มี shader compile error, ไม่มี 404
3. สวิตช์ 3 เลเยอร์ของโลกต้องเห็นผลชัด, วงแหวนดาวเสาร์ต้องอยู่ระนาบเดียวกับเส้นศูนย์สูตร, terminator ของดวงจันทร์ดูเป็นธรรมชาติโดยไม่ขาวซีด และดวงอาทิตย์เป็นจานมีขอบดำ (ไม่ใช่พื้นผิวดวงอาทิตย์เต็มหน้าจอ)
4. ตรวจสอบด้วยภาพหน้าจอเดสก์ท็อป 1440×900 และโทรศัพท์ 390×844: ไม่มีการบังกัน, ไม่มี overflow; console ไม่มี error; ใช้งานได้ครบเมื่อเปิด reduced-motion

ให้แสดงลำดับการพัฒนาก่อน (ฉาก → การโต้ตอบ → UI → การเคลื่อนไหว → การยอมรับ) แล้วส่งมอบไฟล์ที่รันได้โดยตรง ห้ามส่ง placeholder ที่ยังทำไม่เสร็จ และห้ามสร้างแอสเซ็ตหรือข้อมูลขึ้นเอง

สร้าง “เว็บไซต์ระบบสุริยะแบบอินเทอร์แอกทีฟสไตล์พิกเซลอาร์ตขาวดำ” ให้สมบูรณ์ (เป็นเว็บสแตติกทั้งหมด รันในเครื่องและปรับใช้กับโฮสติ้งสแตติกได้) ข้อกำหนดทั้งหมดอยู่ด้านล่าง ให้พัฒนาตามและตรวจสอบทุกข้อ

[1. พื้นฐานทางเทคนิค]
1. เว็บสแตติกทั้งหมด: importmap + native ESM; three.js และ dependency ทั้งหมดเก็บไว้ในเครื่อง; ไม่ใช้ CDN ไม่ต้องมีขั้นตอน build และไม่มีแบ็กเอนด์; จุดเริ่มต้นคือ index.html
2. กลยุทธ์แอสเซ็ตสองแนวทาง: เรขาคณิตใช้ทรงกลมในตัว / parametric mesh ของ three.js; พื้นผิวใช้ภาพดาราศาสตร์จริง (NASA Visible Earth, แผนที่ดวงจันทร์ LRO, SolarSystemScope) แบ่งเป็น 3 ระดับคุณภาพ — มาตรฐาน / HD 4K / ultra 8K — พร้อมตัวจัดการโหลด texture (Promise cache, แยก color space แบบ SRGB กับ linear, anisotropy ≤ 8, ลองใหม่เมื่อผิดพลาดและย้อนกลับไปใช้ระดับมาตรฐาน)
3. Renderer: antialias, เอาต์พุต SRGB, ACESFilmicToneMapping (exposure ≈ 1.05), DPR ≤ 2 (≤ 1.5 บนมือถือ), near plane 0.002, พื้นหลังฉากสีดำ

[2. เนื้อหาในฉาก (เป็น 3D แบบเรียลไทม์ทั้งหมด; ห้ามนำภาพหรือวิดีโอมาแอบอ้างเป็น 3D)]
1. องค์ประกอบ: ดวงอาทิตย์ + ดาวเคราะห์ 8 ดวง + ดวงจันทร์ (ล็อกด้านเดิมเข้าหาโลกและโคจรรอบโลก) ดาวเคราะห์วงในโคจรเร็วกว่า วงนอกโคจรช้ากว่า หมุนตามอัตราส่วนจริง และใช้มุมเอียงแกนจริง (ดาวเสาร์ 27°, ดาวยูเรนัส 82°)
2. ดวงอาทิตย์: ทรงกลมเปล่งแสง + ฮาโลจาง ๆ; แสง point light สำหรับส่องสว่าง + แสง ambient จาง ๆ
3. โลก: texture กลางวัน/กลางคืนคู่ สลับแบบเรียลไทม์ด้วย “dot product ของ normal · ทิศทางดวงอาทิตย์” (การเปลี่ยนผ่านบริเวณ terminator) โดยแสงเมืองฝั่งกลางคืนเปล่งแสงเองได้ (เปิด/ปิดแยกต่างหาก); มีเปลือกเมฆแยกต่างหาก (1.006R, alphaMap) และเปลือกขอบแสง Fresnel ของชั้นบรรยากาศ (1.025R คูณด้วยปัจจัยแสงอาทิตย์) — เปิด/ปิดแต่ละชั้นได้
4. ดาวเสาร์: ทรงกลมและวงแหวนใช้กลุ่มการเอียง 27° เดียวกัน; วงแหวนเป็น parametric mesh บนระนาบ XZ, UV จับคู่ texture ลายแถบยาวตามรัศมี, แสดงสองด้าน, alphaTest ≈ 0.04, depthWrite = false
5. ดวงจันทร์: texture พื้นผิวดวงจันทร์ 8K (มีระดับ 4K / 8K บนเว็บ); แสงเมื่อซูมใกล้ต้องมืดลงจนดูสมจริงในโทนเทากลาง
6. พื้นหลัง: จุดดาวคงที่แบบเบาบาง (ไม่ใช้ texture เนบิวลาขนาดใหญ่)

[3. ระบบการโต้ตอบ]
1. การเลือกวัตถุ: คลิกในแค็ตตาล็อก / คลิกในฉากด้วย raycast (วัตถุขนาดเล็กมีทรงกลมสำหรับเลือกแบบมองไม่เห็นที่ขยายใหญ่ขึ้น) / วนเลือกก่อนหน้า-ถัดไป
2. กล้องโฟกัส: กล้องล็อกเป้าหมายที่เคลื่อนที่อยู่ตลอดเวลา (ซิงก์การเลื่อนตำแหน่งทุกเฟรม) และไม่ถูกพาไปตามการเคลื่อนที่ในวงโคจร; ระยะมอง = รัศมีขอบเขต / ปัจจัยการเติมพื้นที่มุมมอง (ค่าเริ่มต้น 0.7, ดวงจันทร์ 0.78, ดวงอาทิตย์ 0.45 พร้อมขอบดำ); เปลี่ยนผ่านนุ่มนวลแบบ ease-out 850ms ซึ่งติดตามเป้าหมายแบบเรียลไทม์แม้ระหว่างเปลี่ยนผ่าน; เมื่อผู้ใช้ลาก กล้องจะรับการควบคุมทันที (ยกเลิกการเคลื่อนกล้องตามโปรแกรม)
3. มุมมองสำเร็จรูป: ตำแหน่งกล้อง 6 แบบ — ด้านสว่าง / terminator / บริเวณขั้ว / ขอบดวง / ด้านกลางคืน / รายละเอียด (ประกอบจาก offset “ทิศทางไปยังดวงอาทิตย์ × ด้านข้าง × ด้านบน”; เมื่อเป้าหมายอยู่ที่จุดกำเนิด ให้ใช้ทิศทางคงที่เพื่อหลีกเลี่ยงเวกเตอร์ศูนย์เสื่อมสภาพ)
4. เวลาและการแสดงผล: หยุดทั้งหมด, สลับการหมุนแยก, สลับวงโคจรแยก, ความเร็ว 0–4×, สลับเส้นวงโคจร, สลับป้ายชื่อ, รีเซ็ตมุมมอง; สถานะการหมุน/วงโคจรต้องซิงก์กับ UI อย่างเคร่งครัด

[4. UI พิกเซลสไตล์ขาวดำ (ในแนวทางของ careers.kimi.com ใช้ดำ/ขาว/เทาล้วน ไม่มีสีน้ำเงิน)]
1. ใช้ฟอนต์ monospace เป็นหลัก; ฟอนต์พิกเซลสำหรับตัวเลข / หัวข้อสั้น / การนำทาง (ลิขสิทธิ์ OFL, โฮสต์เอง); ฟอนต์เนื้อหาที่อ่านชัดสำหรับข้อความภาษาจีน
2. แถบด้านบน: โลโก้ SOLAR SYSTEM (ข้อความอังกฤษพร้อมชื่อภาษาจีน) ด้านซ้าย, “ภาพรวม / วัตถุ / การตั้งค่าการแสดงผล” ด้านขวา
3. ตัวเลือกวัตถุ: จัดกลุ่มเป็นดาวฤกษ์ / ดาวเคราะห์ / ดวงจันทร์, เลขสองหลัก, เน้นรายการปัจจุบัน (ไม่ใช้บล็อกสีขนาดใหญ่), เลื่อนได้
4. ป้ายชื่อมุมซ้ายล่าง: ตัวเลข (เช่น 05/10) + ชื่อขนาดใหญ่ (ชื่อจีน + อังกฤษ) + ป้ายประเภท + ข้อความเชิงกวีหนึ่งบรรทัด + ข้อมูลเส้นผ่านศูนย์กลาง + “ดูรายละเอียด ↗”; ในโหมดภาพรวม ให้แสดง “ปรับขนาดและระยะทางเพื่อการนำเสนอแล้ว”
5. แถบเครื่องมือด้านล่าง: หยุด / หมุน / วงโคจร / ความเร็ว / เส้นวงโคจร / รีเซ็ตมุมมอง (ไอคอน + ข้อความสั้น) + ปุ่มก่อนหน้า/ถัดไป (แสดงชื่อภาษาอังกฤษของวัตถุปัจจุบันตรงกลาง)
6. แผงรายละเอียด (เลื่อนออกจากด้านขวา): บทนำ, ข้อเท็จจริงสำคัญ (พร้อมหน่วยและเครื่องหมาย “ประมาณ”), ปุ่มโฟกัสการสังเกต (แต่ละปุ่มผูกกับสถานะกล้อง/เลเยอร์จริงและแสดง “ปัจจุบัน”), แหล่งข้อมูล, ลิงก์อ่านเพิ่มเติม; แผงตั้งค่าแบ่งเป็นกลุ่ม “มุมมอง / คุณภาพ”
7. การส่งผ่านอีเวนต์: เลเยอร์ UI เต็มหน้าจอใช้ pointer-events: none; มีเพียงปุ่ม / รายการ / แผง / แถบเครื่องมือที่ใช้ auto; การเลื่อนภายในแผงต้องไม่ส่งต่อไปยัง canvas. เพิ่มโหมดห้องเรียนที่มี 4 บท — ดาวฤกษ์, ดาวเคราะห์หิน, ดาวเคราะห์ยักษ์แก๊ส, ดวงจันทร์ กล้องจะหยุดในแต่ละช่วง แสดงประเด็นสำคัญสไตล์กระดานดำ 3 ข้อ และครูเลื่อนแต่ละข้อด้วยแป้นเว้นวรรค [5. เอฟเฟกต์เปิดและการเคลื่อนไหวแบบพิกเซล]
1. ตอนเปิด: พื้นผิวดวงจันทร์แบบ Bayer ordered-dither 1-bit เต็มหน้าจอ (สุ่มตัวอย่างภาพ → quantize ระดับเทา → ระดับเทา 4 ระดับ → เมทริกซ์ 4×4); ขนาดบล็อก dither คมชัดขึ้นอย่างนุ่มนวลจาก 14px เป็น 1.5px ตามความคืบหน้าการโหลด (ความคืบหน้าเองคือตัวบ่งชี้การโหลด) พร้อมชื่อฟอนต์พิกเซลที่กึ่งกลาง, radial mask สีเข้ม และปุ่ม “เริ่มสำรวจ →”; ต้องคลิกจากผู้ใช้จึงเข้าได้ (ห้ามเข้าอัตโนมัติ)
2. ตอนออก: หลังคลิก ชื่อค่อย ๆ จางใน 220ms จากนั้นเมทริกซ์ตัวเลขสลายเป็นคลื่น — แนวหน้าคลื่นทแยงกวาดผ่าน (มีการรบกวนรายเซลล์), บล็อกพิกเซลหดและจางตามไล่ระดับของคลื่น แล้วหลังราว 800ms จะแสดงภาพรวมระบบสุริยะ
3. เอฟเฟกต์อื่น: เมื่อเปลี่ยนวัตถุ ชื่อใหญ่และบรรทัดเชิงกวีปรากฏด้วยเอฟเฟกต์ scramble-decode (ราว 320/420ms); อักขระปุ่มนำทางหมุนแบบสองชั้น (350ms, หน่วง 30ms ต่ออักขระ, ทำงานทั้งเมื่อ hover และ focus); แผงเปลี่ยนผ่านด้วย opacity + offset 12px (ราว 220ms); ชื่อแผงรายละเอียดเผยผ่าน sparse block mask (≤ 700ms)
4. ภายใต้ prefers-reduced-motion ทุกอย่างลดเหลือการสลับโดยตรง

[6. การเสริมข้อมูล]
1. เป้าเล็งการสังเกต: เป้าเล็งเส้นบางติดตามเมาส์ พร้อมแสดงพิกัด LAT/LON ของพื้นผิวดาวเคราะห์ที่ชี้อยู่แบบสดที่มุมขวาบน (ซ่อนบนหน้าจอสัมผัส)
2. การ์ดพรีวิวเมื่อ hover แค็ตตาล็อก (ชื่อ / เส้นผ่านศูนย์กลาง / ระยะจากดวงอาทิตย์ / บรรทัดเชิงกวี)
3. ควบคุมด้วยแป้นพิมพ์ครบถ้วน: ←/→ สลับวัตถุ, ↑/↓ ดอลลี่, Space หยุด, 1–0 ข้ามไปโดยตรง, O ภาพรวม, D รายละเอียด, S การตั้งค่า, H การ์ดคีย์ลัด, Esc ปิดแผง
4. บันทึกการสังเกต: มุมขวาล่างแสดงบันทึก monospace ที่เลื่อนของการกระทำ 3 รายการล่าสุด

[7. มือถือและการเข้าถึง]
1. แค็ตตาล็อกเลื่อนแนวนอนได้ โดยเลื่อนรายการที่เลือกเข้ามาให้เห็นอัตโนมัติ; รายละเอียด / การตั้งค่าเป็น bottom sheet ที่ปิดได้; พื้นที่แตะ ≥ 44px; รองรับ safe area; แถบเครื่องมือและแผงต้องไม่ซ้อนทับกัน
2. ปุ่มเชิงความหมาย, aria-pressed / aria-selected ถูกต้อง, focus มองเห็นได้, Escape ปิดแผงและคืน focus ไปยังปุ่มที่เรียกใช้, สถานะการโหลดประกาศผ่าน live region แบบเบา

[8. เกณฑ์การยอมรับ (ทดสอบทุกข้อ)]
1. เมื่อเปิดต้องเห็นหน้าพิกเซล; คลิกแล้วสลายเป็นคลื่นเข้าสู่ภาพรวม (ดวงอาทิตย์อยู่กึ่งกลาง, เส้นวงโคจร, ป้ายชื่อดาวเคราะห์)
2. สลับวัตถุทั้ง 10 ดวงทีละดวง: ชื่อ / รายการที่เลือกในแค็ตตาล็อก / ข้อมูลต้องซิงก์กัน, กล้องติดตามอย่างนุ่มนวลโดยไม่เสียเป้าหมาย, ไม่มีทรงกลมดำ, ไม่มี shader compile error, ไม่มี 404
3. สวิตช์ 3 เลเยอร์ของโลกต้องเห็นผลชัด, วงแหวนดาวเสาร์ต้องอยู่ระนาบเดียวกับเส้นศูนย์สูตร, terminator ของดวงจันทร์ดูเป็นธรรมชาติโดยไม่ขาวซีด และดวงอาทิตย์เป็นจานมีขอบดำ (ไม่ใช่พื้นผิวดวงอาทิตย์เต็มหน้าจอ)
4. ตรวจสอบด้วยภาพหน้าจอเดสก์ท็อป 1440×900 และโทรศัพท์ 390×844: ไม่มีการบังกัน, ไม่มี overflow; console ไม่มี error; ใช้งานได้ครบเมื่อเปิด reduced-motion

ให้แสดงลำดับการพัฒนาก่อน (ฉาก → การโต้ตอบ → UI → การเคลื่อนไหว → การยอมรับ) แล้วส่งมอบไฟล์ที่รันได้โดยตรง ห้ามส่ง placeholder ที่ยังทำไม่เสร็จ และห้ามสร้างแอสเซ็ตหรือข้อมูลขึ้นเอง