:root{--color-paper: oklch(20.8% .022 228);--color-panel: oklch(23.6% .022 228);--color-panel-hover: oklch(28% .025 222);--color-ink: oklch(95% .012 88);--color-muted: oklch(72% .024 215);--color-accent: oklch(79% .073 171);--color-accent-ink: oklch(20% .027 190);--color-rule: oklch(36% .024 228);--color-amber: oklch(83% .12 77);--color-error: oklch(77% .13 25);--color-focus: oklch(96% .035 100);--color-overlay: oklch(17% .025 228 / .92);--color-clear: transparent;--color-shadow: oklch(8% .02 230 / .18);--font-display: "Avenir Next", "Trebuchet MS", "PingFang TC", sans-serif;--font-body: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;--font-mono: "SFMono-Regular", Consolas, monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--text-xs: 11px;--text-sm: 13px;--text-base: 15px;--text-lg: 20px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;--ease-out: cubic-bezier(.22,1,.36,1);--ease-in: cubic-bezier(.55,0,1,.45);--ease-in-out: cubic-bezier(.65,0,.35,1);--dur-fast: .16s;--dur-normal: .26s}*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{font-family:var(--font-body);color:var(--color-ink);background:var(--color-paper);font-size:var(--text-sm)}button,a{-webkit-tap-highlight-color:var(--color-clear)}button{font:inherit;cursor:pointer;color:inherit;border:0;background:none;white-space:nowrap}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}a{color:inherit;text-decoration:none}svg{width:18px;height:18px;stroke-width:1.65;flex-shrink:0}#app{height:100dvh;min-height:660px;display:flex;flex-direction:column}.topbar{height:86px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--color-rule)}.brand{display:flex;gap:12px;align-items:center;font-size:23px;font-weight:600;letter-spacing:3px}.brand small{display:block;font:9px var(--font-display);letter-spacing:3.5px;margin-top:5px;color:var(--color-muted)}.brand-mark{display:grid;place-items:center;width:42px;height:45px;border:1px solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-accent)}.brand-mark svg{width:27px;height:27px}.header-caption{font-size:12px;letter-spacing:2px;color:var(--color-muted)}.header-caption span{font:9px var(--font-display);letter-spacing:1.8px;margin-left:20px;color:var(--color-muted)}.header-actions{display:flex;gap:9px;align-items:center;color:var(--color-muted);font-size:11px}.live-dot,.tiny-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-accent);flex-shrink:0}.header-actions .icon-button{margin-left:14px}.icon-button{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-sm)}main{display:grid;grid-template-columns:272px minmax(0,1fr) 266px;flex:1;min-height:0}.sidebar{padding:28px 23px 20px;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--color-rule)}.location-line{display:flex;align-items:center;gap:7px;color:var(--color-accent);font:9px var(--font-display);letter-spacing:1.8px}.location-line svg{width:12px;height:12px}h1{font-weight:500;font-size:35px;line-height:1.5;letter-spacing:1.5px;margin:17px 0 12px;overflow-wrap:anywhere;min-width:0}h1 span{color:var(--color-accent)}.intro p{font-size:12px;color:var(--color-muted);line-height:1.85;letter-spacing:.7px;margin:0 0 30px}.list-heading{display:flex;align-items:center;justify-content:space-between}.list-heading h2{font-size:13px;font-weight:500;margin:0}.list-heading>span{font-size:10px;color:var(--color-muted)}.filters{display:flex;gap:4px;margin:12px 0 10px;padding-bottom:7px}.filter{padding:8px 10px;color:var(--color-muted);font-size:11px;border-radius:var(--radius-sm);min-height:36px}.filter.active{background:var(--color-panel-hover);color:var(--color-accent)}.landmarks{display:flex;flex-direction:column;gap:5px;overflow-y:auto;min-height:100px;scrollbar-width:thin;scrollbar-color:var(--color-rule) var(--color-clear)}.landmark-item{position:relative;display:flex;align-items:center;text-align:left;gap:12px;padding:10px 8px;border:1px solid var(--color-clear);border-radius:var(--radius-md);flex-shrink:0;min-height:65px}.landmark-item.selected{background:var(--color-panel-hover);border-color:var(--color-rule)}.landmark-art{width:42px;height:42px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--color-panel-hover);color:var(--color-muted)}.landmark-art svg{width:27px;height:27px;stroke-width:1.25}.selected .landmark-art{background:var(--color-paper);color:var(--color-accent)}.landmark-copy{display:flex;flex-direction:column;gap:6px}.landmark-copy strong{font-size:13px;font-weight:500}.landmark-copy small{font-size:10px;color:var(--color-muted)}.landmark-copy small span{padding:0 4px}.item-arrow{margin-left:auto;opacity:0;color:var(--color-accent)}.item-arrow svg{width:15px;height:15px}.selected .item-arrow{opacity:1}.sidebar-bottom{padding-top:20px;margin-top:auto}.sidebar-bottom>div{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--color-muted);margin-bottom:12px}.sidebar-bottom>div svg{width:14px}.primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:45px;background:var(--color-accent);color:var(--color-accent-ink);border-radius:var(--radius-sm);font-size:12px;font-weight:600}.primary svg{width:15px}.primary svg:last-child{margin-left:auto}.primary svg:first-child{margin-left:10px}.primary svg:last-child{margin-right:10px}.sidebar-bottom>small{display:block;text-align:center;margin-top:10px;color:var(--color-muted);font-size:9px}.world{position:relative;overflow:clip;min-width:0;background:var(--color-panel);isolation:isolate}#canvas-wrap{position:absolute;inset:0}#canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none}.scene-top{position:absolute;inset:22px 24px auto;display:flex;align-items:center;justify-content:space-between;gap:10px}.scene-title{display:flex;align-items:center;gap:8px;background:var(--color-overlay);padding:11px 13px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);font-size:11px}.scene-title .tag{font:9px var(--font-mono);padding:3px 4px;border:1px solid var(--color-rule);border-radius:3px;color:var(--color-muted);margin-left:4px}.day-toggle{padding:4px;display:flex;border-radius:var(--radius-sm);background:var(--color-overlay);border:1px solid var(--color-rule)}.day-toggle button{padding:7px 12px;display:flex;align-items:center;gap:7px;color:var(--color-muted);font-size:11px;border-radius:4px;min-height:32px}.day-toggle button.active{background:var(--color-panel-hover);color:var(--color-ink)}.day-toggle button svg{width:15px;height:15px}.scene-caption{position:absolute;top:98px;left:28px;pointer-events:none;color:var(--color-paper);opacity:.65}.scene-caption>span{font:600 44px var(--font-display);letter-spacing:9px}.scene-caption p{margin:5px 0;font-size:10px;letter-spacing:3px}.is-night .scene-caption{color:var(--color-ink);opacity:.55}.compass{position:absolute;right:28px;top:106px;text-align:center;color:var(--color-paper);width:42px;opacity:.7;font:10px var(--font-mono)}.is-night .compass{color:var(--color-ink)}.compass>span{display:block;margin-bottom:7px}.compass svg{width:23px;height:23px;fill:currentColor}.compass small{display:flex;justify-content:space-between;gap:10px;font-size:8px}.compass small span{opacity:.3}.tools{position:absolute;right:22px;top:44%;background:var(--color-overlay);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:3px;display:flex;flex-direction:column;box-shadow:0 8px 25px var(--color-shadow)}.tools .icon-button{width:36px;height:38px;color:var(--color-muted)}.tools .tool-active{color:var(--color-accent)}.tools>span{height:1px;background:var(--color-rule);margin:4px 5px}.scene-bottom{position:absolute;bottom:24px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:10px}.mode-switch{display:flex;background:var(--color-overlay);padding:5px;border:1px solid var(--color-rule);border-radius:var(--radius-sm)}.mode-switch button{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--color-muted);padding:10px 13px;border-radius:4px}.mode-switch button svg{width:15px;height:15px}.mode-switch button.active{background:var(--color-panel-hover);color:var(--color-accent)}.interaction-hint{display:flex;gap:12px;color:var(--color-paper);font-size:9px;opacity:.8}.interaction-hint span{display:flex;align-items:center;gap:5px}.interaction-hint svg{width:13px;height:13px}.is-night .interaction-hint{color:var(--color-ink)}#labels{position:absolute;inset:0;pointer-events:none}.scene-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;padding:9px 11px;background:var(--color-overlay);border:1px solid var(--color-rule);border-radius:var(--radius-sm);font-size:10px;color:var(--color-ink);pointer-events:auto;box-shadow:0 4px 12px var(--color-shadow);will-change:transform}.scene-label:after{content:"";position:absolute;width:1px;height:15px;left:50%;top:100%;background:var(--color-paper);opacity:.5}.label-dot{width:5px;height:5px;background:var(--color-muted);border-radius:50%}.scene-label.selected{background:var(--color-paper);border-color:var(--color-accent);color:var(--color-accent)}.selected .label-dot{background:var(--color-accent)}.label-arrow{font-size:12px;margin-left:2px}.detail-panel{display:flex;flex-direction:column;border-left:1px solid var(--color-rule);padding:25px 22px 18px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-rule) var(--color-clear)}.detail-top{display:flex;justify-content:space-between;color:var(--color-muted);font-size:10px}.detail-top span:last-child{font:10px var(--font-mono)}.detail-image{height:184px;flex-shrink:0;margin:18px 0 20px;border-radius:var(--radius-md);background:var(--color-panel);overflow:clip;position:relative}.detail-image canvas{position:absolute;width:100%!important;height:100%!important;object-fit:contain}.detail-category{display:block;color:var(--color-accent);font-size:10px;letter-spacing:1px}.detail-body h2{font-size:27px;font-weight:500;letter-spacing:2px;margin:10px 0 7px}.detail-body #detail-en{font:9px var(--font-display);letter-spacing:1.3px;color:var(--color-muted);display:block;line-height:1.5}.detail-body h3{font-size:13px;letter-spacing:.8px;font-weight:500;margin:25px 0 10px}.detail-body>p{font-size:11px;color:var(--color-muted);line-height:2;letter-spacing:.3px;margin:0}.detail-features{border-top:1px solid var(--color-rule);margin-top:20px;padding-top:15px}.detail-features>span{display:flex;align-items:center;gap:6px;color:var(--color-muted);font-size:10px}.detail-features svg{width:13px;height:13px}.detail-features p{font-size:10px;line-height:1.8;color:var(--color-ink);margin:8px 0 15px}.focus-button{height:42px;display:flex;align-items:center;width:100%;gap:8px;padding:0 12px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);color:var(--color-accent);font-size:11px}.focus-button svg{width:15px;height:15px}.focus-button svg:last-child{margin-left:auto}.mini-map{margin-top:auto;padding-top:25px}.mini-map-heading{display:flex;align-items:center;justify-content:space-between;color:var(--color-muted);font-size:10px}.mini-map-heading>span:first-child{display:flex;align-items:center;gap:7px}.mini-map-heading svg{width:13px;height:13px}.mini-map>svg{width:100%;height:120px;margin-top:8px;background:var(--color-panel);border:1px solid var(--color-rule);border-radius:var(--radius-sm)}.map-river{fill:none;stroke:var(--color-accent);stroke-width:13;opacity:.15}.map-roads{fill:none;stroke:var(--color-rule);stroke-width:3}.map-mountain{fill:var(--color-accent);opacity:.12}.map-node circle{fill:var(--color-muted);stroke:var(--color-panel);stroke-width:3}.map-node.active circle{fill:var(--color-accent);stroke:var(--color-accent);stroke-opacity:.2;stroke-width:8}.map-node text{fill:var(--color-muted);font:9px var(--font-mono);text-anchor:middle;stroke:none}.map-node.active text{fill:var(--color-accent)}#map-camera{fill:var(--color-amber)}#map-camera path{opacity:.4}.mini-map small{font-size:8px;display:block;text-align:center;color:var(--color-muted);margin:5px 0 17px}.next-landmark{display:flex;align-items:center;gap:10px;padding:15px 0 0;border-top:1px solid var(--color-rule);font-size:9px;color:var(--color-muted)}.next-landmark span{color:var(--color-ink);font-size:11px}.next-landmark svg{margin-left:auto;width:14px;height:14px}footer{height:37px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 25px;border-top:1px solid var(--color-rule);color:var(--color-muted);font-size:9px;letter-spacing:.5px;flex-shrink:0}footer>span{display:flex;align-items:center;gap:12px}.footer-divider{color:var(--color-rule)}footer .tiny-dot{width:4px;height:4px}.tour-bar{position:absolute;bottom:90px;left:50%;transform:translate(-50%);width:min(360px,calc(100% - 40px));background:var(--color-overlay);border:1px solid var(--color-rule);padding:16px;border-radius:var(--radius-md);box-shadow:0 12px 30px var(--color-shadow)}.tour-bar>div:first-child{display:flex;align-items:center;gap:8px;font-size:12px}.tour-bar #tour-count{margin-left:auto;font:10px var(--font-mono);color:var(--color-muted)}.tour-progress{height:2px;background:var(--color-rule);margin:14px 0 7px}.tour-progress span{display:block;height:100%;background:var(--color-accent);transform-origin:left;transform:scaleX(0)}.tour-actions{display:flex;align-items:center;gap:15px}.tour-actions button{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--color-accent);min-height:32px}.tour-actions svg{width:13px;height:13px}.tour-actions button:last-child{margin-left:auto;color:var(--color-muted)}.walk-pad{position:absolute;bottom:90px;left:24px;text-align:center}.walk-pad>div{display:flex;gap:5px;margin-top:5px}.walk-pad button{display:inline-grid;place-items:center;background:var(--color-overlay);border:1px solid var(--color-rule);width:44px;height:44px;border-radius:var(--radius-sm);touch-action:none}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:var(--color-paper);transition:opacity .4s var(--ease-out);z-index:10}.loading strong{font-weight:400;letter-spacing:3px}.loading>span:last-child{font-size:11px;color:var(--color-muted)}.loading-icon svg{width:40px;height:40px;color:var(--color-accent)}.loading.loaded{opacity:0;pointer-events:none}dialog{width:min(500px,calc(100% - 32px));max-height:85dvh;background:var(--color-panel);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:var(--radius-lg);padding:28px}dialog::backdrop{background:var(--color-overlay);opacity:.8}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-heading h2{font-size:22px;font-weight:500;margin:0}dialog>p{font-size:12px;color:var(--color-muted);line-height:1.8}dialog dl>div{border-top:1px solid var(--color-rule);padding:15px 0}dialog dt{font-size:12px;color:var(--color-accent);margin-bottom:7px}dialog dd{margin:0;font-size:12px;line-height:1.8;color:var(--color-muted)}dialog small{display:block;font-size:10px;color:var(--color-muted);line-height:1.8}#toast{position:fixed;bottom:55px;left:50%;transform:translate(-50%,8px);opacity:0;pointer-events:none;padding:12px 20px;background:var(--color-overlay);border:1px solid var(--color-rule);color:var(--color-ink);border-radius:var(--radius-sm);max-width:calc(100% - 32px);font-size:12px;line-height:1.6;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);z-index:50}#toast.visible{opacity:1;transform:translate(-50%)}.world:fullscreen{width:100%;height:100dvh}.world:fullscreen .scene-caption{top:110px}.world:fullscreen .tools{right:30px}@media(hover:hover){.icon-button:hover,.filter:hover,.landmark-item:hover,.mode-switch button:hover,.day-toggle button:hover{background:var(--color-panel-hover);color:var(--color-ink)}.focus-button:hover,.scene-label:hover{border-color:var(--color-accent)}.primary:hover{opacity:.88}.next-landmark:hover{color:var(--color-accent)}}@media(min-width:1500px){main{grid-template-columns:290px minmax(0,1fr) 290px}.sidebar{padding:34px 28px 25px}.detail-panel{padding:28px}.intro p{margin-bottom:38px}.landmark-item{min-height:72px}.detail-image{height:205px}.scene-caption{top:105px;left:32px}.scene-caption>span{font-size:58px}}@media(max-height:850px)and (min-width:1101px){.topbar{height:72px}.sidebar{padding-top:22px}.intro h1{font-size:29px;margin:12px 0 8px}.intro p{margin-bottom:20px}.landmark-item{min-height:56px;padding:6px}.landmark-art{height:35px;width:35px}.landmark-art svg{width:24px;height:24px}.sidebar-bottom{padding-top:12px}.detail-image{height:145px;margin:15px 0}.detail-body h3{margin-top:18px}.detail-features{margin-top:14px;padding-top:12px}.mini-map{padding-top:18px}.mini-map>svg{height:90px}.detail-body h2{font-size:25px}}@media(max-width:1250px){main{grid-template-columns:238px minmax(0,1fr) 230px}.sidebar,.detail-panel{padding-inline:17px}.header-caption span{display:none}.scene-bottom{left:16px;right:16px;bottom:20px}.interaction-hint{display:none}.scene-top{left:16px;right:16px}.scene-caption{left:20px}.mode-switch button{padding-inline:11px}.scene-title{padding:10px}.day-toggle button{padding-inline:9px}.detail-body h2{font-size:24px}.scene-caption>span{font-size:36px}}@media(max-width:1100px){main{grid-template-columns:238px minmax(0,1fr)}.detail-panel{display:none}.topbar{height:74px}.header-caption{font-size:11px}.sidebar{padding-top:22px}.scene-caption>span{font-size:50px}.intro h1{font-size:30px}.intro p{margin-bottom:22px}.scene-bottom{left:24px;right:24px}.interaction-hint{display:flex}.landmark-item{min-height:60px}.sidebar-bottom{padding-top:15px}}@media(max-width:700px){#app{min-height:600px}.topbar{height:66px;padding:0 16px}.brand{font-size:19px;gap:9px;letter-spacing:2px}.brand small{font-size:7px;letter-spacing:2.5px}.brand-mark{width:33px;height:36px}.brand-mark svg{width:22px}.header-caption,.scene-status,.header-actions .live-dot{display:none}.header-actions .icon-button{margin-left:0}main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 152px}.world{grid-row:1}.sidebar{grid-row:2;padding:12px 14px;border-right:0;border-top:1px solid var(--color-rule);position:relative;display:block}.intro,.list-heading,.filters,.sidebar-bottom>div,.sidebar-bottom>small{display:none}.landmarks{flex-direction:row;gap:7px;min-height:0;overflow-x:auto;overflow-y:clip;padding-bottom:7px}.landmark-item{flex-direction:column;gap:5px;min-width:92px;min-height:74px;padding:8px;border-radius:var(--radius-sm);text-align:center}.landmark-art{width:24px;height:24px;background:var(--color-clear)}.landmark-art svg{width:23px;height:23px}.selected .landmark-art{background:var(--color-clear)}.landmark-copy strong{font-size:11px}.landmark-copy small,.item-arrow{display:none}.sidebar-bottom{padding-top:4px}.primary{height:35px;font-size:11px;width:100%}.primary svg:first-child{margin-left:auto}.primary svg:last-child{margin-left:0;margin-right:auto}.scene-top{top:14px;left:12px;right:12px}.scene-title{font-size:10px;gap:6px;padding:9px}.scene-title .tag{display:none}.day-toggle{padding:3px}.day-toggle button{min-height:31px;padding:5px 9px;font-size:10px}.scene-caption{top:79px;left:17px}.scene-caption>span{font-size:34px;letter-spacing:7px}.scene-caption p{font-size:8px;letter-spacing:2px}.compass{top:84px;right:17px}.tools{right:12px;top:35%;padding:2px}.tools .icon-button{height:35px;width:33px}.scene-bottom{left:12px;right:12px;bottom:14px}.mode-switch{padding:3px}.mode-switch button{font-size:10px;padding:8px 10px;gap:6px}.interaction-hint{display:none}.scene-label{font-size:9px;padding:7px 8px;gap:5px}.scene-label .label-arrow{display:none}footer{height:30px;padding:0 13px;font-size:8px}footer>span:first-child{font-size:0;gap:0}.footer-divider{display:none}footer>span:last-child{width:100%;justify-content:space-between}.tour-bar{bottom:70px}.walk-pad{bottom:69px;left:14px}.walk-pad button{height:38px;width:38px}.walk-pad svg{width:16px;height:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}.loading{transition:opacity .1s!important}}@media(max-height:800px)and (min-width:701px){.intro p{display:none}.intro h1{font-size:25px;line-height:1.4;margin:10px 0 20px}.landmark-item{min-height:48px;padding:5px 7px}.landmarks{gap:3px}.landmark-art{width:32px;height:32px}.landmark-art svg{width:23px;height:23px}.sidebar-bottom>div{display:none}.sidebar-bottom>small{font-size:8px}.sidebar-bottom{padding-top:12px}.filters{margin:8px 0 6px;padding-bottom:4px}.detail-image{height:125px}.detail-body h3{margin-top:15px}.mini-map>svg{height:78px}}.world.expanded{position:fixed;inset:0;z-index:100;width:100%;height:100dvh}.world.expanded .scene-top{z-index:2}