:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#edf6ff;background:#030914;color-scheme:dark;--muted:#8195ad;--line:rgba(150,184,223,.15);--accent:#87e3e4;--gold:#efd1a1}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible,#scene:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{color:inherit}a{color:inherit;text-decoration:none}[hidden]{display:none!important}#experience{height:100svh;min-height:650px;position:relative;overflow:hidden;background:#030914}#scene{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(3,9,20,.95),transparent 25%,transparent 80%,rgba(3,9,20,.45)),linear-gradient(90deg,rgba(3,9,20,.75),transparent 36%,transparent 72%,rgba(3,9,20,.4))}header{position:absolute;inset:0 0 auto;height:96px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:600;letter-spacing:3px}.brand-mark{font-size:43px;font-weight:200;color:var(--accent);line-height:1}.brand-en{display:block;font:9px/1.4 ui-monospace,monospace;letter-spacing:2.3px;color:var(--muted);margin-top:5px}.header-center{display:flex;align-items:center;gap:12px;color:#91a6bd;font-size:11px;letter-spacing:1px}.status-dot{height:5px;width:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #87e3e466}.sep{opacity:.3;margin:0 7px}.quiet{border:0;background:none;padding:10px 0;color:#a0b3ca;font-size:12px}.quiet:hover{color:#fff}#fullscreen{font-size:22px;display:flex;align-items:center;gap:8px}#fullscreen span{font-size:12px}.intro{position:absolute;left:44px;top:155px;pointer-events:none}.eyebrow{font:10px/1.5 ui-monospace,SFMono-Regular,monospace;letter-spacing:2px;color:var(--muted)}h1{font-weight:350;font-size:clamp(34px,3.5vw,54px);line-height:1.4;letter-spacing:4px;margin:21px 0 18px}.intro p{font-size:12px;color:#7f93ad;letter-spacing:1px}.coordinates{margin-top:42px;font-size:10px;color:#69809b;display:grid;gap:9px}.coordinates strong{font:11px ui-monospace,monospace;color:#b3c5d9;font-weight:400;letter-spacing:1px}.scene-options{margin-top:30px;display:grid;gap:13px;pointer-events:auto}.scene-options button{padding:0;border:0;background:none;display:flex;align-items:center;gap:10px;color:#a4b5c9;font-size:11px;width:max-content}.switch{width:22px;height:12px;border-radius:8px;border:1px solid #36516b;position:relative}.switch:after{content:"";position:absolute;width:6px;height:6px;left:2px;top:2px;border-radius:50%;background:#66809a;transition:transform .2s}.scene-options button[aria-pressed=true] .switch{border-color:#558b91;background:#87e3e420}.scene-options button[aria-pressed=true] .switch:after{transform:translateX(9px);background:var(--accent)}.camera-panel{position:absolute;right:40px;top:153px;width:258px;padding:22px;background:rgba(9,21,37,.62);border:1px solid #7aa2c223;border-radius:4px;backdrop-filter:blur(14px)}.panel-top{display:flex;justify-content:space-between;align-items:center}.panel-top .eyebrow{font-size:8px;letter-spacing:1.5px}.tag{font-size:9px;color:#91a0b2;border:1px solid #71839b33;border-radius:3px;padding:3px 5px}.camera-panel h2{font-size:17px;font-weight:450;letter-spacing:1px;margin:25px 0 12px}.camera-description{font-size:11px;color:#8396ad;line-height:1.9;margin:0 0 20px}.primary{border:1px solid #8ce2e855;background:#a3e6e8;color:#08252d;border-radius:3px;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;width:100%;transition:background .2s}.primary:hover{background:#c8f8f5}.primary span{font-size:19px;font-weight:400}#camera-status{font-size:9px;color:#73869f;line-height:1.7;margin:9px 0 0;min-height:16px}.gesture-hints{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;display:grid;gap:15px}.gesture-hints>div{display:flex;align-items:center;gap:12px}.gesture-hints b{font:10px ui-monospace,monospace;color:#607890}.gesture-hints span{font-size:11px;color:#b6c6d8}.gesture-hints small{display:block;font-size:9px;color:#7288a0;margin-top:4px}#camera-preview{position:relative;aspect-ratio:4/3;margin:0 0 12px;background:#000;border:1px solid var(--line);overflow:hidden;border-radius:3px}#camera,#hand-overlay{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transform:scaleX(-1)}#gesture-label{position:absolute;bottom:6px;left:6px;right:6px;text-align:center;font-size:10px;background:#06101caa;padding:4px;color:#baf2ec}.city-focus{position:absolute;bottom:188px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 2px 18px #000}.city-focus .eyebrow{font-size:8px;color:var(--gold);letter-spacing:2.5px}.city-focus h2{font-size:30px;font-weight:400;letter-spacing:6px;margin:10px 0 7px}#city-en{font:11px ui-monospace,monospace;letter-spacing:4px;color:#c3d1e3}.city-meta{display:flex;justify-content:center;gap:15px;font:9px ui-monospace,monospace;color:#7991ad;margin-top:15px;white-space:nowrap}.zoom-controls{position:absolute;right:calc(50% - 295px);bottom:195px;display:flex;flex-direction:column;align-items:center}.zoom-controls button{background:#07132277;border:1px solid var(--line);height:30px;width:30px;border-radius:4px;font-size:18px;color:#b6cbdd}.zoom-controls button:hover{background:#173045}.zoom-controls #reset{margin-top:13px;font-size:21px}.zoom-track{height:44px;width:1px;background:#253b53;position:relative;margin:8px 0}.zoom-track i{position:absolute;left:-2px;top:50%;height:6px;width:5px;background:#7ccbd7;border-radius:2px}footer{position:absolute;inset:auto 42px 0}.city-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:22px 0}.city-nav>.eyebrow{flex-shrink:0;font-size:9px}#city-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;width:100%;padding:2px}.city-button{flex:1;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;padding:12px 16px;background:transparent;border:1px solid transparent;border-radius:4px;color:#7d93ad}.city-button:hover{color:#e4f4ff;background:#132136}.city-button[aria-pressed=true]{background:#91c7d113;border-color:#86d5dd33;color:#c3f1ed}.city-button .city-dot{width:4px;height:4px;background:currentColor;border-radius:100%}.footer-bottom{height:62px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#657d98;gap:14px}.footer-sep{margin:0 10px;color:#456078}.mouse-icon{display:inline-block;width:8px;height:11px;border:1px solid #71849a;border-radius:5px;vertical-align:-2px;margin-right:7px}.demo-label{font-size:9px;letter-spacing:.5px}#help{font-size:10px}#help span{display:inline-flex;border:1px solid #566d83;border-radius:50%;height:15px;width:15px;align-items:center;justify-content:center;margin-left:8px}#loading{position:absolute;inset:0;background:#030914;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;z-index:8;transition:opacity .6s}#loading strong{font-size:15px;letter-spacing:3px;font-weight:400}#loading-detail{font-size:11px;color:#7c95af}.loading-orbit{font-size:55px;color:var(--accent);animation:breathe 1.6s ease-in-out infinite}@keyframes breathe{50%{opacity:.35;transform:scale(.9)}}#toast{position:absolute;top:113px;left:50%;transform:translateX(-50%);border:1px solid #78a4c133;border-radius:4px;padding:10px 18px;font-size:12px;background:#112333ee;color:#d2e7ef;z-index:9;max-width:85%;text-align:center}dialog{background:#0b1829;color:#d8e6f3;border:1px solid #32475e;border-radius:8px;padding:34px;max-width:450px;width:calc(100% - 32px);box-shadow:0 25px 150px #000}dialog::backdrop{background:#0009;backdrop-filter:blur(8px)}dialog h2{font-size:23px;font-weight:450;margin:16px 0 25px}dialog p{font-size:12px;line-height:1.9;color:#95a8bf;margin:18px 0}dialog b{font-weight:500;color:#d4e9f8}dialog .muted{font-size:10px;color:#6e849c}dialog .primary{margin-top:25px}.dialog-close{position:absolute;right:20px;top:10px}
@media(min-width:1600px){.intro{left:64px;top:190px}.camera-panel{right:64px;top:190px;width:280px}.city-focus{bottom:207px}.city-nav{padding:27px 0}}
@media(max-width:1100px){header{padding:0 25px}.intro{left:27px;top:140px}h1{font-size:34px}.camera-panel{right:25px;width:223px;padding:17px;top:140px}.camera-panel h2{font-size:15px}.camera-description{font-size:10px}.gesture-hints{gap:11px;margin-top:16px;padding-top:16px}.coordinates{margin-top:30px}.header-center{font-size:9px}.city-focus{bottom:186px}footer{left:25px;right:25px}.city-nav{gap:12px}.city-button{padding:11px 13px}.zoom-controls{right:calc(50% - 225px)}}
@media(max-width:760px){#experience{min-height:700px;height:100svh}header{height:76px;padding:0 20px}.brand{font-size:20px}.brand-mark{font-size:36px}.brand-en{font-size:8px}.header-center{display:none}.intro{top:100px;left:22px}.intro .eyebrow{font-size:8px}h1{font-size:28px;line-height:1.5;letter-spacing:3px;margin:12px 0}.intro>p,.coordinates{display:none}.scene-options{margin-top:15px;gap:12px}.scene-options button{font-size:10px}.camera-panel{top:104px;right:18px;width:156px;padding:13px}.panel-top .eyebrow{font-size:7px;letter-spacing:1px}.tag{display:none}.camera-panel h2{font-size:12px;margin:15px 0 10px}.camera-description,.gesture-hints{display:none}.primary{font-size:10px;padding:10px}.primary span{font-size:14px}#camera-status{font-size:8px;margin-top:7px}.city-focus{bottom:167px}.city-focus h2{font-size:25px;letter-spacing:4px}.city-meta{font-size:8px;gap:10px}.city-focus .eyebrow{font-size:7px}.zoom-controls{right:20px;bottom:182px}footer{left:18px;right:18px}.city-nav{display:block;padding:12px 0}.city-nav>.eyebrow{display:block;margin-bottom:8px;font-size:8px;letter-spacing:1px}.city-button{padding:10px 14px;font-size:10px;flex:0 0 auto}#city-list{gap:3px}.footer-bottom{height:52px;font-size:8px}.demo-label{display:none}#help{font-size:9px}.footer-sep{margin:0 6px}.zoom-controls button{width:26px;height:26px;font-size:16px}#toast{top:84px;font-size:10px;width:max-content}.vignette{background:linear-gradient(0deg,#030914,transparent 36%,transparent 66%,#030914aa)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.camera-panel:has(#camera-preview:not([hidden])) .gesture-hints,.camera-panel:has(#camera-preview:not([hidden])) .camera-description{display:none}