/* VisionBridge 情境示範（產品頁 hero）＋靜態裝置框（真截圖）＋ tools/app-screen-mockup.html 共用。
   螢幕內所有尺寸以 cqw（螢幕寬度百分比）換算自 App 實際 pt：iPad 螢幕 834pt 寬、字級 ×1.35（Theme.padScale）。
   例：卡片標籤 17pt×1.35=23pt → 23/834 ≈ 2.75cqw。改 App 版面請同步這裡。 */

.vbd{--vbd-navy:#1F3A4D;--vbd-mid:#2D5A6E;--vbd-cream:#FAF6F0;--vbd-ember:#E8945A;--vbd-dawn:#F5C77A;--vbd-green:#4A9D7F;--vbd-coral:#D96D5C}

/* ---------- 裝置外框：Blender 渲染的透明 PNG（tools/blender-devices.py → assets/devices/），螢幕區透明 ----------
   外框用 ::after 疊在畫面「上方」（iPhone 動態島才蓋得住鎖定畫面）；螢幕子元素依 devices.json 的百分比絕對定位。
   陰影用 drop-shadow 跟著外框輪廓走（唯一允許有陰影的東西：它們是實體）。 */
.vbd-device{position:relative;margin:0 auto;filter:drop-shadow(0 10px 12px rgba(20,30,40,.30))}
/* 手錶輪廓細長，陰影一大就變成一圈暗框（在亮色地板上尤其明顯）：只留很貼身的一點 */
.vbd-device.vbd-watch{filter:drop-shadow(0 6px 8px rgba(20,30,40,.28))}
.vbd-device::after{content:"";position:absolute;inset:0;background:no-repeat center / 100% 100%;pointer-events:none;z-index:2}
.vbd-device.vbd-ipad{max-width:420px;aspect-ratio:1400/1953}
.vbd-device.vbd-ipad::after{background-image:url(devices/ipad-frame.png?v=20261003b)}
.vbd-device.vbd-iphone{max-width:280px;aspect-ratio:800/1648}
.vbd-device.vbd-iphone::after{background-image:url(devices/iphone-frame.png?v=20261003)}
.vbd-device.vbd-watch{max-width:150px;aspect-ratio:800/1473}
.vbd-device.vbd-watch::after{background-image:url(devices/watch-frame.png?v=20261003d)}
.vbd-device.vbd-watch .band,.vbd-device.vbd-watch .crown,.vbd-device.vbd-watch .side-btn{display:none}
/* 螢幕落點（devices.json，相對外框 PNG 的百分比） */
.vbd-ipad>.vbd-screen,.vbd-ipad>.vbd-shot{position:absolute;left:4.2699%;top:3.0683%;width:91.4602%;height:93.8634%;border-radius:3.0% / 2.095%;aspect-ratio:auto;z-index:1}
.vbd-iphone>.vbd-lock,.vbd-iphone>.vbd-shot{position:absolute;left:4.257%;top:1.7227%;width:91.4861%;height:96.5546%;border-radius:10.78% / 4.958%;aspect-ratio:auto;z-index:1}
.vbd-watch>.vbd-watch-screen{position:absolute;left:12.9615%;top:23.9699%;width:74.077%;height:47.9688%;border-radius:22.0% / 18.452%;aspect-ratio:auto;z-index:1}
/* 真截圖（PNG）放進同一種框 */
.vbd-shot{display:block;height:100%;object-fit:cover;background:var(--vbd-navy,#1F3A4D)}

/* ---------- 使用者端螢幕（直式 iPad） ---------- */
.vbd-screen{position:relative;container-type:size;aspect-ratio:834/1194;background:var(--vbd-navy);border-radius:5.2% / 3.7%;overflow:hidden;color:var(--vbd-cream);
  font-family:'PingFang TC','Noto Sans TC','Microsoft JhengHei',-apple-system,system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;cursor:none;outline:none}
.vbd-screen:focus-visible{box-shadow:0 0 0 3px var(--vbd-dawn)}
.vbd-statusbar{position:absolute;top:0;left:0;right:0;height:3.2cqw;display:flex;justify-content:space-between;align-items:center;padding:0 2.2cqw;font-size:1.55cqw;font-weight:600;color:rgba(250,246,240,.85)}
.vbd-statusbar .vbd-batt{display:inline-block;width:3cqw;height:1.4cqw;border:.16cqw solid rgba(250,246,240,.8);border-radius:.4cqw;position:relative}
.vbd-statusbar .vbd-batt::after{content:"";position:absolute;inset:.2cqw;right:.5cqw;background:rgba(250,246,240,.85);border-radius:.2cqw}
.vbd-view{position:absolute;inset:0;display:flex;flex-direction:column;padding:4.7cqw 1.68cqw 5.8cqw}
.vbd-view[hidden]{display:none}

/* 首頁 / 第二層 8 格：2 欄 × 4 排吃滿 */
.vbd-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,minmax(0,1fr));gap:1.32cqw;min-height:0}
.vbd-cell{position:relative;appearance:none;border:0;margin:0;padding:1.56cqw;border-radius:1.8cqw;background:var(--vbd-mid);color:var(--vbd-cream);font:inherit;text-align:left;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;overflow:hidden;cursor:none;min-height:0;box-shadow:0 0 0 0 rgba(245,199,122,0);transition:box-shadow .15s}
.vbd-cell .bar{position:absolute;left:0;top:0;bottom:0;width:.6cqw;background:var(--c,#F5C77A)}
.vbd-cell .ico{width:4cqw;height:4cqw;fill:var(--c,#F5C77A);flex:0 0 auto}
.vbd-cell .lbl{font-size:3.3cqw;font-weight:600;line-height:1.25;letter-spacing:.01em}
.vbd-cell.response{justify-content:center;align-items:center;background:var(--bg)}
.vbd-cell.response .lbl{font-size:3.6cqw}
.vbd-cell.phrase-card{justify-content:center;align-items:center;text-align:center;padding:1cqw 1.68cqw}
.vbd-cell.phrase-card .lbl{font-size:4.5cqw;line-height:1.3}
/* 凝視回饋：暖光由下往上填滿 → 整卡提亮 → 描邊 ember → 完成轉 dawn 並發光 */
.vbd-cell .fill{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(to top,rgba(232,148,90,.65),rgba(245,199,122,.34) 55%,rgba(245,199,122,.04));pointer-events:none}
.vbd-cell .lift{position:absolute;inset:0;background:rgba(245,199,122,.16);opacity:0;transition:opacity .15s;pointer-events:none}
.vbd-cell .ring{position:absolute;inset:0;border-radius:inherit;border:0 solid var(--vbd-ember);pointer-events:none;transition:border-width .15s,border-color .15s}
.vbd-cell.gazing .lift{opacity:1}
.vbd-cell.gazing .ring{border-width:.24cqw}
.vbd-cell.done .ring{border-width:.36cqw;border-color:var(--vbd-dawn)}
.vbd-cell.done{box-shadow:0 0 2.9cqw rgba(245,199,122,.7)}
.vbd-cell:focus-visible .ring{border-width:.24cqw}

/* 第二層標題與手勢提示 */
.vbd-cat-title{text-align:center;font-size:3.8cqw;font-weight:600;margin:0 0 1.44cqw}
.vbd-cat-hint{text-align:center;font-size:2.4cqw;color:rgba(250,246,240,.55);margin:1.2cqw 0 0}

/* 回聲畫面（ConfirmView）：說出來了 → 句卡 → ✦ → 已傳送 → 3 秒自動回首頁 */
.vbd-confirm{align-items:stretch;padding:5.5cqw 1.9cqw 3.6cqw}
.vbd-confirm .said{text-align:center;font-size:2.6cqw;color:rgba(250,246,240,.55);margin:0 0 1.9cqw}
.vbd-confirm .card{position:relative;background:var(--vbd-mid);border-radius:2.2cqw;padding:3.6cqw 2.4cqw;text-align:center;font-size:5.5cqw;font-weight:600;line-height:1.3;overflow:hidden}
.vbd-confirm .card .bar{position:absolute;left:0;top:0;bottom:0;width:.6cqw;background:var(--c)}
.vbd-confirm .spark{text-align:center;color:var(--vbd-dawn);font-size:3.56cqw;margin:2.2cqw 0 .7cqw}
.vbd-confirm .sent{text-align:center;color:var(--vbd-green);font-size:2.27cqw}
.vbd-confirm .prog{margin:auto 7.2cqw 0;height:.36cqw;border-radius:1cqw;background:rgba(250,246,240,.12);overflow:hidden}
.vbd-confirm .prog i{display:block;height:100%;width:100%;background:rgba(245,199,122,.5);transform-origin:left;transition:transform linear}

/* 視線游標（GazeCursorView）：中心白點＋琥珀光暈＋容差邊界環，半徑＝(14+24)×1.35pt */
.vbd-gaze{position:absolute;width:12.2cqw;height:12.2cqw;left:0;top:0;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s,left .18s ease-out,top .18s ease-out;
  background:radial-gradient(circle,rgba(255,255,255,.55) 0%,rgba(245,199,122,.38) 45%,rgba(245,199,122,0) 100%);box-shadow:inset 0 0 0 .3cqw rgba(245,199,122,.85)}
.vbd-gaze::after{content:"";position:absolute;left:50%;top:50%;width:1.3cqw;height:1.3cqw;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.9)}
.vbd-gaze.on{opacity:1}
.vbd-screen.frozen,.vbd-screen.frozen .vbd-cell{cursor:default}

/* ---------- 照護者端 iPhone 鎖定畫面 ---------- */
.vbd-lock{position:relative;container-type:size;aspect-ratio:402/874;border-radius:13% / 6%;overflow:hidden;
  background:radial-gradient(120% 80% at 20% 10%,#4b6f86 0%,#213d52 45%,#12222e 100%);color:#fff;font-family:-apple-system,'SF Pro Display','PingFang TC','Noto Sans TC','Microsoft JhengHei',system-ui,sans-serif}
.vbd-lock::before{content:"";position:absolute;top:2.6%;left:50%;width:30%;height:3.9%;transform:translateX(-50%);border-radius:999px;background:#0b0c0e}
.vbd-lock-date{position:absolute;top:10.5%;width:100%;text-align:center;font-size:4.3cqw;font-weight:600;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.vbd-lock-time{position:absolute;top:14.5%;width:100%;text-align:center;font-size:21cqw;font-weight:300;line-height:1;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
.vbd-notifs{position:absolute;left:3cqw;right:3cqw;top:36%;display:flex;flex-direction:column;gap:2cqw}
.vbd-notif{display:grid;grid-template-columns:auto 1fr;gap:3cqw;align-items:start;padding:3.2cqw;border-radius:5.5cqw;background:rgba(255,255,255,.78);color:#111;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 24px rgba(0,0,0,.18);transform:translateY(-140%);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.1),opacity .3s}
.vbd-notif.in{transform:none;opacity:1}
.vbd-notif.out{opacity:0;transform:translateY(-20%)}
.vbd-notif .icon{width:9.5cqw;height:9.5cqw;border-radius:2.2cqw;display:block}
.vbd-notif .head{display:flex;align-items:center;gap:1.5cqw;font-size:3.1cqw;color:rgba(0,0,0,.55);text-transform:uppercase;letter-spacing:.02em;line-height:1.2;min-width:0}
.vbd-notif .head .app{font-weight:600;white-space:nowrap}
.vbd-notif .head .when{margin-left:auto;white-space:nowrap;text-transform:none}
.vbd-notif .head .ts{font-size:2.7cqw;padding:.3cqw 1.4cqw;border-radius:999px;background:rgba(0,0,0,.08);text-transform:none;white-space:nowrap}
.vbd-notif .title{font-size:3.85cqw;font-weight:700;line-height:1.3;margin-top:.8cqw;word-break:break-word}
.vbd-notif .body{font-size:3.7cqw;line-height:1.35;margin-top:.3cqw;color:rgba(0,0,0,.85);word-break:break-word}
.vbd-lock .idle{position:absolute;bottom:22%;width:100%;text-align:center;font-size:3.6cqw;color:rgba(255,255,255,.55);transition:opacity .3s;margin:0}
.vbd-lock.has-notif .idle{opacity:0}
.vbd-lock .torch,.vbd-lock .cam{position:absolute;bottom:4.5%;width:11cqw;height:11cqw;border-radius:50%;background:rgba(255,255,255,.14)}
.vbd-lock .torch{left:9%}.vbd-lock .cam{right:9%}
.vbd-lock .home-ind{position:absolute;bottom:1.6%;left:50%;width:36%;height:.9%;transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.75)}
@keyframes vbdHaptic{0%,100%{transform:none}10%{transform:translateX(-2%)}20%{transform:translateX(2%)}30%{transform:translateX(-2%)}40%{transform:translateX(2%)}50%{transform:translateX(-1.6%)}60%{transform:translateX(1.6%)}70%{transform:translateX(-1%)}80%{transform:translateX(1%)}90%{transform:translateX(-.5%)}}
.vbd-device.buzz{animation:vbdHaptic .55s linear}

/* ---------- Apple Watch（iPhone 通知經 iOS 鏡射） ---------- */
.vbd-watch-screen{position:relative;container-type:size;aspect-ratio:208/248;border-radius:22% / 18%;overflow:hidden;background:#000;color:#fff;
  font-family:-apple-system,'SF Compact','PingFang TC','Noto Sans TC','Microsoft JhengHei',system-ui,sans-serif}
.vbd-watch-time{position:absolute;top:8%;right:9%;font-size:8cqw;font-weight:600;color:#9ad0a8;font-variant-numeric:tabular-nums}
.vbd-watch-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30cqw;font-weight:200;letter-spacing:-.02em;transition:opacity .3s}
.vbd-watch-note{position:absolute;inset:0;padding:9% 9% 8%;display:flex;flex-direction:column;gap:2.5cqw;opacity:0;transform:translateY(30%);transition:transform .4s cubic-bezier(.2,.9,.3,1.1),opacity .3s}
.vbd-watch-note.in{opacity:1;transform:none}
.vbd-watch-screen.has-note .vbd-watch-face,.vbd-watch-screen.has-note .vbd-watch-time{opacity:0}
.vbd-watch-note .head{display:flex;align-items:center;gap:3cqw;font-size:6.2cqw;color:rgba(255,255,255,.75)}
.vbd-watch-note .head img{width:12cqw;height:12cqw;border-radius:26%}
.vbd-watch-note .title{font-size:8.2cqw;font-weight:700;line-height:1.25;word-break:break-word}
.vbd-watch-note .body{font-size:7.4cqw;line-height:1.3;color:rgba(255,255,255,.9);word-break:break-word}
.vbd-watch-note .when{margin-top:auto;font-size:5.8cqw;color:rgba(255,255,255,.5)}

/* ---------- 「iPad 唸出來」對話泡泡：漫畫式彈出，喇叭聲波跳動 ---------- */
.vbd-say{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:.45em;padding:.5em .85em;background:#FAF6F0;color:var(--night);border-radius:1.1em;font-weight:700;font-size:clamp(15px,1.35vw,21px);line-height:1.2;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.28);opacity:0;transform:scale(.6);pointer-events:none}
.vbd-say[hidden]{display:none}
.vbd-say::after{content:"";position:absolute;border:.55em solid transparent}
.vbd-say-ico{width:1.5em;height:1.1em;flex:0 0 auto;fill:none;stroke:var(--night);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vbd-say-ico .spk{fill:var(--night);stroke-width:1.5}
.vbd-say-ico .arc{opacity:.25;animation:sayWave 1.1s ease-in-out infinite}
.vbd-say-ico .arc:nth-of-type(3){animation-delay:.18s}
.vbd-say-ico .arc:nth-of-type(4){animation-delay:.36s}
.vbd-say.in{animation:sayPop .5s cubic-bezier(.2,.9,.3,1.25) forwards}
.vbd-say.out{animation:sayOut .3s ease-in forwards}
@keyframes sayPop{0%{opacity:0;transform:scale(.6)}65%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes sayOut{to{opacity:0;transform:scale(.85)}}
@keyframes sayWave{0%,100%{opacity:.2}50%{opacity:1}}
/* 位置：桌機 callout 在放大 iPad 左側、尾巴朝右；手機與 #notify 在 iPad 上方、尾巴朝下 */
.scene[data-vbd-mode="callout"] .scene-screen .vbd-say{right:100%;margin-right:.9em;top:14%;transform-origin:100% 50%}
.scene[data-vbd-mode="callout"] .scene-screen .vbd-say::after{left:100%;top:50%;margin-top:-.55em;border-left-color:#FAF6F0;border-right-width:0}
.notify-grid .vbd-say{left:50%;bottom:100%;margin-bottom:.6em;transform-origin:50% 100%;translate:-50% 0;opacity:1;transform:none;font-size:clamp(16px,1.3vw,20px)}
.notify-grid .vbd-say::after{top:100%;left:50%;margin-left:-.55em;border-top-color:#FAF6F0;border-bottom-width:0}
@media(max-width:1000px){
  /* 手機：泡泡疊在 iPad 螢幕上緣內側（上方是說明文字，不能壓到） */
  .scene[data-vbd-mode="callout"] .scene-screen .vbd-say{right:auto;left:50%;top:9%;bottom:auto;margin:0;translate:-50% 0;transform-origin:50% 0;font-size:18px}
  .scene[data-vbd-mode="callout"] .scene-screen .vbd-say::after{left:50%;top:100%;margin:0 0 0 -.55em;border-left-color:transparent;border-right-width:.55em;border-top-color:#FAF6F0;border-bottom-width:0}
  .notify-grid .vbd-say{font-size:17px}
}

/* ---------- 送出之後你那邊會看到什麼（#notify）：三台大尺寸靜態裝置，1:1 左右讓通知文字讀得到 ---------- */
.notify-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch}
.notify-grid figure{display:flex;flex-direction:column}
@media(min-width:1001px){.notify-grid .stage{height:520px;display:flex;align-items:center;justify-content:center}.notify-grid .stage .vbd-device{margin:0}.notify-grid .vbd-device.vbd-ipad{width:min(100%,380px)}.notify-grid .vbd-device.vbd-iphone{width:min(100%,232px)}.notify-grid .vbd-device.vbd-watch{width:min(100%,230px)}.notify-grid .stage{height:578px;padding-top:40px;align-items:flex-start}}
.notify-grid figure{margin:0}
.notify-grid .vbd-device.vbd-ipad{max-width:420px}
.notify-grid .vbd-device.vbd-iphone{max-width:400px}
.notify-grid .vbd-device.vbd-watch{max-width:320px}
.notify-grid figcaption{margin-top:18px;font-size:16px;line-height:1.7;color:#C9D6DA}
.notify-grid figcaption strong{display:block;font-family:var(--serif);font-size:21px;color:#FAF6F0;margin-bottom:6px}
.notify-note{margin-top:28px;color:#9FB1B9}

/* ---------- Hero：床邊情境（第一人稱） ----------
   桌機：照片原比例鋪滿，.scene-screen 以 JS 算出的 matrix3d 貼進綠幕四角（座標在 data-vbd-quad，換照片只改數字）；
   文字卡、你的 iPhone／手錶、狀態列用百分比疊在照片上。手機：拆成直向三段（定場照 → 正面螢幕 → 你的手機），同一份 DOM 只換排版。 */
.hero-scene{background:var(--night);color:#E9EFF1;padding:0 0 clamp(20px,3vw,36px)}
.hero-scene .scene{position:relative;margin:0 auto;width:min(100%,calc((100vh - 120px) * var(--scene-ar,1.5)));max-width:1440px;container-type:inline-size}
.scene-photo-wrap{position:relative;overflow:hidden}
.scene-photo{display:block;width:100%;height:auto}
/* callout 模式（照片裡的 iPad 太小不能直接操作）：互動螢幕放大成一面獨立裝置，細線連回照片裡的小 iPad */
.scene[data-vbd-mode="callout"] .scene-screen{position:absolute;transform:none;z-index:3;max-width:none;margin:0}
/* inset 模式（螢幕直接貼進照片）不要外框 */
.scene[data-vbd-mode="inset"] .scene-screen{filter:none}
.scene[data-vbd-mode="inset"] .scene-screen::after{display:none}
.scene[data-vbd-mode="inset"] .scene-screen>.vbd-screen{left:0;top:0;width:100%;height:100%;border-radius:1.6% / 1.1%}
.scene-callout-label{display:none}
.scene[data-vbd-mode="callout"] .scene-callout-label{display:block;position:absolute;left:-12%;right:-12%;bottom:100%;margin:0 0 8px;font-size:13px;line-height:1.4;color:#FAF6F0;text-shadow:0 1px 8px rgba(0,0,0,.7);text-align:center}
.scene[data-vbd-mode="callout"] .scene-screen-static{display:block}
.bridge .callout-line{fill:none;stroke:rgba(250,246,240,.95);stroke-width:2;stroke-dasharray:4 5;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.scene-screen{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;z-index:2}
.scene-screen-static{display:none;position:absolute;left:0;top:0;transform-origin:0 0;z-index:2;pointer-events:none}
.scene-screen-static .vbd-screen{width:100%;height:100%;aspect-ratio:auto;border-radius:1.6% / 1.1%}
.scene-copy{position:absolute;left:2.5%;bottom:3.5%;width:37%;z-index:3;background:rgba(250,246,240,.94);color:var(--ink);padding:1.7cqw 1.9cqw 1.8cqw;border-radius:1.2cqw;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scene-copy h1{color:var(--ink);font-size:2.85cqw;line-height:1.25;margin-bottom:.6cqw}
.scene-copy .lede{color:var(--ink-2);font-size:max(15px,1.3cqw);line-height:1.6;margin-bottom:1.1cqw}
.scene-copy .actions{gap:.7cqw}
.scene-copy .button{min-height:0;padding:.65cqw 1.3cqw;font-size:max(14px,1.2cqw);border-width:.15cqw}
.scene-label-screen{display:none}
/* 右下「你這邊」區：狀態列在上、iPhone＋手錶並排在下、各自下方一行小標。視線：放大 iPad → 光 → 狀態列／iPhone → 右 → 手錶 */
.scene-status{text-align:center;grid-column:1 / -1;margin:0 0 6px}
.hero-scene .vbd-log{font-size:14px;line-height:1.5;color:#FAF6F0;margin:0;min-height:1.6em;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.75);background:rgba(20,30,40,.45);padding:6px 10px;border-radius:10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-scene .vbd-log strong{color:var(--dawn);font-weight:600}
.vbd-back-row{display:flex;justify-content:center;min-height:0;margin-top:8px}
.vbd-back-row[hidden]{display:none}
/* 真實比例：iPhone 16 Pro 71.5 mm ≈ iPad Pro 11 吋 177.5 mm 的 40%；錶殼 38 mm ≈ iPhone 的 53%（正面 PNG 內錶殼佔 74% 寬 → 欄寬 .72） */
.scene-devices{position:absolute;right:3%;bottom:3.5%;width:22%;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:0 1.2%;align-items:end}
.cut-close{display:none}
.try-start,.try-end,.scene-pad{display:none}
.notify-swipe{display:none}
.scene-devices .dev-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.scene-devices .dev-cap{font-size:12px;color:#FAF6F0;text-shadow:0 1px 8px rgba(0,0,0,.75);margin:0;white-space:nowrap}
.scene-devices .vbd-device{width:100%;max-width:100%;margin:0}
.scene-devices .vbd-device.vbd-watch{margin:0 auto;align-self:center}
/* 橋：光從照片裡的 iPad 走到你的 iPhone（路徑由 JS 依兩者位置算） */
.hero-scene .bridge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
/* 資訊流動：虛線路徑平時微亮；送出時路徑亮起、虛線流動，一顆帶光暈的光頭拖著彗星尾走到 iPhone */
.bridge path{fill:none;stroke:url(#bridgeGrad);stroke-width:2.5;stroke-dasharray:6 8;opacity:.55;transition:opacity .4s}
.bridge .glowpath{stroke:var(--dawn);stroke-width:10;stroke-dasharray:none;opacity:0;filter:url(#bridgeGlow)}
.bridge.travel path:not(.glowpath):not(.callout-line){opacity:1;stroke-width:3;animation:bridgeDash 2.2s linear}
.bridge.travel .glowpath{animation:bridgeGlowPulse 2.2s ease-out}
.bridge .light{fill:var(--dawn);offset-distance:0%;opacity:0}
.bridge .light.head{fill:#FFF3D6;filter:drop-shadow(0 0 6px rgba(245,199,122,1)) drop-shadow(0 0 16px rgba(232,148,90,.95))}
.bridge .light.halo{fill:rgba(245,199,122,.5);filter:url(#bridgeGlow)}
.bridge .light.t1{opacity:0}.bridge .light.t2{opacity:0}.bridge .light.t3{opacity:0}.bridge .light.t4{opacity:0}
.bridge.travel .light{animation:bridgeTravel 2.2s cubic-bezier(.4,0,.3,1) forwards}
/* 第二段：iPhone 震動、跳通知之後，一小段光再跳到 Apple Watch */
.bridge .hop{fill:none;stroke:url(#bridgeGrad);stroke-width:2.5;stroke-dasharray:5 7;opacity:0}
.bridge .light.hop-light{fill:#FFF3D6;filter:drop-shadow(0 0 6px rgba(245,199,122,1)) drop-shadow(0 0 14px rgba(232,148,90,.9));offset-distance:0%;opacity:0}
.bridge.hop-go .hop{animation:hopPath .9s ease-out forwards}
.bridge.hop-go .light.hop-light{animation:hopTravel .9s cubic-bezier(.4,0,.3,1) forwards}
@keyframes hopPath{0%{opacity:0}20%{opacity:.9}100%{opacity:0}}
@keyframes hopTravel{0%{offset-distance:0%;opacity:0}15%{opacity:1}85%{opacity:1}100%{offset-distance:100%;opacity:0}}
.bridge.travel .light.t1{animation-delay:.07s;animation-name:bridgeTrail}
.bridge.travel .light.t2{animation-delay:.14s;animation-name:bridgeTrail}
.bridge.travel .light.t3{animation-delay:.21s;animation-name:bridgeTrail}
.bridge.travel .light.t4{animation-delay:.28s;animation-name:bridgeTrail}
@keyframes bridgeTravel{0%{offset-distance:0%;opacity:0}8%{opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes bridgeTrail{0%{offset-distance:0%;opacity:0}10%{opacity:.9}88%{opacity:.75}100%{offset-distance:100%;opacity:0}}
@keyframes bridgeDash{from{stroke-dashoffset:0}to{stroke-dashoffset:-140}}
@keyframes bridgeGlowPulse{0%{opacity:0}15%{opacity:.55}80%{opacity:.35}100%{opacity:0}}

/* 調整列（速度／稱呼／照護者語言）：hero 下方獨立的紙色帶，收在 details 裡，不搶戲 */
.tune-band{background:var(--paper);color:var(--ink)}
.vbd-tune{border-top:1px solid var(--line);padding:6px 0}
.vbd-tune summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:10px;font-weight:600;color:var(--night);list-style:none}
.vbd-tune summary::-webkit-details-marker{display:none}
.vbd-tune summary::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--dawn)}
.vbd-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;padding:8px 0 18px}
.vbd-controls label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.vbd-controls input[type=range]{width:100%;height:44px;cursor:pointer;accent-color:var(--ember)}
.vbd-controls select{width:100%;min-height:44px;padding:8px 12px;border:1px solid #73808a;border-radius:8px;background:#fff}
.vbd-controls .scale{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2);margin:0}
.vbd-hint{font-size:14px;color:var(--ink-2);margin:6px 0 0}
.vbd-mobile-only{display:none}

/* 靜態裝置組（看護語言段落用；由 JS freeze 填內容）：手機＋照片並排 */
.vbd-static .vbd-device{margin:0}
.static-pair{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:stretch}
.static-pair .vbd-device.vbd-iphone{width:100%;max-width:100%;margin:0;align-self:end}
.static-pair-photo{align-self:stretch}
.static-pair-photo .photo{height:100%;max-width:none;object-fit:cover}
.vbd-ipad-sm{max-width:320px}

@media(max-width:1000px){
  .hero-scene .scene{width:100%;max-width:none;display:flex;flex-direction:column}
  /* 觀看模式：可捲頁；試用模式（.trying）：鎖住觸控給示範用 */
  .vbd-screen,.vbd-cell{touch-action:pan-y pinch-zoom;cursor:default}
  /* 靜態（frozen）螢幕不互動：觸控全部交給頁面，橫向滑動卡才滑得動 */
  .vbd-screen.frozen,.vbd-screen.frozen .vbd-cell,.vbd-static .vbd-device{touch-action:auto;pointer-events:none}
  .hero-scene.trying .vbd-screen,.hero-scene.trying .vbd-cell{touch-action:none}
  .try-start{display:block;position:absolute;left:50%;bottom:6%;transform:translateX(-50%);z-index:4;min-height:48px;padding:12px 20px;border:0;border-radius:999px;background:var(--ember);color:var(--ink);font:700 16px/1.2 var(--sans);box-shadow:0 10px 24px rgba(0,0,0,.35);cursor:pointer;white-space:nowrap}
  .hero-scene.trying .try-start,.try-start[hidden]{display:none}
  .try-end{display:block;position:absolute;right:4%;top:2.5%;z-index:4;min-height:36px;padding:6px 14px;border:1px solid rgba(250,246,240,.5);border-radius:999px;background:rgba(20,30,40,.55);color:#FAF6F0;font:600 13px/1.2 var(--sans);cursor:pointer}
  .try-end[hidden]{display:none}
  .hero-scene:not(.trying) .vbd-screen{filter:saturate(.92) brightness(.96)}
  .scene-pad{display:block;order:4;height:44px}
  .scene-devices .scene-status{order:0}
  .tune-band{padding-top:28px}
  .scene-screen-static{display:block}
  .scene-copy{order:0;position:static;width:auto;border-radius:0;background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;padding:clamp(32px,7vw,56px) var(--gutter) 26px}
  .scene-copy h1{font-size:clamp(30px,8vw,40px);margin-bottom:16px}
  .scene-copy .lede{font-size:17px;margin-bottom:14px}
  .scene-copy .actions{gap:10px}
  .scene-copy .button{min-height:44px;padding:8px 16px;font-size:15px;border-width:2px}
  .scene-copy-desk{display:none}
  .scene-photo-wrap{order:1;aspect-ratio:var(--crop-ar,4 / 5)}
  .scene-photo{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto}
  .scene[data-vbd-mode="callout"] .scene-screen{position:relative}
  .scene[data-vbd-mode="callout"] .scene-callout-label{display:none}
  .scene-label-screen{display:block;order:2;margin:0;padding:22px var(--gutter) 12px;font-size:15px;color:#C9D6DA}
  .scene-screen{order:3;position:relative;left:auto;top:auto;transform:none;width:min(100% - 2 * var(--gutter),360px);height:auto;margin:0 auto}
  .scene-status{order:0;position:static;transform:none;width:auto;padding:0 0 14px;grid-column:1 / -1}
  .hero-scene .vbd-log{font-size:15px;color:#C9D6DA;text-shadow:none}
  /* 手機 cut-in：送出後，iPhone＋手錶直接疊進 iPad 螢幕下半部（位置由 JS 以 --cut-* 對齊螢幕內側），不用往下捲 */
  /* 手機 cut-in：送出後，iPhone＋手錶蓋住整個 iPad 螢幕（位置由 JS 以 --cut-* 對齊螢幕），同一個區段完成展示 */
  /* 手機 cut-in：送出後，一塊「你這邊」的面板蓋住整台 iPad（含外框），同一個區段完成展示 */
  .scene-devices{order:5;position:absolute;left:var(--cut-left,0);top:var(--cut-top,0);width:var(--cut-w,100%);height:var(--cut-h,100%);z-index:5;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:0 12px;align-content:center;align-items:end;padding:16px 14px 18px;
    background:var(--night);border-radius:18px;
    transform:translateY(4%);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .35s}
  .hero-scene.cut-in .scene-devices{transform:none;opacity:1;pointer-events:auto}
  .scene-devices .scene-status{order:0;padding:0 28px 14px 0}
  .hero-scene .vbd-log{color:#FAF6F0;text-shadow:0 1px 6px rgba(0,0,0,.6);font-size:14px;line-height:1.45;text-align:center}
  .scene-devices .dev-cap{color:#FAF6F0;text-shadow:0 1px 6px rgba(0,0,0,.6);font-size:13px}
  .scene-devices .dev-col{gap:4px}
  .scene-devices .vbd-device.vbd-iphone{max-width:150px}
  .scene-devices .vbd-device.vbd-watch{max-width:108px}
  .scene-devices{overflow:hidden}
  .cut-close{display:grid;place-items:center;position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(250,246,240,.18);color:#FAF6F0;font-size:20px;line-height:1;cursor:pointer}
  .vbd-back-row{display:none}
  .notify-swipe{display:inline}
  /* 手機：三步改成橫向滑動卡（scroll-snap），和上方 cut-in 不重複的「詳細說明」 */
  .notify-grid{display:flex;align-items:flex-start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 12px;margin:0 calc(-1 * var(--gutter));scrollbar-width:none}
  .notify-grid::-webkit-scrollbar{display:none}
  /* 三張卡等高：裝置放在固定高度的舞台裡垂直置中，圖說從同一條線開始 */
  .notify-grid{align-items:stretch}
  .notify-grid figure{flex:0 0 82%;scroll-snap-align:center;background:var(--night-2);border-radius:16px;padding:18px 16px 16px;display:flex;flex-direction:column}
  .notify-grid .stage{height:400px;display:flex;align-items:center;justify-content:center}
  .notify-grid .stage .vbd-device{margin:0;max-height:100%}
  /* 真實比例：iPhone ≈ iPad 寬 40%、錶殼 ≈ iPhone 寬 53%（錶 PNG 內錶殼佔 74%） */
  /* 以可讀為主：iPhone 高＝iPad 90%；手錶圖含錶帶，取 80%（錶殼螢幕字仍 ≥ iPhone 通知字）；三台頂緣對齊 */
  .notify-grid .vbd-device.vbd-ipad{width:min(100%,320px)}
  .notify-grid .vbd-device.vbd-iphone{width:min(100%,195px)}
  .notify-grid .vbd-device.vbd-watch{width:min(100%,194px)}
  .notify-grid .stage{height:454px;align-items:flex-start}
  .notify-grid figcaption{margin-top:18px;padding-top:0;min-height:0}
  .notify-grid figcaption{font-size:15px}
  .notify-grid figcaption strong{font-size:19px}
  .notify-grid .vbd-say{bottom:auto;top:30%;margin:0;font-size:16px}
  .notify-grid .vbd-say::after{display:none}
  .hero-scene .bridge{display:none}
  .vbd-mobile-only{display:inline}
}
@media(prefers-reduced-motion:reduce){
  .vbd-notif,.vbd-watch-note,.vbd-gaze,.vbd-cell .fill,.vbd-toast-host .vbd-toast{transition:none!important}
  .vbd-device.buzz,.bridge.travel .light,.bridge.travel path,.bridge.travel .glowpath{animation:none}
  .bridge .light.head{opacity:1;offset-distance:100%}
}