npm - synthos - Versions diffs - 0.6.0 → 0.7.0 - Mend

synthos 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/README.md +33 -1
package/default-pages/app_builder.html +40 -0
package/default-pages/app_builder.json +1 -0
package/default-pages/json_tools.html +89 -159
package/default-pages/json_tools.json +1 -0
package/default-pages/my_notes.html +33 -0
package/default-pages/my_notes.json +12 -0
package/default-pages/neon_asteroids.html +77 -0
package/default-pages/neon_asteroids.json +12 -0
package/default-pages/sidebar_builder.html +49 -0
package/default-pages/sidebar_builder.json +1 -0
package/default-pages/solar_explorer.html +1956 -0
package/default-pages/solar_explorer.json +12 -0
package/default-pages/solar_tutorial.html +476 -0
package/default-pages/solar_tutorial.json +1 -0
package/default-pages/two-panel_builder.html +66 -0
package/default-pages/two-panel_builder.json +1 -0
package/dist/connectors/index.d.ts +3 -0
package/dist/connectors/index.d.ts.map +1 -0
package/dist/connectors/index.js +6 -0
package/dist/connectors/index.js.map +1 -0
package/dist/connectors/registry.d.ts +3 -0
package/dist/connectors/registry.d.ts.map +1 -0
package/dist/connectors/registry.js +100 -0
package/dist/connectors/registry.js.map +1 -0
package/dist/connectors/types.d.ts +61 -0
package/dist/connectors/types.d.ts.map +1 -0
package/dist/connectors/types.js +3 -0
package/dist/connectors/types.js.map +1 -0
package/dist/files.d.ts +2 -0
package/dist/files.d.ts.map +1 -1
package/dist/files.js +12 -1
package/dist/files.js.map +1 -1
package/dist/init.d.ts +8 -1
package/dist/init.d.ts.map +1 -1
package/dist/init.js +155 -3
package/dist/init.js.map +1 -1
package/dist/migrations.d.ts +11 -0
package/dist/migrations.d.ts.map +1 -0
package/dist/migrations.js +281 -0
package/dist/migrations.js.map +1 -0
package/dist/models/index.d.ts +3 -0
package/dist/models/index.d.ts.map +1 -0
package/dist/models/index.js +10 -0
package/dist/models/index.js.map +1 -0
package/dist/models/providers.d.ts +7 -0
package/dist/models/providers.d.ts.map +1 -0
package/dist/models/providers.js +33 -0
package/dist/models/providers.js.map +1 -0
package/dist/models/types.d.ts +21 -0
package/dist/models/types.d.ts.map +1 -0
package/dist/models/types.js +3 -0
package/dist/models/types.js.map +1 -0
package/dist/pages.d.ts +21 -2
package/dist/pages.d.ts.map +1 -1
package/dist/pages.js +202 -23
package/dist/pages.js.map +1 -1
package/dist/scripts.js +2 -2
package/dist/scripts.js.map +1 -1
package/dist/service/createCompletePrompt.d.ts +3 -2
package/dist/service/createCompletePrompt.d.ts.map +1 -1
package/dist/service/createCompletePrompt.js +11 -16
package/dist/service/createCompletePrompt.js.map +1 -1
package/dist/service/debugLog.d.ts +11 -0
package/dist/service/debugLog.d.ts.map +1 -0
package/dist/service/debugLog.js +26 -0
package/dist/service/debugLog.js.map +1 -0
package/dist/service/modelInstructions.d.ts +7 -0
package/dist/service/modelInstructions.d.ts.map +1 -0
package/dist/service/modelInstructions.js +16 -0
package/dist/service/modelInstructions.js.map +1 -0
package/dist/service/requiresSettings.d.ts +2 -2
package/dist/service/requiresSettings.d.ts.map +1 -1
package/dist/service/requiresSettings.js.map +1 -1
package/dist/service/server.d.ts.map +1 -1
package/dist/service/server.js +15 -0
package/dist/service/server.js.map +1 -1
package/dist/service/transformPage.d.ts +81 -2
package/dist/service/transformPage.d.ts.map +1 -1
package/dist/service/transformPage.js +672 -82
package/dist/service/transformPage.js.map +1 -1
package/dist/service/useApiRoutes.d.ts.map +1 -1
package/dist/service/useApiRoutes.js +579 -13
package/dist/service/useApiRoutes.js.map +1 -1
package/dist/service/useConnectorRoutes.d.ts +4 -0
package/dist/service/useConnectorRoutes.d.ts.map +1 -0
package/dist/service/useConnectorRoutes.js +389 -0
package/dist/service/useConnectorRoutes.js.map +1 -0
package/dist/service/useDataRoutes.d.ts.map +1 -1
package/dist/service/useDataRoutes.js +83 -70
package/dist/service/useDataRoutes.js.map +1 -1
package/dist/service/usePageRoutes.d.ts.map +1 -1
package/dist/service/usePageRoutes.js +243 -38
package/dist/service/usePageRoutes.js.map +1 -1
package/dist/settings.d.ts +33 -4
package/dist/settings.d.ts.map +1 -1
package/dist/settings.js +108 -15
package/dist/settings.js.map +1 -1
package/dist/synthos-cli.d.ts.map +1 -1
package/dist/synthos-cli.js +11 -1
package/dist/synthos-cli.js.map +1 -1
package/dist/themes.d.ts +9 -0
package/dist/themes.d.ts.map +1 -0
package/dist/themes.js +64 -0
package/dist/themes.js.map +1 -0
package/package.json +5 -3
package/required-pages/builder.html +74 -0
package/required-pages/builder.json +1 -0
package/required-pages/pages.html +169 -126
package/required-pages/pages.json +1 -0
package/required-pages/settings.html +812 -156
package/required-pages/settings.json +1 -0
package/required-pages/synthos_apis.html +272 -0
package/required-pages/synthos_apis.json +1 -0
package/required-pages/synthos_scripts.html +87 -0
package/required-pages/synthos_scripts.json +1 -0
package/src/connectors/index.ts +12 -0
package/src/connectors/registry.ts +98 -0
package/src/connectors/types.ts +68 -0
package/src/files.ts +11 -0
package/src/init.ts +151 -5
package/src/migrations.ts +266 -0
package/src/models/index.ts +2 -0
package/src/models/providers.ts +33 -0
package/src/models/types.ts +23 -0
package/src/pages.ts +234 -26
package/src/scripts.ts +2 -2
package/src/service/createCompletePrompt.ts +14 -18
package/src/service/debugLog.ts +17 -0
package/src/service/modelInstructions.ts +14 -0
package/src/service/requiresSettings.ts +3 -3
package/src/service/server.ts +19 -2
package/src/service/transformPage.ts +709 -88
package/src/service/useApiRoutes.ts +632 -16
package/src/service/useConnectorRoutes.ts +427 -0
package/src/service/useDataRoutes.ts +87 -71
package/src/service/usePageRoutes.ts +237 -44
package/src/settings.ts +143 -20
package/src/synthos-cli.ts +11 -1
package/src/themes.ts +71 -0
package/default-pages/[application].html +0 -95
package/default-pages/[markdown].html +0 -271
package/default-pages/[sidebar].html +0 -114
package/default-pages/[split-application].html +0 -118
package/default-pages/solar_system.html +0 -432
package/default-pages/space_invaders.html +0 -617
package/required-pages/apis.html +0 -362
package/required-pages/home.html +0 -126
package/required-pages/scripts.html +0 -350

package/default-pages/solar_explorer.html ADDED Viewed

@@ -0,0 +1,1956 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SynthOS</title>
+    <script id="theme-info" src="/api/theme-info.js" data-locked="true"></script>
+    <link id="theme-css" rel="stylesheet" href="/api/theme.css" data-locked="true">
+    <style id="solar-styles">
+#solarSystem {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.controls {
+  position: absolute;
+  bottom: 8px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  z-index: 100;
+  background: rgba(15, 15, 35, 0.6);
+  padding: 10px 20px;
+  border-top: 1px solid rgba(138, 43, 226, 0.3);
+}
+.controls button {
+  padding: 8px 24px;
+  border: none;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
+  color: #fff;
+  cursor: pointer;
+  font-size: 12px;
+  white-space: nowrap;
+  transition: 0.3s;
+}
+.controls button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
+}
+.controls button.active {
+  background: linear-gradient(135deg, #f093fb 0, #764ba2 100%);
+}
+.info-panel {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: rgba(15, 15, 35, 0.6);
+  padding: 20px;
+  border-radius: 15px;
+  border: 1px solid rgba(138, 43, 226, 0.3);
+  max-width: 280px;
+  z-index: 100;
+}
+.info-panel h3 {
+  color: #f093fb;
+  margin-bottom: 10px;
+  font-size: 18px;
+}
+.info-panel p {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #b794f6;
+  margin-bottom: 8px;
+}
+.speed-control {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: rgba(15, 15, 35, 0.6);
+  padding: 15px 20px;
+  border-radius: 15px;
+  border: 1px solid rgba(138, 43, 226, 0.3);
+  z-index: 100;
+}
+.speed-control label {
+  color: #b794f6;
+  font-size: 13px;
+  display: block;
+  margin-bottom: 8px;
+}
+.speed-control input[type=range] {
+  width: 150px;
+  accent-color: #f093fb;
+}
+.planet-label {
+  font-size: 11px;
+  fill: #b794f6;
+  pointer-events: none;
+  text-anchor: middle;
+}
+#viewerPanel.full-viewer {
+  background: #0a0a19 !important;
+}
+.light-mode .controls,
+.light-mode .info-panel,
+.light-mode .speed-control {
+  background: rgba(15, 15, 35, 0.6) !important;
+}
+.light-mode .info-panel h3 {
+  color: #f093fb !important;
+}
+.light-mode .info-panel p {
+  color: #b794f6 !important;
+}
+.light-mode .speed-control label {
+  color: #b794f6 !important;
+}
+</style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
+    <script id="page-info" src="/api/page-info.js?page=solar_system"></script>
+<style id="tutorial-link-styles">.tutorial-link{color:#667eea;text-decoration:underline;cursor:pointer;transition:color 0.2s}.tutorial-link:hover{color:#f093fb}.light-mode .tutorial-link{color:#667eea}.light-mode .tutorial-link:hover{color:#764ba2}</style><style id="detail-card-options">.card-showcase{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;gap:30px;z-index:200;padding:20px}.card-showcase.active{display:flex}.planet-detail-card{width:240px;background:rgba(15,15,35,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:16px;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.3);position:absolute;pointer-events:none;opacity:0;transition:opacity .2s;z-index:150}.planet-detail-card.visible{opacity:1;pointer-events:auto}.planet-detail-card .planet-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.15)}.planet-detail-card .planet-icon{width:32px;height:32px;border-radius:50%;box-shadow:0 0 12px rgba(255,200,100,.3);flex-shrink:0}.planet-detail-card .planet-name{font-size:18px;font-weight:600;background:linear-gradient(135deg,#f093fb,#667eea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.planet-detail-card .stat-row{display:flex;justify-content:space-between;padding:6px 0;font-size:12px;border-bottom:1px solid rgba(255,255,255,.08)}.planet-detail-card .stat-row:last-of-type{border-bottom:none}.planet-detail-card .stat-label{color:rgba(255,255,255,.5)}.planet-detail-card .stat-value{color:#fff;font-weight:500}.planet-detail-card .fun-fact{margin-top:12px;padding:10px;background:rgba(102,126,234,.15);border-radius:8px;font-size:11px;color:rgba(255,255,255,.9);line-height:1.4;display:none}.planet-detail-card .fun-fact-label{color:#f093fb;font-weight:600;margin-bottom:4px;display:block}.planet-detail-card .question-section{margin-top:12px;display:none}.planet-detail-card .question-input{width:100%;padding:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:12px;outline:none;box-sizing:border-box}.planet-detail-card .question-input::placeholder{color:rgba(255,255,255,.4)}.planet-detail-card .question-input:focus{border-color:#667eea;box-shadow:0 0 10px rgba(102,126,234,.3)}.planet-detail-card .ai-answer{margin-top:10px;padding:10px;background:rgba(240,147,251,.1);border-radius:8px;font-size:11px;color:rgba(255,255,255,.9);line-height:1.4;border-left:2px solid #f093fb;max-height:120px;overflow-y:auto;display:none}.planet-detail-card .ai-answer.visible{display:block}.planet-detail-card .ai-answer::-webkit-scrollbar{width:4px}.planet-detail-card .ai-answer::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:2px}.planet-detail-card .ai-answer::-webkit-scrollbar-thumb{background:rgba(240,147,251,.3);border-radius:2px}.planet-detail-card .ai-answer::-webkit-scrollbar-thumb:hover{background:rgba(240,147,251,.5)}.planet-detail-card.mode-funfact .fun-fact{display:block}.planet-detail-card.mode-funfact .question-section{display:none}.planet-detail-card.mode-question .fun-fact{display:none}.planet-detail-card.mode-question .question-section{display:block}.light-mode .planet-detail-card{background:rgba(15,15,35,.6);border-color:rgba(118,75,162,.3)}.light-mode .planet-detail-card .stat-label{color:rgba(255,255,255,.6)}.light-mode .planet-detail-card .question-input{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25)}.moon-detail-card{position:absolute;width:200px;background:rgba(15,15,35,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:12px;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .2s;z-index:200}.moon-detail-card.visible{opacity:1}.moon-detail-card .moon-name{font-size:14px;font-weight:600;background:linear-gradient(135deg,#f093fb,#667eea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.moon-detail-card .moon-stat{display:flex;justify-content:space-between;padding:4px 0;font-size:11px;border-bottom:1px solid rgba(255,255,255,.08)}.moon-detail-card .moon-stat:last-of-type{border-bottom:none}.moon-detail-card .moon-stat-label{color:rgba(255,255,255,.5)}.moon-detail-card .moon-stat-value{color:#fff}.moon-detail-card .moon-fun-fact{margin-top:8px;padding:8px;background:rgba(102,126,234,.15);border-radius:6px;font-size:10px;color:rgba(255,255,255,.9);line-height:1.4}.light-mode .moon-detail-card{background:rgba(15,15,35,.6);border-color:rgba(118,75,162,.3)}</style><style id="detail-view-styles">.detail-view-container{position:absolute;top:0;left:0;width:100%;height:100%;display:none;background:#0a0a19}.detail-view-container.active{display:flex}.detail-planet-area{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.detail-planet-canvas{position:absolute;top:0;left:0}.detail-sidebar{width:300px;background:rgba(15,15,35,.95);border-left:1px solid rgba(138,43,226,.3);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px}.detail-sidebar .planet-detail-card{position:relative;opacity:1;pointer-events:auto;width:100%;box-sizing:border-box}.back-button{padding:10px 20px;border:none;border-radius:15px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;cursor:pointer;font-size:13px;transition:.3s;margin-bottom:10px}.back-button:hover{transform:scale(1.05);box-shadow:0 0 15px rgba(102,126,234,.5)}.moon-speed-control{background:rgba(255,255,255,.1);padding:12px;border-radius:10px;margin-top:10px}.moon-speed-control label{color:#b794f6;font-size:12px;display:block;margin-bottom:8px}.moon-speed-control input[type="range"]{width:100%;accent-color:#f093fb}.moon-detail-card{position:absolute;width:200px;background:rgba(15,15,35,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:12px;color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .2s;z-index:200}.moon-detail-card.visible{opacity:1}.moon-detail-card .moon-name{font-size:14px;font-weight:600;background:linear-gradient(135deg,#f093fb,#667eea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.moon-detail-card .moon-stat{display:flex;justify-content:space-between;padding:4px 0;font-size:11px;border-bottom:1px solid rgba(255,255,255,.08)}.moon-detail-card .moon-stat:last-of-type{border-bottom:none}.moon-detail-card .moon-stat-label{color:rgba(255,255,255,.5)}.moon-detail-card .moon-stat-value{color:#fff}.moon-detail-card .moon-fun-fact{margin-top:8px;padding:8px;background:rgba(102,126,234,.15);border-radius:6px;font-size:10px;color:rgba(255,255,255,.9);line-height:1.4}.light-mode .detail-view-container{background:#0a0a19}.light-mode .detail-sidebar{background:rgba(15,15,35,.95)}</style>
+<script id="planet-details" type="application/json" data-locked="true">{"sun":{"name":"The Sun","type":"G-type main-sequence star","diameter":"1,392,700 km","surfaceTemp":"5,500°C","funFact":"Contains 99.86% of the Solar System's mass and could fit 1.3 million Earths inside it."},"planets":{"mercury":{"name":"Mercury","color":"#b5b5b5","type":"Terrestrial","diameter":"4,879 km","distance":"57.9 million km","orbitalPeriod":"88 Earth days","dayLength":"59 Earth days","surfaceTemp":"-180°C to 430°C","moons":0,"funFact":"Despite being closest to the Sun, Mercury isn't the hottest planet. Its lack of atmosphere means heat escapes quickly at night."},"venus":{"name":"Venus","color":"#e6c87a","type":"Terrestrial","diameter":"12,104 km","distance":"108.2 million km","orbitalPeriod":"225 Earth days","dayLength":"243 Earth days","surfaceTemp":"465°C","moons":0,"funFact":"Venus rotates backwards compared to other planets, so the Sun rises in the west and sets in the east."},"earth":{"name":"Earth","color":"#6b93d6","type":"Terrestrial","diameter":"12,742 km","distance":"149.6 million km","orbitalPeriod":"365.25 days","dayLength":"24 hours","surfaceTemp":"-89°C to 57°C","moons":1,"funFact":"Earth is the only planet not named after a Greek or Roman god. Its name comes from Old English meaning 'ground'.","moonData":{"luna":{"name":"Luna (The Moon)","diameter":"3,474 km","distance":"384,400 km","distanceKm":384400,"orbitalPeriod":"27.3 days","funFact":"The Moon is slowly drifting away from Earth at about 3.8 cm per year."}}},"mars":{"name":"Mars","color":"#c1440e","type":"Terrestrial","diameter":"6,779 km","distance":"227.9 million km","orbitalPeriod":"687 Earth days","dayLength":"24.6 hours","surfaceTemp":"-125°C to 20°C","moons":2,"funFact":"Mars has the largest volcano in the solar system, Olympus Mons, which is nearly 3 times the height of Mount Everest.","moonData":{"phobos":{"name":"Phobos","diameter":"22.4 km","distance":"9,376 km","distanceKm":9376,"orbitalPeriod":"7.7 hours","funFact":"Phobos orbits Mars faster than Mars rotates, so it rises in the west and sets in the east."},"deimos":{"name":"Deimos","diameter":"12.4 km","distance":"23,463 km","distanceKm":23463,"orbitalPeriod":"30.3 hours","funFact":"Deimos is one of the smallest moons in the solar system and may be a captured asteroid."}}},"jupiter":{"name":"Jupiter","color":"#d4a574","type":"Gas Giant","diameter":"139,820 km","distance":"778.5 million km","orbitalPeriod":"11.86 Earth years","dayLength":"9.9 hours","surfaceTemp":"-110°C","moons":95,"funFact":"Jupiter's Great Red Spot is a storm that has been raging for at least 400 years and is larger than Earth.","moonData":{"io":{"name":"Io","diameter":"3,643 km","distance":"421,700 km","distanceKm":421700,"orbitalPeriod":"1.77 days","funFact":"Io is the most volcanically active body in the solar system with over 400 active volcanoes."},"europa":{"name":"Europa","diameter":"3,122 km","distance":"671,034 km","distanceKm":671034,"orbitalPeriod":"3.55 days","funFact":"Europa likely has a subsurface ocean containing more water than all of Earth's oceans combined."},"ganymede":{"name":"Ganymede","diameter":"5,268 km","distance":"1,070,400 km","distanceKm":1070400,"orbitalPeriod":"7.15 days","funFact":"Ganymede is the largest moon in the solar system, even bigger than the planet Mercury."},"callisto":{"name":"Callisto","diameter":"4,821 km","distance":"1,882,700 km","distanceKm":1882700,"orbitalPeriod":"16.69 days","funFact":"Callisto has the oldest and most heavily cratered surface in the solar system."}}},"saturn":{"name":"Saturn","color":"#f4d59e","type":"Gas Giant","diameter":"116,460 km","distance":"1.43 billion km","orbitalPeriod":"29.46 Earth years","dayLength":"10.7 hours","surfaceTemp":"-140°C","moons":146,"funFact":"Saturn's density is so low that it would float if you could find a bathtub big enough to hold it.","moonData":{"mimas":{"name":"Mimas","diameter":"396 km","distance":"185,520 km","distanceKm":185520,"orbitalPeriod":"0.94 days","funFact":"Mimas has a giant crater that makes it look like the Death Star from Star Wars."},"enceladus":{"name":"Enceladus","diameter":"504 km","distance":"238,020 km","distanceKm":238020,"orbitalPeriod":"1.37 days","funFact":"Enceladus shoots geysers of water ice into space, suggesting a subsurface ocean."},"tethys":{"name":"Tethys","diameter":"1,062 km","distance":"294,619 km","distanceKm":294619,"orbitalPeriod":"1.89 days","funFact":"Tethys has a massive canyon called Ithaca Chasma that stretches 2,000 km across its surface."},"dione":{"name":"Dione","diameter":"1,123 km","distance":"377,396 km","distanceKm":377396,"orbitalPeriod":"2.74 days","funFact":"Dione has wispy ice cliffs and may have a subsurface ocean beneath its icy crust."},"rhea":{"name":"Rhea","diameter":"1,527 km","distance":"527,040 km","distanceKm":527040,"orbitalPeriod":"4.52 days","funFact":"Rhea may have its own faint ring system, which would make it the only moon known to have rings."},"titan":{"name":"Titan","diameter":"5,150 km","distance":"1,221,870 km","distanceKm":1221870,"orbitalPeriod":"15.95 days","funFact":"Titan is the only moon with a dense atmosphere and has lakes of liquid methane on its surface."},"iapetus":{"name":"Iapetus","diameter":"1,469 km","distance":"3,560,820 km","distanceKm":3560820,"orbitalPeriod":"79.32 days","funFact":"Iapetus has one hemisphere as dark as coal and the other as bright as snow, giving it a striking two-toned appearance."}}},"uranus":{"name":"Uranus","color":"#d1e7e7","type":"Ice Giant","diameter":"50,724 km","distance":"2.87 billion km","orbitalPeriod":"84.01 Earth years","dayLength":"17.2 hours","surfaceTemp":"-195°C","moons":28,"funFact":"Uranus rotates on its side with an axial tilt of 98°, possibly due to a collision with an Earth-sized object.","moonData":{"miranda":{"name":"Miranda","diameter":"472 km","distance":"129,390 km","distanceKm":129390,"orbitalPeriod":"1.41 days","funFact":"Miranda has the tallest known cliff in the solar system, Verona Rupes, at 20 km high."},"ariel":{"name":"Ariel","diameter":"1,158 km","distance":"191,020 km","distanceKm":191020,"orbitalPeriod":"2.52 days","funFact":"Ariel is the brightest of Uranus's moons and has extensive canyon systems."},"umbriel":{"name":"Umbriel","diameter":"1,169 km","distance":"266,000 km","distanceKm":266000,"orbitalPeriod":"4.14 days","funFact":"Umbriel is the darkest of Uranus's major moons, with a mysterious bright ring on its surface called Wunda crater."},"titania":{"name":"Titania","diameter":"1,578 km","distance":"435,910 km","distanceKm":435910,"orbitalPeriod":"8.71 days","funFact":"Titania is the largest moon of Uranus and may have a subsurface ocean."},"oberon":{"name":"Oberon","diameter":"1,523 km","distance":"583,520 km","distanceKm":583520,"orbitalPeriod":"13.46 days","funFact":"Oberon has a mountain that rises about 6 km above the surrounding terrain."}}},"neptune":{"name":"Neptune","color":"#5b5ddf","type":"Ice Giant","diameter":"49,244 km","distance":"4.5 billion km","orbitalPeriod":"164.8 Earth years","dayLength":"16.1 hours","surfaceTemp":"-200°C","moons":16,"funFact":"Neptune has the strongest winds in the solar system, reaching speeds of 2,100 km/h.","moonData":{"triton":{"name":"Triton","diameter":"2,707 km","distance":"354,760 km","distanceKm":354760,"orbitalPeriod":"5.88 days (retrograde)","funFact":"Triton orbits Neptune backwards and is slowly spiraling inward, destined to be torn apart in about 3.6 billion years."},"proteus":{"name":"Proteus","diameter":"420 km","distance":"117,647 km","distanceKm":117647,"orbitalPeriod":"1.12 days","funFact":"Proteus is Neptune's second largest moon and is irregularly shaped — it's about as large as an object can be without being pulled into a sphere by its own gravity."},"nereid":{"name":"Nereid","diameter":"340 km","distance":"5,513,400 km","distanceKm":5513400,"orbitalPeriod":"360.14 days","funFact":"Nereid has one of the most eccentric orbits of any known moon in the solar system."}}},"pluto":{"name":"Pluto","color":"#a89f91","type":"Dwarf Planet","diameter":"2,377 km","distance":"5.9 billion km","orbitalPeriod":"248 Earth years","dayLength":"6.4 Earth days","surfaceTemp":"-230°C","moons":5,"funFact":"Pluto has a heart-shaped glacier called Tombaugh Regio that's larger than Texas.","moonData":{"charon":{"name":"Charon","diameter":"1,212 km","distance":"19,571 km","distanceKm":19571,"orbitalPeriod":"6.4 days","funFact":"Charon is so large relative to Pluto that they orbit a point in space between them, making them a 'double dwarf planet'."},"styx":{"name":"Styx","diameter":"16 km","distance":"42,656 km","distanceKm":42656,"orbitalPeriod":"20.16 days","funFact":"Styx is the smallest and last-discovered moon of Pluto, found in 2012 by the Hubble Space Telescope."},"nix":{"name":"Nix","diameter":"50 km","distance":"48,694 km","distanceKm":48694,"orbitalPeriod":"24.85 days","funFact":"Nix rotates chaotically due to the gravitational influence of Pluto and Charon."},"kerberos":{"name":"Kerberos","diameter":"19 km","distance":"57,783 km","distanceKm":57783,"orbitalPeriod":"32.17 days","funFact":"Kerberos is surprisingly small and dark, defying predictions that it would be large and bright."},"hydra":{"name":"Hydra","diameter":"51 km","distance":"64,738 km","distanceKm":64738,"orbitalPeriod":"38.2 days","funFact":"Hydra is shaped like a potato and tumbles unpredictably as it orbits."}}}}}</script>
+<style id="markdown-answer-styles">
+#solarAnswer p,
+#solarAnswer ul,
+#solarAnswer ol,
+#solarAnswer li,
+#planetAnswerBox p,
+#planetAnswerBox ul,
+#planetAnswerBox ol,
+#planetAnswerBox li {
+  margin: 0 0 8px 0;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+#solarAnswer p:last-child,
+#planetAnswerBox p:last-child {
+  margin-bottom: 0;
+}
+#solarAnswer ul,
+#solarAnswer ol,
+#planetAnswerBox ul,
+#planetAnswerBox ol {
+  padding-left: 18px;
+}
+#solarAnswer code,
+#planetAnswerBox code {
+  background: rgba(102, 126, 234, 0.2);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+#solarAnswer strong,
+#planetAnswerBox strong {
+  color: #f093fb;
+}
+</style><style id="settings-modal-styles">
+.settings-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 9999;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+.settings-overlay.active {
+  display: flex;
+}
+.settings-modal {
+  background: rgba(15, 15, 35, 0.95);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(138, 43, 226, 0.4);
+  border-radius: 16px;
+  padding: 28px 32px;
+  width: 420px;
+  max-width: 90vw;
+  max-height: 85vh;
+  overflow-y: auto;
+  color: #fff;
+  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
+}
+.settings-modal h2 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  background: linear-gradient(135deg, #f093fb, #667eea);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.settings-section {
+  margin-bottom: 20px;
+}
+.settings-section label {
+  display: block;
+  color: #b794f6;
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.settings-section select,
+.settings-section input[type="radio"] {
+  accent-color: #f093fb;
+}
+.settings-section select {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(138, 43, 226, 0.3);
+  background: rgba(255,255,255,0.1);
+  color: #e0d0f0;
+  font-size: 13px;
+  outline: none;
+  cursor: pointer;
+  appearance: auto;
+}
+.settings-section select option {
+  background: #1a1a3a;
+  color: #e0d0f0;
+}
+.settings-section select:focus {
+  border-color: #667eea;
+  box-shadow: 0 0 10px rgba(102,126,234,0.3);
+}
+.settings-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.settings-radio-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: rgba(255,255,255,0.05);
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.settings-radio-item:hover {
+  background: rgba(255,255,255,0.1);
+}
+.settings-radio-item label {
+  margin: 0;
+  font-weight: 400;
+  cursor: pointer;
+  color: #d0c0e8;
+}
+.settings-radio-item input[type="radio"] {
+  margin: 0;
+}
+.settings-btn-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 24px;
+}
+.settings-btn {
+  padding: 10px 28px;
+  border: none;
+  border-radius: 10px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.settings-btn-save {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+}
+.settings-btn-save:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 15px rgba(102,126,234,0.5);
+}
+.settings-btn-cancel {
+  background: rgba(255,255,255,0.1);
+  color: #b794f6;
+  border: 1px solid rgba(138,43,226,0.3);
+}
+.settings-btn-cancel:hover {
+  background: rgba(255,255,255,0.15);
+}
+.settings-description {
+  font-size: 11px;
+  color: rgba(183,148,246,0.7);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+.light-mode .settings-modal {
+  background: rgba(15, 15, 35, 0.95) !important;
+}
+</style><style id="settings-optgroup-styles">
+#settingsAudience optgroup {
+  background: #3a3a4a;
+  color: #e0d0f0;
+  font-weight: 600;
+}
+#settingsAudience option {
+  background: #1a1a3a;
+  color: #e0d0f0;
+}
+.light-mode #settingsAudience optgroup {
+  background: #3a3a4a;
+  color: #e0d0f0;
+}
+.light-mode #settingsAudience option {
+  background: #1a1a3a;
+  color: #e0d0f0;
+}
+</style><style id="time-readout-styles">
+.time-readout {
+  color: #b794f6;
+  font-size: 11px;
+  margin-top: 6px;
+  opacity: 0.85;
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.time-readout-paused {
+  display: none;
+  color: #ff6b6b;
+  font-weight: 600;
+  font-size: 11px;
+}
+.time-readout.paused .time-readout-paused {
+  display: inline;
+}
+.ff-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+}
+.ff-input {
+  width: 80px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(138, 43, 226, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+  color: #b794f6;
+  font-size: 11px;
+  box-sizing: border-box;
+}
+.ff-input::placeholder { color: rgba(183, 148, 246, 0.5); }
+.ff-btn {
+  padding: 4px 10px;
+  border: 1px solid rgba(138, 43, 226, 0.3);
+  border-radius: 8px;
+  background: linear-gradient(135deg, #667eea 0, #764ba2 100%);
+  color: #fff;
+  cursor: pointer;
+  font-size: 11px;
+  white-space: nowrap;
+  transition: 0.2s;
+}
+.ff-btn:hover:not(:disabled) {
+  box-shadow: 0 0 10px rgba(102, 126, 234, 0.4);
+}
+.ff-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.pause-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid rgba(138, 43, 226, 0.3);
+  border-radius: 8px;
+  background: rgba(255,255,255,0.1);
+  color: #f093fb;
+  cursor: pointer;
+  font-size: 16px;
+  transition: 0.2s;
+  vertical-align: middle;
+  margin-left: 8px;
+  padding: 0;
+  line-height: 1;
+}
+.pause-btn:hover {
+  background: rgba(255,255,255,0.2);
+  box-shadow: 0 0 10px rgba(240, 147, 251, 0.3);
+}
+.pause-btn.paused {
+  color: #667eea;
+  border-color: rgba(102, 126, 234, 0.5);
+}
+.pause-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.speed-row {
+  display: flex;
+  align-items: center;
+}
+.speed-row input[type="range"] {
+  flex: 1;
+}
+.light-mode .time-readout {
+  color: #b794f6;
+}
+.light-mode .pause-btn {
+  border-color: rgba(138, 43, 226, 0.3);
+  background: rgba(255,255,255,0.1);
+  color: #f093fb;
+}
+</style></head>
+<body>
+    <div class="chat-panel" data-locked="true">
+        <div class="chat-header" data-locked="true">SynthOS</div>
+        <div class="chat-messages" id="chatMessages" data-locked="true">
+            <div class="chat-message"><p><strong>SynthOS:</strong> Welcome to the <strong>Solar Explorer</strong></p>
+<p><strong>Main View Controls:</strong></p>
+<ul>
+<li><strong>Hover</strong> over any planet to see quick facts</li>
+<li><strong>Click</strong> a planet to enter its detail view with moons</li>
+<li>Use the <strong>speed slider</strong> (top-left) to control time</li>
+<li>Toggle <strong>orbits, labels, and asteroids</strong> with the bottom toolbar</li>
+</ul>
+<p><strong>Detail View:</strong></p>
+<ul>
+<li>Watch moons orbit realistically around the planet</li>
+<li><strong>Hover</strong> over moons for info, <strong>click</strong> to ask AI about them</li>
+<li>Use the <strong>moon speed slider</strong> to control orbital animation</li>
+<li>Ask questions in the sidebar input box</li>
+</ul>
+<p><strong>Solar Explorer Panel</strong> (top-right): Ask any question about the solar system!</p>
+<p>Try clicking on Jupiter or Saturn to see their impressive moon systems! 🪐</p></div>
+        </div>
+        <div class="link-group" data-locked="true">
+            <a href="#" id="saveLink" data-locked="true">Save</a>
+            <a href="/pages" id="pagesLink" data-locked="true">Pages</a>
+            <a href="#" id="resetLink" data-locked="true">Reset</a>
+        </div>
+        <form action="/" method="POST" id="chatForm" data-locked="true">
+            <input type="text" class="chat-input" id="chatInput" name="message" placeholder="Type a message..." data-locked="true">
+            <button type="submit" class="chat-submit" data-locked="true">Send</button>
+        </form>
+    </div>
+    <div class="viewer-panel full-viewer" id="viewerPanel" style="background: #0a0a19;">
+        <div id="solarSystem"><div id="planetDetailCard" class="planet-detail-card"><div class="planet-header">
+    <div class="planet-icon"></div>
+    <div class="planet-name"></div>
+  </div>
+  <div class="stat-row"><span class="stat-label">Type</span><span class="stat-value" data-field="type"></span></div>
+  <div class="stat-row"><span class="stat-label">Diameter</span><span class="stat-value" data-field="diameter"></span></div>
+  <div class="stat-row"><span class="stat-label">Moons</span><span class="stat-value" data-field="moons"></span></div>
+  <div class="fun-fact">
+    <span class="fun-fact-label">Fun Fact</span>
+    <span data-field="funFact"></span>
+  </div>
+  <div class="question-section">
+    <input type="text" class="question-input" placeholder="Ask a question...">
+    <div class="ai-answer"></div>
+  </div></div><div id="detailViewContainer" class="detail-view-container">
+  <div class="detail-planet-area">
+    <canvas id="detailCanvas" class="detail-planet-canvas"></canvas>
+    <div id="moonDetailCard" class="moon-detail-card">
+      <div class="moon-name"></div>
+      <div class="moon-stat"><span class="moon-stat-label">Diameter</span><span class="moon-stat-value" data-field="diameter"></span></div>
+      <div class="moon-stat"><span class="moon-stat-label">Distance</span><span class="moon-stat-value" data-field="distance"></span></div>
+      <div class="moon-stat"><span class="moon-stat-label">Orbital Period</span><span class="moon-stat-value" data-field="period"></span></div>
+      <div class="moon-fun-fact"></div>
+      <div class="moon-click-hint" style="margin-top: 8px; font-size: 10px; color: #f093fb; font-style: italic;"></div>
+    </div>
+  <div id="moonSpeedControl" class="moon-speed-control" style="display: none; position: absolute; top: 20px; left: 20px; z-index: 100; background: rgba(15, 15, 35, 0.6); padding: 15px 20px; border-radius: 15px; border: 1px solid rgba(138, 43, 226, 0.3);">
+      <label style="color: #b794f6; font-size: 13px; display: block; margin-bottom: 8px;">Moon Orbit Speed: <span id="moonSpeedValue">1x</span></label>
+      <div class="speed-row">
+        <input type="range" id="moonSpeedSlider" min="0" max="20" step="0.5" value="1" style="width: 150px; accent-color: #f093fb;">
+        <button class="pause-btn" id="moonPauseBtn" title="Pause/Play">⏸</button>
+      </div>
+      <div class="time-readout" id="moonTimeReadout">
+        <span class="time-readout-speed" id="moonTimeSpeed">~1 days / sec</span>
+        <span class="time-readout-paused" id="moonTimePaused">Paused</span>
+      </div>
+      <div class="ff-row" id="moonFfRow" style="display: none;">
+        <input type="number" id="moonFfDays" class="ff-input" placeholder="Days..." min="1" step="1">
+        <button class="ff-btn" id="moonFfBtn" disabled>Fast Forward ⏩</button>
+      </div>
+    </div></div>
+  <div class="detail-sidebar" id="detailSidebar" style="width: 340px; min-width: 340px; background: rgba(15, 15, 35, 0.95); border-left: 1px solid rgba(138, 43, 226, 0.3); padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow: hidden;">
+    <button class="back-button" id="backToSystem">← Back to System</button>
+    <div class="detail-planet-header" style="display: flex; align-items: center; gap: 12px;">
+      <div id="detailPlanetIcon" style="width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 12px rgba(255, 200, 100, 0.3); flex-shrink: 0;"></div>
+      <div id="detailPlanetName" style="font-size: 20px; font-weight: 600; background: linear-gradient(135deg, #f093fb, #667eea); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;"></div>
+    </div>
+    <div class="detail-stats" style="display: flex; flex-direction: column; gap: 6px; font-size: 12px;">
+      <div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08);"><span style="color: rgba(255,255,255,0.5);">Type</span><span id="detailType" style="color: #fff; font-weight: 500;"></span></div>
+      <div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08);"><span style="color: rgba(255,255,255,0.5);">Diameter</span><span id="detailDiameter" style="color: #fff; font-weight: 500;"></span></div>
+      <div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08);"><span style="color: rgba(255,255,255,0.5);">Distance from Sun</span><span id="detailDistance" style="color: #fff; font-weight: 500;"></span></div>
+      <div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08);"><span style="color: rgba(255,255,255,0.5);">Orbital Period</span><span id="detailOrbitalPeriod" style="color: #fff; font-weight: 500;"></span></div>
+      <div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08);"><span style="color: rgba(255,255,255,0.5);">Day Length</span><span id="detailDayLength" style="color: #fff; font-weight: 500;"></span></div>
+      <div style="display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08);"><span style="color: rgba(255,255,255,0.5);">Surface Temp</span><span id="detailSurfaceTemp" style="color: #fff; font-weight: 500;"></span></div>
+      <div style="display: flex; justify-content: space-between; padding: 6px 0;"><span style="color: rgba(255,255,255,0.5);">Moons</span><span id="detailMoons" style="color: #fff; font-weight: 500;"></span></div>
+    </div>
+    <input type="text" id="planetQuestionInput" placeholder="Ask about this planet..." style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(138, 43, 226, 0.3); background: rgba(255, 255, 255, 0.1); color: #b794f6; font-size: 13px; box-sizing: border-box; flex-shrink: 0;">
+    <div id="planetAnswerBox" style="flex: 1; min-height: 100px; overflow-y: auto; padding: 10px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; font-size: 12px; line-height: 1.5; color: #b794f6;"></div>
+  </div>
+</div></div>
+        <div class="speed-control">
+            <label>Simulation Speed: <span id="speedValue">1x</span></label>
+            <div class="speed-row">
+              <input type="range" id="speedSlider" min="0.0" max="10" step="0.1" value="1" style="width: 150px; accent-color: #f093fb;">
+              <button class="pause-btn" id="pauseBtn" title="Pause/Play">⏸</button>
+            </div>
+            <div class="time-readout" id="mainTimeReadout">
+              <span class="time-readout-speed" id="mainTimeSpeed">~60 days / sec</span>
+              <span class="time-readout-paused" id="mainTimePaused">Paused</span>
+            </div>
+            <div class="ff-row" id="mainFfRow" style="display: none;">
+              <input type="number" id="mainFfDays" class="ff-input" placeholder="Days..." min="1" step="1">
+              <button class="ff-btn" id="mainFfBtn" disabled>Fast Forward ⏩</button>
+            </div>
+        </div>
+        <div class="info-panel" id="infoPanel" style="width: 336px; height: 384px; background: rgba(15, 15, 35, 0.6); display: flex; flex-direction: column; padding: 20px; padding-bottom: 10px; box-sizing: border-box;"><h3 style="margin: 0 0 10px 0; flex-shrink: 0;">Solar Explorer</h3>
+<input type="text" id="solarQuestion" placeholder="Ask about the solar system..." style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(138, 43, 226, 0.3); background: rgba(255, 255, 255, 0.1); color: #b794f6; font-size: 13px; box-sizing: border-box; margin-bottom: 10px; flex-shrink: 0;">
+<div id="solarAnswer" style="flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 10px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; font-size: 12px; line-height: 1.5; color: #b794f6;"></div></div>
+        <div class="controls">
+            <button id="toggleOrbits" class="active">Show Orbits</button>
+            <button id="toggleLabels" class="active">Show Labels</button>
+            <button id="toggleAsteroids">Show Asteroids</button>
+            <button id="resetView">Reset View</button>
+            <button id="openSettings">⚙️ Settings</button>
+        </div>
+        <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
+    <div id="settingsOverlay" class="settings-overlay">
+  <div class="settings-modal">
+    <h2>⚙️ Explorer Settings</h2>
+    <div class="settings-section">
+      <label>Target Audience</label>
+      <select id="settingsAudience">
+        <optgroup label="By Age Group">
+          <option value="ages-5-7">Ages 5–7 (Early Elementary)</option>
+          <option value="ages-8-10">Ages 8–10 (Upper Elementary)</option>
+          <option value="ages-11-13">Ages 11–13 (Middle School)</option>
+          <option value="ages-14-17">Ages 14–17 (High School)</option>
+          <option value="ages-18-plus">Ages 18+ (Adult General)</option>
+        </optgroup>
+        <optgroup label="By Expertise">
+          <option value="casual">Casual Learner</option>
+          <option value="hobbyist" selected="">Hobbyist / Enthusiast</option>
+          <option value="student-undergrad">Undergraduate Student</option>
+          <option value="student-grad">Graduate Student</option>
+          <option value="educator">Educator / Teacher</option>
+          <option value="academic">Academic / Researcher</option>
+          <option value="professional">Professional Astronomer</option>
+        </optgroup>
+      </select>
+      <div class="settings-description">Controls the complexity, vocabulary, and depth of AI responses.</div>
+    </div>
+    <div class="settings-section">
+      <label>Temperature Units</label>
+      <div class="settings-radio-group">
+        <div class="settings-radio-item">
+          <input type="radio" name="tempUnit" id="tempC" value="C" checked="">
+          <label for="tempC">Celsius (°C)</label>
+        </div>
+        <div class="settings-radio-item">
+          <input type="radio" name="tempUnit" id="tempF" value="F">
+          <label for="tempF">Fahrenheit (°F)</label>
+        </div>
+      </div>
+    </div>
+    <div class="settings-section">
+      <label>Distance Units</label>
+      <div class="settings-radio-group">
+        <div class="settings-radio-item">
+          <input type="radio" name="distUnit" id="distKm" value="km" checked="">
+          <label for="distKm">Kilometers (km)</label>
+        </div>
+        <div class="settings-radio-item">
+          <input type="radio" name="distUnit" id="distMi" value="miles">
+          <label for="distMi">Miles (mi)</label>
+        </div>
+      </div>
+    </div>
+    <div class="settings-btn-row">
+      <button class="settings-btn settings-btn-cancel" id="settingsCancel">Cancel</button>
+      <button class="settings-btn settings-btn-save" id="settingsSave">Save Settings</button>
+    </div>
+  </div>
+</div></div>
+    <div id="instructions" style="display: none;" data-locked="true"></div>
+    <div id="thoughts" style="display: none;" data-locked="true">U</div>
+    <script id="solar-sim">
+const container = document.getElementById("solarSystem");
+const canvas = document.createElement("canvas");
+const ctx = canvas.getContext("2d");
+let width, height, centerX, centerY;
+container.appendChild(canvas);
+let simulationSpeed = 1;
+let timeDirection = 1;
+let showOrbits = true;
+let showLabels = true;
+let showAsteroids = false;
+let time = 0;
+let mainPaused = false;
+let moonPausedState = false;
+let mainFfRemaining = 0;
+let moonFfRemaining = 0;
+const planetDetailsData = JSON.parse(document.getElementById('planet-details').textContent);
+const planets = [
+  { name: "Mercury", key: "mercury", color: "#b5b5b5", size: 4, distance: 50, period: 0.24, eccentricity: 0.206 },
+  { name: "Venus", key: "venus", color: "#e6c87a", size: 6, distance: 75, period: 0.62, eccentricity: 0.007 },
+  { name: "Earth", key: "earth", color: "#6b93d6", size: 6, distance: 100, period: 1, eccentricity: 0.017 },
+  { name: "Mars", key: "mars", color: "#c1440e", size: 5, distance: 130, period: 1.88, eccentricity: 0.093 },
+  { name: "Jupiter", key: "jupiter", color: "#d4a574", size: 18, distance: 200, period: 11.86, eccentricity: 0.049 },
+  { name: "Saturn", key: "saturn", color: "#f4d59e", size: 15, distance: 270, period: 29.46, eccentricity: 0.057 },
+  { name: "Uranus", key: "uranus", color: "#d1e7e7", size: 10, distance: 330, period: 84.01, eccentricity: 0.046 },
+  { name: "Neptune", key: "neptune", color: "#5b5ddf", size: 10, distance: 380, period: 164.8, eccentricity: 0.01 },
+  { name: "Pluto", key: "pluto", color: "#a89f91", size: 3, distance: 420, period: 248, eccentricity: 0.249 }
+];
+let asteroids = [];
+let planetPositions = [];
+let hoveredPlanet = null;
+let inDetailView = false;
+window.detailPlanet = null;
+let detailMoons = [];
+let detailMoonPositions = [];
+let detailTime = 0;
+let moonSpeed = 1;
+let hoveredMoon = null;
+let detailAnimId = null;
+// FPS tracking for accurate time readout
+let lastFrameTime = performance.now();
+let currentFps = 60;
+let fpsSmoothing = 0.95;
+function updateFps() {
+  const now = performance.now();
+  const delta = now - lastFrameTime;
+  lastFrameTime = now;
+  if (delta > 0) {
+    const instantFps = 1000 / delta;
+    currentFps = fpsSmoothing * currentFps + (1 - fpsSmoothing) * instantFps;
+  }
+}
+function formatSimTime(daysPerSec) {
+  if (daysPerSec < 0.01) return 'Paused';
+  if (daysPerSec < 1) {
+    return '~' + Math.round(daysPerSec * 24) + ' hours / sec';
+  }
+  if (daysPerSec < 365) {
+    return '~' + Math.round(daysPerSec) + ' days / sec';
+  }
+  const years = daysPerSec / 365;
+  return '~' + years.toFixed(1) + ' years / sec';
+}
+// Throttle readout updates to ~1 per second
+let lastReadoutUpdate = 0;
+const READOUT_INTERVAL = 1000;
+function updateMainTimeReadout(force) {
+  const el = document.getElementById('mainTimeReadout');
+  const speedEl = document.getElementById('mainTimeSpeed');
+  const ffRow = document.getElementById('mainFfRow');
+  if (!el || !speedEl) return;
+  el.classList.toggle('paused', mainPaused);
+  if (ffRow) ffRow.style.display = mainPaused ? 'flex' : 'none';
+  if (mainPaused && !force) return;
+  const now = performance.now();
+  if (!force && now - lastReadoutUpdate < READOUT_INTERVAL) return;
+  lastReadoutUpdate = now;
+  const daysPerSec = currentFps * simulationSpeed;
+  speedEl.textContent = formatSimTime(daysPerSec);
+}
+let lastMoonReadoutUpdate = 0;
+function updateMoonTimeReadout(force) {
+  const el = document.getElementById('moonTimeReadout');
+  const speedEl = document.getElementById('moonTimeSpeed');
+  const ffRow = document.getElementById('moonFfRow');
+  if (!el || !speedEl) return;
+  el.classList.toggle('paused', moonPausedState);
+  if (ffRow) ffRow.style.display = moonPausedState ? 'flex' : 'none';
+  if (moonPausedState && !force) return;
+  const now = performance.now();
+  if (!force && now - lastMoonReadoutUpdate < READOUT_INTERVAL) return;
+  lastMoonReadoutUpdate = now;
+  const daysPerSec = currentFps * moonSpeed / 60;
+  speedEl.textContent = formatSimTime(daysPerSec);
+}
+/* === Orbital State Helpers for AI Context === */
+window.getSystemOrbitalState = function() {
+  const state = {
+    simulationSpeed: simulationSpeed,
+    simulationTimeDirection: timeDirection > 0 ? 'forward' : 'reverse',
+    simulationPaused: mainPaused,
+    simulationTicks: time,
+    planets: []
+  };
+  planets.forEach(function(planet) {
+    const meanAnomaly = (2 * Math.PI) / (365 * planet.period) * time * simulationSpeed;
+    const e = planet.eccentricity;
+    const trueAnomaly = meanAnomaly + 2 * e * Math.sin(meanAnomaly);
+    let angleDeg = ((trueAnomaly * 180 / Math.PI) % 360 + 360) % 360;
+    const r = planet.distance * (1 - e * e) / (1 + e * Math.cos(trueAnomaly));
+    state.planets.push({
+      name: planet.name,
+      angleDegrees: Math.round(angleDeg * 10) / 10,
+      relativeDistanceFromSun: Math.round(r * 10) / 10,
+      orbitalPeriodYears: planet.period
+    });
+  });
+  const closest = { pair: '', distance: Infinity };
+  for (let i = 0; i < state.planets.length; i++) {
+    for (let j = i + 1; j < state.planets.length; j++) {
+      const p1 = state.planets[i];
+      const p2 = state.planets[j];
+      const a1 = p1.angleDegrees * Math.PI / 180;
+      const a2 = p2.angleDegrees * Math.PI / 180;
+      const r1 = p1.relativeDistanceFromSun;
+      const r2 = p2.relativeDistanceFromSun;
+      const dx = r1 * Math.cos(a1) - r2 * Math.cos(a2);
+      const dy = r1 * Math.sin(a1) - r2 * Math.sin(a2);
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < closest.distance) {
+        closest.distance = Math.round(dist * 10) / 10;
+        closest.pair = p1.name + ' and ' + p2.name;
+      }
+    }
+  }
+  state.closestPair = closest;
+  return state;
+};
+window.getDetailOrbitalState = function() {
+  if (!inDetailView || !window.detailPlanet) return null;
+  const state = {
+    planet: window.detailPlanet.name,
+    moonAnimationSpeed: moonSpeed,
+    moonPaused: moonPausedState,
+    moons: []
+  };
+  detailMoons.forEach(function(moon) {
+    let angleDeg = ((moon.angle * 180 / Math.PI) % 360 + 360) % 360;
+    state.moons.push({
+      name: moon.name,
+      angleDegrees: Math.round(angleDeg * 10) / 10,
+      orbitalPeriodDays: moon.periodDays,
+      distanceKm: moon.distanceKm
+    });
+  });
+  return state;
+};
+function generateAsteroids() {
+  asteroids = [];
+  for (let i = 0; i < 500; i++) {
+    asteroids.push({
+      distance: 155 + 35 * Math.random(),
+      angle: Math.random() * Math.PI * 2,
+      speed: 5e-4 + 0.001 * Math.random(),
+      size: 0.5 + 1.5 * Math.random()
+    });
+  }
+}
+function resize() {
+  width = container.clientWidth;
+  height = container.clientHeight;
+  canvas.width = width;
+  canvas.height = height;
+  centerX = width / 2;
+  centerY = height / 2;
+}
+function getOrbitalPosition(planet, t) {
+  const meanAnomaly = (2 * Math.PI) / (365 * planet.period) * t * simulationSpeed;
+  const e = planet.eccentricity;
+  const trueAnomaly = meanAnomaly + 2 * e * Math.sin(meanAnomaly);
+  const r = planet.distance * (1 - e * e) / (1 + e * Math.cos(trueAnomaly));
+  return {
+    x: centerX + r * Math.cos(trueAnomaly),
+    y: centerY + r * Math.sin(trueAnomaly),
+    angle: trueAnomaly
+  };
+}
+function drawOrbit(planet) {
+  ctx.beginPath();
+  ctx.strokeStyle = "rgba(138, 43, 226, 0.35)";
+  ctx.lineWidth = 1;
+  const a = planet.distance;
+  const e = planet.eccentricity;
+  const b = a * Math.sqrt(1 - e * e);
+  const c = a * e;
+  ctx.ellipse(centerX + c, centerY, a, b, 0, 0, 2 * Math.PI);
+  ctx.stroke();
+}
+function drawSun() {
+  const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 60);
+  gradient.addColorStop(0, "rgba(255, 200, 50, 1)");
+  gradient.addColorStop(0.3, "rgba(255, 150, 0, 0.8)");
+  gradient.addColorStop(0.6, "rgba(255, 100, 0, 0.3)");
+  gradient.addColorStop(1, "rgba(255, 50, 0, 0)");
+  ctx.beginPath();
+  ctx.arc(centerX, centerY, 60, 0, 2 * Math.PI);
+  ctx.fillStyle = gradient;
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(centerX, centerY, 25, 0, 2 * Math.PI);
+  ctx.fillStyle = "#fff5c0";
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(centerX, centerY, 30, 0, 2 * Math.PI);
+  ctx.fillStyle = "rgba(255, 220, 100, 0.5)";
+  ctx.fill();
+}
+function drawSaturnRings(x, y, size, angle) {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(0.4);
+  ctx.beginPath();
+  ctx.ellipse(0, 0, 2.2 * size, 0.5 * size, 0, 0, 2 * Math.PI);
+  ctx.strokeStyle = "rgba(210, 180, 140, 0.6)";
+  ctx.lineWidth = 3;
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.ellipse(0, 0, 1.8 * size, 0.4 * size, 0, 0, 2 * Math.PI);
+  ctx.strokeStyle = "rgba(180, 150, 120, 0.4)";
+  ctx.lineWidth = 2;
+  ctx.stroke();
+  ctx.restore();
+}
+function drawPlanet(planet, pos) {
+  ctx.beginPath();
+  ctx.arc(pos.x + 2, pos.y + 2, planet.size, 0, 2 * Math.PI);
+  ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
+  ctx.fill();
+  const gradient = ctx.createRadialGradient(
+    pos.x - 0.3 * planet.size, pos.y - 0.3 * planet.size, 0,
+    pos.x, pos.y, planet.size
+  );
+  gradient.addColorStop(0, lightenColor(planet.color, 30));
+  gradient.addColorStop(1, planet.color);
+  ctx.beginPath();
+  ctx.arc(pos.x, pos.y, planet.size, 0, 2 * Math.PI);
+  ctx.fillStyle = gradient;
+  ctx.fill();
+  if (planet.name === "Saturn") {
+    drawSaturnRings(pos.x, pos.y, planet.size, pos.angle);
+  }
+  if (showLabels) {
+    ctx.fillStyle = "#e0d0f0";
+    ctx.font = "bold 11px Segoe UI, sans-serif";
+    ctx.textAlign = "center";
+    ctx.shadowColor = "rgba(240, 147, 251, 0.6)";
+    ctx.shadowBlur = 4;
+    ctx.fillText(planet.name, pos.x, pos.y - planet.size - 8);
+    ctx.shadowColor = "transparent";
+    ctx.shadowBlur = 0;
+  }
+}
+function drawAsteroidBelt() {
+  ctx.fillStyle = "rgba(150, 150, 150, 0.6)";
+  asteroids.forEach(function(asteroid) {
+    if (!mainPaused) {
+      asteroid.angle += asteroid.speed * simulationSpeed * timeDirection;
+    }
+    const x = centerX + asteroid.distance * Math.cos(asteroid.angle);
+    const y = centerY + asteroid.distance * Math.sin(asteroid.angle);
+    ctx.beginPath();
+    ctx.arc(x, y, asteroid.size, 0, 2 * Math.PI);
+    ctx.fill();
+  });
+}
+function lightenColor(color, percent) {
+  const num = parseInt(color.replace("#", ""), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = (num >> 16) + amt;
+  const G = (num >> 8 & 255) + amt;
+  const B = (num & 255) + amt;
+  return "#" + (
+    16777216 +
+    65536 * (R < 255 ? (R < 1 ? 0 : R) : 255) +
+    256 * (G < 255 ? (G < 1 ? 0 : G) : 255) +
+    (B < 255 ? (B < 1 ? 0 : B) : 255)
+  ).toString(16).slice(1);
+}
+generateAsteroids();
+resize();
+window.addEventListener("resize", function() {
+  resize();
+  if (inDetailView) {
+    resizeDetailCanvas();
+  }
+});
+let stars = [];
+function generateStars() {
+  stars = [];
+  for (let i = 0; i < 200; i++) {
+    stars.push({
+      x: Math.random() * width,
+      y: Math.random() * height,
+      size: 1.5 * Math.random(),
+      brightness: 0.3 + 0.7 * Math.random()
+    });
+  }
+}
+function drawStars() {
+  stars.forEach(function(star) {
+    const twinkle = 0.8 + 0.2 * Math.sin(0.01 * time + star.x);
+    ctx.beginPath();
+    ctx.arc(star.x, star.y, star.size, 0, 2 * Math.PI);
+    ctx.fillStyle = "rgba(255, 255, 255, " + (star.brightness * twinkle) + ")";
+    ctx.fill();
+  });
+}
+function animate() {
+  updateFps();
+  ctx.fillStyle = "rgba(10, 10, 25, 1)";
+  ctx.fillRect(0, 0, width, height);
+  drawStars();
+  if (showOrbits) {
+    planets.forEach(function(planet) { drawOrbit(planet); });
+  }
+  if (showAsteroids) {
+    drawAsteroidBelt();
+  }
+  drawSun();
+  planetPositions = [];
+  planets.forEach(function(planet) {
+    const pos = getOrbitalPosition(planet, time);
+    planetPositions.push({ planet: planet, x: pos.x, y: pos.y, size: planet.size });
+    drawPlanet(planet, pos);
+  });
+  if (hoveredPlanet) {
+    const hp = planetPositions.find(p => p.planet.name === hoveredPlanet.name);
+    if (hp) {
+      ctx.beginPath();
+      ctx.arc(hp.x, hp.y, hp.size + 4, 0, 2 * Math.PI);
+      ctx.strokeStyle = "rgba(240, 147, 251, 0.6)";
+      ctx.lineWidth = 2;
+      ctx.stroke();
+    }
+  }
+  if (!mainPaused) {
+    time += timeDirection;
+    if (mainFfRemaining > 0) {
+      mainFfRemaining--;
+      if (mainFfRemaining <= 0) {
+        mainFfRemaining = 0;
+        mainPaused = true;
+        var pb = document.getElementById('pauseBtn');
+        pb.textContent = '▶'; pb.classList.add('paused'); pb.title = 'Play';
+        updateMainTimeReadout(true);
+      }
+    }
+  }
+  updateMainTimeReadout();
+  if (!inDetailView) {
+    requestAnimationFrame(animate);
+  }
+}
+generateStars();
+document.getElementById("speedSlider").addEventListener("input", function(e) {
+  simulationSpeed = parseFloat(e.target.value);
+  document.getElementById("speedValue").textContent = simulationSpeed.toFixed(1) + "x";
+  document.getElementById("pauseBtn").disabled = simulationSpeed === 0;
+  updateMainTimeReadout(true);
+});
+// Pause button for main view
+document.getElementById("pauseBtn").addEventListener("click", function() {
+  mainPaused = !mainPaused;
+  this.textContent = mainPaused ? '▶' : '⏸';
+  this.classList.toggle('paused', mainPaused);
+  this.title = mainPaused ? 'Play' : 'Pause';
+  updateMainTimeReadout(true);
+});
+// Fast-forward input/button for main view
+document.getElementById('mainFfDays').addEventListener('input', function() {
+  document.getElementById('mainFfBtn').disabled = !(parseFloat(this.value) > 0);
+});
+document.getElementById('mainFfBtn').addEventListener('click', function() {
+  var days = parseFloat(document.getElementById('mainFfDays').value);
+  if (!(days > 0) || simulationSpeed === 0) return;
+  mainFfRemaining = Math.ceil(days / simulationSpeed);
+  mainPaused = false;
+  var pb = document.getElementById('pauseBtn');
+  pb.textContent = '⏸'; pb.classList.remove('paused'); pb.title = 'Pause';
+  updateMainTimeReadout(true);
+});
+document.getElementById("toggleOrbits").addEventListener("click", function(e) {
+  showOrbits = !showOrbits;
+  e.target.classList.toggle("active");
+});
+document.getElementById("toggleLabels").addEventListener("click", function(e) {
+  showLabels = !showLabels;
+  e.target.classList.toggle("active");
+});
+document.getElementById("toggleAsteroids").addEventListener("click", function(e) {
+  showAsteroids = !showAsteroids;
+  e.target.classList.toggle("active");
+});
+document.getElementById("resetView").addEventListener("click", function() {
+  time = 0;
+  simulationSpeed = 1;
+  timeDirection = 1;
+  mainPaused = false;
+  mainFfRemaining = 0;
+  document.getElementById("speedSlider").value = 1;
+  document.getElementById("speedValue").textContent = "1x";
+  document.getElementById("pauseBtn").disabled = false;
+  const pauseBtn = document.getElementById("pauseBtn");
+  pauseBtn.textContent = '⏸';
+  pauseBtn.classList.remove('paused');
+  pauseBtn.title = 'Pause';
+  document.getElementById('mainFfDays').value = '';
+  document.getElementById('mainFfBtn').disabled = true;
+  updateMainTimeReadout(true);
+});
+/* Detail card hover logic */
+const detailCard = document.getElementById('planetDetailCard');
+function getPlanetAtPosition(mx, my) {
+  for (let i = planetPositions.length - 1; i >= 0; i--) {
+    const pp = planetPositions[i];
+    const dx = mx - pp.x;
+    const dy = my - pp.y;
+    const hitRadius = Math.max(pp.size + 6, 12);
+    if (dx * dx + dy * dy <= hitRadius * hitRadius) {
+      return pp;
+    }
+  }
+  return null;
+}
+function showDetailCard(pp, mx, my) {
+  const planet = pp.planet;
+  const data = planetDetailsData.planets[planet.key];
+  if (!data) return;
+  detailCard.querySelector('.planet-icon').style.background = planet.color;
+  detailCard.querySelector('.planet-name').textContent = data.name;
+  detailCard.querySelector('[data-field="type"]').textContent = data.type;
+  detailCard.querySelector('[data-field="diameter"]').textContent = typeof window.convertDist === 'function' ? window.convertDist(data.diameter) : data.diameter;
+  detailCard.querySelector('[data-field="moons"]').textContent = data.moons;
+  detailCard.querySelector('[data-field="funFact"]').textContent = data.funFact;
+  detailCard.classList.add('mode-funfact');
+  detailCard.classList.remove('mode-question');
+  let cardX = pp.x + pp.size + 15;
+  let cardY = pp.y - 60;
+  const cardWidth = 260;
+  const cardHeight = 280;
+  const containerRect = container.getBoundingClientRect();
+  if (cardX + cardWidth > containerRect.width - 20) {
+    cardX = pp.x - pp.size - cardWidth - 15;
+  }
+  if (cardY < 10) cardY = 10;
+  if (cardY + cardHeight > containerRect.height - 10) {
+    cardY = containerRect.height - cardHeight - 10;
+  }
+  detailCard.style.left = cardX + 'px';
+  detailCard.style.top = cardY + 'px';
+  detailCard.classList.add('visible');
+}
+function hideDetailCard() {
+  detailCard.classList.remove('visible');
+}
+canvas.addEventListener("mousemove", function(e) {
+  if (inDetailView) return;
+  const rect = canvas.getBoundingClientRect();
+  const mx = e.clientX - rect.left;
+  const my = e.clientY - rect.top;
+  const pp = getPlanetAtPosition(mx, my);
+  if (pp) {
+    hoveredPlanet = pp.planet;
+    canvas.style.cursor = 'pointer';
+    showDetailCard(pp, mx, my);
+  } else {
+    hoveredPlanet = null;
+    canvas.style.cursor = 'default';
+    hideDetailCard();
+  }
+});
+canvas.addEventListener("mouseleave", function() {
+  if (inDetailView) return;
+  hoveredPlanet = null;
+  canvas.style.cursor = 'default';
+  hideDetailCard();
+});
+/* ===== DETAIL VIEW ===== */
+const detailViewContainer = document.getElementById('detailViewContainer');
+const detailCanvas = document.getElementById('detailCanvas');
+const detailCtx = detailCanvas.getContext('2d');
+const moonDetailCard = document.getElementById('moonDetailCard');
+const moonSpeedControl = document.getElementById('moonSpeedControl');
+const backToSystem = document.getElementById('backToSystem');
+let detailStars = [];
+let detailWidth = 0;
+let detailHeight = 0;
+function generateDetailStars(w, h) {
+  detailStars = [];
+  for (let i = 0; i < 150; i++) {
+    detailStars.push({
+      x: Math.random() * w,
+      y: Math.random() * h,
+      size: 1.5 * Math.random(),
+      brightness: 0.3 + 0.7 * Math.random()
+    });
+  }
+}
+function resizeDetailCanvas() {
+  const area = detailViewContainer.querySelector('.detail-planet-area');
+  if (!area) return;
+  detailWidth = area.clientWidth;
+  detailHeight = area.clientHeight;
+  detailCanvas.width = detailWidth;
+  detailCanvas.height = detailHeight;
+  generateDetailStars(detailWidth, detailHeight);
+}
+const moonColors = [
+  '#c8c8c8', '#a0a0b0', '#d4c4a8', '#b8a898',
+  '#e0d8c8', '#9898a8', '#c0b8a0', '#a8b0b8',
+  '#d0c0b0', '#b0a8c0', '#c8c0b8', '#a8a0a0'
+];
+function openDetailView(planetObj) {
+  inDetailView = true;
+  window.detailPlanet = planetObj;
+  hideDetailCard();
+  hoveredPlanet = null;
+  const data = planetDetailsData.planets[planetObj.key];
+  if (!data) return;
+  document.getElementById('detailPlanetIcon').style.background = planetObj.color;
+  document.getElementById('detailPlanetName').textContent = data.name;
+  document.getElementById('detailType').textContent = data.type;
+  document.getElementById('detailDiameter').textContent = typeof window.convertDist === 'function' ? window.convertDist(data.diameter) : data.diameter;
+  document.getElementById('detailDistance').textContent = (typeof window.convertDist === 'function' && data.distance) ? window.convertDist(data.distance) : (data.distance || '\u2014');
+  document.getElementById('detailOrbitalPeriod').textContent = data.orbitalPeriod || '\u2014';
+  document.getElementById('detailDayLength').textContent = data.dayLength || '\u2014';
+  document.getElementById('detailSurfaceTemp').textContent = (typeof window.convertTemp === 'function' && data.surfaceTemp) ? window.convertTemp(data.surfaceTemp) : (data.surfaceTemp || '\u2014');
+  document.getElementById('detailMoons').textContent = data.moons;
+  const questionInput = document.getElementById('planetQuestionInput');
+  const answerBox = document.getElementById('planetAnswerBox');
+  if (questionInput) questionInput.value = '';
+  if (answerBox) answerBox.innerHTML = '';
+  detailMoons = [];
+  if (data.moonData) {
+    const moonKeys = Object.keys(data.moonData);
+    moonKeys.forEach(function(key, idx) {
+      const md = data.moonData[key];
+      let periodDays = parseFloat(md.orbitalPeriod);
+      if (md.orbitalPeriod.toLowerCase().includes('hour')) {
+        periodDays = parseFloat(md.orbitalPeriod) / 24;
+      }
+      if (isNaN(periodDays)) periodDays = 5;
+      let distanceKm = md.distanceKm || 500000;
+      detailMoons.push({
+        key: key,
+        name: md.name,
+        diameter: md.diameter,
+        distanceStr: md.distance,
+        distanceKm: distanceKm,
+        orbitalPeriod: md.orbitalPeriod,
+        funFact: md.funFact,
+        periodDays: periodDays,
+        color: moonColors[idx % moonColors.length],
+        angle: Math.random() * Math.PI * 2,
+        orbitIndex: idx
+      });
+    });
+    detailMoons.sort((a, b) => a.distanceKm - b.distanceKm);
+    moonSpeedControl.style.display = 'block';
+  } else {
+    moonSpeedControl.style.display = 'none';
+  }
+  detailViewContainer.classList.add('active');
+  document.querySelector('.controls').style.display = 'none';
+  document.querySelector('.speed-control').style.display = 'none';
+  document.getElementById('infoPanel').style.display = 'none';
+  // Reset moon pause state
+  moonPausedState = false;
+  moonFfRemaining = 0;
+  const moonPauseBtn = document.getElementById('moonPauseBtn');
+  if (moonPauseBtn) {
+    moonPauseBtn.textContent = '⏸';
+    moonPauseBtn.classList.remove('paused');
+    moonPauseBtn.title = 'Pause';
+    moonPauseBtn.disabled = false;
+  }
+  var moonFfDaysEl = document.getElementById('moonFfDays');
+  if (moonFfDaysEl) { moonFfDaysEl.value = ''; }
+  var moonFfBtnEl = document.getElementById('moonFfBtn');
+  if (moonFfBtnEl) { moonFfBtnEl.disabled = true; }
+  setTimeout(function() {
+    resizeDetailCanvas();
+    detailTime = 0;
+    moonSpeed = 1;
+    const moonSpeedSlider = document.getElementById('moonSpeedSlider');
+    const moonSpeedValue = document.getElementById('moonSpeedValue');
+    if (moonSpeedSlider) moonSpeedSlider.value = 1;
+    if (moonSpeedValue) moonSpeedValue.textContent = '1x';
+    updateMoonTimeReadout(true);
+    animateDetail();
+  }, 50);
+}
+function closeDetailView() {
+  inDetailView = false;
+  window.detailPlanet = null;
+  detailMoons = [];
+  detailMoonPositions = [];
+  hoveredMoon = null;
+  moonPausedState = false;
+  moonDetailCard.classList.remove('visible');
+  detailViewContainer.classList.remove('active');
+  document.querySelector('.controls').style.display = 'flex';
+  document.querySelector('.speed-control').style.display = 'block';
+  document.getElementById('infoPanel').style.display = 'block';
+  if (detailAnimId) {
+    cancelAnimationFrame(detailAnimId);
+    detailAnimId = null;
+  }
+  animate();
+}
+function animateDetail() {
+  if (!inDetailView) return;
+  updateFps();
+  const w = detailCanvas.width;
+  const h = detailCanvas.height;
+  const cx = w / 2;
+  const cy = h / 2;
+  detailCtx.fillStyle = '#0a0a19';
+  detailCtx.fillRect(0, 0, w, h);
+  detailStars.forEach(function(star) {
+    const twinkle = 0.8 + 0.2 * Math.sin(0.01 * detailTime + star.x);
+    detailCtx.beginPath();
+    detailCtx.arc(star.x, star.y, star.size, 0, 2 * Math.PI);
+    detailCtx.fillStyle = 'rgba(255,255,255,' + (star.brightness * twinkle) + ')';
+    detailCtx.fill();
+  });
+  const planetRadius = Math.min(w, h) * 0.08;
+  const moonCount = detailMoons.length;
+  const minOrbitRadius = planetRadius + 30;
+  const maxOrbitRadius = Math.min(w, h) * 0.46;
+  let minDist = Infinity, maxDist = 0;
+  detailMoons.forEach(function(moon) {
+    if (moon.distanceKm < minDist) minDist = moon.distanceKm;
+    if (moon.distanceKm > maxDist) maxDist = moon.distanceKm;
+  });
+  const logMin = Math.log(minDist || 1);
+  const logMax = Math.log(maxDist || 1);
+  const logRange = logMax - logMin || 1;
+  const glowGrad = detailCtx.createRadialGradient(cx, cy, planetRadius * 0.8, cx, cy, planetRadius * 2.5);
+  glowGrad.addColorStop(0, window.detailPlanet.color + '40');
+  glowGrad.addColorStop(1, 'transparent');
+  detailCtx.beginPath();
+  detailCtx.arc(cx, cy, planetRadius * 2.5, 0, 2 * Math.PI);
+  detailCtx.fillStyle = glowGrad;
+  detailCtx.fill();
+  const pGrad = detailCtx.createRadialGradient(
+    cx - planetRadius * 0.3, cy - planetRadius * 0.3, 0,
+    cx, cy, planetRadius
+  );
+  pGrad.addColorStop(0, lightenColor(window.detailPlanet.color, 40));
+  pGrad.addColorStop(0.7, window.detailPlanet.color);
+  pGrad.addColorStop(1, lightenColor(window.detailPlanet.color, -20));
+  detailCtx.beginPath();
+  detailCtx.arc(cx, cy, planetRadius, 0, 2 * Math.PI);
+  detailCtx.fillStyle = pGrad;
+  detailCtx.fill();
+  if (window.detailPlanet.name === 'Saturn') {
+    detailCtx.save();
+    detailCtx.translate(cx, cy);
+    detailCtx.rotate(0.4);
+    detailCtx.beginPath();
+    detailCtx.ellipse(0, 0, planetRadius * 2.0, planetRadius * 0.45, 0, 0, 2 * Math.PI);
+    detailCtx.strokeStyle = 'rgba(210, 180, 140, 0.6)';
+    detailCtx.lineWidth = 6;
+    detailCtx.stroke();
+    detailCtx.beginPath();
+    detailCtx.ellipse(0, 0, planetRadius * 1.7, planetRadius * 0.38, 0, 0, 2 * Math.PI);
+    detailCtx.strokeStyle = 'rgba(180, 150, 120, 0.4)';
+    detailCtx.lineWidth = 4;
+    detailCtx.stroke();
+    detailCtx.beginPath();
+    detailCtx.ellipse(0, 0, planetRadius * 2.2, planetRadius * 0.5, 0, 0, 2 * Math.PI);
+    detailCtx.strokeStyle = 'rgba(190, 160, 130, 0.3)';
+    detailCtx.lineWidth = 3;
+    detailCtx.stroke();
+    detailCtx.restore();
+  }
+  detailMoonPositions = [];
+  detailMoons.forEach(function(moon, idx) {
+    let orbitRadius;
+    if (moonCount === 1) {
+      orbitRadius = (minOrbitRadius + maxOrbitRadius) / 2;
+    } else {
+      const logDist = Math.log(moon.distanceKm);
+      const normalizedDist = (logDist - logMin) / logRange;
+      orbitRadius = minOrbitRadius + normalizedDist * (maxOrbitRadius - minOrbitRadius);
+    }
+    detailCtx.beginPath();
+    detailCtx.arc(cx, cy, orbitRadius, 0, 2 * Math.PI);
+    detailCtx.strokeStyle = 'rgba(138, 43, 226, 0.25)';
+    detailCtx.lineWidth = 1;
+    detailCtx.stroke();
+    if (!moonPausedState) {
+      const angularSpeed = (2 * Math.PI) / (moon.periodDays * 60) * moonSpeed;
+      moon.angle += angularSpeed;
+    }
+    const mx = cx + orbitRadius * Math.cos(moon.angle);
+    const my = cy + orbitRadius * Math.sin(moon.angle);
+    let moonRadius = 4 + (moonCount > 4 ? 2 : 4) * (1 - idx * 0.05);
+    moonRadius = Math.max(3, Math.min(moonRadius, 8));
+    detailCtx.beginPath();
+    detailCtx.arc(mx + 1, my + 1, moonRadius, 0, 2 * Math.PI);
+    detailCtx.fillStyle = 'rgba(0,0,0,0.3)';
+    detailCtx.fill();
+    const mGrad = detailCtx.createRadialGradient(
+      mx - moonRadius * 0.3, my - moonRadius * 0.3, 0,
+      mx, my, moonRadius
+    );
+    mGrad.addColorStop(0, lightenColor(moon.color, 30));
+    mGrad.addColorStop(1, moon.color);
+    detailCtx.beginPath();
+    detailCtx.arc(mx, my, moonRadius, 0, 2 * Math.PI);
+    detailCtx.fillStyle = mGrad;
+    detailCtx.fill();
+    detailCtx.fillStyle = '#d0c0e8';
+    detailCtx.font = '10px Segoe UI, sans-serif';
+    detailCtx.textAlign = 'center';
+    detailCtx.fillText(moon.name.split('(')[0].trim(), mx, my - moonRadius - 6);
+    if (hoveredMoon && hoveredMoon.key === moon.key) {
+      detailCtx.beginPath();
+      detailCtx.arc(mx, my, moonRadius + 3, 0, 2 * Math.PI);
+      detailCtx.strokeStyle = 'rgba(240, 147, 251, 0.7)';
+      detailCtx.lineWidth = 2;
+      detailCtx.stroke();
+    }
+    detailMoonPositions.push({
+      moon: moon,
+      x: mx,
+      y: my,
+      radius: moonRadius
+    });
+  });
+  detailCtx.fillStyle = '#f0e0ff';
+  detailCtx.font = 'bold 16px Segoe UI, sans-serif';
+  detailCtx.textAlign = 'center';
+  detailCtx.shadowColor = 'rgba(240, 147, 251, 0.8)';
+  detailCtx.shadowBlur = 6;
+  detailCtx.fillText(window.detailPlanet.name, cx, cy + planetRadius + 25);
+  detailCtx.shadowColor = 'transparent';
+  detailCtx.shadowBlur = 0;
+  if (moonCount === 0) {
+    detailCtx.fillStyle = 'rgba(183, 148, 246, 0.6)';
+    detailCtx.font = '14px Segoe UI, sans-serif';
+    detailCtx.textAlign = 'center';
+    detailCtx.fillText('No known moons', cx, cy + planetRadius + 50);
+  }
+  detailTime++;
+  if (!moonPausedState && moonFfRemaining > 0) {
+    moonFfRemaining--;
+    if (moonFfRemaining <= 0) {
+      moonFfRemaining = 0;
+      moonPausedState = true;
+      var mpb = document.getElementById('moonPauseBtn');
+      if (mpb) { mpb.textContent = '▶'; mpb.classList.add('paused'); mpb.title = 'Play'; }
+      updateMoonTimeReadout(true);
+    }
+  }
+  updateMoonTimeReadout();
+  detailAnimId = requestAnimationFrame(animateDetail);
+}
+function getMoonAtPosition(mx, my) {
+  for (let i = detailMoonPositions.length - 1; i >= 0; i--) {
+    const mp = detailMoonPositions[i];
+    const dx = mx - mp.x;
+    const dy = my - mp.y;
+    const hitRadius = Math.max(mp.radius + 5, 10);
+    if (dx * dx + dy * dy <= hitRadius * hitRadius) {
+      return mp;
+    }
+  }
+  return null;
+}
+function showMoonDetailCard(mp, clientX, clientY) {
+  const moon = mp.moon;
+  const moonShortName = moon.name.split('(')[0].trim();
+  moonDetailCard.querySelector('.moon-name').textContent = moon.name;
+  moonDetailCard.querySelector('[data-field="diameter"]').textContent = typeof window.convertDist === 'function' ? window.convertDist(moon.diameter) : moon.diameter;
+  moonDetailCard.querySelector('[data-field="distance"]').textContent = typeof window.convertDist === 'function' ? window.convertDist(moon.distanceStr) : moon.distanceStr;
+  moonDetailCard.querySelector('[data-field="period"]').textContent = moon.orbitalPeriod;
+  moonDetailCard.querySelector('.moon-fun-fact').textContent = moon.funFact;
+  moonDetailCard.querySelector('.moon-click-hint').textContent = 'Click ' + moonShortName + ' to learn more';
+  const areaRect = detailViewContainer.querySelector('.detail-planet-area').getBoundingClientRect();
+  let cardX = clientX - areaRect.left + 15;
+  let cardY = clientY - areaRect.top - 30;
+  const cardW = 220;
+  const cardH = 220;
+  if (cardX + cardW > areaRect.width - 10) cardX = clientX - areaRect.left - cardW - 15;
+  if (cardY < 10) cardY = 10;
+  if (cardY + cardH > areaRect.height - 10) cardY = areaRect.height - cardH - 10;
+  moonDetailCard.style.left = cardX + 'px';
+  moonDetailCard.style.top = cardY + 'px';
+  moonDetailCard.classList.add('visible');
+}
+detailCanvas.addEventListener('mousemove', function(e) {
+  const rect = detailCanvas.getBoundingClientRect();
+  const mx = e.clientX - rect.left;
+  const my = e.clientY - rect.top;
+  const mp = getMoonAtPosition(mx, my);
+  if (mp) {
+    hoveredMoon = mp.moon;
+    detailCanvas.style.cursor = 'pointer';
+    showMoonDetailCard(mp, e.clientX, e.clientY);
+  } else {
+    hoveredMoon = null;
+    detailCanvas.style.cursor = 'default';
+    moonDetailCard.classList.remove('visible');
+  }
+});
+detailCanvas.addEventListener('mouseleave', function() {
+  hoveredMoon = null;
+  detailCanvas.style.cursor = 'default';
+  moonDetailCard.classList.remove('visible');
+});
+detailCanvas.addEventListener('click', function(e) {
+  const rect = detailCanvas.getBoundingClientRect();
+  const mx = e.clientX - rect.left;
+  const my = e.clientY - rect.top;
+  const mp = getMoonAtPosition(mx, my);
+  if (mp) {
+    const moonName = mp.moon.name.split('(')[0].trim();
+    const questionInput = document.getElementById('planetQuestionInput');
+    if (questionInput) {
+      questionInput.value = 'tell me about ' + moonName;
+      questionInput.focus();
+      if (typeof window.triggerPlanetQuestion === 'function') {
+        window.triggerPlanetQuestion();
+      }
+    }
+  }
+});
+// Moon speed slider
+document.getElementById('moonSpeedSlider').addEventListener('input', function(e) {
+  moonSpeed = parseFloat(e.target.value);
+  document.getElementById('moonSpeedValue').textContent = moonSpeed.toFixed(1) + 'x';
+  document.getElementById('moonPauseBtn').disabled = moonSpeed === 0;
+  updateMoonTimeReadout(true);
+});
+// Moon pause button
+document.getElementById('moonPauseBtn').addEventListener('click', function() {
+  moonPausedState = !moonPausedState;
+  this.textContent = moonPausedState ? '▶' : '⏸';
+  this.classList.toggle('paused', moonPausedState);
+  this.title = moonPausedState ? 'Play' : 'Pause';
+  updateMoonTimeReadout(true);
+});
+// Fast-forward input/button for moon view
+document.getElementById('moonFfDays').addEventListener('input', function() {
+  document.getElementById('moonFfBtn').disabled = !(parseFloat(this.value) > 0);
+});
+document.getElementById('moonFfBtn').addEventListener('click', function() {
+  var days = parseFloat(document.getElementById('moonFfDays').value);
+  if (!(days > 0) || moonSpeed === 0) return;
+  moonFfRemaining = Math.ceil(days * 60 / moonSpeed);
+  moonPausedState = false;
+  var mpb = document.getElementById('moonPauseBtn');
+  if (mpb) { mpb.textContent = '⏸'; mpb.classList.remove('paused'); mpb.title = 'Pause'; }
+  updateMoonTimeReadout(true);
+});
+backToSystem.addEventListener('click', function() {
+  closeDetailView();
+});
+canvas.addEventListener("click", function(e) {
+  if (inDetailView) return;
+  const rect = canvas.getBoundingClientRect();
+  const mx = e.clientX - rect.left;
+  const my = e.clientY - rect.top;
+  const pp = getPlanetAtPosition(mx, my);
+  if (pp) {
+    openDetailView(pp.planet);
+  }
+});
+const viewerPanel = document.getElementById('viewerPanel');
+if (viewerPanel) {
+  const resizeObserver = new ResizeObserver(function() {
+    if (inDetailView) {
+      resizeDetailCanvas();
+    }
+  });
+  resizeObserver.observe(viewerPanel);
+}
+animate();
+</script>
+<script id="tutorial-links">document.addEventListener('click',function(e){if(e.target.classList.contains('tutorial-link')){e.preventDefault();const message=e.target.getAttribute('data-message');const chatInput=document.getElementById('chatInput');if(chatInput&&message){chatInput.value=message;chatInput.focus()}}});</script>
+<script id="solar-ai-question">
+(function() {
+  const questionInput = document.getElementById('solarQuestion');
+  const answerBox = document.getElementById('solarAnswer');
+  // Conversation history (max 10 pairs)
+  let conversationHistory = [];
+  const MAX_HISTORY = 10;
+  function formatHistory() {
+    if (conversationHistory.length === 0) return '';
+    let historyStr = '\n<CONVERSATION_HISTORY>\n';
+    conversationHistory.forEach((pair, i) => {
+      historyStr += `User: ${pair.question}\nAssistant: ${pair.answer}\n\n`;
+    });
+    historyStr += '</CONVERSATION_HISTORY>\n';
+    return historyStr;
+  }
+  function formatOrbitalContext() {
+    if (typeof window.getSystemOrbitalState !== 'function') return '';
+    const state = window.getSystemOrbitalState();
+    if (!state) return '';
+    let ctx = '\n<SIMULATION_STATE>\n';
+    ctx += 'Simulation speed: ' + state.simulationSpeed.toFixed(1) + 'x (time direction: ' + state.simulationTimeDirection + ')\n';
+    ctx += 'Current orbital positions (0° = right/3 o\'clock, angles increase counter-clockwise):\n';
+    state.planets.forEach(function(p) {
+      ctx += '  ' + p.name + ': ' + p.angleDegrees + '° from reference, relative distance from Sun: ' + p.relativeDistanceFromSun + ' units (orbital period: ' + p.orbitalPeriodYears + ' Earth years)\n';
+    });
+    if (state.closestPair) {
+      ctx += 'Currently closest pair: ' + state.closestPair.pair + ' (distance: ' + state.closestPair.distance + ' units apart)\n';
+    }
+    ctx += 'Note: These are scaled simulation positions. Distances are relative/proportional, not actual astronomical distances. Angles represent current orbital positions in the simulation.\n';
+    ctx += '</SIMULATION_STATE>\n';
+    return ctx;
+  }
+  async function askQuestion() {
+    const question = questionInput.value.trim();
+    if (!question) return;
+    questionInput.disabled = true;
+    answerBox.innerHTML = '<em>Thinking...</em>';
+    try {
+      const historyContext = formatHistory();
+      const orbitalContext = formatOrbitalContext();
+      const audienceContext = (typeof window.getAudiencePrompt === 'function') ? '\n' + window.getAudiencePrompt() : '';
+      const prompt = `You're an expert on the solar system. The user is viewing an interactive solar system simulation.\n\n<INSTRUCTION>\nYou can return markdown but avoid using # headings.${audienceContext}\nThe user can see the simulation and may ask questions about current positions of planets. Use the simulation state data to answer positional/relational questions. Make it clear when you're referring to the simulation vs. real life.\n</INSTRUCTION>${orbitalContext}${historyContext}\n<QUESTION>\n${question}`;
+      const result = await synthos.generate.completion({ prompt });
+      answerBox.innerHTML = marked.parse(result.answer);
+      // Add to history
+      conversationHistory.push({ question: question, answer: result.answer });
+      if (conversationHistory.length > MAX_HISTORY) {
+        conversationHistory.shift();
+      }
+    } catch (err) {
+      answerBox.innerHTML = '<span style="color: #ff6b6b;">Error: Could not get answer.</span>';
+    } finally {
+      questionInput.disabled = false;
+      questionInput.value = '';
+      questionInput.focus();
+    }
+  }
+  questionInput.addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') askQuestion();
+  });
+})();
+</script><script id="planet-detail-ai-question">
+(function() {
+  const questionInput = document.getElementById('planetQuestionInput');
+  const answerBox = document.getElementById('planetAnswerBox');
+  if (!questionInput || !answerBox) return;
+  // Conversation history per planet (max 10 pairs)
+  let conversationHistory = [];
+  let currentPlanetKey = null;
+  const MAX_HISTORY = 10;
+  function formatHistory() {
+    if (conversationHistory.length === 0) return '';
+    let historyStr = '\n<CONVERSATION_HISTORY>\n';
+    conversationHistory.forEach((pair, i) => {
+      historyStr += `User: ${pair.question}\nAssistant: ${pair.answer}\n\n`;
+    });
+    historyStr += '</CONVERSATION_HISTORY>\n';
+    return historyStr;
+  }
+  function formatDetailOrbitalContext() {
+    if (typeof window.getDetailOrbitalState !== 'function') return '';
+    const state = window.getDetailOrbitalState();
+    if (!state) return '';
+    let ctx = '\n<SIMULATION_STATE>\n';
+    ctx += 'Viewing: ' + state.planet + ' detail view\n';
+    ctx += 'Moon animation speed: ' + state.moonAnimationSpeed.toFixed(1) + 'x\n';
+    if (state.moons.length > 0) {
+      ctx += 'Current moon orbital positions (0° = right/3 o\'clock, angles increase counter-clockwise):\n';
+      state.moons.forEach(function(m) {
+        ctx += '  ' + m.name + ': ' + m.angleDegrees + '° in orbit, distance: ' + m.distanceKm.toLocaleString() + ' km from ' + state.planet + ', orbital period: ' + m.orbitalPeriodDays.toFixed(2) + ' days\n';
+      });
+    } else {
+      ctx += 'This planet has no known moons displayed.\n';
+    }
+    ctx += 'Note: Moon positions are from the animated simulation. Angles represent current orbital positions.\n';
+    ctx += '</SIMULATION_STATE>\n';
+    return ctx;
+  }
+  async function askPlanetQuestion() {
+    const question = questionInput.value.trim();
+    if (!question) return;
+    if (!window.detailPlanet) {
+      answerBox.innerHTML = '<span style="color: #ff6b6b;">No planet selected.</span>';
+      return;
+    }
+    // Reset history if planet changed
+    if (currentPlanetKey !== window.detailPlanet.key) {
+      conversationHistory = [];
+      currentPlanetKey = window.detailPlanet.key;
+    }
+    questionInput.disabled = true;
+    answerBox.innerHTML = '<em>Thinking...</em>';
+    try {
+      const planetName = window.detailPlanet.name;
+      const historyContext = formatHistory();
+      const orbitalContext = formatDetailOrbitalContext();
+      const audienceContext = (typeof window.getAudiencePrompt === 'function') ? '\n' + window.getAudiencePrompt() : '';
+      const prompt = `You're an expert on the solar system. The user is viewing ${planetName} in a detail view showing its moons orbiting around it.\n\n<INSTRUCTION>\nYou can return markdown but avoid using # headings.${audienceContext}\nThe user can see the moon simulation and may ask questions about current positions of moons. Use the simulation state data to answer positional/relational questions. Make it clear when you're referring to the simulation vs. real life.\n</INSTRUCTION>${orbitalContext}${historyContext}\n<QUESTION>\n${question}`;
+      const result = await synthos.generate.completion({ prompt });
+      answerBox.innerHTML = marked.parse(result.answer);
+      // Add to history
+      conversationHistory.push({ question: question, answer: result.answer });
+      if (conversationHistory.length > MAX_HISTORY) {
+        conversationHistory.shift();
+      }
+    } catch (err) {
+      answerBox.innerHTML = '<span style="color: #ff6b6b;">Error: Could not get answer.</span>';
+    } finally {
+      questionInput.disabled = false;
+      questionInput.value = '';
+      questionInput.focus();
+    }
+  }
+  // Expose function globally so moon click can trigger it
+  window.triggerPlanetQuestion = askPlanetQuestion;
+  questionInput.addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') askPlanetQuestion();
+  });
+})();
+</script><script id="settings-manager">
+(function() {
+  const SETTINGS_TABLE = 'settings';
+  const SETTINGS_ID = 'user-prefs';
+  // Default settings
+  window.explorerSettings = {
+    audience: 'hobbyist',
+    tempUnit: 'C',
+    distUnit: 'km'
+  };
+  // Load settings from server
+  async function loadSettings() {
+    try {
+      const saved = await synthos.data.get(SETTINGS_TABLE, SETTINGS_ID);
+      if (saved) {
+        if (saved.audience) window.explorerSettings.audience = saved.audience;
+        if (saved.tempUnit) window.explorerSettings.tempUnit = saved.tempUnit;
+        if (saved.distUnit) window.explorerSettings.distUnit = saved.distUnit;
+      }
+    } catch (e) {
+      // No saved settings yet, use defaults
+    }
+  }
+  function applySettingsToUI() {
+    const s = window.explorerSettings;
+    const audienceSelect = document.getElementById('settingsAudience');
+    if (audienceSelect) audienceSelect.value = s.audience;
+    const tempRadio = document.querySelector('input[name="tempUnit"][value="' + s.tempUnit + '"]');
+    if (tempRadio) tempRadio.checked = true;
+    const distRadio = document.querySelector('input[name="distUnit"][value="' + s.distUnit + '"]');
+    if (distRadio) distRadio.checked = true;
+  }
+  async function saveSettings() {
+    const audience = document.getElementById('settingsAudience').value;
+    const tempUnit = document.querySelector('input[name="tempUnit"]:checked').value;
+    const distUnit = document.querySelector('input[name="distUnit"]:checked').value;
+    window.explorerSettings = { audience, tempUnit, distUnit };
+    try {
+      await synthos.data.save(SETTINGS_TABLE, {
+        id: SETTINGS_ID,
+        audience: audience,
+        tempUnit: tempUnit,
+        distUnit: distUnit
+      });
+    } catch (e) {
+      console.error('Failed to save settings:', e);
+    }
+  }
+  // Modal open/close
+  const overlay = document.getElementById('settingsOverlay');
+  const openBtn = document.getElementById('openSettings');
+  const cancelBtn = document.getElementById('settingsCancel');
+  const saveBtn = document.getElementById('settingsSave');
+  openBtn.addEventListener('click', async function() {
+    // Always reload from server when opening to ensure fresh data
+    await loadSettings();
+    applySettingsToUI();
+    overlay.classList.add('active');
+  });
+  cancelBtn.addEventListener('click', function() {
+    overlay.classList.remove('active');
+    applySettingsToUI(); // revert UI to saved
+  });
+  overlay.addEventListener('click', function(e) {
+    if (e.target === overlay) {
+      overlay.classList.remove('active');
+      applySettingsToUI();
+    }
+  });
+  saveBtn.addEventListener('click', async function() {
+    await saveSettings();
+    overlay.classList.remove('active');
+  });
+  // Helper to build audience instruction for prompts
+  window.getAudiencePrompt = function() {
+    const s = window.explorerSettings;
+    const audienceMap = {
+      'ages-5-7': 'a young child aged 5-7. Use very simple words, short sentences, fun comparisons, and excitement. Avoid technical jargon entirely.',
+      'ages-8-10': 'a child aged 8-10. Use simple but informative language, fun facts, and relatable comparisons. Keep explanations clear and engaging.',
+      'ages-11-13': 'a middle school student aged 11-13. Use age-appropriate scientific vocabulary, explain concepts clearly, and include interesting details.',
+      'ages-14-17': 'a high school student aged 14-17. Use proper scientific terminology with brief explanations, include quantitative details, and connect to broader concepts.',
+      'ages-18-plus': 'a general adult audience. Use clear scientific language, provide good detail, and assume basic science literacy.',
+      'casual': 'a casual learner who is curious but not deeply knowledgeable. Keep things accessible, interesting, and avoid overwhelming detail.',
+      'hobbyist': 'a space enthusiast or hobbyist. Include interesting technical details, comparisons, and deeper insights while remaining engaging.',
+      'student-undergrad': 'an undergraduate science student. Use proper scientific terminology, include quantitative data, and reference relevant physical processes.',
+      'student-grad': 'a graduate-level science student. Provide detailed technical information, reference current research where relevant, and discuss underlying physics.',
+      'educator': 'an educator or teacher. Provide accurate, well-structured information that could be used for teaching. Include key concepts and common misconceptions.',
+      'academic': 'an academic researcher. Provide detailed, precise scientific information with quantitative data. Reference current understanding and open questions in the field.',
+      'professional': 'a professional astronomer. Use full technical precision, include relevant observational data, current research findings, and discuss uncertainties.'
+    };
+    const audienceDesc = audienceMap[s.audience] || audienceMap['hobbyist'];
+    let unitInstructions = '';
+    if (s.tempUnit === 'F') {
+      unitInstructions += ' Use Fahrenheit (°F) for all temperatures.';
+    } else {
+      unitInstructions += ' Use Celsius (°C) for all temperatures.';
+    }
+    if (s.distUnit === 'miles') {
+      unitInstructions += ' Use miles for distances instead of kilometers.';
+    } else {
+      unitInstructions += ' Use kilometers for distances.';
+    }
+    return 'Your audience is ' + audienceDesc + unitInstructions;
+  };
+  // Load on init (fire and forget, but also apply to UI when done)
+  loadSettings().then(function() {
+    applySettingsToUI();
+  });
+})();
+</script><script id="unit-converters">
+(function() {
+  // Convert a temperature string from °C to °F
+  // Handles: "465°C", "-180°C to 430°C", "-89°C to 57°C"
+  function convertTempString(str, toUnit) {
+    if (!str || toUnit === 'C') return str;
+    // Replace all °C values with °F
+    return str.replace(/(-?[\d,.]+)\s*°C/g, function(match, num) {
+      const celsius = parseFloat(num.replace(/,/g, ''));
+      const fahrenheit = Math.round(celsius * 9 / 5 + 32);
+      return fahrenheit.toLocaleString() + '°F';
+    });
+  }
+  // Convert a distance/diameter string from km to miles
+  // Handles: "4,879 km", "57.9 million km", "1.43 billion km", "384,400 km"
+  function convertDistString(str, toUnit) {
+    if (!str || toUnit === 'km') return str;
+    const KM_TO_MI = 0.621371;
+    // Handle "X million km" or "X billion km"
+    const bigMatch = str.match(/^([\d,.]+)\s*(million|billion)\s*km$/i);
+    if (bigMatch) {
+      const val = parseFloat(bigMatch[1].replace(/,/g, ''));
+      const converted = (val * KM_TO_MI);
+      // Round to 1-2 decimal places
+      const rounded = converted < 10 ? converted.toFixed(2) : converted < 100 ? converted.toFixed(1) : Math.round(converted).toLocaleString();
+      return rounded + ' ' + bigMatch[2].toLowerCase() + ' mi';
+    }
+    // Handle plain "X km" or "X,XXX km"
+    const plainMatch = str.match(/^([\d,.]+)\s*km$/i);
+    if (plainMatch) {
+      const val = parseFloat(plainMatch[1].replace(/,/g, ''));
+      const converted = Math.round(val * KM_TO_MI);
+      return converted.toLocaleString() + ' mi';
+    }
+    return str;
+  }
+  // Apply conversions based on current settings
+  window.convertTemp = function(str) {
+    if (!window.explorerSettings) return str;
+    return convertTempString(str, window.explorerSettings.tempUnit);
+  };
+  window.convertDist = function(str) {
+    if (!window.explorerSettings) return str;
+    return convertDistString(str, window.explorerSettings.distUnit);
+  };
+})();
+</script><script id="page-helpers" src="/api/page-helpers.js?v=2" data-locked="true"></script><script id="page-script" src="/api/page-script.js?v=2" data-locked="true"></script></body></html>