:root{color-scheme:light;--ink:#192924;--ink-dim:#576760;--accent:#087b53;--accent-deep:#075d42;--accent-text:#08734d;--line:rgba(35,64,52,.12);--panel:rgba(250,253,251,.48);--panel-content:rgba(250,253,251,.66);--bg:#dfe8ec;--bg-deep:#f1f5f3;--body:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--display:var(--body);font-family:var(--body);font-size:14px}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--body)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #12875c;outline-offset:4px}button,button svg{flex-shrink:0}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#stage,#labels{position:fixed;inset:0}#stage canvas{display:block;touch-action:none}#labels{pointer-events:none;overflow:hidden}#grain,#vignette,.stripe,.cross{display:none}
#title,#topr,#rail,#panel,#viewbadge{box-shadow:0 12px 40px #193f2914,inset 0 1px 0 #ffffffd9;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid #ffffffa8;background:var(--panel)}
#title{position:fixed;z-index:5;top:24px;left:24px;display:flex;align-items:center;gap:12px;padding:11px 19px 11px 12px;border-radius:23px;pointer-events:none}#title img{width:38px;height:38px;object-fit:contain;border-radius:10px}#title .b{font-size:18px;font-weight:650;letter-spacing:-.6px;line-height:1.25}#title .a{font-size:12px;font-weight:500;color:var(--ink-dim);margin-top:2px}
#topr{position:fixed;z-index:5;top:24px;right:24px;display:flex;gap:5px;padding:7px;border-radius:24px}.ibtn{border:0;background:transparent;color:var(--ink);border-radius:16px;width:42px;height:42px;display:grid;place-items:center}.ibtn:hover{background:#173d2810}.ibtn svg{width:20px;height:20px}
#viewbadge{position:fixed;z-index:4;top:35px;left:50%;transform:translateX(-50%);border-radius:30px;padding:10px 16px;font-size:12px;font-weight:550;color:var(--ink-dim)}#viewbadge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#19a66d;margin-right:8px;vertical-align:1px}
#rail{position:fixed;z-index:9;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:5px;padding:7px;border-radius:28px}.rbtn{border:0;color:var(--ink-dim);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:94px;height:62px;border-radius:21px;transition:background .2s,color .2s,transform .2s}.rbtn .tip{font-size:11px;font-weight:600;white-space:nowrap}.rbtn svg{width:22px;height:22px}.rbtn:hover{background:#ffffff66;color:var(--ink)}.rbtn:active{transform:scale(.96)}.rbtn.on{color:var(--accent-text);background:#d6eee28c}.rbtn#btnWalk.on{background:var(--accent);color:white}
#panel{background:var(--panel-content);position:fixed;z-index:7;right:24px;top:104px;width:338px;max-height:calc(100dvh - 218px);overflow:auto;border-radius:28px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.98);transition:opacity .22s,transform .22s,visibility .22s;scrollbar-width:thin}#panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}#panel h2{margin:0;padding:23px 25px 8px;font-size:20px;letter-spacing:-.7px;font-weight:650}#btnClosePanel{position:absolute;top:15px;right:15px;width:32px;height:32px;border:0;border-radius:50%;display:grid;place-items:center;background:#254d3010;color:var(--ink-dim)}#btnClosePanel svg{width:16px;height:16px}.view{display:none;padding:0 24px 24px}.view.on{display:block}.lead{font-size:13px;line-height:1.55;color:var(--ink-dim);margin:0 0 16px;max-width:245px}
#list{margin:0;padding:0;list-style:none}#list li{border-top:1px solid var(--line)}.stop{width:100%;border:0;background:none;text-align:left;display:flex;align-items:center;gap:13px;padding:16px 0;color:var(--ink)}.stop::after{content:"›";margin-left:auto;color:#7c8d85;font-size:23px;font-weight:300}.stop:hover .t{color:var(--accent)}.num{width:30px;height:30px;display:inline-grid;place-items:center;flex:none;border-radius:11px;background:#dfebe399;color:var(--accent-text);font-size:13px;font-weight:650}.t{font-size:14px;font-weight:600;letter-spacing:-.2px}.s{display:block;font-size:12px;color:var(--ink-dim);margin-top:4px}
#dsub{margin:12px 0 8px;font-size:11px;font-weight:600;color:var(--accent-text);letter-spacing:.5px}#dname{margin:0 0 16px;font-size:22px;letter-spacing:-.7px;line-height:1.2;font-weight:650}#dname .num{display:none}#dimg{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:17px;background:#dde6e1;margin-bottom:15px}#dtext{font-size:13px;line-height:1.65;color:var(--ink-dim)}#dtext p{margin:0 0 10px}#dtext p+p{display:none}#dfacts{display:grid;grid-template-columns:1fr 1fr;gap:13px 18px;padding-top:15px;margin-top:16px;border-top:1px solid var(--line)}#dfacts div{font-size:11px;color:var(--ink-dim)}#dfacts b{display:block;color:var(--ink);font-size:14px;margin-top:4px;font-weight:600}.nav{display:flex;justify-content:space-between;align-items:center;margin-top:21px}.back{border:0;background:none;color:var(--accent);display:flex;align-items:center;gap:3px;padding:10px 0;font-size:13px;font-weight:600}.stepper{display:flex;gap:5px}.stepper button{width:32px;height:32px;border:0;border-radius:50%;color:var(--ink-dim);background:#23433109;font-size:12px}.stepper .cur{background:var(--accent);color:white}
.marker{pointer-events:auto;cursor:pointer;position:relative;width:0;height:0}.pin{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border:1px solid #ffffffdf;background:#f8fffae6;border-radius:50%;color:var(--accent);display:grid;place-items:center;font-weight:650;font-size:13px;box-shadow:0 3px 12px #1537212b;transition:transform .2s,background .2s}.marker:hover .pin,.marker.active .pin{transform:scale(1.13);background:var(--accent);color:white;border-color:#ffffffd0}.marker.dim{opacity:.28}.callout{position:absolute;left:25px;top:-15px;padding:8px 12px;border-radius:12px;background:#fafff9eb;box-shadow:0 4px 16px #17352617;color:var(--ink);font-size:12px;font-weight:550;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s}.marker:hover .callout{opacity:1}
#hint{position:fixed;z-index:5;bottom:115px;left:50%;transform:translateX(-50%);display:flex;gap:16px;font-size:11px;color:#f5fcf8;pointer-events:none;background:#1b30286e;padding:7px 13px;border-radius:20px}#hint b{font-weight:650}#credit{display:none}
#loader{position:fixed;inset:0;z-index:20;background:#edf3f0;display:grid;place-items:center;transition:opacity .5s,visibility .5s}#loader.gone{opacity:0;visibility:hidden;pointer-events:none}.lbox{width:min(240px,75vw);text-align:center}.lbox .mark{display:block;width:74px;height:74px;object-fit:contain;margin:auto}.lbox .sub{font-size:14px;font-weight:550;color:var(--ink-dim);margin:24px 0 20px}.bar{height:4px;border-radius:4px;background:#d4e2d9;overflow:hidden;position:relative}.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:4px;transition:width .2s}.pct{font-size:11px;color:var(--ink-dim);margin-top:12px}
#info,#walkstart{position:fixed;inset:0;z-index:15;display:none;place-items:center;background:#152d2638;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}#info.open,#walkstart.on{display:grid}.card,.wbox{width:min(410px,calc(100vw - 32px));background:var(--panel-content);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid white;border-radius:30px;padding:30px;box-shadow:0 24px 80px #092c2426}.card h3,.wbox h3{font-size:24px;letter-spacing:-.8px;margin:0 0 15px}.card p,.wbox p{font-size:14px;line-height:1.65;color:var(--ink-dim)}kbd{font:inherit;font-size:12px;padding:3px 6px;background:#e7eee9;border-radius:5px}.wbox{text-align:center}.wbox button{border:0;border-radius:16px;background:var(--accent);color:white;width:100%;padding:15px;font-size:14px;font-weight:600}
#walkhud{position:fixed;z-index:6;bottom:117px;left:50%;transform:translateX(-50%);display:none;pointer-events:none}.whint{backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);padding:10px 16px;background:var(--panel);border:1px solid #ffffffb8;border-radius:30px;color:var(--ink-dim);font-size:11px;white-space:nowrap}#walkhud.on{display:block}body.walking #hint{display:none}#touchpad{display:none}
@media(max-width:700px){#title{top:max(16px,env(safe-area-inset-top));left:16px;padding:9px 15px 9px 10px;gap:9px;border-radius:21px}#title img{width:32px;height:32px}#title .b{font-size:16px}#title .a{font-size:11px}#topr{top:max(16px,env(safe-area-inset-top));right:16px;padding:5px;border-radius:21px;gap:0}.ibtn{width:36px;height:40px}#viewbadge{display:none}#rail{bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100vw - 24px);width:358px;padding:6px;gap:2px;border-radius:26px}.rbtn{flex:1;width:auto;min-width:0;height:59px;border-radius:20px}.rbtn .tip{font-size:10px}#panel{top:auto;bottom:calc(102px + env(safe-area-inset-bottom));right:12px;left:12px;width:auto;max-height:58dvh;border-radius:28px}#panel h2{font-size:20px;padding-top:23px}#panel::before{content:"";display:block;position:absolute;top:8px;left:calc(50% - 16px);width:32px;height:4px;background:#d1dcd5;border-radius:4px}.view{padding-bottom:20px}#dimg{display:none!important}#dfacts{grid-template-columns:repeat(4,1fr);gap:8px}#dfacts div{font-size:10px}#dfacts b{font-size:12px}.nav{margin-top:14px}#hint{display:none}#walkhud{bottom:107px}.whint{font-size:10px;padding:9px 12px}}
@media(pointer:coarse){body.walking #touchpad{position:fixed;bottom:115px;left:18px;z-index:10;display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px);gap:5px;touch-action:none}#touchpad button{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid #ffffffb8;background:var(--panel);border-radius:14px;color:var(--ink);font-size:20px;touch-action:none}#touchpad [data-key=w]{grid-column:2}#touchpad [data-key=a]{grid-row:2}#touchpad [data-key=s]{grid-row:2;grid-column:2}#touchpad [data-key=d]{grid-row:2;grid-column:3}#walkhud{bottom:220px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--panel:#f0f5f2;--panel-content:#f7faf8}}
@media(prefers-reduced-transparency:reduce){:root{--panel:#f7faf8;--panel-content:#f7faf8}#title,#topr,#rail,#panel,#viewbadge,.card,.wbox,.whint,#touchpad button{backdrop-filter:none;-webkit-backdrop-filter:none}}