:root{--sky-night: #0B1025;--night-secondary: #151C37;--ink: #E8DDC3;--wall-ochre: #D9A653;--window-light: #F6CD80;--lantern-orange: #E58A45;--lantern-red: #D65B4D;--bougainvillea: #9C77AD;--river-night: #0D1730;--water-reflection: #EAC078;--page-bg: #06080f;--ui-bg: rgba(8, 11, 24, .58);--ui-border: rgba(232, 221, 195, .2);--ui-fg: #E8DDC3;--focus: #F6CD80;--scene-ink: #E8DDC3;--scene-shadow: rgba(6, 8, 18, .55);--font: "Be Vietnam Pro", "Noto Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--page-bg);color:var(--ui-fg);font-family:var(--font);-webkit-font-smoothing:antialiased}body{overflow-x:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.page{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}.card{position:relative;width:min(calc(100vw - 32px),calc((100svh - 64px)*1.981));aspect-ratio:1765 / 891;border-radius:18px;overflow:hidden;background:var(--sky-night);border:1px solid rgba(232,221,195,.12);box-shadow:0 28px 70px -36px #000000e6,0 0 0 1px #0006;isolation:isolate}.viewport{position:absolute;inset:0;overflow:hidden;outline:none}.stage{position:relative;width:100%;height:100%}.stage svg{position:absolute;inset:0;display:block;width:100%;height:100%;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}#scene-static,#hoi-an-scene{pointer-events:none}#scene-static>g,#hoi-an-scene>g{pointer-events:auto}.stage svg :focus{outline:none}.stage svg :focus-visible{outline:none}.overlay{position:absolute;z-index:2}.overlay-tl{top:clamp(10px,2.2%,22px);left:clamp(12px,2%,26px);color:var(--scene-ink);text-shadow:0 1px 6px var(--scene-shadow);pointer-events:none}.clock-row{display:flex;align-items:center;gap:10px;font-size:clamp(12px,1.05vw,15px);letter-spacing:.02em}.clock-row time{font-variant-numeric:tabular-nums;font-weight:600}.clock-row .place{opacity:.92}.pin{width:9px;height:12px;fill:none;stroke:currentColor;stroke-width:1.3;margin-right:-4px}.subtitle{margin-top:4px;font-size:clamp(11px,.85vw,13px);opacity:.62;letter-spacing:.04em;font-style:italic}.hint{left:clamp(12px,2%,26px);bottom:clamp(10px,2.2%,20px);margin:0;max-width:46%;font-size:clamp(11px,.8vw,13px);color:var(--scene-ink);opacity:.72;text-shadow:0 1px 6px var(--scene-shadow);pointer-events:none;transition:opacity 1.4s ease}.hint.gone{opacity:0}.pan-hint{display:none;left:50%;bottom:58px;transform:translate(-50%);padding:7px 14px;border-radius:999px;border:1px solid var(--ui-border);background:var(--ui-bg);color:var(--ui-fg);font:500 12.5px var(--font);letter-spacing:.02em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;transition:opacity 1s ease;white-space:nowrap}.pan-hint span{opacity:.7;font-size:15px}.controls{right:clamp(10px,1.6%,22px);bottom:clamp(10px,2.2%,20px);display:flex;gap:6px}.ctl{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:34px;height:34px;padding:0 9px;border-radius:999px;cursor:pointer;border:1px solid var(--ui-border);background:var(--ui-bg);color:var(--ui-fg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:500 12px var(--font);letter-spacing:.02em;transition:background .25s ease,border-color .25s ease,transform .15s ease}.ctl:hover{background:#141a32bf;border-color:#f6cd8073}.ctl:active{transform:scale(.96)}.ctl:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.ctl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.ctl .ic-play{display:none}.ctl[aria-pressed=true] .ic-play{display:block}.ctl[aria-pressed=true] .ic-pause{display:none}.ctl .ic-play path{fill:currentColor;stroke:none}.ctl .ic-sun{display:none}.ctl.is-day .ic-sun{display:block}.ctl.is-day .ic-moon{display:none}.ctl-label{padding-right:2px}.ctl[hidden]{display:none}.ctl.busy{opacity:.6;pointer-events:none}.foot{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#e8ddc36b}.noscript{text-align:center;color:var(--ink)}.card:fullscreen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border-radius:0;border:0;background:var(--page-bg)}.card:fullscreen .stage svg{background:transparent}body.panorama .page{padding:12px 0 14px;justify-content:center;padding-top:max(12px,env(safe-area-inset-top))}body.panorama .card{width:100%;aspect-ratio:auto;height:calc(var(--pano-h, 70svh) + 58px);border-radius:0;border-left:0;border-right:0;background:var(--page-bg)}body.panorama .viewport{bottom:58px;background:var(--sky-night);overflow-x:auto;overflow-y:hidden;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab}body.panorama .viewport::-webkit-scrollbar{display:none}body.panorama .stage{width:var(--stage-w, 1200px);height:100%}body.panorama .pan-hint{display:block;bottom:72px}body.panorama .pan-hint.gone{opacity:0}body.panorama .hint{top:66px;bottom:auto;max-width:72%}body.panorama .controls{left:50%;right:auto;transform:translate(-50%);bottom:11px}body.panorama .ctl-label{display:none}body.panorama .foot{margin-top:2px}@media(max-width:900px){.ctl-label{display:none}}@media(prefers-reduced-motion:reduce){.hint,.pan-hint,.ctl{transition:none}}