:root{--ink:#203d39;--muted:#6c8580;--line:#dde8e4;--green:#23566b;--paper:#fbfcf9;--gold:#af8951}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#f4f8f5;font:14px/1.55 Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}button,input,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #649f8e;outline-offset:3px}button{color:inherit}a{color:inherit;text-decoration:none}header{height:84px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:1px solid var(--line);gap:18px}.brand{display:flex;align-items:center;gap:16px;min-width:0}.brand img{width:92px;height:46px;object-fit:contain;background:white}.brand strong{font-size:19px;letter-spacing:1px;display:block}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:2px;margin-top:3px}.header-actions{display:flex;align-items:center;gap:10px}.badge{border-radius:100px;padding:5px 10px;background:#edf3e8;color:#617951;font-size:11px;white-space:nowrap}.btn{padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:white;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;font-size:12px}.btn.primary{color:white;background:var(--green);border-color:var(--green)}.btn:hover{filter:brightness(.97)}.icon{width:18px;height:18px;display:inline-block;vertical-align:middle;flex-shrink:0}.intro{padding:23px 30px 17px;display:flex;justify-content:space-between;align-items:end;gap:16px}.eyebrow{font-size:9px;letter-spacing:2px;color:#8b9f94;font-weight:700}.intro h1{font-size:27px;line-height:1.4;margin:5px 0 5px;letter-spacing:.7px}.intro p{margin:0;color:var(--muted);font-size:12px}.search{position:relative;display:flex;align-items:center;gap:8px;background:white;border:1px solid var(--line);border-radius:10px;padding:0 12px;height:43px;width:255px}.search input{border:0;background:none;width:100%;min-width:0;outline:none;font-size:12px;color:var(--ink)}.search:focus-within{box-shadow:0 0 0 2px #cce5db}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:17px;margin:0 30px 18px}.mapbox{position:relative;overflow:hidden;height:calc(100dvh - 225px);min-height:490px;max-height:850px;border:1px solid #d4e5e1;border-radius:18px;background:#eaf3f1}.mapbar{position:absolute;top:16px;left:16px;right:16px;z-index:2;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.segmented{display:flex;gap:3px;background:#fffffff2;box-shadow:0 3px 20px #31564b09;border:1px solid #e0e9e3;padding:4px;border-radius:11px;pointer-events:auto}.segmented button{background:transparent;border:0;font-size:11px;padding:8px 12px;border-radius:8px;white-space:nowrap}.segmented button[aria-pressed=true]{background:var(--green);color:white}.mapbar .btn{pointer-events:auto;background:#fffffff2}.map-count{position:absolute;left:23px;top:80px;z-index:1;font-size:10px;color:#74958d;letter-spacing:.3px;pointer-events:none}canvas#world{display:block;width:100%;height:100%;touch-action:none;outline-offset:-4px}.map-title{position:absolute;left:24px;bottom:22px;pointer-events:none}.map-title strong{display:block;font-size:11px;color:#5a7c70;letter-spacing:2px}.map-title small{display:block;font-size:10px;color:#87a197;margin-top:4px}.mapcontrols{position:absolute;bottom:20px;right:16px;display:flex;gap:6px}.mapcontrols button{width:38px;height:38px;display:grid;place-items:center;border:1px solid #d6e4dd;border-radius:9px;background:#fffffff2;font-size:18px;box-shadow:0 3px 12px #234d3a09}.keyhint{position:absolute;left:50%;bottom:21px;transform:translateX(-50%);background:#ffffffdb;color:#557b6c;padding:7px 11px;border:1px solid #e0ebe4;border-radius:8px;font-size:10px;white-space:nowrap;pointer-events:none}.dpad{display:none;position:absolute;bottom:75px;right:17px;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,36px);gap:3px}.dpad button{background:#ffffffe8;border:1px solid #d4e4db;border-radius:8px;touch-action:none}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}aside{display:flex;flex-direction:column;gap:13px;min-width:0}.info-card{border:1px solid var(--line);background:var(--paper);border-radius:15px;padding:20px}.info-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.info-symbol{height:43px;width:43px;display:grid;place-items:center;background:#e9f2e9;border-radius:12px;color:#608369}.info-card h2{font-size:22px;margin:14px 0 4px;letter-spacing:.3px}.english{font-size:10px;color:#9aaba2;letter-spacing:1.3px}.description{font-size:12px;line-height:1.9;color:var(--muted);margin:14px 0 17px}.chips{display:flex;gap:5px;flex-wrap:wrap}.chip{font-size:10px;padding:4px 7px;border:1px solid #e0e8da;color:#698359;border-radius:5px;background:#f3f6ec}.place-action{width:100%;margin-top:18px}.people-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;margin:22px 0 7px}.people-heading span{font-size:9px;color:#9aa999;font-weight:400}.person{display:flex;align-items:center;gap:9px;padding:9px 0;border:0;border-top:1px solid #edf1e8;background:transparent;text-align:left;width:100%}.person canvas{width:37px;height:46px;flex-shrink:0;background:#f0f4e9;border-radius:9px}.person strong{font-size:11px;font-weight:600;display:block}.person small{display:block;font-size:9px;color:#889b8a}.person .chev{margin-left:auto;color:#b2c4b7}.my-card{display:flex;align-items:center;gap:13px;padding:15px 18px;background:#eaf0e3}.my-card canvas{width:45px;height:58px}.my-card strong{font-size:12px;display:block}.my-card small{font-size:10px;color:#7c9072;display:block;margin-top:3px}.my-card button{margin-left:auto;border:0;border-radius:9px;background:white;display:grid;place-items:center;height:34px;width:34px}.privacy{padding:0 9px;color:#85998d;font-size:10px;line-height:1.85;display:flex;gap:8px}.privacy svg{flex-shrink:0;margin-top:3px}.directory{margin:0 30px 25px;display:flex;gap:7px;overflow:auto;padding-bottom:6px}.directory button{border:1px solid var(--line);background:#ffffffba;padding:7px 12px;border-radius:8px;font-size:11px;white-space:nowrap}.directory button[aria-pressed=true]{border-color:#87ad9b;background:#e5f0e8;color:#2c644d}.noresults{font-size:12px;color:#6c8580;margin:5px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{border:1px solid var(--line);padding:0;border-radius:18px;background:var(--paper);color:var(--ink);max-width:calc(100% - 28px);max-height:90dvh;width:650px;box-shadow:0 30px 100px #193c3a35}dialog::backdrop{background:#173f3d70;backdrop-filter:blur(4px)}.modal-header{display:flex;justify-content:space-between;align-items:start;padding:22px 25px;border-bottom:1px solid var(--line)}.modal-header h2{margin:4px 0 0;font-size:21px}.close{border:1px solid var(--line);background:white;border-radius:9px;width:33px;height:33px;font-size:20px}.modal-body{padding:23px;display:grid;grid-template-columns:150px 1fr;gap:24px}.avatar-preview{background:#eaf1e5;border:1px solid #d9e5d4;border-radius:15px;padding:18px;text-align:center;align-self:start;position:sticky;top:0}.avatar-preview canvas{width:100%;height:178px}.avatar-preview strong{display:block;font-size:12px}.avatar-preview small{font-size:10px;color:#829576}.options fieldset{padding:0;border:0;margin:0 0 17px}.options legend{font-size:12px;font-weight:700;margin-bottom:9px}.choices{display:flex;flex-wrap:wrap;gap:7px}.swatch{height:29px;width:29px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #dde7df}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--green)}.choice{border:1px solid var(--line);background:white;border-radius:7px;font-size:11px;padding:7px 10px}.choice[aria-pressed=true]{border-color:#608c79;background:#e8f1e7}.modal-footer{padding:17px 23px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px}.modal-footer small{font-size:10px;color:#8b9c8f;max-width:360px}#profile{width:430px}#profile .modal-body{display:block;text-align:center}#profile .profile-avatar{width:110px;height:135px;background:#eaf1e6;border-radius:18px;margin:auto}#profile h3{font-size:21px;margin:13px 0 5px}#profile p{font-size:12px;color:var(--muted);line-height:1.9}#profile .chips{justify-content:center}#profile .profile-note{font-size:10px;background:#f0f4eb;border-radius:8px;padding:11px;margin-top:19px}.toast{position:fixed;z-index:10;left:50%;bottom:30px;transform:translateX(-50%);border-radius:10px;background:#234b3e;color:white;padding:12px 18px;box-shadow:0 5px 30px #1d3e4022;font-size:12px;max-width:90%;text-align:center}.toast[hidden]{display:none}@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 330px;max-width:1850px;margin-inline:auto;padding-inline:30px}.mapbox{min-height:660px}.info-card{padding:24px}}@media(max-width:1000px){header{padding:0 20px}.intro{padding-inline:20px}.workspace{margin-inline:20px;grid-template-columns:minmax(0,1fr) 255px;gap:12px}.info-card{padding:17px}.info-card h2{font-size:20px}.keyhint{display:none}.mapbar{left:12px;right:12px}.segmented button{padding:8px 9px}.directory{margin-inline:20px}.mapbar .btn{font-size:0;gap:0}.mapbar .btn .icon{width:17px}.brand small{letter-spacing:1px}.header-actions .admin{display:none}}@media(max-width:740px){header{height:72px;padding:0 15px}.brand{gap:10px}.brand img{width:69px;height:35px}.brand strong{font-size:15px}.brand small{font-size:7px;letter-spacing:.7px}.header-actions .badge{display:none}.header-actions .btn{padding:8px;font-size:0;gap:0}.intro{padding:20px 16px 14px;align-items:start;flex-wrap:wrap}.intro h1{font-size:23px}.intro p{font-size:11px}.search{width:100%;height:38px}.workspace{display:flex;flex-direction:column;margin:0 12px 15px;gap:12px}.mapbox{height:58dvh;min-height:405px;max-height:620px;border-radius:14px}.map-count{left:17px;top:72px;font-size:9px}.map-title{left:15px;bottom:17px}.map-title strong{font-size:9px}.map-title small{font-size:8px;max-width:180px}.mapcontrols{right:12px;bottom:15px;gap:4px}.mapcontrols button{width:32px;height:34px;font-size:17px}.dpad{display:grid;right:12px;bottom:60px}.info-card{padding:18px}.info-card h2{margin:8px 0 2px}.info-symbol{width:32px;height:32px}.description{margin:9px 0 12px}.info-card.place-info{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.place-info .info-top,.place-info h2,.place-info .english,.place-info .description,.place-info .chips{grid-column:1}.place-info .people-heading,.place-info #people{grid-column:2}.place-info .people-heading{grid-row:1;align-self:center;margin:0}.place-info #people{grid-row:2 / span 5;align-self:start}.place-info .place-action{grid-column:1/-1;margin-top:12px}aside{gap:10px}.my-card{display:none}.privacy{font-size:10px;padding-inline:4px}.directory{margin:0 12px 18px}.modal-body{grid-template-columns:100px 1fr;gap:16px;padding:17px}.avatar-preview{padding:10px}.avatar-preview canvas{height:145px}.modal-header{padding:18px}.modal-footer{padding:15px;align-items:start}.modal-footer small{font-size:9px}.choices{gap:6px}.choice{padding:6px 8px}.toast{bottom:15px}.mapbox .segmented button{font-size:10px}.options legend{font-size:11px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Connected town layout */
header{height:80px}.brand strong{font-size:18px}.brand small{letter-spacing:1.6px}.intro{padding-top:18px;padding-bottom:16px}.intro h1{font-size:26px}.mapbox{background:#f2f0e5;min-height:570px;height:calc(100dvh - 252px)}
.map-count{color:#597b7a;background:#fffdf4de;padding:5px 9px;left:17px;top:77px;border:1px solid #e6e7da;border-radius:7px}.map-title{background:#ffffffdf;border:1px solid #e6e7da;padding:8px 11px;border-radius:8px;left:16px;bottom:16px}.map-title strong{font-size:10px;color:#3d6672;letter-spacing:1.6px}.map-title small{font-size:9px;max-width:260px;color:#738987}.keyhint{bottom:19px;font-size:10px}.mapcontrols{bottom:17px}.info-card h2{font-size:21px;line-height:1.4}.info-card .english{letter-spacing:.8px;line-height:1.6}.description{font-size:12px;margin:12px 0}.route-box{padding:13px 16px;background:#edf3f4;border:1px solid #d5e4e8;border-radius:12px;font-size:11px;color:#4b7382;line-height:1.8}.route-box strong{display:block;color:#245166;font-size:12px;margin-bottom:2px}.route-box .btn{font-size:10px;min-height:30px;padding:5px 10px;margin-top:9px}.route-box[hidden]{display:none}.landmark-note{font-size:10px!important;color:#9b805b!important;padding-top:12px;border-top:1px solid #ebe6db}.source-link{display:inline-block;margin-top:8px;font-size:10px;color:#406e80;text-decoration:underline}.my-card{background:#eaf0ee}.privacy{font-size:10px}.directory{margin-bottom:10px}.map-disclaimer{margin:0 30px 18px;font-size:10px;line-height:1.8;color:#7a8b89}.legend{display:inline-flex;gap:12px;margin-left:10px;font-size:10px;color:#69847d}.legend i{width:6px;height:6px;background:#ad8558;display:inline-block;border-radius:50%;margin-right:4px}.legend i.street{background:#728e87}.people-heading{margin-top:17px}.mini-label{font-size:9px;color:#8a9d98}.detail-line{font-size:10px;color:#77918a;margin-top:6px}.btn.primary{background:#23566b;border-color:#23566b}.segmented button[aria-pressed=true]{background:#23566b}.directory button[aria-pressed=true]{background:#e8f1f3;color:#23566b;border-color:#81a8b4}.badge{color:#55777a;background:#edf3f1}.btn:disabled{opacity:.5}.place-action{font-size:12px}.toast{background:#224b5c}.source-link:focus-visible{outline:2px solid #649f8e}.mapbox .dpad button{min-width:38px;min-height:38px}.dpad{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,38px)}
@media(max-width:1100px){.keyhint{display:none}.map-title small{max-width:180px}.mapbox{min-height:530px}.mapbar{flex-wrap:wrap}.segmented button{padding:8px 8px}}
@media(max-width:740px){header{height:72px}.brand strong{font-size:15px}.brand small{font-size:7px;letter-spacing:.4px}.intro h1{font-size:22px}.intro{padding:17px 16px 13px}.mapbox{height:58dvh;min-height:435px}.map-count{top:70px;left:12px;font-size:8px;padding:4px 7px;max-width:calc(100% - 24px)}.map-title{left:11px;bottom:12px;padding:6px 8px;max-width:calc(100% - 170px)}.map-title strong{font-size:8px;letter-spacing:.5px}.map-title small{display:none}.mapcontrols{bottom:13px}.dpad{bottom:62px}.place-info .source-link,.place-info .landmark-note{grid-column:1/-1}.place-info .landmark-note{margin-top:9px}.map-disclaimer{margin:0 16px 20px;font-size:9px}.legend{display:block;margin-left:0}.route-box{padding:11px 15px}.mapbox .segmented button{font-size:10px;padding:7px 9px}.info-card h2{font-size:18px}.map-count .wide-only{display:none}.source-link{width:max-content}.place-action{min-height:44px}.directory button{min-height:40px}.header-actions .btn{min-height:40px;min-width:40px}}
@media(max-width:390px){.mapbox .segmented button{font-size:9px;padding:7px}.mapbar{gap:6px}.map-title{max-width:135px}.brand img{width:58px;height:31px}.brand strong{font-size:14px}}
.source-link[hidden]{display:none}