:root{--color-paper:#eef3f5;--color-ink:#25383f;--color-muted:#667b82;--color-accent:#19627a;--color-line:#cddbdd;--color-white:#fff;--color-panel:#f6f9fa;--color-shadow:#193d4c20;--font-display:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;--font-body:var(--font-display);--font-mono:"SFMono-Regular",Consolas,monospace}*{box-sizing:border-box}html,body{margin:0;overflow-x:clip;width:100%;height:100%;font-family:var(--font-body);color:var(--color-ink);background:var(--color-paper)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--color-accent);outline-offset:5px}button{transition:background .18s,color .18s,transform .18s}button:active{transform:translateY(1px)}#app{height:100svh;min-height:650px;position:relative;overflow:hidden}#scene{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:32px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;z-index:3;pointer-events:none}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--color-ink);pointer-events:auto;font-size:19px;font-weight:650;letter-spacing:2px}.brand-mark{width:43px;height:43px;border:1px solid var(--color-accent);display:grid;place-items:center;font-size:25px;border-radius:12px;color:var(--color-accent)}.brand small{display:block;font:8px var(--font-mono);letter-spacing:1.5px;margin-top:5px}.header-right{display:flex;align-items:center;gap:25px}.edition{font-size:11px;letter-spacing:2px;color:var(--color-muted)}#help{pointer-events:auto;background:var(--color-panel);border:1px solid var(--color-line);width:32px;height:32px;border-radius:50%;font-size:14px}.intro{position:absolute;top:150px;left:52px;width:250px;z-index:2;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--color-accent);display:flex;align-items:center;gap:9px}.eyebrow i,.status-dot{height:5px;width:5px;background:var(--color-accent);border-radius:50%;display:inline-block}h1{font-size:46px;font-weight:500;line-height:1.35;letter-spacing:-2px;margin:23px 0 20px;overflow-wrap:anywhere;min-width:0}.lede{font-size:11px;line-height:2.1;color:var(--color-muted)}.divider{height:1px;background:var(--color-line);width:38px;margin:25px 0}.list-title{font-size:10px;color:var(--color-muted);letter-spacing:1px;display:flex;justify-content:space-between;width:215px}#landmarks{pointer-events:auto;display:flex;flex-direction:column;width:224px;margin-top:14px;gap:3px}.landmark{background:none;border:0;text-align:left;padding:10px 12px;display:flex;gap:15px;align-items:center;border-radius:5px;font-size:12px;white-space:nowrap}.landmark .number{font:9px var(--font-mono);color:var(--color-muted)}.landmark .arrow{margin-left:auto;opacity:0}.landmark:hover{background:var(--color-panel)}.landmark.selected{background:var(--color-white);box-shadow:0 4px 18px var(--color-shadow);color:var(--color-accent)}.landmark.selected .arrow{opacity:1}.landmark-note{margin-top:21px;width:210px}#note-index{font:9px var(--font-mono);color:var(--color-accent)}#note-text{font-size:10px;line-height:1.9;color:var(--color-muted);margin-top:9px}.scene-caption{position:absolute;right:45px;bottom:124px;display:flex;gap:13px;align-items:center;font-size:13px;letter-spacing:2px;pointer-events:none}.cross{font-size:30px;font-weight:200;color:var(--color-accent)}.scene-caption small{display:block;font:8px var(--font-mono);letter-spacing:1px;margin-top:8px;color:var(--color-muted)}.tools{position:absolute;right:39px;top:42%;display:flex;flex-direction:column;background:var(--color-panel);padding:5px;border:1px solid var(--color-line);border-radius:8px;gap:4px}.tools button{width:44px;height:51px;border:0;background:none;font-size:22px;border-radius:4px}.tools button span{display:block;font-size:8px;margin-top:1px}.tools button:hover,.tools button[aria-pressed=true]{background:var(--color-white);color:var(--color-accent)}footer{position:absolute;left:42px;right:42px;bottom:27px;border-top:1px solid var(--color-line);padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px}.scene-status{display:flex;align-items:center;gap:9px}.instructions{color:var(--color-muted);margin-left:12px;font-size:9px}.time-control{display:flex;align-items:center;gap:3px}.time-title{font-size:10px;margin-right:13px;color:var(--color-muted)}.time-control button{border:0;background:transparent;padding:8px 17px;border-radius:5px;font-size:10px;white-space:nowrap}.time-control button:hover{background:var(--color-panel)}.time-control button.active{background:var(--color-ink);color:var(--color-white)}.footer-note{font:8px var(--font-mono);letter-spacing:1px;color:var(--color-muted)}#labels{position:absolute;inset:0;pointer-events:none}.map-label{position:absolute;font-size:9px;letter-spacing:1px;white-space:nowrap;padding:5px 9px;border:1px solid var(--color-line);border-radius:3px;background:var(--color-panel);color:var(--color-accent);transform:translate(-50%,-100%);transition:opacity .2s}.map-label:after{content:"";position:absolute;width:1px;height:14px;background:var(--color-accent);top:100%;left:50%}dialog{border:1px solid var(--color-line);border-radius:12px;background:var(--color-panel);color:var(--color-ink);padding:35px;max-width:calc(100% - 32px);box-shadow:0 20px 80px var(--color-shadow)}dialog::backdrop{background:var(--color-shadow)}dialog h2{font-size:25px;font-weight:500}dialog p{font-size:13px;line-height:2}dialog small{font-size:10px;color:var(--color-muted)}#close-help{position:absolute;right:15px;top:10px;background:none;border:0;font-size:24px}#toast{position:absolute;left:50%;bottom:100px;transform:translate(-50%);background:var(--color-ink);color:var(--color-white);padding:12px 20px;font-size:12px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-paper);z-index:10;font-size:13px;letter-spacing:4px}#loading span{width:6px;height:6px;background:var(--color-accent);margin-left:10px;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.2}}.night{--color-paper:#dae4ef;--color-ink:#263e56;--color-muted:#556f87;--color-line:#b6c9dd;--color-panel:#e9f0f8;--color-accent:#245e8b}@media(min-width:1600px){.intro{top:19%;left:65px}h1{font-size:56px}}@media(max-width:1000px){header{left:25px;right:25px}.intro{left:30px;width:200px;top:125px}h1{font-size:38px}.lede{font-size:10px}#landmarks{width:195px}.scene-caption{right:30px}.footer-note{display:none}footer{left:25px;right:25px}.instructions{display:none}.tools{right:22px}}@media(max-width:900px){#app{min-height:700px}header{top:20px;left:20px;right:20px}.edition{display:none}.brand{font-size:15px}.brand-mark{width:36px;height:36px;font-size:21px}.brand small{font-size:7px}.intro{top:96px;left:23px;width:calc(100% - 46px)}h1{font-size:29px;line-height:1.25;margin:12px 0 8px;letter-spacing:-1px}h1 br{display:none}.eyebrow{font-size:8px;margin:0}.lede{font-size:9px;margin:6px 0}.lede br,.divider,.list-title,.landmark-note{display:none}#landmarks{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:3px}.landmark{padding:7px 5px;justify-content:center;gap:5px;font-size:10px;background:var(--color-panel)}.landmark .number{font-size:7px}.landmark .arrow{display:none}.tools{right:14px;top:auto;bottom:113px;flex-direction:row}.tools button{width:34px;height:40px;font-size:17px}.scene-caption{left:22px;right:auto;bottom:124px;font-size:10px;gap:8px}.scene-caption small{font-size:6px;letter-spacing:0}.cross{font-size:24px}footer{left:20px;right:20px;bottom:20px;flex-wrap:wrap;padding-top:12px}.scene-status{font-size:9px}.time-title{display:none}.time-control button{font-size:9px;padding:7px 11px}.map-label{font-size:8px;padding:4px 6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(min-width:1001px){.intro{width:300px}h1{white-space:nowrap}}.brand-mark{border:0;border-radius:0;width:48px;height:48px}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}@media(max-width:900px){.brand-mark{width:39px;height:39px}}