@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');
:root{font-family:'Noto Sans TC',sans-serif;color:#193335;background:#edf3ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}header{height:100px;display:flex;justify-content:space-between;align-items:center;padding:0 44px;border-bottom:1px solid #1933351b;background:#f6f8f3}.brand{text-decoration:none;display:flex;align-items:center;gap:13px;font-size:23px;font-weight:800;letter-spacing:.06em}.brand-icon{display:grid;place-items:center;background:#193335;color:#d9ef7a;width:46px;height:46px;border-radius:14px;font-size:27px}.brand small{display:block;font-size:10px;letter-spacing:.14em;font-weight:500;margin-top:4px}.edition{font-size:13px;color:#617875;letter-spacing:.05em}.edition b{margin-left:28px;color:#193335;font-weight:500}main{height:calc(100dvh - 100px);min-height:650px;position:relative;overflow:hidden}.intro{position:absolute;left:44px;top:38px;z-index:4;width:275px;pointer-events:none}.intro>*{pointer-events:auto}.eyebrow{font-size:13px;letter-spacing:.16em;color:#617875}h1{font-size:37px;letter-spacing:-.04em;line-height:1.45;margin:15px 0 14px;font-weight:900}.intro>p{font-size:14px;line-height:1.9;color:#667a73;margin:0 0 24px}.legend{display:flex;gap:18px;font-size:12px;margin-bottom:25px;align-items:center}.legend>span{display:flex;align-items:center;gap:7px}.station-dot{width:9px;height:9px;border-radius:50%;background:#ee704d}.rail-line{width:21px;height:4px;background:#419769;border-radius:4px}nav{display:flex;flex-wrap:wrap;gap:8px;width:254px}nav button{font-size:13px;border:1px solid #19333522;background:#f6f8f3db;border-radius:25px;padding:9px 13px;color:#526a60;transition:.2s}nav button:hover{border-color:#193335}nav button.active{background:#193335;color:#f3f7da;border-color:#193335}.intro-foot{font-size:11px;line-height:1.9;color:#647b70;margin-top:23px;width:255px}.intro-foot a{white-space:nowrap}#world{position:absolute;inset:0 0 0 255px}#canvas-wrap,#labels{position:absolute;inset:0}canvas{display:block;touch-action:none}#labels{pointer-events:none;overflow:hidden}.pin{position:absolute;left:0;top:0;white-space:nowrap;transform:translate(-50%,-100%);border:1px solid #19333525;background:#fffffff0;border-radius:6px;color:#244440;padding:6px 10px;font:500 12px 'Noto Sans TC',sans-serif;box-shadow:0 4px 12px #2444400d;pointer-events:auto;transition:background .18s}.pin::after{content:'';position:absolute;bottom:-5px;left:50%;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg);border-right:1px solid #19333525;border-bottom:1px solid #19333525}.pin.selected{background:#193335;color:#e5f294;z-index:2}.pin:hover{background:#e5f294;color:#193335}.pin .num{font-size:10px;margin-right:6px;opacity:.6}.world-caption{position:absolute;top:29px;left:80px;display:flex;gap:10px;align-items:center;font-size:10px;letter-spacing:.13em;color:#6c827b}.live-dot{width:5px;height:5px;border-radius:50%;background:#3d8e69}.caption-rule{display:block;width:34px;height:1px;background:#93a79b}.world-caption b{font-size:12px;border:1px solid #afc1b6;padding:3px 5px;border-radius:4px}.compass{position:absolute;top:24px;right:30px;width:52px;height:52px;border:1px solid #19333533;border-radius:50%;display:grid;place-items:center;background:#f6f8f377}#north-arrow{font-size:27px;line-height:20px;text-align:center}#north-arrow small{display:block;font-size:10px}.view-controls{position:absolute;bottom:75px;right:30px;display:flex;align-items:center;gap:3px;padding:5px;border:1px solid #19333522;border-radius:12px;background:#fffffff0;box-shadow:0 5px 20px #1933350b}.view-controls button{border:0;background:none;color:#193335;width:39px;height:39px;font-size:23px}.view-controls button:last-child{font-size:12px;width:46px}.view-controls button:hover{background:#edf3df;border-radius:7px}.view-controls>span{height:22px;width:1px;background:#ced9d0;margin:0 3px}.gesture{position:absolute;bottom:29px;left:50%;transform:translateX(-50%);font-size:12px;color:#647b70;white-space:nowrap}.gesture span{margin:0 10px}.map-tag{position:absolute;bottom:29px;right:30px;font-size:11px;color:#647b70}.map-tag span{display:block;font-size:10px;margin-top:4px;text-align:right}#detail{position:absolute;right:30px;top:110px;background:#fdfef8ed;backdrop-filter:blur(14px);width:276px;z-index:6;border:1px solid #fff;border-radius:18px;box-shadow:0 16px 44px #263e3412;padding:25px}#close{position:absolute;right:14px;top:9px;border:0;background:none;color:#7f8f81;font-size:24px}#detail.hidden{display:none}.detail-top{display:flex;justify-content:space-between;color:#527766;font-size:11px;letter-spacing:.04em;margin:5px 0 18px}#detail-name{font-size:24px;margin:0;font-weight:800;letter-spacing:-.02em}.english{font-size:9px;letter-spacing:.1em;color:#829487;margin:6px 0 22px}#detail-text{font-size:14px;line-height:1.85;color:#536b60;margin-bottom:21px}.detail-note{padding:15px 0;border-top:1px solid #dbe3d7}.detail-note>span{font-size:11px;color:#7a8c7c}.detail-note p{font-size:12px;line-height:1.7;margin:6px 0}#detail-link{display:flex;justify-content:space-between;text-decoration:none;background:#dfedb3;border-radius:7px;padding:12px 13px;font-size:12px;color:#294738}#detail-link:hover{background:#cfe194}.count{margin-top:24px;display:flex;gap:6px;align-items:center;font-size:11px;color:#8d9b8e}.count>span:first-child{color:#284d39}.count-line{height:1px;background:#d7dfd0;flex:1;margin:0 9px}.count button{border:0;background:none;font-size:11px;padding:0;color:#46654d}#load-error{position:absolute;inset:25% 20%;background:#fff;padding:30px;border-radius:15px;line-height:1.8;z-index:10}
@media(min-width:1550px){#world{right:120px}.intro{left:60px;top:55px}#detail{right:45px;top:140px}h1{font-size:42px}}
@media(max-width:1100px){header{height:82px;padding:0 25px}main{height:calc(100dvh - 82px)}.intro{left:25px;top:26px;width:215px}h1{font-size:29px}.intro>p{font-size:12px}nav{width:210px;gap:6px}nav button{font-size:12px;padding:8px 10px}.intro-foot{width:200px}#world{left:165px}#detail{width:238px;right:18px;padding:20px;top:90px}#detail-name{font-size:21px}#detail-text{font-size:13px}.world-caption{left:100px}.map-tag{display:none}}
@media(max-width:900px){header{height:72px;padding:0 20px}.brand{font-size:19px}.brand-icon{width:38px;height:38px;font-size:23px}.brand small{font-size:8px}.edition{font-size:11px}.edition b{display:none}main{height:auto;min-height:calc(100dvh - 72px);overflow:visible;display:flex;flex-direction:column}.intro{position:relative;left:auto;top:auto;width:auto;padding:23px 22px 0;pointer-events:auto}.eyebrow{font-size:11px}h1{font-size:27px;margin:8px 0 13px}h1 br{display:none}.intro>p,.legend{display:none}nav{width:auto;flex-wrap:nowrap;overflow:auto;padding-bottom:9px}nav button{white-space:nowrap;font-size:12px}.intro-foot{position:relative;width:auto;font-size:10px;margin-top:4px;max-width:330px}#world{position:relative;inset:auto;height:430px;margin-top:0;order:2}.world-caption{top:18px;left:22px;font-size:9px}.compass{right:20px;top:16px;width:40px;height:40px}.view-controls{right:17px;bottom:39px}.gesture{left:22px;transform:none;bottom:15px;font-size:10px}.gesture span{margin:0 4px}.pin{font-size:10px;padding:4px 6px}.pin .num{display:none}#detail{position:relative;right:auto;top:auto;width:auto;margin:0 18px 22px;order:3;padding:23px}.detail-top{margin-bottom:12px}.english{margin-bottom:13px}#detail-text{font-size:14px}.detail-note{padding:9px 0}.count{margin-top:15px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#detail-photo{margin:0 0 14px}#detail-photo[hidden]{display:none}#detail-photo img{display:block;width:100%;height:110px;object-fit:cover;border-radius:8px}#detail-photo figcaption{font-size:10px;line-height:1.7;color:#647b70;margin-top:4px}button:focus-visible,a:focus-visible{outline:3px solid #dd793f;outline-offset:3px}@media(min-width:901px){#detail{max-height:calc(100% - 175px);overflow:auto}}

/* Collectible landmark close-up */
#model-open{display:flex;justify-content:space-between;width:100%;padding:14px 15px;background:#ffcf4d;color:#18384e;border:0;border-radius:10px;font-weight:700;font-size:14px;margin:0 0 18px;box-shadow:0 4px 0 #d6a730}#model-open[hidden]{display:none}#model-open:disabled{opacity:.65;cursor:wait}#model-open:hover:not(:disabled){background:#ffdf70}#model-dialog{border:0;padding:0;border-radius:25px;width:min(1100px,94vw);max-width:94vw;max-height:94dvh;color:#18384e;background:#d8f4ee;box-shadow:0 30px 100px #052a5260}#model-dialog::backdrop{background:#122e42b8;backdrop-filter:blur(8px)}.model-shell{position:relative;overflow:hidden}.model-head{height:auto;padding:25px 30px 0;background:transparent;border:0;align-items:flex-start}.model-kicker{font-size:12px;letter-spacing:.14em;color:#397c7c}.model-head h2{font-size:34px;margin:6px 0 0;letter-spacing:-.02em}.model-head h2 span{font-size:14px;display:inline-block;margin-left:20px;font-weight:500;color:#467d7d}#model-close{border:0;border-radius:50%;width:42px;height:42px;color:#18384e;font-size:28px;background:#ffffffaa}#model-stage{height:min(58dvh,600px);min-height:300px}#model-stage canvas{touch-action:none}.model-foot{padding:0 30px;display:flex;justify-content:space-between;gap:15px;align-items:center}.model-foot b{font-size:14px}.model-foot p{font-size:12px;color:#467d7d;margin:7px 0 0}.model-actions{display:flex;gap:8px}.model-actions button{font-size:13px;padding:12px 16px;border:1px solid #55988955;border-radius:20px;background:#ffffff88;color:#18384e;white-space:nowrap}.model-actions button[aria-pressed=true]{background:#18384e;color:#ffda60}.model-disclaimer{margin:18px 30px 20px;font-size:11px;color:#578c88}#places button:nth-child(2){border-color:#e5ad26}#places button:nth-child(2)::after{content:' ✦';color:#c78d00}@media(max-width:650px){#model-dialog{width:96vw;max-width:96vw;border-radius:18px}.model-head{padding:20px 20px 0}.model-head h2{font-size:29px}.model-head h2 span{display:block;margin:5px 0 0;font-size:12px}#model-stage{height:43dvh;min-height:260px}.model-foot{padding:0 20px;align-items:flex-start;flex-direction:column}.model-foot b{font-size:12px}.model-actions button{padding:9px 15px}.model-disclaimer{margin:16px 20px;font-size:10px}}

/* Clear city-overview action and attributed landmark photography. */
.view-controls #reset{width:auto;min-width:116px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;background:#193335;color:#e5f294;font-size:14px;font-weight:600}.view-controls #reset:hover{background:#2b5556}.view-controls #reset>span{font-size:20px}.view-controls>span{margin:0 5px}.photo-frame{position:relative;height:156px;border-radius:9px;overflow:hidden;background:#e4ece5}#detail-photo img{height:156px;border-radius:0}#detail-photo img[hidden]{display:none}#photo-state{padding:25px 17px;margin:0;font-size:13px;color:#526d63;line-height:1.7}#photo-state[hidden]{display:none}.photo-badge{position:absolute;left:9px;bottom:9px;background:#193335bd;color:white;backdrop-filter:blur(4px);padding:4px 7px;border-radius:5px;font-size:11px}#detail-photo figcaption{font-size:11px;line-height:1.6;margin-top:7px}#photo-source{text-decoration:none}#photo-source:hover{text-decoration:underline}@media(max-width:900px){.view-controls #reset{min-width:108px;padding:0 10px;font-size:13px}.photo-frame,#detail-photo img{height:190px}}

.rail-preview{margin-top:14px;padding:10px 14px;border:1px solid #529d77;border-radius:10px;background:#e3efcd;color:#215e4c;font-size:14px;font-weight:600;display:flex;align-items:center;gap:18px}.rail-preview:hover{background:#cfebaa}.rail-preview:focus-visible{outline:3px solid #e6a738;outline-offset:3px}@media(max-width:900px){.rail-preview{margin:10px 0 0;padding:8px 12px}}
/* Keep the overview controls reachable beside the taller photo/detail cards. */
@media(min-width:901px){#detail{max-height:calc(100% - 260px)}}
@media(min-width:1440px){#detail{max-height:calc(100% - 290px)}}

/* Day/night mode applies to navigation, cards, controls and both 3D canvases. */
:root{color-scheme:light}html[data-theme=night]{color-scheme:dark;background:#0b1626;color:#e3eff6}
.header-tools{display:flex;align-items:center;gap:24px}.theme-switch{display:flex;gap:3px;padding:4px;border:1px solid #9cac9d55;border-radius:24px;background:#e9efdf}.theme-switch button{border:0;border-radius:20px;background:transparent;padding:8px 12px;color:#536b60;font-size:13px;white-space:nowrap}.theme-switch button[aria-pressed=true]{background:#193335;color:#edf7bb;box-shadow:0 2px 7px #18333320}
html[data-theme=night] body>header{background:#101f32;border-color:#294359}html[data-theme=night] .brand-icon{background:#284b60;color:#f5d587}html[data-theme=night] .edition,html[data-theme=night] .eyebrow,html[data-theme=night] .intro>p,html[data-theme=night] .intro-foot,html[data-theme=night] .world-caption,html[data-theme=night] .gesture,html[data-theme=night] .map-tag{color:#a5bacb}html[data-theme=night] .edition b{color:#e4edf6}
html[data-theme=night] .theme-switch{background:#0b1829;border-color:#35506a}html[data-theme=night] .theme-switch button{color:#b2c6d6}html[data-theme=night] .theme-switch button[aria-pressed=true]{background:#335b78;color:#ffe2a1}
html[data-theme=night] nav button,html[data-theme=night] .pin{background:#182b40ed;border-color:#3b5265;color:#d4e5ed}html[data-theme=night] nav button.active,html[data-theme=night] .pin.selected{background:#eed094;color:#182b40;border-color:#eed094}html[data-theme=night] .pin:hover{background:#37566d;color:#fff4d4}html[data-theme=night] .rail-preview{background:#193b3b;border-color:#538c7b;color:#c6eed3}
html[data-theme=night] #detail{background:#13263bea;border-color:#32495f;box-shadow:0 16px 44px #0005}html[data-theme=night] #detail-text,html[data-theme=night] .detail-top,html[data-theme=night] #detail-photo figcaption,html[data-theme=night] .count button{color:#b8cbd9}html[data-theme=night] .english,html[data-theme=night] .detail-note>span,html[data-theme=night] .count{color:#90aabd}html[data-theme=night] .count>span:first-child{color:#f6d89c}html[data-theme=night] .detail-note{border-color:#304b60}html[data-theme=night] #close{color:#c3d2db}html[data-theme=night] #detail-link{background:#2f5352;color:#def6e4}html[data-theme=night] #detail-link:hover{background:#3c6963}html[data-theme=night] .photo-frame{background:#21384b}html[data-theme=night] #photo-state{color:#b5ccdd}
html[data-theme=night] .view-controls,html[data-theme=night] .compass{background:#14283ded;border-color:#3b5265}html[data-theme=night] .view-controls button{color:#e2eef8}html[data-theme=night] .view-controls button:hover{background:#2b465b}html[data-theme=night] .view-controls #reset{background:#e3c889;color:#192d3d}html[data-theme=night] .view-controls>span,html[data-theme=night] .count-line{background:#466076}html[data-theme=night] #load-error{background:#172d43}
html[data-theme=night] #model-dialog{background:#101e33;color:#e1edf6}html[data-theme=night] .model-head{background:transparent}html[data-theme=night] .model-kicker,html[data-theme=night] .model-foot p,html[data-theme=night] .model-disclaimer{color:#a0b9cc}html[data-theme=night] #model-close,html[data-theme=night] .model-actions button{background:#233b52;color:#dfedf5;border-color:#48627b}html[data-theme=night] .model-actions button[aria-pressed=true]{background:#e5c987;color:#16283c}html[data-theme=night] #model-dialog::backdrop{background:#030914d1}
@media(max-width:900px){.header-tools{gap:8px}.header-tools .edition{display:none}.theme-switch button{padding:7px 9px;font-size:12px}.theme-switch{padding:3px}body>header{padding:0 16px}.brand{font-size:18px;gap:9px}.brand small{font-size:7px}.model-actions{flex-wrap:wrap}}
@media(max-width:370px){.brand small{display:none}.brand{font-size:16px}.theme-switch button{padding:7px 8px}}

/* JNX Studio 出品標誌：白天深色字、黑夜白色字 */
.header-lead{display:flex;align-items:center;gap:20px;min-width:0}
.jnx-logo{display:block;line-height:0;flex-shrink:0}
.jnx-logo img{height:30px;width:auto}
.jnx-night{display:none}
[data-theme=night] .jnx-day{display:none}
[data-theme=night] .jnx-night{display:block}
.lead-divider{width:1px;height:34px;background:#19333526}
[data-theme=night] .lead-divider{background:#ffffff26}
@media(max-width:900px){.header-lead{gap:12px}.jnx-logo img{height:22px}.lead-divider{height:26px}}
@media(max-width:420px){.jnx-logo,.lead-divider{display:none}}

/* 介紹影片：直式影片，高度隨視窗縮放；外觀沿用 3D 特寫視窗 */
.video-preview{gap:10px}
.video-preview small{margin-left:auto;font-size:12px;font-weight:500;opacity:.75}
#video-dialog{border:0;padding:0;border-radius:25px;max-width:94vw;max-height:94dvh;color:#18384e;background:#d8f4ee;box-shadow:0 30px 100px #052a5260}
#video-dialog::backdrop{background:#122e42b8;backdrop-filter:blur(8px)}
.video-shell{display:flex;flex-direction:column;align-items:center}
.video-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;align-self:stretch;height:auto;padding:22px 26px 14px;background:transparent;border:0} /* 蓋掉全域 header 的高度、底色與底線 */
.video-head h2{font-size:26px;margin:6px 0 0;letter-spacing:-.01em}
#video-close{border:0;border-radius:50%;width:42px;height:42px;color:#18384e;font-size:28px;background:#ffffffaa;cursor:pointer}
#intro-video{display:block;height:min(72dvh,820px);aspect-ratio:9/16;max-width:calc(94vw - 52px);margin:0 26px;border-radius:14px;background:#193335}
#video-dialog .model-disclaimer{max-width:calc(min(72dvh,820px) * 9 / 16);text-align:center;margin:14px 26px 20px}
[data-theme=night] #video-dialog{background:#101e33;color:#e1edf6}
[data-theme=night] #video-dialog::backdrop{background:#030914d1}
[data-theme=night] #video-dialog .video-head{background:transparent}
[data-theme=night] #video-close{background:#ffffff1f;color:#e1edf6}
@media(max-width:600px){#intro-video{height:auto;width:calc(94vw - 32px);margin:0 16px}.video-head{padding:18px 16px 12px}.video-head h2{font-size:21px}}

/* 返回 3dlab 入口：與日夜切換同一套膠囊外觀 */
.back-hub{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1px solid #9cac9d55;border-radius:24px;background:#e9efdf;color:#193335;font-size:14px;text-decoration:none;white-space:nowrap}
.back-hub[hidden]{display:none}
.back-hub:hover{background:#dfe9cf}
[data-theme=night] .back-hub{background:#162b40;border-color:#294359;color:#e1edf6}
[data-theme=night] .back-hub:hover{background:#1d3650}
@media(max-width:900px){.back-hub{padding:7px 11px;font-size:12px}.back-hub span{display:none}}

/* 版面修正：地圖畫布鋪滿整個寬度（原本左右各留一條頁面底色，跟畫布色差成兩條色帶），
   詳情卡上移、關閉鈕不壓到「城市中心」標籤，讓卡片在一般螢幕高度內少捲動 */
@media(min-width:901px){#world{left:0;right:0}.detail-top{padding-right:28px}#detail{top:96px;max-height:calc(100% - 236px);scrollbar-width:thin}.photo-frame,#detail-photo img{height:128px}}
@media(min-width:901px){.world-caption{left:50%;transform:translateX(-50%)}}
@media(min-width:1550px){#detail{top:104px;right:30px;max-height:calc(100% - 244px)}}