From 75b18a76e46b5e3256931c76fd110b87ddd72e2f Mon Sep 17 00:00:00 2001
From: OHCJ099 <104624508+OHCJ099@users.noreply.github.com>
Date: Sun, 21 Jun 2026 18:19:25 +0800
Subject: [PATCH] Add skeleton-watch runs: DeepSeek-V4-Pro, Gemini 3.1/3.5,
 GLM-5.2, Kimi K2.7, MiMo (#23)

Seven skeleton-watch runs across existing models plus the new MiMo Code harness. Validated: validate-data + update-registry --check both pass; artifacts render clean (real Chrome), no external calls beyond standard CDNs, no duplication.
---
 README.en.md                                  |   14 +-
 README.md                                     |   14 +-
 models/deepseek-v4-pro.json                   |    7 +
 models/gemini-3-1-pro.json                    |    7 +
 models/gemini-3-5-flash.json                  |    7 +
 models/glm-5-2.json                           |    9 +-
 models/kimi-k2-7-code.json                    |    7 +
 models/mimo-v2-5-pro-mimocode.json            |   16 +
 models/mimo-v2-5-pro-ultraspeed.json          |    9 +-
 .../claude-code-max/skeleton-watch.html       | 1597 +++++++++++++
 .../antigravity-high/skeleton-watch.html      |  595 +++++
 .../antigravity-high/skeleton-watch.html      | 2108 +++++++++++++++++
 outputs/glm-5-2/zcode-max/skeleton-watch.html | 1088 +++++++++
 .../kimi-code-thinking/skeleton-watch.html    | 1023 ++++++++
 .../skeleton-watch.html                       | 1090 +++++++++
 .../skeleton-watch.html                       |  456 ++++
 16 files changed, 8031 insertions(+), 16 deletions(-)
 create mode 100644 models/mimo-v2-5-pro-mimocode.json
 create mode 100644 outputs/deepseek-v4-pro/claude-code-max/skeleton-watch.html
 create mode 100644 outputs/gemini-3-1-pro/antigravity-high/skeleton-watch.html
 create mode 100644 outputs/gemini-3-5-flash/antigravity-high/skeleton-watch.html
 create mode 100644 outputs/glm-5-2/zcode-max/skeleton-watch.html
 create mode 100644 outputs/kimi-k2-7-code/kimi-code-thinking/skeleton-watch.html
 create mode 100644 outputs/mimo-v2-5-pro-mimocode/skeleton-watch.html
 create mode 100644 outputs/mimo-v2-5-pro-ultraspeed/skeleton-watch.html

diff --git a/README.en.md b/README.en.md
index e9f26fb..033a6cf 100644
--- a/README.en.md
+++ b/README.en.md
@@ -42,23 +42,23 @@ One-shot LLM eval cases by NAGI STUDIO: same prompt, different model x harness x
 | GPT-5.4 | OpenAI | Cursor · xhigh<br>Codex CLI · xhigh | 05 |
 | GPT-5.3 Codex | OpenAI | Cursor · xhigh | 02 |
 | GPT-5.2 | OpenAI | Cursor · xhigh | 02 |
-| Gemini 3.1 Pro | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 05 |
-| Gemini 3.5 Flash | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 05 |
+| Gemini 3.1 Pro | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 06 |
+| Gemini 3.5 Flash | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 06 |
 | Grok Build | xAI | Grok Build TUI · Max | 02 |
 | Nex-N2-Pro | Nex-AGI | Claude Code · Max | 02 |
 | Grok 4.3 | xAI | Cursor · Default | 02 |
 | Composer 2.5 | Cursor | Cursor · Max<br>Cursor · Default<br>Grok Build TUI · Default | 05 |
 | Mistral Medium 3.5 | Mistral AI | Vibe · Thinking | 02 |
-| DeepSeek-V4-Pro | DeepSeek | Claude Code · Max | 02 |
+| DeepSeek-V4-Pro | DeepSeek | Claude Code · Max | 03 |
 | Doubao Seed 2.0 Pro | ByteDance | Doubao Web · Pro Mode | 01 |
 | Doubao Seed 2.0 Mini | ByteDance | Doubao Web · Fast Mode | 01 |
-| MiMo v2.5 Pro | Xiaomi | Claude Code · Max | 02 |
-| MiMo v2.5 Pro UltraSpeed | Xiaomi | Web · Default | 04 |
-| Kimi K2.7-Code | Moonshot AI | Kimi Code · Thinking | 02 |
+| MiMo v2.5 Pro | Xiaomi | Claude Code · Max<br>MiMo Code · Max | 03 |
+| MiMo v2.5 Pro UltraSpeed | Xiaomi | Web · Default | 05 |
+| Kimi K2.7-Code | Moonshot AI | Kimi Code · Thinking | 03 |
 | Kimi K2.6 | Moonshot AI | Kimi Code · Thinking | 02 |
 | MiniMax M3 | MiniMax | MiniMax Code Web · Thinking | 02 |
 | MiniMax M2.7 | MiniMax | MiniMax Code Web · Thinking | 01 |
-| GLM-5.2 | Zhipu AI | ZCode · Max | 03 |
+| GLM-5.2 | Zhipu AI | ZCode · Max | 04 |
 | GLM-5 Turbo | Zhipu AI | ZCode · Thinking | 03 |
 | Qwen3.7-Max | Alibaba | Qoder · Default | 02 |
 | Step 3.7 Flash | StepFun | Claude Code · High | 02 |
diff --git a/README.md b/README.md
index 35432b4..ae744f4 100644
--- a/README.md
+++ b/README.md
@@ -42,23 +42,23 @@ NAGI STUDIO 的 LLM 测评案例集：同一段提示词，不同「模型 × Ha
 | GPT-5.4 | OpenAI | Cursor · xhigh<br>Codex CLI · xhigh | 05 |
 | GPT-5.3 Codex | OpenAI | Cursor · xhigh | 02 |
 | GPT-5.2 | OpenAI | Cursor · xhigh | 02 |
-| Gemini 3.1 Pro | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 05 |
-| Gemini 3.5 Flash | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 05 |
+| Gemini 3.1 Pro | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 06 |
+| Gemini 3.5 Flash | Google | AntiGravity · High<br>Cursor · Default<br>Google AI Studio · High | 06 |
 | Grok Build | xAI | Grok Build TUI · Max | 02 |
 | Nex-N2-Pro | Nex-AGI | Claude Code · Max | 02 |
 | Grok 4.3 | xAI | Cursor · Default | 02 |
 | Composer 2.5 | Cursor | Cursor · Max<br>Cursor · Default<br>Grok Build TUI · Default | 05 |
 | Mistral Medium 3.5 | Mistral AI | Vibe · Thinking | 02 |
-| DeepSeek-V4-Pro | DeepSeek | Claude Code · Max | 02 |
+| DeepSeek-V4-Pro | DeepSeek | Claude Code · Max | 03 |
 | Doubao Seed 2.0 Pro | ByteDance | Doubao Web · Pro Mode | 01 |
 | Doubao Seed 2.0 Mini | ByteDance | Doubao Web · Fast Mode | 01 |
-| MiMo v2.5 Pro | Xiaomi | Claude Code · Max | 02 |
-| MiMo v2.5 Pro UltraSpeed | Xiaomi | Web · Default | 04 |
-| Kimi K2.7-Code | Moonshot AI | Kimi Code · Thinking | 02 |
+| MiMo v2.5 Pro | Xiaomi | Claude Code · Max<br>MiMo Code · Max | 03 |
+| MiMo v2.5 Pro UltraSpeed | Xiaomi | Web · Default | 05 |
+| Kimi K2.7-Code | Moonshot AI | Kimi Code · Thinking | 03 |
 | Kimi K2.6 | Moonshot AI | Kimi Code · Thinking | 02 |
 | MiniMax M3 | MiniMax | MiniMax Code Web · Thinking | 02 |
 | MiniMax M2.7 | MiniMax | MiniMax Code Web · Thinking | 01 |
-| GLM-5.2 | Zhipu AI | ZCode · Max | 03 |
+| GLM-5.2 | Zhipu AI | ZCode · Max | 04 |
 | GLM-5 Turbo | Zhipu AI | ZCode · Thinking | 03 |
 | Qwen3.7-Max | Alibaba | Qoder · Default | 02 |
 | Step 3.7 Flash | StepFun | Claude Code · High | 02 |
diff --git a/models/deepseek-v4-pro.json b/models/deepseek-v4-pro.json
index 0b20c11..f244453 100644
--- a/models/deepseek-v4-pro.json
+++ b/models/deepseek-v4-pro.json
@@ -19,6 +19,13 @@
         "en": "Generated in one shot via Claude Code with DeepSeek V4 Pro (max thinking effort). Scene includes sky, ocean, beach, palm trees, seagulls, detailed bicycle (spokes, chain, gears), and a pelican (beak, gular pouch, wings, pedaling pose)."
       },
       "contributor": "Mintcolour"
+    },
+    "skeleton-watch": {
+      "note": {
+        "zh": "在 Claude Code 中以 DeepSeek-V4-Pro（最高思考强度）一次生成，未进行任何修改。",
+        "en": "Generated in one shot by DeepSeek-V4-Pro inside Claude Code with Max effort, unmodified."
+      },
+      "contributor": "OHCJ099"
     }
   }
 }
diff --git a/models/gemini-3-1-pro.json b/models/gemini-3-1-pro.json
index e6a367e..f62aa63 100644
--- a/models/gemini-3-1-pro.json
+++ b/models/gemini-3-1-pro.json
@@ -20,6 +20,13 @@
         "en": "Contributed via community PR #3 (a Codex workflow); the submitter did not specify the runtime or effort level."
       },
       "contributor": "XA2333"
+    },
+    "skeleton-watch": {
+      "note": {
+        "zh": "通过 AntiGravity 生成（thinking effort: high）；一次生成，未进行任何修改。",
+        "en": "Generated via AntiGravity (thinking effort: high); one shot, unmodified."
+      },
+      "contributor": "OHCJ099"
     }
   }
 }
diff --git a/models/gemini-3-5-flash.json b/models/gemini-3-5-flash.json
index 3a0fdf9..cd52e8c 100644
--- a/models/gemini-3-5-flash.json
+++ b/models/gemini-3-5-flash.json
@@ -20,6 +20,13 @@
         "en": "Contributed via community PR #3 (a Codex workflow); the submitter did not specify the runtime or effort level."
       },
       "contributor": "XA2333"
+    },
+    "skeleton-watch": {
+      "note": {
+        "zh": "通过 AntiGravity 生成（thinking effort: high）；一次生成，未进行任何修改。",
+        "en": "Generated via AntiGravity (thinking effort: high); one shot, unmodified."
+      },
+      "contributor": "OHCJ099"
     }
   }
 }
diff --git a/models/glm-5-2.json b/models/glm-5-2.json
index 4349192..3c05a55 100644
--- a/models/glm-5-2.json
+++ b/models/glm-5-2.json
@@ -29,6 +29,13 @@
         },
         "contributor": "Nagi-ovo"
       }
-    ]
+    ],
+    "skeleton-watch": {
+      "note": {
+        "zh": "在 ZCode 中以 GLM-5.2（Max 思考配额）一次生成，未进行任何修改。",
+        "en": "Generated in one shot by GLM-5.2 (Max effort) inside ZCode, unmodified."
+      },
+      "contributor": "OHCJ099"
+    }
   }
 }
diff --git a/models/kimi-k2-7-code.json b/models/kimi-k2-7-code.json
index df3bdb6..fbd31a3 100644
--- a/models/kimi-k2-7-code.json
+++ b/models/kimi-k2-7-code.json
@@ -19,6 +19,13 @@
         "en": "Generated in one shot by Kimi K2.7-Code running in Kimi Code with Thinking mode."
       },
       "contributor": "OHCJ099"
+    },
+    "skeleton-watch": {
+      "note": {
+        "zh": "在 Kimi Code 中使用 Kimi K2.7-Code 模型（Thinking 档位）一次生成，未进行任何修改。",
+        "en": "Generated in one shot by Kimi K2.7-Code running in Kimi Code with Thinking mode, unmodified."
+      },
+      "contributor": "OHCJ099"
     }
   }
 }
diff --git a/models/mimo-v2-5-pro-mimocode.json b/models/mimo-v2-5-pro-mimocode.json
new file mode 100644
index 0000000..b6adb29
--- /dev/null
+++ b/models/mimo-v2-5-pro-mimocode.json
@@ -0,0 +1,16 @@
+{
+  "label": "MiMo v2.5 Pro",
+  "vendor": "Xiaomi",
+  "harness": "MiMo Code",
+  "effort": "Max",
+  "order": 97.2,
+  "runs": {
+    "skeleton-watch": {
+      "note": {
+        "zh": "在 MiMo Code 中使用 MiMo v2.5 Pro 模型一次生成，未进行任何修改。",
+        "en": "Generated in one shot by MiMo v2.5 Pro in MiMo Code, unmodified."
+      },
+      "contributor": "OHCJ099"
+    }
+  }
+}
diff --git a/models/mimo-v2-5-pro-ultraspeed.json b/models/mimo-v2-5-pro-ultraspeed.json
index 154bf3c..4871369 100644
--- a/models/mimo-v2-5-pro-ultraspeed.json
+++ b/models/mimo-v2-5-pro-ultraspeed.json
@@ -38,6 +38,13 @@
         "file": "pelican-cycling-2.svg",
         "contributor": "OHCJ099"
       }
-    ]
+    ],
+    "skeleton-watch": {
+      "note": {
+        "zh": "在 Web 环境中使用 MiMo v2.5 Pro UltraSpeed 一次生成，未做任何修改。",
+        "en": "Generated in one shot by MiMo v2.5 Pro UltraSpeed in Web environment, with no modifications."
+      },
+      "contributor": "OHCJ099"
+    }
   }
 }
diff --git a/outputs/deepseek-v4-pro/claude-code-max/skeleton-watch.html b/outputs/deepseek-v4-pro/claude-code-max/skeleton-watch.html
new file mode 100644
index 0000000..f0ac0c1
--- /dev/null
+++ b/outputs/deepseek-v4-pro/claude-code-max/skeleton-watch.html
@@ -0,0 +1,1597 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>3D 镂空机械腕表</title>
+<style>
+  :root {
+    --bg: #0a0a0f;
+    --panel-bg: rgba(15, 15, 25, 0.95);
+    --gold: #c8a45a;
+    --gold-dim: #8a7040;
+    --text: #d0d0d0;
+    --text-dim: #888;
+    --accent: #e8c878;
+    --lume: #b8e8c0;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    background: var(--bg);
+    overflow: hidden;
+    font-family: 'Crimson Text', 'Georgia', 'Segoe UI', serif;
+    -webkit-font-smoothing: antialiased;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: grab;
+  }
+  body:active { cursor: grabbing; }
+  body.pointer { cursor: pointer; }
+
+  #canvas-container {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+  }
+  canvas { display: block; }
+
+  /* 背景渐变 */
+  #bg-gradient {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    background:
+      radial-gradient(ellipse at 50% 40%, rgba(30,30,60,0.6) 0%, transparent 70%),
+      radial-gradient(ellipse at 50% 100%, rgba(10,10,30,0.8) 0%, transparent 50%),
+      radial-gradient(ellipse at 20% 20%, rgba(20,20,50,0.4) 0%, transparent 50%);
+    pointer-events: none;
+  }
+
+  /* 顶部标题栏 */
+  #title-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    padding: 24px 32px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    pointer-events: none;
+  }
+  #title-bar > * { pointer-events: auto; }
+
+  #watch-title {
+    color: var(--text);
+    font-size: 22px;
+    font-weight: 400;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+  }
+  #watch-title span {
+    display: block;
+    font-size: 12px;
+    color: var(--gold);
+    letter-spacing: 6px;
+    margin-top: 2px;
+    font-weight: 300;
+  }
+
+  /* 控制按钮 */
+  #controls {
+    position: fixed;
+    bottom: 32px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+    display: flex;
+    gap: 12px;
+    background: var(--panel-bg);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 40px;
+    padding: 6px;
+    backdrop-filter: blur(20px);
+  }
+
+  .ctrl-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-dim);
+    padding: 10px 20px;
+    border-radius: 30px;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 13px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+  }
+  .ctrl-btn:hover { color: var(--text); }
+  .ctrl-btn.active {
+    background: rgba(200,164,90,0.15);
+    color: var(--gold);
+  }
+  .ctrl-btn svg {
+    width: 16px;
+    height: 16px;
+    vertical-align: -3px;
+    margin-right: 4px;
+  }
+
+  /* 信息面板 */
+  #info-panel {
+    position: fixed;
+    right: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    background: var(--panel-bg);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 16px;
+    padding: 24px;
+    width: 240px;
+    backdrop-filter: blur(20px);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+    pointer-events: none;
+  }
+  #info-panel.visible { opacity: 1; }
+
+  #info-panel h3 {
+    color: var(--gold);
+    font-size: 13px;
+    font-weight: 400;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+  }
+  #info-panel .part-name {
+    color: var(--text);
+    font-size: 18px;
+    font-weight: 400;
+    margin-bottom: 6px;
+  }
+  #info-panel .part-desc {
+    color: var(--text-dim);
+    font-size: 12px;
+    line-height: 1.6;
+    font-weight: 300;
+  }
+  #info-panel .part-material {
+    display: inline-block;
+    margin-top: 10px;
+    padding: 3px 10px;
+    border: 1px solid rgba(255,255,255,0.12);
+    border-radius: 12px;
+    color: var(--text-dim);
+    font-size: 10px;
+    letter-spacing: 1px;
+  }
+
+  /* 提示标签 */
+  #tooltip {
+    position: fixed;
+    z-index: 20;
+    pointer-events: none;
+    background: rgba(0,0,0,0.85);
+    border: 1px solid rgba(200,164,90,0.4);
+    border-radius: 8px;
+    padding: 6px 14px;
+    color: var(--gold);
+    font-size: 12px;
+    letter-spacing: 2px;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    transform: translate(-50%, -130%);
+    white-space: nowrap;
+  }
+  #tooltip.visible { opacity: 1; }
+  #tooltip::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    width: 8px;
+    height: 8px;
+    background: rgba(0,0,0,0.85);
+    border-right: 1px solid rgba(200,164,90,0.4);
+    border-bottom: 1px solid rgba(200,164,90,0.4);
+  }
+
+  /* 响应式 */
+  @media (max-width: 768px) {
+    #info-panel { right: 8px; width: 200px; padding: 16px; }
+    #info-panel .part-name { font-size: 15px; }
+    #title-bar { padding: 16px; }
+    #watch-title { font-size: 17px; }
+    .ctrl-btn { padding: 8px 14px; font-size: 11px; }
+  }
+</style>
+</head>
+<body>
+
+<div id="bg-gradient"></div>
+<div id="canvas-container"></div>
+
+<div id="title-bar">
+  <div id="watch-title">
+    Calibre Squelette
+    <span>Tourbillon · Manufacture</span>
+  </div>
+</div>
+
+<div id="tooltip"></div>
+
+<div id="info-panel">
+  <h3>组件详情</h3>
+  <div class="part-name"></div>
+  <div class="part-desc"></div>
+  <div class="part-material"></div>
+</div>
+
+<div id="controls">
+  <button class="ctrl-btn active" id="btn-normal" onclick="setView('normal')">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>
+    正常视图
+  </button>
+  <button class="ctrl-btn" id="btn-explode" onclick="setView('explode')">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="3" x2="12" y2="9"/><line x1="12" y1="15" x2="12" y2="21"/><line x1="8" y1="6" x2="11" y2="9"/><line x1="13" y1="15" x2="16" y2="18"/><line x1="16" y1="6" x2="13" y2="9"/><line x1="11" y1="15" x2="8" y2="18"/></svg>
+    爆炸视图
+  </button>
+  <button class="ctrl-btn" id="btn-auto" onclick="toggleAutoRotate()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 11-6.219-8.56"/><polyline points="21 3 21 9 15 9"/></svg>
+    自动旋转
+  </button>
+  <button class="ctrl-btn" id="btn-reset" onclick="resetCamera()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 12"/></svg>
+    重置视角
+  </button>
+</div>
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+// ==================== 场景初始化 ====================
+const container = document.getElementById('canvas-container');
+const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.3;
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+container.appendChild(renderer.domElement);
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x080810);
+scene.fog = new THREE.Fog(0x080810, 30, 120);
+
+const camera = new THREE.PerspectiveCamera(42, window.innerWidth / window.innerHeight, 0.5, 200);
+camera.position.set(18, 14, 28);
+camera.lookAt(0, 0, 0);
+
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.target.set(0, -0.5, 0);
+controls.enableDamping = true;
+controls.dampingFactor = 0.08;
+controls.minDistance = 12;
+controls.maxDistance = 65;
+controls.maxPolarAngle = Math.PI * 0.7;
+controls.autoRotate = true;
+controls.autoRotateSpeed = 0.4;
+controls.update();
+
+// ==================== 灯光 ====================
+// 环境光
+scene.add(new THREE.AmbientLight(0x1a1a30, 0.6));
+
+// 主光源（模拟摄影棚主灯）
+const keyLight = new THREE.DirectionalLight(0xffeedd, 12);
+keyLight.position.set(15, 20, 10);
+keyLight.castShadow = true;
+keyLight.shadow.mapSize.width = 2048;
+keyLight.shadow.mapSize.height = 2048;
+keyLight.shadow.camera.near = 0.5;
+keyLight.shadow.camera.far = 100;
+keyLight.shadow.camera.left = -30;
+keyLight.shadow.camera.right = 30;
+keyLight.shadow.camera.top = 30;
+keyLight.shadow.camera.bottom = -30;
+keyLight.shadow.bias = -0.0001;
+keyLight.shadow.normalBias = 0.02;
+scene.add(keyLight);
+
+// 补光（冷色调）
+const fillLight = new THREE.DirectionalLight(0xaaccff, 4);
+fillLight.position.set(-10, 5, -5);
+scene.add(fillLight);
+
+// 轮廓光（背光）
+const rimLight = new THREE.DirectionalLight(0xffffff, 8);
+rimLight.position.set(0, -2, -15);
+scene.add(rimLight);
+
+// 顶部高光
+const topLight = new THREE.DirectionalLight(0xffffff, 6);
+topLight.position.set(0, 25, 0);
+scene.add(topLight);
+
+// 装饰点光源（模拟珠宝射灯）
+const pointLights = [];
+for (let i = 0; i < 4; i++) {
+  const angle = (i / 4) * Math.PI * 2;
+  const pl = new THREE.PointLight(0xffeedd, 30, 30, 1.5);
+  pl.position.set(Math.cos(angle) * 18, 3, Math.sin(angle) * 18);
+  scene.add(pl);
+  pointLights.push(pl);
+}
+
+// ==================== 环境贴图（反射用） ====================
+function createEnvMap() {
+  const pmrem = new THREE.PMREMGenerator(renderer);
+  const envScene = new THREE.Scene();
+
+  // 渐变天球
+  const skyGeo = new THREE.SphereGeometry(60, 32, 32);
+  const skyMat = new THREE.ShaderMaterial({
+    side: THREE.BackSide,
+    uniforms: {
+      topColor: { value: new THREE.Color(0x334466) },
+      midColor: { value: new THREE.Color(0x1a1a30) },
+      botColor: { value: new THREE.Color(0x0a0a18) },
+    },
+    vertexShader: `
+      varying vec3 vWPos;
+      void main() {
+        vec4 wp = modelMatrix * vec4(position, 1.0);
+        vWPos = wp.xyz;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform vec3 topColor, midColor, botColor;
+      varying vec3 vWPos;
+      void main() {
+        float h = normalize(vWPos).y;
+        vec3 col = h > 0.0 ? mix(midColor, topColor, h) : mix(midColor, botColor, -h);
+        gl_FragColor = vec4(col, 1.0);
+      }
+    `,
+  });
+  envScene.add(new THREE.Mesh(skyGeo, skyMat));
+
+  // 环境中的亮点（产生反射高光）
+  for (let i = 0; i < 8; i++) {
+    const a = (i / 8) * Math.PI * 2;
+    const h = (Math.random() - 0.5) * 20;
+    const r = 25 + Math.random() * 20;
+    const spot = new THREE.Mesh(
+      new THREE.PlaneGeometry(4 + Math.random() * 6, 4 + Math.random() * 6),
+      new THREE.MeshBasicMaterial({
+        color: new THREE.Color().setHSL(0.08 + Math.random() * 0.12, 0.2, 0.3 + Math.random() * 0.7),
+        side: THREE.DoubleSide,
+      })
+    );
+    spot.position.set(Math.cos(a) * r, h, Math.sin(a) * r);
+    spot.lookAt(0, 0, 0);
+    envScene.add(spot);
+  }
+
+  const rt = pmrem.fromScene(envScene, 0.04);
+  rt.texture.colorSpace = THREE.SRGBColorSpace;
+  envScene.clear();
+  pmrem.dispose();
+  return rt.texture;
+}
+const envMap = createEnvMap();
+scene.environment = envMap;
+scene.backgroundIntensity = 0.1;
+
+// ==================== 材质 ====================
+const matSteel = new THREE.MeshStandardMaterial({
+  color: 0xd0d0d8, metalness: 0.92, roughness: 0.25, envMapIntensity: 1.2,
+});
+const matSteelDark = new THREE.MeshStandardMaterial({
+  color: 0x909098, metalness: 0.9, roughness: 0.35, envMapIntensity: 1.0,
+});
+const matSteelPolished = new THREE.MeshStandardMaterial({
+  color: 0xe8e8f0, metalness: 0.95, roughness: 0.12, envMapIntensity: 1.5,
+});
+const matBrass = new THREE.MeshStandardMaterial({
+  color: 0xd4a854, metalness: 0.94, roughness: 0.18, envMapIntensity: 1.3,
+});
+const matBrassLight = new THREE.MeshStandardMaterial({
+  color: 0xe8c878, metalness: 0.93, roughness: 0.15, envMapIntensity: 1.4,
+});
+const matRuby = new THREE.MeshPhysicalMaterial({
+  color: 0xcc1144, metalness: 0.05, roughness: 0.08, clearcoat: 0.5,
+  clearcoatRoughness: 0.1, emissive: 0x330011, emissiveIntensity: 0.4,
+  envMapIntensity: 1.8,
+});
+const matGold = new THREE.MeshStandardMaterial({
+  color: 0xf0c860, metalness: 0.98, roughness: 0.08, envMapIntensity: 1.6,
+});
+const matCrystal = new THREE.MeshPhysicalMaterial({
+  color: 0xddeeff, metalness: 0.0, roughness: 0.05, transparent: true,
+  opacity: 0.28, envMapIntensity: 1.2, clearcoat: 1.0, clearcoatRoughness: 0.05,
+  specularIntensity: 1.5, specularColor: new THREE.Color(0xffffff),
+});
+const matLume = new THREE.MeshStandardMaterial({
+  color: 0xc8f0d0, metalness: 0.05, roughness: 0.3, emissive: 0x88cc90,
+  emissiveIntensity: 1.8,
+});
+const matBlackPolish = new THREE.MeshStandardMaterial({
+  color: 0x1a1a22, metalness: 0.7, roughness: 0.2, envMapIntensity: 0.8,
+});
+
+// ==================== 纹理生成 ====================
+function createPerlageTexture() {
+  const s = 512, c = document.createElement('canvas');
+  c.width = c.height = s;
+  const ctx = c.getContext('2d');
+  ctx.fillStyle = '#a0a0a8';
+  ctx.fillRect(0, 0, s, s);
+  const sp = 30, r = 13;
+  for (let row = 0; row < s / sp + 2; row++) {
+    const ox = (row % 2) * sp / 2;
+    for (let col = 0; col < s / sp + 2; col++) {
+      const cx = col * sp + ox, cy = row * sp;
+      const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+      g.addColorStop(0, '#c4c4cc');
+      g.addColorStop(0.5, '#b0b0b8');
+      g.addColorStop(0.85, '#9a9aa2');
+      g.addColorStop(1, '#888890');
+      ctx.fillStyle = g;
+      ctx.beginPath();
+      ctx.arc(cx, cy, r, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+  const tex = new THREE.CanvasTexture(c);
+  tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+  tex.repeat.set(1.5, 1.5);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  return tex;
+}
+
+function createGenevaTexture() {
+  const s = 512, c = document.createElement('canvas');
+  c.width = c.height = s;
+  const ctx = c.getContext('2d');
+  ctx.fillStyle = '#9a9aa2';
+  ctx.fillRect(0, 0, s, s);
+  const sw = s / 24;
+  for (let i = 0; i < 24; i++) {
+    const y = i * sw;
+    const g = ctx.createLinearGradient(0, y, 0, y + sw);
+    g.addColorStop(0, '#a0a0a8');
+    g.addColorStop(0.25, '#c0c0c8');
+    g.addColorStop(0.5, '#d0d0d8');
+    g.addColorStop(0.75, '#c0c0c8');
+    g.addColorStop(1, '#a0a0a8');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, y, s, sw);
+  }
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  return tex;
+}
+
+const perlageTex = createPerlageTexture();
+const genevaTex = createGenevaTexture();
+
+// 带纹理的钢板材质
+const matMainPlate = matSteelDark.clone();
+matMainPlate.map = perlageTex;
+matMainPlate.roughness = 0.45;
+
+const matBridge = matSteel.clone();
+matBridge.map = genevaTex;
+matBridge.roughness = 0.22;
+
+// ==================== 辅助函数 ====================
+function createGearShape(outerR, innerR, teeth, hubR = 0) {
+  const shape = new THREE.Shape();
+  const aPerTooth = (Math.PI * 2) / teeth;
+
+  for (let i = 0; i < teeth; i++) {
+    const a1 = i * aPerTooth;
+    const a2 = a1 + aPerTooth * 0.22;
+    const a3 = a1 + aPerTooth * 0.35;
+    const a4 = a1 + aPerTooth * 0.65;
+    const a5 = a1 + aPerTooth * 0.78;
+
+    if (i === 0) shape.moveTo(Math.cos(a1) * innerR, Math.sin(a1) * innerR);
+    else shape.lineTo(Math.cos(a1) * innerR, Math.sin(a1) * innerR);
+
+    shape.lineTo(Math.cos(a2) * innerR, Math.sin(a2) * innerR);
+    shape.lineTo(Math.cos(a3) * outerR, Math.sin(a3) * outerR);
+    shape.lineTo(Math.cos(a4) * outerR, Math.sin(a4) * outerR);
+    shape.lineTo(Math.cos(a5) * innerR, Math.sin(a5) * innerR);
+  }
+  shape.closePath();
+
+  // 中心孔
+  const h = new THREE.Path();
+  h.absarc(0, 0, hubR || innerR * 0.22, 0, Math.PI * 2, true);
+  shape.holes.push(h);
+
+  // 辐条镂空（仅大齿轮）
+  if (innerR > 3 && teeth > 15) {
+    const spokeR = (innerR + (hubR || innerR * 0.22)) / 2;
+    const cutR = (innerR - (hubR || innerR * 0.22)) * 0.32;
+    const nSpokes = 4;
+    for (let i = 0; i < nSpokes; i++) {
+      const a = (i / nSpokes) * Math.PI * 2 + Math.PI / nSpokes;
+      const sh = new THREE.Path();
+      sh.absarc(Math.cos(a) * spokeR, Math.sin(a) * spokeR, cutR, 0, Math.PI * 2, true);
+      shape.holes.push(sh);
+    }
+  }
+  return shape;
+}
+
+function createGearMesh(outerR, innerR, teeth, thickness, material, hubR) {
+  const shape = createGearShape(outerR, innerR, teeth, hubR);
+  const geom = new THREE.ExtrudeGeometry(shape, {
+    depth: thickness, bevelEnabled: true,
+    bevelThickness: thickness * 0.08, bevelSize: thickness * 0.04, bevelSegments: 3,
+  });
+  const mesh = new THREE.Mesh(geom, material);
+  mesh.position.y = -thickness / 2;
+  mesh.castShadow = true;
+  mesh.receiveShadow = true;
+  return mesh;
+}
+
+function createRing(outerR, innerR, depth, material) {
+  const shape = new THREE.Shape();
+  shape.absarc(0, 0, outerR, 0, Math.PI * 2, false);
+  const hole = new THREE.Path();
+  hole.absarc(0, 0, innerR, 0, Math.PI * 2, true);
+  shape.holes.push(hole);
+  const geom = new THREE.ExtrudeGeometry(shape, {
+    depth, bevelEnabled: true, bevelThickness: 0.15, bevelSize: 0.1, bevelSegments: 3,
+  });
+  const mesh = new THREE.Mesh(geom, material);
+  mesh.position.y = -depth / 2;
+  mesh.castShadow = true;
+  mesh.receiveShadow = true;
+  return mesh;
+}
+
+// ==================== 创建表壳 ====================
+const watchGroup = new THREE.Group();
+scene.add(watchGroup);
+
+// --- 表壳中框 ---
+const caseMiddle = createRing(21, 17.5, 3.2, matSteelPolished);
+caseMiddle.name = '表壳中框';
+caseMiddle.userData = {
+  name: '表壳中框',
+  desc: '904L精钢表壳中框，经过精细抛光和拉丝处理。保护内部机芯并提供结构支撑。',
+  material: '904L 精钢',
+};
+watchGroup.add(caseMiddle);
+
+// --- 表圈 ---
+const bezelShape = new THREE.Shape();
+// 使用LatheGeometry创建表圈轮廓
+const bezelPoints = [
+  new THREE.Vector2(18.2, 0), new THREE.Vector2(18.8, 0.2),
+  new THREE.Vector2(19.3, 0.6), new THREE.Vector2(19.5, 1.0),
+  new THREE.Vector2(20.8, 1.3), new THREE.Vector2(20.6, 1.8),
+  new THREE.Vector2(19.5, 2.0), new THREE.Vector2(18.5, 2.0),
+  new THREE.Vector2(18.5, 2.5), new THREE.Vector2(20.8, 2.5),
+  new THREE.Vector2(20.8, 0),
+];
+const bezelGeom = new THREE.LatheGeometry(bezelPoints, 96);
+const bezel = new THREE.Mesh(bezelGeom, matSteelPolished);
+bezel.position.y = 1.6;
+bezel.name = '表圈';
+bezel.userData = {
+  name: '表圈',
+  desc: '抛光精钢表圈，固定蓝宝石水晶玻璃表镜。斜面设计增添优雅线条。',
+  material: '904L 精钢 · 抛光',
+};
+bezel.castShadow = true;
+bezel.receiveShadow = true;
+watchGroup.add(bezel);
+
+// --- 表底盖 ---
+const caseBackOuter = createRing(20.8, 16.5, 0.6, matSteelPolished);
+caseBackOuter.position.y = -3.3;
+caseBackOuter.name = '表底盖';
+caseBackOuter.userData = {
+  name: '表底盖',
+  desc: '蓝宝石水晶透底表背，展示精美机芯运转。',
+  material: '904L 精钢 · 蓝宝石水晶',
+};
+watchGroup.add(caseBackOuter);
+
+// 透底水晶
+const displayCrystal = new THREE.Mesh(
+  new THREE.CylinderGeometry(16.2, 16.2, 0.3, 64),
+  matCrystal.clone(),
+);
+displayCrystal.position.y = -3.3;
+displayCrystal.userData = {
+  name: '透底水晶',
+  desc: '蓝宝石水晶玻璃底盖，具有防刮擦性能，展现机芯全貌。',
+  material: '蓝宝石水晶玻璃',
+};
+watchGroup.add(displayCrystal);
+
+// --- 表耳 ---
+function createLug() {
+  const lugGroup = new THREE.Group();
+  // 使用RoundedBox替代方案
+  const shape = new THREE.Shape();
+  const w = 3.0, l = 5.5;
+  shape.moveTo(-w / 2, 0);
+  shape.quadraticCurveTo(-w / 2 + 0.8, l, 0, l + 0.3);
+  shape.quadraticCurveTo(w / 2 - 0.8, l, w / 2, 0);
+  shape.closePath();
+  const geom = new THREE.ExtrudeGeometry(shape, {
+    depth: 1.8, bevelEnabled: true, bevelThickness: 0.4, bevelSize: 0.3, bevelSegments: 5,
+  });
+  const mesh = new THREE.Mesh(geom, matSteelPolished);
+  mesh.position.set(0, -1.8 / 2, 0);
+  mesh.castShadow = true;
+  mesh.receiveShadow = true;
+  lugGroup.add(mesh);
+
+  // 弹簧杆孔
+  const pinHole = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.35, 0.35, 1.4, 16),
+    matSteelDark,
+  );
+  pinHole.rotation.x = Math.PI / 2;
+  pinHole.position.set(0, 0.2, l + 1.5);
+  pinHole.userData = { name: '弹簧杆', desc: '用于连接表带的弹簧杆', material: '精钢' };
+  lugGroup.add(pinHole);
+
+  return lugGroup;
+}
+
+const lugPositions = [
+  { x: 7.5, z: 21.5, ry: 0 }, { x: -7.5, z: 21.5, ry: 0 },
+  { x: 7.5, z: -21.5, ry: Math.PI }, { x: -7.5, z: -21.5, ry: Math.PI },
+];
+lugPositions.forEach(p => {
+  const lug = createLug();
+  lug.position.set(p.x, -2.6, p.z);
+  lug.rotation.y = p.ry;
+  lug.name = '表耳';
+  lug.userData = { name: '表耳', desc: '一体式表耳，优雅过渡至表带', material: '904L 精钢' };
+  watchGroup.add(lug);
+});
+
+// --- 表冠 ---
+function createCrown() {
+  const crownGrp = new THREE.Group();
+  // 表冠主体
+  const body = new THREE.Mesh(
+    new THREE.CylinderGeometry(2.2, 2.4, 3.5, 40),
+    matSteelPolished,
+  );
+  body.castShadow = true;
+  crownGrp.add(body);
+
+  // 凹槽环
+  for (let i = 0; i < 7; i++) {
+    const y = -1.75 + (i + 0.5) * 3.5 / 7;
+    const groove = new THREE.Mesh(
+      new THREE.TorusGeometry(2.25, 0.15, 8, 40),
+      matSteelDark,
+    );
+    groove.position.y = y;
+    groove.rotation.x = Math.PI / 2;
+    crownGrp.add(groove);
+  }
+
+  // 表冠顶盖
+  const cap = new THREE.Mesh(
+    new THREE.CylinderGeometry(2.2, 2.2, 0.3, 40),
+    matSteelPolished,
+  );
+  cap.position.y = 1.9;
+  cap.castShadow = true;
+  crownGrp.add(cap);
+
+  // 顶部logo凹槽
+  const logoRing = new THREE.Mesh(
+    new THREE.TorusGeometry(0.9, 0.15, 8, 32),
+    matSteel,
+  );
+  logoRing.position.y = 2.1;
+  logoRing.rotation.x = Math.PI / 2;
+  crownGrp.add(logoRing);
+
+  return crownGrp;
+}
+
+const crownGroup = new THREE.Group();
+crownGroup.name = '表冠';
+crownGroup.userData = {
+  name: '表冠',
+  desc: '旋入式表冠，带凹槽防滑设计。用于上链和调校时间。',
+  material: '904L 精钢 · 抛光',
+};
+const crownMesh = createCrown();
+crownGroup.add(crownMesh);
+crownGroup.position.set(22, -1.6, 0);
+crownGroup.rotation.z = -Math.PI / 2;
+watchGroup.add(crownGroup);
+
+// 表冠轴
+const stemGeom = new THREE.CylinderGeometry(0.7, 0.9, 4, 20);
+const stem = new THREE.Mesh(stemGeom, matSteel);
+stem.rotation.z = Math.PI / 2;
+stem.position.set(18.5, -1.6, 0);
+stem.name = '表冠轴';
+stem.userData = { name: '表冠轴', desc: '连接表冠与机芯的上链柄轴', material: '精钢' };
+watchGroup.add(stem);
+
+// ==================== 蓝宝石表镜 ====================
+const crystalGeom = new THREE.SphereGeometry(18.3, 80, 40, 0, Math.PI * 2, 0, Math.PI * 0.155);
+const crystal = new THREE.Mesh(crystalGeom, matCrystal);
+crystal.position.y = 2.15;
+crystal.name = '蓝宝石表镜';
+crystal.userData = {
+  name: '蓝宝石水晶表镜',
+  desc: '双面防反光处理蓝宝石水晶玻璃，莫氏硬度9，仅次于钻石。',
+  material: '蓝宝石水晶 · 防反光涂层',
+};
+watchGroup.add(crystal);
+
+// ==================== 机芯组件 ====================
+const movementRoot = new THREE.Group();
+movementRoot.name = 'movementRoot';
+watchGroup.add(movementRoot);
+
+// --- 主夹板 ---
+const mainPlate = new THREE.Mesh(
+  new THREE.CylinderGeometry(16.8, 16.8, 1.0, 80),
+  matMainPlate,
+);
+mainPlate.position.y = -1.6;
+mainPlate.name = '主夹板';
+mainPlate.userData = {
+  name: '主夹板',
+  desc: '机芯基础结构，承载所有齿轮系和功能模块。饰以精美鱼鳞纹（Perlage）打磨。',
+  material: '黄铜镀铑 · 鱼鳞纹打磨',
+};
+mainPlate.castShadow = true;
+mainPlate.receiveShadow = true;
+movementRoot.add(mainPlate);
+
+// 主夹板上的珠宝轴承
+for (let i = 0; i < 8; i++) {
+  const a = (i / 8) * Math.PI * 2 + Math.PI / 8;
+  const dist = 5 + (i % 3) * 4;
+  const jewel = new THREE.Mesh(new THREE.SphereGeometry(0.5, 20, 20), matRuby);
+  jewel.position.set(Math.cos(a) * dist, -1.05, Math.sin(a) * dist);
+  jewel.name = '红宝石轴承';
+  jewel.userData = {
+    name: '红宝石轴承',
+    desc: '合成红宝石轴承（Jewel），减少齿轮枢轴的摩擦和磨损。',
+    material: '合成红宝石',
+  };
+  movementRoot.add(jewel);
+
+  // 黄金套筒
+  const chaton = new THREE.Mesh(
+    new THREE.TorusGeometry(0.65, 0.12, 8, 20),
+    matGold,
+  );
+  chaton.position.copy(jewel.position);
+  chaton.rotation.x = Math.PI / 2;
+  chaton.name = '黄金套筒';
+  chaton.userData = { name: '黄金套筒', desc: 'K金套筒（Chaton），固定红宝石轴承', material: '18K 黄金' };
+  movementRoot.add(chaton);
+}
+
+// --- 齿轮系 ---
+const gearY = -1.05;
+const gearGroup = new THREE.Group();
+gearGroup.name = 'gearGroup';
+movementRoot.add(gearGroup);
+
+// 发条盒
+const barrelOuter = new THREE.Mesh(
+  new THREE.CylinderGeometry(4.5, 4.5, 1.8, 60),
+  matBrass,
+);
+barrelOuter.position.set(8, gearY, 3);
+barrelOuter.name = '发条盒';
+barrelOuter.userData = {
+  name: '发条盒',
+  desc: '容纳主发条的动力储存装置。提供约72小时动力储备。',
+  material: '黄铜',
+};
+barrelOuter.castShadow = true;
+gearGroup.add(barrelOuter);
+
+// 发条盒盖（棘轮）
+const ratchetWheel = createGearMesh(4.2, 3.8, 30, 0.35, matBrassLight, 1.0);
+ratchetWheel.position.set(8, gearY + 0.9, 3);
+ratchetWheel.name = '棘轮';
+ratchetWheel.userData = {
+  name: '大钢轮（棘轮）',
+  desc: '上链时与棘爪配合，防止发条反转。',
+  material: '黄铜',
+};
+gearGroup.add(ratchetWheel);
+
+// 中心轮
+const centerWheel = createGearMesh(5.5, 5.0, 48, 0.4, matBrass, 1.2);
+centerWheel.position.set(0, gearY, 0);
+centerWheel.name = '中心轮';
+centerWheel.userData = {
+  name: '中心轮（二轮）',
+  desc: '齿轮系中的第二齿轮，驱动分针。与发条盒齿轮啮合。',
+  material: '黄铜',
+};
+gearGroup.add(centerWheel);
+
+// 三轮
+const thirdWheel = createGearMesh(4.0, 3.5, 36, 0.3, matBrass, 0.9);
+thirdWheel.position.set(-4, gearY, -4);
+thirdWheel.name = '三轮';
+thirdWheel.userData = {
+  name: '三轮（过轮）',
+  desc: '将动力从中心轮传递至四轮，实现齿轮减速。',
+  material: '黄铜',
+};
+gearGroup.add(thirdWheel);
+
+// 四轮（秒轮）
+const fourthWheel = createGearMesh(3.2, 2.8, 28, 0.25, matBrass, 0.7);
+fourthWheel.position.set(5, gearY, -7);
+fourthWheel.name = '四轮';
+fourthWheel.userData = {
+  name: '四轮（秒轮）',
+  desc: '驱动秒针，每秒前进一格。与擒纵轮直接啮合。',
+  material: '黄铜',
+};
+gearGroup.add(fourthWheel);
+
+// --- 擒纵机构 ---
+const escapementGroup = new THREE.Group();
+escapementGroup.name = 'escapementGroup';
+movementRoot.add(escapementGroup);
+
+// 擒纵轮（特殊齿形）
+function createEscapeWheelShape(radius, teeth) {
+  const shape = new THREE.Shape();
+  for (let i = 0; i < teeth; i++) {
+    const a = (i / teeth) * Math.PI * 2;
+    const na = ((i + 1) / teeth) * Math.PI * 2;
+    const ma = (a + na) / 2;
+    const tipR = radius * 1.3;
+    const valleyR = radius * 0.65;
+
+    if (i === 0) shape.moveTo(Math.cos(a) * valleyR, Math.sin(a) * valleyR);
+    else shape.lineTo(Math.cos(a) * valleyR, Math.sin(a) * valleyR);
+
+    shape.lineTo(Math.cos(ma) * tipR, Math.sin(ma) * tipR);
+  }
+  shape.closePath();
+  const h = new THREE.Path();
+  h.absarc(0, 0, radius * 0.2, 0, Math.PI * 2, true);
+  shape.holes.push(h);
+  return shape;
+}
+
+const escShape = createEscapeWheelShape(2.5, 15);
+const escGeom = new THREE.ExtrudeGeometry(escShape, {
+  depth: 0.2, bevelEnabled: true, bevelThickness: 0.03, bevelSegments: 3,
+});
+const escapeWheel = new THREE.Mesh(escGeom, matSteelPolished);
+escapeWheel.position.set(-2, gearY + 0.15, -9);
+escapeWheel.name = '擒纵轮';
+escapeWheel.userData = {
+  name: '擒纵轮（Escapement Wheel）',
+  desc: '特殊齿形的擒纵轮，与擒纵叉配合将连续旋转转化为间歇运动。',
+  material: '精钢 · 镜面抛光',
+};
+escapeWheel.castShadow = true;
+escapementGroup.add(escapeWheel);
+
+// 擒纵叉
+function createPalletFork() {
+  const grp = new THREE.Group();
+  // 叉体
+  const forkShape = new THREE.Shape();
+  const fl = 4.5, fw = 0.45;
+  forkShape.moveTo(-fl, -fw);
+  forkShape.lineTo(fl, -fw);
+  forkShape.lineTo(fl + 0.6, -fw - 0.5);
+  forkShape.lineTo(fl + 0.6, -fw - 1.2);
+  forkShape.lineTo(fl + 0.2, -fw - 1.5);
+  forkShape.lineTo(fl - 0.2, -fw - 1.5);
+  forkShape.lineTo(fl - 0.6, -fw - 1.2);
+  forkShape.lineTo(fl - 0.6, -fw - 0.5);
+  forkShape.lineTo(fl, -fw);
+  forkShape.lineTo(fl, fw);
+  forkShape.lineTo(fl + 0.6, fw + 0.5);
+  forkShape.lineTo(fl + 0.6, fw + 1.2);
+  forkShape.lineTo(fl + 0.2, fw + 1.5);
+  forkShape.lineTo(fl - 0.2, fw + 1.5);
+  forkShape.lineTo(fl - 0.6, fw + 1.2);
+  forkShape.lineTo(fl - 0.6, fw + 0.5);
+  forkShape.lineTo(fl, fw);
+  forkShape.closePath();
+
+  const hole = new THREE.Path();
+  hole.absarc(0, 0, 0.35, 0, Math.PI * 2, true);
+  forkShape.holes.push(hole);
+
+  const geom = new THREE.ExtrudeGeometry(forkShape, {
+    depth: 0.2, bevelEnabled: true, bevelThickness: 0.03, bevelSegments: 3,
+  });
+  const mesh = new THREE.Mesh(geom, matSteelPolished);
+  mesh.position.y = -0.1;
+  mesh.castShadow = true;
+  grp.add(mesh);
+
+  // 叉瓦
+  for (let s = -1; s <= 1; s += 2) {
+    const jewel = new THREE.Mesh(
+      new THREE.BoxGeometry(0.4, 0.15, 0.8),
+      matRuby,
+    );
+    jewel.position.set(s * 4.2, 0, 0);
+    grp.add(jewel);
+  }
+  return grp;
+}
+
+const palletFork = createPalletFork();
+palletFork.position.set(3.5, gearY + 0.1, -9);
+palletFork.name = '擒纵叉';
+palletFork.userData = {
+  name: '擒纵叉（Pallet Fork）',
+  desc: '擒纵机构核心组件。红宝石叉瓦交替锁定和释放擒纵轮，将能量传递给摆轮。',
+  material: '精钢 · 合成红宝石叉瓦',
+};
+escapementGroup.add(palletFork);
+
+// --- 摆轮组件 ---
+const balanceGroup = new THREE.Group();
+balanceGroup.name = 'balanceGroup';
+movementRoot.add(balanceGroup);
+
+// 摆轮外环
+const balanceRim = new THREE.Mesh(
+  new THREE.TorusGeometry(5.5, 0.55, 16, 80),
+  matSteelPolished,
+);
+balanceRim.position.y = gearY + 0.2;
+balanceRim.name = '摆轮';
+balanceRim.userData = {
+  name: '摆轮（Balance Wheel）',
+  desc: '摆轮是机械表的心脏。以28,800次/小时（4Hz）的频率振荡，调节时间精度。',
+  material: '铍青铜 · 镜面抛光',
+};
+balanceRim.castShadow = true;
+balanceGroup.add(balanceRim);
+
+// 摆轮辐条
+for (let i = 0; i < 4; i++) {
+  const a = (i / 4) * Math.PI * 2;
+  const spoke = new THREE.Mesh(
+    new THREE.BoxGeometry(0.35, 0.2, 5.0),
+    matSteel,
+  );
+  spoke.position.set(Math.cos(a) * 2.5, gearY + 0.2, Math.sin(a) * 2.5);
+  spoke.rotation.y = -a;
+  balanceGroup.add(spoke);
+}
+
+// 摆轮配重螺丝
+for (let i = 0; i < 8; i++) {
+  const a = (i / 8) * Math.PI * 2;
+  const screw = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.25, 0.25, 0.3, 12),
+    matGold,
+  );
+  screw.position.set(Math.cos(a) * 5.5, gearY + 0.35, Math.sin(a) * 5.5);
+  balanceGroup.add(screw);
+}
+
+// 摆轮中心轴
+const balanceStaff = new THREE.Mesh(
+  new THREE.CylinderGeometry(0.3, 0.45, 1.0, 16),
+  matSteelPolished,
+);
+balanceStaff.position.y = gearY;
+balanceGroup.add(balanceStaff);
+
+// --- 游丝 ---
+function createHairspring(turns, maxR, height, segments) {
+  const pts = [];
+  const total = turns * segments;
+  for (let i = 0; i <= total; i++) {
+    const t = i / total;
+    const r = 0.5 + t * (maxR - 0.5);
+    const a = t * turns * Math.PI * 2;
+    pts.push(new THREE.Vector3(Math.cos(a) * r, 0, Math.sin(a) * r));
+  }
+  const curve = new THREE.CatmullRomCurve3(pts);
+  return new THREE.TubeGeometry(curve, total, 0.08, 6, false);
+}
+
+const hairspringGeom = createHairspring(8, 4.8, 0.1, 200);
+const hairspring = new THREE.Mesh(hairspringGeom, new THREE.MeshStandardMaterial({
+  color: 0x3355aa, metalness: 0.85, roughness: 0.15, envMapIntensity: 1.0,
+}));
+hairspring.position.y = gearY + 0.25;
+hairspring.name = '游丝';
+hairspring.userData = {
+  name: '游丝（Hairspring）',
+  desc: 'Nivarox合金游丝，阿基米德螺旋线形状。与摆轮组成谐振系统，决定走时精度。',
+  material: 'Nivarox 合金 · 蓝色氧化',
+};
+balanceGroup.add(hairspring);
+
+// 摆夹板
+const balanceCockShape = new THREE.Shape();
+balanceCockShape.moveTo(-2, -7);
+balanceCockShape.lineTo(2, -7);
+balanceCockShape.lineTo(3, -4);
+balanceCockShape.lineTo(2.5, 1);
+balanceCockShape.lineTo(1.5, 2.5);
+balanceCockShape.lineTo(-1.5, 2.5);
+balanceCockShape.lineTo(-2.5, 1);
+balanceCockShape.lineTo(-3, -4);
+balanceCockShape.closePath();
+
+const balanceCockHole = new THREE.Path();
+balanceCockHole.absarc(0, -3.5, 1.0, 0, Math.PI * 2, true);
+balanceCockShape.holes.push(balanceCockHole);
+
+const balanceCock = new THREE.Mesh(
+  new THREE.ExtrudeGeometry(balanceCockShape, {
+    depth: 0.35, bevelEnabled: true, bevelThickness: 0.08, bevelSegments: 5,
+  }),
+  matBridge,
+);
+balanceCock.position.set(0, gearY + 0.8, -8);
+balanceCock.name = '摆夹板';
+balanceCock.userData = {
+  name: '摆夹板（Balance Cock）',
+  desc: '单边固定摆轮组件的夹板。饰以日内瓦波纹（Côtes de Genève）打磨。',
+  material: '黄铜镀铑 · 日内瓦波纹',
+};
+balanceCock.castShadow = true;
+movementRoot.add(balanceCock);
+
+// 摆夹板上的宝石
+const bcJewel = new THREE.Mesh(new THREE.SphereGeometry(0.5, 20, 20), matRuby);
+bcJewel.position.set(0, gearY + 1.05, -4.5);
+bcJewel.name = '托石';
+bcJewel.userData = { name: '托石（Cap Jewel）', desc: '摆轮上端宝石轴承，承受轴向推力', material: '合成红宝石' };
+movementRoot.add(bcJewel);
+
+// --- 夹板（桥板） ---
+const bridgeY = -0.55;
+
+// 轮系夹板
+function createTrainBridge() {
+  const shape = new THREE.Shape();
+  // 覆盖中心轮和三轮区域
+  shape.absarc(-2, -2, 5.5, -Math.PI * 0.6, Math.PI * 0.6, false);
+  shape.lineTo(3, -7);
+  shape.absarc(0, 0, 7, -Math.PI * 0.5, Math.PI * 0.2, true);
+  shape.lineTo(-4, 2);
+  shape.closePath();
+
+  // 宝石孔
+  const positions = [[0, 0], [-4, -4], [5, -7]];
+  positions.forEach(([x, z]) => {
+    const h = new THREE.Path();
+    h.absarc(x, z, 0.7, 0, Math.PI * 2, true);
+    shape.holes.push(h);
+  });
+
+  const geom = new THREE.ExtrudeGeometry(shape, {
+    depth: 0.4, bevelEnabled: true, bevelThickness: 0.1, bevelSegments: 5,
+  });
+  const mesh = new THREE.Mesh(geom, matBridge);
+  mesh.position.y = bridgeY;
+  mesh.castShadow = true;
+  mesh.receiveShadow = true;
+  return mesh;
+}
+
+const trainBridge = createTrainBridge();
+trainBridge.name = '轮系夹板';
+trainBridge.userData = {
+  name: '轮系夹板（Train Bridge）',
+  desc: '固定中心轮、三轮、四轮的夹板。饰以日内瓦波纹，边缘倒角抛光。',
+  material: '黄铜镀铑 · 日内瓦波纹',
+};
+movementRoot.add(trainBridge);
+
+// 夹板宝石
+[[0, 0], [-4, -4], [5, -7]].forEach(([x, z]) => {
+  const j = new THREE.Mesh(new THREE.SphereGeometry(0.5, 20, 20), matRuby);
+  j.position.set(x, bridgeY + 0.25, z);
+  j.userData = { name: '宝石轴承', desc: '轮系上端宝石轴承', material: '合成红宝石' };
+  movementRoot.add(j);
+
+  const ch = new THREE.Mesh(new THREE.TorusGeometry(0.65, 0.12, 8, 20), matGold);
+  ch.position.set(x, bridgeY + 0.25, z);
+  ch.rotation.x = Math.PI / 2;
+  movementRoot.add(ch);
+});
+
+// 发条盒夹板
+const barrelBridgeShape = new THREE.Shape();
+barrelBridgeShape.absarc(8, 3, 5.5, -Math.PI * 0.2, Math.PI * 1.2, false);
+barrelBridgeShape.lineTo(8, 0);
+barrelBridgeShape.absarc(4, -1, 6, Math.PI * 0.5, -Math.PI * 0.3, true);
+barrelBridgeShape.closePath();
+const bbHole = new THREE.Path();
+bbHole.absarc(8, 3, 1.0, 0, Math.PI * 2, true);
+barrelBridgeShape.holes.push(bbHole);
+
+const barrelBridge = new THREE.Mesh(
+  new THREE.ExtrudeGeometry(barrelBridgeShape, {
+    depth: 0.4, bevelEnabled: true, bevelThickness: 0.1, bevelSegments: 5,
+  }),
+  matBridge,
+);
+barrelBridge.position.y = bridgeY;
+barrelBridge.name = '发条盒夹板';
+barrelBridge.userData = {
+  name: '发条盒夹板（Barrel Bridge）',
+  desc: '固定发条盒组件的独立夹板。确保主发条稳定运转。',
+  material: '黄铜镀铑 · 日内瓦波纹',
+};
+barrelBridge.castShadow = true;
+movementRoot.add(barrelBridge);
+
+// 发条盒夹板宝石
+const bbJewel = new THREE.Mesh(new THREE.SphereGeometry(0.5, 20, 20), matRuby);
+bbJewel.position.set(8, bridgeY + 0.25, 3);
+bbJewel.userData = { name: '宝石轴承', desc: '发条盒上端宝石轴承', material: '合成红宝石' };
+movementRoot.add(bbJewel);
+
+// ==================== 表盘与刻度 ====================
+const dialGroup = new THREE.Group();
+dialGroup.name = 'dialGroup';
+watchGroup.add(dialGroup);
+
+// 刻度环
+const chapterRing = createRing(17.8, 15.2, 0.3, matSteelPolished);
+chapterRing.position.y = 0.3;
+chapterRing.name = '刻度环';
+chapterRing.userData = {
+  name: '刻度环（Chapter Ring）',
+  desc: '承载时标的环形结构。镂空设计展现下方机芯。',
+  material: '精钢 · 抛光',
+};
+dialGroup.add(chapterRing);
+
+// 时标
+const markerGeom = new THREE.BoxGeometry(0.6, 0.25, 2.5);
+for (let i = 0; i < 12; i++) {
+  const angle = (i / 12) * Math.PI * 2 + Math.PI / 2;
+  const r = 16.5;
+  const isHour = i % 3 === 0;
+
+  // 刻度主体
+  const marker = new THREE.Mesh(
+    isHour ? new THREE.BoxGeometry(0.8, 0.25, 2.8) : markerGeom,
+    matSteelPolished,
+  );
+  marker.position.set(Math.cos(angle) * r, 0.55, Math.sin(angle) * r);
+  marker.rotation.y = -(angle - Math.PI / 2);
+  marker.castShadow = true;
+  marker.name = '时标';
+  marker.userData = { name: '时标', desc: `${i === 0 ? 12 : i}点刻度`, material: '精钢' };
+  dialGroup.add(marker);
+
+  // 夜光点
+  const lumeDot = new THREE.Mesh(
+    new THREE.CylinderGeometry(0.4, 0.4, 0.15, 16),
+    matLume,
+  );
+  lumeDot.position.set(Math.cos(angle) * (r + 0.2), 0.68, Math.sin(angle) * (r + 0.2));
+  dialGroup.add(lumeDot);
+}
+
+// ==================== 指针 ====================
+const handsGroup = new THREE.Group();
+handsGroup.name = 'handsGroup';
+watchGroup.add(handsGroup);
+
+function createHand(length, width, taperWidth, material, lumeLength) {
+  const grp = new THREE.Group();
+  const shape = new THREE.Shape();
+  shape.moveTo(-width / 2, 0);
+  shape.lineTo(-taperWidth / 2, length);
+  shape.lineTo(taperWidth / 2, length);
+  shape.lineTo(width / 2, 0);
+  shape.closePath();
+  const geom = new THREE.ExtrudeGeometry(shape, {
+    depth: 0.12, bevelEnabled: true, bevelThickness: 0.03, bevelSegments: 3,
+  });
+  const mesh = new THREE.Mesh(geom, material);
+  mesh.position.set(0, 0, -0.06);
+  mesh.castShadow = true;
+  grp.add(mesh);
+
+  // 夜光填充
+  if (lumeLength > 0) {
+    const lumeShape = new THREE.Shape();
+    lumeShape.moveTo(-width * 0.35, length * 0.3);
+    lumeShape.lineTo(-taperWidth * 0.4, length - 1);
+    lumeShape.lineTo(taperWidth * 0.4, length - 1);
+    lumeShape.lineTo(width * 0.35, length * 0.3);
+    lumeShape.closePath();
+    const lumeGeom = new THREE.ExtrudeGeometry(lumeShape, {
+      depth: 0.10, bevelEnabled: true, bevelThickness: 0.02, bevelSegments: 2,
+    });
+    const lume = new THREE.Mesh(lumeGeom, matLume);
+    lume.position.y = 0.06;
+    grp.add(lume);
+  }
+  return grp;
+}
+
+// 时针
+const hourHand = createHand(8.5, 1.2, 0.5, matSteelPolished, 6);
+hourHand.position.y = 0.8;
+hourHand.name = '时针';
+hourHand.userData = { name: '时针', desc: '指示小时。镂空设计配合夜光涂层。', material: '精钢 · 夜光涂层' };
+handsGroup.add(hourHand);
+
+// 分针
+const minuteHand = createHand(13, 0.9, 0.35, matSteelPolished, 10);
+minuteHand.position.y = 0.85;
+minuteHand.name = '分针';
+minuteHand.userData = { name: '分针', desc: '指示分钟。细长优雅的设计。', material: '精钢 · 夜光涂层' };
+handsGroup.add(minuteHand);
+
+// 秒针
+const secShape = new THREE.Shape();
+secShape.moveTo(-0.15, -3);
+secShape.lineTo(-0.1, 14);
+secShape.lineTo(0.1, 14);
+secShape.lineTo(0.15, -3);
+secShape.closePath();
+const secGeom = new THREE.ExtrudeGeometry(secShape, {
+  depth: 0.08, bevelEnabled: true, bevelThickness: 0.02, bevelSegments: 2,
+});
+const secondHand = new THREE.Mesh(secGeom, matSteelPolished);
+secondHand.position.set(0, 0.9, -0.04);
+secondHand.name = '秒针';
+secondHand.userData = { name: '秒针', desc: '指示秒钟。细长优雅设计，带配重尾端。', material: '精钢 · 烤蓝' };
+handsGroup.add(secondHand);
+
+// 秒针夜光圆点
+const secLume = new THREE.Mesh(new THREE.CylinderGeometry(0.35, 0.35, 0.1, 16), matLume);
+secLume.position.set(0, 0.95, 5);
+handsGroup.add(secLume);
+
+// 指针中轴盖
+const centerCap = new THREE.Mesh(
+  new THREE.CylinderGeometry(1.0, 1.2, 0.3, 32),
+  matSteelPolished,
+);
+centerCap.position.y = 0.95;
+centerCap.name = '中轴盖';
+handsGroup.add(centerCap);
+
+// ==================== 地面反射 ====================
+const groundGeom = new THREE.PlaneGeometry(80, 80);
+const ground = new THREE.Mesh(groundGeom, new THREE.MeshStandardMaterial({
+  color: 0x111118, metalness: 0.5, roughness: 0.35, envMapIntensity: 0.7,
+}));
+ground.rotation.x = -Math.PI / 2;
+ground.position.y = -8;
+ground.receiveShadow = true;
+scene.add(ground);
+
+// ==================== 组织层级用于爆炸视图 ====================
+const explodeGroups = [
+  { group: crystal, name: 'crystal', normalY: 2.15, explodeY: 8.5 },
+  { group: bezel, name: 'bezel', normalY: 1.6, explodeY: 5.5 },
+  { group: handsGroup, name: 'hands', normalY: 0, explodeY: 4.5 },
+  { group: dialGroup, name: 'dial', normalY: 0, explodeY: 2.5 },
+  { group: movementRoot, name: 'movement', normalY: 0, explodeY: -0.5 },
+  { group: caseMiddle, name: 'caseMiddle', normalY: 0, explodeY: -2.0 },
+  { group: caseBackOuter, name: 'caseBack', normalY: -3.3, explodeY: -7.0 },
+  { group: displayCrystal, name: 'displayCrystal', normalY: -3.3, explodeY: -7.0 },
+  { group: crownGroup, name: 'crown', normalY: -1.6, explodeY: -1.6 },
+  { group: stem, name: 'stem', normalY: -1.6, explodeY: -1.6 },
+];
+
+// 同样独立移动的子组件
+const extraExplodeTargets = [];
+[balanceCock, trainBridge, barrelBridge].forEach(b => {
+  extraExplodeTargets.push({ group: b, normalY: b.position.y, explodeY: b.position.y + 2.0 });
+});
+[balanceRim, ...balanceGroup.children.filter(c => c !== balanceRim && c !== hairspring && c !== balanceStaff)].forEach(b => {
+  // 摆轮组件已经在 movementRoot 中，不需要单独移动
+});
+
+// ==================== 交互 ====================
+const raycaster = new THREE.Raycaster();
+raycaster.far = 40;
+const mouse = new THREE.Vector2();
+let hoveredObject = null;
+let selectedObject = null;
+const tooltip = document.getElementById('tooltip');
+const infoPanel = document.getElementById('info-panel');
+let allInteractive = [];
+
+function collectInteractive(obj) {
+  if (obj.userData && obj.userData.name) allInteractive.push(obj);
+  if (obj.children) obj.children.forEach(collectInteractive);
+}
+collectInteractive(watchGroup);
+allInteractive.push(crystal, bezel, caseMiddle, caseBackOuter, displayCrystal);
+
+// 高亮材质缓存
+const highlightCache = new Map();
+
+function getHighlightMaterial(obj) {
+  if (highlightCache.has(obj)) return highlightCache.get(obj);
+  const origMat = obj.material;
+  if (!origMat || !origMat.isMaterial) return null;
+
+  let hlMat;
+  if (origMat.emissive) {
+    hlMat = origMat.clone();
+    hlMat.emissive = new THREE.Color(0x886633);
+    hlMat.emissiveIntensity = (origMat.emissiveIntensity || 0) + 0.6;
+  } else {
+    hlMat = origMat.clone();
+    hlMat.emissive = new THREE.Color(0x664422);
+    hlMat.emissiveIntensity = 0.5;
+  }
+  highlightCache.set(obj, hlMat);
+  return hlMat;
+}
+
+document.addEventListener('mousemove', (e) => {
+  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+
+  raycaster.setFromCamera(mouse, camera);
+  const intersects = raycaster.intersectObjects(allInteractive, true);
+
+  let newHovered = null;
+  if (intersects.length > 0) {
+    let obj = intersects[0].object;
+    while (obj) {
+      if (obj.userData && obj.userData.name) { newHovered = obj; break; }
+      obj = obj.parent;
+    }
+  }
+
+  if (hoveredObject !== newHovered) {
+    // 还原上一个
+    if (hoveredObject && hoveredObject !== selectedObject) {
+      const origMat = highlightCache.get(hoveredObject);
+      if (origMat) hoveredObject.material = hoveredObject.userData?._origMat || hoveredObject.material;
+    }
+    // 高亮新的
+    if (newHovered) {
+      if (!newHovered.userData._origMat) {
+        newHovered.userData._origMat = newHovered.material;
+      }
+      newHovered.material = getHighlightMaterial(newHovered);
+      document.body.classList.add('pointer');
+    } else {
+      document.body.classList.remove('pointer');
+    }
+    hoveredObject = newHovered;
+  }
+
+  // 更新提示位置
+  if (hoveredObject && intersects.length > 0) {
+    const pt = intersects[0].point.clone();
+    pt.project(camera);
+    const sx = (pt.x * 0.5 + 0.5) * window.innerWidth;
+    const sy = (-pt.y * 0.5 + 0.5) * window.innerHeight;
+    tooltip.style.left = sx + 'px';
+    tooltip.style.top = sy + 'px';
+    tooltip.textContent = hoveredObject.userData.name;
+    tooltip.classList.add('visible');
+  } else {
+    tooltip.classList.remove('visible');
+  }
+});
+
+document.addEventListener('click', (e) => {
+  if (e.target.closest('#controls') || e.target.closest('#info-panel')) return;
+
+  if (hoveredObject && hoveredObject.userData.name) {
+    selectedObject = hoveredObject;
+    infoPanel.querySelector('.part-name').textContent = selectedObject.userData.name;
+    infoPanel.querySelector('.part-desc').textContent = selectedObject.userData.desc || '';
+    infoPanel.querySelector('.part-material').textContent = selectedObject.userData.material || '';
+    infoPanel.classList.add('visible');
+  } else {
+    selectedObject = null;
+    infoPanel.classList.remove('visible');
+  }
+});
+
+// ==================== 视图切换 ====================
+let viewMode = 'normal';
+let explodeProgress = 0;
+let targetExplode = 0;
+
+window.setView = function(mode) {
+  targetExplode = mode === 'explode' ? 1 : 0;
+  viewMode = mode;
+  document.getElementById('btn-normal').classList.toggle('active', mode === 'normal');
+  document.getElementById('btn-explode').classList.toggle('active', mode === 'explode');
+};
+
+window.toggleAutoRotate = function() {
+  controls.autoRotate = !controls.autoRotate;
+  document.getElementById('btn-auto').classList.toggle('active', controls.autoRotate);
+};
+
+window.resetCamera = function() {
+  const targetY = explodeProgress > 0.5 ? 3 : -0.5;
+  camera.position.set(18, 14 + targetY * 0.3, 28);
+  controls.target.set(0, targetY, 0);
+  controls.update();
+};
+
+// 初始状态
+document.getElementById('btn-auto').classList.add('active');
+
+// ==================== 粒子效果 ====================
+const particlesGeom = new THREE.BufferGeometry();
+const particlesCount = 80;
+const particlesPos = new Float32Array(particlesCount * 3);
+const particlesSizes = new Float32Array(particlesCount);
+for (let i = 0; i < particlesCount; i++) {
+  const theta = Math.random() * Math.PI * 2;
+  const phi = Math.random() * Math.PI * 0.5;
+  const r = 22 + Math.random() * 35;
+  particlesPos[i * 3] = Math.cos(theta) * Math.cos(phi) * r;
+  particlesPos[i * 3 + 1] = 2 + Math.random() * 25;
+  particlesPos[i * 3 + 2] = Math.sin(theta) * Math.cos(phi) * r;
+  particlesSizes[i] = Math.random() * 0.04 + 0.02;
+}
+particlesGeom.setAttribute('position', new THREE.BufferAttribute(particlesPos, 3));
+particlesGeom.setAttribute('size', new THREE.BufferAttribute(particlesSizes, 1));
+const particlesMat = new THREE.PointsMaterial({
+  color: 0xc8a45a, size: 0.12, transparent: true, opacity: 0.5,
+  blending: THREE.AdditiveBlending, depthWrite: false,
+});
+const particles = new THREE.Points(particlesGeom, particlesMat);
+scene.add(particles);
+
+// ==================== 动画循环 ====================
+const clock = new THREE.Clock();
+
+function animate() {
+  requestAnimationFrame(animate);
+
+  const dt = Math.min(clock.getDelta(), 0.1);
+  const elapsed = clock.elapsedTime;
+
+  controls.update();
+
+  // 爆炸视图过渡
+  explodeProgress += (targetExplode - explodeProgress) * Math.min(dt * 3.5, 1);
+  explodeGroups.forEach(eg => {
+    if (!eg.group) return;
+    const targetY = eg.normalY + (eg.explodeY - eg.normalY) * explodeProgress;
+    eg.group.position.y += (targetY - eg.group.position.y) * Math.min(dt * 4, 1);
+  });
+
+  // 额外组件
+  extraExplodeTargets.forEach(et => {
+    const ty = et.normalY + (et.explodeY - et.normalY) * explodeProgress;
+    et.group.position.y += (ty - et.group.position.y) * Math.min(dt * 4, 1);
+  });
+
+  // 摆轮振荡（4Hz ≈ 28,800 bph）
+  const balanceFreq = 4;
+  const balanceAmp = 0.35;
+  balanceGroup.rotation.y = Math.sin(elapsed * Math.PI * 2 * balanceFreq) * balanceAmp;
+
+  // 擒纵叉摆动
+  palletFork.rotation.y = Math.sin(elapsed * Math.PI * 2 * balanceFreq) * 0.18 + 0.05;
+
+  // 擒纵轮间歇转动
+  const tickPeriod = 1 / (balanceFreq * 2);
+  const tickPhase = (elapsed % tickPeriod) / tickPeriod;
+  const baseRotation = Math.floor(elapsed / tickPeriod) * (Math.PI * 2 / 15);
+  escapeWheel.rotation.y = baseRotation + Math.max(0, (0.08 - tickPhase) * 2) * 0.3;
+
+  // 齿轮缓慢旋转
+  const gearSpeed = 0.08;
+  centerWheel.rotation.y += dt * gearSpeed * 3;
+  thirdWheel.rotation.y -= dt * gearSpeed * 9;
+  fourthWheel.rotation.y += dt * gearSpeed * 27;
+  ratchetWheel.rotation.y += dt * gearSpeed * 0.3;
+  barrelOuter.rotation.y += dt * gearSpeed * 0.5;
+
+  // 指针旋转
+  const simHours = (elapsed * 0.02) % 12;
+  const simMinutes = (elapsed * 0.24) % 60;
+  const simSeconds = (elapsed * 14.4) % 60;
+  hourHand.rotation.y = -(simHours / 12) * Math.PI * 2;
+  minuteHand.rotation.y = -(simMinutes / 60) * Math.PI * 2;
+  secondHand.rotation.y = -(simSeconds / 60) * Math.PI * 2;
+
+  // 粒子动画
+  const posArr = particlesGeom.attributes.position.array;
+  for (let i = 0; i < particlesCount; i++) {
+    posArr[i * 3 + 1] += Math.sin(elapsed * 0.7 + i) * 0.008;
+    posArr[i * 3] += Math.cos(elapsed * 0.5 + i * 1.3) * 0.005;
+  }
+  particlesGeom.attributes.position.needsUpdate = true;
+  particles.rotation.y += dt * 0.04;
+
+  // 点光源微动
+  pointLights.forEach((pl, i) => {
+    pl.intensity = 25 + Math.sin(elapsed * 1.5 + i) * 8;
+  });
+
+  // 夜光动态亮度
+  const lumeGlow = 1.6 + Math.sin(elapsed * 0.6) * 0.4;
+  matLume.emissiveIntensity = lumeGlow;
+
+  renderer.render(scene, camera);
+}
+
+// ==================== 响应式 ====================
+window.addEventListener('resize', () => {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+// 键盘快捷键
+window.addEventListener('keydown', (e) => {
+  switch (e.key.toLowerCase()) {
+    case 'e': setView(viewMode === 'explode' ? 'normal' : 'explode'); break;
+    case 'r': resetCamera(); break;
+    case 'a': toggleAutoRotate(); break;
+    case 'f': camera.position.set(0, 0, 35); controls.target.set(0, -0.5, 0); controls.update(); break;
+    case 't': camera.position.set(0, 25, 2); controls.target.set(0, -0.5, 0); controls.update(); break;
+  }
+});
+
+// ==================== 启动 ====================
+animate();
+
+console.log('%c⌚ 3D镂空机械腕表已就绪 %c| %cCalibre Squelette',
+  'color:#c8a45a;font-size:16px;',
+  '',
+  'color:#888;');
+console.log('%c操作提示: 拖拽旋转 | 滚轮缩放 | 右键平移 | E=爆炸视图 | A=自动旋转 | F=正面 | T=俯视 | 点击零件查看详情',
+  'color:#888;font-size:11px;');
+</script>
+</body>
+</html>
diff --git a/outputs/gemini-3-1-pro/antigravity-high/skeleton-watch.html b/outputs/gemini-3-1-pro/antigravity-high/skeleton-watch.html
new file mode 100644
index 0000000..848080e
--- /dev/null
+++ b/outputs/gemini-3-1-pro/antigravity-high/skeleton-watch.html
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aero Tourbillon - 3D Skeleton Watch</title>
+    <style>
+        body { margin: 0; overflow: hidden; background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: white; user-select: none; }
+        #canvas-container { width: 100vw; height: 100vh; cursor: grab; }
+        #canvas-container:active { cursor: grabbing; }
+        #ui-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
+        .panel { background: rgba(15, 15, 20, 0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 20px rgba(212, 175, 55, 0.05); padding: 25px; pointer-events: auto; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
+        #info-panel { position: absolute; bottom: 40px; left: 40px; width: 320px; transform: translateY(150%); opacity: 0; }
+        #info-panel.visible { transform: translateY(0); opacity: 1; }
+        #info-panel h2 { margin: 0 0 15px 0; font-size: 22px; color: #d4af37; text-transform: uppercase; letter-spacing: 2px; border-bottom: 1px solid rgba(212, 175, 55, 0.3); padding-bottom: 10px; }
+        #info-panel p { margin: 0; font-size: 15px; line-height: 1.6; color: #dddddd; }
+        #controls { position: absolute; top: 40px; right: 40px; display: flex; flex-direction: column; gap: 15px; }
+        button { background: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%); border: none; padding: 12px 24px; color: #000; font-weight: bold; border-radius: 6px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: transform 0.2s, box-shadow 0.2s; pointer-events: auto; outline: none; }
+        button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4); }
+        button:active { transform: translateY(0); }
+        #tooltip { position: absolute; background: rgba(0,0,0,0.9); border: 1px solid #d4af37; padding: 8px 12px; border-radius: 4px; font-size: 13px; font-weight: bold; letter-spacing: 1px; color: #d4af37; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 10; white-space: nowrap; transform: translate(15px, 15px); }
+        #title { position: absolute; top: 40px; left: 40px; pointer-events: auto; }
+        #title h1 { margin: 0; font-size: 32px; font-weight: 300; letter-spacing: 6px; }
+        #title span { color: #d4af37; font-weight: 600; text-shadow: 0 0 15px rgba(212,175,55,0.4); }
+        #title p { margin-top:8px; color:#aaa; font-size: 12px; letter-spacing: 3px; margin-bottom: 0; }
+        #loading { position:fixed; top:0; left:0; width:100%; height:100%; background:#0a0a0e; z-index:9999; display:flex; flex-direction: column; justify-content:center; align-items:center; color:#d4af37; font-size:24px; letter-spacing:4px; transition: opacity 0.8s ease; pointer-events: none; }
+        .spinner { width: 50px; height: 50px; border: 3px solid rgba(212,175,55,0.3); border-radius: 50%; border-top-color: #d4af37; animation: spin 1s ease-in-out infinite; margin-bottom: 20px; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+    </style>
+</head>
+<body>
+    <div id="loading">
+        <div class="spinner"></div>
+        <div>ASSEMBLING MOVEMENT...</div>
+    </div>
+    
+    <div id="canvas-container"></div>
+    
+    <div id="ui-container">
+        <div id="title">
+            <h1>AERO<span>TOURBILLON</span></h1>
+            <p>CALIBER X-01 SKELETON</p>
+        </div>
+        
+        <div id="controls">
+            <button id="btn-explode">Toggle Exploded View</button>
+            <button id="btn-time">Pause/Resume Time</button>
+        </div>
+        
+        <div id="info-panel" class="panel">
+            <h2 id="info-title">Component</h2>
+            <p id="info-desc">Description goes here.</p>
+        </div>
+        
+        <div id="tooltip">Tooltip</div>
+    </div>
+    <!-- Libraries -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>
+    <script>
+        let scene, camera, renderer, controls, raycaster;
+        const watchParts = [];
+        let interactableGroup;
+        const originalEmissives = new Map();
+        let hoveredPart = null;
+        let lockedPart = null;
+        const mouse = new THREE.Vector2();
+        let mouseX = 0, mouseY = 0;
+        let time = 0;
+        let timeFlowing = true;
+        let isExploded = false;
+        let dynamicData = {};
+        init();
+        animate();
+        function createEnvMap(renderer) {
+            const canvas = document.createElement('canvas');
+            canvas.width = 1024;
+            canvas.height = 512;
+            const ctx = canvas.getContext('2d');
+            
+            const gradient = ctx.createLinearGradient(0, 0, 0, 512);
+            gradient.addColorStop(0, '#0a0a0a');
+            gradient.addColorStop(0.5, '#2a2a2a');
+            gradient.addColorStop(1, '#050505');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, 1024, 512);
+            
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(300, 50, 424, 150);
+            ctx.fillStyle = '#aaaaaa';
+            ctx.fillRect(50, 200, 100, 200);
+            ctx.fillRect(874, 200, 100, 200);
+            ctx.fillStyle = '#443322';
+            ctx.fillRect(400, 350, 224, 100);
+            const texture = new THREE.CanvasTexture(canvas);
+            texture.mapping = THREE.EquirectangularReflectionMapping;
+            
+            const pmremGenerator = new THREE.PMREMGenerator(renderer);
+            pmremGenerator.compileEquirectangularShader();
+            const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+            texture.dispose();
+            pmremGenerator.dispose();
+            return envMap;
+        }
+        function init() {
+            const container = document.getElementById('canvas-container');
+            scene = new THREE.Scene();
+            
+            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
+            camera.position.set(40, 50, 60);
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Cap at 2x for performance
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.toneMappingExposure = 1.3;
+            renderer.outputEncoding = THREE.sRGBEncoding;
+            container.appendChild(renderer.domElement);
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            controls.maxDistance = 150;
+            controls.minDistance = 20;
+            controls.autoRotate = true;
+            controls.autoRotateSpeed = 0.8;
+            const envMap = createEnvMap(renderer);
+            scene.environment = envMap;
+            const spotLight = new THREE.SpotLight(0xffffff, 4);
+            spotLight.position.set(20, 60, 20);
+            spotLight.angle = Math.PI / 4;
+            spotLight.penumbra = 0.4;
+            spotLight.castShadow = true;
+            spotLight.shadow.mapSize.width = 2048;
+            spotLight.shadow.mapSize.height = 2048;
+            spotLight.shadow.bias = -0.0005;
+            scene.add(spotLight);
+            const rimLight = new THREE.PointLight(0x5588ff, 2, 100);
+            rimLight.position.set(-30, -10, -30);
+            scene.add(rimLight);
+            const warmLight = new THREE.PointLight(0xffaa55, 2, 100);
+            warmLight.position.set(30, -10, 30);
+            scene.add(warmLight);
+            const materials = {
+                gold: new THREE.MeshStandardMaterial({ color: 0xd4af37, metalness: 1.0, roughness: 0.15 }),
+                roseGold: new THREE.MeshStandardMaterial({ color: 0xb76e79, metalness: 1.0, roughness: 0.2 }),
+                silver: new THREE.MeshStandardMaterial({ color: 0xe8e8e8, metalness: 1.0, roughness: 0.1 }),
+                brushedMetal: new THREE.MeshStandardMaterial({ color: 0x999999, metalness: 0.8, roughness: 0.4 }),
+                darkMetal: new THREE.MeshStandardMaterial({ color: 0x222222, metalness: 0.9, roughness: 0.3 }),
+                ruby: new THREE.MeshPhysicalMaterial({ color: 0xff0044, transmission: 0.9, opacity: 1, metalness: 0, roughness: 0, clearcoat: 1.0, clearcoatRoughness: 0.1, ior: 1.76 }),
+                glass: new THREE.MeshPhysicalMaterial({ color: 0xffffff, transmission: 1.0, opacity: 1, metalness: 0, roughness: 0, clearcoat: 1.0, ior: 1.5, transparent: true }),
+                lume: new THREE.MeshStandardMaterial({ color: 0xe0ffe0, emissive: 0x00ff44, emissiveIntensity: 1.5, roughness: 0.4 }),
+                screws: new THREE.MeshStandardMaterial({ color: 0x113388, metalness: 0.9, roughness: 0.2 })
+            };
+            function createGear(radius, teethCount, thickness, material, spokeCount = 5) {
+                const group = new THREE.Group();
+                if (teethCount > 0) {
+                    const shape = new THREE.Shape();
+                    const innerRadius = radius * 0.85;
+                    for (let i = 0; i <= teethCount * 2; i++) {
+                        const r = i % 2 === 0 ? radius : innerRadius;
+                        const angle = (i / (teethCount * 2)) * Math.PI * 2;
+                        if (i === 0) shape.moveTo(Math.cos(angle) * r, Math.sin(angle) * r);
+                        else shape.lineTo(Math.cos(angle) * r, Math.sin(angle) * r);
+                    }
+                    const holePath = new THREE.Path();
+                    holePath.absarc(0, 0, radius * 0.75, 0, Math.PI * 2, true);
+                    shape.holes.push(holePath);
+                    const extrudeSettings = { depth: thickness, bevelEnabled: true, bevelSegments: 1, steps: 1, bevelSize: thickness * 0.05, bevelThickness: thickness * 0.05 };
+                    const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+                    geometry.center();
+                    const gearMesh = new THREE.Mesh(geometry, material);
+                    gearMesh.rotation.x = Math.PI / 2;
+                    group.add(gearMesh);
+                } else {
+                    const ringGeom = new THREE.TorusGeometry(radius, thickness/2, 16, 64);
+                    const ringMesh = new THREE.Mesh(ringGeom, material);
+                    ringMesh.rotation.x = Math.PI / 2;
+                    group.add(ringMesh);
+                }
+                if (spokeCount > 0) {
+                    const centerGeom = new THREE.CylinderGeometry(radius * 0.15, radius * 0.15, thickness * 1.2, 16);
+                    const centerMesh = new THREE.Mesh(centerGeom, material);
+                    group.add(centerMesh);
+                    for (let i = 0; i < spokeCount; i++) {
+                        const spokeGeom = new THREE.BoxGeometry(radius * 0.1, thickness * 0.8, radius * 0.8);
+                        const spoke = new THREE.Mesh(spokeGeom, material);
+                        const angle = (i / spokeCount) * Math.PI * 2;
+                        spoke.position.x = Math.cos(angle) * (radius * 0.4);
+                        spoke.position.z = Math.sin(angle) * (radius * 0.4);
+                        spoke.rotation.y = -angle;
+                        group.add(spoke);
+                    }
+                }
+                const axisGeom = new THREE.CylinderGeometry(radius * 0.05, radius * 0.05, thickness * 3, 16);
+                const axis = new THREE.Mesh(axisGeom, materials.silver);
+                group.add(axis);
+                return group;
+            }
+            function createBridge(points, holes, yPos, material) {
+                const shape = new THREE.Shape();
+                points.forEach((p, i) => {
+                    if(i===0) shape.moveTo(p[0], p[1]);
+                    else shape.lineTo(p[0], p[1]);
+                });
+                holes.forEach(h => {
+                    const holePath = new THREE.Path();
+                    holePath.absarc(h[0], h[1], h[2], 0, Math.PI * 2, true);
+                    shape.holes.push(holePath);
+                });
+                const extrudeSettings = { depth: 0.5, bevelEnabled: true, bevelSegments: 3, steps: 1, bevelSize: 0.1, bevelThickness: 0.1 };
+                const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+                const mesh = new THREE.Mesh(geometry, material);
+                mesh.rotation.x = Math.PI / 2;
+                mesh.position.y = yPos;
+                
+                const group = new THREE.Group();
+                group.add(mesh);
+                
+                holes.forEach(h => {
+                    const rubyGeom = new THREE.CylinderGeometry(h[2]*1.2, h[2]*1.2, 0.6, 16);
+                    const ruby = new THREE.Mesh(rubyGeom, materials.ruby);
+                    ruby.position.set(h[0], yPos, -h[1]);
+                    group.add(ruby);
+                    const screwGeom = new THREE.CylinderGeometry(0.3, 0.3, 0.4, 16);
+                    const screw = new THREE.Mesh(screwGeom, materials.screws);
+                    screw.position.set(h[0] + h[2]*1.8, yPos, -h[1] + h[2]*1.8);
+                    group.add(screw);
+                });
+                return group;
+            }
+            function makeHand(width, length, tail, color, hasLume) {
+                const shape = new THREE.Shape();
+                shape.moveTo(-width/2, -tail);
+                shape.lineTo(width/2, -tail);
+                shape.lineTo(width*0.6/2, length*0.9);
+                shape.lineTo(0, length);
+                shape.lineTo(-width*0.6/2, length*0.9);
+                const geom = new THREE.ExtrudeGeometry(shape, { depth: 0.1, bevelEnabled: true, bevelSize: 0.02, bevelThickness: 0.02 });
+                const mesh = new THREE.Mesh(geom, color);
+                mesh.rotation.x = Math.PI / 2;
+                
+                const hGroup = new THREE.Group();
+                hGroup.add(mesh);
+                
+                if(hasLume) {
+                    const lumeShape = new THREE.Shape();
+                    lumeShape.moveTo(-width*0.3, 2);
+                    lumeShape.lineTo(width*0.3, 2);
+                    lumeShape.lineTo(width*0.2, length*0.8);
+                    lumeShape.lineTo(-width*0.2, length*0.8);
+                    const lumeGeom = new THREE.ExtrudeGeometry(lumeShape, { depth: 0.12, bevelEnabled: false });
+                    const lumeMesh = new THREE.Mesh(lumeGeom, materials.lume);
+                    lumeMesh.rotation.x = Math.PI / 2;
+                    hGroup.add(lumeMesh);
+                }
+                return hGroup;
+            }
+            function createHands() {
+                const group = new THREE.Group();
+                const minHand = makeHand(1.0, 15, 2, materials.silver, true);
+                minHand.position.y = 0.5;
+                group.add(minHand);
+                const hourHand = makeHand(1.4, 10, 1.5, materials.silver, true);
+                hourHand.position.y = 0.2;
+                group.add(hourHand);
+                const secHand = makeHand(0.4, 16, 3, materials.ruby, false);
+                secHand.position.y = 0.8;
+                group.add(secHand);
+                const capGeom = new THREE.CylinderGeometry(0.8, 0.8, 0.5, 32);
+                const cap = new THREE.Mesh(capGeom, materials.silver);
+                cap.position.y = 1.0;
+                group.add(cap);
+                return { group, hourHand, minHand, secHand };
+            }
+            function createDial() {
+                const group = new THREE.Group();
+                const ringGeom = new THREE.RingGeometry(16, 17.5, 64);
+                const ring = new THREE.Mesh(ringGeom, materials.darkMetal);
+                ring.rotation.x = -Math.PI / 2;
+                group.add(ring);
+                for (let i = 0; i < 12; i++) {
+                    const angle = (i / 12) * Math.PI * 2;
+                    const isQuarter = i % 3 === 0;
+                    const width = isQuarter ? 0.6 : 0.4;
+                    const length = isQuarter ? 2.5 : 1.5;
+                    
+                    const indexGeom = new THREE.BoxGeometry(width, 0.4, length);
+                    const indexMesh = new THREE.Mesh(indexGeom, materials.silver);
+                    
+                    const lumeGeom = new THREE.BoxGeometry(width * 0.6, 0.45, length * 0.8);
+                    const lumeMesh = new THREE.Mesh(lumeGeom, materials.lume);
+                    
+                    const indexGroup = new THREE.Group();
+                    indexGroup.add(indexMesh);
+                    indexGroup.add(lumeMesh);
+                    
+                    indexGroup.position.set(Math.cos(angle) * 16, 0.2, Math.sin(angle) * 16);
+                    indexGroup.rotation.y = -angle;
+                    group.add(indexGroup);
+                }
+                return group;
+            }
+            function createTourbillon(x, y, z) {
+                const group = new THREE.Group();
+                group.position.set(x, y, z);
+                
+                const cageGeom = new THREE.TorusGeometry(3.5, 0.2, 16, 32);
+                const cage = new THREE.Mesh(cageGeom, materials.silver);
+                cage.rotation.x = Math.PI / 2;
+                group.add(cage);
+                
+                for(let i=0; i<3; i++) {
+                    const supportGeom = new THREE.BoxGeometry(0.3, 1.5, 3.5);
+                    const support = new THREE.Mesh(supportGeom, materials.silver);
+                    const angle = (i/3) * Math.PI * 2;
+                    support.position.set(Math.cos(angle)*1.75, 0.75, Math.sin(angle)*1.75);
+                    support.rotation.y = -angle;
+                    cage.add(support);
+                }
+                const balanceWheel = createGear(2.5, 0, 0.2, materials.gold, 3);
+                balanceWheel.position.y = 0.5;
+                
+                for(let i=0; i<12; i++) {
+                    const screwGeom = new THREE.CylinderGeometry(0.15, 0.15, 0.3, 8);
+                    const screw = new THREE.Mesh(screwGeom, materials.screws);
+                    const angle = (i/12) * Math.PI * 2;
+                    screw.position.set(Math.cos(angle)*2.5, 0, Math.sin(angle)*2.5);
+                    screw.rotation.x = Math.PI / 2;
+                    screw.rotation.z = angle;
+                    balanceWheel.add(screw);
+                }
+                
+                const curve = new THREE.Curve();
+                curve.getPoint = function(t) {
+                    const angle = t * Math.PI * 10;
+                    const radius = 0.2 + t * 1.5;
+                    return new THREE.Vector3(Math.cos(angle)*radius, 0, Math.sin(angle)*radius);
+                };
+                const springGeom = new THREE.TubeGeometry(curve, 100, 0.02, 8, false);
+                const spring = new THREE.Mesh(springGeom, materials.silver);
+                spring.position.y = 0.8;
+                balanceWheel.add(spring);
+                cage.add(balanceWheel);
+                
+                const escapeWheel = createGear(1, 15, 0.1, materials.silver, 4);
+                escapeWheel.position.set(2.5, 0.5, -2.5);
+                cage.add(escapeWheel);
+                return { group, cage, balanceWheel, escapeWheel };
+            }
+            function createBarrel(radius, thickness) {
+                const group = new THREE.Group();
+                const barrelGear = createGear(radius, 72, thickness, materials.gold, 0);
+                group.add(barrelGear);
+                const coverGeom = new THREE.CylinderGeometry(radius * 0.95, radius * 0.95, thickness * 1.1, 32);
+                const cover = new THREE.Mesh(coverGeom, materials.darkMetal);
+                group.add(cover);
+                return group;
+            }
+            interactableGroup = new THREE.Group();
+            scene.add(interactableGroup);
+            function addPart(mesh, name, desc, expY) {
+                mesh.userData.parentPart = { name, desc, object: mesh, origY: mesh.position.y, expY };
+                mesh.traverse(c => {
+                    if (c.isMesh) {
+                        c.userData.parentPart = mesh.userData.parentPart;
+                        c.castShadow = true;
+                        c.receiveShadow = true;
+                    }
+                });
+                watchParts.push(mesh.userData.parentPart);
+                interactableGroup.add(mesh);
+            }
+            // Assembly
+            const topGlass = new THREE.Mesh(new THREE.CylinderGeometry(18.5, 18.5, 0.2, 64), materials.glass);
+            topGlass.position.y = 4.5;
+            topGlass.castShadow = false;
+            addPart(topGlass, "Sapphire Crystal", "Scratch-resistant synthetic sapphire with double anti-reflective coating.", 25);
+            const bezel = new THREE.Mesh(new THREE.TorusGeometry(19, 1.2, 32, 64), materials.silver);
+            bezel.rotation.x = Math.PI / 2;
+            bezel.position.y = 2.5;
+            for(let i=0; i<8; i++) {
+                const screw = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.3, 0.5, 16), materials.darkMetal);
+                const angle = (i/8)*Math.PI*2;
+                screw.position.set(Math.cos(angle)*19, 0.5, Math.sin(angle)*19);
+                bezel.add(screw);
+            }
+            addPart(bezel, "Polished Bezel", "Hand-polished stainless steel bezel securing the crystal to the main case.", 18);
+            const handsData = createHands();
+            handsData.group.position.y = 3.5;
+            addPart(handsData.group, "Luminous Hands", "Diamond-cut facetted hands applied with high-intensity Super-LumiNova.", 12);
+            const dial = createDial();
+            dial.position.y = 2.0;
+            addPart(dial, "Skeleton Dial", "Floating indices ring providing clear time reading without obstructing the mechanical view.", 7);
+            const bridge1Points = [[-5, 9], [5, 9], [7, -5], [2, -6], [-3, -2]];
+            const bridge1Holes = [[0, 6.5, 0.8], [0, 0, 0.5], [4.5, -3, 0.5]];
+            const topBridge = createBridge(bridge1Points, bridge1Holes, 1.2, materials.darkMetal);
+            
+            const tourbBridgePoints = [[-3, -5], [3, -5], [2, -9], [-2, -9]];
+            const tourbBridgeHoles = [[0, -7, 0.5]];
+            const tourbBridge = createBridge(tourbBridgePoints, tourbBridgeHoles, 1.2, materials.silver);
+            const topBridgeGroup = new THREE.Group();
+            topBridgeGroup.add(topBridge, tourbBridge);
+            addPart(topBridgeGroup, "Upper Bridges", "Micro-blasted titanium bridges holding the gear train in perfect alignment.", 3);
+            const gearTrain = new THREE.Group();
+            const centerWheel = createGear(4, 60, 0.4, materials.gold, 5);
+            centerWheel.position.set(0, -0.5, 0);
+            const thirdWheel = createGear(3, 45, 0.4, materials.roseGold, 5);
+            thirdWheel.position.set(4.5, 0.5, 3);
+            gearTrain.add(centerWheel, thirdWheel);
+            addPart(gearTrain, "Gear Train", "High-precision brass and rose gold wheels transmitting power smoothly from the barrel.", 0);
+            const tourbillonData = createTourbillon(0, 0, 7);
+            addPart(tourbillonData.group, "Flying Tourbillon", "One-minute tourbillon countering the effects of gravity on the escapement for ultimate precision.", 0);
+            const barrel = createBarrel(5.5, 1.2);
+            barrel.position.set(0, 0, -6.5);
+            addPart(barrel, "Mainspring Barrel", "Houses the massive mainspring, providing a robust 72-hour power reserve.", 0);
+            const bpShape = new THREE.Shape();
+            bpShape.absarc(0, 0, 18, 0, Math.PI * 2, false);
+            const bpCutouts = [[0, 6.5, 5], [0, 0, 3.5], [4.5, -3, 2.5], [0, -7, 4.5], [-5, -2, 3], [-4, 3, 2.5]];
+            bpCutouts.forEach(c => {
+                const path = new THREE.Path();
+                path.absarc(c[0], c[1], c[2], 0, Math.PI * 2, true);
+                bpShape.holes.push(path);
+            });
+            const bpGeom = new THREE.ExtrudeGeometry(bpShape, { depth: 0.8, bevelEnabled: true, bevelSegments: 2, steps: 1, bevelSize: 0.2, bevelThickness: 0.2 });
+            const basePlate = new THREE.Mesh(bpGeom, materials.darkMetal);
+            basePlate.rotation.x = Math.PI / 2;
+            basePlate.position.y = -1.5;
+            addPart(basePlate, "Main Plate", "The structural foundation of the movement, intricately skeletonized to reduce weight.", -5);
+            const mainCase = new THREE.Mesh(new THREE.CylinderGeometry(19.5, 19, 5, 64), materials.brushedMetal);
+            mainCase.position.y = -0.5;
+            const lugGeom = new THREE.BoxGeometry(4, 3, 8);
+            const positions = [ [12, 0, 18], [-12, 0, 18], [12, 0, -18], [-12, 0, -18] ];
+            positions.forEach(pos => {
+                const lug = new THREE.Mesh(lugGeom, materials.silver);
+                lug.position.set(...pos);
+                lug.lookAt(0,0,0);
+                mainCase.add(lug);
+            });
+            const crown = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 1.5, 32), materials.gold);
+            crown.rotation.z = Math.PI / 2;
+            crown.position.set(20.5, 0, 0);
+            mainCase.add(crown);
+            addPart(mainCase, "Oyster Case", "40mm brushed steel case ensuring water resistance to 100 meters.", -12);
+            const rotorShape = new THREE.Shape();
+            rotorShape.absarc(0, 0, 16, 0, Math.PI, false);
+            rotorShape.absarc(0, 0, 4, Math.PI, 0, true);
+            const rotorGeom = new THREE.ExtrudeGeometry(rotorShape, { depth: 0.5, bevelEnabled: true, bevelSize: 0.1, bevelThickness: 0.1 });
+            const rotorGroup = new THREE.Group();
+            const rotorMesh = new THREE.Mesh(rotorGeom, materials.roseGold);
+            rotorMesh.rotation.x = Math.PI / 2;
+            rotorGroup.add(rotorMesh);
+            rotorGroup.position.y = -2.8;
+            addPart(rotorGroup, "Winding Rotor", "Heavy tungsten oscillating weight that winds the mainspring automatically with wrist movement.", -16);
+            const bottomGlass = new THREE.Mesh(new THREE.CylinderGeometry(18.5, 18.5, 0.2, 64), materials.glass);
+            bottomGlass.position.y = -3.5;
+            bottomGlass.castShadow = false;
+            addPart(bottomGlass, "Exhibition Caseback", "Sapphire crystal allowing full view of the movement's spectacular rear architecture.", -20);
+            dynamicData = {
+                balanceWheel: tourbillonData.balanceWheel,
+                escapeWheel: tourbillonData.escapeWheel,
+                cage: tourbillonData.cage,
+                secHand: handsData.secHand,
+                minHand: handsData.minHand,
+                hourHand: handsData.hourHand,
+                centerWheel: centerWheel,
+                thirdWheel: thirdWheel,
+                barrel: barrel,
+                rotor: rotorGroup
+            };
+            raycaster = new THREE.Raycaster();
+            window.addEventListener('mousemove', (event) => {
+                mouseX = event.clientX;
+                mouseY = event.clientY;
+                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+            });
+            window.addEventListener('click', (event) => {
+                if (event.target.tagName === 'BUTTON') return;
+                if (hoveredPart) {
+                    if (lockedPart === hoveredPart) lockedPart = null;
+                    else lockedPart = hoveredPart;
+                } else {
+                    lockedPart = null;
+                }
+            });
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+            document.getElementById('btn-explode').addEventListener('click', () => {
+                isExploded = !isExploded;
+                watchParts.forEach(part => {
+                    const targetY = isExploded ? part.expY : part.origY;
+                    new TWEEN.Tween(part.object.position)
+                        .to({ y: targetY }, 1500)
+                        .easing(TWEEN.Easing.Cubic.InOut)
+                        .start();
+                });
+            });
+            document.getElementById('btn-time').addEventListener('click', () => {
+                timeFlowing = !timeFlowing;
+            });
+            setTimeout(() => {
+                const loader = document.getElementById('loading');
+                loader.style.opacity = '0';
+                setTimeout(() => loader.style.display = 'none', 800);
+            }, 1500);
+        }
+        function highlight(part) {
+            if (hoveredPart === part) return;
+            if (hoveredPart && hoveredPart !== lockedPart) unhighlightPart(hoveredPart);
+            
+            hoveredPart = part;
+            
+            part.object.traverse(child => {
+                if (child.isMesh && child.material) {
+                    if(!originalEmissives.has(child)) {
+                        originalEmissives.set(child, child.material.emissive ? child.material.emissive.clone() : new THREE.Color(0x000000));
+                    }
+                    if (!child.material.emissive) child.material.emissive = new THREE.Color();
+                    child.material.emissive.setHex(0x444444);
+                }
+            });
+            document.getElementById('info-title').innerText = part.name;
+            document.getElementById('info-desc').innerText = part.desc;
+            document.getElementById('info-panel').classList.add('visible');
+        }
+        function unhighlightPart(part) {
+            part.object.traverse(child => {
+                if (child.isMesh && child.material) {
+                    const orig = originalEmissives.get(child);
+                    if (orig) child.material.emissive.copy(orig);
+                }
+            });
+            if(hoveredPart === part) {
+                hoveredPart = null;
+                if(!lockedPart) document.getElementById('info-panel').classList.remove('visible');
+            }
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            TWEEN.update();
+            controls.update();
+            if (timeFlowing) {
+                time += 0.016;
+                
+                dynamicData.balanceWheel.rotation.y = Math.sin(time * 30) * 1.5;
+                const tickStep = Math.floor(time * 5); 
+                dynamicData.escapeWheel.rotation.y = tickStep * (Math.PI * 2 / 15);
+                dynamicData.cage.rotation.y = time * 0.5;
+                
+                dynamicData.secHand.rotation.y = -time * 1;
+                dynamicData.minHand.rotation.y = -time * (1/60);
+                dynamicData.hourHand.rotation.y = -time * (1/3600);
+                
+                dynamicData.centerWheel.rotation.y = time * 1;
+                dynamicData.thirdWheel.rotation.y = -time * 1.5;
+                dynamicData.barrel.rotation.y = time * 0.1;
+                
+                dynamicData.rotor.rotation.z = Math.sin(time * 0.5) * 1.5 + Math.cos(time * 1.2) * 0.5;
+            }
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(interactableGroup.children, true);
+            
+            if (intersects.length > 0) {
+                const part = intersects[0].object.userData.parentPart;
+                if (part) {
+                    if(!lockedPart || lockedPart === part) {
+                        highlight(part);
+                    }
+                    const tooltip = document.getElementById('tooltip');
+                    tooltip.style.opacity = 1;
+                    tooltip.innerText = part.name;
+                    tooltip.style.left = (mouseX + 15) + 'px';
+                    tooltip.style.top = (mouseY + 15) + 'px';
+                    controls.autoRotate = false;
+                }
+            } else {
+                if (hoveredPart && hoveredPart !== lockedPart) unhighlightPart(hoveredPart);
+                document.getElementById('tooltip').style.opacity = 0;
+                if(!lockedPart && !isExploded) controls.autoRotate = true;
+            }
+            if(lockedPart) {
+                document.getElementById('info-title').innerText = lockedPart.name;
+                document.getElementById('info-desc').innerText = lockedPart.desc;
+                document.getElementById('info-panel').classList.add('visible');
+            }
+            renderer.render(scene, camera);
+        }
+    </script>
+</body>
+</html>
diff --git a/outputs/gemini-3-5-flash/antigravity-high/skeleton-watch.html b/outputs/gemini-3-5-flash/antigravity-high/skeleton-watch.html
new file mode 100644
index 0000000..06048a5
--- /dev/null
+++ b/outputs/gemini-3-5-flash/antigravity-high/skeleton-watch.html
@@ -0,0 +1,2108 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Haute Horlogerie - 3D 镂空机械表</title>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
+    
+    <!-- Three.js & Libraries -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+    <style>
+        :root {
+            --bg-color: #050508;
+            --accent-color: #e5a186; /* Rose Gold */
+            --accent-glow: rgba(229, 161, 134, 0.4);
+            --glass-bg: rgba(10, 10, 15, 0.65);
+            --glass-border: rgba(255, 255, 255, 0.08);
+            --text-primary: #f0f0f5;
+            --text-secondary: #a0a0b0;
+            --lume-color: #39ff14; /* Green Lume */
+            --lume-glow: rgba(57, 255, 20, 0.4);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            user-select: none;
+            -webkit-user-select: none;
+        }
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            font-family: 'Outfit', sans-serif;
+            overflow: hidden;
+            height: 100vh;
+            width: 100vw;
+        }
+        #canvas-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        /* Ambient background gradient to simulate soft photo studio lighting */
+        .ambient-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at 50% 45%, rgba(25, 25, 35, 0.6) 0%, rgba(5, 5, 8, 1) 75%);
+            z-index: 0;
+            pointer-events: none;
+            transition: background 1.5s ease;
+        }
+        body.night-mode .ambient-bg {
+            background: radial-gradient(circle at 50% 45%, rgba(5, 15, 10, 0.4) 0%, rgba(2, 3, 5, 1) 85%);
+        }
+        /* UI Styling */
+        .ui-layer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 10;
+            pointer-events: none;
+            display: grid;
+            grid-template-columns: 320px 1fr 340px;
+            grid-template-rows: 80px 1fr 100px;
+            padding: 24px;
+            gap: 20px;
+        }
+        .interactive {
+            pointer-events: auto;
+        }
+        .glass-panel {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border-radius: 16px;
+            padding: 20px;
+            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+        }
+        .glass-panel:hover {
+            border-color: rgba(255, 255, 255, 0.15);
+            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6), 0 0 15px rgba(229, 161, 134, 0.05);
+        }
+        /* Header */
+        header {
+            grid-column: 1 / 4;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 100%;
+        }
+        .brand {
+            display: flex;
+            flex-direction: column;
+        }
+        .brand-title {
+            font-family: 'Cinzel', serif;
+            font-size: 20px;
+            font-weight: 700;
+            letter-spacing: 4px;
+            color: var(--text-primary);
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+        }
+        .brand-subtitle {
+            font-size: 11px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            color: var(--accent-color);
+            margin-top: 2px;
+            font-weight: 500;
+        }
+        .status-pill {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            padding: 6px 14px;
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: var(--accent-color);
+            box-shadow: 0 0 8px var(--accent-color);
+            animation: pulse 2s infinite;
+        }
+        body.night-mode .status-dot {
+            background-color: var(--lume-color);
+            box-shadow: 0 0 8px var(--lume-color);
+        }
+        /* Left Panel - Parts Navigator */
+        .left-panel {
+            grid-column: 1;
+            grid-row: 2;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            overflow-y: auto;
+        }
+        .panel-title {
+            font-family: 'Cinzel', serif;
+            font-size: 16px;
+            font-weight: 600;
+            letter-spacing: 2px;
+            border-bottom: 1px dashed var(--glass-border);
+            padding-bottom: 10px;
+            margin-bottom: 8px;
+            color: var(--text-primary);
+        }
+        .parts-list {
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .part-item {
+            padding: 10px 14px;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid transparent;
+            cursor: pointer;
+            font-size: 13px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: all 0.3s ease;
+            color: var(--text-secondary);
+        }
+        .part-item:hover, .part-item.active {
+            color: var(--text-primary);
+            background: rgba(229, 161, 134, 0.08);
+            border-color: rgba(229, 161, 134, 0.2);
+            padding-left: 18px;
+        }
+        body.night-mode .part-item:hover, body.night-mode .part-item.active {
+            background: rgba(57, 255, 20, 0.06);
+            border-color: rgba(57, 255, 20, 0.2);
+        }
+        .part-item::after {
+            content: '→';
+            font-size: 11px;
+            opacity: 0;
+            transform: translateX(-5px);
+            transition: all 0.3s ease;
+            color: var(--accent-color);
+        }
+        body.night-mode .part-item::after {
+            color: var(--lume-color);
+        }
+        .part-item:hover::after, .part-item.active::after {
+            opacity: 1;
+            transform: translateX(0);
+        }
+        /* Right Panel - Part Info Display */
+        .right-panel {
+            grid-column: 3;
+            grid-row: 2;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100%;
+        }
+        .info-card {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        .info-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .info-icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background: rgba(229, 161, 134, 0.15);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--accent-color);
+            font-size: 14px;
+            font-weight: bold;
+        }
+        body.night-mode .info-icon {
+            background: rgba(57, 255, 20, 0.15);
+            color: var(--lume-color);
+        }
+        .info-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+        .info-desc {
+            font-size: 13px;
+            line-height: 1.6;
+            color: var(--text-secondary);
+            min-height: 120px;
+        }
+        .specs-table {
+            width: 100%;
+            margin-top: 15px;
+            border-collapse: collapse;
+            font-size: 12px;
+        }
+        .specs-table tr {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .specs-table td {
+            padding: 8px 0;
+        }
+        .specs-table td:first-child {
+            color: var(--text-secondary);
+            font-weight: 400;
+        }
+        .specs-table td:last-child {
+            text-align: right;
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+        /* Bottom Control Bar */
+        .bottom-bar {
+            grid-column: 1 / 4;
+            grid-row: 3;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .control-group {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+        }
+        .btn {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid var(--glass-border);
+            color: var(--text-primary);
+            padding: 10px 20px;
+            border-radius: 30px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+            outline: none;
+        }
+        .btn:hover {
+            background: rgba(229, 161, 134, 0.1);
+            border-color: var(--accent-color);
+            box-shadow: 0 0 12px var(--accent-glow);
+            transform: translateY(-2px);
+        }
+        .btn.active {
+            background: var(--accent-color);
+            color: #050508;
+            border-color: var(--accent-color);
+            font-weight: 600;
+            box-shadow: 0 0 15px var(--accent-glow);
+        }
+        body.night-mode .btn:hover {
+            background: rgba(57, 255, 20, 0.08);
+            border-color: var(--lume-color);
+            box-shadow: 0 0 12px var(--lume-glow);
+        }
+        body.night-mode .btn.active {
+            background: var(--lume-color);
+            color: #050508;
+            border-color: var(--lume-color);
+            box-shadow: 0 0 15px var(--lume-glow);
+        }
+        /* Range Slider */
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid var(--glass-border);
+            padding: 8px 16px;
+            border-radius: 30px;
+        }
+        .slider-label {
+            font-size: 12px;
+            color: var(--text-secondary);
+            min-width: 60px;
+        }
+        .slider {
+            -webkit-appearance: none;
+            width: 100px;
+            height: 4px;
+            border-radius: 2px;
+            background: rgba(255, 255, 255, 0.1);
+            outline: none;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: var(--accent-color);
+            cursor: pointer;
+            transition: transform 0.1s;
+        }
+        .slider::-webkit-slider-thumb:hover {
+            transform: scale(1.3);
+        }
+        body.night-mode .slider::-webkit-slider-thumb {
+            background: var(--lume-color);
+        }
+        /* Camera Reset Button Positioning */
+        .reset-cam-btn {
+            position: absolute;
+            bottom: 120px;
+            right: 24px;
+            z-index: 10;
+        }
+        /* Dynamic Tooltip following mouse */
+        #tooltip {
+            position: absolute;
+            background: rgba(5, 5, 8, 0.85);
+            border: 1px solid var(--accent-color);
+            color: #fff;
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            pointer-events: none;
+            opacity: 0;
+            z-index: 100;
+            transition: opacity 0.25s, transform 0.1s;
+            font-weight: 500;
+            backdrop-filter: blur(4px);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+        }
+        body.night-mode #tooltip {
+            border-color: var(--lume-color);
+        }
+        /* Loading Screen */
+        #loader {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--bg-color);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            gap: 20px;
+            transition: opacity 0.8s ease;
+        }
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 3px dashed var(--accent-color);
+            border-radius: 50%;
+            animation: spin 3s linear infinite;
+        }
+        .loading-title {
+            font-family: 'Cinzel', serif;
+            font-size: 24px;
+            letter-spacing: 6px;
+        }
+        .loading-text {
+            font-size: 12px;
+            color: var(--text-secondary);
+            letter-spacing: 2px;
+            text-transform: uppercase;
+        }
+        /* Scrollbar styling */
+        .left-panel::-webkit-scrollbar {
+            width: 4px;
+        }
+        .left-panel::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .left-panel::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 2px;
+        }
+        .left-panel::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-color);
+        }
+        /* Animations */
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @keyframes pulse {
+            0% { opacity: 0.4; }
+            50% { opacity: 1; }
+            100% { opacity: 0.4; }
+        }
+        /* Mobile adaptation message */
+        .mobile-warning {
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--bg-color);
+            z-index: 10000;
+            padding: 40px;
+            text-align: center;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            gap: 20px;
+        }
+        @media (max-width: 768px) {
+            .ui-layer {
+                display: flex;
+                flex-direction: column;
+                overflow-y: auto;
+                height: 100%;
+                pointer-events: auto;
+            }
+            .left-panel, .right-panel {
+                display: none; /* Hide side panels on narrow screens */
+            }
+            .mobile-warning {
+                display: flex;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="loader">
+        <div class="spinner"></div>
+        <div class="loading-title">HAUTE HORLOGERIE</div>
+        <div class="loading-text">正在组装 3D 机械核心...</div>
+    </div>
+    <div class="mobile-warning">
+        <h2 style="font-family: 'Cinzel', serif;">HAUTE HORLOGERIE</h2>
+        <p style="font-size: 14px; color: var(--text-secondary);">为了获得最佳奢华体验，请在桌面端或更宽的屏幕上浏览此 3D 机械表模型。</p>
+        <button class="btn interactive" onclick="document.querySelector('.mobile-warning').style.display='none'">继续浏览</button>
+    </div>
+    <div class="ambient-bg"></div>
+    <div id="canvas-container"></div>
+    <div id="tooltip">零件名称</div>
+    <div class="ui-layer">
+        <!-- Header -->
+        <header class="glass-panel interactive">
+            <div class="brand">
+                <span class="brand-title">CALIBRE . S1</span>
+                <span class="brand-subtitle">镂空飞轮机械机芯</span>
+            </div>
+            <div class="status-pill">
+                <span class="status-dot"></span>
+                <span id="hz-indicator">振频: 4.0 Hz / 28800 vph</span>
+            </div>
+        </header>
+        <!-- Left Column: Navigation -->
+        <aside class="left-panel glass-panel interactive">
+            <h3 class="panel-title">机芯构造</h3>
+            <ul class="parts-list" id="parts-list">
+                <li class="part-item active" data-part="watch_casing">表壳与表带</li>
+                <li class="part-item" data-part="balance_wheel">螺丝摆轮 & 游丝</li>
+                <li class="part-item" data-part="escapement">擒纵轮与擒纵叉</li>
+                <li class="part-item" data-part="gear_train">动力传动齿轮系</li>
+                <li class="part-item" data-part="mainspring">储能发条盒</li>
+                <li class="part-item" data-part="bridges">金雕夹板与红宝石</li>
+                <li class="part-item" data-part="hands_dial">发光指针与字圈</li>
+            </ul>
+        </aside>
+        <!-- Center: Placeholder for camera controls (floating in bottom) -->
+        <button class="btn reset-cam-btn glass-panel interactive" id="btn-reset-cam">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+            重置视角
+        </button>
+        <!-- Right Column: Detail Card -->
+        <aside class="right-panel glass-panel interactive">
+            <div class="info-card">
+                <div class="info-header">
+                    <div class="info-icon" id="info-idx">01</div>
+                    <h3 class="info-title" id="info-title">表壳与表带</h3>
+                </div>
+                <p class="info-desc" id="info-desc">
+                    极致拉丝的精钢表壳，配备双面防眩光蓝宝石水晶玻璃。透底设计完全展现底层复杂的机械运作，坚实保护表盘核心。
+                </p>
+                <table class="specs-table" id="specs-table">
+                    <tr>
+                        <td>精饰工艺</td>
+                        <td id="spec-1">抛光 & 缎面拉丝</td>
+                    </tr>
+                    <tr>
+                        <td>特殊设计</td>
+                        <td id="spec-2">双向防眩光玻璃</td>
+                    </tr>
+                    <tr>
+                        <td>组件材质</td>
+                        <td id="spec-3">316L 精钢 / 玫瑰金</td>
+                    </tr>
+                </table>
+            </div>
+            <div style="font-size: 11px; color: var(--text-secondary); text-align: center; border-top: 1px dashed var(--glass-border); padding-top: 10px;">
+                * 点击或悬停于3D模型零件以交互探索
+            </div>
+        </aside>
+        <!-- Bottom: Global Controls -->
+        <footer class="bottom-bar glass-panel interactive">
+            <div class="control-group">
+                <button class="btn" id="btn-explode">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+                    爆炸分解视图
+                </button>
+                <button class="btn" id="btn-night-mode">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+                    夜间荧光模式
+                </button>
+            </div>
+            <div class="control-group">
+                <button class="btn active" id="btn-mode-time">实时运行</button>
+                <button class="btn" id="btn-mode-demo">演示倍速</button>
+                
+                <div class="slider-container" id="speed-slider-container" style="display: none;">
+                    <span class="slider-label">运行速度</span>
+                    <input type="range" min="1" max="100" value="30" class="slider" id="speed-slider">
+                </div>
+            </div>
+        </footer>
+    </div>
+    <!-- 3D Scripts -->
+    <script>
+        // Database of components detailed information
+        const partsData = {
+            watch_casing: {
+                idx: '01',
+                title: '表壳与表带',
+                desc: '本款奢华腕表采用316L奥氏体精钢精制表壳，搭配两面防刮擦蓝宝石水晶镜面。拉丝与倒角抛光边缘产生高级镜面光泽，配以五节金属运动表带和蓝钢固定螺栓，彰显顶级制表工艺。',
+                specs: ['镜面级抛光 & 缎面拉丝', '双凸防眩目蓝宝石水晶', '316L高抗腐蚀精钢']
+            },
+            balance_wheel: {
+                idx: '02',
+                title: '螺丝摆轮 & 游丝',
+                desc: '机芯的“心脏”和调速机构。包含四颗微调螺丝的Glucydur摆轮，在合金平面游丝的周期性舒张和收缩下，在两个方向进行高达280度的摆振，以每秒8次的超高频率（4赫兹）控制走时。',
+                specs: ['4Hz / 28800次/小时', '合金平面游丝', '微调配重摆轮螺丝']
+            },
+            escapement: {
+                idx: '03',
+                title: '擒纵轮与擒纵叉',
+                desc: '分配和阻尼能量的核心。特制的棘爪齿轮（擒纵轮）将发条输送的扭矩间歇性释放，其动力推动两个红宝石棘爪片（擒纵叉）交替锁止。发出清脆的“嘀嗒”声，并赋予摆轮动力。',
+                specs: ['瑞士杠杆式擒纵系统', '双切面合成红宝石爪', '超轻合金抛光擒纵轮']
+            },
+            gear_train: {
+                idx: '04',
+                title: '传动齿轮系',
+                desc: '机械能倍速齿轮组。主发条释放的强大力矩依次经过中心轮（分针轴）、第三轮和第四轮（秒针轴）进行逐级增速，并确保每个指针的转动比例与时间法则分秒不差地精确吻合。',
+                specs: ['中心轮、三轮、四轮', '渐开线齿轮轮廓', '大速比低能耗传动']
+            },
+            mainspring: {
+                idx: '05',
+                title: '储能发条盒',
+                desc: '机芯的能量源泉。镂空的发条盒鼓轮中可清晰观察到盘卷着的合金平面发条。在手上链或自动摆陀摆动时，发条紧紧缠绕积蓄弹性势能，持续匀速输出稳定的机械动力。',
+                specs: ['42小时动力储存', '高弹力碳钢合金发条', '大齿轮比上链卷片']
+            },
+            bridges: {
+                idx: '06',
+                title: '金雕夹板与红宝石',
+                desc: '机芯的骨架钢架。经过极度镂空雕琢的网格板面，不仅起着固定各齿轮轴承的作用，更镶嵌了天然/合成红宝石（Jewels）制成的杯形防震轴承，最大程度将齿轮轴尖的摩擦降低至趋于零。',
+                specs: ['镂空雕饰夹板', '25颗天然红宝石轴承', '防震避震器系统']
+            },
+            hands_dial: {
+                idx: '07',
+                title: '发光指针与字圈',
+                desc: '时针与分针采用鏤空箭形设计，中心涂覆奢华的瑞士Super-LumiNova强效荧光涂层。外圈刻度环经过哑光黑化处理，立体小时块同样带有荧光，确保在黑暗中亦可清晰分辨时间。',
+                specs: ['Super-LumiNova荧光', '镂空雕刻精钢指针', '立体黑化多切面字环']
+            }
+        };
+        // --- Three.js Globals ---
+        let container, scene, camera, renderer, controls, clock;
+        let envMap;
+        let lights = {};
+        
+        // --- Groups for Exploded View ---
+        let watchGroup;
+        let groups = {
+            glass: null,
+            bezelCase: null,
+            hands: null,
+            dial: null,
+            bridges: null,
+            gears: null,
+            escapement: null,
+            balance: null,
+            mainspring: null,
+            mainPlate: null,
+            caseBack: null,
+            strap: null
+        };
+        // Interactive states
+        let isExploded = false;
+        let isNightMode = false;
+        let isDemoMode = false;
+        let demoSpeed = 30; // mapping 1-100 to rotation speed
+        const baseHzText = "振频: 4.0 Hz / 28800 vph";
+        
+        // Raycast
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2();
+        let hoveredObject = null;
+        let selectedPart = 'watch_casing';
+        const tooltip = document.getElementById('tooltip');
+        // Materials cache
+        let materials = {};
+        // Animatable parameters
+        let lastTime = 0;
+        let balanceAngle = 0;
+        // Init App
+        window.addEventListener('DOMContentLoaded', () => {
+            init();
+            animate();
+            
+            // Hide Loader after scene fully initialized
+            setTimeout(() => {
+                const loader = document.getElementById('loader');
+                loader.style.opacity = 0;
+                setTimeout(() => loader.style.display = 'none', 800);
+            }, 1000);
+        });
+        function init() {
+            container = document.getElementById('canvas-container');
+            
+            // Scene
+            scene = new THREE.Scene();
+            scene.fog = new THREE.FogExp2(0x050508, 0.08);
+            // Camera
+            camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 100);
+            camera.position.set(-3.5, 3.5, 4.5);
+            // Renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: "high-performance" });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.toneMappingExposure = 1.0;
+            container.appendChild(renderer.domElement);
+            // Controls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            controls.maxPolarAngle = Math.PI / 2 + 0.1; // Don't orbit below ground
+            controls.minDistance = 2.5;
+            controls.maxDistance = 10;
+            controls.target.set(0, 0, 0);
+            clock = new THREE.Clock();
+            // Setup custom equirectangular canvas texture for reflections
+            envMap = generateStudioEnvMap();
+            scene.environment = envMap;
+            // Generate watch materials
+            initMaterials();
+            // Build Watch
+            buildWatch();
+            // Build ground plane for soft reflection/shadow
+            buildGround();
+            // Setup Lights
+            setupLights();
+            // Bind UI Events
+            bindEvents();
+        }
+        // --- Dynamic Env Map Generation (The "Wow" Secret) ---
+        function generateStudioEnvMap() {
+            const size = 1024;
+            const canvas = document.createElement('canvas');
+            canvas.width = size * 2;
+            canvas.height = size;
+            const ctx = canvas.getContext('2d');
+            // Deep dark backdrop
+            ctx.fillStyle = '#08080c';
+            ctx.fillRect(0, 0, size * 2, size);
+            // Large soft ambient light box
+            drawSoftGradientRect(ctx, 0, 0, size * 2, size, '#12121e', 0.8);
+            // Front bright softbox
+            drawSoftGradientCircle(ctx, size * 0.5, size * 0.3, size * 0.25, '#ffffff', 0.7);
+            // Side hard key light reflection line
+            drawSoftGradientRect(ctx, size * 1.1, size * 0.1, size * 0.3, size * 0.8, '#ffffff', 0.9);
+            
+            // Warm highlight rim light
+            drawSoftGradientRect(ctx, size * 0.1, size * 0.2, size * 0.2, size * 0.6, '#ffd5b5', 0.4);
+            
+            // Cool highlight rim light
+            drawSoftGradientRect(ctx, size * 1.6, size * 0.2, size * 0.25, size * 0.6, '#cbd6ff', 0.4);
+            const texture = new THREE.CanvasTexture(canvas);
+            texture.mapping = THREE.EquirectangularReflectionMapping;
+            texture.colorSpace = THREE.SRGBColorSpace;
+            return texture;
+        }
+        function drawSoftGradientRect(ctx, x, y, w, h, color, opacity) {
+            ctx.save();
+            const grad = ctx.createLinearGradient(x, y, x + w, y);
+            grad.addColorStop(0, 'rgba(0,0,0,0)');
+            grad.addColorStop(0.5, color);
+            grad.addColorStop(1, 'rgba(0,0,0,0)');
+            ctx.fillStyle = grad;
+            ctx.globalAlpha = opacity;
+            ctx.fillRect(x, y, w, h);
+            ctx.restore();
+        }
+        function drawSoftGradientCircle(ctx, cx, cy, r, color, opacity) {
+            ctx.save();
+            const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+            grad.addColorStop(0, color);
+            grad.addColorStop(0.5, 'rgba(255,255,255,0.2)');
+            grad.addColorStop(1, 'rgba(0,0,0,0)');
+            ctx.fillStyle = grad;
+            ctx.globalAlpha = opacity;
+            ctx.beginPath();
+            ctx.arc(cx, cy, r, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+        }
+        // --- Materials ---
+        function initMaterials() {
+            // Polished Steel
+            materials.steelPolished = new THREE.MeshPhysicalMaterial({
+                color: 0xdddddd,
+                metalness: 1.0,
+                roughness: 0.08,
+                clearcoat: 0.6,
+                clearcoatRoughness: 0.1,
+                envMapIntensity: 1.2
+            });
+            // Brushed Steel
+            materials.steelBrushed = new THREE.MeshStandardMaterial({
+                color: 0xcccccc,
+                metalness: 0.9,
+                roughness: 0.28,
+                envMapIntensity: 0.9
+            });
+            // Polished Rose Gold
+            materials.goldPolished = new THREE.MeshPhysicalMaterial({
+                color: 0xe5a186,
+                metalness: 1.0,
+                roughness: 0.06,
+                clearcoat: 0.5,
+                clearcoatRoughness: 0.1,
+                envMapIntensity: 1.5
+            });
+            // Matte Black Dial
+            materials.dialBlack = new THREE.MeshStandardMaterial({
+                color: 0x0f0f12,
+                roughness: 0.8,
+                metalness: 0.1
+            });
+            // Blue Screws (Heat treated blue)
+            materials.screwBlue = new THREE.MeshPhysicalMaterial({
+                color: 0x1f3c7a,
+                metalness: 0.9,
+                roughness: 0.1,
+                clearcoat: 0.8,
+                envMapIntensity: 1.5
+            });
+            // Jewels (Synthetic Ruby)
+            materials.ruby = new THREE.MeshPhysicalMaterial({
+                color: 0xe0115f,
+                roughness: 0.02,
+                transmission: 0.92,
+                ior: 1.76,
+                thickness: 0.3,
+                transparent: true,
+                opacity: 0.9,
+                envMapIntensity: 1.0
+            });
+            // Sapphire Glass
+            materials.glass = new THREE.MeshPhysicalMaterial({
+                color: 0xdff5ff,
+                roughness: 0.01,
+                transmission: 0.95,
+                ior: 1.77,
+                thickness: 0.4,
+                transparent: true,
+                opacity: 0.35,
+                envMapIntensity: 2.0
+            });
+            // Luminous (Fluorescent Lume)
+            materials.lume = new THREE.MeshStandardMaterial({
+                color: 0xd6ffd0,
+                emissive: 0x39ff14,
+                emissiveIntensity: 0.0,
+                roughness: 0.4,
+                metalness: 0.1
+            });
+            // Ruby red metal accents (e.g. for gears)
+            materials.brass = new THREE.MeshStandardMaterial({
+                color: 0xd5b04b,
+                metalness: 0.9,
+                roughness: 0.22,
+                envMapIntensity: 1.2
+            });
+            // Second hand paint
+            materials.redPaint = new THREE.MeshStandardMaterial({
+                color: 0xc9222b,
+                roughness: 0.3,
+                metalness: 0.5
+            });
+            
+            // Black metallic strap or components
+            materials.darkMetal = new THREE.MeshStandardMaterial({
+                color: 0x222228,
+                metalness: 0.9,
+                roughness: 0.15,
+                envMapIntensity: 1.0
+            });
+            // Interactive highlight overlay
+            materials.highlight = new THREE.MeshBasicMaterial({
+                color: 0xe5a186,
+                transparent: true,
+                opacity: 0.2,
+                blending: THREE.AdditiveBlending
+            });
+        }
+        // --- Geometries & Watch Assembly ---
+        function buildWatch() {
+            watchGroup = new THREE.Group();
+            scene.add(watchGroup);
+            // Initialize all layer groups
+            for (let key in groups) {
+                groups[key] = new THREE.Group();
+                watchGroup.add(groups[key]);
+            }
+            // Assign standard Y positions (to animate with GSAP later)
+            groups.glass.baseY = 0.85;
+            groups.bezelCase.baseY = 0.0;
+            groups.hands.baseY = 0.55;
+            groups.dial.baseY = 0.48;
+            groups.bridges.baseY = 0.28;
+            groups.gears.baseY = 0.0;
+            groups.escapement.baseY = 0.05;
+            groups.balance.baseY = 0.10;
+            groups.mainspring.baseY = 0.02;
+            groups.mainPlate.baseY = -0.25;
+            groups.caseBack.baseY = -0.58;
+            groups.strap.baseY = -0.15;
+            // Apply base positions initially
+            resetLayerPositions();
+            // 1. Sapphire Glass
+            const glassGeom = new THREE.CylinderGeometry(2.0, 2.0, 0.08, 64);
+            const glassMesh = new THREE.Mesh(glassGeom, materials.glass);
+            glassMesh.userData = { part: 'watch_casing', name: '蓝宝石水晶表镜' };
+            groups.glass.add(glassMesh);
+            // 2. Bezel & Case Body
+            buildCaseAndBezel();
+            // 3. Dial (Chapter ring)
+            buildDialRing();
+            // 4. Gears
+            buildGearTrain();
+            // 5. Escapement
+            buildEscapement();
+            // 6. Balance wheel
+            buildBalanceWheel();
+            // 7. Bridges (Structural upper plates)
+            buildBridges();
+            // 8. Main Plate (Structural base plate)
+            buildMainPlate();
+            // 9. Caseback
+            buildCaseBack();
+            // 10. Strap
+            buildStrap(true);  // Top
+            buildStrap(false); // Bottom
+            // 11. Hands
+            buildHands();
+            // Add metadata names recursively for all meshes
+            watchGroup.traverse(child => {
+                if (child.isMesh) {
+                    child.castShadow = true;
+                    child.receiveShadow = true;
+                    
+                    // Link to parent parts
+                    if (!child.userData.part) {
+                        let parent = child.parent;
+                        while (parent && parent !== scene) {
+                            if (parent.userData.part) {
+                                child.userData.part = parent.userData.part;
+                                child.userData.name = parent.userData.name;
+                                break;
+                            }
+                            parent = parent.parent;
+                        }
+                    }
+                }
+            });
+        }
+        function resetLayerPositions() {
+            for (let key in groups) {
+                groups[key].position.y = groups[key].baseY;
+            }
+        }
+        // --- Watch Casing and Bezel ---
+        function buildCaseAndBezel() {
+            const caseGroup = groups.bezelCase;
+            caseGroup.userData = { part: 'watch_casing', name: '拉丝精钢表壳' };
+            // Lathe Geometry for watch case bezel
+            const points = [];
+            points.push(new THREE.Vector2(1.98, 0.5));
+            points.push(new THREE.Vector2(2.15, 0.5));
+            points.push(new THREE.Vector2(2.25, 0.35));
+            points.push(new THREE.Vector2(2.25, -0.4));
+            points.push(new THREE.Vector2(2.15, -0.55));
+            points.push(new THREE.Vector2(1.98, -0.55));
+            
+            const caseBezelGeom = new THREE.LatheGeometry(points, 64);
+            const caseMesh = new THREE.Mesh(caseBezelGeom, materials.steelPolished);
+            caseGroup.add(caseMesh);
+            // Add Lugs (attachments to strap)
+            const lugGeom = new THREE.BoxGeometry(0.3, 0.5, 0.8);
+            const lugPositions = [
+                [-0.8, -0.2, 2.05], // Top Left
+                [0.8, -0.2, 2.05],  // Top Right
+                [-0.8, -0.2, -2.05], // Bottom Left
+                [0.8, -0.2, -2.05]   // Bottom Right
+            ];
+            lugPositions.forEach(pos => {
+                const lug = new THREE.Mesh(lugGeom, materials.steelBrushed);
+                lug.position.set(pos[0], pos[1], pos[2]);
+                // Angle lugs outward slightly
+                lug.rotation.x = pos[2] > 0 ? 0.2 : -0.2;
+                lug.rotation.y = pos[0] > 0 ? -0.05 : 0.05;
+                caseGroup.add(lug);
+            });
+            // Watch Crown (adjusting button)
+            const crownGroup = new THREE.Group();
+            crownGroup.position.set(2.28, 0, 0);
+            crownGroup.rotation.z = -Math.PI / 2;
+            const crownStem = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.08, 0.1, 16), materials.steelPolished);
+            const crownHead = new THREE.Mesh(new THREE.CylinderGeometry(0.18, 0.18, 0.16, 24), materials.steelPolished);
+            crownHead.position.y = 0.12;
+            // Crown grips (grooved cylinder)
+            const gripCount = 18;
+            const gripGeom = new THREE.BoxGeometry(0.02, 0.18, 0.02);
+            for (let i = 0; i < gripCount; i++) {
+                const grip = new THREE.Mesh(gripGeom, materials.darkMetal);
+                const angle = (i / gripCount) * Math.PI * 2;
+                grip.position.set(Math.cos(angle) * 0.175, 0.12, Math.sin(angle) * 0.175);
+                grip.rotation.y = -angle;
+                crownGroup.add(grip);
+            }
+            crownGroup.add(crownStem, crownHead);
+            caseGroup.add(crownGroup);
+        }
+        // --- Dial Ring with Hour Marks ---
+        function buildDialRing() {
+            const dialGroup = groups.dial;
+            dialGroup.userData = { part: 'hands_dial', name: '发光立体字圈' };
+            // Base Ring Shape
+            const ringShape = new THREE.Shape();
+            ringShape.absarc(0, 0, 1.96, 0, Math.PI * 2, false);
+            const holePath = new THREE.Path();
+            holePath.absarc(0, 0, 1.82, 0, Math.PI * 2, true);
+            ringShape.holes.push(holePath);
+            const dialRingGeom = new THREE.ExtrudeGeometry(ringShape, {
+                depth: 0.03,
+                bevelEnabled: true,
+                bevelThickness: 0.005,
+                bevelSize: 0.005,
+                bevelSegments: 2
+            });
+            const ringMesh = new THREE.Mesh(dialRingGeom, materials.dialBlack);
+            ringMesh.rotation.x = -Math.PI / 2;
+            dialGroup.add(ringMesh);
+            // Add Luminous Hour Markers
+            const markerGeom = new THREE.BoxGeometry(0.06, 0.04, 0.12);
+            const numMarkers = 12;
+            
+            for (let i = 0; i < numMarkers; i++) {
+                const angle = (i / numMarkers) * Math.PI * 2;
+                
+                // Metal holder
+                const markerHolder = new THREE.Mesh(markerGeom, materials.steelPolished);
+                markerHolder.position.set(Math.sin(angle) * 1.89, 0.02, Math.cos(angle) * 1.89);
+                markerHolder.rotation.y = angle;
+                dialGroup.add(markerHolder);
+                // Fluorescent Lume Fill
+                let lumeSizeX = (i % 3 === 0) ? 0.04 : 0.025; // Thicker at 12, 3, 6, 9
+                let lumeSizeZ = (i % 3 === 0) ? 0.10 : 0.08;
+                const lumeGeom = new THREE.BoxGeometry(lumeSizeX, 0.045, lumeSizeZ);
+                const lumeMesh = new THREE.Mesh(lumeGeom, materials.lume);
+                lumeMesh.position.set(Math.sin(angle) * 1.89, 0.025, Math.cos(angle) * 1.89);
+                lumeMesh.rotation.y = angle;
+                dialGroup.add(lumeMesh);
+            }
+        }
+        // --- Helper: Procedural Gear Generator ---
+        function createSkeletonGearGeometry(radius, teethCount, spokeCount, spokeWidth, centerHoleRadius, thickness) {
+            const shape = new THREE.Shape();
+            const toothDepth = radius * 0.1;
+            const innerRadius = radius - toothDepth;
+            // Compute outer profile with teeth (trapezoidal design)
+            const segments = teethCount * 4;
+            for (let i = 0; i <= segments; i++) {
+                const angle = (i / segments) * Math.PI * 2;
+                const phase = i % 4;
+                let r = radius;
+                if (phase === 0 || phase === 3) {
+                    r = innerRadius;
+                }
+                const x = Math.cos(angle) * r;
+                const y = Math.sin(angle) * r;
+                if (i === 0) shape.moveTo(x, y);
+                else shape.lineTo(x, y);
+            }
+            shape.closePath();
+            // Add skeleton spoke windows
+            if (spokeCount > 0) {
+                const rimRad = innerRadius - (radius * 0.12);
+                const bossRad = centerHoleRadius + (radius * 0.15);
+                const angleStep = (Math.PI * 2) / spokeCount;
+                const spokeAngleWidth = spokeWidth / bossRad;
+                for (let s = 0; s < spokeCount; s++) {
+                    const centerAngle = s * angleStep;
+                    const startAngle = centerAngle + spokeAngleWidth;
+                    const endAngle = centerAngle + angleStep - spokeAngleWidth;
+                    const hole = new THREE.Path();
+                    const x1 = Math.cos(startAngle) * bossRad;
+                    const y1 = Math.sin(startAngle) * bossRad;
+                    hole.moveTo(x1, y1);
+                    hole.absarc(0, 0, rimRad, startAngle, endAngle, false);
+                    const x4 = Math.cos(endAngle) * bossRad;
+                    const y4 = Math.sin(endAngle) * bossRad;
+                    hole.lineTo(x4, y4);
+                    hole.absarc(0, 0, bossRad, endAngle, startAngle, true);
+                    hole.closePath();
+                    
+                    shape.holes.push(hole);
+                }
+            }
+            // Axle center hole
+            if (centerHoleRadius > 0) {
+                const hub = new THREE.Path();
+                hub.absarc(0, 0, centerHoleRadius, 0, Math.PI * 2, true);
+                shape.holes.push(hub);
+            }
+            return new THREE.ExtrudeGeometry(shape, {
+                depth: thickness,
+                bevelEnabled: true,
+                bevelThickness: 0.015,
+                bevelSize: 0.008,
+                bevelSegments: 2
+            });
+        }
+        // --- Mainspring Barrel (Power Source) ---
+        function buildMainspringBarrel() {
+            const barrelGroup = new THREE.Group();
+            // Barrel sits off-center
+            barrelGroup.position.set(-0.75, 0.02, 0.65);
+            barrelGroup.userData = { part: 'mainspring', name: '储能发条盒' };
+            // 1. Drum Cover (Skeletonized gear lid)
+            const coverGeom = createSkeletonGearGeometry(0.85, 48, 6, 0.06, 0.15, 0.06);
+            const cover = new THREE.Mesh(coverGeom, materials.steelPolished);
+            cover.rotation.x = -Math.PI / 2;
+            cover.position.y = 0.12; // top of drum
+            barrelGroup.add(cover);
+            // 2. Drum Wall
+            const drumWallGeom = new THREE.TorusGeometry(0.77, 0.03, 8, 32);
+            const drumWall = new THREE.Mesh(drumWallGeom, materials.brass);
+            drumWall.rotation.x = Math.PI / 2;
+            drumWall.position.y = 0.06;
+            barrelGroup.add(drumWall);
+            // 3. Inside mainspring steel coil
+            const springGroup = new THREE.Group();
+            springGroup.position.y = 0.03;
+            
+            const springPts = [];
+            const springTurns = 5;
+            const springSegs = 200;
+            const rStart = 0.18;
+            const rEnd = 0.74;
+            for (let i = 0; i <= springSegs; i++) {
+                const t = i / springSegs;
+                const angle = t * Math.PI * 2 * springTurns;
+                const r = rStart + t * (rEnd - rStart);
+                springPts.push(new THREE.Vector2(Math.cos(angle) * r, Math.sin(angle) * r));
+            }
+            // Return back with slight thickness offset
+            for (let i = springSegs; i >= 0; i--) {
+                const t = i / springSegs;
+                const angle = t * Math.PI * 2 * springTurns;
+                const r = rStart + t * (rEnd - rStart) - 0.02;
+                springPts.push(new THREE.Vector2(Math.cos(angle) * r, Math.sin(angle) * r));
+            }
+            const springShape = new THREE.Shape(springPts);
+            const springGeom = new THREE.ExtrudeGeometry(springShape, { depth: 0.06, bevelEnabled: false });
+            const springMesh = new THREE.Mesh(springGeom, materials.darkMetal);
+            springMesh.rotation.x = -Math.PI / 2;
+            springGroup.add(springMesh);
+            
+            barrelGroup.add(springGroup);
+            // 4. Center Arbors / Axle
+            const axleGeom = new THREE.CylinderGeometry(0.08, 0.08, 0.28, 16);
+            const axle = new THREE.Mesh(axleGeom, materials.steelPolished);
+            axle.position.y = 0.08;
+            barrelGroup.add(axle);
+            groups.mainspring.add(barrelGroup);
+            groups.mainspring.barrelSubGroup = barrelGroup; // save handle for animation
+        }
+        // --- Gear Train Assembly ---
+        function buildGearTrain() {
+            // First place the mainspring barrel
+            buildMainspringBarrel();
+            const trainGroup = groups.gears;
+            trainGroup.userData = { part: 'gear_train', name: '机械齿轮传动系' };
+            // 1. Center Wheel (Minutes wheel, slow speed co-axial at (0, 0))
+            const centerGroup = new THREE.Group();
+            centerGroup.position.set(0, -0.22, 0); // Bottom gear layer
+            
+            const centerGearGeom = createSkeletonGearGeometry(0.75, 40, 5, 0.05, 0.12, 0.04);
+            const centerGear = new THREE.Mesh(centerGearGeom, materials.brass);
+            centerGear.rotation.x = -Math.PI / 2;
+            centerGroup.add(centerGear);
+            // Center Pinion (meshed with Mainspring barrel)
+            const centerPinionGeom = createSkeletonGearGeometry(0.18, 12, 0, 0, 0.06, 0.08);
+            const centerPinion = new THREE.Mesh(centerPinionGeom, materials.steelPolished);
+            centerPinion.rotation.x = -Math.PI / 2;
+            centerPinion.position.y = 0.04;
+            centerGroup.add(centerPinion);
+            trainGroup.add(centerGroup);
+            trainGroup.centerSubGroup = centerGroup;
+            // 2. Third Wheel (Off-center at (0.7, 0.55))
+            const thirdGroup = new THREE.Group();
+            thirdGroup.position.set(0.7, -0.15, 0.55);
+            // Big gear (on Y = -0.1)
+            const thirdGearGeom = createSkeletonGearGeometry(0.5, 36, 4, 0.04, 0.08, 0.035);
+            const thirdGear = new THREE.Mesh(thirdGearGeom, materials.brass);
+            thirdGear.rotation.x = -Math.PI / 2;
+            thirdGear.position.y = 0.05;
+            thirdGroup.add(thirdGear);
+            // Pinion (on Y = -0.2, meshes with Center Wheel)
+            const thirdPinionGeom = createSkeletonGearGeometry(0.15, 10, 0, 0, 0.04, 0.06);
+            const thirdPinion = new THREE.Mesh(thirdPinionGeom, materials.steelPolished);
+            thirdPinion.rotation.x = -Math.PI / 2;
+            thirdGroup.add(thirdPinion);
+            // Axle
+            const thirdAxle = new THREE.Mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.32, 16), materials.steelPolished);
+            thirdAxle.position.y = 0.12;
+            thirdGroup.add(thirdAxle);
+            trainGroup.add(thirdGroup);
+            trainGroup.thirdSubGroup = thirdGroup;
+            // 3. Fourth Wheel (Seconds wheel, co-axial co-running at (0, 0), Y = -0.1)
+            const fourthGroup = new THREE.Group();
+            fourthGroup.position.set(0, -0.1, 0);
+            const fourthGearGeom = createSkeletonGearGeometry(0.8, 60, 5, 0.04, 0.12, 0.035);
+            const fourthGear = new THREE.Mesh(fourthGearGeom, materials.brass);
+            fourthGear.rotation.x = -Math.PI / 2;
+            fourthGroup.add(fourthGear);
+            // Pinion (at Y = -0.1, meshes with Third Wheel)
+            const fourthPinionGeom = createSkeletonGearGeometry(0.15, 10, 0, 0, 0.05, 0.08);
+            const fourthPinion = new THREE.Mesh(fourthPinionGeom, materials.steelPolished);
+            fourthPinion.rotation.x = -Math.PI / 2;
+            fourthPinion.position.y = -0.04;
+            fourthGroup.add(fourthPinion);
+            // Long center seconds axle
+            const centerAxle = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, 0.85, 16), materials.steelPolished);
+            centerAxle.position.y = 0.35; // Extends all the way up to hands
+            fourthGroup.add(centerAxle);
+            trainGroup.add(fourthGroup);
+            trainGroup.fourthSubGroup = fourthGroup;
+        }
+        // --- Escapement System ---
+        function buildEscapement() {
+            const escGroup = groups.escapement;
+            escGroup.userData = { part: 'escapement', name: '瑞士杠杆擒纵机构' };
+            // 1. Escape Wheel (at -0.65, -0.65, Y = 0.05)
+            const escWheelGroup = new THREE.Group();
+            escWheelGroup.position.set(-0.65, 0.0, -0.65);
+            // Special club teeth shape
+            const escRadius = 0.35;
+            const teethCount = 15;
+            const shape = new THREE.Shape();
+            const angleStep = (Math.PI * 2) / teethCount;
+            const innerRad = escRadius * 0.76;
+            for (let i = 0; i < teethCount; i++) {
+                const a = i * angleStep;
+                const a1 = a + angleStep * 0.3;
+                const a2 = a + angleStep * 0.45;
+                const a3 = a + angleStep * 0.7;
+                if (i === 0) shape.moveTo(Math.cos(a) * innerRad, Math.sin(a) * innerRad);
+                else shape.lineTo(Math.cos(a) * innerRad, Math.sin(a) * innerRad);
+                shape.lineTo(Math.cos(a1) * escRadius * 0.98, Math.sin(a1) * escRadius * 0.98); // tooth point
+                shape.lineTo(Math.cos(a2) * escRadius, Math.sin(a2) * escRadius); // club heel
+                shape.lineTo(Math.cos(a3) * innerRad * 1.05, Math.sin(a3) * innerRad * 1.05); // notch
+            }
+            shape.closePath();
+            // Spokes for escape wheel
+            const spokeCount = 3;
+            const bossRad = 0.08;
+            const spokeAngleWidth = 0.04 / bossRad;
+            for (let s = 0; s < spokeCount; s++) {
+                const centerAngle = s * (Math.PI * 2 / spokeCount);
+                const startAngle = centerAngle + spokeAngleWidth;
+                const endAngle = centerAngle + (Math.PI * 2 / spokeCount) - spokeAngleWidth;
+                const hole = new THREE.Path();
+                hole.moveTo(Math.cos(startAngle) * bossRad, Math.sin(startAngle) * bossRad);
+                hole.absarc(0, 0, innerRad - 0.04, startAngle, endAngle, false);
+                hole.lineTo(Math.cos(endAngle) * bossRad, Math.sin(endAngle) * bossRad);
+                hole.absarc(0, 0, bossRad, endAngle, startAngle, true);
+                shape.holes.push(hole);
+            }
+            // Axle hole
+            const hub = new THREE.Path();
+            hub.absarc(0, 0, 0.03, 0, Math.PI * 2, true);
+            shape.holes.push(hub);
+            const escWheelGeom = new THREE.ExtrudeGeometry(shape, {
+                depth: 0.02,
+                bevelEnabled: true,
+                bevelThickness: 0.005,
+                bevelSize: 0.003,
+                bevelSegments: 2
+            });
+            const escWheel = new THREE.Mesh(escWheelGeom, materials.steelPolished);
+            escWheel.rotation.x = -Math.PI / 2;
+            escWheelGroup.add(escWheel);
+            // Escape Pinion (meshes with Fourth Wheel)
+            const escPinionGeom = createSkeletonGearGeometry(0.15, 10, 0, 0, 0.04, 0.06);
+            const escPinion = new THREE.Mesh(escPinionGeom, materials.steelPolished);
+            escPinion.rotation.x = -Math.PI / 2;
+            escPinion.position.y = -0.15; // lower Y to mesh with fourth wheel
+            escWheelGroup.add(escPinion);
+            // Axle
+            const escAxle = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, 0.34, 16), materials.steelPolished);
+            escAxle.position.y = -0.05;
+            escWheelGroup.add(escAxle);
+            escGroup.add(escWheelGroup);
+            escGroup.wheelSubGroup = escWheelGroup;
+            // 2. Pallet Fork (Anchor at (-0.9, -1.05))
+            const forkGroup = new THREE.Group();
+            forkGroup.position.set(-0.9, 0.01, -1.05);
+            const forkShape = new THREE.Shape();
+            const w = 0.22;
+            const l = 0.28;
+            // Anchor curved body outline
+            forkShape.moveTo(0, 0);
+            forkShape.quadraticCurveTo(-w * 0.4, l * 0.1, -w * 0.8, l * 0.4);
+            forkShape.lineTo(-w * 0.9, l * 0.32); // arm face Left
+            forkShape.quadraticCurveTo(-w * 0.3, 0, -w * 0.15, -l * 0.1);
+            
+            forkShape.lineTo(-w * 0.08, -l * 0.6); // lever tail
+            forkShape.lineTo(-w * 0.25, -l * 0.7); // fork left horn
+            forkShape.lineTo(-w * 0.2, -l * 0.8);
+            forkShape.lineTo(0, -l * 0.65);        // fork notch
+            forkShape.lineTo(w * 0.2, -l * 0.8);
+            forkShape.lineTo(w * 0.25, -l * 0.7);  // fork right horn
+            forkShape.lineTo(w * 0.08, -l * 0.6);
+            
+            forkShape.lineTo(w * 0.15, -l * 0.1);
+            forkShape.quadraticCurveTo(w * 0.3, 0, w * 0.9, l * 0.32);
+            forkShape.lineTo(w * 0.8, l * 0.4);   // arm face Right
+            forkShape.quadraticCurveTo(w * 0.4, l * 0.1, 0, 0);
+            forkShape.closePath();
+            // Center hole
+            const fHub = new THREE.Path();
+            fHub.absarc(0, 0, 0.035, 0, Math.PI * 2, true);
+            forkShape.holes.push(fHub);
+            const forkGeom = new THREE.ExtrudeGeometry(forkShape, { depth: 0.025, bevelEnabled: false });
+            const forkMesh = new THREE.Mesh(forkGeom, materials.steelPolished);
+            forkMesh.rotation.x = -Math.PI / 2;
+            forkGroup.add(forkMesh);
+            // Synthetic Ruby Pallets (blocks at arm tips)
+            const rubyPalletGeom = new THREE.BoxGeometry(0.04, 0.03, 0.06);
+            
+            const rubyPalletL = new THREE.Mesh(rubyPalletGeom, materials.ruby);
+            rubyPalletL.position.set(-w * 0.83, 0.015, -l * 0.38);
+            rubyPalletL.rotation.y = 0.4;
+            forkGroup.add(rubyPalletL);
+            const rubyPalletR = new THREE.Mesh(rubyPalletGeom, materials.ruby);
+            rubyPalletR.position.set(w * 0.83, 0.015, -l * 0.38);
+            rubyPalletR.rotation.y = -0.4;
+            forkGroup.add(rubyPalletR);
+            // Pivot Axle
+            const forkAxle = new THREE.Mesh(new THREE.CylinderGeometry(0.02, 0.02, 0.15, 16), materials.steelPolished);
+            forkAxle.position.y = 0.025;
+            forkGroup.add(forkAxle);
+            escGroup.add(forkGroup);
+            escGroup.forkSubGroup = forkGroup;
+        }
+        // --- Balance Wheel & Archimedean Hairspring ---
+        function buildBalanceWheel() {
+            const balGroup = groups.balance;
+            balGroup.userData = { part: 'balance_wheel', name: '振频螺丝摆轮' };
+            const balX = -1.2;
+            const balZ = -1.4;
+            const bWheelGroup = new THREE.Group();
+            bWheelGroup.position.set(balX, 0.05, balZ);
+            // 1. Balance Wheel Ring (Glucydur style)
+            const ringGeom = new THREE.TorusGeometry(0.6, 0.04, 8, 48);
+            const ring = new THREE.Mesh(ringGeom, materials.goldPolished);
+            ring.rotation.x = Math.PI / 2;
+            bWheelGroup.add(ring);
+            // 2. Spokes (3-arm support)
+            const spokeGeom = new THREE.BoxGeometry(0.05, 0.02, 1.2);
+            
+            const spoke1 = new THREE.Mesh(spokeGeom, materials.goldPolished);
+            bWheelGroup.add(spoke1);
+            const spoke2 = new THREE.Mesh(spokeGeom, materials.goldPolished);
+            spoke2.rotation.y = Math.PI / 3;
+            bWheelGroup.add(spoke2);
+            const spoke3 = new THREE.Mesh(spokeGeom, materials.goldPolished);
+            spoke3.rotation.y = -Math.PI / 3;
+            bWheelGroup.add(spoke3);
+            // 3. Tiny Micro-adjustment weighted screws on the rim
+            const screwGeom = new THREE.CylinderGeometry(0.03, 0.03, 0.04, 8);
+            const numScrews = 8;
+            for (let i = 0; i < numScrews; i++) {
+                const angle = (i / numScrews) * Math.PI * 2;
+                const screw = new THREE.Mesh(screwGeom, materials.screwBlue);
+                screw.position.set(Math.cos(angle) * 0.62, 0.0, Math.sin(angle) * 0.62);
+                screw.rotation.x = Math.PI / 2;
+                screw.rotation.z = angle + Math.PI / 2;
+                bWheelGroup.add(screw);
+            }
+            // 4. Roller table with impulse ruby pin (interacts with pallet fork)
+            const rollerGeom = new THREE.CylinderGeometry(0.16, 0.16, 0.04, 16);
+            const roller = new THREE.Mesh(rollerGeom, materials.steelPolished);
+            roller.position.y = -0.06;
+            bWheelGroup.add(roller);
+            // Impulse ruby pin (impulse jewel)
+            const impulseJewel = new THREE.Mesh(new THREE.BoxGeometry(0.03, 0.06, 0.03), materials.ruby);
+            impulseJewel.position.set(0, -0.06, 0.11);
+            bWheelGroup.add(impulseJewel);
+            // 5. Axle
+            const balAxle = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, 0.35, 16), materials.steelPolished);
+            balAxle.position.y = 0.05;
+            bWheelGroup.add(balAxle);
+            // 6. Hairspring (Archimedean spiral tube on top)
+            class HairspringCurve extends THREE.Curve {
+                constructor(turns = 7, startR = 0.08, endR = 0.45) {
+                    super();
+                    this.turns = turns;
+                    this.startR = startR;
+                    this.endR = endR;
+                }
+                getPoint(t, optionalTarget = new THREE.Vector3()) {
+                    const angle = t * Math.PI * 2 * this.turns;
+                    const r = this.startR + t * (this.endR - this.startR);
+                    const x = Math.cos(angle) * r;
+                    const z = Math.sin(angle) * r;
+                    return optionalTarget.set(x, 0.08, z); // flat spiral at Z offset
+                }
+            }
+            const spiralPath = new HairspringCurve();
+            const springGeom = new THREE.TubeGeometry(spiralPath, 160, 0.008, 6, false);
+            const hairspring = new THREE.Mesh(springGeom, materials.steelPolished);
+            
+            bWheelGroup.add(hairspring);
+            bWheelGroup.hairspringSubGroup = hairspring; // save for coiling scale
+            balGroup.add(bWheelGroup);
+            balGroup.wheelSubGroup = bWheelGroup;
+        }
+        // --- Custom Rubies & Screws Creators ---
+        function createRubyJewel() {
+            const jewel = new THREE.Group();
+            
+            // Gold chaton holder
+            const chaton = new THREE.Mesh(new THREE.CylinderGeometry(0.12, 0.12, 0.05, 16), materials.goldPolished);
+            jewel.add(chaton);
+            // Synthetic Ruby donut
+            const ruby = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.08, 0.06, 16), materials.ruby);
+            ruby.position.y = 0.01;
+            jewel.add(ruby);
+            return jewel;
+        }
+        function createBluedScrew() {
+            const screwGroup = new THREE.Group();
+            
+            // Head
+            const head = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.08, 0.04, 16), materials.screwBlue);
+            screwGroup.add(head);
+            // Slot
+            const slot = new THREE.Mesh(new THREE.BoxGeometry(0.15, 0.012, 0.018), materials.darkMetal);
+            slot.position.y = 0.021;
+            screwGroup.add(slot);
+            // Screw random slot orientation
+            screwGroup.rotation.y = Math.random() * Math.PI;
+            
+            return screwGroup;
+        }
+        // --- Skeleton Bridges ---
+        function buildBridges() {
+            const bridgesGroup = groups.bridges;
+            bridgesGroup.userData = { part: 'bridges', name: '镂空金雕夹板' };
+            // Bevel Extrude parameters for Swiss bridges
+            const bridgeExtrudeSettings = {
+                depth: 0.06,
+                bevelEnabled: true,
+                bevelThickness: 0.015,
+                bevelSize: 0.01,
+                bevelSegments: 2
+            };
+            // 1. Balance Wheel Bridge (Balance Cock)
+            const balX = -1.2;
+            const balZ = -1.4;
+            const balBridgeShape = new THREE.Shape();
+            balBridgeShape.moveTo(-1.8, -1.0);
+            balBridgeShape.quadraticCurveTo(-1.8, -1.7, balX, balZ);
+            // Ring hub around balance center
+            balBridgeShape.absarc(balX, balZ, 0.22, Math.PI * 1.5, Math.PI * 0.5, false);
+            balBridgeShape.quadraticCurveTo(-1.4, -0.6, -1.8, -1.0);
+            balBridgeShape.closePath();
+            // Hub jewel hole
+            const bJewelHole = new THREE.Path();
+            bJewelHole.absarc(balX, balZ, 0.08, 0, Math.PI * 2, true);
+            balBridgeShape.holes.push(bJewelHole);
+            const balBridgeGeom = new THREE.ExtrudeGeometry(balBridgeShape, bridgeExtrudeSettings);
+            const balBridge = new THREE.Mesh(balBridgeGeom, materials.goldPolished);
+            balBridge.rotation.x = -Math.PI / 2;
+            bridgesGroup.add(balBridge);
+            // Anchor Jewel on Balance bridge
+            const balJewel = createRubyJewel();
+            balJewel.position.set(balX, 0.03, balZ);
+            bridgesGroup.add(balJewel);
+            // Fixation blue screw at the end
+            const screw1 = createBluedScrew();
+            screw1.position.set(-1.7, 0.03, -0.9);
+            bridgesGroup.add(screw1);
+            // 2. Mainspring Barrel Bridge
+            const barX = -0.75;
+            const barZ = 0.65;
+            
+            const barBridgeShape = new THREE.Shape();
+            barBridgeShape.moveTo(-1.6, 1.2);
+            barBridgeShape.quadraticCurveTo(-1.2, 1.7, barX, barZ);
+            barBridgeShape.absarc(barX, barZ, 0.25, 0, Math.PI * 2, false);
+            barBridgeShape.quadraticCurveTo(-1.0, 0.0, -1.6, 1.2);
+            barBridgeShape.closePath();
+            const barJewelHole = new THREE.Path();
+            barJewelHole.absarc(barX, barZ, 0.08, 0, Math.PI * 2, true);
+            barBridgeShape.holes.push(barJewelHole);
+            const barBridgeGeom = new THREE.ExtrudeGeometry(barBridgeShape, bridgeExtrudeSettings);
+            const barBridge = new THREE.Mesh(barBridgeGeom, materials.goldPolished);
+            barBridge.rotation.x = -Math.PI / 2;
+            bridgesGroup.add(barBridge);
+            const barJewel = createRubyJewel();
+            barJewel.position.set(barX, 0.03, barZ);
+            bridgesGroup.add(barJewel);
+            const screw2 = createBluedScrew();
+            screw2.position.set(-1.5, 0.03, 1.3);
+            bridgesGroup.add(screw2);
+            // 3. Gear Train Bridge (L-shaped bridge holding Center & Third axles)
+            const tBridgeShape = new THREE.Shape();
+            tBridgeShape.moveTo(1.7, -0.5);
+            tBridgeShape.lineTo(1.4, 1.2);
+            tBridgeShape.quadraticCurveTo(0.9, 1.1, 0.7, 0.55); // over third axle
+            tBridgeShape.absarc(0.7, 0.55, 0.20, 0, Math.PI, false);
+            tBridgeShape.quadraticCurveTo(0.3, 0.3, 0, 0); // over center axle
+            tBridgeShape.absarc(0, 0, 0.22, 0, Math.PI, false);
+            tBridgeShape.quadraticCurveTo(0.9, -0.8, 1.7, -0.5);
+            tBridgeShape.closePath();
+            // Pivot holes
+            const h1 = new THREE.Path(); h1.absarc(0, 0, 0.08, 0, Math.PI * 2, true);
+            tBridgeShape.holes.push(h1);
+            const h2 = new THREE.Path(); h2.absarc(0.7, 0.55, 0.08, 0, Math.PI * 2, true);
+            tBridgeShape.holes.push(h2);
+            const tBridgeGeom = new THREE.ExtrudeGeometry(tBridgeShape, bridgeExtrudeSettings);
+            const tBridge = new THREE.Mesh(tBridgeGeom, materials.goldPolished);
+            tBridge.rotation.x = -Math.PI / 2;
+            bridgesGroup.add(tBridge);
+            // Jewels
+            const jewelC = createRubyJewel(); jewelC.position.set(0, 0.03, 0); bridgesGroup.add(jewelC);
+            const jewelT = createRubyJewel(); jewelT.position.set(0.7, 0.03, 0.55); bridgesGroup.add(jewelT);
+            // Anchors
+            const screw3 = createBluedScrew(); screw3.position.set(1.4, 0.03, 1.0); bridgesGroup.add(screw3);
+            const screw4 = createBluedScrew(); screw4.position.set(1.5, 0.03, -0.4); bridgesGroup.add(screw4);
+        }
+        // --- Skeleton Main Plate ---
+        function buildMainPlate() {
+            const plateGroup = groups.mainPlate;
+            plateGroup.userData = { part: 'bridges', name: '镂空缎面拉丝底板' };
+            const mainShape = new THREE.Shape();
+            mainShape.absarc(0, 0, 1.9, 0, Math.PI * 2, false);
+            // Structural gear clearance windows (skeleton style)
+            const cutouts = [
+                { x: -0.75, z: 0.65, r: 0.8 },  // under barrel
+                { x: 0.7, z: 0.55, r: 0.38 },   // under third
+                { x: 0.0, z: 0.0, r: 0.45 },    // center
+                { x: -0.65, z: -0.65, r: 0.32 }, // escape
+                { x: -1.2, z: -1.4, r: 0.55 }   // balance
+            ];
+            cutouts.forEach(c => {
+                const path = new THREE.Path();
+                path.absarc(c.x, c.z, c.r, 0, Math.PI * 2, true);
+                mainShape.holes.push(path);
+            });
+            const mainPlateGeom = new THREE.ExtrudeGeometry(mainShape, {
+                depth: 0.08,
+                bevelEnabled: true,
+                bevelThickness: 0.015,
+                bevelSize: 0.01,
+                bevelSegments: 2
+            });
+            const plateMesh = new THREE.Mesh(mainPlateGeom, materials.steelBrushed);
+            plateMesh.rotation.x = -Math.PI / 2;
+            plateGroup.add(plateMesh);
+            // Add bottom jewel bearings to hold gear pivots in the main plate
+            const bJewelPositions = [
+                [-0.75, 0.65],  // Barrel base jewel
+                [0.7, 0.55],    // Third wheel base jewel
+                [0.0, 0.0],     // Center wheel base jewel
+                [-0.65, -0.65]  // Escape wheel base jewel
+            ];
+            bJewelPositions.forEach(pos => {
+                const jewel = createRubyJewel();
+                // Face downwards
+                jewel.position.set(pos[0], -0.01, pos[1]);
+                jewel.rotation.x = Math.PI;
+                plateGroup.add(jewel);
+            });
+        }
+        // --- Watch Caseback ---
+        function buildCaseBack() {
+            const cbGroup = groups.caseBack;
+            cbGroup.userData = { part: 'watch_casing', name: '螺纹透底底盖' };
+            // Lathe profile for threaded back ring
+            const points = [];
+            points.push(new THREE.Vector2(1.85, 0));
+            points.push(new THREE.Vector2(1.98, 0));
+            points.push(new THREE.Vector2(2.1, -0.1));
+            points.push(new THREE.Vector2(2.1, -0.25));
+            points.push(new THREE.Vector2(1.85, -0.25));
+            
+            const caseBackGeom = new THREE.LatheGeometry(points, 64);
+            const caseBackMesh = new THREE.Mesh(caseBackGeom, materials.steelPolished);
+            cbGroup.add(caseBackMesh);
+            // Transparent backing glass
+            const backGlassGeom = new THREE.CylinderGeometry(1.86, 1.86, 0.04, 48);
+            const bgMesh = new THREE.Mesh(backGlassGeom, materials.glass);
+            bgMesh.position.y = -0.1;
+            cbGroup.add(bgMesh);
+            // Engraving screws around caseback
+            for (let i = 0; i < 6; i++) {
+                const angle = (i / 6) * Math.PI * 2;
+                const screw = createBluedScrew();
+                screw.position.set(Math.cos(angle) * 1.96, -0.02, Math.sin(angle) * 1.96);
+                screw.rotation.x = Math.PI; // pointing downwards
+                cbGroup.add(screw);
+            }
+        }
+        // --- Watch Strap (luxurious bi-color Oyster bracelet link) ---
+        function buildStrap(isTop) {
+            const strapGroup = groups.strap;
+            strapGroup.userData = { part: 'watch_casing', name: '双色运动表带' };
+            const dir = isTop ? 1 : -1;
+            const linksCount = 6;
+            
+            // Build curved path along the wrist (parametrics)
+            const points = [];
+            for (let i = 0; i < linksCount; i++) {
+                const t = i / (linksCount - 1);
+                // Angle bending downwards
+                const angle = t * Math.PI * 0.45; // 0 to 80 degrees
+                const wristRadius = 1.9;
+                // Center of wrist lies beneath the watch at Y = -1.9
+                // Map out coordinates connecting to lugs
+                const z = dir * (2.1 - (1.0 - Math.cos(angle)) * wristRadius);
+                const y = -0.15 - Math.sin(angle) * wristRadius;
+                points.push(new THREE.Vector3(0, y, z));
+            }
+            // Create links between these nodes
+            for (let i = 0; i < linksCount - 1; i++) {
+                const p1 = points[i];
+                const p2 = points[i+1];
+                const midPos = new THREE.Vector3().addVectors(p1, p2).multiplyScalar(0.5);
+                const linkLength = p1.distanceTo(p2) * 0.92;
+                
+                const linkGroup = new THREE.Group();
+                linkGroup.position.copy(midPos);
+                // Align link orientation with segment direction
+                const direction = new THREE.Vector3().subVectors(p2, p1).normalize();
+                const upVec = new THREE.Vector3(0, 1, 0);
+                const rotationQ = new THREE.Quaternion().setFromUnitVectors(upVec, direction);
+                linkGroup.quaternion.copy(rotationQ);
+                // Oyster 3-link model: 2 outer steel side links, 1 center rose gold link
+                const linkThickness = 0.08;
+                // Steel Side Links
+                const sideGeom = new THREE.BoxGeometry(0.34, linkThickness, linkLength);
+                const sideL = new THREE.Mesh(sideGeom, materials.steelBrushed);
+                const sideR = new THREE.Mesh(sideGeom, materials.steelBrushed);
+                sideL.position.x = -0.42;
+                sideR.position.x = 0.42;
+                linkGroup.add(sideL, sideR);
+                // Gold Center Link (slightly thicker for luxury contrast)
+                const centerGeom = new THREE.BoxGeometry(0.42, linkThickness * 1.1, linkLength * 0.98);
+                const centerLink = new THREE.Mesh(centerGeom, materials.goldPolished);
+                linkGroup.add(centerLink);
+                strapGroup.add(linkGroup);
+            }
+        }
+        // --- Custom Shape Watch Hands ---
+        function createHandMesh(length, width, isSecond) {
+            const hand = new THREE.Group();
+            if (isSecond) {
+                // Needle second hand (Red)
+                const bar = new THREE.Mesh(new THREE.BoxGeometry(0.018, 0.015, length), materials.redPaint);
+                bar.position.z = length * 0.35; // offset center pivot
+                hand.add(bar);
+                // Counterweight ring
+                const torus = new THREE.Mesh(new THREE.TorusGeometry(0.08, 0.012, 8, 20), materials.redPaint);
+                torus.rotation.x = Math.PI / 2;
+                torus.position.z = -length * 0.16;
+                hand.add(torus);
+                // Center boss cap
+                const cap = new THREE.Mesh(new THREE.CylinderGeometry(0.04, 0.04, 0.04, 16), materials.steelPolished);
+                hand.add(cap);
+                return hand;
+            }
+            // Hour/Minute Hand (Skeleton structure with Lume fill)
+            const w = width;
+            const l = length;
+            // Draw outer metal frame shape
+            const fShape = new THREE.Shape();
+            fShape.moveTo(-w * 0.3, 0);
+            fShape.lineTo(-w * 0.6, l * 0.15);
+            fShape.lineTo(-w * 0.35, l * 0.88);
+            fShape.lineTo(0, l); // tip
+            fShape.lineTo(w * 0.35, l * 0.88);
+            fShape.lineTo(w * 0.6, l * 0.15);
+            fShape.lineTo(w * 0.3, 0);
+            fShape.closePath();
+            // Inner cutout path (to pack Lume)
+            const cutout = new THREE.Path();
+            cutout.moveTo(-w * 0.25, l * 0.18);
+            cutout.lineTo(-w * 0.18, l * 0.83);
+            cutout.lineTo(0, l * 0.9);
+            cutout.lineTo(w * 0.18, l * 0.83);
+            cutout.lineTo(w * 0.25, l * 0.18);
+            cutout.closePath();
+            fShape.holes.push(cutout);
+            const frameGeom = new THREE.ExtrudeGeometry(fShape, {
+                depth: 0.02,
+                bevelEnabled: true,
+                bevelThickness: 0.005,
+                bevelSize: 0.004,
+                bevelSegments: 2
+            });
+            const frame = new THREE.Mesh(frameGeom, materials.steelPolished);
+            frame.rotation.x = -Math.PI / 2; // lie flat in X-Z
+            hand.add(frame);
+            // Lume fill mesh
+            const lumeShape = new THREE.Shape();
+            lumeShape.moveTo(-w * 0.23, l * 0.185);
+            lumeShape.lineTo(-w * 0.17, l * 0.825);
+            lumeShape.lineTo(0, l * 0.89);
+            lumeShape.lineTo(w * 0.17, l * 0.825);
+            lumeShape.lineTo(w * 0.23, l * 0.185);
+            lumeShape.closePath();
+            const lumeGeom = new THREE.ExtrudeGeometry(lumeShape, { depth: 0.012, bevelEnabled: false });
+            const lume = new THREE.Mesh(lumeGeom, materials.lume);
+            lume.rotation.x = -Math.PI / 2;
+            lume.position.y = 0.004; // center alignment in height
+            hand.add(lume);
+            // Central mounting arbor cap
+            const cap = new THREE.Mesh(new THREE.CylinderGeometry(w * 1.1, w * 1.1, 0.03, 16), materials.steelPolished);
+            hand.add(cap);
+            return hand;
+        }
+        function buildHands() {
+            const handsGroup = groups.hands;
+            handsGroup.userData = { part: 'hands_dial', name: '箭形镂空荧光指针' };
+            // Hour Hand (Length: 0.95, Width: 0.14)
+            const hourHand = createHandMesh(0.95, 0.15, false);
+            hourHand.position.y = 0.02; // layer spacing
+            handsGroup.add(hourHand);
+            handsGroup.hourSubHand = hourHand;
+            // Minute Hand (Length: 1.45, Width: 0.11)
+            const minHand = createHandMesh(1.45, 0.12, false);
+            minHand.position.y = 0.05;
+            handsGroup.add(minHand);
+            handsGroup.minSubHand = minHand;
+            // Centered Sweep Second Hand
+            const secHand = createHandMesh(1.65, 0.0, true);
+            secHand.position.y = 0.08;
+            handsGroup.add(secHand);
+            handsGroup.secSubHand = secHand;
+        }
+        // --- Ground Plane for Soft Shadow & Reflection ---
+        function buildGround() {
+            const groundGroup = new THREE.Group();
+            groundGroup.position.y = -2.3; // Sit below the watch strap
+            scene.add(groundGroup);
+            // Plane Geometry
+            const planeGeom = new THREE.PlaneGeometry(30, 30);
+            
+            // Subtle dark physical ground mat with soft reflections
+            const groundMat = new THREE.MeshPhysicalMaterial({
+                color: 0x020204,
+                roughness: 0.35,
+                metalness: 0.8,
+                clearcoat: 0.4,
+                clearcoatRoughness: 0.3,
+                envMapIntensity: 0.3
+            });
+            const ground = new THREE.Mesh(planeGeom, groundMat);
+            ground.rotation.x = -Math.PI / 2;
+            ground.receiveShadow = true;
+            groundGroup.add(ground);
+        }
+        // --- Photography-Level Studio Lighting Setup ---
+        function setupLights() {
+            // Ambient base light
+            lights.ambient = new THREE.AmbientLight(0xffffff, 0.08);
+            scene.add(lights.ambient);
+            // Soft Key Studio Softbox (Upper right front)
+            lights.key = new THREE.DirectionalLight(0xfff7ee, 1.4); // slightly warm key light
+            lights.key.position.set(4, 6, 4);
+            lights.key.castShadow = true;
+            lights.key.shadow.mapSize.width = 2048;
+            lights.key.shadow.mapSize.height = 2048;
+            lights.key.shadow.camera.near = 2;
+            lights.key.shadow.camera.far = 15;
+            lights.key.shadow.camera.left = -2.5;
+            lights.key.shadow.camera.right = 2.5;
+            lights.key.shadow.camera.top = 2.5;
+            lights.key.shadow.camera.bottom = -2.5;
+            lights.key.shadow.bias = -0.001;
+            scene.add(lights.key);
+            // Rim Light (Back left - outlining metal chamfered edges)
+            lights.rim = new THREE.DirectionalLight(0xe4edff, 1.8); // cool tint
+            lights.rim.position.set(-5, 4, -4);
+            scene.add(lights.rim);
+            // Fill Light (Soft light underneath to light up shadow areas)
+            lights.fill = new THREE.PointLight(0xffffff, 0.5, 10);
+            lights.fill.position.set(-2, -3, 2);
+            scene.add(lights.fill);
+            // Spotlight directly overhead to give a dramatic center reflection on glass
+            lights.spot = new THREE.SpotLight(0xffffff, 1.0, 10, Math.PI / 8, 0.5, 1);
+            lights.spot.position.set(0, 5, 0);
+            scene.add(lights.spot);
+        }
+        // --- Interactive Click/Hover Raycasting ---
+        function onPointerMove(event) {
+            // Calculate pointer position in normalized device coordinates (-1 to +1)
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(watchGroup.children, true);
+            if (intersects.length > 0) {
+                // Find nearest mesh with userData
+                let obj = intersects[0].object;
+                while (obj && obj !== watchGroup) {
+                    if (obj.userData && obj.userData.part) {
+                        break;
+                    }
+                    obj = obj.parent;
+                }
+                if (obj && obj !== watchGroup) {
+                    if (hoveredObject !== obj) {
+                        hoveredObject = obj;
+                        document.body.style.cursor = 'pointer';
+                        
+                        // Show dynamic tooltip
+                        tooltip.style.opacity = 1;
+                        tooltip.innerText = obj.userData.name;
+                    }
+                    
+                    // Update tooltip position (offset from mouse)
+                    tooltip.style.transform = `translate(${event.clientX + 15}px, ${event.clientY - 12}px)`;
+                    return;
+                }
+            }
+            // If no intersection
+            hoveredObject = null;
+            document.body.style.cursor = 'default';
+            tooltip.style.opacity = 0;
+        }
+        function onPointerClick(event) {
+            // Prevent trigger on dragging orbit controls
+            if (controls.state !== -1) return;
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(watchGroup.children, true);
+            if (intersects.length > 0) {
+                let obj = intersects[0].object;
+                while (obj && obj !== watchGroup) {
+                    if (obj.userData && obj.userData.part) {
+                        break;
+                    }
+                    obj = obj.parent;
+                }
+                if (obj && obj !== watchGroup) {
+                    const partKey = obj.userData.part;
+                    highlightAndFocusPart(partKey);
+                }
+            }
+        }
+        function highlightAndFocusPart(partKey) {
+            if (!partsData[partKey]) return;
+            selectedPart = partKey;
+            // 1. Update UI Elements
+            const items = document.querySelectorAll('.part-item');
+            items.forEach(item => {
+                if (item.getAttribute('data-part') === partKey) {
+                    item.classList.add('active');
+                } else {
+                    item.classList.remove('active');
+                }
+            });
+            const data = partsData[partKey];
+            document.getElementById('info-idx').innerText = data.idx;
+            document.getElementById('info-title').innerText = data.title;
+            document.getElementById('info-desc').innerText = data.desc;
+            document.getElementById('spec-1').innerText = data.specs[0];
+            document.getElementById('spec-2').innerText = data.specs[1];
+            document.getElementById('spec-3').innerText = data.specs[2];
+            // 2. Camera Focus Animation via GSAP
+            // Find target group to get bounds or coordinate
+            const targetGroup = groups[partKey] || groups.bezelCase;
+            const targetPos = new THREE.Vector3();
+            targetGroup.getWorldPosition(targetPos);
+            
+            // Adjust center offset target depending on component
+            let camOffset = new THREE.Vector3(-2.0, 1.8, 2.2); // Default offset
+            if (partKey === 'balance_wheel') {
+                camOffset.set(-1.0, 1.0, 1.0);
+            } else if (partKey === 'escapement') {
+                camOffset.set(-0.8, 0.9, 0.8);
+            } else if (partKey === 'gear_train') {
+                camOffset.set(1.0, 1.2, 1.2);
+            } else if (partKey === 'mainspring') {
+                camOffset.set(-1.0, 1.2, 1.2);
+            } else if (partKey === 'bridges') {
+                camOffset.set(-0.5, 1.5, 1.5);
+            } else if (partKey === 'hands_dial') {
+                camOffset.set(0.0, 2.2, 0.8); // Look face-on
+            }
+            const targetCamPos = targetPos.clone().add(camOffset);
+            // Animate target focus point of camera controls
+            gsap.to(controls.target, {
+                x: targetPos.x,
+                y: targetPos.y,
+                z: targetPos.z,
+                duration: 1.2,
+                ease: 'power3.out',
+                onUpdate: () => controls.update()
+            });
+            // Animate camera position
+            gsap.to(camera.position, {
+                x: targetCamPos.x,
+                y: targetCamPos.y,
+                z: targetCamPos.z,
+                duration: 1.2,
+                ease: 'power3.out'
+            });
+        }
+        // --- Core Application Logic & Events ---
+        function bindEvents() {
+            window.addEventListener('resize', onWindowResize);
+            window.addEventListener('pointermove', onPointerMove);
+            window.addEventListener('click', onPointerClick);
+            // Left panel list items click
+            const items = document.querySelectorAll('.part-item');
+            items.forEach(item => {
+                item.addEventListener('click', () => {
+                    const part = item.getAttribute('data-part');
+                    highlightAndFocusPart(part);
+                });
+            });
+            // Reset Camera
+            document.getElementById('btn-reset-cam').addEventListener('click', () => {
+                gsap.to(controls.target, { x: 0, y: 0, z: 0, duration: 1.0, ease: 'power2.out', onUpdate: () => controls.update() });
+                gsap.to(camera.position, { x: -3.5, y: 3.5, z: 4.5, duration: 1.0, ease: 'power2.out' });
+            });
+            // Toggle Exploded View
+            const btnExplode = document.getElementById('btn-explode');
+            btnExplode.addEventListener('click', () => {
+                isExploded = !isExploded;
+                btnExplode.classList.toggle('active', isExploded);
+                
+                // Explode Y multiplier offset
+                const mult = isExploded ? 2.5 : 1.0;
+                // Loop and smoothly animate Y offset of each group
+                for (let key in groups) {
+                    const gp = groups[key];
+                    gsap.to(gp.position, {
+                        y: gp.baseY * mult,
+                        duration: 1.5,
+                        ease: 'power4.inOut'
+                    });
+                }
+            });
+            // Night Mode Toggle (Lume Glow)
+            const btnNight = document.getElementById('btn-night-mode');
+            btnNight.addEventListener('click', () => {
+                isNightMode = !isNightMode;
+                btnNight.classList.toggle('active', isNightMode);
+                document.body.classList.toggle('night-mode', isNightMode);
+                // Animate scene lights intensities
+                gsap.to(lights.ambient, { intensity: isNightMode ? 0.005 : 0.08, duration: 1.5 });
+                gsap.to(lights.key, { intensity: isNightMode ? 0.05 : 1.4, duration: 1.5 });
+                gsap.to(lights.rim, { intensity: isNightMode ? 0.05 : 1.8, duration: 1.5 });
+                gsap.to(lights.fill, { intensity: isNightMode ? 0.02 : 0.5, duration: 1.5 });
+                gsap.to(lights.spot, { intensity: isNightMode ? 0.1 : 1.0, duration: 1.5 });
+                // Animate Luminous emissive intensity
+                gsap.to(materials.lume, {
+                    emissiveIntensity: isNightMode ? 3.0 : 0.0,
+                    duration: 1.5
+                });
+                
+                // Dim down reflections slightly to focus on lume
+                gsap.to(renderer, {
+                    toneMappingExposure: isNightMode ? 0.6 : 1.0,
+                    duration: 1.5
+                });
+            });
+            // Time Mode Toggles
+            const btnTime = document.getElementById('btn-mode-time');
+            const btnDemo = document.getElementById('btn-mode-demo');
+            const speedSlider = document.getElementById('speed-slider-container');
+            btnTime.addEventListener('click', () => {
+                isDemoMode = false;
+                btnTime.classList.add('active');
+                btnDemo.classList.remove('active');
+                speedSlider.style.display = 'none';
+                document.getElementById('hz-indicator').innerText = baseHzText;
+            });
+            btnDemo.addEventListener('click', () => {
+                isDemoMode = true;
+                btnDemo.classList.add('active');
+                btnTime.classList.remove('active');
+                speedSlider.style.display = 'flex';
+                updateDemoFrequencyIndicator();
+            });
+            // Demo Speed Slider
+            const slider = document.getElementById('speed-slider');
+            slider.addEventListener('input', (e) => {
+                demoSpeed = e.target.value;
+                updateDemoFrequencyIndicator();
+            });
+        }
+        function updateDemoFrequencyIndicator() {
+            // Dynamic Hz calculation based on speed
+            const speedFact = Math.pow(demoSpeed / 30, 2);
+            const demoHz = (4.0 * speedFact).toFixed(1);
+            const demoVph = Math.round(28800 * speedFact);
+            document.getElementById('hz-indicator').innerText = `振频(演示): ${demoHz} Hz / ${demoVph} vph`;
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        // --- Physical Rotation Logic (Ticks and Escapement Physics) ---
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            
+            // Calculate time factor
+            let tickTime;
+            if (isDemoMode) {
+                // Map slider value squared to speed factor
+                const speedMult = Math.pow(demoSpeed / 30, 2) * 80;
+                lastTime += delta * speedMult;
+                tickTime = lastTime;
+            } else {
+                // Real-time run
+                lastTime += delta;
+                tickTime = lastTime;
+            }
+            // 1. Balance wheel oscillation (sine wave)
+            // Frequency 4 Hz (8 beats per second)
+            const balanceFreq = 4.0;
+            // High oscillation angle (about 250 degrees / 4.3 radians)
+            const maxSwing = 3.8;
+            const balanceRad = maxSwing * Math.sin(tickTime * balanceFreq * Math.PI * 2);
+            
+            if (groups.balance.wheelSubGroup) {
+                groups.balance.wheelSubGroup.rotation.y = balanceRad;
+                
+                // Animating flat hairspring: coiling and uncoiling
+                // Scale flat spring slightly in X/Z to simulate expansion/contraction
+                const coilScale = 1.0 + Math.sin(tickTime * balanceFreq * Math.PI * 2) * 0.08;
+                groups.balance.wheelSubGroup.hairspringSubGroup.scale.set(coilScale, 1, coilScale);
+            }
+            // 2. Pallet Fork rocking (ticks snap in synchronization with balance wheel center crossings)
+            // The pallet fork snaps from side to side when the balance wheel passes zero (velocity is maximum, i.e. cosine is max)
+            const cosVel = Math.cos(tickTime * balanceFreq * Math.PI * 2);
+            // Snap logic: quick transition using arc tangent to limit the lock angle
+            const forkRockAngle = Math.atan(cosVel * 16) * 0.16; // approx ±9 degrees
+            
+            if (groups.escapement.forkSubGroup) {
+                // Offset rotation center slightly to sit between banking pins
+                groups.escapement.forkSubGroup.rotation.y = forkRockAngle;
+            }
+            // 3. Escape Wheel ticking progression
+            // Ticks forward by 1 tooth on each pallet fork swing.
+            // Escape wheel has 15 teeth -> 30 half-steps per rotation.
+            // We use a step function matching total ticks elapsed
+            const totalTicks = Math.floor(tickTime * balanceFreq * 2);
+            const tickPhase = (tickTime * balanceFreq * 2) % 1;
+            // Snap ease function for escape wheel jump
+            const snapProgress = Math.pow(tickPhase, 5); // very sharp snap transition
+            const escapeAngle = (totalTicks + snapProgress) * (Math.PI * 2 / 30);
+            
+            if (groups.escapement.wheelSubGroup) {
+                groups.escapement.wheelSubGroup.rotation.y = -escapeAngle;
+            }
+            // 4. Gear Train mesh rotation
+            // Calculate gears rotations driven by Escape wheel
+            // Fourth wheel (Seconds) co-axial Center seconds: 1 rotation/min (in real-time)
+            // In demo mode, it runs at accelerated tickTime
+            const secondsRotation = -tickTime * (Math.PI * 2 / 60);
+            
+            if (groups.gears.fourthSubGroup) {
+                groups.gears.fourthSubGroup.rotation.y = secondsRotation;
+            }
+            // Third wheel: Meshing with fourth wheel.
+            // Ratio is third rotation = -secondsRotation * 3.2
+            if (groups.gears.thirdSubGroup) {
+                groups.gears.thirdSubGroup.rotation.y = -secondsRotation * 3.2;
+            }
+            // Center wheel (Minutes wheel co-axial center): 1 rotation/hour (3600 seconds)
+            const minutesRotation = -tickTime * (Math.PI * 2 / 3600);
+            if (groups.gears.centerSubGroup) {
+                groups.gears.centerSubGroup.rotation.y = minutesRotation;
+            }
+            // Mainspring Barrel: 1 rotation/6 hours (slowest wheel)
+            if (groups.mainspring.barrelSubGroup) {
+                groups.mainspring.barrelSubGroup.rotation.y = minutesRotation * 0.16;
+            }
+            // 5. Hands pointing logic
+            if (isDemoMode) {
+                // Accelerate hands rotation to show movement
+                // Hour hand
+                groups.hands.hourSubHand.rotation.y = minutesRotation * 0.0833; // 1/12 of minutes
+                // Minute hand
+                groups.hands.minSubHand.rotation.y = minutesRotation;
+                // Center Sweep Second hand
+                groups.hands.secSubHand.rotation.y = secondsRotation;
+            } else {
+                // Real local clock time pointing
+                const now = new Date();
+                const ms = now.getMilliseconds() / 1000;
+                const sec = now.getSeconds() + ms;
+                const min = now.getMinutes() + sec / 60;
+                const hr = (now.getHours() % 12) + min / 60;
+                // Apply rotation angles (-Z direction is 12 o'clock, clockwise in 3D is negative rotation around Y)
+                groups.hands.hourSubHand.rotation.y = -hr * (Math.PI * 2 / 12);
+                groups.hands.minSubHand.rotation.y = -min * (Math.PI * 2 / 60);
+                groups.hands.secSubHand.rotation.y = -sec * (Math.PI * 2 / 60);
+            }
+            // Update Controls
+            controls.update();
+            // Render
+            renderer.render(scene, camera);
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/outputs/glm-5-2/zcode-max/skeleton-watch.html b/outputs/glm-5-2/zcode-max/skeleton-watch.html
new file mode 100644
index 0000000..dfe9063
--- /dev/null
+++ b/outputs/glm-5-2/zcode-max/skeleton-watch.html
@@ -0,0 +1,1088 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>SKELETON — 镂空机械腕表 3D 展示</title>
+<style>
+  :root{
+    --gold:#d9b46a;
+    --gold-bright:#ffe7a8;
+    --bg0:#07080b;
+    --panel:rgba(14,16,22,.72);
+    --line:rgba(217,180,106,.28);
+    --txt:#ece7dc;
+    --muted:#9aa0ab;
+  } 
+  *{margin:0;padding:0;box-sizing:border-box}
+  html,body{width:100%;height:100%;overflow:hidden;background:var(--bg0);color:var(--txt);
+    font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}
+  #app{position:fixed;inset:0}
+  canvas{display:block}
+
+  /* vignette overlay */
+  #app::after{content:"";position:absolute;inset:0;pointer-events:none;
+    background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%);}
+
+  /* ====== 顶栏品牌 ====== */
+  .topbar{position:absolute;top:22px;left:0;right:0;display:flex;justify-content:space-between;
+    align-items:flex-start;padding:0 34px;pointer-events:none;z-index:20}
+  .brand{pointer-events:auto}
+  .brand .mark{font-size:11px;letter-spacing:.62em;color:var(--gold);font-weight:600;opacity:.9}
+  .brand .name{font-size:30px;font-weight:200;letter-spacing:.34em;margin-top:4px;
+    background:linear-gradient(180deg,#fff,#cbb277);-webkit-background-clip:text;background-clip:text;color:transparent}
+  .brand .sub{font-size:10px;letter-spacing:.42em;color:var(--muted);margin-top:5px}
+  .serial{text-align:right;pointer-events:auto}
+  .serial .l{font-size:9px;letter-spacing:.4em;color:var(--muted)}
+  .serial .v{font-size:13px;letter-spacing:.24em;color:var(--gold);margin-top:3px}
+
+  /* ====== 左控制面板 ====== */
+  .controls{position:absolute;left:24px;top:50%;transform:translateY(-50%);z-index:20;
+    width:248px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
+    padding:20px 18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
+    box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04)}
+  .controls h3{font-size:10px;letter-spacing:.36em;color:var(--gold);font-weight:600;margin-bottom:16px;
+    text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:12px}
+  .row{display:flex;align-items:center;justify-content:space-between;margin:13px 0;font-size:12px}
+  .row .lbl{color:var(--muted);letter-spacing:.06em}
+  .row .val{color:var(--gold-bright);font-variant-numeric:tabular-nums;font-weight:600}
+
+  .btn{display:block;width:100%;padding:11px 12px;margin-top:11px;border-radius:9px;cursor:pointer;
+    border:1px solid var(--line);background:linear-gradient(180deg,rgba(217,180,106,.16),rgba(217,180,106,.05));
+    color:var(--txt);font-size:11.5px;letter-spacing:.16em;transition:all .25s ease;font-family:inherit;text-align:left}
+  .btn:hover{background:linear-gradient(180deg,rgba(217,180,106,.32),rgba(217,180,106,.12));border-color:var(--gold);
+    transform:translateY(-1px);box-shadow:0 8px 22px rgba(217,180,106,.18)}
+  .btn.on{background:linear-gradient(180deg,rgba(217,180,106,.45),rgba(217,180,106,.18));color:#1a1207;
+    font-weight:700;border-color:var(--gold-bright)}
+  .btn .k{float:right;opacity:.55;font-size:10px;letter-spacing:.1em}
+  .btn.on .k{opacity:.8;color:#1a1207}
+
+  .toggle{position:relative;width:42px;height:22px;border-radius:11px;background:rgba(255,255,255,.08);
+    cursor:pointer;transition:.25s;border:1px solid var(--line)}
+  .toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
+    background:var(--gold);transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.5)}
+  .toggle.on{background:rgba(217,180,106,.4)}
+  .toggle.on::after{left:22px;background:var(--gold-bright)}
+
+  /* ====== 右信息面板 ====== */
+  .info{position:absolute;right:24px;top:50%;transform:translateY(-50%);z-index:20;width:268px;
+    background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 20px;
+    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
+    box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
+    transition:opacity .4s,transform .4s}
+  .info .tag{font-size:9px;letter-spacing:.42em;color:var(--gold);font-weight:600}
+  .info h2{font-size:21px;font-weight:300;letter-spacing:.06em;margin:8px 0 4px}
+  .info .role{font-size:11px;letter-spacing:.14em;color:var(--muted);margin-bottom:14px}
+  .info p{font-size:12px;line-height:1.78;color:#cfc9bb;margin-bottom:14px}
+  .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
+  .stat{padding:11px 12px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
+  .stat .k{font-size:9px;letter-spacing:.24em;color:var(--muted)}
+  .stat .v{font-size:16px;color:var(--gold-bright);font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums}
+  .info .close{position:absolute;top:12px;right:14px;cursor:pointer;color:var(--muted);font-size:14px;width:22px;height:22px;
+    display:flex;align-items:center;justify-content:center;border-radius:50%;transition:.2s}
+  .info .close:hover{color:#fff;background:rgba(255,255,255,.08)}
+  .info.hidden{opacity:0;transform:translateY(-50%) translateX(20px);pointer-events:none}
+
+  /* ====== 底部时间显示 ====== */
+  .dock{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:20;text-align:center}
+  .dock .clock{font-size:38px;font-weight:200;letter-spacing:.14em;color:var(--gold-bright);
+    font-variant-numeric:tabular-nums;text-shadow:0 0 24px rgba(217,180,106,.35)}
+  .dock .clock .sep{opacity:.5;animation:blink 1s infinite}
+  @keyframes blink{50%{opacity:.1}}
+  .dock .hint{font-size:10px;letter-spacing:.34em;color:var(--muted);margin-top:7px}
+
+  /* ====== 悬浮零件标签 ====== */
+  .tag3d{position:absolute;z-index:25;pointer-events:none;transform:translate(-50%,-50%);
+    transition:opacity .25s ease;opacity:0}
+  .tag3d .dot{width:9px;height:9px;border-radius:50%;background:var(--gold-bright);
+    box-shadow:0 0 12px var(--gold),0 0 0 3px rgba(217,180,106,.18);margin:0 auto}
+  .tag3d .line{width:1px;height:26px;background:linear-gradient(180deg,var(--gold-bright),transparent);margin:0 auto}
+  .tag3d .lbl{white-space:nowrap;font-size:10.5px;letter-spacing:.14em;color:var(--gold-bright);
+    background:rgba(8,9,13,.78);border:1px solid var(--line);padding:4px 9px;border-radius:5px;margin-top:2px}
+  .tag3d.show{opacity:1}
+
+  /* hint for hover in canvas */
+  .cursor-pointer{cursor:pointer}
+
+  /* loader */
+  #loader{position:fixed;inset:0;background:var(--bg0);z-index:100;display:flex;align-items:center;justify-content:center;
+    flex-direction:column;transition:opacity .8s}
+  #loader .sp{width:46px;height:46px;border-radius:50%;border:2px solid rgba(217,180,106,.18);
+    border-top-color:var(--gold);animation:spin 1s linear infinite}
+  #loader .t{margin-top:20px;font-size:11px;letter-spacing:.4em;color:var(--muted)}
+  @keyframes spin{to{transform:rotate(360deg)}}
+
+  @media (max-width:880px){
+    .controls,.info{width:calc(100% - 48px);position:absolute;transform:none;top:auto}
+    .controls{top:90px}.info{bottom:90px;top:auto;transform:none}
+    .info.hidden{transform:translateY(20px)}
+    .topbar{padding:0 18px}.brand .name{font-size:22px}
+    .dock{display:none}
+  }
+</style>
+</head>
+<body>
+<div id="app"></div>
+
+<div class="topbar">
+  <div class="brand">
+    <div class="mark">MANUFACTURE · GENÈVE</div>
+    <div class="name">SKELETON</div>
+    <div class="sub">CAL. T-9128 · TOURBILLON STYLE</div>
+  </div>
+  <div class="serial">
+    <div class="l">RÉFÉRENCE</div>
+    <div class="v">N°0247 / 250</div>
+  </div>
+</div>
+
+<div class="controls" id="controls">
+  <h3>CONTRÔLES</h3>
+  <div class="row"><span class="lbl">自动旋转</span><div class="toggle on" id="tAuto"></div></div>
+  <div class="row"><span class="lbl">机芯运转</span><div class="toggle on" id="tRun"></div></div>
+  <div class="row"><span class="lbl">背景反射</span><div class="toggle on" id="tRefl"></div></div>
+  <div class="row"><span class="lbl">辉光 (Bloom)</span><div class="toggle on" id="tBloom"></div></div>
+  <div class="row"><span class="lbl">摆轮速率</span><span class="val" id="rateVal">5.0 Hz</span></div>
+  <button class="btn" id="bExplode">爆炸视图<span class="k">EXPLODE</span></button>
+  <button class="btn" id="bReset">重置视角<span class="k">RESET</span></button>
+  <div style="margin-top:18px;font-size:10px;color:var(--muted);line-height:1.9;letter-spacing:.04em">
+    鼠标拖拽旋转 · 滚轮缩放<br>
+    悬停零件查看名称 · 点击展开详情
+  </div>
+</div>
+
+<div class="info hidden" id="info">
+  <div class="close" id="closeInfo">✕</div>
+  <div class="tag" id="iTag">COMPOSANT</div>
+  <h2 id="iTitle">零件</h2>
+  <div class="role" id="iRole">功能</div>
+  <p id="iDesc">描述</p>
+  <div class="stats" id="iStats"></div>
+</div>
+
+<div class="dock">
+  <div class="clock"><span id="hh">00</span><span class="sep">:</span><span id="mm">00</span><span class="sep">:</span><span id="ss">00</span></div>
+  <div class="hint">SYNCHRONIZED · LOCAL TIME</div>
+</div>
+
+<div id="loader"><div class="sp"></div><div class="t">CALIBRATING MOVEMENT…</div></div>
+
+<script type="importmap">
+{
+  "imports":{
+    "three":"https://unpkg.com/three@0.160.0/build/three.module.js",
+    "three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/"
+  }
+}
+</script>
+
+<script type="module">
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+
+/* ============================================================
+   全局状态
+============================================================ */
+const state = {
+  autoRotate:true, movement:true, reflection:true, bloom:true,
+  rate:5.0, exploded:false, explodeT:0
+};
+const clock = new THREE.Clock();
+const raycaster = new THREE.Raycaster();
+const mouse = new THREE.Vector2(-2,-2);
+
+/* ============================================================
+   场景 / 相机 / 渲染器
+============================================================ */
+const app = document.getElementById('app');
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x07080b);
+scene.fog = new THREE.Fog(0x07080b, 22, 60);
+
+const camera = new THREE.PerspectiveCamera(34, innerWidth/innerHeight, 0.1, 200);
+camera.position.set(0, 6.5, 13);
+
+const renderer = new THREE.WebGLRenderer({antialias:true, alpha:false});
+renderer.setSize(innerWidth, innerHeight);
+renderer.setPixelRatio(Math.min(devicePixelRatio,2));
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.05;
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+app.appendChild(renderer.domElement);
+
+/* ============================================================
+   环境贴图（程序化生成，营造高端摄影棚反射）
+============================================================ */
+function makeEnvTexture(){
+  const c = document.createElement('canvas'); c.width=512; c.height=256;
+  const g = c.getContext('2d');
+  // base dark
+  g.fillStyle='#0a0c12'; g.fillRect(0,0,512,256);
+  // gradient studio
+  const grd=g.createLinearGradient(0,0,0,256);
+  grd.addColorStop(0,'#1a1f2b'); grd.addColorStop(0.5,'#0a0c12'); grd.addColorStop(1,'#05060a');
+  g.fillStyle=grd; g.fillRect(0,0,512,256);
+  // key light strip (warm)
+  const k=g.createRadialGradient(150,90,5,150,90,140);
+  k.addColorStop(0,'rgba(255,220,160,0.95)'); k.addColorStop(0.3,'rgba(255,200,130,0.45)');
+  k.addColorStop(1,'rgba(0,0,0,0)');
+  g.fillStyle=k; g.fillRect(0,0,512,256);
+  // fill strip (cool)
+  const f=g.createRadialGradient(400,120,5,400,120,120);
+  f.addColorStop(0,'rgba(140,170,255,0.55)'); f.addColorStop(1,'rgba(0,0,0,0)');
+  g.fillStyle=f; g.fillRect(0,0,512,256);
+  // rim
+  const r=g.createRadialGradient(256,20,5,256,20,90);
+  r.addColorStop(0,'rgba(255,255,255,0.7)'); r.addColorStop(1,'rgba(0,0,0,0)');
+  g.fillStyle=r; g.fillRect(0,0,512,256);
+  // bottom subtle bounce
+  const b=g.createLinearGradient(0,200,0,256);
+  b.addColorStop(0,'rgba(0,0,0,0)'); b.addColorStop(1,'rgba(120,90,40,0.35)');
+  g.fillStyle=b; g.fillRect(0,0,512,256);
+
+  const tex = new THREE.CanvasTexture(c);
+  tex.mapping = THREE.EquirectangularReflectionMapping;
+  tex.colorSpace = THREE.SRGBColorSpace;
+  return tex;
+}
+const envTex = makeEnvTexture();
+const pmrem = new THREE.PMREMGenerator(renderer);
+const envMap = pmrem.fromEquirectangular(envTex).texture;
+scene.environment = envMap;
+
+/* ============================================================
+   光照（三点 + 边缘）
+============================================================ */
+const ambient = new THREE.AmbientLight(0x6a7080, 0.35);
+scene.add(ambient);
+
+const keyLight = new THREE.DirectionalLight(0xfff0d8, 2.6);
+keyLight.position.set(7,12,8);
+keyLight.castShadow = true;
+keyLight.shadow.mapSize.set(2048,2048);
+keyLight.shadow.camera.near=1; keyLight.shadow.camera.far=40;
+keyLight.shadow.camera.left=-12; keyLight.shadow.camera.right=12;
+keyLight.shadow.camera.top=12; keyLight.shadow.camera.bottom=-12;
+keyLight.shadow.bias=-0.0003; keyLight.shadow.radius=4;
+scene.add(keyLight);
+
+const fillLight = new THREE.DirectionalLight(0x88aaff, 0.9);
+fillLight.position.set(-9,4,-3);
+scene.add(fillLight);
+
+const rimLight = new THREE.DirectionalLight(0xffd9a0, 1.6);
+rimLight.position.set(0,7,-10);
+scene.add(rimLight);
+
+const accentPoint = new THREE.PointLight(0xffe7b0, 1.2, 22, 2);
+accentPoint.position.set(0,3,4);
+scene.add(accentPoint);
+
+/* ============================================================
+   反射地板
+============================================================ */
+const floorMat = new THREE.MeshStandardMaterial({
+  color:0x0a0b10, metalness:0.9, roughness:0.35, envMap:envMap, envMapIntensity:0.5
+});
+const floor = new THREE.Mesh(new THREE.CircleGeometry(30,64), floorMat);
+floor.rotation.x = -Math.PI/2; floor.position.y = -3.2;
+floor.receiveShadow = true;
+scene.add(floor);
+
+/* ============================================================
+   控制器
+============================================================ */
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true; controls.dampingFactor = 0.06;
+controls.minDistance = 6; controls.maxDistance = 22;
+controls.maxPolarAngle = Math.PI*0.52; controls.minPolarAngle = Math.PI*0.12;
+controls.target.set(0,0,0);
+controls.autoRotate = state.autoRotate;
+controls.autoRotateSpeed = 0.6;
+
+/* ============================================================
+   材质库
+============================================================ */
+const M = {
+  gold:    new THREE.MeshPhysicalMaterial({color:0xd9b46a, metalness:1, roughness:0.18, envMap:envMap, envMapIntensity:1.4, clearcoat:0.6, clearcoatRoughness:0.15}),
+  goldPolish:new THREE.MeshPhysicalMaterial({color:0xf4d68a, metalness:1, roughness:0.09, envMap:envMap, envMapIntensity:1.6, clearcoat:0.9, clearcoatRoughness:0.08}),
+  steel:   new THREE.MeshPhysicalMaterial({color:0xb8bcc4, metalness:1, roughness:0.28, envMap:envMap, envMapIntensity:1.2}),
+  steelDark:new THREE.MeshPhysicalMaterial({color:0x4a4e58, metalness:1, roughness:0.35, envMap:envMap, envMapIntensity:1.0}),
+  brass:   new THREE.MeshPhysicalMaterial({color:0xc9a45a, metalness:1, roughness:0.22, envMap:envMap, envMapIntensity:1.4}),
+  bluedSteel:new THREE.MeshPhysicalMaterial({color:0x2a4cc8, metalness:1, roughness:0.18, envMap:envMap, envMapIntensity:1.5, clearcoat:0.7}),
+  ruby:    new THREE.MeshPhysicalMaterial({color:0xff2a4d, metalness:0.1, roughness:0.05, envMap:envMap, envMapIntensity:1.8, transmission:0.55, thickness:0.4, ior:1.77, emissive:0x550010, emissiveIntensity:0.4, clearcoat:1}),
+  sapphire:new THREE.MeshPhysicalMaterial({color:0xeaf2ff, metalness:0, roughness:0.02, envMap:envMap, envMapIntensity:1.5, transmission:0.96, thickness:0.5, ior:1.77, clearcoat:1, clearcoatRoughness:0.0, transparent:true, opacity:0.35}),
+  lume:    new THREE.MeshStandardMaterial({color:0xb4ff8a, emissive:0x7dff5a, emissiveIntensity:1.4, roughness:0.4, metalness:0}),
+  hairlinePlate:new THREE.MeshPhysicalMaterial({color:0xc8b070, metalness:1, roughness:0.32, envMap:envMap, envMapIntensity:1.2, clearcoat:0.3}),
+  blackDial:new THREE.MeshPhysicalMaterial({color:0x0c0e14, metalness:0.6, roughness:0.45, envMap:envMap, envMapIntensity:0.6}),
+  darkMetal:new THREE.MeshStandardMaterial({color:0x16181f, metalness:0.9, roughness:0.5, envMap:envMap, envMapIntensity:0.7})
+};
+
+/* ============================================================
+   工具：齿轮几何体（带渐开线近似齿）
+============================================================ */
+function makeGearGeometry(teeth, outerR, innerR, holeR, depth, bevel=0.06){
+  const shape = new THREE.Shape();
+  const step = (Math.PI*2)/teeth;
+  const toothW = step*0.46;
+  const rootR = outerR - bevel*2;
+  for(let i=0;i<teeth;i++){
+    const a = i*step;
+    const a1 = a, a2 = a + (step-toothW)/2, a3 = a + (step-toothW)/2 + toothW*0.18,
+          a4 = a + step - toothW*0.18, a5 = a + step;
+    if(i===0) shape.moveTo(Math.cos(a1)*rootR, Math.sin(a1)*rootR);
+    shape.lineTo(Math.cos(a2)*rootR, Math.sin(a2)*rootR);
+    shape.lineTo(Math.cos(a3)*outerR, Math.sin(a3)*outerR);
+    shape.lineTo(Math.cos(a4)*outerR, Math.sin(a4)*outerR);
+    shape.lineTo(Math.cos(a5)*rootR, Math.sin(a5)*rootR);
+  }
+  // 中心孔
+  const hole = new THREE.Path();
+  hole.absarc(0,0,holeR,0,Math.PI*2,true);
+  shape.holes.push(hole);
+  // 减重孔（轻量化镂空）
+  const spokes = 5;
+  for(let s=0;s<spokes;s++){
+    const ang = (s/spokes)*Math.PI*2;
+    const cx = Math.cos(ang)*((innerR+holeR)/1.7);
+    const cy = Math.sin(ang)*((innerR+holeR)/1.7);
+    const r = (innerR-holeR)*0.32;
+    const p = new THREE.Path();
+    p.absarc(cx,cy,r,0,Math.PI*2,true);
+    shape.holes.push(p);
+  }
+  const geo = new THREE.ExtrudeGeometry(shape,{depth,bevelEnabled:true,bevelThickness:bevel,bevelSize:bevel,bevelSegments:2,steps:1});
+  geo.translate(0,0,-depth/2);
+  geo.computeVertexNormals();
+  return geo;
+}
+
+/* 中心带盖的齿轮（发条盒等） */
+function makeBarrelGeometry(teeth, outerR, holeR, depth, bevel=0.05){
+  const shape = new THREE.Shape();
+  const step=(Math.PI*2)/teeth, toothW=step*0.46, rootR=outerR-bevel*2;
+  for(let i=0;i<teeth;i++){
+    const a=i*step;
+    if(i===0) shape.moveTo(Math.cos(a)*rootR, Math.sin(a)*rootR);
+    shape.lineTo(Math.cos(a+(step-toothW)/2)*rootR, Math.sin(a+(step-toothW)/2)*rootR);
+    shape.lineTo(Math.cos(a+(step-toothW)/2+toothW*0.18)*outerR, Math.sin(a+(step-toothW)/2+toothW*0.18)*outerR);
+    shape.lineTo(Math.cos(a+step-toothW*0.18)*outerR, Math.sin(a+step-toothW*0.18)*outerR);
+    shape.lineTo(Math.cos(a+step)*rootR, Math.sin(a+step)*rootR);
+  }
+  const hole=new THREE.Path(); hole.absarc(0,0,holeR,0,Math.PI*2,true); shape.holes.push(hole);
+  const geo=new THREE.ExtrudeGeometry(shape,{depth,bevelEnabled:true,bevelThickness:bevel,bevelSize:bevel,bevelSegments:2,steps:1});
+  geo.translate(0,0,-depth/2); geo.computeVertexNormals();
+  return geo;
+}
+
+/* ============================================================
+   标记零件组（用于交互）
+============================================================ */
+const interactive = [];
+let hoverGroup = null;
+
+function markPart(group, info){
+  group.userData.info = info;
+  group.traverse(o=>{ if(o.isMesh){o.userData.parentGroup=group;} });
+  interactive.push(group);
+  return group;
+}
+
+/* 用于高亮：为每个被高亮网格克隆材质，避免共享材质互相影响 */
+const _origMat = new WeakMap();
+function setHighlight(group, on){
+  group.traverse(o=>{
+    if(!o.isMesh) return;
+    if(on){
+      if(!_origMat.has(o)){
+        const m = o.material;
+        _origMat.set(o, m);
+        const c = m.clone();
+        if(c.emissive){ c.emissive.setHex(0xffcf7a); c.emissiveIntensity = 0.85; }
+        else { // 标准材质若无 emissive 属性则补一个发光
+          c.emissive = new THREE.Color(0xffcf7a); c.emissiveIntensity = 0.8;
+        }
+        o.material = c;
+      }
+    } else {
+      if(_origMat.has(o)){ o.material = _origMat.get(o); _origMat.delete(o); }
+    }
+  });
+}
+
+/* ============================================================
+   构建手表主组
+============================================================ */
+const watch = new THREE.Group();
+watch.rotation.x = 0.42; // 向相机倾斜，呈现 3/4 英雄视角
+scene.add(watch);
+
+const movement = new THREE.Group(); // 机芯组
+watch.add(movement);
+
+const caseParts = new THREE.Group(); // 外壳组
+watch.add(caseParts);
+
+/* ----- 表壳 / 表圈 ----- */
+function buildCase(){
+  // 主夹板基座（圆形底）
+  const baseR = 5.0;
+  const base = new THREE.Mesh(new THREE.CylinderGeometry(baseR, baseR, 0.18, 80), M.hairlinePlate);
+  base.position.y = -0.45; base.castShadow=true; base.receiveShadow=true;
+  caseParts.add(base);
+
+  // 表壳中框（金属环）
+  const bezel = new THREE.Mesh(new THREE.CylinderGeometry(5.2,5.2,0.55,90,1,true), M.gold);
+  bezel.position.y = -0.1; bezel.castShadow=true; bezel.receiveShadow=true;
+  caseParts.add(bezel);
+
+  // 表圈顶部（抛光金圈）
+  const ringTop = new THREE.Mesh(new THREE.TorusGeometry(5.05,0.16,18,90), M.goldPolish);
+  ringTop.rotation.x = Math.PI/2; ringTop.position.y = 0.18;
+  ringTop.castShadow=true;
+  caseParts.add(ringTop);
+
+  // 表圈底部
+  const ringBot = new THREE.Mesh(new THREE.TorusGeometry(5.05,0.16,18,90), M.goldPolish);
+  ringBot.rotation.x = Math.PI/2; ringBot.position.y = -0.5;
+  caseParts.add(ringBot);
+
+  // 蓝宝石水晶玻璃（顶面）
+  const glass = new THREE.Mesh(new THREE.CylinderGeometry(4.9,4.9,0.12,80), M.sapphire);
+  glass.position.y = 0.22;
+  caseParts.add(glass);
+  // 玻璃上沿倒角圈
+  const glassBev = new THREE.Mesh(new THREE.TorusGeometry(4.88,0.05,12,80), M.goldPolish);
+  glassBev.rotation.x=Math.PI/2; glassBev.position.y=0.28; caseParts.add(glassBev);
+
+  // 底盖
+  const back = new THREE.Mesh(new THREE.CylinderGeometry(5.0,4.95,0.2,80), M.goldPolish);
+  back.position.y = -0.62; back.castShadow=true;
+  caseParts.add(back);
+
+  // 表耳（lugs）4个
+  for(let i=0;i<4;i++){
+    const ang = (i<2? (i===0?0.42:-0.42):(i===2?Math.PI-0.42:Math.PI+0.42));
+    const lug = new THREE.Mesh(new THREE.BoxGeometry(0.55,0.7,0.9), M.gold);
+    lug.position.set(Math.cos(ang)*4.9, -0.1, Math.sin(ang)*4.9);
+    lug.rotation.y = -ang + Math.PI/2;
+    lug.castShadow=true;
+    caseParts.add(lug);
+  }
+
+  // 表冠
+  const crown = new THREE.Group();
+  const cBody = new THREE.Mesh(new THREE.CylinderGeometry(0.32,0.32,0.45,24), M.goldPolish);
+  cBody.rotation.z = Math.PI/2;
+  const cTip = new THREE.Mesh(new THREE.SphereGeometry(0.32,24,16), M.goldPolish);
+  cTip.position.x = 0.22;
+  // 齿纹（小柱）
+  for(let i=0;i<16;i++){
+    const a=i/16*Math.PI*2;
+    const t = new THREE.Mesh(new THREE.BoxGeometry(0.4,0.05,0.05), M.goldPolish);
+    t.position.set(0,Math.cos(a)*0.32,Math.sin(a)*0.32); t.rotation.x=a;
+    crown.add(t);
+  }
+  crown.add(cBody); crown.add(cTip);
+  crown.position.set(5.55,-0.1,0);
+  crown.castShadow=true;
+  caseParts.add(crown);
+
+  // 外环刻度（表盘外圈分钟刻度）
+  const scaleRing = new THREE.Group();
+  for(let i=0;i<60;i++){
+    const a = Math.PI/2 - i/60*Math.PI*2; // 12 点位于 +Z，顺时针
+    const major = i%5===0;
+    const tickGeo = new THREE.BoxGeometry(major?0.07:0.035, 0.02, major?0.34:0.18);
+    const tickMat = major ? M.lume.clone() : new THREE.MeshStandardMaterial({color:0xcfcab8, metalness:0.6, roughness:0.3, envMap:envMap, envMapIntensity:1});
+    const tick = new THREE.Mesh(tickGeo, tickMat);
+    tick.position.set(Math.cos(a)*4.55, 0.05, Math.sin(a)*4.55);
+    tick.rotation.y = -a + Math.PI/2;
+    scaleRing.add(tick);
+  }
+  // 数字时标（荧光，仅12个位置贴块）
+  for(let i=0;i<12;i++){
+    const a = Math.PI/2 - i/12*Math.PI*2; // 12 点位于 +Z，顺时针
+    const m = new THREE.Mesh(new THREE.BoxGeometry(0.12,0.03,0.18), M.lume);
+    m.position.set(Math.cos(a)*4.35, 0.06, Math.sin(a)*4.35);
+    m.rotation.y = -a + Math.PI/2;
+    scaleRing.add(m);
+  }
+  caseParts.add(scaleRing);
+
+  // 表带片段（装饰，上下各两节）
+  function strap(off, flip){
+    const grp = new THREE.Group();
+    for(let i=0;i<3;i++){
+      const seg = new THREE.Mesh(new THREE.BoxGeometry(1.4,0.32,0.7), M.gold);
+      seg.position.z = i*0.62 + 0.5;
+      seg.castShadow=true;
+      grp.add(seg);
+      const link = new THREE.Mesh(new THREE.CylinderGeometry(0.12,0.12,1.5,16), M.steel);
+      link.rotation.z = Math.PI/2; link.position.z = i*0.62 + 0.85;
+      grp.add(link);
+    }
+    grp.position.set(off?3.2:-3.2,-0.1,0); grp.rotation.y = off?0:Math.PI;
+    return grp;
+  }
+  caseParts.add(strap(false)); caseParts.add(strap(true));
+}
+buildCase();
+
+/* ============================================================
+   机芯构造
+============================================================ */
+
+/* --- 主夹板（带日内瓦波纹 + 红宝石轴承 + 螺丝） --- */
+function buildMainPlate(){
+  const plateGroup = new THREE.Group();
+
+  // 主夹板（圆形，带凹陷镂空造型）
+  const plateShape = new THREE.Shape();
+  plateShape.absarc(0,0,4.6,0,Math.PI*2,false);
+  // 镂空窗孔
+  const windows = [[0,0,1.3],[2.6,1.6,0.9],[-2.6,1.6,0.9],[2.6,-1.6,0.9],[-2.6,-1.6,0.9],[0,2.6,0.7]];
+  windows.forEach(w=>{
+    const p=new THREE.Path(); p.absarc(w[0],w[1],w[2],0,Math.PI*2,true); plateShape.holes.push(p);
+  });
+  const plateGeo = new THREE.ExtrudeGeometry(plateShape,{depth:0.12,bevelEnabled:true,bevelThickness:0.03,bevelSize:0.03,bevelSegments:2,steps:1});
+  plateGeo.translate(0,0,-0.06);
+  const plate = new THREE.Mesh(plateGeo, M.hairlinePlate);
+  plate.rotation.x = -Math.PI/2; // 转为水平夹板（法线朝 +Y）
+  plate.position.y = -0.3;
+  plate.castShadow=true; plate.receiveShadow=true;
+  plateGroup.add(plate);
+
+  // 日内瓦波纹（程序化贴图覆盖在板面上）
+  const waveC = document.createElement('canvas'); waveC.width=waveC.height=512;
+  const wg = waveC.getContext('2d');
+  wg.fillStyle='#1a160c'; wg.fillRect(0,0,512,512);
+  for(let r=8;r<400;r+=8){
+    wg.strokeStyle = `rgba(255,220,150,${r%16===0?0.22:0.10})`;
+    wg.lineWidth=2;
+    wg.beginPath(); wg.arc(256,256,r,0,Math.PI*2); wg.stroke();
+  }
+  const waveTex = new THREE.CanvasTexture(waveC); waveTex.colorSpace=THREE.SRGBColorSpace;
+  const waveMat = new THREE.MeshPhysicalMaterial({map:waveTex, color:0xc9a45a, metalness:1, roughness:0.35, envMap:envMap, envMapIntensity:1.1, clearcoat:0.4});
+  const wave = new THREE.Mesh(new THREE.CircleGeometry(4.5,64), waveMat);
+  wave.rotation.x=-Math.PI/2; wave.position.y=-0.22;
+  wave.receiveShadow=true;
+  plateGroup.add(wave);
+
+  // 红宝石轴承（与各齿轮轴心对齐）
+  const jewelPos = [[0,0],[1.85,1.05],[2.15,-0.95],[0.85,-1.85],[-1.7,-1.75],[-2.6,0.6]];
+  jewelPos.forEach(p=>{
+    // 金质宝石座
+    const seat = new THREE.Mesh(new THREE.CylinderGeometry(0.16,0.18,0.1,18), M.goldPolish);
+    seat.position.set(p[0],-0.14,p[1]); plateGroup.add(seat);
+    // 红宝石
+    const jewel = new THREE.Mesh(new THREE.SphereGeometry(0.1,18,12), M.ruby);
+    jewel.position.set(p[0],-0.08,p[1]); jewel.scale.y=0.5;
+    plateGroup.add(jewel);
+  });
+
+  // 蓝钢螺丝（固定夹板用，沿板边缘分布）
+  const screwPos = [[1.5,-1.4],[-1.5,-1.4],[1.5,1.4],[-1.5,1.4],[3.4,0.6],[-3.4,-0.6]];
+  screwPos.forEach(p=>{
+    const head = new THREE.Mesh(new THREE.CylinderGeometry(0.1,0.1,0.06,12), M.bluedSteel);
+    head.position.set(p[0],-0.1,p[1]);
+    plateGroup.add(head);
+    // 一字槽
+    const slot = new THREE.Mesh(new THREE.BoxGeometry(0.16,0.02,0.03), M.steelDark);
+    slot.position.set(p[0],-0.07,p[1]); slot.rotation.y = Math.random()*Math.PI;
+    plateGroup.add(slot);
+  });
+
+  movement.add(plateGroup);
+  markPart(plateGroup,{
+    tag:'MAIN PLATE', title:'主夹板', role:'机芯基础结构 / Mainplate',
+    desc:'机芯的基座结构，承载所有齿轮、擒纵与摆轮组件。表面饰有日内瓦波纹（Côtes de Genève），体现顶级制表的装饰打磨工艺。',
+    stats:[['直径','36 mm'],['材质','镀铑黄铜',''],['波纹','日内瓦','']]
+  });
+  return plateGroup;
+}
+const plateGroup = buildMainPlate();
+
+/* --- 桥板（夹板，悬于齿轮上方） --- */
+function buildBridges(){
+  const bg = new THREE.Group();
+  // 主桥板1（横跨齿轮系：覆盖中心轮/三轮/四轮区域）
+  // 形状定义在 XY 平面；rotateX(-PI/2) 后 shape.Y -> -world.Z
+  const bShape = new THREE.Shape();
+  bShape.moveTo(-2.3,-1.2);
+  bShape.bezierCurveTo(-2.3,1.0,-1.3,1.25,0,1.25);
+  bShape.bezierCurveTo(1.3,1.25,2.3,1.0,2.3,-1.2);
+  bShape.bezierCurveTo(1.4,-1.05,0.7,-0.85,0,-0.85);
+  bShape.bezierCurveTo(-0.7,-0.85,-1.4,-1.05,-2.3,-1.2);
+  const bGeo = new THREE.ExtrudeGeometry(bShape,{depth:0.22,bevelEnabled:true,bevelThickness:0.04,bevelSize:0.04,bevelSegments:2,steps:1});
+  bGeo.rotateX(-Math.PI/2); bGeo.translate(0,0,0);
+  const bridge1 = new THREE.Mesh(bGeo, M.goldPolish);
+  bridge1.position.y = -0.02; bridge1.castShadow=true; bridge1.receiveShadow=true;
+  bg.add(bridge1);
+
+  // 摆轮夹板（独立弧形，覆盖摆轮位置）
+  const pShape = new THREE.Shape();
+  pShape.absarc(0,0,1.05,0.3,Math.PI-0.3,false);
+  pShape.absarc(0,0,0.75,Math.PI-0.3,0.3,true);
+  const pGeo = new THREE.ExtrudeGeometry(pShape,{depth:0.2,bevelEnabled:true,bevelThickness:0.03,bevelSize:0.03,bevelSegments:2,steps:1});
+  pGeo.rotateX(-Math.PI/2); pGeo.translate(-1.7,0,-1.55);
+  const bridge2 = new THREE.Mesh(pGeo, M.goldPolish);
+  bridge2.castShadow=true;
+  bg.add(bridge2);
+
+  // 桥板上的螺丝（位于桥板上方）
+  [[1.7,0.8],[-1.7,0.8],[0,1.2],[-1.7,-2.2]].forEach(p=>{
+    const sc = new THREE.Mesh(new THREE.CylinderGeometry(0.09,0.09,0.06,12), M.bluedSteel);
+    sc.position.set(p[0],0.22,p[1]); bg.add(sc);
+  });
+  // 桥板上的红宝石轴承（齿轮上支点）
+  [[0,0],[-1.7,-1.75]].forEach(p=>{
+    const j=new THREE.Mesh(new THREE.SphereGeometry(0.08,16,10), M.ruby);
+    j.position.set(p[0],0.24,p[1]); j.scale.y=0.5; bg.add(j);
+  });
+
+  // 倒角打磨条纹（鱼鳞纹模拟：贴图小圆点）—— 用若干小球点缀
+  for(let i=0;i<16;i++){
+    const dot = new THREE.Mesh(new THREE.SphereGeometry(0.04,8,6), M.gold);
+    const ang = Math.random()*Math.PI*2;
+    const rr = 0.3 + Math.random()*1.8;
+    dot.position.set(Math.cos(ang)*rr*(Math.random()<0.5?1:0.6),0.21,0.4+Math.sin(ang)*rr*0.5);
+    bg.add(dot);
+  }
+
+  movement.add(bg);
+  markPart(bg,{
+    tag:'BRIDGES', title:'夹板 / 桥板', role:'支撑与定位 / Bridges',
+    desc:'覆盖在主夹板之上，固定齿轮轴心并提供精确轴承定位。表面经过 anglage（倒角）与 perlage（鱼鳞纹）打磨，边缘抛光至镜面，是高级机芯的视觉标志。',
+    stats:[['数量','2 件'],['打磨','鱼鳞纹 + 倒角',''],['螺丝','蓝钢','']]
+  });
+  return bg;
+}
+const bridgeGroup = buildBridges();
+
+/* --- 发条盒（主发条） --- */
+function buildMainspring(){
+  const g = new THREE.Group();
+  const r = 1.45;
+  // 外齿圈
+  const outer = new THREE.Mesh(makeBarrelGeometry(64, r, 0.2, 0.45), M.goldPolish);
+  outer.rotation.x = -Math.PI/2;
+  outer.position.y = -0.02;
+  outer.castShadow=true;
+  g.add(outer);
+  // 发条盒盖（顶面，带同心圆发条纹理）
+  const lidC = document.createElement('canvas'); lidC.width=lidC.height=256;
+  const lg = lidC.getContext('2d');
+  lg.fillStyle='#caa45c'; lg.fillRect(0,0,256,256);
+  lg.strokeStyle='rgba(80,55,20,0.7)'; lg.lineWidth=2;
+  for(let i=4;i<120;i+=3){ lg.beginPath(); lg.arc(128,128,i,0,Math.PI*2); lg.stroke(); }
+  const lidTex = new THREE.CanvasTexture(lidC); lidTex.colorSpace=THREE.SRGBColorSpace;
+  const lid = new THREE.Mesh(new THREE.CircleGeometry(r-0.1,64), new THREE.MeshPhysicalMaterial({map:lidTex, metalness:1, roughness:0.3, envMap:envMap, envMapIntensity:1.2}));
+  lid.rotation.x=-Math.PI/2; lid.position.y=0.21;
+  g.add(lid);
+  // 中心轴
+  const arbor = new THREE.Mesh(new THREE.CylinderGeometry(0.18,0.18,0.6,20), M.steel);
+  arbor.position.y=0.05; g.add(arbor);
+  const arborTop = new THREE.Mesh(new THREE.CylinderGeometry(0.1,0.1,0.2,16), M.bluedSteel);
+  arborTop.position.y=0.4; g.add(arborTop);
+
+  g.position.set(-2.6,0,0.6);
+  movement.add(g);
+  markPart(g,{
+    tag:'MAINSPRING BARREL', title:'发条盒', role:'动力源 / Power Reserve 72h',
+    desc:'主发条缠绕于盒内，是腕表的核心动力源。手动上链时表冠旋转卷紧发条，缓慢释放的能量驱动整个齿轮系运转，可提供长达 72 小时的动力储备。',
+    stats:[['齿数','64',''],['动力储备','72 小时',''],['上链方式','手动','']]
+  });
+  return {g, arbor};
+}
+const mainspring = buildMainspring();
+
+/* --- 齿轮系（gear train） --- */
+function buildGearTrain(){
+  const gt = new THREE.Group();
+  const wheels = [];
+  // 配置：位置(x,z) 齿数 半径 深 颜色 转速系数
+  const cfg = [
+    {pos:[0,0], teeth:60, r:1.0, d:0.18, mat:M.goldPolish, w:1.0, name:'中心轮', tag:'CENTER WHEEL'},
+    {pos:[1.85,1.05], teeth:48, r:0.78, d:0.16, mat:M.gold, w:4.0, name:'第三轮', tag:'THIRD WHEEL'},
+    {pos:[2.15,-0.95], teeth:42, r:0.66, d:0.15, mat:M.gold, w:16.0, name:'第四轮', tag:'FOURTH WHEEL'},
+    {pos:[0.85,-1.85], teeth:24, r:0.42, d:0.14, mat:M.brass, w:80.0, name:'擒纵轮', tag:'ESCAPE WHEEL'},
+  ];
+  cfg.forEach(c=>{
+    const w = new THREE.Group();
+    const gear = new THREE.Mesh(makeGearGeometry(c.teeth, c.r, c.r*0.65, 0.12, c.d), c.mat);
+    gear.rotation.x = -Math.PI/2;
+    gear.position.y = 0.05;
+    gear.castShadow=true;
+    w.add(gear);
+    // 轴心
+    const pin = new THREE.Mesh(new THREE.CylinderGeometry(0.08,0.08,0.4,12), M.steel);
+    pin.position.y=0.15; w.add(pin);
+    // 擒纵轮特有尖齿造型已由 teeth 与几何参数体现
+    w.position.set(c.pos[0],0,c.pos[1]);
+    w.userData.spin = c.w; // 相对转速
+    w.userData.cfg = c;
+    gt.add(w);
+    wheels.push(w);
+    markPart(w,{
+      tag:c.tag, title:c.name, role:'齿轮系 / Wheel Train',
+      desc:`${c.name} — 齿轮系的关键一环，将发条能量逐级传递并放大转速。齿轮经过镜面抛光，齿缘倒角处理，配合红宝石轴承减少摩擦。`,
+      stats:[['齿数',String(c.teeth),''],['直径',(c.r*36).toFixed(1)+' mm',''],['功能','传动','']]
+    });
+  });
+  movement.add(gt);
+  return {gt,wheels};
+}
+const {gt:gearTrain, wheels} = buildGearTrain();
+
+/* --- 擒纵机构（擒纵叉） --- */
+function buildEscapement(){
+  const g = new THREE.Group();
+  const fork = new THREE.Group();
+  // 叉身
+  const body = new THREE.Mesh(new THREE.BoxGeometry(0.5,0.08,0.1), M.steel);
+  fork.add(body);
+  // 叉头（宝石）
+  const horn1 = new THREE.Mesh(new THREE.BoxGeometry(0.1,0.06,0.1), M.steel);
+  horn1.position.set(0.25,0,0.1); fork.add(horn1);
+  const horn2 = new THREE.Mesh(new THREE.BoxGeometry(0.1,0.06,0.1), M.steel);
+  horn2.position.set(0.25,0,-0.1); fork.add(horn2);
+  // 叉瓦（红宝石）
+  const pallet1 = new THREE.Mesh(new THREE.BoxGeometry(0.08,0.08,0.05), M.ruby);
+  pallet1.position.set(-0.22,0,0.07); fork.add(pallet1);
+  const pallet2 = new THREE.Mesh(new THREE.BoxGeometry(0.08,0.08,0.05), M.ruby);
+  pallet2.position.set(-0.22,0,-0.07); fork.add(pallet2);
+  // 中心枢轴
+  const pivot = new THREE.Mesh(new THREE.CylinderGeometry(0.06,0.06,0.25,12), M.bluedSteel);
+  pivot.position.set(-0.4,0.1,0); pivot.rotation.z=0.2; fork.add(pivot);
+
+  fork.position.set(0.55,0.08,-1.25);
+  fork.rotation.y = 1.15; // 指向擒纵轮方向
+  fork.userData.isFork = true;
+  fork.userData.baseY = 1.15;
+  g.add(fork);
+  movement.add(g);
+  markPart(fork,{
+    tag:'PALLET FORK', title:'擒纵叉', role:'能量调节 / Swiss Lever',
+    desc:'瑞士叉瓦式擒纵机构的核心。擒纵叉在擒纵轮与摆轮之间往复运动，叉瓦上的两颗红宝石（进瓦与出瓦）精确控制能量释放，将旋转运动转化为摆轮的往复振荡。',
+    stats:[['类型','瑞士叉瓦式',''],['宝石','2 颗红宝石',''],['频率','5 Hz','']]
+  });
+  return fork;
+}
+const palletFork = buildEscapement();
+
+/* --- 摆轮 + 游丝 --- */
+function buildBalanceWheel(){
+  const g = new THREE.Group();
+  // 摆动组：仅轮缘/轮辐/螺丝/中心轴/游丝随摆动，调节件保持静止
+  const osc = new THREE.Group();
+  g.add(osc);
+  const RR = 0.95;
+  // 摆轮外环（金色）
+  const ring = new THREE.Mesh(new THREE.TorusGeometry(RR,0.09,18,64), M.goldPolish);
+  ring.rotation.x = -Math.PI/2; // 水平放置
+  osc.add(ring);
+  // 摆轮轮辐（3条，减轻重量）
+  for(let i=0;i<3;i++){
+    const spoke = new THREE.Mesh(new THREE.BoxGeometry(RR*2-0.1,0.05,0.08), M.gold);
+    spoke.rotation.y = i*Math.PI/3;
+    osc.add(spoke);
+  }
+  // 配重螺丝（摆轮边缘的微调螺丝，径向拧入轮缘）
+  const _up = new THREE.Vector3(0,1,0);
+  for(let i=0;i<8;i++){
+    const a = i/8*Math.PI*2;
+    const w = new THREE.Mesh(new THREE.CylinderGeometry(0.07,0.07,0.18,12), M.bluedSteel);
+    w.position.set(Math.cos(a)*RR,0,Math.sin(a)*RR);
+    // 使圆柱轴向沿径向
+    w.quaternion.setFromUnitVectors(_up, new THREE.Vector3(Math.cos(a),0,Math.sin(a)));
+    osc.add(w);
+  }
+  // 中心轴（摆轴，垂直）
+  const hub = new THREE.Mesh(new THREE.CylinderGeometry(0.1,0.1,0.34,16), M.steel);
+  osc.add(hub);
+
+  // 游丝（螺旋线）—— 使用 TubeGeometry
+  const pts = [];
+  const turns = 11, seg = 240;
+  for(let i=0;i<=seg;i++){
+    const t = i/seg * turns * Math.PI*2;
+    const rr = 0.2 + (0.6-0.2)*(i/seg);
+    pts.push(new THREE.Vector3(Math.cos(t)*rr, 0.22, Math.sin(t)*rr));
+  }
+  const curve = new THREE.CatmullRomCurve3(pts);
+  const hairspring = new THREE.Mesh(new THREE.TubeGeometry(curve, 300, 0.018, 6, false),
+    new THREE.MeshPhysicalMaterial({color:0x3a5fff, metalness:1, roughness:0.15, envMap:envMap, envMapIntensity:1.6, clearcoat:0.7}));
+  osc.add(hairspring);
+
+  // 游丝外端固定桩（垂直立柱，固定于夹板，不随摆轮转动）
+  const stud = new THREE.Mesh(new THREE.CylinderGeometry(0.07,0.07,0.2,10), M.goldPolish);
+  stud.position.set(0.62,0.1,0); g.add(stud);
+  // 快慢针（调节器，固定）
+  const index = new THREE.Mesh(new THREE.BoxGeometry(0.25,0.04,0.05), M.bluedSteel);
+  index.position.set(0.4,0.2,0); g.add(index);
+
+  g.position.set(-1.7,0,-1.75);
+  movement.add(g);
+  g.userData.osc = osc;
+  markPart(g,{
+    tag:'BALANCE WHEEL', title:'摆轮 + 游丝', role:'时间基准 / Oscillator 5 Hz',
+    desc:'腕表的“心脏”，决定走时精度。摆轮以 5 Hz（每小时 36,000 次）高频振荡，蓝钢游丝提供等时性回复力。边缘的蓝钢螺丝用于精密调校。每秒 10 次半振荡，画面中清晰可见。',
+    stats:[['频率','5 Hz · 36,000 vph',''],['游丝','蓝钢',''],['宝石','防震 Incabloc','']]
+  });
+  return g;
+}
+const balanceWheel = buildBalanceWheel();
+
+/* ============================================================
+   指针（在机芯之上，玻璃之下）
+============================================================ */
+function buildHands(){
+  const g = new THREE.Group();
+  // 时针
+  const hour = new THREE.Mesh(new THREE.BoxGeometry(0.14,0.04,2.4), M.lume);
+  hour.geometry.translate(0,0,1.0); // 顶端伸出
+  hour.position.set(0,0.16,0);
+  hour.castShadow=true;
+  g.add(hour);
+  // 时针针尖菱形
+  const hTip = new THREE.Mesh(new THREE.ConeGeometry(0.09,0.3,4), M.lume);
+  hTip.rotation.x=-Math.PI/2; hTip.position.set(0,0.16,2.4);
+  g.add(hTip);
+
+  // 分针
+  const min = new THREE.Mesh(new THREE.BoxGeometry(0.1,0.04,3.5), M.lume);
+  min.geometry.translate(0,0,1.55);
+  min.position.set(0,0.2,0);
+  g.add(min);
+  const mTip = new THREE.Mesh(new THREE.ConeGeometry(0.07,0.25,4), M.lume);
+  mTip.rotation.x=-Math.PI/2; mTip.position.set(0,0.2,3.5);
+  g.add(mTip);
+
+  // 秒针（细钢针）
+  const sec = new THREE.Mesh(new THREE.CylinderGeometry(0.02,0.02,4.2,8), M.bluedSteel);
+  sec.rotation.x=-Math.PI/2; sec.geometry.translate(0,0,0);
+  sec.position.set(0,0.24,1.7);
+  g.add(sec);
+  // 秒针配重
+  const secW = new THREE.Mesh(new THREE.CylinderGeometry(0.1,0.1,0.06,16), M.bluedSteel);
+  secW.position.set(0,0.24,-0.5); g.add(secW);
+
+  // 中心轴帽
+  const cap = new THREE.Mesh(new THREE.CylinderGeometry(0.12,0.14,0.12,16), M.goldPolish);
+  cap.position.y=0.28; g.add(cap);
+
+  watch.add(g);
+  return {g,hour,min,sec};
+}
+const hands = buildHands();
+
+/* ============================================================
+   后处理
+============================================================ */
+const composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene,camera));
+const bloom = new UnrealBloomPass(new THREE.Vector2(innerWidth,innerHeight), 0.7, 0.7, 0.85);
+composer.addPass(bloom);
+const outPass = new OutputPass();
+composer.addPass(outPass);
+
+/* ============================================================
+   爆炸视图目标位置
+============================================================ */
+function setExplodeTargets(){
+  // 纯增量偏移（爆炸时叠加到原始位置上）
+  bridgeGroup.userData.explode = new THREE.Vector3(0,1.4,0);
+  balanceWheel.userData.explode = new THREE.Vector3(0,1.2,0);
+  palletFork.userData.explode = new THREE.Vector3(0,1.0,0);
+  wheels.forEach((w,i)=>{ w.userData.explode = new THREE.Vector3(0, 0.7+i*0.22, 0); });
+  mainspring.g.userData.explode = new THREE.Vector3(0,2.2,0);
+  plateGroup.userData.explode = new THREE.Vector3(0,-1.1,0);
+  caseParts.userData.explode = new THREE.Vector3(0,-0.6,0); // 表壳下沉
+}
+setExplodeTargets();
+
+/* ============================================================
+   交互：射线检测 / 标签 / 信息面板
+============================================================ */
+const tagEl = document.createElement('div');
+tagEl.className='tag3d'; tagEl.innerHTML='<div class="dot"></div><div class="line"></div><div class="lbl"></div>';
+app.appendChild(tagEl);
+
+function onPointerMove(e){
+  mouse.x = (e.clientX/innerWidth)*2-1;
+  mouse.y = -(e.clientY/innerHeight)*2+1;
+}
+function onPointerLeave(){
+  mouse.set(-2,-2);
+  tagEl.classList.remove('show');
+  if(hoverGroup){ setHighlight(hoverGroup,false); hoverGroup=null; }
+  renderer.domElement.classList.remove('cursor-pointer');
+}
+renderer.domElement.addEventListener('pointermove', onPointerMove);
+renderer.domElement.addEventListener('pointerleave', onPointerLeave);
+renderer.domElement.addEventListener('click', ()=>{
+  if(hoverGroup){ showInfo(hoverGroup.userData.info); }
+});
+
+function checkHover(){
+  if(state.exploded) return; // 爆炸时暂停高亮避免混乱
+  raycaster.setFromCamera(mouse, camera);
+  const hits = raycaster.intersectObjects(interactive, true);
+  if(hits.length){
+    const top = hits[0].object.userData.parentGroup || hoverGroup;
+    if(top !== hoverGroup){
+      if(hoverGroup) setHighlight(hoverGroup,false);
+      hoverGroup = top; setHighlight(hoverGroup,true);
+    }
+    // 更新标签
+    const pos = hits[0].point.clone();
+    const info = hoverGroup.userData.info;
+    tagEl.querySelector('.lbl').textContent = info.title + ' · ' + info.tag;
+    projectTag(pos);
+    tagEl.classList.add('show');
+    renderer.domElement.classList.add('cursor-pointer');
+  } else {
+    if(hoverGroup){ setHighlight(hoverGroup,false); hoverGroup=null; }
+    tagEl.classList.remove('show');
+    renderer.domElement.classList.remove('cursor-pointer');
+  }
+}
+function projectTag(pos3){
+  const v = pos3.clone().project(camera);
+  const x = (v.x*0.5+0.5)*innerWidth;
+  const y = (-v.y*0.5+0.5)*innerHeight - 40;
+  tagEl.style.left = x+'px'; tagEl.style.top = y+'px';
+}
+
+const infoEl = document.getElementById('info');
+function showInfo(info){
+  document.getElementById('iTag').textContent = info.tag;
+  document.getElementById('iTitle').textContent = info.title;
+  document.getElementById('iRole').textContent = info.role;
+  document.getElementById('iDesc').textContent = info.desc;
+  const st = document.getElementById('iStats');
+  st.innerHTML = '';
+  info.stats.forEach(s=>{
+    const d = document.createElement('div'); d.className='stat';
+    d.innerHTML = `<div class="k">${s[0]}</div><div class="v">${s[1]}</div>`;
+    st.appendChild(d);
+  });
+  infoEl.classList.remove('hidden');
+}
+document.getElementById('closeInfo').addEventListener('click', ()=>infoEl.classList.add('hidden'));
+
+/* ============================================================
+   UI 控件绑定
+============================================================ */
+function bindToggle(id, key, onChange){
+  const el = document.getElementById(id);
+  el.addEventListener('click', ()=>{
+    state[key]=!state[key]; el.classList.toggle('on',state[key]);
+    onChange&&onChange(state[key]);
+  });
+}
+bindToggle('tAuto','autoRotate',v=>{controls.autoRotate=v;});
+bindToggle('tRun','movement');
+bindToggle('tRefl','reflection',v=>{ floor.visible=v; scene.environment = v?envMap:null; scene.background = v? null : new THREE.Color(0x07080b); });
+bindToggle('tBloom','bloom',v=>{bloom.enabled=v;});
+
+document.getElementById('bExplode').addEventListener('click', ()=>{
+  state.exploded = !state.exploded;
+  document.getElementById('bExplode').classList.toggle('on',state.exploded);
+});
+document.getElementById('bReset').addEventListener('click', ()=>{
+  camera.position.set(0,6.5,13);
+  controls.target.set(0,0,0);
+  controls.update();
+});
+
+window.addEventListener('resize', ()=>{
+  camera.aspect = innerWidth/innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(innerWidth,innerHeight);
+  composer.setSize(innerWidth,innerHeight);
+});
+
+/* ============================================================
+   时钟显示（底部）
+============================================================ */
+function tick(){
+  const d = new Date();
+  document.getElementById('hh').textContent = String(d.getHours()).padStart(2,'0');
+  document.getElementById('mm').textContent = String(d.getMinutes()).padStart(2,'0');
+  document.getElementById('ss').textContent = String(d.getSeconds()).padStart(2,'0');
+}
+setInterval(tick,1000); tick();
+
+/* ============================================================
+   动画循环
+============================================================ */
+const targetPos = new THREE.Vector3();
+const currentPos = new THREE.Vector3();
+const origPos = new Map();
+interactive.forEach(g=>origPos.set(g, g.position.clone()));
+origPos.set(caseParts, caseParts.position.clone());
+
+function animate(){
+  requestAnimationFrame(animate);
+  const dt = Math.min(clock.getDelta(),0.05);
+  const t = clock.elapsedTime;
+
+  // 爆炸插值
+  const tgt = state.exploded?1:0;
+  state.explodeT += (tgt - state.explodeT) * Math.min(1, dt*4);
+  interactive.forEach(g=>{
+    const o = origPos.get(g); const e = g.userData.explode;
+    if(e){ g.position.lerpVectors(o, new THREE.Vector3(o.x+e.x,o.y+e.y,o.z+e.z), state.explodeT); }
+  });
+  // 表壳下沉
+  const co = origPos.get(caseParts);
+  caseParts.position.y = co.y + (-0.6) * state.explodeT;
+
+  // 机芯运转
+  if(state.movement && state.explodeT<0.5){
+    const f = state.rate * dt;
+    wheels.forEach(w=>{ w.rotation.y -= f * w.userData.spin * 0.05; });
+    mainspring.g.rotation.y += f*0.015; // 发条盒缓慢释放
+    palletFork.rotation.y = (palletFork.userData.baseY||1.15) + Math.sin(t*state.rate*Math.PI*2*0.4)*0.14;
+    (balanceWheel.userData.osc||balanceWheel).rotation.y = Math.sin(t*state.rate*Math.PI*2*0.2)*0.6; // 摆动
+  }
+
+  // 爆炸时抬升指针，避免与机芯重叠
+  hands.g.position.y = 1.6 * state.explodeT;
+
+  // 指针随真实时间（12 点 = +Z，顺时针为 +Y 旋转）
+  const d = new Date();
+  const sec = d.getSeconds()+d.getMilliseconds()/1000;
+  const min = d.getMinutes()+sec/60;
+  const hr = (d.getHours()%12)+min/60;
+  hands.sec.rotation.y = sec/60*Math.PI*2;
+  hands.min.rotation.y = min/60*Math.PI*2;
+  hands.hour.rotation.y = hr/12*Math.PI*2;
+
+  // accent light 微动
+  accentPoint.position.x = Math.sin(t*0.5)*2;
+  accentPoint.position.z = Math.cos(t*0.5)*2+3;
+
+  controls.update();
+  checkHover();
+  composer.render();
+}
+
+// 隐藏 loader 并启动
+setTimeout(()=>{
+  const l=document.getElementById('loader');
+  l.style.opacity='0'; setTimeout(()=>l.remove(),800);
+}, 600);
+
+animate();
+</script>
+</body>
+</html>
diff --git a/outputs/kimi-k2-7-code/kimi-code-thinking/skeleton-watch.html b/outputs/kimi-k2-7-code/kimi-code-thinking/skeleton-watch.html
new file mode 100644
index 0000000..eb071e4
--- /dev/null
+++ b/outputs/kimi-k2-7-code/kimi-code-thinking/skeleton-watch.html
@@ -0,0 +1,1023 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>镂空机械表 · 3D 交互展示</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --gold: #d4af37;
+      --rose: #c27e60;
+      --steel: #a8b5c4;
+      --lume: #c8ffaa;
+      --glass: rgba(20, 22, 26, 0.72);
+      --glass-border: rgba(255, 255, 255, 0.10);
+    }
+    html, body {
+      width: 100%; height: 100%;
+      overflow: hidden;
+      background: radial-gradient(circle at 50% 35%, #1f242c 0%, #0d1014 55%, #050608 100%);
+      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+      color: #f0f0f0;
+      user-select: none;
+    }
+    #canvas-container {
+      position: absolute; inset: 0;
+      z-index: 1;
+    }
+    #loading {
+      position: absolute; inset: 0; z-index: 20;
+      display: flex; align-items: center; justify-content: center;
+      background: #050608; color: var(--gold);
+      font-size: 1.2rem; letter-spacing: 0.2em;
+      transition: opacity 0.8s ease;
+    }
+    #loading.hidden { opacity: 0; pointer-events: none; }
+
+    /* UI Overlay */
+    .ui-layer {
+      position: absolute; z-index: 10;
+      pointer-events: none;
+    }
+    .title-card {
+      top: 26px; left: 30px;
+      pointer-events: auto;
+    }
+    .title-card h1 {
+      font-size: 1.55rem; font-weight: 300;
+      letter-spacing: 0.18em; text-transform: uppercase;
+      background: linear-gradient(90deg, #fff 0%, var(--gold) 55%, #fff 100%);
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      text-shadow: 0 2px 18px rgba(212,175,55,0.25);
+    }
+    .title-card p {
+      margin-top: 6px; font-size: 0.78rem;
+      color: rgba(255,255,255,0.55); letter-spacing: 0.08em;
+    }
+
+    /* Controls */
+    .controls {
+      bottom: 28px; left: 50%;
+      transform: translateX(-50%);
+      display: flex; gap: 10px;
+      pointer-events: auto;
+      padding: 8px 12px;
+      background: var(--glass);
+      border: 1px solid var(--glass-border);
+      border-radius: 999px;
+      backdrop-filter: blur(14px);
+      box-shadow: 0 14px 40px rgba(0,0,0,0.45);
+    }
+    .btn {
+      display: flex; align-items: center; gap: 7px;
+      padding: 9px 16px; border-radius: 999px;
+      border: 1px solid rgba(255,255,255,0.08);
+      background: rgba(255,255,255,0.04);
+      color: rgba(255,255,255,0.9);
+      font-size: 0.8rem; cursor: pointer;
+      transition: all 0.25s ease;
+      white-space: nowrap;
+    }
+    .btn:hover {
+      background: rgba(212,175,55,0.14);
+      border-color: rgba(212,175,55,0.35);
+      transform: translateY(-1px);
+    }
+    .btn.active {
+      background: rgba(212,175,55,0.22);
+      border-color: rgba(212,175,55,0.55);
+      color: #fff;
+      box-shadow: 0 0 18px rgba(212,175,55,0.18);
+    }
+
+    /* Info Panel */
+    #info-panel {
+      top: 26px; right: 30px; width: 300px;
+      background: var(--glass);
+      border: 1px solid var(--glass-border);
+      border-radius: 18px;
+      backdrop-filter: blur(16px);
+      padding: 22px;
+      pointer-events: auto;
+      box-shadow: 0 18px 50px rgba(0,0,0,0.45);
+      transform: translateX(30px);
+      opacity: 0; transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
+    }
+    #info-panel.visible { transform: translateX(0); opacity: 1; }
+    #info-panel .part-icon {
+      width: 46px; height: 46px; border-radius: 12px;
+      background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(194,126,96,0.15));
+      border: 1px solid rgba(212,175,55,0.25);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.4rem; margin-bottom: 14px;
+    }
+    #info-panel h2 {
+      font-size: 1.15rem; font-weight: 500; margin-bottom: 6px;
+      letter-spacing: 0.04em;
+    }
+    #info-panel .meta {
+      font-size: 0.7rem; color: rgba(255,255,255,0.45);
+      text-transform: uppercase; letter-spacing: 0.12em;
+      margin-bottom: 14px;
+    }
+    #info-panel p {
+      font-size: 0.86rem; line-height: 1.65;
+      color: rgba(255,255,255,0.72);
+    }
+    #info-panel .close {
+      position: absolute; top: 14px; right: 16px;
+      width: 28px; height: 28px; border-radius: 50%;
+      border: none; background: rgba(255,255,255,0.08);
+      color: rgba(255,255,255,0.7); cursor: pointer;
+      font-size: 1rem; line-height: 1;
+      transition: background 0.2s;
+    }
+    #info-panel .close:hover { background: rgba(255,255,255,0.18); }
+
+    /* Floating label */
+    #tooltip {
+      position: absolute; z-index: 12;
+      padding: 7px 12px;
+      background: rgba(10,12,15,0.82);
+      border: 1px solid rgba(212,175,55,0.35);
+      border-radius: 8px;
+      color: #fff; font-size: 0.8rem;
+      pointer-events: none; opacity: 0;
+      transform: translate(-50%, -130%);
+      transition: opacity 0.18s ease;
+      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
+    }
+    #tooltip::after {
+      content: ''; position: absolute;
+      bottom: -5px; left: 50%; transform: translateX(-50%);
+      border-width: 5px 5px 0; border-style: solid;
+      border-color: rgba(212,175,55,0.5) transparent transparent;
+    }
+
+    /* Stats / helper text */
+    .helper {
+      bottom: 92px; left: 50%;
+      transform: translateX(-50%);
+      font-size: 0.72rem; color: rgba(255,255,255,0.38);
+      letter-spacing: 0.06em;
+      text-align: center;
+    }
+
+    /* Part label lines overlay */
+    #labels-overlay {
+      position: absolute; inset: 0; z-index: 9;
+      pointer-events: none;
+    }
+    .part-label {
+      position: absolute;
+      padding: 4px 10px;
+      background: rgba(10,12,15,0.75);
+      border: 1px solid rgba(212,175,55,0.3);
+      border-radius: 6px;
+      color: rgba(255,255,255,0.9);
+      font-size: 0.72rem;
+      transform: translate(-50%, -50%);
+      opacity: 0; transition: opacity 0.25s ease;
+      pointer-events: none;
+    }
+    .part-label.active { opacity: 1; }
+
+    @media (max-width: 720px) {
+      .title-card { left: 16px; top: 16px; }
+      .title-card h1 { font-size: 1.15rem; }
+      #info-panel { width: calc(100% - 32px); right: 16px; top: auto; bottom: 100px; }
+      .controls { bottom: 16px; flex-wrap: wrap; justify-content: center; width: calc(100% - 32px); border-radius: 20px; }
+    }
+  </style>
+</head>
+<body>
+  <div id="loading">ASSEMBLING MOVEMENT…</div>
+  <div id="canvas-container"></div>
+
+  <div class="ui-layer title-card">
+    <h1>Skeleton Tourbillon</h1>
+    <p>镂空机械机芯 · 实时交互展示</p>
+  </div>
+
+  <div class="ui-layer helper">
+    拖拽旋转 · 滚轮缩放 · 悬停查看零件 · 点击显示详情
+  </div>
+
+  <div class="ui-layer controls">
+    <button class="btn" id="btn-explode" title="切换爆炸视图">💥 爆炸视图</button>
+    <button class="btn" id="btn-auto" title="自动旋转">🔄 自动旋转</button>
+    <button class="btn active" id="btn-lume" title="切换夜光">✨ 夜光效果</button>
+    <button class="btn" id="btn-reset" title="重置视角">⌂ 重置</button>
+  </div>
+
+  <div id="info-panel">
+    <button class="close" id="info-close">×</button>
+    <div class="part-icon" id="info-icon">⚙️</div>
+    <h2 id="info-title">零件名称</h2>
+    <div class="meta" id="info-meta">COMPONENT</div>
+    <p id="info-desc">点击零件查看详细说明。</p>
+  </div>
+
+  <div id="tooltip">零件</div>
+  <div id="labels-overlay"></div>
+
+  <script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
+  }
+}
+  </script>
+  <script type="module">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+    import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+    import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+    import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+    import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+    import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+
+    // ===== Configuration =====
+    const CONFIG = {
+      scale: 1,
+      lumeIntensity: 2.2,
+      bloomStrength: 0.08,
+      bloomRadius: 0.55,
+      bloomThreshold: 0.88,
+      autoRotateSpeed: 0.35,
+      explodeDistance: 2.4,
+      shadowMapSize: 2048
+    };
+
+    // ===== State =====
+    const state = {
+      exploded: false,
+      autoRotate: false,
+      lumeOn: true,
+      hovered: null,
+      selected: null,
+      paused: false,
+      explodeFactor: 0
+    };
+
+    // ===== Scene setup =====
+    const container = document.getElementById('canvas-container');
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x0a0c0f);
+    scene.fog = new THREE.FogExp2(0x0a0c0f, 0.035);
+
+    const camera = new THREE.PerspectiveCamera(38, window.innerWidth / window.innerHeight, 0.1, 100);
+    camera.position.set(0, 0, 14);
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 0.85;
+    container.appendChild(renderer.domElement);
+
+    // Environment for reflections
+    const pmremGenerator = new THREE.PMREMGenerator(renderer);
+    pmremGenerator.compileEquirectangularShader();
+    const roomEnv = new RoomEnvironment();
+    scene.environment = pmremGenerator.fromScene(roomEnv).texture;
+    roomEnv.dispose();
+
+    // Post-processing
+    const composer = new EffectComposer(renderer);
+    const renderPass = new RenderPass(scene, camera);
+    composer.addPass(renderPass);
+    const bloomPass = new UnrealBloomPass(
+      new THREE.Vector2(window.innerWidth, window.innerHeight),
+      CONFIG.bloomStrength, CONFIG.bloomRadius, CONFIG.bloomThreshold
+    );
+    composer.addPass(bloomPass);
+    const outputPass = new OutputPass();
+    composer.addPass(outputPass);
+
+    // Controls
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.055;
+    controls.minDistance = 5;
+    controls.maxDistance = 22;
+    controls.autoRotate = false;
+    controls.autoRotateSpeed = CONFIG.autoRotateSpeed;
+
+    // ===== Lighting =====
+    const ambient = new THREE.AmbientLight(0xffffff, 0.45);
+    scene.add(ambient);
+
+    const keyLight = new THREE.SpotLight(0xfff4e0, 8);
+    keyLight.position.set(14, 18, 13);
+    keyLight.angle = Math.PI / 6;
+    keyLight.penumbra = 0.65;
+    keyLight.castShadow = true;
+    keyLight.shadow.mapSize.set(CONFIG.shadowMapSize, CONFIG.shadowMapSize);
+    keyLight.shadow.bias = -0.0001;
+    scene.add(keyLight);
+
+    const fillLight = new THREE.PointLight(0xc8e0ff, 4);
+    fillLight.position.set(-10, 4, 8);
+    scene.add(fillLight);
+
+    const rimLight = new THREE.SpotLight(0xffdca8, 5);
+    rimLight.position.set(0, -14, -10);
+    rimLight.lookAt(0, 0, 0);
+    scene.add(rimLight);
+
+    const lumeLight = new THREE.PointLight(0x88ff66, 2, 6);
+    lumeLight.position.set(0, 0, 1.2);
+    scene.add(lumeLight);
+
+    // ===== Materials =====
+    const mat = {
+      roseGold: new THREE.MeshStandardMaterial({
+        color: 0xc27e60, metalness: 1.0, roughness: 0.20,
+        envMapIntensity: 0.9
+      }),
+      yellowGold: new THREE.MeshStandardMaterial({
+        color: 0xd4af37, metalness: 1.0, roughness: 0.18,
+        envMapIntensity: 0.95
+      }),
+      steel: new THREE.MeshStandardMaterial({
+        color: 0xb0becd, metalness: 1.0, roughness: 0.22,
+        envMapIntensity: 0.85
+      }),
+      brass: new THREE.MeshStandardMaterial({
+        color: 0xb8a85c, metalness: 1.0, roughness: 0.26,
+        envMapIntensity: 0.85
+      }),
+      rhodium: new THREE.MeshStandardMaterial({
+        color: 0xe8ecf0, metalness: 1.0, roughness: 0.16,
+        envMapIntensity: 0.9
+      }),
+      darkMetal: new THREE.MeshStandardMaterial({
+        color: 0x2a2f36, metalness: 0.85, roughness: 0.35,
+        envMapIntensity: 0.9
+      }),
+      sapphire: new THREE.MeshPhysicalMaterial({
+        color: 0xaaccff, metalness: 0, roughness: 0.02,
+        transmission: 0.92, thickness: 1.2,
+        ior: 1.76, transparent: true, opacity: 0.32,
+        envMapIntensity: 0.45, clearcoat: 0.6, clearcoatRoughness: 0.02
+      }),
+      ruby: new THREE.MeshPhysicalMaterial({
+        color: 0xd6004e, metalness: 0.2, roughness: 0.04,
+        transmission: 0.25, thickness: 0.6,
+        clearcoat: 1.0, envMapIntensity: 0.8
+      }),
+      lume: new THREE.MeshStandardMaterial({
+        color: 0xeaffdd, emissive: 0x66ff44,
+        emissiveIntensity: CONFIG.lumeIntensity,
+        roughness: 0.6, metalness: 0
+      }),
+      lumeDim: new THREE.MeshStandardMaterial({
+        color: 0xc8d4b8, emissive: 0x224411,
+        emissiveIntensity: 0.15,
+        roughness: 0.7, metalness: 0
+      }),
+      dialBlack: new THREE.MeshStandardMaterial({
+        color: 0x15181c, metalness: 0.7, roughness: 0.4,
+        envMapIntensity: 0.8
+      }),
+      screw: new THREE.MeshStandardMaterial({
+        color: 0xdddddd, metalness: 1.0, roughness: 0.15
+      })
+    };
+
+    // ===== Helpers =====
+    const DEG = Math.PI / 180;
+    const watchGroup = new THREE.Group();
+    scene.add(watchGroup);
+
+    const parts = [];        // raycast targets
+    const gears = [];        // animated gears
+    const oscillators = [];  // balance wheels
+    const hands = {};        // hour/minute/second
+    const explodeParts = []; // parts that can explode
+
+    function registerPart(mesh, info, explodeAxis = new THREE.Vector3(0, 0, 1), explodeMult = 1) {
+      mesh.userData = {
+        ...mesh.userData,
+        isPart: true,
+        info,
+        originalParent: mesh.parent,
+        homePos: mesh.position.clone(),
+        explodeDir: explodeAxis.clone().normalize(),
+        explodeMult
+      };
+      parts.push(mesh);
+      explodeParts.push(mesh);
+      return mesh;
+    }
+
+    function makeGearShape(radius, teeth, holeRadius = 0) {
+      const shape = new THREE.Shape();
+      const innerR = radius * 0.82;
+      const outerR = radius;
+      const tipR = radius * 1.12;
+      const step = (Math.PI * 2) / teeth;
+      for (let i = 0; i < teeth; i++) {
+        const a = i * step;
+        const a0 = a - step * 0.22;
+        const a1 = a - step * 0.10;
+        const a2 = a + step * 0.10;
+        const a3 = a + step * 0.22;
+        if (i === 0) shape.moveTo(Math.cos(a0) * innerR, Math.sin(a0) * innerR);
+        else shape.lineTo(Math.cos(a0) * innerR, Math.sin(a0) * innerR);
+        shape.lineTo(Math.cos(a1) * outerR, Math.sin(a1) * outerR);
+        shape.lineTo(Math.cos(a2) * tipR, Math.sin(a2) * tipR);
+        shape.lineTo(Math.cos(a3) * outerR, Math.sin(a3) * outerR);
+      }
+      shape.closePath();
+      if (holeRadius > 0) {
+        const hole = new THREE.Path();
+        hole.absarc(0, 0, holeRadius, 0, Math.PI * 2, true);
+        shape.holes.push(hole);
+      }
+      return shape;
+    }
+
+    function createGear(radius, teeth, thickness, material, holeRadius = 0, name = '齿轮') {
+      const shape = makeGearShape(radius, teeth, holeRadius);
+      const geom = new THREE.ExtrudeGeometry(shape, {
+        depth: thickness, bevelEnabled: true, bevelThickness: 0.03,
+        bevelSize: 0.02, bevelSegments: 2, curveSegments: Math.min(24, teeth * 2)
+      });
+      geom.center();
+      const mesh = new THREE.Mesh(geom, material);
+      mesh.castShadow = true; mesh.receiveShadow = true;
+      registerPart(mesh, { name, category: '齿轮系', desc: '将动力从发条盒传递至擒纵机构，并驱动指针运转。' });
+      return mesh;
+    }
+
+    function createSpiralTexture() {
+      const cvs = document.createElement('canvas');
+      cvs.width = 512; cvs.height = 512;
+      const ctx = cvs.getContext('2d');
+      ctx.fillStyle = '#1a1510';
+      ctx.fillRect(0, 0, 512, 512);
+      ctx.strokeStyle = '#6a5a3a';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      const cx = 256, cy = 256;
+      for (let i = 0; i < 720; i++) {
+        const a = i * 0.08;
+        const r = 10 + i * 0.32;
+        const x = cx + Math.cos(a) * r;
+        const y = cy + Math.sin(a) * r;
+        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+      const tex = new THREE.CanvasTexture(cvs);
+      tex.wrapS = THREE.RepeatWrapping;
+      tex.wrapT = THREE.RepeatWrapping;
+      return tex;
+    }
+
+    // ===== Build watch =====
+    function buildWatch() {
+      const caseRadius = 3.6;
+      const caseThickness = 1.15;
+
+      // 1. Case ring
+      const caseShape = new THREE.Shape();
+      caseShape.absarc(0, 0, caseRadius, 0, Math.PI * 2, false);
+      const caseHole = new THREE.Path();
+      caseHole.absarc(0, 0, caseRadius - 0.32, 0, Math.PI * 2, true);
+      caseShape.holes.push(caseHole);
+      const caseGeom = new THREE.ExtrudeGeometry(caseShape, {
+        depth: caseThickness, bevelEnabled: true, bevelThickness: 0.12,
+        bevelSize: 0.12, bevelSegments: 4, curveSegments: 64
+      });
+      caseGeom.center();
+      const caseMesh = new THREE.Mesh(caseGeom, mat.roseGold);
+      caseMesh.castShadow = true; caseMesh.receiveShadow = true;
+      registerPart(caseMesh, { name: '表壳', category: '外观', desc: '18K 玫瑰金表壳，经抛光与拉丝交替处理，承载整枚机芯。' }, new THREE.Vector3(0,0,1), 0.6);
+      watchGroup.add(caseMesh);
+
+      // Lugs (simplified)
+      for (let i = 0; i < 4; i++) {
+        const angle = i * 90 * DEG;
+        const lug = new THREE.Mesh(new THREE.BoxGeometry(0.55, 1.1, caseThickness * 0.85), mat.roseGold);
+        lug.position.set(Math.cos(angle) * (caseRadius + 0.25), Math.sin(angle) * (caseRadius + 0.25), 0);
+        lug.rotation.z = angle;
+        lug.castShadow = true;
+        registerPart(lug, { name: '表耳', category: '外观', desc: '连接表壳与表带的弧形表耳，符合人体工学。' }, new THREE.Vector3(Math.cos(angle), Math.sin(angle), 0), 0.4);
+        watchGroup.add(lug);
+      }
+
+      // 2. Sapphire crystal
+      const crystalGeom = new THREE.CylinderGeometry(caseRadius - 0.05, caseRadius - 0.05, 0.12, 64);
+      const crystal = new THREE.Mesh(crystalGeom, mat.sapphire);
+      crystal.position.z = caseThickness / 2 + 0.18;
+      crystal.rotation.x = Math.PI / 2;
+      registerPart(crystal, { name: '蓝宝石水晶表镜', category: '外观', desc: '双面防反射涂层蓝宝石水晶，莫氏硬度 9 级。' }, new THREE.Vector3(0,0,1), 1.2);
+      watchGroup.add(crystal);
+
+      const caseBack = crystal.clone();
+      caseBack.position.z = -(caseThickness / 2 + 0.18);
+      caseBack.material = mat.sapphire;
+      registerPart(caseBack, { name: '透底蓝宝石底盖', category: '外观', desc: '蓝宝石水晶透底，可欣赏机芯背面打磨。' }, new THREE.Vector3(0,0,-1), 1.2);
+      watchGroup.add(caseBack);
+
+      // 3. Chapter ring / dial
+      const ringShape = new THREE.Shape();
+      ringShape.absarc(0, 0, caseRadius - 0.42, 0, Math.PI * 2, false);
+      const ringHole = new THREE.Path();
+      ringHole.absarc(0, 0, caseRadius - 0.72, 0, Math.PI * 2, true);
+      ringShape.holes.push(ringHole);
+      const ringGeom = new THREE.ExtrudeGeometry(ringShape, { depth: 0.08, bevelEnabled: false, curveSegments: 64 });
+      ringGeom.center();
+      const chapterRing = new THREE.Mesh(ringGeom, mat.darkMetal);
+      chapterRing.position.z = caseThickness / 2 - 0.05;
+      registerPart(chapterRing, { name: '分钟刻度圈', category: '表盘', desc: '哑光黑金属刻度圈，标注分钟刻度。' }, new THREE.Vector3(0,0,1), 0.35);
+      watchGroup.add(chapterRing);
+
+      // Hour markers
+      for (let i = 0; i < 12; i++) {
+        const a = i * 30 * DEG;
+        const marker = new THREE.Mesh(new THREE.BoxGeometry(0.12, 0.42, 0.06), mat.lume);
+        marker.position.set(Math.cos(a) * (caseRadius - 0.55), Math.sin(a) * (caseRadius - 0.55), caseThickness / 2 - 0.02);
+        marker.rotation.z = a;
+        marker.userData.isLume = true;
+        registerPart(marker, { name: '夜光时标', category: '表盘', desc: 'Super-LumiNova 夜光材料，暗光下清晰读时。' }, new THREE.Vector3(0,0,1), 0.45);
+        watchGroup.add(marker);
+      }
+
+      // 4. Movement plates (front & back) with cutouts
+      function createPlate(z, thickness, matPlate, name) {
+        const shape = new THREE.Shape();
+        shape.absarc(0, 0, caseRadius - 0.38, 0, Math.PI * 2, false);
+        const cutouts = [
+          { r: 1.05, x: 0, y: 0 },
+          { r: 0.82, x: 1.55, y: 0.7 },
+          { r: 0.72, x: -1.35, y: 0.85 },
+          { r: 0.68, x: 0.2, y: -1.45 },
+          { r: 0.55, x: -1.1, y: -0.9 }
+        ];
+        cutouts.forEach(c => {
+          const h = new THREE.Path();
+          h.absarc(c.x, c.y, c.r, 0, Math.PI * 2, true);
+          shape.holes.push(h);
+        });
+        const g = new THREE.ExtrudeGeometry(shape, { depth: thickness, bevelEnabled: true, bevelThickness: 0.04, bevelSize: 0.04, bevelSegments: 2, curveSegments: 64 });
+        g.center();
+        const plate = new THREE.Mesh(g, matPlate);
+        plate.position.z = z;
+        plate.castShadow = true; plate.receiveShadow = true;
+        registerPart(plate, { name, category: '机芯', desc: '镂空主夹板/桥板，经倒角与日内瓦条纹打磨。' }, new THREE.Vector3(0,0,z > 0 ? 1 : -1), 0.75);
+        watchGroup.add(plate);
+        return plate;
+      }
+      createPlate(caseThickness/2 - 0.22, 0.14, mat.rhodium, '前夹板');
+      createPlate(-caseThickness/2 + 0.22, 0.14, mat.rhodium, '后夹板');
+
+      // 5. Gear train
+      const gearPositions = [
+        { x: 0, y: 0, r: 0.92, teeth: 60, thick: 0.16, mat: mat.brass, hole: 0.16, name: '中心轮', rate: 1/3600, desc: '中心轮每小时旋转一圈，直接驱动分针。' },
+        { x: 1.55, y: 0.7, r: 0.72, teeth: 48, thick: 0.14, mat: mat.steel, hole: 0.12, name: '三轮', rate: -4, desc: '第三轮将动力从中心轮传向四轮。' },
+        { x: -1.35, y: 0.85, r: 0.68, teeth: 42, thick: 0.14, mat: mat.steel, hole: 0.12, name: '四轮', rate: 12, desc: '第四轮每分钟旋转一圈，驱动秒针。' },
+        { x: 0.2, y: -1.45, r: 0.55, teeth: 36, thick: 0.12, mat: mat.yellowGold, hole: 0.10, name: '擒纵轮', rate: -48, desc: '擒纵轮控制能量释放节奏，是机械表的"心跳"来源。' },
+        { x: -1.1, y: -0.9, r: 1.05, teeth: 70, thick: 0.22, mat: mat.yellowGold, hole: 0.18, name: '发条盒', rate: 0.05, desc: '储存主发条动力，是机芯的能量来源。' }
+      ];
+
+      gearPositions.forEach(g => {
+        const gear = createGear(g.r, g.teeth, g.thick, g.mat, g.hole, g.name);
+        gear.position.set(g.x, g.y, 0);
+        gear.userData.info.desc = g.desc;
+        gear.userData.rate = g.rate;
+        gears.push(gear);
+        watchGroup.add(gear);
+
+        // Ruby bearing on top
+        const jewel = new THREE.Mesh(new THREE.CylinderGeometry(g.hole * 1.6, g.hole * 1.6, g.thick + 0.06, 16), mat.ruby);
+        jewel.rotation.x = Math.PI / 2;
+        jewel.position.set(g.x, g.y, g.thick/2 + 0.04);
+        registerPart(jewel, { name: '红宝石轴承', category: '机芯', desc: '人造红宝石轴承，减少摩擦并提高耐磨性。' }, new THREE.Vector3(0,0,1), 0.55);
+        watchGroup.add(jewel);
+        const jewelBack = jewel.clone();
+        jewelBack.position.z = -(g.thick/2 + 0.04);
+        registerPart(jewelBack, { name: '红宝石轴承', category: '机芯', desc: '人造红宝石轴承，减少摩擦并提高耐磨性。' }, new THREE.Vector3(0,0,-1), 0.55);
+        watchGroup.add(jewelBack);
+      });
+
+      // Mainspring barrel drum
+      const barrelTex = createSpiralTexture();
+      const barrelMat = new THREE.MeshStandardMaterial({ map: barrelTex, color: 0x8a7a50, metalness: 0.8, roughness: 0.35 });
+      const barrelDrum = new THREE.Mesh(new THREE.CylinderGeometry(1.0, 1.0, 0.26, 48, 1, true), barrelMat);
+      barrelDrum.rotation.x = Math.PI / 2;
+      barrelDrum.position.set(-1.1, -0.9, 0);
+      barrelDrum.castShadow = true;
+      registerPart(barrelDrum, { name: '发条盒鼓', category: '动力', desc: '内含盘绕的主发条，储存约 40 小时动力。' }, new THREE.Vector3(-0.3,-0.2,0), 0.6);
+      watchGroup.add(barrelDrum);
+
+      // Barrel cover
+      const barrelCover = new THREE.Mesh(new THREE.CylinderGeometry(1.0, 1.0, 0.02, 48), mat.yellowGold);
+      barrelCover.rotation.x = Math.PI / 2;
+      barrelCover.position.set(-1.1, -0.9, 0.13);
+      registerPart(barrelCover, { name: '发条盒盖', category: '动力', desc: '抛光黄铜发条盒盖，刻有品牌徽标区域。' }, new THREE.Vector3(0,0,1), 0.55);
+      watchGroup.add(barrelCover);
+
+      // 6. Balance wheel + hairspring
+      function createBalanceWheel(x, y) {
+        const bwGroup = new THREE.Group();
+        bwGroup.position.set(x, y, 0.45);
+
+        // Rim
+        const rimShape = new THREE.Shape();
+        rimShape.absarc(0, 0, 0.85, 0, Math.PI * 2, false);
+        const rimHole = new THREE.Path();
+        rimHole.absarc(0, 0, 0.72, 0, Math.PI * 2, true);
+        rimShape.holes.push(rimHole);
+        const rim = new THREE.Mesh(new THREE.ExtrudeGeometry(rimShape, { depth: 0.10, bevelEnabled: true, bevelThickness: 0.03, bevelSize: 0.02, bevelSegments: 2, curveSegments: 48 }), mat.rhodium);
+        rim.castShadow = true;
+        bwGroup.add(rim);
+
+        // Arms
+        for (let i = 0; i < 4; i++) {
+          const a = i * 45 * DEG;
+          const arm = new THREE.Mesh(new THREE.BoxGeometry(0.12, 0.82, 0.08), mat.rhodium);
+          arm.position.set(Math.cos(a) * 0.45, Math.sin(a) * 0.45, 0);
+          arm.rotation.z = a;
+          bwGroup.add(arm);
+        }
+
+        // Center screw
+        const screw = new THREE.Mesh(new THREE.CylinderGeometry(0.10, 0.10, 0.18, 16), mat.screw);
+        screw.rotation.x = Math.PI / 2;
+        bwGroup.add(screw);
+
+        // Hairspring spiral
+        class SpiralCurve extends THREE.Curve {
+          constructor(turns) { super(); this.turns = turns; }
+          getPoint(t) {
+            const angle = t * this.turns * Math.PI * 2;
+            const r = 0.12 + t * 0.62;
+            return new THREE.Vector3(Math.cos(angle) * r, Math.sin(angle) * r, -0.02);
+          }
+        }
+        const spiral = new THREE.Mesh(new THREE.TubeGeometry(new SpiralCurve(3.5), 120, 0.018, 6, false), mat.steel);
+        bwGroup.add(spiral);
+
+        // Cock bridge over balance
+        const cockShape = new THREE.Shape();
+        cockShape.absarc(0, 0, 0.32, 0, Math.PI, false);
+        cockShape.lineTo(-0.5, 0.7); cockShape.lineTo(0.5, 0.7);
+        const cock = new THREE.Mesh(new THREE.ExtrudeGeometry(cockShape, { depth: 0.08, bevelEnabled: true, bevelThickness: 0.03, bevelSize: 0.02, bevelSegments: 2 }), mat.rhodium);
+        cock.position.set(x, y + 0.45, 0.72);
+        cock.castShadow = true;
+        registerPart(cock, { name: '摆轮夹板', category: '调速', desc: '固定摆轮与游丝的桥板，经手工倒角抛光。' }, new THREE.Vector3(0,0.3,1), 0.8);
+        watchGroup.add(cock);
+
+        // Ruby endstone
+        const endstone = new THREE.Mesh(new THREE.SphereGeometry(0.08, 16, 16), mat.ruby);
+        endstone.position.set(x, y + 0.45, 0.82);
+        registerPart(endstone, { name: '摆轮避震器宝石', category: '调速', desc: '保护摆轮轴尖免受冲击损伤的宝石轴承。' }, new THREE.Vector3(0,0,1), 0.9);
+        watchGroup.add(endstone);
+
+        registerPart(rim, { name: '摆轮', category: '调速', desc: '与游丝配合控制振动周期，决定走时精度。' }, new THREE.Vector3(0,0,1), 0.55);
+        registerPart(spiral, { name: '游丝', category: '调速', desc: '扁平游丝通过伸缩控制摆轮往复振荡。' }, new THREE.Vector3(0,0,1), 0.6);
+
+        oscillators.push({ group: bwGroup, phase: 0 });
+        watchGroup.add(bwGroup);
+      }
+      createBalanceWheel(0.2, -2.45);
+
+      // 7. Escapement pallet fork (simplified)
+      const palletShape = new THREE.Shape();
+      palletShape.moveTo(-0.15, -0.35);
+      palletShape.lineTo(0.15, -0.35);
+      palletShape.lineTo(0.08, 0.35);
+      palletShape.lineTo(-0.08, 0.35);
+      const pallet = new THREE.Mesh(new THREE.ExtrudeGeometry(palletShape, { depth: 0.10, bevelEnabled: true, bevelThickness: 0.02, bevelSize: 0.015, bevelSegments: 2 }), mat.steel);
+      pallet.position.set(0.55, -1.85, 0.42);
+      pallet.castShadow = true;
+      registerPart(pallet, { name: '擒纵叉', category: '调速', desc: '在擒纵轮与摆轮之间传递脉冲，实现滴答声。' }, new THREE.Vector3(0.2,-0.3,1), 0.7);
+      watchGroup.add(pallet);
+      // Pallet jewels
+      const pj1 = new THREE.Mesh(new THREE.BoxGeometry(0.08, 0.12, 0.12), mat.ruby);
+      pj1.position.set(-0.12, -0.32, 0.05);
+      pallet.add(pj1);
+      const pj2 = new THREE.Mesh(new THREE.BoxGeometry(0.08, 0.12, 0.12), mat.ruby);
+      pj2.position.set(0.12, 0.32, 0.05);
+      pallet.add(pj2);
+
+      // 8. Hands
+      function createHand(width, length, colorMat, lumeMat, name) {
+        const g = new THREE.Group();
+        const shaft = new THREE.Mesh(new THREE.CylinderGeometry(width * 0.35, width * 0.35, length * 0.78, 12), colorMat);
+        shaft.position.y = length * 0.38;
+        shaft.rotation.x = 0;
+        g.add(shaft);
+        const tip = new THREE.Mesh(new THREE.BoxGeometry(width * 0.55, length * 0.35, 0.04), lumeMat);
+        tip.position.y = length * 0.62;
+        tip.userData.isLume = true;
+        g.add(tip);
+        const balance = new THREE.Mesh(new THREE.BoxGeometry(width, length * 0.22, 0.04), colorMat);
+        balance.position.y = -length * 0.08;
+        g.add(balance);
+        // Center pipe
+        const pipe = new THREE.Mesh(new THREE.CylinderGeometry(width * 0.4, width * 0.4, 0.25, 12), colorMat);
+        pipe.rotation.x = Math.PI / 2;
+        g.add(pipe);
+        return g;
+      }
+
+      hands.hour = createHand(0.16, 1.55, mat.yellowGold, mat.lume, '时针');
+      hands.minute = createHand(0.12, 2.25, mat.yellowGold, mat.lume, '分针');
+      hands.second = createHand(0.045, 2.55, mat.steel, mat.lume, '秒针');
+
+      hands.hour.position.z = caseThickness / 2 + 0.05;
+      hands.minute.position.z = caseThickness / 2 + 0.10;
+      hands.second.position.z = caseThickness / 2 + 0.15;
+
+      [hands.hour, hands.minute, hands.second].forEach((h, i) => {
+        h.userData = {
+          isPart: true,
+          info: { name: ['时针','分针','秒针'][i], category: '显示', desc: ['指示小时','指示分钟','指示秒钟，由四轮驱动'][i] },
+          homePos: h.position.clone(),
+          explodeDir: new THREE.Vector3(0, 0, 1),
+          explodeMult: 0.35
+        };
+        parts.push(h);
+        explodeParts.push(h);
+        watchGroup.add(h);
+      });
+
+      // 9. Screws on bridges
+      const screwPositions = [
+        [1.6, 1.5], [-2.0, 1.3], [1.8, -1.4], [-2.1, -1.5], [0.4, 1.4]
+      ];
+      screwPositions.forEach(([x, y]) => {
+        const screwHead = new THREE.Mesh(new THREE.CylinderGeometry(0.10, 0.10, 0.06, 12), mat.screw);
+        screwHead.rotation.x = Math.PI / 2;
+        screwHead.position.set(x, y, caseThickness / 2 - 0.14);
+        // slot
+        const slot = new THREE.Mesh(new THREE.BoxGeometry(0.14, 0.025, 0.07), mat.darkMetal);
+        slot.position.set(x, y, caseThickness / 2 - 0.12);
+        registerPart(screwHead, { name: '蓝钢螺丝', category: '机芯', desc: '烤蓝螺丝，固定夹板并点缀机芯。' }, new THREE.Vector3(0,0,1), 0.6);
+        registerPart(slot, { name: '螺丝槽', category: '机芯', desc: '一字螺丝槽，用于拆装调校。' }, new THREE.Vector3(0,0,1), 0.6);
+        watchGroup.add(screwHead);
+        watchGroup.add(slot);
+      });
+
+      // 10. Crown
+      const crown = new THREE.Mesh(new THREE.CylinderGeometry(0.22, 0.22, 0.35, 20), mat.roseGold);
+      crown.rotation.z = Math.PI / 2;
+      crown.position.set(caseRadius + 0.15, 0, 0);
+      crown.castShadow = true;
+      registerPart(crown, { name: '表冠', category: '外观', desc: '用于上链与调校时间的玫瑰金表冠。' }, new THREE.Vector3(1,0,0), 0.5);
+      watchGroup.add(crown);
+
+      // Center all nicely
+      watchGroup.rotation.x = -0.25;
+      watchGroup.rotation.y = 0.15;
+    }
+
+    buildWatch();
+
+    // ===== Labels overlay =====
+    const labelsData = [
+      { name: '摆轮', objName: '摆轮' },
+      { name: '擒纵轮', objName: '擒纵轮' },
+      { name: '发条盒', objName: '发条盒' },
+      { name: '蓝宝石表镜', objName: '蓝宝石水晶表镜' },
+      { name: '红宝石轴承', objName: '红宝石轴承' }
+    ];
+    const labelsOverlay = document.getElementById('labels-overlay');
+    const labelEls = [];
+    labelsData.forEach(item => {
+      const el = document.createElement('div');
+      el.className = 'part-label';
+      el.textContent = item.name;
+      labelsOverlay.appendChild(el);
+      labelEls.push({ el, name: item.objName });
+    });
+
+    function updateLabels() {
+      labelEls.forEach(le => {
+        const target = parts.find(p => p.userData.info && p.userData.info.name === le.name);
+        if (!target) return;
+        const pos = new THREE.Vector3();
+        target.getWorldPosition(pos);
+        pos.y += 0.55;
+        pos.project(camera);
+        const x = (pos.x * 0.5 + 0.5) * window.innerWidth;
+        const y = (-pos.y * 0.5 + 0.5) * window.innerHeight;
+        le.el.style.left = `${x}px`;
+        le.el.style.top = `${y}px`;
+        const visible = state.exploded || (state.selected && state.selected === target);
+        le.el.classList.toggle('active', visible && x > 0 && x < window.innerWidth && y > 0 && y < window.innerHeight);
+      });
+    }
+
+    // ===== Interaction =====
+    const raycaster = new THREE.Raycaster();
+    const mouse = new THREE.Vector2();
+    const tooltip = document.getElementById('tooltip');
+    const infoPanel = document.getElementById('info-panel');
+    const infoTitle = document.getElementById('info-title');
+    const infoMeta = document.getElementById('info-meta');
+    const infoDesc = document.getElementById('info-desc');
+    const infoIcon = document.getElementById('info-icon');
+
+    function getIntersects(e) {
+      mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+      mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+      raycaster.setFromCamera(mouse, camera);
+      return raycaster.intersectObjects(parts, true);
+    }
+
+    function setHighlight(mesh, on) {
+      if (!mesh) return;
+      if (on) {
+        if (!mesh.userData._origMat) {
+          mesh.userData._origMat = mesh.material;
+          if (Array.isArray(mesh.material)) {
+            mesh.material = mesh.material.map(m => m.clone());
+          } else if (mesh.material) {
+            mesh.material = mesh.material.clone();
+          }
+        }
+        const m = mesh.material;
+        if (Array.isArray(m)) {
+          m.forEach(sub => { sub.emissive.setHex(0x44aaff); sub.emissiveIntensity = 0.85; });
+        } else if (m) {
+          m.emissive.setHex(0x44aaff); m.emissiveIntensity = 0.85;
+        }
+      } else {
+        if (mesh.userData._origMat) {
+          mesh.material = mesh.userData._origMat;
+          mesh.userData._origMat = null;
+        }
+      }
+    }
+
+    window.addEventListener('mousemove', e => {
+      const hits = getIntersects(e);
+      let hit = null;
+      if (hits.length) {
+        hit = hits[0].object;
+        while (hit && (!hit.userData || !hit.userData.isPart)) hit = hit.parent;
+      }
+      if (state.hovered && state.hovered !== hit && state.hovered !== state.selected) {
+        setHighlight(state.hovered, false);
+      }
+      state.hovered = hit;
+      if (hit) {
+        if (hit !== state.selected) setHighlight(hit, true);
+        document.body.style.cursor = 'pointer';
+        tooltip.style.opacity = 1;
+        tooltip.style.left = e.clientX + 'px';
+        tooltip.style.top = e.clientY + 'px';
+        tooltip.textContent = hit.userData.info.name;
+      } else {
+        document.body.style.cursor = 'default';
+        tooltip.style.opacity = 0;
+      }
+    });
+
+    window.addEventListener('click', e => {
+      const hits = getIntersects(e);
+      let hit = null;
+      if (hits.length) {
+        hit = hits[0].object;
+        while (hit && (!hit.userData || !hit.userData.isPart)) hit = hit.parent;
+      }
+      if (hit) {
+        if (state.selected && state.selected !== hit) setHighlight(state.selected, false);
+        state.selected = hit;
+        setHighlight(hit, true);
+        showInfo(hit.userData.info);
+      } else if (!e.target.closest('#info-panel') && !e.target.closest('.controls')) {
+        if (state.selected) setHighlight(state.selected, false);
+        state.selected = null;
+        infoPanel.classList.remove('visible');
+      }
+    });
+
+    function showInfo(info) {
+      infoTitle.textContent = info.name;
+      infoMeta.textContent = info.category || 'COMPONENT';
+      infoDesc.textContent = info.desc || '';
+      infoIcon.textContent = info.category === '外观' ? '⌚' : info.category === '显示' ? '👁️' : info.category === '调速' ? '⚖️' : info.category === '动力' ? '⚡' : '⚙️';
+      infoPanel.classList.add('visible');
+    }
+
+    document.getElementById('info-close').addEventListener('click', () => {
+      if (state.selected) setHighlight(state.selected, false);
+      state.selected = null;
+      infoPanel.classList.remove('visible');
+    });
+
+    // ===== Controls =====
+    const btnExplode = document.getElementById('btn-explode');
+    const btnAuto = document.getElementById('btn-auto');
+    const btnLume = document.getElementById('btn-lume');
+    const btnReset = document.getElementById('btn-reset');
+
+    btnExplode.addEventListener('click', () => {
+      state.exploded = !state.exploded;
+      btnExplode.classList.toggle('active', state.exploded);
+      btnExplode.textContent = state.exploded ? '🔧 组装视图' : '💥 爆炸视图';
+    });
+
+    btnAuto.addEventListener('click', () => {
+      state.autoRotate = !state.autoRotate;
+      controls.autoRotate = state.autoRotate;
+      btnAuto.classList.toggle('active', state.autoRotate);
+    });
+
+    btnLume.addEventListener('click', () => {
+      state.lumeOn = !state.lumeOn;
+      btnLume.classList.toggle('active', state.lumeOn);
+      mat.lume.emissiveIntensity = state.lumeOn ? CONFIG.lumeIntensity : 0.05;
+      mat.lumeDim.emissiveIntensity = state.lumeOn ? 0.15 : 0.01;
+      lumeLight.intensity = state.lumeOn ? 2 : 0.1;
+    });
+
+    btnReset.addEventListener('click', () => {
+      controls.reset();
+      camera.position.set(0, 0, 14);
+      watchGroup.rotation.set(-0.12, 0.08, 0);
+    });
+
+    // ===== Animation =====
+    const clock = new THREE.Clock();
+
+    function updateTime(now) {
+      const ms = now.getMilliseconds();
+      const s = now.getSeconds() + ms / 1000;
+      const m = now.getMinutes() + s / 60;
+      const h = (now.getHours() % 12) + m / 60;
+
+      // Smooth sweep hands
+      hands.second.rotation.z = -s * 6 * DEG;
+      hands.minute.rotation.z = -m * 6 * DEG;
+      hands.hour.rotation.z = -h * 30 * DEG;
+
+      // Gear train
+      const t = s * DEG;
+      gears.forEach(g => {
+        g.rotation.z = t * g.userData.rate;
+      });
+    }
+
+    function animate() {
+      requestAnimationFrame(animate);
+      const dt = clock.getDelta();
+      const time = clock.getElapsedTime();
+
+      if (!state.paused) {
+        updateTime(new Date());
+      }
+
+      // Balance wheel oscillation ~4Hz
+      oscillators.forEach(o => {
+        o.group.rotation.z = Math.sin(time * 8 * Math.PI) * 0.45;
+      });
+
+      // Exploded view interpolation
+      const target = state.exploded ? 1 : 0;
+      if (Math.abs(state.explodeFactor - target) > 0.001) {
+        state.explodeFactor += (target - state.explodeFactor) * 4 * dt;
+      } else {
+        state.explodeFactor = target;
+      }
+      const ef = state.explodeFactor * CONFIG.explodeDistance;
+      explodeParts.forEach(p => {
+        if (!p.userData.homePos) return;
+        const dir = p.userData.explodeDir || new THREE.Vector3(0, 0, 1);
+        const mult = p.userData.explodeMult || 1;
+        p.position.copy(p.userData.homePos).add(dir.clone().multiplyScalar(ef * mult));
+      });
+
+      // Subtle watch floating
+      watchGroup.position.y = Math.sin(time * 0.6) * 0.08;
+
+      controls.update();
+      updateLabels();
+      composer.render();
+    }
+
+    // ===== Resize =====
+    window.addEventListener('resize', () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      composer.setSize(window.innerWidth, window.innerHeight);
+      bloomPass.setSize(window.innerWidth, window.innerHeight);
+    });
+
+    // ===== Init =====
+    document.getElementById('loading').classList.add('hidden');
+    animate();
+  </script>
+</body>
+</html>
diff --git a/outputs/mimo-v2-5-pro-mimocode/skeleton-watch.html b/outputs/mimo-v2-5-pro-mimocode/skeleton-watch.html
new file mode 100644
index 0000000..ba1a3ad
--- /dev/null
+++ b/outputs/mimo-v2-5-pro-mimocode/skeleton-watch.html
@@ -0,0 +1,1090 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>3D Skeleton Watch</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{overflow:hidden;background:#0a0a0a;font-family:'Helvetica Neue',Arial,sans-serif;color:#e0d5c0}
+#canvas{display:block}
+#ui{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}
+#title{position:fixed;top:30px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;z-index:10}
+#title h1{font-size:28px;font-weight:300;letter-spacing:12px;text-transform:uppercase;color:#c8b88a;text-shadow:0 0 20px rgba(200,184,138,0.3)}
+#title p{font-size:11px;letter-spacing:6px;color:#8a7e6a;margin-top:6px;text-transform:uppercase}
+#info-panel{position:fixed;right:30px;top:50%;transform:translateY(-50%);width:280px;background:rgba(15,13,10,0.92);border:1px solid rgba(200,184,138,0.15);border-radius:12px;padding:24px;pointer-events:auto;backdrop-filter:blur(20px);opacity:0;transition:opacity 0.5s ease;z-index:10}
+#info-panel.visible{opacity:1}
+#info-panel h2{font-size:14px;letter-spacing:4px;text-transform:uppercase;color:#c8b88a;margin-bottom:16px;font-weight:400}
+#info-panel .info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(200,184,138,0.08)}
+#info-panel .info-label{font-size:11px;color:#8a7e6a;letter-spacing:2px;text-transform:uppercase}
+#info-panel .info-value{font-size:12px;color:#d4c4a0;text-align:right}
+#part-label{position:fixed;pointer-events:none;background:rgba(15,13,10,0.9);border:1px solid rgba(200,184,138,0.3);border-radius:6px;padding:8px 14px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#c8b88a;opacity:0;transition:opacity 0.3s;z-index:20;white-space:nowrap}
+#part-label::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);border:3px solid transparent;border-right-color:rgba(200,184,138,0.3)}
+#controls{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:12px;pointer-events:auto;z-index:10}
+.btn{background:rgba(15,13,10,0.85);border:1px solid rgba(200,184,138,0.2);border-radius:8px;padding:10px 20px;color:#c8b88a;font-size:11px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all 0.3s;backdrop-filter:blur(10px);font-family:inherit}
+.btn:hover{background:rgba(200,184,138,0.15);border-color:rgba(200,184,138,0.4);box-shadow:0 0 15px rgba(200,184,138,0.1)}
+.btn.active{background:rgba(200,184,138,0.2);border-color:rgba(200,184,138,0.5)}
+#loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a0a;display:flex;align-items:center;justify-content:center;z-index:100;transition:opacity 1s}
+#loading.hidden{opacity:0;pointer-events:none}
+#loading .spinner{width:40px;height:40px;border:2px solid rgba(200,184,138,0.1);border-top-color:#c8b88a;border-radius:50%;animation:spin 1s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+#movement-info{position:fixed;left:30px;bottom:80px;width:240px;background:rgba(15,13,10,0.88);border:1px solid rgba(200,184,138,0.12);border-radius:10px;padding:18px;pointer-events:none;z-index:10;font-size:10px;letter-spacing:1.5px;line-height:2;color:#7a6e5a}
+#movement-info .mi-title{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:#c8b88a;margin-bottom:10px}
+</style>
+</head>
+<body>
+<div id="loading"><div class="spinner"></div></div>
+<div id="title"><h1>Skeleton</h1><p>Haute Horlogerie · Interactive 3D</p></div>
+<div id="info-panel">
+<h2>Movement Details</h2>
+<div class="info-row"><span class="info-label">Caliber</span><span class="info-value">SK-2024A</span></div>
+<div class="info-row"><span class="info-label">Type</span><span class="info-value">Manual Wind</span></div>
+<div class="info-row"><span class="info-label">Frequency</span><span class="info-value">28,800 vph</span></div>
+<div class="info-row"><span class="info-label">Jewels</span><span class="info-value">21 Rubies</span></div>
+<div class="info-row"><span class="info-label">Power Reserve</span><span class="info-value">72 Hours</span></div>
+<div class="info-row"><span class="info-label">Diameter</span><span class="info-value">39mm</span></div>
+<div class="info-row"><span class="info-label">Thickness</span><span class="info-value">8.5mm</span></div>
+<div class="info-row"><span class="info-label">Finish</span><span class="info-value">Hand Angled</span></div>
+<div class="info-row"><span class="info-label">Case</span><span class="info-value">18K Rose Gold</span></div>
+<div class="info-row"><span class="info-label">Crystal</span><span class="info-value">Sapphire</span></div>
+<div id="part-detail" style="margin-top:16px;padding-top:12px;border-top:1px solid rgba(200,184,138,0.1);display:none">
+<div class="info-row"><span class="info-label">Component</span><span id="pd-name" class="info-value">—</span></div>
+<div class="info-row"><span class="info-label">Material</span><span id="pd-material" class="info-value">—</span></div>
+<div class="info-row"><span class="info-label">Function</span><span id="pd-function" class="info-value">—</span></div>
+</div>
+</div>
+<div id="movement-info">
+<div class="mi-title">Movement Architecture</div>
+Main Plate: German Silver<br>
+Bridges: Hand-finished, Beveled<br>
+Gear Train: 4 Wheels<br>
+Escapement: Swiss Lever<br>
+Balance: Glucydur<br>
+Hairspring: Nivarox<br>
+Oscillation: 4 Hz
+</div>
+<div id="part-label"></div>
+<div id="controls">
+<button class="btn" id="btn-rotate" onclick="toggleAutoRotate()">Auto Rotate</button>
+<button class="btn" id="btn-explode" onclick="toggleExplode()">Exploded View</button>
+<button class="btn" id="btn-xray" onclick="toggleXray()">X-Ray Mode</button>
+<button class="btn" id="btn-lume" onclick="toggleLume()">Night Mode</button>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script>
+const {Scene,PerspectiveCamera,WebGLRenderer,MeshPhysicalMaterial,MeshStandardMaterial,MeshPhongMaterial,Mesh,CylinderGeometry,TorusGeometry,SphereGeometry,BoxGeometry,PlaneGeometry,Group,Vector3,Color,AmbientLight,DirectionalLight,PointLight,SpotLight,RectAreaLight,Clock,Raycaster,Vector2,CurvePath,CubicBezierCurve3,Shape,ExtrudeGeometry,LatheGeometry,DoubleSide,FrontSide,AdditiveBlending,Float32BufferAttribute,BufferGeometry,Points,PointsMaterial,LineBasicMaterial,Line,SRGBColorSpace,ACESFilmicToneMapping,PCFSoftShadowMap}=THREE;
+
+let scene,camera,renderer,clock,raycaster,mouse;
+let watchGroup,movementGroup,handsGroup;
+let autoRotate=true,exploded=false,xrayMode=false,lumeMode=false;
+let explodeProgress=0,targetExplode=0;
+let hoveredPart=null,selectedPart=null;
+let partMap=new Map();
+let interactiveParts=[];
+let secondAngle=0,minuteAngle=0,hourAngle=0;
+let balanceAngle=0,balanceSpeed=0;
+let escapeWheelAngle=0;
+let palletAngle=0;
+let hairspringGroup;
+let glowMeshes=[];
+
+init();
+animate();
+
+function init(){
+  scene=new Scene();
+  scene.background=new Color(0x0a0a0a);
+  scene.fog=null;
+
+  camera=new PerspectiveCamera(35,innerWidth/innerHeight,0.1,100);
+  camera.position.set(0,2,8);
+  camera.lookAt(0,0,0);
+
+  renderer=new WebGLRenderer({antialias:true,alpha:false,powerPreference:'high-performance'});
+  renderer.setSize(innerWidth,innerHeight);
+  renderer.setPixelRatio(Math.min(devicePixelRatio,2));
+  renderer.toneMapping=ACESFilmicToneMapping;
+  renderer.toneMappingExposure=1.2;
+  renderer.shadowMap.enabled=true;
+  renderer.shadowMap.type=PCFSoftShadowMap;
+  renderer.outputColorSpace=SRGBColorSpace;
+  document.body.appendChild(renderer.domElement);
+
+  clock=new Clock();
+  raycaster=new Raycaster();
+  mouse=new Vector2(-999,-999);
+
+  setupLights();
+  createWatch();
+  createEnvironment();
+
+  document.addEventListener('mousemove',onMouseMove);
+  document.addEventListener('click',onClick);
+  window.addEventListener('resize',onResize);
+
+  setTimeout(()=>{
+    document.getElementById('loading').classList.add('hidden');
+  },800);
+}
+
+function setupLights(){
+  const amb=new AmbientLight(0x404040,0.4);
+  scene.add(amb);
+
+  const key=new DirectionalLight(0xfff5e6,1.8);
+  key.position.set(5,8,5);
+  key.castShadow=true;
+  key.shadow.mapSize.set(2048,2048);
+  key.shadow.camera.near=0.5;
+  key.shadow.camera.far=20;
+  key.shadow.bias=-0.001;
+  scene.add(key);
+
+  const fill=new DirectionalLight(0xc8d8f0,0.6);
+  fill.position.set(-4,3,-3);
+  scene.add(fill);
+
+  const rim=new DirectionalLight(0xffe0b0,0.8);
+  rim.position.set(0,2,-6);
+  scene.add(rim);
+
+  const spot=new SpotLight(0xfff0d0,1.5,20,Math.PI/6,0.5,1);
+  spot.position.set(0,10,0);
+  spot.castShadow=true;
+  scene.add(spot);
+
+  const p1=new PointLight(0xff9060,0.3,10);
+  p1.position.set(-3,2,3);
+  scene.add(p1);
+
+  const p2=new PointLight(0x6090ff,0.2,10);
+  p2.position.set(3,1,-3);
+  scene.add(p2);
+}
+
+function metalMat(color,roughness=0.15,metalness=0.95){
+  return new MeshPhysicalMaterial({
+    color,roughness,metalness,
+    clearcoat:0.3,clearcoatRoughness:0.1,
+    reflectivity:1,envMapIntensity:1.5
+  });
+}
+
+function goldMat(){return metalMat(0xc8a050,0.12,0.98)}
+function steelMat(){return metalMat(0x8899aa,0.18,0.95)}
+function darkSteelMat(){return metalMat(0x3a4050,0.25,0.9)}
+function rubyMat(){
+  return new MeshPhysicalMaterial({
+    color:0xcc2244,roughness:0.05,metalness:0.1,
+    transmission:0.6,thickness:0.5,ior:1.77,
+    clearcoat:1,clearcoatRoughness:0.02,
+    emissive:0x440010,emissiveIntensity:0.2
+  });
+}
+function sapphireMat(){
+  return new MeshPhysicalMaterial({
+    color:0xe8e8f0,roughness:0.0,metalness:0.0,
+    transmission:0.95,thickness:0.3,ior:1.77,
+    clearcoat:1,clearcoatRoughness:0.0
+  });
+}
+function glowMat(color){
+  return new MeshStandardMaterial({
+    color,emissive:color,emissiveIntensity:0.8,
+    roughness:0.4,metalness:0.1
+  });
+}
+
+function registerPart(mesh,name,material,func,category){
+  const info={name,material,func,category};
+  partMap.set(mesh.uuid,info);
+  mesh.userData.partInfo=info;
+  interactiveParts.push(mesh);
+  return mesh;
+}
+
+function createWatch(){
+  watchGroup=new Group();
+  scene.add(watchGroup);
+
+  createCase();
+  createDial();
+  createMovement();
+  createHands();
+  createCrown();
+}
+
+function createCase(){
+  const caseGroup=new Group();
+  caseGroup.userData.isCase=true;
+
+  const caseBody=new Mesh(
+    new CylinderGeometry(2.0,2.0,0.65,64),
+    goldMat()
+  );
+  caseBody.castShadow=true;
+  caseBody.receiveShadow=true;
+  registerPart(caseBody,'Case Middle','18K Rose Gold','Houses the movement and provides structural integrity','case');
+  caseGroup.add(caseBody);
+
+  const bezel=new Mesh(
+    new TorusGeometry(2.0,0.12,16,64),
+    goldMat()
+  );
+  bezel.position.y=0.35;
+  registerPart(bezel,'Bezel','18K Rose Gold, Polished','Secures the crystal and frames the dial','case');
+  caseGroup.add(bezel);
+
+  const bezelInner=new Mesh(
+    new TorusGeometry(1.9,0.06,12,64),
+    metalMat(0xb08840,0.08,0.98)
+  );
+  bezelInner.position.y=0.38;
+  caseGroup.add(bezelInner);
+
+  const caseback=new Mesh(
+    new CylinderGeometry(1.95,1.95,0.08,64),
+    metalMat(0xb09050,0.2,0.95)
+  );
+  caseback.position.y=-0.35;
+  caseback.receiveShadow=true;
+  registerPart(caseback,'Case Back','Sapphire Crystal, Rose Gold Frame','Exhibition case back revealing the movement','case');
+  caseGroup.add(caseback);
+
+  const lugGeom=new BoxGeometry(0.35,0.5,0.8);
+  const lugPositions=[
+    {x:1.7,z:0.9,r:0.2},{x:-1.7,z:0.9,r:-0.2},
+    {x:1.7,z:-0.9,r:-0.2},{x:-1.7,z:-0.9,r:0.2}
+  ];
+  lugPositions.forEach(p=>{
+    const lug=new Mesh(lugGeom,goldMat());
+    lug.position.set(p.x,0,p.z);
+    lug.rotation.y=p.r;
+    lug.castShadow=true;
+    registerPart(lug,'Lug','18K Rose Gold','Connects the case to the strap','case');
+    caseGroup.add(lug);
+  });
+
+  const crystal=new Mesh(
+    new CylinderGeometry(1.85,1.85,0.06,64),
+    sapphireMat()
+  );
+  crystal.position.y=0.42;
+  registerPart(caseGroup,'Sapphire Crystal','Sapphire Glass, AR Coated','Anti-reflective coated crystal for clear view of dial','case');
+  caseGroup.add(crystal);
+
+  watchGroup.add(caseGroup);
+}
+
+function createDial(){
+  const dialGroup=new Group();
+  dialGroup.position.y=0.2;
+
+  const hourMarkers=[];
+  for(let i=0;i<12;i++){
+    const angle=(i/12)*Math.PI*2;
+    const isMain=i%3===0;
+    const len=isMain?0.3:0.18;
+    const w=isMain?0.06:0.035;
+    const marker=new Mesh(
+      new BoxGeometry(w,0.02,len),
+      glowMat(0xc8b88a)
+    );
+    marker.position.set(Math.sin(angle)*1.55,0,Math.cos(angle)*1.55);
+    marker.rotation.y=-angle;
+    marker.castShadow=true;
+    registerPart(marker,`Hour Marker ${i===0?12:i}`,'Luminous Gold','Indicates the hour position','dial');
+    dialGroup.add(marker);
+    glowMeshes.push(marker);
+
+    if(!isMain){
+      for(let j=1;j<5;j++){
+        const subAngle=angle+(j/5)*((Math.PI*2)/12);
+        const tick=new Mesh(
+          new BoxGeometry(0.015,0.01,0.06),
+          metalMat(0xa09070,0.3,0.8)
+        );
+        tick.position.set(Math.sin(subAngle)*1.6,0,Math.cos(subAngle)*1.6);
+        tick.rotation.y=-subAngle;
+        dialGroup.add(tick);
+      }
+    }
+  }
+
+  const minuteTrack=new Mesh(
+    new TorusGeometry(1.65,0.01,8,120),
+    metalMat(0x998866,0.3,0.7)
+  );
+  minuteTrack.position.y=0.01;
+  minuteTrack.rotation.x=Math.PI/2;
+  dialGroup.add(minuteTrack);
+
+  const innerTrack=new Mesh(
+    new TorusGeometry(1.2,0.008,8,100),
+    metalMat(0x887755,0.4,0.6)
+  );
+  innerTrack.position.y=0.01;
+  innerTrack.rotation.x=Math.PI/2;
+  dialGroup.add(innerTrack);
+
+  watchGroup.add(dialGroup);
+}
+
+function createMovement(){
+  movementGroup=new Group();
+  movementGroup.position.y=-0.05;
+
+  createMainplate();
+  createBarrelBridge();
+  createGearTrain();
+  createEscapement();
+  createBalanceWheel();
+  createBridges();
+  createRubyBearings();
+
+  watchGroup.add(movementGroup);
+}
+
+function createMainplate(){
+  const plate=new Mesh(
+    new CylinderGeometry(1.75,1.75,0.08,64),
+    darkSteelMat()
+  );
+  plate.receiveShadow=true;
+  registerPart(plate,'Main Plate','German Silver (Maillechort)','Foundation plate supporting all movement components','movement');
+  movementGroup.add(plate);
+
+  for(let i=0;i<8;i++){
+    const a=(i/8)*Math.PI*2;
+    const cutout=new Mesh(
+      new CylinderGeometry(0.15+Math.random()*0.1,0.15+Math.random()*0.1,0.12,6),
+      darkSteelMat()
+    );
+    cutout.position.set(Math.sin(a)*1.2,0,Math.cos(a)*1.2);
+    movementGroup.add(cutout);
+  }
+}
+
+function createBarrelBridge(){
+  const barrelGroup=new Group();
+
+  const barrelDrum=new Mesh(
+    new CylinderGeometry(0.5,0.5,0.2,32),
+    steelMat()
+  );
+  barrelDrum.position.set(-0.9,0.15,0);
+  registerPart(barrelDrum,'Mainspring Barrel','Polished Steel','Stores potential energy from winding via coiled mainspring','movement');
+  barrelGroup.add(barrelDrum);
+
+  const barrelArbor=new Mesh(
+    new CylinderGeometry(0.06,0.06,0.35,16),
+    metalMat(0x667788,0.1,0.95)
+  );
+  barrelArbor.position.set(-0.9,0.2,0);
+  barrelGroup.add(barrelArbor);
+
+  const barrelTop=new Mesh(
+    new CylinderGeometry(0.48,0.48,0.03,32),
+    metalMat(0x778899,0.15,0.9)
+  );
+  barrelTop.position.set(-0.9,0.28,0);
+  registerPart(barrelTop,'Barrel Bridge','German Silver, Beveled','Secures the mainspring barrel to the mainplate','movement');
+  barrelGroup.add(barrelTop);
+
+  for(let i=0;i<30;i++){
+    const r=0.15+Math.random()*0.3;
+    const a=Math.random()*Math.PI*2;
+    const coil=new Mesh(
+      new TorusGeometry(r,0.008,4,20),
+      metalMat(0x556677,0.3,0.85)
+    );
+    coil.position.set(-0.9,0.12+i*0.003,0);
+    coil.rotation.x=Math.PI/2;
+    barrelGroup.add(coil);
+  }
+
+  movementGroup.add(barrelGroup);
+}
+
+function createGearTrain(){
+  const gears=[
+    {name:'Center Wheel',r:0.35,x:0,z:0,teeth:36,h:0.12,speed:1,material:'Blued Steel'},
+    {name:'Third Wheel',r:0.25,x:0.55,z:0.4,teeth:28,h:0.1,speed:2.5,material:'Blued Steel'},
+    {name:'Fourth Wheel',r:0.18,x:0.75,z:-0.25,teeth:24,h:0.08,speed:8,material:'Blued Steel'},
+    {name:'Escape Wheel',r:0.2,x:0.4,z:-0.65,teeth:20,h:0.06,speed:16,material:'Hardened Steel'}
+  ];
+
+  gears.forEach(g=>{
+    const group=new Group();
+    group.position.set(g.x,0.18,g.z);
+
+    const wheel=new Mesh(
+      new CylinderGeometry(g.r,g.r,g.h,32),
+      steelMat()
+    );
+    wheel.castShadow=true;
+    registerPart(wheel,g.name,g.material,
+      g.name==='Center Wheel'?'Driven by barrel, carries minute hand':
+      g.name==='Third Wheel'?'Intermediate wheel transferring energy':
+      g.name==='Fourth Wheel'?'Drives seconds hand, connects to escapement':
+      'Part of the Swiss lever escapement mechanism','movement');
+    group.add(wheel);
+
+    for(let i=0;i<g.teeth;i++){
+      const a=(i/g.teeth)*Math.PI*2;
+      const tooth=new Mesh(
+        new BoxGeometry(0.015,g.h+0.01,0.04),
+        steelMat()
+      );
+      tooth.position.set(Math.sin(a)*(g.r+0.02),0,Math.cos(a)*(g.r+0.02));
+      tooth.rotation.y=-a;
+      group.add(tooth);
+    }
+
+    const hub=new Mesh(
+      new CylinderGeometry(0.04,0.04,g.h+0.05,12),
+      metalMat(0x99aabb,0.1,0.95)
+    );
+    group.add(hub);
+
+    const pinion=new Mesh(
+      new CylinderGeometry(0.06,0.06,0.08,8),
+      metalMat(0x778899,0.15,0.9)
+    );
+    pinion.position.y=0.05;
+    group.add(pinion);
+
+    group.userData.gearSpeed=g.speed;
+    group.userData.gearName=g.name;
+    movementGroup.add(group);
+  });
+}
+
+function createEscapement(){
+  const escGroup=new Group();
+  escGroup.position.set(0.4,0.25,-0.65);
+
+  const palletFork=new Group();
+
+  const forkBody=new Mesh(
+    new BoxGeometry(0.04,0.06,0.4),
+    steelMat()
+  );
+  registerPart(forkBody,'Pallet Fork','Hardened Steel','Transfers impulse from escape wheel to balance wheel via entry and exit pallets','movement');
+  palletFork.add(forkBody);
+
+  const entryPallet=new Mesh(
+    new BoxGeometry(0.08,0.05,0.04),
+    rubyMat()
+  );
+  entryPallet.position.set(0,0,0.18);
+  palletFork.add(entryPallet);
+
+  const exitPallet=new Mesh(
+    new BoxGeometry(0.08,0.05,0.04),
+    rubyMat()
+  );
+  exitPallet.position.set(0,0,-0.18);
+  palletFork.add(exitPallet);
+
+  const guardPin=new Mesh(
+    new CylinderGeometry(0.01,0.01,0.08,8),
+    steelMat()
+  );
+  guardPin.position.set(0,0.04,0);
+  palletFork.add(guardPin);
+
+  const palletPivot=new Mesh(
+    new CylinderGeometry(0.015,0.015,0.15,8),
+    metalMat(0x8899aa,0.1,0.95)
+  );
+  palletFork.add(palletPivot);
+
+  palletFork.userData.isPallet=true;
+  escGroup.add(palletFork);
+  movementGroup.add(escGroup);
+}
+
+function createBalanceWheel(){
+  const balanceGroup=new Group();
+  balanceGroup.position.set(0.4,0.35,-0.65);
+
+  const rim=new Mesh(
+    new TorusGeometry(0.35,0.025,12,48),
+    metalMat(0xccbb88,0.1,0.97)
+  );
+  rim.rotation.x=Math.PI/2;
+  registerPart(rim,'Balance Rim','Glucydur Alloy','Oscillating rim governing timekeeping precision','movement');
+  balanceGroup.add(rim);
+
+  const spokeCount=3;
+  for(let i=0;i<spokeCount;i++){
+    const a=(i/spokeCount)*Math.PI*2;
+    const spoke=new Mesh(
+      new BoxGeometry(0.02,0.02,0.34),
+      metalMat(0xbbaa77,0.12,0.96)
+    );
+    spoke.position.set(Math.sin(a)*0.17,0,Math.cos(a)*0.17);
+    spoke.rotation.y=-a;
+    balanceGroup.add(spoke);
+  }
+
+  const hub=new Mesh(
+    new CylinderGeometry(0.05,0.05,0.06,16),
+    metalMat(0xccbb88,0.1,0.97)
+  );
+  balanceGroup.add(hub);
+
+  for(let i=0;i<4;i++){
+    const a=(i/4)*Math.PI*2+Math.PI/4;
+    const screw=new Mesh(
+      new CylinderGeometry(0.018,0.018,0.025,8),
+      metalMat(0xddcc99,0.05,0.98)
+    );
+    screw.position.set(Math.sin(a)*0.3,0,Math.cos(a)*0.3);
+    balanceGroup.add(screw);
+  }
+
+  hairspringGroup=new Group();
+  const spiralTurns=8;
+  const spiralPoints=[];
+  for(let i=0;i<=spiralTurns*60;i++){
+    const t=i/(spiralTurns*60);
+    const angle=t*spiralTurns*Math.PI*2;
+    const r=0.04+t*0.25;
+    spiralPoints.push(new Vector3(Math.cos(angle)*r,0,Math.sin(angle)*r));
+  }
+
+  for(let i=0;i<spiralPoints.length-1;i++){
+    const geo=new CylinderGeometry(0.003,0.003,spiralPoints[i].distanceTo(spiralPoints[i+1]),4);
+    const seg=new Mesh(geo,metalMat(0x88aacc,0.2,0.85));
+    const mid=new Vector3().addVectors(spiralPoints[i],spiralPoints[i+1]).multiplyScalar(0.5);
+    seg.position.copy(mid);
+    seg.lookAt(spiralPoints[i+1]);
+    seg.rotateX(Math.PI/2);
+    hairspringGroup.add(seg);
+  }
+  registerPart(hairspringGroup.children[0]||hairspringGroup,'Hairspring (Spiral)','Nivarox Alloy','Ultra-thin spring that oscillates to regulate the balance wheel frequency','movement');
+  balanceGroup.add(hairspringGroup);
+
+  const collet=new Mesh(
+    new CylinderGeometry(0.035,0.035,0.03,12),
+    metalMat(0xccbb88,0.1,0.97)
+  );
+  collet.position.y=0.02;
+  balanceGroup.add(collet);
+
+  balanceGroup.userData.isBalance=true;
+  movementGroup.add(balanceGroup);
+}
+
+function createBridges(){
+  const bridgeData=[
+    {name:'Balance Cock',x:0.4,z:-0.65,w:0.6,d:0.5,h:0.06,rot:0.3},
+    {name:'Gear Train Bridge',x:0.55,z:0.1,w:1.0,d:0.5,h:0.05,rot:0.1},
+    {name:'Barrel Bridge',x:-0.9,z:0,w:0.7,d:0.6,h:0.05,rot:-0.2}
+  ];
+
+  bridgeData.forEach(b=>{
+    const bridge=new Mesh(
+      new BoxGeometry(b.w,b.h,b.d),
+      metalMat(0x8a9aaa,0.2,0.88)
+    );
+    bridge.position.set(b.x,0.28,b.z);
+    bridge.rotation.y=b.rot;
+    bridge.castShadow=true;
+    registerPart(bridge,b.name,'German Silver, Hand-Finished','Secures movement components and provides structural support','movement');
+    movementGroup.add(bridge);
+
+    const bevel=0.01;
+    const edge=new Mesh(
+      new BoxGeometry(b.w+bevel*2,b.h*0.3,b.d+bevel*2),
+      metalMat(0x9aaaba,0.15,0.9)
+    );
+    edge.position.set(b.x,0.28+b.h*0.35,b.z);
+    edge.rotation.y=b.rot;
+    movementGroup.add(edge);
+
+    for(let i=0;i<3;i++){
+      const sx=b.x+(Math.random()-0.5)*b.w*0.6;
+      const sz=b.z+(Math.random()-0.5)*b.d*0.6;
+      const screw=new Mesh(
+        new CylinderGeometry(0.025,0.025,0.04,12),
+        metalMat(0x6677cc,0.05,0.95)
+      );
+      screw.position.set(sx,0.32,sz);
+      movementGroup.add(screw);
+
+      const slot=new Mesh(
+        new BoxGeometry(0.04,0.005,0.008),
+        metalMat(0x4455aa,0.1,0.9)
+      );
+      slot.position.set(sx,0.34,sz);
+      movementGroup.add(slot);
+    }
+  });
+}
+
+function createRubyBearings(){
+  const rubyPositions=[
+    {x:0,y:0.1,z:0,label:'Center Wheel Jewel'},
+    {x:0.55,y:0.1,z:0.4,label:'Third Wheel Jewel'},
+    {x:0.75,y:0.1,z:-0.25,label:'Fourth Wheel Jewel'},
+    {x:0.4,y:0.1,z:-0.65,label:'Escape Wheel Jewel'},
+    {x:0.4,y:0.28,z:-0.65,label:'Balance Jewel (Upper)'},
+    {x:0.4,y:0.08,z:-0.65,label:'Balance Jewel (Lower)'},
+    {x:-0.9,y:0.1,z:0,label:'Barrel Jewel'}
+  ];
+
+  rubyPositions.forEach(r=>{
+    const setting=new Mesh(
+      new CylinderGeometry(0.055,0.055,0.025,16),
+      goldMat()
+    );
+    setting.position.set(r.x,r.y,r.z);
+    movementGroup.add(setting);
+
+    const jewel=new Mesh(
+      new CylinderGeometry(0.035,0.035,0.02,16),
+      rubyMat()
+    );
+    jewel.position.set(r.x,r.y+0.01,r.z);
+    registerPart(jewel,r.label,'Synthetic Ruby','Reduces friction at pivot point, provides shock absorption','movement');
+    movementGroup.add(jewel);
+
+    const glow=new Mesh(
+      new CylinderGeometry(0.06,0.06,0.005,16),
+      new MeshStandardMaterial({color:0xff2244,emissive:0xff0033,emissiveIntensity:0.3,transparent:true,opacity:0.4})
+    );
+    glow.position.set(r.x,r.y+0.015,r.z);
+    glowMeshes.push(glow);
+    movementGroup.add(glow);
+  });
+}
+
+function createHands(){
+  handsGroup=new Group();
+  handsGroup.position.y=0.25;
+
+  const hourHand=new Group();
+  const hGeo=new Shape();
+  hGeo.moveTo(0,-0.04);
+  hGeo.lineTo(0.7,0);
+  hGeo.lineTo(0,-0.04);
+  hGeo.lineTo(0.65,0);
+  hGeo.lineTo(0,0.04);
+  hGeo.lineTo(-0.05,0);
+
+  const hourShape=new Shape();
+  hourShape.moveTo(-0.05,0);
+  hourShape.lineTo(0,-0.045);
+  hourShape.lineTo(0.68,-0.012);
+  hourShape.lineTo(0.7,0);
+  hourShape.lineTo(0.68,0.012);
+  hourShape.lineTo(0,0.045);
+  hourShape.lineTo(-0.05,0);
+
+  const hMesh=new Mesh(
+    new ExtrudeGeometry(hourShape,{depth:0.025,bevelEnabled:true,bevelSize:0.005,bevelThickness:0.005,bevelSegments:2}),
+    glowMat(0xd4c090)
+  );
+  hMesh.rotation.x=-Math.PI/2;
+  hMesh.position.y=0.05;
+  registerPart(hMesh,'Hour Hand','18K Gold, Luminous','Points to current hour with SuperLuminova coating','hands');
+  hourHand.add(hMesh);
+  glowMeshes.push(hMesh);
+
+  const minuteShape=new Shape();
+  minuteShape.moveTo(-0.04,0);
+  minuteShape.lineTo(0,-0.035);
+  minuteShape.lineTo(0.95,-0.008);
+  minuteShape.lineTo(0.97,0);
+  minuteShape.lineTo(0.95,0.008);
+  minuteShape.lineTo(0,0.035);
+  minuteShape.lineTo(-0.04,0);
+
+  const minMesh=new Mesh(
+    new ExtrudeGeometry(minuteShape,{depth:0.02,bevelEnabled:true,bevelSize:0.004,bevelThickness:0.004,bevelSegments:2}),
+    glowMat(0xd4c090)
+  );
+  minMesh.rotation.x=-Math.PI/2;
+  minMesh.position.y=0.08;
+  registerPart(minMesh,'Minute Hand','18K Gold, Luminous','Points to current minute with fine finishing','hands');
+  handsGroup.add(minMesh);
+  glowMeshes.push(minMesh);
+  handsGroup.add(hourHand);
+
+  const secShape=new Shape();
+  secShape.moveTo(-0.02,0);
+  secShape.lineTo(0,-0.015);
+  secShape.lineTo(1.1,-0.003);
+  secShape.lineTo(1.15,0);
+  secShape.lineTo(1.1,0.003);
+  secShape.lineTo(0,0.015);
+  secShape.lineTo(-0.02,0);
+
+  const secMesh=new Mesh(
+    new ExtrudeGeometry(secShape,{depth:0.012,bevelEnabled:false}),
+    glowMat(0xe04040)
+  );
+  secMesh.rotation.x=-Math.PI/2;
+  secMesh.position.y=0.11;
+  registerPart(secMesh,'Second Hand','Blued Steel, Red Tip','Sweeping seconds hand with counterweight','hands');
+  handsGroup.add(secMesh);
+
+  const centerCap=new Mesh(
+    new CylinderGeometry(0.06,0.06,0.05,16),
+    goldMat()
+  );
+  centerCap.position.y=0.07;
+  handsGroup.add(centerCap);
+
+  hourHand.userData.isHourHand=true;
+  handsGroup.add(hourHand);
+
+  watchGroup.add(handsGroup);
+}
+
+function createCrown(){
+  const crownGroup=new Group();
+  crownGroup.position.set(2.2,0,0);
+
+  const crown=new Mesh(
+    new CylinderGeometry(0.12,0.14,0.25,24),
+    goldMat()
+  );
+  crown.rotation.z=Math.PI/2;
+  registerPart(crown,'Crown','18K Rose Gold','Winds the mainspring and sets the time','case');
+  crownGroup.add(crown);
+
+  for(let i=0;i<20;i++){
+    const a=(i/20)*Math.PI*2;
+    const grip=new Mesh(
+      new BoxGeometry(0.01,0.26,0.015),
+      metalMat(0xb08840,0.15,0.98)
+    );
+    grip.position.set(0,Math.sin(a)*0.13,Math.cos(a)*0.13);
+    grip.rotation.x=a;
+    crownGroup.add(grip);
+  }
+
+  const crownCap=new Mesh(
+    new CylinderGeometry(0.06,0.06,0.04,16),
+    metalMat(0xc09050,0.1,0.98)
+  );
+  crownCap.rotation.z=Math.PI/2;
+  crownCap.position.x=0.14;
+  crownGroup.add(crownCap);
+
+  watchGroup.add(crownGroup);
+}
+
+function createEnvironment(){
+  const floor=new Mesh(
+    new PlaneGeometry(30,30),
+    new MeshStandardMaterial({
+      color:0x080808,roughness:0.4,metalness:0.6,
+      envMapIntensity:0.5
+    })
+  );
+  floor.rotation.x=-Math.PI/2;
+  floor.position.y=-1.2;
+  floor.receiveShadow=true;
+  scene.add(floor);
+
+  const gridHelper=new Mesh(
+    new PlaneGeometry(20,20),
+    new MeshStandardMaterial({
+      color:0x111111,roughness:0.8,metalness:0.2,
+      transparent:true,opacity:0.3
+    })
+  );
+  gridHelper.rotation.x=-Math.PI/2;
+  gridHelper.position.y=-1.19;
+  scene.add(gridHelper);
+
+  const ringGeo=new TorusGeometry(4,0.005,8,128);
+  for(let i=0;i<3;i++){
+    const ring=new Mesh(ringGeo,new MeshStandardMaterial({color:0xc8b88a,transparent:true,opacity:0.03+i*0.01,emissive:0xc8b88a,emissiveIntensity:0.1}));
+    ring.rotation.x=Math.PI/2;
+    ring.position.y=-1.18;
+    ring.scale.setScalar(1+i*0.5);
+    scene.add(ring);
+  }
+}
+
+function onMouseMove(e){
+  mouse.x=(e.clientX/innerWidth)*2-1;
+  mouse.y=-(e.clientY/innerHeight)*2+1;
+
+  const label=document.getElementById('part-label');
+  raycaster.setFromCamera(mouse,camera);
+  const intersects=raycaster.intersectObjects(interactiveParts,true);
+
+  if(intersects.length>0){
+    const hit=intersects[0].object;
+    let info=hit.userData.partInfo;
+    if(!info){
+      for(const child of interactiveParts){
+        if(child.children&&child.children.includes(hit)){
+          info=child.userData.partInfo;
+          break;
+        }
+      }
+    }
+    if(info){
+      label.textContent=info.name;
+      label.style.left=e.clientX+20+'px';
+      label.style.top=e.clientY-15+'px';
+      label.style.opacity='1';
+      document.body.style.cursor='pointer';
+
+      if(hoveredPart!==hit){
+        resetHighlight();
+        hoveredPart=hit;
+        highlightPart(hit,true);
+      }
+    }else{
+      clearHover();
+    }
+  }else{
+    clearHover();
+  }
+}
+
+function clearHover(){
+  const label=document.getElementById('part-label');
+  label.style.opacity='0';
+  document.body.style.cursor='default';
+  if(hoveredPart){
+    resetHighlight();
+    hoveredPart=null;
+  }
+}
+
+function highlightPart(mesh,hover){
+  if(mesh.material){
+    mesh.userData.origEmissive=mesh.material.emissive?mesh.material.emissive.clone():null;
+    mesh.userData.origEmissiveIntensity=mesh.material.emissiveIntensity;
+    if(hover){
+      mesh.material.emissive=new Color(0xc8b88a);
+      mesh.material.emissiveIntensity=0.3;
+    }
+  }
+}
+
+function resetHighlight(){
+  if(hoveredPart&&hoveredPart.material){
+    if(hoveredPart.userData.origEmissive){
+      hoveredPart.material.emissive.copy(hoveredPart.userData.origEmissive);
+      hoveredPart.material.emissiveIntensity=hoveredPart.userData.origEmissiveIntensity||0;
+    }
+  }
+}
+
+function onClick(e){
+  raycaster.setFromCamera(mouse,camera);
+  const intersects=raycaster.intersectObjects(interactiveParts,true);
+  const panel=document.getElementById('info-panel');
+  const partDetail=document.getElementById('part-detail');
+
+  if(intersects.length>0){
+    const hit=intersects[0].object;
+    let info=hit.userData.partInfo;
+    if(!info){
+      for(const child of interactiveParts){
+        if(child.children&&child.children.includes(hit)){
+          info=child.userData.partInfo;break;
+        }
+      }
+    }
+    if(info){
+      selectedPart=hit;
+      document.getElementById('pd-name').textContent=info.name;
+      document.getElementById('pd-material').textContent=info.material;
+      document.getElementById('pd-function').textContent=info.func;
+      partDetail.style.display='block';
+      panel.classList.add('visible');
+    }
+  }
+}
+
+function toggleAutoRotate(){
+  autoRotate=!autoRotate;
+  document.getElementById('btn-rotate').classList.toggle('active',autoRotate);
+}
+document.getElementById('btn-rotate').classList.add('active');
+
+function toggleExplode(){
+  exploded=!exploded;
+  targetExplode=exploded?1:0;
+  document.getElementById('btn-explode').classList.toggle('active',exploded);
+}
+
+function toggleXray(){
+  xrayMode=!xrayMode;
+  document.getElementById('btn-xray').classList.toggle('active',xrayMode);
+
+  watchGroup.traverse(child=>{
+    if(child.isMesh&&child.material){
+      if(child.material.transmission!==undefined){
+        if(xrayMode){
+          child.userData.origOpacity=child.material.opacity;
+          child.userData.origTransmission=child.material.transmission;
+          child.material.transparent=true;
+          child.material.opacity=0.15;
+          child.material.needsUpdate=true;
+        }else if(child.userData.origOpacity!==undefined){
+          child.material.opacity=child.userData.origOpacity;
+          child.material.transmission=child.userData.origTransmission;
+          child.material.needsUpdate=true;
+        }
+      }
+    }
+  });
+}
+
+function toggleLume(){
+  lumeMode=!lumeMode;
+  document.getElementById('btn-lume').classList.toggle('active',lumeMode);
+
+  glowMeshes.forEach(m=>{
+    if(m.material&&m.material.emissive){
+      m.material.emissiveIntensity=lumeMode?2.5:0.8;
+    }
+  });
+
+  if(lumeMode){
+    scene.background=new Color(0x020204);
+  }else{
+    scene.background=new Color(0x0a0a0a);
+  }
+}
+
+function animate(){
+  requestAnimationFrame(animate);
+  const dt=clock.getDelta();
+  const t=clock.getElapsedTime();
+
+  if(autoRotate){
+    watchGroup.rotation.y+=dt*0.15;
+  }
+
+  watchGroup.rotation.x=Math.sin(t*0.3)*0.05+0.3;
+
+  const breathe=Math.sin(t*1.5)*0.002;
+  watchGroup.position.y=breathe;
+
+  secondAngle+=dt*Math.PI*2/60;
+  minuteAngle+=dt*Math.PI*2/3600;
+  hourAngle+=dt*Math.PI*2/43200;
+
+  handsGroup.children.forEach(child=>{
+    if(child.userData.isHourHand){
+      child.rotation.y=hourAngle;
+    }
+  });
+  const minHand=handsGroup.children.find(c=>!c.userData.isHourHand&&c.geometry);
+  const secHand=handsGroup.children[handsGroup.children.length-2];
+
+  if(handsGroup.children.length>=2){
+    handsGroup.children[0].rotation.y=hourAngle;
+  }
+
+  balanceSpeed=Math.sin(t*4)*3;
+  balanceAngle=Math.sin(t*8)*0.8;
+
+  movementGroup.children.forEach(child=>{
+    if(child.userData.isBalance){
+      child.rotation.y=balanceAngle;
+      if(hairspringGroup){
+        hairspringGroup.scale.setScalar(1+Math.sin(t*8)*0.03);
+      }
+    }
+    if(child.userData.isPallet){
+      child.rotation.y=Math.sin(t*8)*0.3;
+    }
+    if(child.userData.gearSpeed){
+      child.rotation.y+=dt*child.userData.gearSpeed*0.3;
+    }
+  });
+
+  explodeProgress+=(targetExplode-explodeProgress)*dt*3;
+
+  if(explodeProgress>0.01){
+    const layers=[
+      {parts:'case',offset:new Vector3(0,explodeProgress*1.5,0)},
+    ];
+
+    watchGroup.children.forEach(child=>{
+      if(child.userData.isCase){
+        child.position.y=explodeProgress*1.2;
+        child.children.forEach(c=>{
+          if(c.position.y>0.3)c.position.y=c.userData.origY!==undefined?c.userData.origY+explodeProgress*0.8:0.42+explodeProgress*0.8;
+        });
+      }
+    });
+
+    movementGroup.children.forEach((child,i)=>{
+      if(!child.userData.origPos){
+        child.userData.origPos=child.position.clone();
+      }
+      const dir=child.userData.origPos.clone().normalize();
+      const verticalOffset=new Vector3(0,explodeProgress*0.3*(i%2===0?1:-1),0);
+      child.position.copy(child.userData.origPos).add(dir.multiplyScalar(explodeProgress*0.8)).add(verticalOffset);
+    });
+
+    handsGroup.position.y=0.25+explodeProgress*2.0;
+  }else{
+    movementGroup.children.forEach(child=>{
+      if(child.userData.origPos){
+        child.position.copy(child.userData.origPos);
+      }
+    });
+    handsGroup.position.y=0.25;
+  }
+
+  renderer.render(scene,camera);
+}
+
+function onResize(){
+  camera.aspect=innerWidth/innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(innerWidth,innerHeight);
+}
+
+let isDragging=false;
+let prevMouse={x:0,y:0};
+let rotY=0,rotX=0.3;
+
+renderer.domElement.addEventListener('pointerdown',e=>{
+  isDragging=true;
+  prevMouse={x:e.clientX,y:e.clientY};
+  renderer.domElement.setPointerCapture(e.pointerId);
+});
+renderer.domElement.addEventListener('pointermove',e=>{
+  if(!isDragging)return;
+  const dx=e.clientX-prevMouse.x;
+  const dy=e.clientY-prevMouse.y;
+  rotY+=dx*0.005;
+  rotX+=dy*0.005;
+  rotX=Math.max(-1,Math.min(1,rotX));
+  watchGroup.rotation.y=rotY;
+  watchGroup.rotation.x=rotX;
+  prevMouse={x:e.clientX,y:e.clientY};
+  autoRotate=false;
+  document.getElementById('btn-rotate').classList.remove('active');
+});
+renderer.domElement.addEventListener('pointerup',()=>{
+  isDragging=false;
+});
+renderer.domElement.addEventListener('wheel',e=>{
+  camera.position.z+=e.deltaY*0.005;
+  camera.position.z=Math.max(4,Math.min(15,camera.position.z));
+},{passive:true});
+
+document.getElementById('info-panel').classList.add('visible');
+</script>
+</body>
+</html>
diff --git a/outputs/mimo-v2-5-pro-ultraspeed/skeleton-watch.html b/outputs/mimo-v2-5-pro-ultraspeed/skeleton-watch.html
new file mode 100644
index 0000000..00b7a61
--- /dev/null
+++ b/outputs/mimo-v2-5-pro-ultraspeed/skeleton-watch.html
@@ -0,0 +1,456 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Calibre · Skeleton Haute Horlogerie</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{background:#060606;overflow:hidden;font-family:'Cormorant Garamond',Georgia,serif;color:#c4b590;-webkit-font-smoothing:antialiased}
+canvas{display:block}
+.hdr{position:fixed;top:0;left:0;right:0;padding:28px 36px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:10}
+.hdr>*{pointer-events:auto}
+.brand h1{font-size:20px;font-weight:300;letter-spacing:10px;text-transform:uppercase;color:#c4b590}
+.brand p{font-size:10px;font-family:'DM Mono',monospace;letter-spacing:4px;color:#6a6255;margin-top:3px;text-transform:uppercase}
+.specs{text-align:right;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;color:#55504a;line-height:2.1;text-transform:uppercase}
+.ctrl{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
+.btn{background:rgba(196,181,144,.05);border:1px solid rgba(196,181,144,.12);color:#9a9080;padding:9px 22px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(12px);outline:none;border-radius:0}
+.btn:hover{background:rgba(196,181,144,.12);border-color:rgba(196,181,144,.35);color:#c4b590}
+.btn.on{background:rgba(196,181,144,.14);border-color:#c4b590;color:#c4b590}
+.ip{position:fixed;top:50%;right:28px;transform:translateY(-50%) translateX(20px);width:250px;background:rgba(10,10,8,.92);border:1px solid rgba(196,181,144,.1);backdrop-filter:blur(24px);padding:26px;opacity:0;pointer-events:none;transition:all .5s cubic-bezier(.16,1,.3,1);z-index:10}
+.ip.show{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}
+.ip h2{font-size:15px;font-weight:400;letter-spacing:4px;text-transform:uppercase;color:#c4b590;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(196,181,144,.12)}
+.ip .d{font-family:'DM Mono',monospace;font-size:10px;line-height:2;color:#7a7265;letter-spacing:.5px}
+.lc{position:fixed;inset:0;pointer-events:none;z-index:5}
+.lb{position:absolute;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(196,181,144,.65);background:rgba(6,6,6,.55);padding:3px 9px;border-left:1px solid rgba(196,181,144,.35);white-space:nowrap;opacity:0;transition:opacity .3s;transform:translate(-50%,-50%)}
+.lb.v{opacity:1}
+.ld{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#060606;z-index:100;transition:opacity 1s ease}
+.ld.h{opacity:0;pointer-events:none}
+.ld span{font-size:13px;letter-spacing:8px;text-transform:uppercase;color:#5a5548;animation:p 1.5s ease-in-out infinite}
+@keyframes p{0%,100%{opacity:.3}50%{opacity:1}}
+@media(max-width:768px){.hdr{padding:16px}.specs{display:none}.ctrl{flex-wrap:wrap;justify-content:center}.ip{width:200px;padding:18px;right:10px}}
+</style>
+</head>
+<body>
+<div class="ld" id="ld"><span>Calibrating</span></div>
+<div class="hdr">
+<div class="brand"><h1>Calibre</h1><p>Skeleton Collection &mdash; Ref. 7721</p></div>
+<div class="specs"><div>41mm &middot; 18K Rose Gold</div><div>Hand-Wound &middot; 72h Power Reserve</div><div>28,800 vph &middot; 21 Jewels</div></div>
+</div>
+<div class="ctrl">
+<button class="btn" id="bE" onclick="UI.explode()">Exploded View</button>
+<button class="btn on" id="bR" onclick="UI.rotate()">Auto Rotate</button>
+<button class="btn" id="bL" onclick="UI.labels()">Labels</button>
+</div>
+<div class="ip" id="iP"><h2 id="iT">Component</h2><div class="d" id="iD"></div></div>
+<div class="lc" id="lC"></div>
+
+<script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/"}}</script>
+<script type="module">
+import*as THREE from'three';
+import{OrbitControls}from'three/addons/controls/OrbitControls.js';
+import{RoomEnvironment}from'three/addons/environments/RoomEnvironment.js';
+
+/* ═══════════════════════ RENDERER ═══════════════════════ */
+const R=new THREE.WebGLRenderer({antialias:true,powerPreference:'high-performance'});
+R.setSize(innerWidth,innerHeight);
+R.setPixelRatio(Math.min(devicePixelRatio,2));
+R.shadowMap.enabled=true;
+R.shadowMap.type=THREE.PCFSoftShadowMap;
+R.toneMapping=THREE.ACESFilmicToneMapping;
+R.toneMappingExposure=1.15;
+R.outputColorSpace=THREE.SRGBColorSpace;
+document.body.appendChild(R.domElement);
+
+const scene=new THREE.Scene();
+scene.background=new THREE.Color(0x060606);
+const cam=new THREE.PerspectiveCamera(32,innerWidth/innerHeight,.1,100);
+cam.position.set(2.5,4.5,5.5);
+const ctl=new OrbitControls(cam,R.domElement);
+ctl.enableDamping=true;ctl.dampingFactor=.06;
+ctl.minDistance=3;ctl.maxDistance=14;
+ctl.autoRotate=true;ctl.autoRotateSpeed=.6;
+ctl.target.set(0,-.1,0);
+
+/* env */
+const pmrem=new THREE.PMREMGenerator(R);
+scene.environment=pmrem.fromScene(new RoomEnvironment(),.04).texture;
+
+/* lights */
+const L1=new THREE.DirectionalLight(0xfff0d6,3.5);L1.position.set(5,8,4);L1.castShadow=true;
+L1.shadow.mapSize.set(2048,2048);L1.shadow.bias=-.0005;scene.add(L1);
+const L2=new THREE.DirectionalLight(0xd0e0ff,.7);L2.position.set(-6,3,-2);scene.add(L2);
+const L3=new THREE.DirectionalLight(0xffeedd,2);L3.position.set(0,-3,-5);scene.add(L3);
+scene.add(new THREE.PointLight(0xfff5e6,2,12,1.5).translateOnAxis(new THREE.Vector3(0,1,0),6));
+scene.add(new THREE.AmbientLight(0x1a1a2e,.35));
+
+/* ═══════════════════════ MATERIALS ═══════════════════════ */
+const M={
+  steel:c({color:0xbbbbbb,metalness:.95,roughness:.28}),
+  polish:c({color:0xcccccc,metalness:1,roughness:.08,envMapIntensity:1.3}),
+  gold:c({color:0xd4a574,metalness:1,roughness:.18}),
+  blue:c({color:0x4455bb,metalness:.92,roughness:.12}),
+  ruby:new THREE.MeshPhysicalMaterial({color:0xdd2244,roughness:.05,transmission:.55,thickness:.3,ior:1.76,clearcoat:.5}),
+  crystal:new THREE.MeshPhysicalMaterial({color:0xffffff,roughness:0,transmission:.95,thickness:.4,ior:1.77,clearcoat:1,transparent:true,opacity:.35}),
+  lume:new THREE.MeshPhysicalMaterial({color:0x88ff99,emissive:0x44cc66,emissiveIntensity:1.8,roughness:.6}),
+  plate:c({color:0x7a7a7a,metalness:.92,roughness:.35,envMapIntensity:.8}),
+  bridge:c({color:0x8e8e8e,metalness:.95,roughness:.25}),
+};
+function c(o){return new THREE.MeshPhysicalMaterial(Object.assign({envMapIntensity:1},o))}
+
+/* ═══════════════════════ GEOMETRY HELPERS ═══════════════════════ */
+function circPath(cx,cy,r,n=40){
+  const p=new THREE.Path();
+  for(let i=0;i<=n;i++){const a=i/n*Math.PI*2;const x=cx+Math.cos(a)*r,y=cy+Math.sin(a)*r;i===0?p.moveTo(x,y):p.lineTo(x,y)}
+  return p;
+}
+
+function gearShape(teeth,outerR,rootR,holeR){
+  const s=new THREE.Shape(),st=Math.PI*2/teeth;
+  for(let i=0;i<teeth;i++){
+    const a=i*st,pts=[[0,rootR],[.22,rootR],[.28,outerR],[.72,outerR],[.78,rootR],[1,rootR]];
+    pts.forEach(([t,r],j)=>{
+      const ang=a+t*st,x=Math.cos(ang)*r,y=Math.sin(ang)*r;
+      (i===0&&j===0)?s.moveTo(x,y):s.lineTo(x,y);
+    });
+  }
+  s.closePath();
+  if(holeR>0)s.holes.push(circPath(0,0,holeR));
+  return s;
+}
+
+function mkGear(teeth,oR,rR,hR,th,mat,spokes){
+  const s=gearShape(teeth,oR,rR,hR);
+  if(spokes){
+    const{count:n,radius:r,distance:d}=spokes;
+    for(let i=0;i<n;i++){const a=i/n*Math.PI*2;s.holes.push(circPath(Math.cos(a)*d,Math.sin(a)*d,r,24));}
+  }
+  const g=new THREE.ExtrudeGeometry(s,{depth:th,bevelEnabled:true,bevelThickness:.004,bevelSize:.004,bevelSegments:1});
+  g.translate(0,0,-th/2);
+  const m=new THREE.Mesh(g,mat);m.castShadow=true;m.receiveShadow=true;return m;
+}
+
+function mkEscape(teeth,oR,iR,th,hR,mat){
+  const s=new THREE.Shape(),st=Math.PI*2/teeth;
+  for(let i=0;i<teeth;i++){
+    const a=i*st;
+    const pts=[[.05,iR],[.18,oR],[.22,iR],[.55,iR*.98],[.58,iR]];
+    pts.forEach(([t,r],j)=>{
+      const ang=a+t*st,x=Math.cos(ang)*r,y=Math.sin(ang)*r;
+      (i===0&&j===0)?s.moveTo(x,y):s.lineTo(x,y);
+    });
+  }
+  s.closePath();
+  if(hR>0)s.holes.push(circPath(0,0,hR));
+  const g=new THREE.ExtrudeGeometry(s,{depth:th,bevelEnabled:false});
+  g.translate(0,0,-th/2);
+  return new THREE.Mesh(g,mat);
+}
+
+function mkHairspring(iR,oR,turns,wR,mat){
+  class SC extends THREE.Curve{getPoint(t){const a=t*turns*Math.PI*2,r=iR+(oR-iR)*t;return new THREE.Vector3(Math.cos(a)*r,Math.sin(a)*r,0)}}
+  return new THREE.Mesh(new THREE.TubeGeometry(new SC(),turns*36,wR,4,false),mat);
+}
+
+function mkScrew(r){
+  const g=new THREE.Group();
+  const h=new THREE.Mesh(new THREE.CylinderGeometry(r,r,r*.35,6).rotateX(Math.PI/2),M.blue);g.add(h);
+  const sl=new THREE.Mesh(new THREE.BoxGeometry(r*1.7,r*.04,r*.14),M.steel);sl.position.z=r*.17;g.add(sl);
+  return g;
+}
+
+/* ═══════════════════════ WATCH PARTS ═══════════════════════ */
+const watch=new THREE.Group();
+const reg={},anim={},expP=[],labParts=[];
+let exploded=false,showL=false;
+
+function regPart(mesh,name,desc,eOff){
+  mesh.userData={name,desc,oZ:mesh.position.z,eOff:eOff||0};
+  reg[mesh.uuid]=mesh;
+  if(eOff!==undefined)expP.push(mesh);
+  labParts.push(mesh);
+  return mesh;
+}
+
+/* ── case body ── */
+function buildCase(){
+  const g=new THREE.Group();
+  const pts=[new THREE.Vector2(1.7,-.48),new THREE.Vector2(2.02,-.48),new THREE.Vector2(2.07,-.38),
+    new THREE.Vector2(2.07,.34),new THREE.Vector2(2.02,.44),new THREE.Vector2(1.86,.5),new THREE.Vector2(1.74,.44),new THREE.Vector2(1.7,.34)];
+  const cm=new THREE.Mesh(new THREE.LatheGeometry(pts,64),M.gold);cm.castShadow=true;cm.receiveShadow=true;g.add(cm);
+  [[.28,1],[.72,1],[1.28,-1],[1.72,-1]].forEach(([a])=>{
+    const lg=new THREE.Mesh(new THREE.BoxGeometry(.28,.85,.28),M.gold);
+    lg.position.set(Math.cos(a*Math.PI)*2.14,Math.sin(a*Math.PI)*2.14,0);lg.rotation.z=a*Math.PI+Math.PI/2;lg.castShadow=true;g.add(lg);
+  });
+  const cw=new THREE.Mesh(new THREE.CylinderGeometry(.14,.16,.38,16).rotateZ(Math.PI/2),M.gold);cw.position.set(2.24,0,0);cw.castShadow=true;g.add(cw);
+  regPart(g,'表壳','18K 玫金表壳，41mm，抛光与拉丝双工艺处理，50米防水。',-2.8);
+  return g;
+}
+
+/* ── crystal ── */
+function buildCrystal(){
+  const m=new THREE.Mesh(new THREE.SphereGeometry(1.78,64,32,0,Math.PI*2,0,Math.PI*.24),M.crystal);
+  m.position.z=.46;m.renderOrder=999;
+  regPart(m,'蓝宝石表镜','双面防反射涂层蓝宝石水晶，莫氏硬度9，透光率>99%。',1.8);
+  return m;
+}
+
+/* ── caseback ── */
+function buildBack(){
+  const g=new THREE.Group();
+  const b=new THREE.Mesh(new THREE.CylinderGeometry(1.74,1.74,.06,64).rotateX(Math.PI/2),M.crystal);b.position.z=-.5;b.renderOrder=998;g.add(b);
+  g.add(new THREE.Mesh(new THREE.TorusGeometry(1.84,.055,8,64),M.gold).translateZ(-.5));
+  regPart(g,'透底表背','蓝宝石透底，完整展现机芯运转与手工修饰。',-1.8);
+  return g;
+}
+
+/* ── main plate ── */
+function buildPlate(){
+  const s=new THREE.Shape();s.absarc(0,0,1.65,0,Math.PI*2,false);
+  [[0,0,.34],[-.5,.5,.28],[.5,.45,.24],[-.5,-.45,.28],[.5,-.5,.24],[0,.8,.18],[0,-.8,.18],[.8,0,.18],[-.8,0,.18],[-.3,-.7,.14],[.3,.7,.14]].forEach(([x,y,r])=>s.holes.push(circPath(x,y,r,28)));
+  const g=new THREE.ExtrudeGeometry(s,{depth:.07,bevelEnabled:true,bevelThickness:.004,bevelSize:.004,bevelSegments:1});g.translate(0,0,-.035);
+  const m=new THREE.Mesh(g,M.plate);m.position.z=-.1;m.castShadow=true;m.receiveShadow=true;
+  regPart(m,'主机板','镂空主机板，日内瓦波纹与鱼鳞纹手工装饰，大幅减重同时保证结构强度。',0);
+  return m;
+}
+
+/* ── barrel ── */
+function buildBarrel(){
+  const g=new THREE.Group();
+  g.add(mkGear(38,.74,.64,.15,.14,M.gold,{count:5,radius:.14,distance:.41}));
+  g.add(new THREE.Mesh(new THREE.CylinderGeometry(.07,.07,.22,16).rotateX(Math.PI/2),M.polish));
+  const sp=mkHairspring(.08,.54,5,.007,M.blue);sp.position.z=.02;g.add(sp);
+  g.position.set(-.4,.35,-.05);
+  anim.barrel=g;
+  regPart(g,'发条盒','主发条提供72小时动力储备，手动上链，配备滑动发条防止过载。',-.6);
+  return g;
+}
+
+/* ── center wheel ── */
+function buildCenter(){
+  const g=new THREE.Group();
+  g.add(mkGear(22,.48,.4,.07,.1,M.polish,{count:4,radius:.09,distance:.25}));
+  const pn=mkGear(10,.13,.09,.04,.12,M.polish);pn.position.z=.06;g.add(pn);
+  g.position.set(0,0,-.02);
+  anim.center=g;
+  regPart(g,'中心轮','中心轮驱动分针，每60分钟旋转一圈，与走时轮系直接啮合。',-.3);
+  return g;
+}
+
+/* ── third wheel ── */
+function buildThird(){
+  const g=new THREE.Group();
+  g.add(mkGear(18,.36,.3,.05,.08,M.steel,{count:3,radius:.07,distance:.17}));
+  g.position.set(-.62,.48,.02);
+  anim.third=g;
+  regPart(g,'第三轮','过轮传递中心轮至第四轮的动力，调节转速比。',.15);
+  return g;
+}
+
+/* ── fourth wheel ── */
+function buildFourth(){
+  const g=new THREE.Group();
+  g.add(mkGear(15,.26,.21,.04,.065,M.polish,{count:3,radius:.05,distance:.12}));
+  g.position.set(.28,-.52,.05);
+  anim.fourth=g;
+  regPart(g,'第四轮','秒轮，每分钟旋转一圈，轴心延伸至表盘面承载秒针。',.4);
+  return g;
+}
+
+/* ── escape wheel ── */
+function buildEscape(){
+  const g=new THREE.Group();
+  g.add(mkEscape(15,.21,.11,.035,.025,M.polish));
+  g.position.set(-.42,-.38,.08);
+  anim.escape=g;
+  regPart(g,'擒纵轮','特殊齿形擒纵轮，与擒纵叉配合精确控制能量释放频率。',.65);
+  return g;
+}
+
+/* ── pallet fork ── */
+function buildPallet(){
+  const g=new THREE.Group();
+  const fs=new THREE.Shape();
+  fs.moveTo(0,-.11);fs.lineTo(.018,.07);fs.lineTo(.075,.14);fs.lineTo(.055,.16);fs.lineTo(0,.09);fs.lineTo(-.055,.16);fs.lineTo(-.075,.14);fs.lineTo(-.018,.07);fs.closePath();
+  const fg=new THREE.ExtrudeGeometry(fs,{depth:.035,bevelEnabled:false});fg.translate(0,0,-.0175);
+  g.add(new THREE.Mesh(fg,M.steel));
+  [.065,-.065].forEach(x=>{const s=new THREE.Mesh(new THREE.BoxGeometry(.018,.055,.035),M.ruby);s.position.set(x,.15,0);g.add(s);});
+  g.position.set(-.42,-.55,.1);
+  anim.pallet=g;
+  regPart(g,'擒纵叉','双红宝石叉瓦擒纵叉，左右交替释放擒纵轮齿，实现等时性计时。',.85);
+  return g;
+}
+
+/* ── balance wheel ── */
+function buildBalance(){
+  const g=new THREE.Group();
+  g.add(new THREE.Mesh(new THREE.TorusGeometry(.34,.014,8,48),M.gold));
+  for(let i=0;i<3;i++){const a=i/3*Math.PI*2,arm=new THREE.Mesh(new THREE.BoxGeometry(.018,.32,.022),M.gold);
+    arm.position.set(Math.cos(a)*.165,Math.sin(a)*.165,0);arm.rotation.z=a+Math.PI/2;g.add(arm);}
+  for(let i=0;i<8;i++){const a=i/8*Math.PI*2,sc=new THREE.Mesh(new THREE.CylinderGeometry(.011,.011,.022,8).rotateX(Math.PI/2),M.blue);
+    sc.position.set(Math.cos(a)*.34,Math.sin(a)*.34,0);g.add(sc);}
+  g.add(new THREE.Mesh(new THREE.CylinderGeometry(.035,.035,.025,16).rotateX(Math.PI/2),M.polish));
+  const ip=new THREE.Mesh(new THREE.CylinderGeometry(.007,.007,.035,8).rotateX(Math.PI/2),M.ruby);ip.position.y=.045;g.add(ip);
+  const hs=mkHairspring(.05,.27,9,.003,M.blue);hs.position.z=.018;g.add(hs);
+  g.position.set(-.82,-.08,.12);
+  anim.balance=g;
+  regPart(g,'摆轮游丝','游丝-摆轮振荡系统，频率28,800次/小时（4Hz），蓝钢游丝配KIF避震器，机械表的"心脏"。',1.1);
+  return g;
+}
+
+/* ── bridges ── */
+function buildBridges(){
+  const g=new THREE.Group();
+  /* balance cock */
+  const cs=new THREE.Shape();cs.moveTo(-.28,-.12);cs.quadraticCurveTo(-.28,.28,0,.33);cs.quadraticCurveTo(.28,.28,.28,-.12);
+  cs.lineTo(.18,-.12);cs.lineTo(.14,-.08);cs.lineTo(-.14,-.08);cs.lineTo(-.18,-.12);cs.closePath();
+  cs.holes.push(circPath(0,0,.05,24));
+  const ck=new THREE.Mesh(new THREE.ExtrudeGeometry(cs,{depth:.045,bevelEnabled:true,bevelThickness:.004,bevelSize:.004,bevelSegments:1}).translate(0,0,-.0225),M.bridge);
+  ck.position.set(-.82,-.08,.165);ck.castShadow=true;g.add(ck);
+
+  /* main bridge */
+  const bs=new THREE.Shape();bs.moveTo(-.85,.1);bs.lineTo(-.28,.58);bs.lineTo(.38,.18);bs.lineTo(.48,-.28);bs.lineTo(.08,-.68);bs.lineTo(-.48,-.48);bs.closePath();
+  [[-.4,.36,.055],[-.62,.48,.035],[.28,-.52,.035],[-.1,.1,.13],[.14,-.18,.11]].forEach(([x,y,r])=>bs.holes.push(circPath(x,y,r,24)));
+  const bM=new THREE.Mesh(new THREE.ExtrudeGeometry(bs,{depth:.055,bevelEnabled:true,bevelThickness:.004,bevelSize:.004,bevelSegments:1}).translate(0,0,-.0275),M.bridge);
+  bM.position.z=.115;bM.castShadow=true;g.add(bM);
+
+  [[-.24,.48],[.33,.08],[-.38,-.38],[-.68,.04],[-.88,-.14]].forEach(([x,y])=>{const sc=mkScrew(.038);sc.position.set(x,y,.145);g.add(sc);});
+  regPart(g,'夹板与桥板','桥板装饰日内瓦纹，蓝钢螺丝固定，手工倒角抛光边缘。',.5);
+  return g;
+}
+
+/* ── rubies ── */
+function buildRubies(){
+  const g=new THREE.Group();
+  [[0,0],[-.62,.48],[.28,-.52],[-.42,-.38],[-.82,-.08],[-.4,.35]].forEach(([x,y])=>{
+    [[-.05,M.ruby],[.08,M.ruby]].forEach(([dz])=>{
+      const m=new THREE.Mesh(new THREE.CylinderGeometry(.032,.032,.018,16).rotateX(Math.PI/2),M.ruby);
+      m.position.set(x,y,dz);g.add(m);
+    });
+  });
+  regPart(g,'红宝石轴承','21颗人造红宝石轴承，有效降低各轮轴摩擦系数，延长机芯寿命。',.3);
+  return g;
+}
+
+/* ── dial markers ── */
+function buildMarkers(){
+  const g=new THREE.Group(),R=1.55;
+  for(let i=0;i<12;i++){
+    const a=i/12*Math.PI*2-Math.PI/2,maj=i%3===0,len=maj?.17:.09,w=maj?.038:.023;
+    const m=new THREE.Mesh(new THREE.BoxGeometry(w,len,.012),M.lume);
+    m.position.set(Math.cos(a)*(R-len/2),Math.sin(a)*(R-len/2),.34);m.rotation.z=a+Math.PI/2;g.add(m);
+  }
+  for(let i=0;i<60;i++){
+    if(i%5===0)continue;
+    const a=i/60*Math.PI*2-Math.PI/2;
+    g.add(new THREE.Mesh(new THREE.CylinderGeometry(.008,.008,.006,8).rotateX(Math.PI/2),M.lume).translateOnAxis(new THREE.Vector3(Math.cos(a),Math.sin(a),0),1.6).translateZ(.34));
+  }
+  regPart(g,'时标刻度','Super-LumiNova荧光时标与分钟轨道刻度，暗光环境下清晰可读。',.7);
+  return g;
+}
+
+/* ── hands ── */
+function buildHands(){
+  const g=new THREE.Group();
+  function hand(pts,z,mat,sc){
+    const s=new THREE.Shape();s.moveTo(pts[0][0],pts[0][1]);pts.slice(1).forEach(p=>s.lineTo(p[0],p[1]));s.closePath();
+    const ge=new THREE.ExtrudeGeometry(s,{depth:.02*sc,bevelEnabled:false});ge.translate(0,0,-.01*sc);
+    const m=new THREE.Mesh(ge,mat);m.position.z=z;return m;
+  }
+  const hh=hand([[-.028,-.045],[-.018,.52],[0,.62],[.018,.52],[.028,-.045]],.38,M.polish,1.2);g.add(hh);anim.hour=hh;
+  const mh=hand([[-.022,-.045],[-.012,.88],[0,1.02],[.012,.88],[.022,-.045]],.4,M.polish,1);g.add(mh);anim.minute=mh;
+  const sh=hand([[-.007,-.11],[-.004,1.08],[0,1.18],[.004,1.08],[.007,-.11]],.36,M.gold,.8);g.add(sh);anim.second=sh;
+  g.add(new THREE.Mesh(new THREE.CylinderGeometry(.045,.045,.028,16).rotateX(Math.PI/2),M.polish).translateZ(.42));
+  regPart(g,'指针','时针与分针精密抛光，玫瑰金秒针，荧光填充确保夜间可读。',1.0);
+  return g;
+}
+
+/* ═══════════════════════ ASSEMBLE ═══════════════════════ */
+[buildBack,buildPlate,buildBarrel,buildCenter,buildThird,buildFourth,buildEscape,buildPallet,buildRubies,buildBridges,buildBalance,buildMarkers,buildHands,buildCrystal,buildCase].forEach(fn=>watch.add(fn()));
+watch.rotation.x=-.25;
+scene.add(watch);
+
+/* floor */
+const fl=new THREE.Mesh(new THREE.PlaneGeometry(24,24),new THREE.MeshPhysicalMaterial({color:0x080808,metalness:.4,roughness:.65,envMapIntensity:.2}));
+fl.rotation.x=-Math.PI/2;fl.position.y=-3.2;fl.receiveShadow=true;scene.add(fl);
+
+/* ═══════════════════════ ANIMATION ═══════════════════════ */
+let eProg=0;
+function tick(t){
+  const s=t*.45;
+  if(anim.barrel)anim.barrel.rotation.z=s*.05;
+  if(anim.center)anim.center.rotation.z=-s*.15;
+  if(anim.third)anim.third.rotation.z=s*.42;
+  if(anim.fourth)anim.fourth.rotation.z=-s*1;
+  if(anim.escape)anim.escape.rotation.z=s*3.2;
+  if(anim.pallet)anim.pallet.rotation.z=Math.sin(s*26)*.14;
+  if(anim.balance)anim.balance.rotation.z=Math.sin(s*26)*.42;
+  if(anim.hour)anim.hour.rotation.z=-s*.02;
+  if(anim.minute)anim.minute.rotation.z=-s*.24;
+  if(anim.second)anim.second.rotation.z=-s*1;
+
+  const tgt=exploded?1:0;eProg+=(tgt-eProg)*.06;
+  expP.forEach(m=>{const tz=m.userData.oZ+m.userData.eOff*eProg;m.position.z+=(tz-m.position.z)*.08;});
+}
+
+/* ═══════════════════════ RAYCAST / INTERACTION ═══════════════════════ */
+const rc=new THREE.Raycaster(),mv=new THREE.Vector2();
+let hov=null;
+addEventListener('mousemove',e=>{mv.x=(e.clientX/innerWidth)*2-1;mv.y=-(e.clientY/innerHeight)*2+1});
+addEventListener('click',()=>{
+  rc.setFromCamera(mv,cam);
+  const hits=rc.intersectObjects(watch.children,true);
+  if(hits.length){
+    let o=hits[0].object;
+    while(o&&!o.userData.name)o=o.parent;
+    if(o&&o.userData.name)showIP(o.userData.name,o.userData.desc);
+  }else hideIP();
+});
+
+function showIP(t,d){document.getElementById('iT').textContent=t;document.getElementById('iD').innerHTML=d;document.getElementById('iP').classList.add('show')}
+function hideIP(){document.getElementById('iP').classList.remove('show')}
+
+/* ═══════════════════════ 3D LABELS ═══════════════════════ */
+function mkLabels(){
+  const c=document.getElementById('lC');c.innerHTML='';
+  labParts.forEach(p=>{
+    if(!p.userData.name)return;
+    const el=document.createElement('div');el.className='lb';el.textContent=p.userData.name;el.dataset.uid=p.uuid;c.appendChild(el);
+  });
+}
+function updLabels(){
+  if(!showL)return;
+  document.querySelectorAll('.lb').forEach(el=>{
+    const p=reg[el.dataset.uid];if(!p)return;
+    const w=new THREE.Vector3();p.getWorldPosition(w);
+    const sc=w.project(cam);
+    if(sc.z>0&&sc.z<1){el.style.left=(sc.x*.5+.5)*innerWidth+'px';el.style.top=(-sc.y*.5+.5)*innerHeight+'px';el.classList.add('v');}
+    else el.classList.remove('v');
+  });
+}
+function rmLabels(){document.getElementById('lC').innerHTML=''}
+
+/* ═══════════════════════ UI GLOBALS ═══════════════════════ */
+window.UI={
+  explode(){exploded=!exploded;document.getElementById('bE').classList.toggle('on',exploded)},
+  rotate(){ctl.autoRotate=!ctl.autoRotate;document.getElementById('bR').classList.toggle('on',ctl.autoRotate)},
+  labels(){showL=!showL;document.getElementById('bL').classList.toggle('on',showL);showL?mkLabels():rmLabels()},
+};
+
+/* ═══════════════════════ RESIZE ═══════════════════════ */
+addEventListener('resize',()=>{cam.aspect=innerWidth/innerHeight;cam.updateProjectionMatrix();R.setSize(innerWidth,innerHeight)});
+
+/* ═══════════════════════ LOOP ═══════════════════════ */
+setTimeout(()=>document.getElementById('ld').classList.add('h'),1800);
+(function loop(){
+  requestAnimationFrame(loop);
+  tick(performance.now()/1000);
+  ctl.update();
+  updLabels();
+  R.render(scene,cam);
+})();
+</script>
+</body>
+</html>
\ No newline at end of file