:root{color-scheme:dark;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#f5f7fa;background:#080b10}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}#scene{position:fixed;inset:0;outline:none}#scene canvas{touch-action:none}
.masthead{position:fixed;inset:0 0 auto;padding:32px 38px 70px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;background:linear-gradient(#080b10bc,transparent);z-index:4}
.identity{display:flex;gap:15px;align-items:center}.identity>svg{height:35px;width:35px;fill:none;stroke:#83dfda;stroke-width:1.5;stroke-linejoin:round}.identity strong{display:flex;align-items:center;font-size:20px;font-weight:600;letter-spacing:.06em;gap:18px}.identity strong span{color:#d8dde3;font-size:14px;font-weight:400;letter-spacing:.12em;border-left:1px solid #ffffff45;padding-left:18px}.identity small{display:block;color:#c1c9d1;font-size:11px;letter-spacing:.12em;margin-top:7px}
.mode{font-size:11px;letter-spacing:.12em;color:#e7edf2;display:flex;gap:8px;align-items:center;padding-top:9px}.mode i{width:5px;height:5px;border-radius:50%;background:#83dfda}
.playbar{position:fixed;inset:auto 0 0;padding:80px 38px 29px;background:linear-gradient(transparent,#080b10d9);z-index:4;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.view-info>span{font-size:10px;letter-spacing:.15em;color:#b6c8d1}.view-info h2{font-size:23px;font-weight:500;letter-spacing:.06em;margin:8px 0 0}
.transport{display:flex;gap:10px;align-items:center;pointer-events:auto}.transport button{border:1px solid #ffffff30;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;color:white;background:#1017207d;cursor:pointer;backdrop-filter:blur(8px)}.transport button:hover,#retry:hover{background:#ffffff25;border-color:#7bdcd8}.transport button:focus-visible,#retry:focus-visible{outline:2px solid #7bdcd8;outline-offset:4px}.transport button:disabled{opacity:.4;cursor:wait}.transport svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{font-size:11px;letter-spacing:.28em;color:#a8e1df}#loading{position:fixed;inset:0;z-index:3;display:grid;place-items:center;background:linear-gradient(#080b10a8,#080b10a8),url('./poster.webp') center/cover;transition:opacity .8s}.load-copy{text-align:center;padding:25px}.load-copy h1{font-size:clamp(30px,4vw,52px);font-weight:400;letter-spacing:.12em;margin:21px 0}.load-copy p{color:#c6d0d9;font-size:12px;letter-spacing:.1em}.load-line{height:2px;width:220px;max-width:70vw;background:#ffffff25;margin:28px auto 0}.load-line i{height:100%;width:2%;display:block;background:#83dfda;transition:width .3s}body.ready #loading{opacity:0;pointer-events:none}#loading.error{z-index:6}#loading.error .load-line{display:none}#retry{margin-top:18px;padding:11px 22px;border:1px solid #ffffff45;border-radius:24px;color:white;background:#16212c;cursor:pointer;font:inherit;font-size:13px}#retry[hidden]{display:none}
.route-map{position:fixed;right:38px;bottom:106px;width:160px;z-index:4;padding:10px 8px 4px;border:1px solid #ffffff20;border-radius:12px;background:#080b10a6;backdrop-filter:blur(8px);pointer-events:none}.route-map>span{display:block;font-size:10px;letter-spacing:.13em;color:#c6d7dd;padding-left:5px}.route-map small{color:#9aabb5;margin-left:6px;font-size:9px}.route-map svg{width:100%;height:auto;display:block}.route-map [data-route]{stroke:#7eb0bb;stroke-width:1.05;fill:none;opacity:.6}.route-map [data-direction]{stroke:#c4fff6;stroke-width:2;fill:none}.route-map circle{fill:#92eee0;stroke:#13232b;stroke-width:1.5}
.navigation-hint{position:fixed;bottom:19px;left:50%;transform:translateX(-50%);z-index:4;font-size:10px;letter-spacing:.06em;color:#becbd3;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s}body.ready .navigation-hint{opacity:1}.touch-hint{display:none}
#height-status{margin-left:12px;letter-spacing:.05em;color:#83dfda}
@media(max-width:1100px){.navigation-hint{bottom:108px;left:38px;transform:none;max-width:calc(100vw - 76px);white-space:normal;line-height:1.6}.route-map{bottom:140px;width:130px}}
@media(max-width:600px){.masthead{padding:22px 20px 60px}.identity{gap:10px}.identity>svg{width:27px;height:27px}.identity strong{font-size:16px;gap:10px}.identity strong span{font-size:11px;padding-left:10px}.identity small{font-size:9px}.mode{display:none}.playbar{padding:70px 20px 23px;gap:15px}.view-info h2{font-size:17px;line-height:1.5}.transport{gap:8px}.transport button{width:38px;height:38px}.route-map{right:20px;width:108px;bottom:140px}.navigation-hint{left:20px;bottom:106px;font-size:9px}}
.route-map [data-walk-area]{fill:#83dfba;opacity:.22;stroke:none}
.zoom-controls{display:flex;align-items:center;gap:2px;margin-right:8px;border:1px solid #ffffff30;border-radius:23px;background:#1017207d;backdrop-filter:blur(8px)}.zoom-controls button{border:0;background:transparent;width:38px;height:40px}.zoom-controls #zoom-reset{width:48px;border-radius:4px;font:inherit;font-size:12px;font-variant-numeric:tabular-nums}.zoom-controls button:disabled{cursor:default}
@media(max-width:600px){.playbar{flex-wrap:wrap;gap:12px}.view-info{width:100%}.transport{margin-left:auto}.navigation-hint{bottom:143px}.route-map{bottom:176px}.zoom-controls{margin-right:4px}.zoom-controls button{height:36px;width:34px}}
@media(pointer:coarse){.desktop-hint{display:none}.touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){#loading,.navigation-hint{transition:none}}