:root{--accent:#ffb24d;--accent-2:#6fd4ff;--panel-bg:#0a0e16b8;--panel-border:#ffffff1f;--text-main:#eef2f7;--text-dim:#94a3b8;font-family:Segoe UI,PingFang SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:#000308;width:100%;height:100%;margin:0;padding:0;overflow:hidden}#app{width:100vw;height:100vh;position:relative}#scene-canvas,#overlay-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}#overlay-canvas.hidden,.hidden{display:none!important}#loading-screen{z-index:50;background:radial-gradient(#050810 0%,#000103 100%);justify-content:center;align-items:center;transition:opacity .8s,visibility .8s;display:flex;position:absolute;inset:0}#loading-screen.fade-out{opacity:0;visibility:hidden;pointer-events:none}.loading-inner{text-align:center;color:var(--text-main)}.loading-title{letter-spacing:6px;color:var(--accent);text-shadow:0 0 20px #ffb24d80;font-size:22px;font-weight:600}.loading-sub{color:var(--text-dim);letter-spacing:2px;margin-top:10px;font-size:13px}.loading-bar{background:#ffffff14;border-radius:2px;width:260px;height:3px;margin:22px auto 0;overflow:hidden}.loading-bar-fill{background:linear-gradient(90deg, var(--accent-2), var(--accent));width:0%;height:100%;box-shadow:0 0 10px var(--accent);transition:width .3s}#top-bar{z-index:20;pointer-events:none;background:linear-gradient(#03050ad9 0%,#03050a00 100%);justify-content:space-between;align-items:center;padding:16px 26px;display:flex;position:absolute;top:0;left:0;right:0}#top-bar *{pointer-events:auto}.brand{align-items:center;gap:12px;display:flex}.brand-icon{filter:drop-shadow(0 0 6px #6fd4ff99);font-size:26px}.brand-title{color:var(--text-main);letter-spacing:1px;font-size:17px;font-weight:600}.brand-sub{color:var(--text-dim);letter-spacing:1px;margin-top:2px;font-size:11px}#mode-nav{border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0d;border-radius:12px;gap:6px;padding:5px;display:flex}.mode-btn{color:var(--text-dim);cursor:pointer;letter-spacing:1px;background:0 0;border:none;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:500;transition:all .25s}.mode-btn:hover{color:var(--text-main);background:#ffffff0f}.mode-btn.active{color:#06101c;background:linear-gradient(135deg, var(--accent-2), var(--accent));box-shadow:0 0 16px #6fd4ff59}#info-panel{z-index:25;background:var(--panel-bg);border:1px solid var(--panel-border);width:340px;max-height:calc(100vh - 200px);color:var(--text-main);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;padding:20px 22px;transition:transform .35s,opacity .35s;position:absolute;top:88px;right:24px;overflow-y:auto;box-shadow:0 12px 40px #00000080}#info-panel.hidden{opacity:0;pointer-events:none;transform:translate(30px)}#info-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:20px;line-height:1;position:absolute;top:12px;right:14px}#info-close:hover{color:var(--text-main)}#info-content .part-name-en{letter-spacing:2px;color:var(--accent-2);text-transform:uppercase;font-size:11px}#info-content h2{color:var(--text-main);margin:4px 0 12px;font-size:20px}#info-content p{color:#cbd5e1;margin:0 0 10px;font-size:13.5px;line-height:1.7}#info-content .spec-grid{border-top:1px solid var(--panel-border);grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:14px;padding-top:14px;display:grid}#info-content .spec-item .k{color:var(--text-dim);letter-spacing:.5px;font-size:10.5px}#info-content .spec-item .v{color:var(--accent);margin-top:2px;font-size:13px;font-weight:600}#hotspot-layer{z-index:15;pointer-events:none;position:absolute;inset:0}.hotspot{pointer-events:auto;cursor:pointer;align-items:center;gap:8px;display:flex;position:absolute;transform:translate(-50%,-50%)}.hotspot-dot{background:var(--accent-2);border-radius:50%;width:12px;height:12px;animation:2.2s ease-in-out infinite pulse;box-shadow:0 0 0 4px #6fd4ff2e,0 0 12px #6fd4ffcc}.hotspot.active .hotspot-dot{background:var(--accent);box-shadow:0 0 0 5px #ffb24d38,0 0 16px #ffb24de6}.hotspot-label{color:var(--text-main);border:1px solid var(--panel-border);white-space:nowrap;letter-spacing:.5px;opacity:.92;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#060a12bf;border-radius:20px;padding:4px 10px;font-size:11.5px}@keyframes pulse{0%,to{box-shadow:0 0 0 4px #6fd4ff2e,0 0 12px #6fd4ffcc}50%{box-shadow:0 0 0 8px #6fd4ff0d,0 0 18px #6fd4ff}}#control-dock{z-index:20;width:min(640px,92vw);position:absolute;bottom:34px;left:50%;transform:translate(-50%)}.dock-panel{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;padding:14px 20px;box-shadow:0 12px 40px #00000073}.dock-row{align-items:center;gap:12px;margin-bottom:8px;display:flex}.dock-row:last-of-type{margin-bottom:0}.dock-row label{color:var(--text-dim);letter-spacing:.5px;min-width:92px;font-size:12.5px}.dock-row input[type=range]{accent-color:var(--accent);flex:1}.dock-hint{color:var(--text-dim);border-top:1px solid var(--panel-border);margin-top:10px;padding-top:10px;font-size:11.5px;line-height:1.6}.dock-btn{background:linear-gradient(135deg, var(--accent-2), var(--accent));color:#06101c;cursor:pointer;letter-spacing:.5px;border:none;border-radius:8px;padding:8px 18px;font-size:12.5px;font-weight:600}.dock-btn:hover{filter:brightness(1.08)}.dock-btn:active{transform:translateY(1px)}#aperture-readout{color:var(--accent);text-align:right;min-width:130px;font-size:12px}.obs-tabs{gap:8px}.obs-tab{border:1px solid var(--panel-border);color:var(--text-dim);cursor:pointer;background:#ffffff0d;border-radius:8px;padding:6px 14px;font-size:12px}.obs-tab.active{color:#06101c;background:var(--accent-2);border-color:var(--accent-2)}#bottom-credit{z-index:10;color:#94a3b88c;letter-spacing:.5px;font-size:10.5px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}#info-panel::-webkit-scrollbar{width:6px}#info-panel::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}@media (width<=760px){#info-panel{width:calc(100vw - 40px);max-height:calc(100vh - 260px);top:128px;right:20px}#top-bar{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 16px}.brand-sub{display:none}.brand-title{font-size:15px}#mode-nav{justify-content:flex-start;width:100%;overflow-x:auto}.mode-btn{white-space:nowrap;flex:none;padding:7px 11px;font-size:11px}#control-dock{width:calc(100vw - 32px);bottom:14px}.dock-row label{min-width:72px;font-size:11px}}