@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#294b43;--muted:#6e8275;--paper:#faf9f3;--green:#3f6e58;--line:#dfe5d9;--gold:#d6ac64;--pink:#c97967}*{box-sizing:border-box}html{font-size:14px}body{margin:0;color:var(--ink);background:var(--paper);font-family:'Noto Sans TC',sans-serif;font-size:14px}button,input,select{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dfb568;outline-offset:3px}[hidden]{display:none!important}button{border:0}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);gap:25px;background:#fbfaf5;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:24px;font-weight:800;letter-spacing:2px}.brand small{display:block;font-size:14px;font-weight:500;letter-spacing:2px;margin-top:3px}.brand-mark{width:49px;height:49px;background:#e7be78;border-radius:17px;display:grid;place-items:center;font-size:37px}nav{display:flex;gap:26px}nav button{padding:14px 3px;background:none;color:var(--muted);border-bottom:2px solid transparent}nav button.active{border-color:var(--green);color:var(--ink);font-weight:700}.outlined{border:1px solid #bbc9b7;background:transparent;padding:10px 17px;border-radius:30px;white-space:nowrap}main{display:grid;grid-template-columns:minmax(0,1fr) 366px;height:calc(100dvh - 88px);min-height:620px}.world{position:relative;background:#dfe9df;overflow:hidden}.world #scene{position:absolute;inset:0;outline:none;touch-action:none}#scene canvas{display:block;width:100%;height:100%;cursor:grab}#scene canvas:active{cursor:grabbing}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.map-label{position:absolute;top:0;left:0;pointer-events:auto;transform:translate(-50%,-100%);background:#fffdf3eb;border:1px solid #fff;padding:7px 13px;border-radius:22px;font-size:14px;white-space:nowrap;box-shadow:0 4px 12px #1a3c2c26;transition:background .2s,opacity .25s;backdrop-filter:blur(8px)}.map-label::after{content:'';position:absolute;bottom:-8px;left:50%;width:1px;height:8px;background:#496e55}.map-label.selected{color:white;background:#365e4eed;border-color:#365e4e}.map-label:hover{background:#e9bf7d;color:#294b43}.scene-title{position:absolute;left:30px;top:26px;pointer-events:none;z-index:2;text-shadow:0 2px 14px #e6eee5}.eyebrow{font-size:14px;letter-spacing:2px;font-weight:600;color:#6e8775}.scene-title h1{font-size:36px;line-height:1.4;letter-spacing:2px;margin:10px 0 12px;font-weight:900}.scene-title h1 span,.rank-heading h1 span{color:#cb9570}.scene-title p{font-size:14px;color:#6d8372;margin:0}.view-toolbar{position:absolute;right:22px;top:24px;display:flex;gap:5px;flex-direction:column}.view-toolbar button{padding:9px 12px;border:1px solid #cbd8c4;background:#fbfcf1e6;border-radius:10px;box-shadow:0 2px 8px #345a3f0a}.view-toolbar button:hover{background:white}.compass{position:absolute;right:35px;bottom:127px;color:#476e58;display:grid;place-items:center;font-size:14px;pointer-events:none}.compass span{font-size:35px;line-height:1.2}.scene-bottom{position:absolute;left:25px;right:23px;bottom:48px;display:flex;align-items:center;justify-content:space-between;gap:10px}.mouse-help{display:flex;gap:18px;font-size:14px;background:#fafaf1bf;padding:12px 16px;border-radius:14px;backdrop-filter:blur(8px);color:#597462}.zoom{display:flex;align-items:center;background:#fdfbf2;box-shadow:0 3px 12px #385b4214;border-radius:14px;padding:4px}.zoom button{font-size:24px;width:40px;height:40px;background:none}.zoom span{font-size:14px;padding:0 4px;min-width:45px;text-align:center}.scene-note{position:absolute;bottom:16px;left:28px;font-size:14px;color:#6d8675}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:#e4eddf;z-index:8;transition:opacity .4s}.loading-icon{font-size:58px;color:#6a8c64;animation:turn 8s linear infinite}@keyframes turn{to{transform:rotate(360deg)}}#loading.done{opacity:0;pointer-events:none}aside{overflow:auto;padding:25px 25px 40px;background:#fcfaf4;border-left:1px solid var(--line)}.panel-top{display:flex;justify-content:space-between;gap:10px;color:#84947f;font-size:14px;letter-spacing:.4px;margin-bottom:19px}.search{display:flex;align-items:center;gap:9px;background:#f0f2e9;border:1px solid #dfe5d5;border-radius:12px;padding:11px 12px}.search>span{font-size:24px}.search input{width:100%;min-width:0;font-size:14px;outline:none;border:0;background:none}.search kbd{font:14px inherit;color:#86917e;border:1px solid #d6ddcf;border-radius:4px;padding:2px 5px}.district-nav{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 21px}.district-nav button{font-size:14px;padding:6px 10px;background:#ecefe4;border-radius:8px}.district-nav button.active{background:#3e6a56;color:white}.district-heading{display:flex;align-items:center;justify-content:space-between}.district-heading h2{font-size:36px;letter-spacing:3px;margin:0 0 2px;font-weight:900}.district-heading .number{font-size:14px;color:#93a08b}.english{font-size:14px;letter-spacing:1.5px;color:#8c9c88}.subtitle{font-size:20px;line-height:1.6;margin:23px 0 10px;letter-spacing:.5px}.description{font-size:14px;line-height:1.9;color:#6e8273;margin:0}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 22px;font-size:14px;color:#6a826c}.tags span{padding-bottom:4px;border-bottom:1px solid #d9e1d0}.section-heading{font-size:16px;display:flex;align-items:center;justify-content:space-between;margin:20px 0 13px;gap:10px}.section-heading span{color:#899781;font-size:14px;font-weight:400}.place-card{margin:0 0 22px}.photo-button{width:100%;padding:0;background:#e4e9dd;display:block;border-radius:14px;overflow:hidden;position:relative}.photo-button img{width:100%;height:180px;object-fit:cover;display:block;transition:transform .4s}.photo-button:hover img{transform:scale(1.045)}.photo-button .expand{position:absolute;right:10px;bottom:10px;background:#fffdf3e0;border-radius:7px;padding:5px 8px;font-size:14px}.place-info{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}.place-info h4{font-size:16px;margin:0;line-height:1.5}.heart{display:flex;align-items:center;justify-content:center;gap:7px;background:#f6eee4;border:1px solid #e7d7ca;color:#9b6856;border-radius:30px;padding:8px 12px;font-size:14px;white-space:nowrap;min-height:40px;transition:.2s}.heart .heart-symbol{font-size:21px;line-height:1}.heart.liked{color:#b75f53;background:#f5ded5;border-color:#dfaea0}.heart:hover{transform:translateY(-1px);background:#f5dfd2}.heart:disabled{opacity:.55;cursor:wait;transform:none}.address{font-size:14px;color:#8b9783;line-height:1.6;margin:6px 0}.image-failed{min-height:150px}footer{font-size:14px;color:#87947f;border-top:1px solid #dfe4d5;padding-top:16px;line-height:1.8;margin-top:24px}footer p{margin:8px 0}footer summary{cursor:pointer}footer a{display:block;margin:8px 0;text-decoration:underline;text-underline-offset:3px}.search-result{width:100%;display:flex;text-align:left;justify-content:space-between;gap:10px;padding:15px 6px;border-bottom:1px solid #dde3d4;background:none;font-size:14px}.search-result span{color:#8b9985}.empty{padding:25px 15px;background:#f0f2e8;border-radius:16px;font-size:16px;line-height:1.9;color:#74846e}#dashboard{max-width:1280px;margin:0 auto;padding:48px 42px 70px}.rank-heading{display:flex;justify-content:space-between;align-items:center;gap:25px}.rank-heading h1{font-size:38px;margin:12px 0;font-weight:900;letter-spacing:2px}.rank-heading p{font-size:16px;color:#7b8c77;line-height:1.8}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0 40px}.metrics article{background:#eef1e5;border:1px solid #dce3ce;border-radius:20px;padding:23px 28px}.metrics span{display:block;font-size:16px}.metrics strong{font-size:45px;display:block;margin:10px 0;font-weight:800;color:#3a6953}.metrics small{font-size:14px;color:#88957b}.rank-tools{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.rank-tools h2,.district-chart h2{font-size:22px;margin:0}.rank-tools label{display:flex;gap:10px;align-items:center;margin-left:auto}.rank-tools select{padding:9px;border-radius:10px;background:#f7f7ef;border:1px solid #d6dfce}.sync-state{font-size:14px;color:#85947b}.voting-note{font-size:14px;color:#829077;line-height:1.8}.rank-row{display:grid;grid-template-columns:42px 130px minmax(0,1fr) 150px;gap:22px;padding:22px 4px;border-bottom:1px solid #e1e6d8;align-items:center}.rank-number{font-size:23px;font-weight:800;color:#b0baa1;text-align:center}.rank-row:nth-child(-n+3) .rank-number{color:#b78c54}.rank-thumb{border:0;padding:0;background:none;border-radius:11px;overflow:hidden}.rank-thumb img{width:130px;height:90px;object-fit:cover;display:block}.rank-name h3{font-size:19px;margin:0 0 7px}.rank-name p{font-size:14px;color:#8b9881;margin:0 0 10px}.rank-track{background:#e7ecde;height:5px;max-width:380px;border-radius:5px;overflow:hidden}.rank-track span{display:block;background:#94ad81;height:5px;border-radius:5px}.rank-row .heart{justify-self:end;min-width:110px}.district-chart{margin-top:40px;background:#eff2e7;padding:26px;border-radius:20px}#districtBars{display:grid;grid-template-columns:1fr 1fr;gap:19px 35px;margin-top:25px}.district-bar{display:grid;grid-template-columns:65px 1fr 35px;align-items:center;gap:14px;font-size:14px}.district-bar .bar{height:10px;background:#dfe6d5;border-radius:8px}.district-bar .bar i{display:block;height:10px;background:#83a07e;border-radius:8px}.district-bar b{text-align:right;font-weight:500}dialog{border:0;padding:45px 32px 25px;border-radius:20px;background:#172e29;color:#fffdf2;width:min(1160px,96vw);max-height:95dvh;overflow:auto}dialog::backdrop{background:#10251fe8;backdrop-filter:blur(10px)}.lightbox-close{position:absolute;right:18px;top:13px;width:40px;height:40px;border-radius:50%;font-size:22px;background:#ffffff15;color:#fff}.lightbox-main{display:flex;align-items:center;gap:15px}.lightbox-main figure{margin:0;flex:1;min-width:0}.lightbox-main img{width:100%;height:min(62vh,620px);object-fit:contain;border-radius:10px;background:#0e211d}.lightbox-arrow{font-size:40px;color:#fff;background:#ffffff12;border-radius:50%;width:44px;height:44px;flex-shrink:0}.lightbox-main figcaption{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px}.lightbox-main h2{font-size:23px;margin:6px 0}.lightbox-main p{font-size:14px;margin:6px 0;color:#bdcbbd;line-height:1.6}#photoDistrict{font-size:14px;letter-spacing:1px;color:#bdcbbd}.lightbox-bottom{display:flex;justify-content:space-between;margin:17px 60px 0;color:#a8baab;font-size:14px}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,15px);background:#2c5143;color:#fff;padding:12px 23px;border-radius:30px;z-index:40;opacity:0;pointer-events:none;transition:.25s;font-size:14px;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 330px}header{padding:0 20px}.brand{font-size:21px;letter-spacing:1px}nav{gap:20px}.scene-title h1{font-size:29px}.scene-title{left:23px}.scene-title .eyebrow{max-width:240px;display:block;line-height:1.6}.mouse-help{gap:10px;flex-wrap:wrap;max-width:270px;padding:9px 12px}.scene-bottom{left:18px;right:15px}.scene-note{left:20px}.panel-top{display:block}#districtCount{display:none}aside{padding:24px 20px}.view-toolbar{right:15px}.scene-title p{max-width:235px;line-height:1.7}}
@media(max-width:760px){header{height:auto;min-height:86px;padding:14px 18px;gap:13px;flex-wrap:wrap}.brand{font-size:21px}.brand small{font-size:14px;letter-spacing:1px}.brand-mark{width:42px;height:42px;font-size:31px}header>.outlined{display:none}nav{gap:16px;margin-left:auto}nav button{font-size:14px;padding:10px 0}main{display:block;height:auto;min-height:0}.world{height:680px;min-height:60dvh}.scene-title{top:20px;left:20px}.scene-title .eyebrow{font-size:14px;letter-spacing:1px}.scene-title h1{font-size:28px}.scene-title p{max-width:210px}.view-toolbar{top:20px;right:14px}.mouse-help{max-width:210px;gap:5px 12px}.mouse-help span:last-child{display:none}.scene-note{font-size:14px;right:14px;line-height:1.5;bottom:12px}.scene-bottom{bottom:65px}.compass{bottom:135px;right:27px}aside{max-height:none;border-top:1px solid var(--line);padding:25px 23px 40px}.panel-top{display:flex}#districtCount{display:block}.photo-button img{height:230px}.district-nav{gap:8px}.district-nav button{padding:9px 12px}.scene-title h1 br{display:block}#dashboard{padding:30px 20px}.rank-heading{align-items:flex-start;flex-direction:column;gap:6px}.rank-heading h1{font-size:29px}.metrics{grid-template-columns:1fr;gap:10px;margin:25px 0}.metrics article{display:grid;grid-template-columns:1fr auto;align-items:center;padding:18px 22px;gap:4px}.metrics strong{font-size:32px;margin:0;grid-column:2;grid-row:1/3}.metrics small{grid-column:1}.rank-tools{gap:15px}.rank-tools label{margin-left:0}.rank-row{grid-template-columns:26px 84px minmax(0,1fr);gap:12px;padding:18px 0}.rank-thumb img{width:84px;height:82px}.rank-row .heart{grid-column:3;justify-self:start;min-width:90px;margin-top:-5px}.rank-name h3{font-size:17px}.rank-number{font-size:19px}.district-chart{padding:22px 18px}#districtBars{grid-template-columns:1fr;gap:18px}dialog{padding:58px 12px 20px;border-radius:14px;width:98vw}.lightbox-main{gap:5px;position:relative}.lightbox-arrow{position:absolute;top:25%;width:34px;height:38px;font-size:30px;z-index:2;background:#17332bcc}#prevPhoto{left:5px}#nextPhoto{right:5px}.lightbox-main img{height:47vh}.lightbox-main figcaption{gap:12px;align-items:flex-start;padding:0 8px}.lightbox-main h2{font-size:20px}.lightbox-bottom{margin:20px 8px 0;gap:12px;flex-wrap:wrap}.lightbox-main .heart{margin-top:15px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:0.01ms!important;transition-duration:0.01ms!important}}

.world.is-close .scene-title{background:#f7f7e9d9;padding:13px 18px;border:1px solid #f6f7e8;border-radius:16px;backdrop-filter:blur(10px)}.world.is-close .scene-title .eyebrow,.world.is-close .scene-title p{display:none}.world.is-close .scene-title h1{font-size:22px;margin:0;line-height:1.6;letter-spacing:1px}.world.is-close .scene-title br{display:none}