:root{font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:#223d36;background:#f5f7f2;font-synthesis:none;--green:#264e40;--muted:#7c8b80;--line:#e1e7dc}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:#fff;color:inherit;border-radius:7px;padding:8px 11px;transition:background .15s,transform .15s}button:hover{background:#edf2e6}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b0bb5a;outline-offset:3px}a{color:inherit;text-decoration:none}.topbar{height:85px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1510px)/2))}.brand{display:flex;gap:12px;align-items:center;font-size:20px;font-weight:700;letter-spacing:2px}.brand b{font-size:14px;letter-spacing:3px;font-weight:500}.brand small{display:block;font-size:10px;font-weight:400;letter-spacing:2px;color:#879186;margin-top:5px}.brand-icon{background:#264e40;color:#dcf0b7;border-radius:10px;font-size:30px;width:43px;height:43px;text-align:center;line-height:40px}.top-actions{display:flex;align-items:center;gap:24px;font-size:12px}.top-actions button{border:0}.top-actions button span{margin-left:10px}.edition{font-size:10px;letter-spacing:2px;color:#7c8b80}main{max-width:1566px;margin:auto;padding:32px 28px 20px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:#7d8c77}.eyebrow i,.live-dot,footer i{display:inline-block;width:6px;height:6px;background:#83975b;border-radius:50%;margin-right:8px}.city-title{display:flex;align-items:center;gap:12px;margin-top:10px}h1{font-size:32px;letter-spacing:1px;margin:0;font-weight:650}.city-title button{padding:2px 6px;border:0;background:none;color:#8c9888;font-size:20px}.badge{font-size:10px;background:#e8eddf;padding:5px 10px;border-radius:4px;color:#73805f}.heading p{font-size:12px;color:#7c887c;margin:10px 0 0;letter-spacing:1px}.time-panel{display:flex;align-items:center;gap:20px;font-size:12px}.speed-controls{display:flex;gap:3px;background:#e8ece3;padding:4px;border-radius:7px}.speed-controls button{border:0;background:transparent;font-size:12px;min-height:32px}.speed-controls button.active{background:#fff;box-shadow:0 2px 5px #2337190d}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stats article{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 22px}.stats article>span{font-size:11px;color:#7c897a;display:flex;justify-content:space-between}.stats i{font-style:normal;font-size:17px;color:#87996a}.stats strong{display:block;font-size:29px;letter-spacing:-.6px;font-weight:600;margin:8px 0 6px;font-variant-numeric:tabular-nums}.stats em{font-style:normal;font-size:12px;font-weight:400;margin-left:5px;color:#8b9588}.stats small{font-size:10px;color:#788669}.stats small.negative,.negative{color:#b35540!important}.workspace{display:grid;grid-template-columns:196px minmax(0,1fr) 230px;gap:18px;align-items:start}.panel{background:#fff;border:1px solid var(--line);border-radius:11px}.build-panel{padding:18px 14px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-title h2{font-size:13px;margin:0;font-weight:600}.panel-title>span{font-size:9px;letter-spacing:2px;color:#8c9685}.muted{color:#8a9488;font-size:10px;line-height:1.9}.tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}.tool{min-height:78px;padding:9px 2px;display:flex;flex-direction:column;align-items:center;border-color:#e8ecdf;font-size:11px;position:relative}.tool-icon{font-size:22px;line-height:24px;color:var(--tool-color);margin-bottom:4px}.tool small{font-size:9px;color:#8c9684;margin-top:3px}.tool.active{background:#eff3e6;border-color:#82996b;box-shadow:inset 0 0 0 1px #82996b}.tool.active:after{content:'•';position:absolute;top:0;right:7px;color:#739650}.tool-detail{margin-top:20px;border-top:1px solid var(--line);padding-top:17px}.tool-detail .eyebrow{font-size:9px}.tool-detail h3{font-size:13px;margin:8px 0}.tool-detail p{font-size:11px;line-height:1.9;color:#7d8974;min-height:58px;margin:0}.storage{display:flex;gap:4px;margin-top:16px}.storage button{font-size:10px;flex:1;padding:8px 0}.save-status{display:block;font-size:9px;margin-top:12px;text-align:center;color:#86947a}.map-panel{position:relative;overflow:hidden;background:#eaf0e2;min-width:0}.map-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 18px;background:#f8faf4;border-bottom:1px solid #dce4d4}.map-heading strong{font-size:12px;font-weight:600}.map-subtitle{font-size:10px;color:#8c9785;margin-left:10px}.map-controls{display:flex;gap:3px}.map-controls button{background:#fdfefb;padding:4px 7px;min-height:28px;min-width:28px;font-size:10px;border-color:#dfe6d5}.map-scroll{height:570px;overflow:auto;position:relative;background:radial-gradient(ellipse at 50% 44%,#f4f7e9 0%,#e7efdf 75%);scrollbar-color:#b8c5aa transparent;scrollbar-width:thin}#map{display:block;width:100%;height:100%;min-height:480px;overflow:visible}.compass{position:absolute;right:22px;bottom:20px;font-size:10px;color:#7f916e;text-align:center;pointer-events:none}.compass span{font-size:26px}.map-footer{display:flex;gap:15px;padding:14px 18px;background:#f8faf4;font-size:9px;color:#88937e;border-top:1px solid #dce4d4;align-items:center}.legend{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:5px}.green{background:#91aa71}.blue{background:#79aabb}.orange{background:#cb9d6c}.map-tip{margin-left:auto;font-size:9px}.toast{margin:0;padding:12px 18px;background:#edf3e5;color:#60764d;font-size:11px;line-height:1.7;border-top:1px solid #dce4d4;min-height:44px}.toast.error{color:#9f573e;background:#f9eee6}.right-panel{display:flex;flex-direction:column;gap:16px}.services{padding:19px 17px}.service{margin-top:23px}.service>div{display:flex;justify-content:space-between;font-size:11px}.service b{font-size:10px;font-weight:500;color:#829072}progress{width:100%;height:6px;display:block;border:0;border-radius:20px;overflow:hidden;margin-top:11px;background:#eaf0e3;accent-color:#94a96e}progress::-webkit-progress-bar{background:#eaf0e3;border-radius:20px}progress::-webkit-progress-value{background:#97ad73;border-radius:20px}progress::-moz-progress-bar{background:#97ad73}.water progress::-webkit-progress-value{background:#8eb8bb}.water progress::-moz-progress-bar{background:#8eb8bb}.service.low progress::-webkit-progress-value{background:#cd8a63}.service.low progress::-moz-progress-bar{background:#cd8a63}.tax{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.tax label{display:flex;justify-content:space-between;font-size:11px}.tax input{width:100%;margin:15px 0 7px;accent-color:#6e8859}.tax>div{display:flex;justify-content:space-between;color:#98a08f;font-size:9px}.milestone{padding:20px 17px;background:#284c3d;color:#f2f6e8;position:relative;overflow:hidden}.milestone .eyebrow{color:#b8cba1;font-size:9px}.milestone-icon{font-size:35px;color:#d4e8a8;margin:17px 0 10px}.milestone h2{font-size:18px;margin:0;font-weight:500;letter-spacing:1px}.milestone p{font-size:10px;color:#bfceb1;line-height:1.8;margin:9px 0 17px}.milestone progress::-webkit-progress-bar{background:#54705a}.milestone progress::-webkit-progress-value{background:#c7dc98}.goal-count{display:flex;justify-content:space-between;font-size:9px;margin-top:9px;color:#bfd0b0}.goal-count b{font-weight:500;color:#d5e8ac}.advisor{padding:18px 17px}.advisor>p{font-size:11px;color:#7c8b71;line-height:1.9;margin-bottom:0}.city-selection{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;font-size:10px;color:#8b947e;line-height:1.9}footer{display:flex;align-items:center;justify-content:space-between;margin-top:23px;font-size:10px;color:#899580}footer small{font-size:9px;margin-left:16px;color:#a2aa9b}footer button{font-size:10px;background:transparent;border:none;color:#829174}.tile{cursor:crosshair;outline:none}.tile>.hit{fill:transparent;stroke:transparent;stroke-width:2;pointer-events:all}.tile:hover>.hit,.tile:focus>.hit{fill:#f8ffb22b;stroke:#f4f9b4;stroke-width:2.8}.tile.selected>.hit{stroke:#f4ffcd;stroke-width:2.5;fill:#fcffdd22}.tile:focus-visible>.hit{stroke:#fff;stroke-width:3.5}.tile .art{pointer-events:none}dialog{border:1px solid #dce5d4;border-radius:16px;padding:32px;max-width:520px;width:calc(100% - 32px);color:#294235;box-shadow:0 30px 100px #17321f33}dialog::backdrop{background:#142d2866;backdrop-filter:blur(4px)}dialog h2{font-size:24px;margin-top:10px}dialog li{margin-bottom:15px;font-size:13px;line-height:1.9;color:#6f7f65}dialog ol{padding-left:20px}dialog b{display:block;color:#344e3a}dialog p{font-size:12px;line-height:1.9;color:#798570}.close-dialog:not(.primary){position:absolute;top:14px;right:14px;border:0;font-size:24px}.primary{background:#294e3d;color:#fff;border:0;padding:12px 20px}.primary:hover{background:#3f644a}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}dialog label{display:block;font-size:12px;margin:15px 0 8px}dialog input{padding:12px;border:1px solid #ced8c5;border-radius:7px;width:100%}
@media(min-width:1600px){.map-scroll{height:630px}}@media(max-width:1180px){.workspace{grid-template-columns:170px minmax(0,1fr) 200px;gap:12px}.map-subtitle{display:none}.map-scroll{height:560px}.map-tip{display:none}.top-actions{gap:12px}main{padding:25px 20px}.stats article{padding:16px}.map-heading{padding:12px}.right-panel{gap:12px}}
@media(max-width:950px){.workspace{grid-template-columns:160px minmax(0,1fr)}.right-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr}.map-scroll{height:625px}.services,.advisor,.milestone{padding:16px}.edition{display:none}.time-panel{gap:10px}.stats{gap:10px}.stats strong{font-size:25px}}
@media(max-width:600px){.topbar{height:70px;padding:0 16px}.brand{font-size:17px;gap:8px}.brand-icon{width:35px;height:35px;font-size:26px;line-height:32px}.brand small{font-size:8px;letter-spacing:1px}.brand b{font-size:11px}.top-actions{gap:6px;font-size:10px}.top-actions button{font-size:10px;padding:6px}.top-actions button span{display:none}main{padding:23px 14px 18px}.heading{align-items:flex-start;gap:12px;margin-bottom:20px}.eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:25px;max-width:180px;overflow-wrap:anywhere}.city-title{gap:6px;flex-wrap:wrap}.city-title button{font-size:17px}.badge{font-size:9px;padding:3px 7px}.heading p{font-size:10px;letter-spacing:0;line-height:1.8;max-width:190px}.time-panel{flex-direction:column;align-items:flex-end;font-size:10px;flex-shrink:0}.speed-controls{gap:1px;padding:3px}.speed-controls button{font-size:10px;padding:5px 8px}.stats{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px}.stats article{padding:13px 15px}.stats strong{font-size:25px;margin:5px 0}.stats small{font-size:9px}.workspace{display:flex;flex-direction:column;gap:12px}.build-panel{width:100%;padding:12px;order:0}.build-panel>.muted{display:none}.tools{display:flex;overflow-x:auto;gap:7px;padding:3px 1px 8px;margin-top:8px}.tool{min-width:64px;min-height:72px;flex:0 0 64px}.tool-detail{margin-top:3px;padding-top:9px;display:flex;align-items:center;gap:9px}.tool-detail .eyebrow{display:none}.tool-detail h3{flex-shrink:0;font-size:11px}.tool-detail p{min-height:0;font-size:10px;line-height:1.6}.storage{margin-top:10px}.storage button{flex:0 0 92px;padding:7px}.save-status{text-align:right;margin-top:-23px;margin-bottom:9px;font-size:8px}.map-panel{width:100%;order:1}.map-scroll{height:365px}#map{min-height:365px}.map-heading{padding:12px}.map-footer{padding:10px 14px}.toast{font-size:10px;padding:10px 14px}.right-panel{width:100%;display:grid;grid-template-columns:1fr 1fr;order:2;gap:10px}.advisor{grid-column:1/-1}.milestone{display:flex;flex-direction:column;justify-content:center}.milestone-icon{margin-top:10px}.service{margin-top:17px}.service>div{font-size:10px;gap:4px}.service b{font-size:9px}.services .muted{font-size:9px}.tax{margin-top:12px;padding-top:12px}.tax>div{font-size:8px}.goal-count{gap:4px;font-size:8px}.compass{right:12px;bottom:10px}footer{font-size:9px;gap:5px}footer small{display:block;margin:6px 0 0 14px;font-size:8px}dialog{padding:25px}dialog h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Guided city building and placement feedback. */
.coach{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:-2px 0 22px;padding:15px 20px;border-color:#cdddbf;background:linear-gradient(110deg,#f2f7e9,#fbfcf7)}
.coach[hidden]{display:none}
.coach .eyebrow{display:block;margin-bottom:4px;color:#648047}
.coach strong{display:block;font-size:14px;color:#294a37}
.coach p{margin:3px 0 0;color:#697f65;font-size:11px;line-height:1.55}
.coach .primary{flex:none;font-size:11px;white-space:nowrap;padding:10px 15px}
#more-tools{display:none;border:0;background:#edf3e7;color:#50734c;font-size:10px;padding:5px 8px}
.placement-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:63px;padding:10px 17px;background:#fff;border-top:1px solid #dce4d4}
.placement-panel>div:first-child{min-width:0}
.placement-panel strong{display:block;color:#294a37;font-size:12px}
.placement-panel span{display:block;color:#738670;font-size:10px;line-height:1.55;margin-top:3px}
.placement-actions{display:flex;align-items:center;gap:6px;flex:none}
.placement-actions button{font-size:10px;min-height:34px;padding:7px 10px}
.placement-actions button:disabled{opacity:.42;cursor:not-allowed}
.placement-actions .primary{background:#365d45;color:#fff}
.placement-actions .primary:hover{background:#467655}
.tile.suggested>.hit{fill:#f8db8640;stroke:#bd8531;stroke-width:4}
.tile.place-ok>.hit{fill:#bdf4a545;stroke:#4f995c;stroke-width:3.5}
.tile.place-warning>.hit{fill:#fbe4ad63;stroke:#cb8b46;stroke-width:3.5}
.tile.place-invalid>.hit{fill:#f7c0a249;stroke:#bb6450;stroke-width:3.5}
.tile.place-ok:hover>.hit,.tile.place-warning:hover>.hit,.tile.place-invalid:hover>.hit{stroke-width:4.5}
@media(max-width:600px){
  .coach{align-items:flex-start;flex-direction:column;gap:9px;margin-bottom:12px;padding:12px 14px}
  .coach p{font-size:10px}
  .coach .primary{padding:7px 12px}
  #more-tools{display:inline-block}
  .placement-panel{align-items:flex-start;flex-direction:column;min-height:0;padding:10px 13px}
  .placement-panel strong{font-size:11px}
  .placement-panel span{font-size:10px}
  .placement-actions{width:100%;justify-content:space-between}
  .placement-actions button{min-height:37px;font-size:11px}
  .placement-actions .primary{flex:1}
  #map{touch-action:pan-x pan-y}
}