*{box-sizing:border-box}body{margin:0;background:#faf8ef;color:#203c2b;font:14px Arial,sans-serif}header{text-align:center;padding:20px 20px 16px}header a{font:600 28px Georgia;color:inherit;text-decoration:none}header small{display:block;font-size:10px;letter-spacing:2px;margin-top:10px;color:#60705e}h1{font:500 clamp(29px,4vw,49px)/1.1 Georgia;margin:17px 0 10px}header p{margin:0;font-size:16px}.toolbar{display:flex;justify-content:center;gap:35px;align-items:center;padding:12px 20px;border-block:1px solid #d9ddce}.search{position:relative;width:300px}input{width:100%;padding:11px;border:1px solid #d4d9c8;background:#fffdf5;font:14px Arial;color:#213c29}#results{position:absolute;top:100%;left:0;right:0;background:#fffdf5;z-index:20;box-shadow:0 5px 15px #243b2420}#results button{display:block;width:100%;text-align:left;padding:12px;border-bottom:1px solid #d4d9c8}button{border:0;background:none;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}nav{display:flex;gap:24px}nav button{padding:10px 0}nav button:hover{box-shadow:0 1px #365a3b}.stage{position:relative;height:72vh;min-height:520px;max-height:950px}#view{position:absolute;inset:0}#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#leader{fill:none;stroke:#284b35;stroke-width:1.5}#note{position:absolute;width:320px;max-width:calc(100% - 30px);background:#faf8efed;padding:12px 25px 12px 14px;z-index:5}#note h2{font:600 22px/1.15 Georgia;margin:0 0 8px}#note p{font-size:13px;line-height:1.5;margin:6px 0}#facts{color:#50604b}#source{font-size:12px;color:inherit;text-underline-offset:4px}#close{position:absolute;right:3px;top:2px;font-size:23px}.hint{position:absolute;bottom:26px;left:15px;background:#faf8efdf;padding:5px 8px;font-size:11px;pointer-events:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#faf8ef;z-index:10}.journey{display:flex;align-items:center;gap:18px;padding:20px 25px;border-top:1px solid #ccd1bf;flex-wrap:wrap}.journey small{font-size:10px;letter-spacing:2px}.journey strong{font:500 21px Georgia;flex:1}.journey button{padding:8px}.journey button:disabled{opacity:.35}#lastleg{flex-basis:100%;font-size:12px;margin:0;color:#5e6858}footer{font-size:11px;color:#69715f;padding:0 25px 18px;line-height:1.5}[hidden]{display:none!important}.esri-view .esri-view-surface--inset-outline:focus::after{outline:none!important}@media(max-width:650px){header{padding:18px 16px}h1{max-width:340px;margin:14px auto 10px}.toolbar{display:block;padding:10px 16px}.search{width:100%}input{font-size:16px}nav{justify-content:space-between;gap:12px;padding-top:6px}.stage{height:66vh;min-height:510px}.journey{padding:16px;gap:12px}.journey small,.journey strong{flex-basis:100%}.journey strong{font-size:19px}#total{flex:1}#note h2{font-size:19px}#note{width:270px}.hint{max-width:75%;font-size:10px}footer{padding-inline:16px}}

#pulse{position:absolute;width:38px;height:24px;border:1px solid #4b7851;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;background:#79ad6822;animation:city-pulse 2.4s ease-out infinite}@keyframes city-pulse{to{box-shadow:0 0 0 14px #648c4b00}from{box-shadow:0 0 0 0 #648c4b66}}@media(prefers-reduced-motion:reduce){#pulse{animation:none}}

header{padding:18px 20px 13px}header small{margin-top:8px}h1{font-size:clamp(28px,3.4vw,43px);margin:13px 0 8px}header p{font-size:14px}.stage{height:76vh;min-height:570px}#note{background:linear-gradient(90deg,#faf8eff5,#faf8efe0);border-left:1px solid #58704b;padding-left:16px}#next-place{display:block;text-align:left;border-bottom:1px solid #819372;margin-top:12px;padding:4px 0;font-size:12px}#note p:empty{display:none}#view{filter:none}.hint{padding:7px 10px}.journey{background:#faf8ef}@media(max-width:650px){header{padding:14px 16px 12px}header a{font-size:24px}header small{font-size:9px}h1{font-size:30px;margin-top:13px}header p{font-size:13px;line-height:1.5}.stage{height:73vh;min-height:570px}.toolbar{padding-top:8px;padding-bottom:5px}nav{font-size:12px}#note{width:250px;max-width:calc(100% - 30px)}#note h2{font-size:18px}#note p{font-size:12px}#next-place{font-size:12px}}
.embedded header{display:none}.embedded .stage{height:580px;min-height:580px;max-height:580px}.embedded footer{padding-bottom:12px}@media(max-width:650px){.embedded .stage{height:570px;min-height:570px}}
:root{--city-forest:#164e35;--city-leaf:#86b475;--city-water:#68aab9;--city-road:#687b7d;--city-path:#b74c2d}
#city-world{color:var(--city-forest)}.toolbar{background:#edf2e4;border-color:#cad9bd}nav button{color:#245438}input{border-color:#b7c9ad}nav button:hover,nav button:focus-visible{box-shadow:0 2px var(--city-forest)}.journey{border-top:2px solid #9ab78a}#note{border-left:2px solid var(--city-forest)}#source,#next-place{color:var(--city-forest)}
.city-key{display:flex;gap:14px;flex-wrap:wrap;padding:9px 20px;background:#f6f7ee;border-top:1px solid #d3dcc8;font:11px Arial;color:#304b38}.city-key span{display:flex;align-items:center;gap:6px}.city-key i{display:inline-block;width:15px;height:5px;background:var(--city-road)}.city-key .park{background:var(--city-leaf);height:9px}.city-key .water{background:var(--city-water);height:9px}.city-key .path{background:var(--city-path)}
/* Compact building annotation and direct view controls. */
#city-world #note{width:240px;padding:8px 34px 8px 10px;border:0;border-left:2px solid #245438;background:#fffdf3f2;box-shadow:0 2px 10px #183b2810;max-width:calc(100% - 24px)}
#city-world #note h2{font:600 16px/1.2 Georgia,serif;margin:0 0 4px;color:#163d2b}
#city-world #note p{font:12px/1.4 Arial,sans-serif;margin:4px 0}
#city-world #close{width:36px;height:36px;right:0;top:0;font:24px/1 Arial;display:grid;place-items:center}
#city-world #more-details{font:12px/1.4 Arial;margin-top:5px}#more-details summary{cursor:pointer;min-height:28px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px}#more-details[open] summary{margin-bottom:6px}#more-details[open]{max-height:160px;overflow:auto}
#city-world #source{font-size:12px;display:inline-block;min-height:28px;padding-top:6px}
.view-controls{position:absolute;right:12px;top:12px;z-index:6;display:flex;background:#fffdf5f5;border:1px solid #c5d0bd;border-radius:4px;overflow:hidden;box-shadow:0 2px 8px #173f2517}
#city-world .view-controls button{min-height:44px;min-width:78px;padding:8px 12px;font:13px Arial;color:#20472f}.view-controls button+button{border-left:1px solid #d4dccc}.view-controls button[aria-pressed=true]{background:#edf2e4}
#city-world button:focus-visible,#city-world summary:focus-visible{outline:2px solid #24603f;outline-offset:2px}
#city-world .esri-ui-top-left{top:12px;left:12px}#city-world .esri-widget--button{width:40px;height:40px;color:#274831}
#city-world .map-moving #note{pointer-events:none}.map-moving #note,.map-moving #leader,.map-moving #pulse{opacity:0;pointer-events:none}#note,#leader,#pulse{transition:opacity .16s ease}
#city-world .journey{padding:14px 20px;gap:10px 16px}#city-world .journey strong{font:500 16px/1.4 Georgia;overflow-wrap:anywhere}#city-world #next-place{margin:0;min-height:42px;padding:8px 0;border-bottom:1px solid #91a184;font:13px Arial;text-align:left}
#city-world .journey button{min-height:42px}#city-world .hint{font:11px/1.4 Arial;max-width:calc(100% - 30px);bottom:30px;padding:5px 8px;background:#faf8efdf}
#city-world .city-key{gap:9px 14px;font-size:11px;padding:7px 16px}#city-world .city-key>a{margin-right:auto}#city-world .city-key span{display:none}
#city-world .stage{height:74svh;min-height:500px}.embedded #city-world .stage{height:570px;min-height:570px}
@media(max-width:650px){#city-world #note{width:224px}#city-world #note h2{font-size:15px}#city-world .journey{padding:12px 16px}#city-world .journey strong{font-size:16px}#city-world #next-place{flex-basis:100%}#city-world .view-controls button{min-width:76px;padding:8px 10px}#city-world .toolbar nav button{min-height:44px}#city-world .stage{min-height:480px;height:70svh}.embedded #city-world .stage{height:570px;min-height:570px}}
@media(prefers-reduced-motion:reduce){#note,#leader,#pulse{transition:none}}

#city-world .stage #next-place{position:absolute;bottom:64px;right:12px;z-index:6;min-height:44px;margin:0;padding:10px 14px;background:#fffdf5f5;border:1px solid #9aad92;border-radius:3px;box-shadow:0 2px 8px #173f2517;font:13px Arial;color:#17492f;max-width:calc(100% - 24px)}