:root{
  --storm:#16212b; --storm2:#243545; --mist:#8fa6b8; --sky:#cfe6ef;
  --paper:#eef4f7; --ink:#14293a; --ink-soft:#4b6173; --line:#c6d4dd;
  --umbrella:#f4b942; --umbrella-d:#c98a14; --rain:#2f6f8f; --grass:#5da27a; --alert:#d4513f;
  --display:"LXGW WenKai TC","Noto Serif TC","PingFang TC",serif;
  --body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --bg:#16212b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--paper);font-family:var(--body);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--umbrella);outline-offset:3px}
section[id]{scroll-margin-top:12px}

/* 固定頂欄 */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:linear-gradient(#16212bcc,#16212b00);pointer-events:none}
.bar>*{pointer-events:auto}
.brand{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.06em;color:#fff;text-decoration:none;background:#16212bd9;border-radius:999px;padding:4px 14px;white-space:nowrap}
.bar-ctl{display:flex;align-items:center;gap:12px;font-size:13px;background:#16212bd9;border-radius:999px;padding:4px 14px;color:#eaf1f6;white-space:nowrap}
.rain-ctl{display:flex;align-items:center;gap:8px;white-space:nowrap}
.rain-ctl input{width:96px;accent-color:var(--umbrella)}
#soundBtn{background:#ffffff1f;border:1px solid #ffffff55;border-radius:999px;padding:3px 12px;cursor:pointer;white-space:nowrap}
#soundBtn[aria-pressed="true"]{background:var(--umbrella);color:#2b2108;border-color:var(--umbrella)}

/* 雨與傘 */
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#umbrella{position:fixed;left:0;top:0;z-index:2;pointer-events:none;will-change:transform;transition:opacity .3s}
#umbrella.off{opacity:0}

main{position:relative;z-index:1}

/* 開場 */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding:96px max(24px,6vw) 64px;overflow:hidden}
.hero-text{position:relative;z-index:1;max-width:58vw}
.headline{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(34px,6.2vw,104px);line-height:1.18;letter-spacing:.02em;display:grid}
.headline>span{grid-area:1/1}
.headline .fog{color:#9bb3c4;filter:blur(2.6px);opacity:.62}
.headline .clear{color:#fff;-webkit-mask-image:radial-gradient(ellipse 340px 260px at var(--mx,40%) var(--my,50%),#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 340px 260px at var(--mx,40%) var(--my,50%),#000 52%,transparent 100%)}
.byline{margin:28px 0 0;font-size:clamp(15px,1.7vw,19px);color:#d5e2ea;max-width:34em}
.byline strong{font-size:1.2em;color:#fff;margin-right:.4em}
.nb{white-space:nowrap}
.hint{margin:14px 0 0;color:var(--umbrella);font-size:15px;transition:opacity .5s}
.hint.done{opacity:.55}
.scroll-cue{display:inline-block;margin-top:34px;padding:10px 20px;border:1.5px solid #ffffff77;border-radius:999px;text-decoration:none;font-size:15px}
.scroll-cue:hover{background:#ffffff1c}
.hero-photo{position:absolute;right:max(0px,2vw);bottom:0;width:min(40vw,620px);height:auto;max-height:86svh;object-fit:contain;object-position:right bottom;z-index:0;filter:drop-shadow(0 0 40px #0a121a88)}

/* 站點通用 */
.station,.about{position:relative;z-index:3;max-width:1120px;margin:28px auto;padding:clamp(22px,4vw,44px);background:var(--paper);color:var(--ink);border-radius:20px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,48px);align-items:start}
.station:first-of-type{margin-top:0}
.st-tag{margin:0 0 6px;font-size:14px;color:var(--rain);font-weight:700}
.station h2,.about h2,.clearing h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.3;margin:0 0 16px;text-wrap:balance}
.st-text p{margin:0 0 14px;max-width:32em}
.st-do{color:var(--ink-soft);font-weight:500}
.st-text{position:static}
.msg{margin:12px 0 0;font-size:15px;min-height:2em;color:var(--ink)}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{background:var(--ink);color:#fff;border:0;border-radius:999px;padding:10px 22px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;transition:background .2s,transform .15s}
.btn:hover{background:#0c1c2a}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:#14293a12}
.btn.big{background:var(--umbrella);color:#2b2108;padding:14px 30px;font-size:18px}
.btn.big:hover{background:#ffc95a}
.mode{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{background:#fff;border:1.5px solid var(--line);color:var(--ink);border-radius:999px;padding:7px 16px;cursor:pointer;font-weight:500;transition:background .2s,border-color .2s,color .2s,transform .15s}
.chip:hover{border-color:var(--rain)}
.chip:active{transform:scale(.96)}
.chip.on,.chip[aria-pressed="true"]{background:var(--rain);border-color:var(--rain);color:#fff}
.chip.link{text-decoration:none;background:#ffffffb3}

/* 卡片進場（有 JS 才啟用；沒載入 app.js 時 3.5 秒後自動全部顯示） */
.js .station,.js .about{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.js .station.in,.js .about.in,.rv-fallback .station,.rv-fallback .about{opacity:1;transform:none}

/* ===== 雨（SVG 場景共用）：遠、近兩層，沿著風向斜著落下，位移剛好是圖樣的一個週期，循環不跳格 ===== */
.rain .rf.near{animation:fallN .4s linear infinite}
.rain .rf.far{animation:fallF .62s linear infinite}
@keyframes fallN{to{transform:translate(7.92px,44px)}}
@keyframes fallF{to{transform:translate(5.76px,32px)}}
/* 雨打在棚頂的水花、棚緣滴落的水 */
.splash{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:splash .9s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes splash{0%{opacity:0;transform:scale(.5)}18%{opacity:.95}100%{opacity:0;transform:translateY(-3px) scale(1.25)}}
.drip{opacity:0;animation:drip 1s ease-in infinite;animation-delay:var(--d,0s)}
@keyframes drip{0%{opacity:0;transform:translateY(0)}12%{opacity:.95}85%{opacity:.8}100%{opacity:0;transform:translateY(var(--fall,74px))}}
.wet{opacity:0;animation:wet 1.4s ease-in infinite;animation-delay:var(--d,0s)}
@keyframes wet{0%{opacity:0;transform:translateY(-3px)}20%{opacity:.95}100%{opacity:0;transform:translateY(16px)}}

/* 1 設施帶 */
.street{position:relative;height:340px;border-radius:14px;overflow:hidden;background:#465664;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.street .band{position:absolute;left:0;right:0;top:0;height:104px;background:#b6c4ce}
.strip{position:absolute;left:10px;right:10px;top:8px;height:72px;display:flex;gap:6px;padding:5px;border:2px dashed #14293a99;border-radius:10px;background:#ffffff55}
.slot{flex:1;border-radius:8px;border:1px dashed #14293a44;display:grid;place-items:center;min-width:0}
.strip-label{position:absolute;left:14px;bottom:6px;font-size:13px;color:var(--ink);font-weight:700}
.lane{position:absolute;left:0;right:0;top:104px;bottom:0;background:#465664}
.lane-line{position:absolute;left:0;right:0;top:50%;border-top:3px dashed #d8e0e688;opacity:0;transition:opacity .6s}
.street.clean .lane-line{opacity:1}
.car{position:absolute;display:grid;justify-items:center;line-height:1;transition:opacity .5s .6s,transform 1.2s cubic-bezier(.5,0,.9,.6)}
.car small{font-size:11px;color:#fff;background:var(--alert);border-radius:6px;padding:1px 6px;margin-top:2px}
.street.clean .car{opacity:0;transform:translateX(460px)}
.bus-run{position:absolute;top:34%;left:-100px;opacity:0}
.street.clean .bus-run{opacity:1;animation:busgo 3.8s linear 1.2s infinite}
@keyframes busgo{from{transform:translateX(0)}to{transform:translateX(var(--sw,680px))}}
.tok{position:absolute;width:74px;height:56px;display:grid;place-items:center;align-content:center;gap:0;border:2px solid var(--ink);border-radius:10px;background:var(--umbrella);color:#2b2108;font-size:12px;font-weight:700;line-height:1.2;cursor:grab;touch-action:none;padding:2px;box-shadow:0 3px 0 #0006;z-index:3}
.tok span{font-size:22px;line-height:1.1}
.tok.drag{cursor:grabbing;transform:scale(1.07);z-index:5}
.slot .tok{position:static;width:100%;height:100%;box-shadow:none;cursor:pointer;animation:pop .3s ease}
@keyframes pop{from{transform:scale(.8)}to{transform:scale(1)}}

/* 2 公車 */
.compare{position:relative;aspect-ratio:400/240;border-radius:14px;overflow:hidden;background:#8fa6b6;touch-action:pan-y}
.compare svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.layer{position:absolute;inset:0}
.layer.after{clip-path:inset(0 0 0 var(--p,50%))}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cmp-handle{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px #0004;pointer-events:none}
.cmp-handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:18px;box-shadow:0 2px 8px #0005}
.compare:focus-within .cmp-handle{box-shadow:0 0 0 3px var(--umbrella)}
.cmp-tag{position:absolute;top:10px;font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px;background:#14293acc;color:#fff;pointer-events:none}
.cmp-tag.l{left:10px}.cmp-tag.r{right:10px}
.bus-lane{position:relative;height:74px;margin-top:12px;border-radius:12px;background:#465664;overflow:hidden}
.road-line{position:absolute;left:0;right:0;bottom:12px;border-top:3px dashed #d8e0e688}
.bus{position:absolute;top:14px;left:0;line-height:1;transform:translateX(-110px);will-change:transform}
.bus svg{display:block;overflow:visible}
.bus .bus-body{transform-box:fill-box;transform-origin:50% 100%}
.bus-say{position:absolute;left:42px;top:-2px;white-space:nowrap;font-size:12px;background:#fff;color:var(--ink);border-radius:8px;padding:1px 8px;transition:background .3s}
.bus .speed{opacity:0;transition:opacity .3s}
.bus-lane[data-mode="count"] .bus-say{background:#ffe0dc}
.bus-lane[data-mode="count"] .speed{opacity:.7;animation:speed .22s linear infinite}
.bus-lane[data-mode="count"] .bus-body{animation:rush .26s ease-in-out infinite alternate}
.bus-lane[data-mode="ride"] .bus-body{animation:cruise 2.6s ease-in-out infinite alternate}
@keyframes rush{from{transform:rotate(-1.6deg) translateY(0)}to{transform:rotate(1.1deg) translateY(-1.5px)}}
@keyframes cruise{from{transform:translateY(0)}to{transform:translateY(-1px)}}
@keyframes speed{from{transform:translateX(0)}to{transform:translateX(-5px)}}
/* 乘客：趕時間時被甩得東倒西歪，平穩時坐得安穩 */
.pax{transform-box:fill-box;transform-origin:50% 100%}
.bus-lane[data-mode="count"] .pax{animation:lean .26s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.09s)}
@keyframes lean{from{transform:rotate(-9deg) translateX(-1.5px)}to{transform:rotate(8deg) translateX(1.5px)}}

/* 4 公園 */
.park{border-radius:14px;overflow:hidden;background:#93a9b8}
.park svg{display:block;width:100%;height:auto}
.park .eq{display:none}
.park[data-age="toddler"] .toddler,.park[data-age="school"] .school,.park[data-age="teen"] .teen{display:block;animation:eqin .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes eqin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.park .roof{display:none}
.park[data-roof="1"] .roof{display:block;animation:roofin .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes roofin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.park .drip{--fall:98px}
.park .swing{transform-origin:280px 90px;animation:swing 1.9s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}
.park .ball{animation:bounce .8s ease-in infinite alternate}
.park .ball.b2{animation-delay:-.4s}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-10px)}}

/* 3 人行道（SVG 場景） */
.walk{position:relative;border-radius:14px;overflow:hidden;background:#8fa6b6}
.walk svg{display:block;width:100%;height:auto}
.w-labels{position:absolute;left:8px;right:8px;top:8px;display:flex;flex-wrap:wrap;gap:4px 6px;pointer-events:none}
.walk .w-label{font-size:12.5px;line-height:1.5;font-weight:700;background:#ffffffd9;color:var(--ink);border-radius:8px;padding:1px 9px}
.walk .g-sw,.walk .g-ramp,.walk .g-tact-a{display:none}
.walk.sw .g-sw{display:block}
.walk.sw .g-shoulder{display:none}
.walk.sw:not(.ext) .g-tact-a{display:block}
.walk.ramp .g-ramp{display:block}

/* 路口外推施工順序：貨車先開走 → 人行道向停車帶長出來 → 導盲磚、警示柱 → 斑馬線縮短、行人走到外推區前緣。
   拆除時反向進行。各項 transition-delay 寫在「目的狀態」上，所以來回都是正確的先後順序。 */
.walk .ext-body{transform-box:view-box;transform-origin:0 214px;transform:scaleY(0);transition:transform .9s cubic-bezier(.3,.1,.2,1) .7s}
.walk.ext .ext-body{transform:scaleY(1);transition-delay:.5s}
.walk .ext-fit{opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.walk.ext .ext-fit{opacity:1;transform:none;transition-delay:1.4s}
.walk .cw-long{opacity:.9;transition:opacity .4s 1.4s}
.walk.ext .cw-long{opacity:0;transition-delay:.4s}
.walk .cw-short{opacity:0;transition:opacity .4s 0s}
.walk.ext .cw-short{opacity:.9;transition-delay:1.4s}
/* 側溝：雨水順著路緣往右流；外推蓋好後繞過外推區 */
.walk:not(.sw) .gutter{display:none}
.gutter{animation:flow .9s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.walk .gut-str{opacity:.85;transition:opacity .3s 1.4s}
.walk.ext .gut-str{opacity:0;transition-delay:.4s}
.walk .gut-det{opacity:0;transition:opacity .3s 0s}
.walk.ext .gut-det{opacity:.9;transition-delay:1.4s}
.walker{transition-property:transform;transition-timing-function:cubic-bezier(.35,.1,.45,1);transition-duration:0s}
.walker .warn{opacity:0;transition:opacity .25s}
.walker.stuck .warn{opacity:1}
.walker.moving .bob{animation:bob .42s ease-in-out infinite alternate}
#wheel.moving .bob{animation:none}
@keyframes bob{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-2.4px) rotate(1.5deg)}}
/* 車：外層 g 負責車道位置（可以平順換道），內層 .drive 負責往右開 */
.car-far{transform:translateY(295px)}
.car-near{transform:translateY(254px)}
.drive{animation:drive 3.6s linear infinite}
.car-far .drive{animation-duration:6.2s}
@keyframes drive{from{transform:translateX(-140px)}to{transform:translateX(520px)}}
/* 貨車：沒有外推時停在斑馬線旁；外推蓋好後，這一段不能停車，貨車只好停遠一點 */
.van{transform:translate(188px,205px);transition:transform 1.2s cubic-bezier(.45,.05,.3,1) 1.5s}
.walk.ext .van{transform:translate(96px,205px);transition-delay:0s}
.waiter{transform:translate(284px,173px);transition:transform 1s cubic-bezier(.4,.1,.3,1) 0s}
.walk.ext .waiter{transform:translate(284px,202px);transition-delay:1.4s}
.waiter .tag{transition:opacity .3s}
.waiter .tag-bad{opacity:1;transition-delay:1.1s}
.waiter .tag-ok{opacity:0}
.walk.ext .waiter .tag-bad{opacity:0;transition-delay:0s}
.walk.ext .waiter .tag-ok{opacity:1;transition-delay:2.4s}
.result{margin:12px 0 0;padding-left:1.2em;font-size:15px}
.result li{margin-bottom:4px}
.vh{display:block}

/* 5 寵物（SVG 場景） */
.pet{border-radius:14px;overflow:hidden}
.pet svg{display:block;width:100%;height:auto}
.pet .g-area,.pet .leash,.pet .p-worry,.pet .warnbadge{opacity:0;transition:opacity .5s}
.pet .p-calm{transition:opacity .3s}
.pet[data-area="1"] .g-area{opacity:1}
.pet .leash{transition:opacity .25s}
.pet[data-leash="1"] .leash{opacity:1;transition:opacity .4s .75s}
.pet #dog{transform:translate(150px,166px);transition:transform 1s ease}
.pet[data-area="1"] #dog{transform:translate(326px,166px)}
.pet[data-leash="1"] #dog{transform:translate(104px,166px)}
.pet .lean{transform-box:fill-box;transform-origin:50% 100%;transition:transform .4s}
.pet[data-area="0"][data-leash="0"] .p-worry,.pet[data-area="0"][data-leash="0"] .warnbadge{opacity:1}
.pet[data-area="0"][data-leash="0"] .p-calm{opacity:0}
.pet[data-area="0"][data-leash="0"] .lean{transform:rotate(-7deg)}
.pet[data-area="1"][data-leash="0"] .dogfx{animation:hop .6s ease-in-out infinite alternate}
.pet[data-area="0"][data-leash="0"] .dogfx{animation:lunge .45s ease-in-out infinite alternate}
.pet[data-leash="1"] .dogfx{animation:trot .5s ease-in-out infinite alternate}
.pet .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1s ease-in-out infinite alternate}
@keyframes hop{to{transform:translateY(-10px)}}
@keyframes lunge{to{transform:translateX(9px)}}
@keyframes trot{to{transform:translateY(-3px)}}
@keyframes pulse{to{transform:scale(1.07)}}

/* 關於 */
.about{grid-template-columns:minmax(0,3fr) minmax(0,7fr);align-items:center}
.about-photo{position:relative;aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,#b9d3e0,#7ea6bb);overflow:hidden}
.about-photo img{position:absolute;left:50%;bottom:-4%;width:112%;max-width:none;height:auto;transform:translateX(-50%)}
.cv{margin:14px 0 0;padding-left:1.2em;color:var(--ink-soft)}
.about p{margin:0;max-width:34em}

/* 雨停了：太陽露臉 */
.clearing{position:relative;z-index:3;margin-top:56px;padding:clamp(64px,10vw,110px) max(20px,6vw) 72px;background:linear-gradient(#9fc3d4,#d9eef5 40%,#eef8fb);color:var(--ink);overflow:hidden;isolation:isolate}
.clear-in{position:relative;z-index:1;max-width:760px;margin:0 auto}
.clearing h2{margin-top:0;opacity:.0;transform:translateY(14px);transition:opacity .9s .15s,transform .9s .15s}
.clear-in>p{max-width:32em;opacity:0;transform:translateY(14px);transition:opacity .9s .35s,transform .9s .35s}
.clearing .cta{opacity:0;transform:translateY(14px);transition:opacity .9s .55s,transform .9s .55s}
.clearing.on h2,.clearing.on .clear-in>p,.clearing.on .cta{opacity:1;transform:none}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:34px}
.sun{position:absolute;z-index:0;right:max(4%,calc(50% - 520px));top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,#fffbe0 0,#fff1b0 30%,#ffe9a066 52%,#ffe9a000 72%);opacity:0;transform:scale(.5);transition:opacity 1.6s,transform 2s cubic-bezier(.2,.7,.2,1)}
.clearing.on .sun{opacity:1;transform:none}
/* 頁尾：右下角的聯絡方式 */
.foot{position:relative;z-index:3;padding:10px max(16px,4vw) max(14px,env(safe-area-inset-bottom));background:#eef8fb;color:#5b7384;font-size:12px;line-height:1.5;text-align:right}
.foot p{margin:0}
.foot a{color:inherit;text-underline-offset:2px}
.foot a:hover{color:var(--ink)}

/* 平板 */
@media (max-width:1000px) and (min-width:821px){
  .hero-text{max-width:56vw}
  .station,.about{margin-left:16px;margin-right:16px}
}

/* 平板直式：英雄區不要拉得太高 */
@media (min-width:600px) and (max-width:820px){
  .hero{min-height:min(100svh,780px)}
}

/* 手機 */
@media (max-width:820px){
  .station,.about{grid-template-columns:1fr;margin:18px 12px}
  .st-text{position:static}
  .hero{padding:90px 20px 40px;align-items:start}
  .hero-text{max-width:none}
  .headline{font-size:clamp(34px,9.6vw,64px)}
  .hero-photo{width:62vw;max-height:44svh;right:-4vw;opacity:.92}
  .scroll-cue{position:relative;z-index:2}
  .headline .clear{-webkit-mask-image:radial-gradient(ellipse 340px 190px at var(--mx,40%) var(--my,50%),#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 340px 190px at var(--mx,40%) var(--my,50%),#000 52%,transparent 100%)}
  .bar{padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));gap:8px}
  .brand{font-size:14px;padding:3px 11px}
  .bar-ctl{gap:8px;font-size:12px;padding:3px 10px}
  .rain-ctl{gap:6px}
  .rain-ctl input{width:52px}
  #soundBtn{padding:2px 9px}
  .about-photo{width:56%;margin:0 auto}
  .street{height:320px}
  .tok{width:66px;height:52px;font-size:11px}
  .sun{width:220px;height:220px;top:-70px}
}
@media (max-width:560px){
  .w-labels{left:6px;right:6px;top:6px;gap:3px 4px}
  .walk .w-label{font-size:10.5px;padding:0 7px}
}
@media (max-width:380px){
  .brand{display:none}
  .bar{justify-content:flex-end}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .headline .clear{-webkit-mask-image:none;mask-image:none}
  .headline .fog{display:none}
  .js .station,.js .about,.clearing h2,.clear-in>p,.clearing .cta,.sun{opacity:1;transform:none}
}


/* ===== 手機：互動區的按鈕排成整齊的格子，點擊目標 ≥ 44px；操作提示緊貼互動區 ===== */
@media (max-width:820px){
  .station,.about{gap:10px}
  .st-text p{max-width:none}
  .st-text p:not(.st-do){margin-bottom:12px}
  .st-do{margin:4px 0 0;padding:9px 12px;border-radius:12px;background:#e1edf3;font-size:14.5px;line-height:1.5;color:var(--ink)}
  .chip{min-height:44px;padding:8px 8px;font-size:14.5px;line-height:1.3;text-align:center;display:flex;align-items:center;justify-content:center}
  .mode{display:grid;gap:8px;margin-top:12px}
  #s2 .mode,#s5 .mode{grid-template-columns:repeat(2,minmax(0,1fr))}
  #s3 .mode,#s4 .mode{grid-template-columns:repeat(3,minmax(0,1fr))}
  #s2 .mode .chip{word-break:keep-all}
  #s4 .mode .chip[data-roof]{grid-column:1/-1}
  .btns{gap:8px;margin-top:10px}
  .btns .btn{flex:1 1 0;min-height:46px;text-align:center;padding:10px 14px}
  #s3 .btns .btn{flex-basis:100%}
  .cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cta .btn.big{grid-column:1/-1;text-align:center}
  .result{margin-top:10px}
}