*{box-sizing:border-box}html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}body{margin:0;background:#dfe4df;color:#1f2924;font-family:Arial,'Noto Sans TC',sans-serif}.scene-scroll{height:550vh}.scene-fixed{height:100svh;position:sticky;top:0;overflow:hidden}.scene-fixed canvas{position:absolute;inset:0;width:100%;height:100%}.scene-nav,.scene-title,.scene-footer,#stops{position:absolute;z-index:2}.scene-nav{top:30px;left:32px;right:32px;display:flex;justify-content:space-between;font:12px monospace}.count{padding:15px 22px;background:#d4ed8d;border-radius:6px}.brand{padding-top:15px;letter-spacing:.12em}.scene-title{left:7vw;bottom:19%;width:350px;padding:25px 20px;background:linear-gradient(90deg,#f1f2eef5,#f1f2ee90,transparent);pointer-events:none}.scene-title small{font-size:12px;color:#667166;letter-spacing:.08em}.scene-title h1{font-size:clamp(36px,4.8vw,68px);line-height:1.15;margin:18px 0;letter-spacing:-.06em}.scene-title p{max-width:250px;line-height:1.8;color:#667166;font-size:14px}.scene-footer{bottom:22px;left:32px;right:32px;display:flex;gap:15px;justify-content:space-between;align-items:end;font-size:11px;color:#536058}.scene-footer a{color:inherit}#stops{right:32px;top:40%;display:flex;flex-direction:column;gap:8px}#stops button{border:0;background:transparent;padding:5px 0;text-align:left;color:#435044;cursor:pointer;border-radius:0;font:11px/1.35 monospace;text-shadow:0 1px 2px #ffffffaa;transition:color .2s ease,text-shadow .2s ease}#stops button[aria-current=step]{background:transparent;border:0;color:#9dff3d;text-shadow:0 0 7px #173322,0 1px 2px #ffffff99;font-weight:700}button:focus-visible,a:focus-visible{outline:2px solid #58732b;outline-offset:4px}.scroll-steps{display:none}@media(max-width:700px){.scene-title{left:10px;bottom:18%;width:270px}.scene-nav{left:20px;right:20px}#stops{top:auto;bottom:10%;left:20px;right:20px;flex-direction:row;gap:4px}#stops button{flex:1;padding:5px 3px;font-size:10px;text-align:center}.scene-footer{left:20px;right:20px;font-size:9px}.scene-footer span:last-child{display:none}}
/* 提高地圖模型對比，避免高俯角場景被白色背景吃掉。 */
.scene-fixed{background:#b8c3c6}.scene-fixed:after{background:linear-gradient(90deg,#b8c3c6d9 0%,#b8c3c622 42%,#b8c3c600 76%),linear-gradient(#ffffff18 1px,transparent 1px),linear-gradient(90deg,#ffffff18 1px,transparent 1px);background-size:auto,56px 56px,56px 56px}.scene-title{background:linear-gradient(90deg,#b8c3c6f5,#b8c3c688,transparent)}.scene-title p{color:#33423f}.scene-footer{color:#26352f}.scene-footer span:first-child{color:#14221d}#stops button{background:#d9e0dbee;border-color:#83928b;color:#223029}#stops button[aria-current=step]{background:#caff66;border-color:#7e9d38}
/* 藍灰底色，讓簡化地景與道路輪廓清楚浮出。 */
.scene-fixed{background:#aebdcc}.scene-fixed:after{background:linear-gradient(90deg,#aebdccd9 0%,#aebdcc44 50%,#aebdcc08 82%),linear-gradient(#e9f2f41c 1px,transparent 1px),linear-gradient(90deg,#e9f2f41c 1px,transparent 1px);background-size:auto,56px 56px,56px 56px}.scene-title{background:linear-gradient(90deg,#aebdccf5,#aebdcc99,transparent)}.scene-title p{color:#2c3d4d}.scene-footer{color:#203547}.scene-footer span:first-child{color:#152939}#stops button{background:#c8d4deee;color:#203547;border-color:#63788b}#stops button[aria-current=step]{background:#caff66;color:#12200e}
/* 根因修正：使用不透明藍灰底，避免透明漸層與 WebGL 清除色混合成白色。 */
.scene-fixed{background:#9bafbf!important}.scene-fixed canvas{z-index:0}.scene-fixed:after{z-index:1;background:linear-gradient(90deg,rgba(155,175,191,.78) 0%,rgba(155,175,191,.2) 48%,rgba(155,175,191,0) 85%),linear-gradient(rgba(230,241,246,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(230,241,246,.12) 1px,transparent 1px)!important;background-size:auto,56px 56px,56px 56px!important;mix-blend-mode:normal!important}.scene-nav,.scene-title,.scene-footer,#stops{z-index:2!important}.scene-title{background:linear-gradient(90deg,rgba(155,175,191,.96),rgba(155,175,191,.72),rgba(155,175,191,0))!important}
/* 最終對比修正：關閉會把整個 WebGL 畫布洗白的覆蓋層，改由不透明藍灰底承載地景。 */
.scene-fixed{background:#62798d!important}.scene-fixed:after{display:none!important}.scene-fixed canvas{background:#62798d!important}.scene-title{background:linear-gradient(90deg,rgba(98,121,141,.97),rgba(98,121,141,.78),rgba(98,121,141,0))!important}.scene-title small{color:#d7eced}.scene-title h1{color:#f3f7f7}.scene-title p{color:#e0eaed}.scene-footer{color:#e2ecee}.scene-footer span:first-child{color:#f2f6f7}#stops button{background:#d9e3e8ee;color:#203646}#stops button[aria-current=step]{background:#caff66;color:#152211}
/* 低飽和多色地景：避免建築與底圖同色。 */
.scene-fixed{background:#8da2b5!important}.scene-fixed canvas{background:#8da2b5!important}.scene-fixed:after{display:none!important}.scene-title{background:linear-gradient(90deg,rgba(141,162,181,.96),rgba(141,162,181,.72),rgba(141,162,181,0))!important}.scene-title small{color:#e2eff0}.scene-title h1{color:#f5f7f6}.scene-title p{color:#e2eaec}.scene-footer{color:#e4ecee}.scene-footer span:first-child{color:#f5f7f7}
/* 強制畫布底色，避免任何瀏覽器將透明 WebGL 清除色回退為白色。 */
.scene-fixed,.scene-fixed canvas{background-color:#8da2b5!important}.scene-fixed:after{display:none!important}
/* 提高資訊面板與地圖底色的區隔。 */
.scene-title{background:linear-gradient(105deg,rgba(25,48,73,.9),rgba(42,73,101,.72) 62%,rgba(42,73,101,0))!important;border-left:3px solid #9dff3d;box-shadow:0 14px 32px rgba(20,38,54,.18)}
.scene-title small{color:#b7f4ef!important}.scene-title h1{color:#ffffff!important}.scene-title p{color:#d9edf1!important}
/* 淺色資訊面板，保留對比但降低深色重量。 */
.scene-title{background:linear-gradient(105deg,rgba(128,157,176,.88),rgba(151,178,193,.72) 62%,rgba(151,178,193,0))!important;border-left-color:#b8ff64;box-shadow:0 14px 32px rgba(61,84,99,.14)}
.scene-title small{color:#e5ffff!important}.scene-title h1{color:#f9ffff!important}.scene-title p{color:#edf8fa!important}
/* 面板改為明亮霧藍，與底圖保持清楚層次。 */
.scene-title{background:linear-gradient(105deg,rgba(174,202,215,.94),rgba(196,219,227,.82) 62%,rgba(196,219,227,0))!important;border-left-color:#8adf42!important;box-shadow:0 14px 32px rgba(57,83,98,.12)!important}
.scene-title small,.scene-title p{color:#23485b!important}.scene-title h1{color:#17384b!important}

/* 場景共用面板語彙：霧藍底、深藍字、綠色狀態線。 */
.scene-fixed{
 --panel-ink:#17384b;
 --panel-accent:#8adf42;
 --panel-fill:rgba(196,219,227,.78);
 --panel-shadow:0 10px 24px rgba(57,83,98,.12);
}
.scene-fixed .count,
.scene-fixed #stops button{
 background:var(--panel-fill);
 color:var(--panel-ink);
 border:0;
 border-left:3px solid transparent;
 border-radius:0;
 box-shadow:none;
 backdrop-filter:blur(2px);
 font-family:inherit;
 font-size:12px;
 line-height:1.5;
}
.scene-fixed .count{border-left-color:var(--panel-accent);font-family:monospace}
.scene-fixed #stops button{min-height:44px;transition:background .18s ease,border-color .18s ease}
.scene-fixed #stops button[aria-current=step]{
 background:#caff66;
 border-left-color:var(--panel-accent);
 color:var(--panel-ink);
 font-weight:700;
}
.scene-fixed #stops button:hover{background:#d6e7ec;border-left-color:#638f9c}
.scene-fixed #stops button[aria-current=step]:hover{border-left-color:var(--panel-accent)}
.scene-fixed #stops button:focus-visible{outline:2px solid var(--panel-ink);outline-offset:4px}
@media(max-width:700px){.scene-fixed #stops button{font-size:10px;padding:10px 3px}}
@media(prefers-reduced-motion:reduce){.scene-fixed #stops button{transition:none}}
/* 3D 區域約佔視窗 3/5 高度。 */
.scene-fixed{height:60vh!important;min-height:480px}
@media(max-width:700px){.scene-fixed{height:60svh!important;min-height:420px}}

/* 3D 縮為 3/5 高度後，內容立即銜接，移除多餘空白。 */
.scene-scroll.scene-compact{height:60vh!important;min-height:480px}
.scene-scroll.scene-compact .scroll-steps{display:none}
@media(max-width:700px){.scene-scroll.scene-compact{height:60svh!important;min-height:420px}}

/* 縮小場景資訊面板，將地圖下緣留給內容。 */
.scene-fixed .scene-title{left:20px;bottom:20px;width:280px;max-width:calc(100% - 40px);padding:14px 16px}
.scene-fixed .scene-title small{display:block;font-size:10px;line-height:1.5;letter-spacing:.04em}
.scene-fixed .scene-title h1{font-size:36px;line-height:1.15;margin:9px 0;letter-spacing:-.04em}
.scene-fixed .scene-title p{font-size:12px;line-height:1.6;margin:0;max-width:none}
.map-credit{font-size:10px;line-height:1.6}.map-credit a{text-decoration:underline}
.site-footer{flex-wrap:wrap;gap:12px}.map-credit-footer{padding:16px 20px;color:#23485b}
@media(max-width:700px){
 .scene-fixed .scene-title{left:12px;bottom:72px;width:250px;padding:12px}
 .scene-fixed .scene-title h1{font-size:30px}
 .scene-fixed #stops{bottom:12px;left:12px;right:12px}
}
#weather{position:absolute;z-index:3;left:32px;top:50px;padding:0;background:transparent;border:0;box-shadow:none;font:11px/1.35 monospace;color:#435044;min-width:0}#weather b,#weather span{display:block}#weather span{margin-top:1px;color:#667166}@media(max-width:700px){#weather{left:20px;top:20px;min-width:160px;font-size:10px}}
.scene-nav .brand{visibility:hidden;min-width:0;width:0;padding:0;margin:0;}

/* 天氣文字與五個台北時段共用場景色彩設定。 */
#weather{color:var(--weather-text,#243b49);text-shadow:var(--weather-shadow,0 1px 2px #ffffffcc)}
#weather span{color:var(--weather-detail,#344c59)}

html[data-time-of-day="night"] #stops button{color:#d8e5ef;text-shadow:0 1px 3px #07121fee}html[data-time-of-day="night"] #stops button[aria-current=step]{color:#b8ff78}
/* 導覽項目與天氣資訊共用無底緊湊樣式 */
.scene-fixed #stops button{background:transparent;border:0;border-left:0;box-shadow:none;backdrop-filter:none;min-height:0;padding:5px 0;color:var(--weather-text,#435044);font:11px/1.35 monospace;text-shadow:var(--weather-shadow,0 1px 2px #ffffffaa)}
.scene-fixed #stops button[aria-current=step]{background:transparent;border:0;color:#9dff3d;text-shadow:0 0 7px #173322,0 1px 2px #ffffff99}
.scene-fixed #stops button:hover{background:transparent;border:0;color:#8adf42}
/* 隱藏不需要顯示的場景頁數區塊，保留內部場景索引更新。 */
.scene-fixed .count{display:none}
/* 可互動場景項目使用手指游標。 */
.scene-fixed #stops button,
.scene-fixed #stops button:hover,
.scene-fixed #stops button:focus-visible{cursor:pointer}