/* A map-first city: quiet controls at its edges, generous reading sizes. */
:root{--teal:#087a66;--ink:#153f37;--muted:#4d6961;--line:#d6e5d7;--paper:#fffdf5;font-size:18px}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:#e7f5e8}button,a,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #df9b1f;outline-offset:3px}button:hover{filter:brightness(.97)}.island-app{position:relative;width:100%;height:100dvh;overflow:hidden;isolation:isolate}.city-art{position:absolute;inset:0;height:100%;width:100%;max-height:none;touch-action:none;background:radial-gradient(ellipse at 50% 47%,#fffde7 0%,#eef9e7 45%,#d3f0ed 100%)}.city-art[data-phase=noon]{background:radial-gradient(ellipse at 48% 45%,#fffce1,#eff9e4 46%,#d6f3ef)}.city-art[data-phase=dawn]{background:radial-gradient(ellipse at 50% 40%,#fff2cd,#f7f9df 50%,#d1f0ef)}.city-art[data-phase=dusk]{background:radial-gradient(ellipse at 50% 45%,#fff1c6,#ffe0b8 55%,#f3cbbb)}.city-art[data-phase=night]{background:radial-gradient(ellipse at 50% 45%,#c1d7d0,#789bb1 65%,#557c9b)}.city-canvas{touch-action:none;cursor:grab}.city-canvas:active{cursor:grabbing}.island-header{position:absolute;left:24px;right:24px;top:24px;z-index:15;display:flex;align-items:flex-start;gap:32px;pointer-events:none}.island-header>*{pointer-events:auto}.home-mark{display:flex;gap:9px;align-items:center;text-decoration:none;color:#087562;flex-shrink:0}.home-mark svg{width:47px;height:54px}.home-mark strong{display:block;font-weight:900;font-size:25px;letter-spacing:-.055em;line-height:1.4}.home-mark small{display:block;font-size:13px;letter-spacing:.09em;color:#47685c;font-weight:700}.home-mark small span{margin-left:10px}.map-heading{border-left:1px solid #a9cbb5;padding-left:25px}.map-heading p{font-size:14px;letter-spacing:.14em;margin:0 0 3px;color:#4b7564}.map-heading h1{font-size:29px;font-weight:850;letter-spacing:-.04em;margin:0;line-height:1.5}.map-heading>span{display:block;color:#587566;font-size:16px;margin-top:3px}.header-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.header-actions button{background:#fffdf5eb;padding:9px 14px;border:1px solid #bfd7c4;border-radius:13px;color:#215947;box-shadow:0 3px 10px #155c4210;font-size:17px;min-height:48px}.header-actions .policy-index{background:#0a7d68;color:white;border-color:#0a7d68}.policy-index b{margin-left:5px;font-size:15px;padding:2px 7px;border-radius:8px;background:#ffffff26}#helpOpen{font-weight:800;width:48px}#menuToggle{display:none}.map-nav{position:absolute;left:24px;top:152px;width:140px;z-index:10;display:flex;flex-direction:column;gap:3px}.map-nav p{font-size:13px;letter-spacing:.1em;color:#678171;margin:4px 0 6px 6px}.map-nav button{border-radius:12px;text-align:left;display:flex;align-items:center;gap:9px;padding:8px 5px;font-size:17px;font-weight:600;line-height:1.5;background:none;white-space:nowrap;color:#345b4e}.map-nav i{font-style:normal;font-size:22px;display:grid;place-items:center;border:1px solid #b5d0bd;width:35px;height:35px;background:#fffdf3c9;border-radius:12px;color:#16846e;flex-shrink:0}.map-nav .nav-active{color:#096c55;background:#ffffff9c}.map-nav .nav-active i{background:#087c66;color:white}.map-nav .coral{color:#dc725d;background:#ffede1;border-color:#ecc4b1}.map-nav .blue{color:#308fae;background:#e4f5fa;border-color:#abd4e0}.map-nav .green{color:#548e24;background:#eff8d5;border-color:#c4db9c}.map-nav .orange{color:#c58216;background:#fff2cd;border-color:#e8cb91}.map-nav .purple{color:#7d6bb3;background:#f0eafd;border-color:#cfc4e7}.nav-divider{height:1px;width:112px;background:#c4d8be;margin:13px 0 8px}.map-nav .minor-nav{font-size:16px;font-weight:500;min-height:42px;padding-left:6px}.place-panel{position:absolute;z-index:12;top:112px;right:24px;width:300px;max-height:calc(100dvh - 228px);background:#fffdf5f5;border:1px solid #d5e1c9;border-radius:21px;box-shadow:0 12px 42px #215e3b13;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;outline:0}.panel-tabs{display:flex;position:sticky;top:0;background:#fffdf5;z-index:2;padding:10px 17px 0;border-bottom:1px solid #d9e5d0;gap:14px}.panel-tabs button{padding:7px 0 13px;border-bottom:3px solid transparent;border-radius:0;background:none;flex:1;font-size:18px;font-weight:700;color:#63806b;white-space:nowrap}.panel-tabs button[aria-selected=true]{border-color:#0b826a;color:#12684f}.panel-tabs b{font-size:14px;font-weight:500;background:#e7efda;padding:2px 6px;border-radius:6px;margin-left:2px}.panel-handle{display:none}#storyDock{display:block;padding:23px 21px 18px;background:transparent;position:relative}.place-eyebrow{font-size:14px;letter-spacing:.12em;color:#6c856d;margin:0 0 8px;display:flex;align-items:center;gap:8px}.place-eyebrow .live-dot{width:7px;height:7px}.place-name{font-size:27px;font-weight:800;line-height:1.45;letter-spacing:-.03em;margin:0 0 10px}.place-intro{font-size:18px;line-height:1.85;color:#506c5b;margin:0 0 19px}.place-section-title{font-size:15px;color:#70836c;margin:18px 0 10px;display:flex;align-items:center;gap:9px}.place-section-title:after{content:'';height:1px;background:#d9e5cc;flex:1}.story-policies{display:flex;flex-direction:column;gap:8px;padding:0}.story-policies button{width:100%;display:flex;justify-content:space-between;gap:10px;font-size:18px;line-height:1.65;padding:12px 13px;min-height:48px;background:#eff3e4;border:1px solid #e2e9d6;border-radius:11px}.story-policies button span{flex-shrink:0;margin:0;color:#258872}.resident-life{padding:14px 0 0;margin-top:17px;border-top:1px dashed #cfddc2}.resident-life strong{font-size:16px;display:block;color:#396247}.resident-life p{margin:5px 0 9px;font-size:17px;line-height:1.8;color:#6b7c68}.resident-life button{padding:5px 0;background:none;color:#16816a;font-size:17px;text-decoration:underline;text-underline-offset:5px}.next-stop{display:flex;justify-content:space-between;align-items:center;margin-top:17px;padding-top:13px;border-top:1px solid #d9e5d0;gap:10px}.next-stop span{font-size:14px;color:#77886b}.next-stop button{background:#0c8068;color:white;padding:10px 15px;font-size:18px;border-radius:10px;white-space:nowrap}.place-search{display:flex;align-items:center;gap:6px;margin:18px 16px 10px;padding:7px 11px;border:1px solid #baceb6;border-radius:10px;background:white}.place-search input{border:0;background:none;width:100%;min-width:0;min-height:38px;font-size:17px;outline:0}#placesCount{font-size:14px;color:#6f816b;margin:8px 20px}#landmarkList{display:flex;flex-direction:column;padding:0 16px 16px;gap:5px}#landmarkList button{display:flex;align-items:center;gap:9px;width:100%;border-radius:10px;background:transparent;text-align:left;font-size:18px;line-height:1.6;padding:10px 9px}#landmarkList button small{font-size:13px;color:#6e846b;min-width:27px}#landmarkList button:after{content:'↗';margin-left:auto;color:#6f967e}#landmarkList button.selected{background:#e2efdc;color:#116e51}.map-compass{top:auto;bottom:185px;right:346px;width:58px;height:68px;z-index:10;background:#fffdf2cc;border:1px solid #bcd6c1;box-shadow:none}#northArrow{font-size:33px;height:59px;width:50px;line-height:31px}#northArrow b{font-size:14px;line-height:23px}.view-tools{position:absolute;bottom:112px;right:346px;z-index:10;display:flex;align-items:center;gap:6px}.view-tools button{width:44px;min-height:44px;font-size:24px;background:#fffdf4e8;border-radius:11px;border:1px solid #bed5bd;color:#285c4b;box-shadow:0 3px 10px #376b3310}#resetCamera{font-size:17px;width:65px}.view-tools output{font-size:13px;min-width:43px;text-align:center;color:#557a62}.bottom-dock{position:absolute;left:24px;bottom:38px;right:346px;z-index:15;display:flex;align-items:center;gap:7px;justify-content:center}.bottom-dock>button,.travel-pop>button{padding:10px 13px;min-height:49px;border:1px solid #bed4b9;background:#fffdf4ee;border-radius:13px;white-space:nowrap;font-size:17px;color:#36654f}.time-tools{display:flex;align-items:center;gap:2px;padding:5px;background:#fffdf4ef;border:1px solid #bfd6bb;border-radius:15px;box-shadow:0 4px 15px #39652f09}.time-tools>span{font-size:14px;font-weight:700;color:#64815c;padding:0 8px;font-variant-numeric:tabular-nums}.time-tools button{padding:8px 11px;min-height:40px;background:none;border-radius:10px;white-space:nowrap;font-size:17px;color:#53704c}.time-tools button.on{background:#ffdb71;color:#6e4a0d;font-weight:800}.travel-pop{position:relative}#travelControls{position:absolute;bottom:61px;left:0;width:144px;background:#fffdf5;border:1px solid #bcd4b8;border-radius:13px;padding:7px;box-shadow:0 8px 25px #244f321f;display:flex;flex-direction:column}#travelControls button{text-align:left;background:none;border-radius:8px;padding:10px 13px;font-size:18px}#travelControls button[aria-pressed=true]{background:#dbeed9;color:#14684d}.map-caption{position:absolute;left:24px;right:346px;bottom:6px;margin:0;text-align:center;font-size:13px;color:#688367;z-index:2;pointer-events:none}.map-caption>span{margin:0 7px}.map-caption .live-dot{width:6px;height:6px;margin-right:3px}.motion-notice{position:absolute;z-index:17;left:190px;right:346px;top:117px;padding:12px 15px;border:1px solid #dbc388;border-radius:12px;background:#fff1cdee;box-shadow:0 4px 15px #7663380c}.motion-notice p{font-size:16px}.motion-notice button{font-size:16px;min-height:44px;padding:5px 10px}.world-labels{pointer-events:none}.city-art .landmark-label{font-size:16px;min-height:36px;border:1px solid #c4d7b7;background:#fffdf4e8;box-shadow:0 3px 10px #28563212;border-radius:9px;padding:5px 9px;gap:6px;z-index:4;white-space:nowrap;pointer-events:auto;transition:background .2s}.landmark-label span{background:#28a879;width:6px;height:6px;flex-shrink:0}.city-art .landmark-label.selected{background:#087b64;color:white;border-color:#087b64;z-index:6}.landmark-label.selected span{background:#ffdc59}.city-art .landmark-label.pin-only{font-size:0;min-width:44px;min-height:44px;width:44px;height:44px;background:transparent;border:0;box-shadow:none;padding:0;display:grid;place-items:center}.city-art .landmark-label.pin-only span{height:7px;width:7px;box-shadow:0 0 0 4px #fffdf5e8}.city-art .landmark-label.pin-only:after{display:none}.city-art .landmark-label.pin-only:hover,.city-art .landmark-label.pin-only:focus-visible{font-size:16px;width:auto;display:flex;padding:5px 9px;background:#fffdf5;z-index:8}.geography-labels>span{font-size:15px;letter-spacing:.06em;padding:4px 9px;border:0;background:#e6fcffbc;color:#08769c;box-shadow:none}.world-actor{width:76px;height:102px;z-index:7}.city-art .world-actor>svg{border-radius:0}.world-actor[data-travel=bike]{width:88px;height:98px}.world-actor[data-travel=scooter]{width:85px;height:104px}.world-actor[data-travel=van]{width:130px;height:102px}.world-actor:after{content:'邱臣遠';position:absolute;left:50%;transform:translateX(-50%);top:100%;white-space:nowrap;background:#fffdf5e8;border-radius:7px;padding:2px 8px;font-size:13px;font-weight:800;color:#176c58;box-shadow:0 2px 6px #1b694d1a}.world-fallback{display:none}.offscreen{visibility:hidden}.day-nav{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:16px 0}.day-nav button{background:#e8f0dd;padding:8px 12px;border-radius:9px;font-size:17px}.day-select{width:100%;font-size:18px;min-height:48px;background:white;color:#285a45;border:1px solid #c4d5b8;border-radius:9px;padding:8px}.light-demo button{font-size:17px;line-height:1.6;padding:10px}#mapHelp{inset:0;margin:auto;width:min(520px,calc(100% - 30px));height:max-content;max-height:85dvh;border:1px solid #bcd3bb;border-radius:23px;padding:25px 28px;overflow:auto;background:#fffdf4;color:#284f3d}#mapHelp .help-header{display:flex;align-items:center;justify-content:space-between;gap:15px}#helpTitle{margin:0;font-size:28px}#helpClose{width:46px;background:#eaf2df;border-radius:50%}#mapHelp p,#mapHelp li{font-size:18px;line-height:1.9}#mapHelp ul{padding-left:22px}#mapHelp .help-note{font-size:15px;color:#70816a;padding-top:15px;border-top:1px solid #d3dfc7}#mapHelp a{color:#13735a;font-size:18px}dialog::backdrop{background:#173f365c;backdrop-filter:blur(4px)}.skip{z-index:100}#drawerContent{overscroll-behavior:contain}
@media(min-width:1800px){.map-heading h1{font-size:35px}.place-panel{width:335px}.map-nav{width:160px}.map-nav button{font-size:19px}.bottom-dock,.map-caption{right:380px}.view-tools,.map-compass{right:380px}.place-name{font-size:29px}.place-intro,.story-policies button{font-size:19px}}
@media(max-width:1150px) and (min-width:800px){.island-header{gap:20px}.map-heading{padding-left:20px}.map-heading h1{font-size:25px}.map-heading>span{font-size:14px}.header-actions{gap:5px}.header-actions button{padding:8px 11px}.header-actions #allPlaces span{display:none}.bottom-dock{gap:5px}.bottom-dock>button,.travel-pop>button{font-size:16px;padding:10px}.time-tools>span{display:none}.time-tools button{padding:8px 9px;font-size:16px}.map-nav{left:16px;width:134px}.map-nav button{font-size:16px}.place-panel{right:16px;width:290px}.view-tools,.map-compass{right:326px}.bottom-dock,.map-caption{right:326px;left:16px}}
@media(max-width:799px){.island-header{left:14px;right:14px;top:max(13px,env(safe-area-inset-top));gap:8px;align-items:center}.home-mark{gap:6px}.home-mark svg{width:35px;height:42px}.home-mark strong{font-size:21px}.home-mark small{font-size:11px}.home-mark small span{margin-left:4px}.map-heading{position:absolute;top:63px;left:2px;border:0;padding:0;pointer-events:none}.map-heading h1{font-size:21px;letter-spacing:-.04em}.map-heading p,.map-heading>span{display:none}.header-actions{gap:5px}.header-actions button{font-size:15px;padding:6px 9px;min-height:44px;border-radius:10px}.header-actions #allPlaces{display:none}.header-actions .policy-index{font-size:15px;padding:7px 10px}.policy-index b{display:none}#helpOpen{display:none}#menuToggle{display:block;width:44px;font-size:22px}.map-nav{display:none;left:14px;top:76px;width:220px;max-height:calc(100dvh - 200px);overflow:auto;padding:15px;background:#fffdf5f7;border:1px solid #c7dbbc;border-radius:19px;box-shadow:0 12px 35px #244d3230;z-index:19}.map-nav.open{display:flex}.map-nav button{font-size:18px;padding:7px 5px}.map-nav p{font-size:14px}.nav-divider{width:100%;margin:10px 0}.map-nav .minor-nav{font-size:17px}.place-panel{top:auto;right:12px;left:12px;width:auto;bottom:133px;max-height:107px;border-radius:17px;overflow:hidden;background:#fffdf5ed;transition:max-height .25s;box-shadow:0 6px 20px #20533312}.place-panel.expanded{max-height:min(61dvh,560px);overflow:auto;background:#fffdf7}.panel-handle{display:flex;position:sticky;top:0;width:100%;height:22px;min-height:22px;align-items:center;justify-content:center;background:#fffdf5;z-index:5;padding:0}.panel-handle span{height:4px;width:38px;border-radius:10px;background:#b0c6a3}.panel-tabs{padding:0 17px;top:22px;display:none}.place-panel.expanded .panel-tabs{display:flex}.panel-tabs button{font-size:18px;padding:8px 0 11px}#storyDock{padding:4px 17px 15px}.place-panel:not(.expanded) .place-eyebrow{font-size:12px;margin:0 0 3px}.place-panel:not(.expanded) .place-name{font-size:22px;margin:0;padding-right:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.place-panel:not(.expanded) .panel-details{display:none}.mobile-policy-button{display:none}.place-panel:not(.expanded) .mobile-policy-button{display:block;position:absolute;right:16px;top:12px;min-height:44px;padding:7px 11px;border-radius:10px;background:#0b8067;color:white;font-size:17px}.place-panel.expanded #storyDock{padding:18px 20px}.place-name{font-size:26px}.place-intro{font-size:18px}.story-policies button{font-size:18px}.resident-life p{font-size:18px}.map-compass{right:14px;bottom:319px;top:auto;width:48px;height:59px}#northArrow{font-size:27px;width:42px;height:52px;line-height:28px}#northArrow b{font-size:13px;line-height:20px}.view-tools{right:14px;bottom:252px;gap:4px;flex-wrap:wrap;justify-content:flex-end;width:210px}.view-tools button{width:44px;min-height:44px;background:#fffdf3e8}#resetCamera{width:58px;font-size:17px}.view-tools output{display:none}.bottom-dock{left:12px;right:12px;bottom:max(17px,env(safe-area-inset-bottom));height:104px;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:7px}.time-tools{grid-column:1/-1;justify-content:space-between;height:48px;padding:3px 6px;border-radius:13px}.time-tools>span{display:block;font-size:14px;min-width:54px;padding:0 7px}.time-tools button{flex:1;font-size:17px;padding:5px 8px;min-height:40px}.bottom-dock>button,.travel-pop>button{width:100%;font-size:16px;min-height:45px;height:45px;padding:7px 8px;border-radius:11px}.travel-pop{min-width:0}#travelControls{bottom:57px;width:140px}.map-caption{display:none}.motion-notice{top:108px;left:14px;right:14px;padding:10px 12px;display:flex;gap:10px}.motion-notice p{font-size:15px;line-height:1.6}.motion-notice button{margin:0;width:auto;min-width:94px;font-size:15px}.city-art .landmark-label{font-size:15px;min-height:38px;padding:5px 8px}.city-art .landmark-label.selected{font-size:16px;min-width:44px;min-height:42px;height:auto;width:auto;display:flex;border-radius:9px;padding:5px 8px}.city-art .landmark-label.selected span{box-shadow:none}.world-actor{width:64px;height:85px}.world-actor[data-travel=bike]{width:76px;height:85px}.world-actor[data-travel=scooter]{width:70px;height:86px}.world-actor[data-travel=van]{width:106px;height:84px}.world-actor:after{font-size:12px}.geography-labels>span{font-size:13px;padding:3px 6px}#mapHelp{padding:21px}#helpTitle{font-size:25px}}
@media(prefers-reduced-motion:reduce){.place-panel{transition:none}}

.mobile-policy-button{display:none}@media(max-width:799px){.place-panel:not(.expanded) .mobile-policy-button{display:block}}

.island-app[data-phase=night] .map-heading,.island-app[data-phase=night] .map-heading p,.island-app[data-phase=night] .map-heading>span,.island-app[data-phase=night] .home-mark,.island-app[data-phase=night] .home-mark small,.island-app[data-phase=night] .map-caption{color:#f4fff5}.island-app[data-phase=night] .map-nav{background:#fffdf4eb;border-radius:18px;padding:12px 7px;top:140px;left:17px;width:151px}.island-app[data-phase=night] .view-tools output{color:#f4fff5}@media(max-width:799px){.island-app[data-phase=night] .map-nav{left:14px;top:76px;width:220px;padding:15px}.island-app[data-phase=night] .map-heading{color:#f5fff4}}

@media(min-width:1151px){.map-nav{width:150px}.map-nav button{font-size:18px}}

@media(min-width:800px){.place-panel{max-height:calc(100dvh - 136px)}}

/* Direct orbiting, with an explicit pan option. */
.drag-modes{display:flex;gap:2px;background:#fffdf4ee;border:1px solid #bed4b9;border-radius:13px;padding:4px;min-height:49px}.drag-modes button{font-size:17px;padding:5px 10px;min-height:39px;background:none;color:#365f4d;border-radius:9px;white-space:nowrap}.drag-modes button[aria-pressed=true]{background:#d6edcd;color:#0d6b52;font-weight:750}.city-art[data-drag-mode=rotate] .city-canvas{cursor:grab}.city-art[data-drag-mode=pan] .city-canvas{cursor:move}.city-art .city-canvas:active{cursor:grabbing}@media(max-width:799px){.bottom-dock{grid-template-columns:.9fr 1.1fr 1.3fr}.drag-modes{height:45px;min-height:45px;padding:3px;gap:0;border-radius:11px}.drag-modes button{font-size:16px;padding:4px 6px;min-height:37px;flex:1}}