/* 靜光 Restlight｜聽著聽著，就掉進夢裡
 * 單頁版。場景全部同時存在於 .stage 內，一次只有一個 .is-active。
 * 各場景的樣式由 raw_source/ 的多頁原型機械合併而來，選擇器掛在 .scene--<id> 底下，
 * 原本的 .stage.STATE 改寫為 .scene--<id>.is-STATE，@keyframes 加場景後綴避免撞名。
 */

:root{
  --ink:#3A3540;
  --ink-soft:rgba(58,53,64,.72);
  --cream:#F8F0E5;
  --cream-warm:#FBF5EC;
  --paper:#FCF7EC;
  --peach:#E8A67F;
  --butter:#F0CE86;
  --surround:#14121A;
  /* 舞台之外的留白（桌機、平板直式、手機橫置才看得到）。
   * 取自 --cream / --paper 的同一支暖色，往下壓灰，避免 #FFF 的死白。 */
  --page-lift:#FCF8F1;
  --page:#F3ECE2;
  --page-edge:#E7DED2;
  --gutter:32px;              /* 桌機留白，也用來換算舞台的寬度上限 */
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 關掉瀏覽器的自動放大字級（沿用 quiz1 的做法）。這只擋得住「自動」那一種；
 * 使用者在 iOS Safari 的「Aa」或 Android Chrome 的字體大小裡調過的縮放擋不住，
 * 那部分由 app.js 的 applyTextScaleCompensation() 量出來再除回去。 */
html{-webkit-text-size-adjust:none;text-size-adjust:none}
html,body{height:100%;overscroll-behavior:none}
/* iOS／Android 的網址列會在捲動時收起，可視區域因此比 100% 高，舞台填不滿底部就會
 * 露出 --surround 的深色 —— 解鎖後內容變長、開始可以捲動時最明顯（底部一條黑影）。
 * dvh 會跟著可視區域變動，把那條縫消掉。上面那行 100% 留給不支援 dvh 的舊瀏覽器。
 * 代價是網址列開合的過程中舞台會跟著改變高度，百分比版面會微調一下；比黑影好。 */
@supports (height:100dvh){
  html,body{height:100dvh}
}
body{background:var(--surround);font-family:"Noto Serif TC",serif;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  user-select:none;-webkit-user-select:none}
img{-webkit-user-drag:none;user-drag:none}

/* ---------- 舞台：手機佔滿，桌機置中 ---------- */
/* container-type:size 有兩個用途：Q4／Q5／Q6／暱稱／結果的 cqw 有對象可依，
 * 以及讓結果頁的背景能用 aspect-ratio 容器查詢（見檔尾）。不能用 inline-size，
 * 那樣查不到高度。舞台的寬高都是外部指定的，套 size containment 不影響版面。 */
.stage{position:relative;width:100%;height:100%;
  overflow:hidden;background:var(--surround);isolation:isolate;
  container-type:size}
/* 手機直式佔滿寬度：iPhone SE（375×667，比例 0.562）比設計的 0.4615 寬，
 * 原本會左右各留 34px 黑邊，現在畫面填滿。 */
/* 手機橫置例外，維持設計比例：那時高度只剩 3xx px，讓它佔滿寬度九個場景會全部爛掉。
 * 判斷條件用「寬度」而不是 orientation：直式手機叫出鍵盤時，in-app 瀏覽器（LINE、IG）
 * 會直接縮小 webview，可視區域變成 390×323，CSS 的 orientation 就讀成 landscape，
 * 這條規則跟著誤觸 —— 舞台被夾成 323 × 9/19.5 = 149px，結果頁的 email 欄位兩邊
 * 各露出 120px 黑底（iPhone 13 / LINE 實測）。鍵盤只改高度不改寬度，所以改看寬度：
 * 直式手機永遠 < 600（iPhone SE 375、iPhone 13 390、Pro Max 430），現役機種橫置
 * 都 > 600（SE 二代 667、13 是 844）。加上 min-width 之後 orientation 就是必然成立的，
 * 可以省掉。兩個已知代價，都比原本的 bug 輕：
 * 一、iPhone 5／SE 一代橫置只有 568 寬，不到門檻，不再 letterbox。那台橫置本來就
 *     只有 320px 高、怎麼排都不能看，而且已經停在 iOS 15。
 * 二、寬 < 600 又高 <= 600 的桌機視窗不再 letterbox，會跟鍵盤情境一樣壓扁。
 * 門檻寫 600 是為了跟下面那條桌機規則共用同一個數字，只有一個值要推理。想連 (一)
 * 一起救只要降到 568 就夠，代價是 568～599 寬又矮的視窗也會 letterbox —— 為一台停在
 * iOS 15 的機器多一個 magic number，不划算。
 *
 * max-height 寫 600 而不是 599：桌機那條是 min-height:600px，兩條用 599／600 的話
 * 599.x（頁面縮放、非整數 dpr）會兩條都不成立，落進沒人管的縫。改成 600 讓兩條在
 * 剛好 600 時重疊，後面的桌機規則覆蓋掉這一條，整數尺寸的行為完全不變。 */
@media (min-width:600px) and (max-height:600px){
  .stage{max-width:calc(100vh * 9 / 19.5)}
}
/* 高度要跟舞台實際的高度用同一套 viewport 定義。舞台是 100% of body，而 body 在支援
 * 的瀏覽器上是 100dvh；vh 卻是 large viewport（工具列收起的高度）。橫置時工具列展開，
 * dvh < vh，寬度上限就會比 9:19.5 該有的寬 —— iPhone 13 橫置實測 vh 390 / dvh 約 340，
 * 舞台會是 180×340（比例 0.53）而不是 157×340（0.46）。上面那條留給不支援 dvh 的舊瀏覽器。 */
@supports (height:100dvh){
  @media (min-width:600px) and (max-height:600px){
    .stage{max-width:calc(100dvh * 9 / 19.5)}
  }
}
/* 桌機／平板：置中、淺底留白、圓角。
 * 寬與高都要夠才套用。手機橫置（高 < 600）維持深色 —— 那時舞台只剩一條細長的
 * 直式，配上大片淺色留白很難看；iPhone SE 這類比例偏寬的手機同理，維持深色 letterbox。 */
@media (min-width:600px) and (min-height:600px){
  body{padding:var(--gutter);
    background:radial-gradient(128% 96% at 50% -6%,
      var(--page-lift) 0%, var(--page) 48%, var(--page-edge) 100%) var(--page)}
  /* 寬度上限要用「舞台實際的高度」換算，不能用 100vh：這裡的高度另外被 900px 夾住，
   * 視窗一高（100vh > 900 + 留白）兩者就脫鉤，舞台會愈來愈寬，9:19.5 的版面全歪。 */
  /* 淺底不能用重黑陰影，會糊成一團灰。改成 --ink 同色系的多層淺影 + 髮絲邊 */
  .stage{border-radius:24px;height:min(100%,900px);
    max-width:min(100vw, calc(min(100vh - var(--gutter) * 2, 900px) * 9 / 19.5));
    box-shadow:0 0 0 1px rgba(58,53,64,.07),
               0 2px 5px rgba(58,53,64,.05),
               0 16px 34px -12px rgba(58,53,64,.16),
               0 44px 80px -30px rgba(58,53,64,.24)}
}

/* ---------- 場景切換 ---------- */
/* overflow:hidden 有兩個作用。一是各場景自己裁掉溢出的裝飾（例如 q6 的 .glow 往下多 80px），
 * 不讓它累積到舞台的 scrollable overflow —— 舞台一旦可捲動，scrollIntoView 或手機輸入框
 * 聚焦就會把整個舞台捲走，裡面 inset:0 的場景整體偏移，底部露出 --surround 的深色。
 * 而 overflow:hidden 的元素「不會發出 scroll 事件」，所以事件式的鎖擋不住，只能從源頭
 * 讓舞台沒有可捲動的高度。二是場景邊界與舞台邊界重合，所以裁切位置和原本一樣，外觀不變。 */
.scene{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none}
.scene.is-active{visibility:visible;opacity:1;pointer-events:auto}
/* 沒顯示的場景把動畫凍在第 0 格，切進來才從頭播，進場的時間差才會正確。
 * ::before／::after 要分開寫 —— 通用選擇器 * 選不到偽元素，漏掉的話它們會從
 * 載入就一直跑。目前有三個會踩到：入口／暱稱主按鈕的呼吸光環，以及 q1 的 .vknob::after
 * 與 q5 的 .knob::after 兩個「拖我」提示。 */
.scene:not(.is-active),
.scene:not(.is-active) *,
.scene:not(.is-active) *::before,
.scene:not(.is-active) *::after{animation-play-state:paused !important}
.scene--intro{background:#B9C4CC}
.scene--q1{background:#B7BEC6}
.scene--q2{background:#C6B4A6}
.scene--q3{background:#D3B6A4}
.scene--q4{background:#D9A98F}
.scene--q5{background:#D9A98F}
.scene--q6{background:#2A2029}
.scene--nick{background:#F4E7D8}
.scene--result{background:#DFCFC0}
.scene--q1,
.scene--q3,
.scene--q5{touch-action:none}

/* ---------- 暗幕：只用在 intro → q1 與 nick → result ---------- */
/* 這兩段是全流程刻意保留的高潮（開場落幕、進入夢境前的泛白），不套用闔眼轉場 */
.curtain{position:absolute;inset:0;z-index:99;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 46%,#2C2129,#120F19);
  opacity:1;transition:opacity .9s var(--ease)}
.stage.is-up .curtain{opacity:0}
.stage.is-covering .curtain{opacity:1;transition:opacity .62s var(--ease)}

/* ---------- 闔眼：六題共用的轉場 ---------- */
/* 上下兩片眼皮闔上、停一下、再張開。全程只動 transform，中低階手機也不會掉格。
 * 41%～57% 是完全閉合的區間，換場景的時機（app.js 的 BLINK.meet）要落在裡面。
 * 兩片各 52% 高，閉合時在 48%～52% 重疊，避免中線出現一條縫。 */
.lid{position:absolute;left:0;right:0;height:52%;
  background:linear-gradient(#241B22,#2C2129)}
/* 眼皮靜止時在畫面外，那會把舞台的 scrollHeight 撐大 52%（667px 高時多 347px）——
 * 用 transform 也一樣，transform 同樣計入 scrollable overflow。舞台一變成可捲動，
 * scrollIntoView 這類程式性捲動就會把整個舞台捲走（overflow:hidden 擋不住），
 * 裡面 inset:0 的場景整體偏移，底部露出 --surround 的深色。
 * 解法是把兩片包在 .lids 裡，用 overflow:hidden 把溢出「切斷」，不傳到舞台。 */
.lids{position:absolute;inset:0;z-index:98;overflow:hidden;pointer-events:none}
.lid--top{top:0;transform:translateY(-100%);box-shadow:0 12px 26px rgba(20,15,20,.5)}
.lid--bottom{bottom:0;transform:translateY(100%);box-shadow:0 -12px 26px rgba(20,15,20,.5)}
.stage.is-blink .lid--top{animation:lid-top .82s}
.stage.is-blink .lid--bottom{animation:lid-bottom .82s}
/* 闔上用 ease-in（眼皮是沉下去的），張開用 --ease 收尾 */
@keyframes lid-top{
  0%{transform:translateY(-100%);animation-timing-function:cubic-bezier(.4,0,.7,.34)}
  41%,57%{transform:translateY(0);animation-timing-function:var(--ease)}
  100%{transform:translateY(-100%)}
}
@keyframes lid-bottom{
  0%{transform:translateY(100%);animation-timing-function:cubic-bezier(.4,0,.7,.34)}
  41%,57%{transform:translateY(0);animation-timing-function:var(--ease)}
  100%{transform:translateY(100%)}
}
/* 眼皮做主，畫面本身只輕輕沉一下再回正。六題共用同一條，取代原型逐頁各寫的離場 */
.scene--q1.is-leaving,.scene--q2.is-leaving,.scene--q3.is-leaving,
.scene--q4.is-leaving,.scene--q5.is-leaving,.scene--q6.is-leaving{
  animation:blink-out .38s var(--ease) forwards}
.scene--q1.is-entering,.scene--q2.is-entering,.scene--q3.is-entering,
.scene--q4.is-entering,.scene--q5.is-entering,.scene--q6.is-entering{
  animation:blink-in .52s var(--ease)}
@keyframes blink-out{to{transform:scale(1.025);filter:brightness(.88) saturate(.94)}}
@keyframes blink-in{from{transform:scale(1.02)}to{transform:scale(1)}}

/* 刻意不處理 prefers-reduced-motion：
 * 產品決定即使使用者開啟「減少動態效果」，也要呈現完整的進場與轉場動畫。
 * 原型每頁都有的 @media (prefers-reduced-motion) 區塊已整段移除。 */

/* ---------- 紙感按鈕：三階 ---------- */
/* 一顆按鈕是兩層：<button class="btn"> 只管文字與尺寸，裡面第一個子元素
 * <span class="bs"> 是「墊在後面的那張紙」—— 底色、邊框、撕開的邊緣、投影都在它身上。
 *
 * 為什麼要兩層：撕紙邊是 SVG filter（feTurbulence + feDisplacementMap），
 * 直接套在按鈕上會連文字一起扭曲。.bs 用 z-index:-1 沉到文字後面，
 * 所以 .btn 一定要 isolation:isolate，否則 -1 會穿到場景背景的後面去。
 *
 *   primary    .btn         butter 紙   最重的動作：開始測驗、確定、進入夢裡、解鎖、存成圖片
 *   secondary  .btn.plain   米白紙      對等的次要動作：傳給朋友、q6 的另一個選項
 *   tertiary   .btn.sub     更淡的紙    可以不按的出口：先不要、再做一次
 *
 * 三階各用不同 seed 的紙邊 filter（#torn3／#torn／#torn2），堆在一起時邊緣不會重複。
 * 紙邊定義在 .stage 底下的 <svg class="defs">，不在任何場景裡 —— 全域的按鈕系統
 * 不該依賴某一個場景的 DOM 還在。
 *
 * 尺寸（padding／font-size／字距）刻意不寫在這裡，各處自己定：入口頁是大按鈕、
 * q6 是並排等寬、結果頁是滿寬堆疊。 */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.btn{position:relative;isolation:isolate;font-family:inherit;cursor:pointer;
  background:none;border:none;font-weight:600;color:var(--btn-ink);
  transition:transform .18s var(--ease);
  --btn-ink:#5A3A20;--btn-paper:#F6D6A2;--btn-edge:rgba(96,64,44,.5);
  --btn-torn:url(#torn3) drop-shadow(0 6px 10px rgba(96,68,52,.32))}
.btn.plain{--btn-ink:var(--ink);--btn-paper:#FDF8EF;--btn-edge:rgba(58,53,64,.4);
  --btn-torn:url(#torn) drop-shadow(0 6px 10px rgba(96,68,52,.3))}
.btn.sub{--btn-ink:rgba(58,53,64,.76);--btn-paper:#FBF4E8;--btn-edge:rgba(58,53,64,.32);
  --btn-torn:url(#torn2) drop-shadow(0 5px 9px rgba(96,68,52,.26))}
.btn .bs{position:absolute;inset:0;z-index:-1;border-radius:15px;
  border:2px solid var(--btn-edge);background:var(--btn-paper);filter:var(--btn-torn)}
/* 按下去整顆往下沉 2px。按壓時三階都用 torn3 —— 邊緣跟著換一下，像紙被壓過。
 *
 * 這裡的 !important 是必要的，不是偷懶。這條要贏過三種東西：
 *   1. q1／q3／q5 的 .scene--qN.is-ready .ok/.confirm{transform:none}（權重 0-3-0，比這條高）
 *   2. nick 的 rise--nick 是 forwards 動畫，會一直用最後一格的 transform 蓋住一般宣告
 *   3. intro 的 .cta:hover{transform:translateY(-2px)}（權重 0-3-0）
 * 第 2 點只有 !important 蓋得過 —— 動畫的優先權高於所有一般宣告。
 * 沒有它的話這五顆按鈕按下去都不會動（只有結果頁那六顆有反應）。
 * 影響範圍限於「按住的那一瞬間」，所以可以接受。 */
.btn:active{transform:translateY(2px) !important}
.btn:active .bs{filter:url(#torn3) drop-shadow(0 3px 5px rgba(96,68,52,.3))}
/* 左右兩顆小孔，只有 primary 有 */
.btn .dot{position:absolute;top:50%;translate:0 -50%;width:5px;height:5px;border-radius:50%;
  background:rgba(96,64,44,.4)}
.btn .dot.l{left:14px}
.btn .dot.r{right:14px}

/* 入口頁與暱稱頁的主按鈕會慢慢呼吸，提示「就是按這裡」。原型用 box-shadow 的擴散環，
 * 那是圓角膠囊的語言 —— 紙感按鈕的邊是撕開的，矩形光環會把原本的方框畫出來。
 * 改成紙背後透出來的一圈暖光：::after 沉在 .bs（-1）後面，只動 opacity 與 transform，
 * 不去動 .bs 的 filter —— 紙邊是 feTurbulence，每格重算會掉格。
 * 只有這兩個「大按鈕時刻」有呼吸，六題的確定鈕與結果頁的按鈕都沒有。 */
.scene--intro .btn::after,
.scene--nick .btn::after{content:"";position:absolute;inset:-12px;z-index:-2;
  border-radius:26px;pointer-events:none;
  background:radial-gradient(62% 62% at 50% 50%,rgba(240,206,134,.6),transparent 72%);
  animation:btn-breathe 3.6s ease-in-out 2.2s infinite}
@keyframes btn-breathe{0%,100%{opacity:0;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.06)}}

/* 尺寸屬於各處自己。前六個場景的 padding／字級留在原型的規則裡（.cta／.ok／.confirm／
 * .pick／.go 那幾條，adopt_button() 只拿掉視覺、沒有動尺寸），所以這裡不再重複宣告 ——
 * 同一個數值寫在兩個地方就是遲早會走鐘。
 * 結果頁例外：它那組 .btn 規則整組被丟掉（定義搬到上面），尺寸要在這裡補回來。 */
.scene--result .btn{width:100%;padding:15px 10px;
  font-size:clamp(12.5px,3.8cqw,14px);letter-spacing:.2em;text-indent:.2em}

/* ---------- Debug 面板（?debug=1 才出現） ---------- */
.debug-panel{position:fixed;left:8px;top:8px;z-index:999;display:flex;flex-wrap:wrap;
  gap:4px;max-width:190px;font-family:ui-monospace,monospace}
.debug-panel button{font:600 10px/1 ui-monospace,monospace;padding:5px 7px;border:none;
  border-radius:5px;background:rgba(20,18,26,.82);color:#F8F0E5;cursor:pointer}
.debug-panel button.is-active{background:var(--butter);color:#2A2029}
.debug-panel.is-collapsed button:not(.debug-panel__toggle){display:none}
/* 量到的系統字級縮放倍率。桌機永遠是 ×1.00，這行是給實機看的 */
.debug-panel__scale{flex:0 0 100%;font:600 10px/1.4 ui-monospace,monospace;
  padding:4px 6px;border-radius:5px;background:rgba(20,18,26,.82);color:#F0CE86}
.debug-panel.is-collapsed .debug-panel__scale{display:none}

/* ===== intro（來源：00_入口頁.html） ===== */
.scene--intro .bg{position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:50% 42%;
    transform:scale(1.02);
    transition:transform 1.6s var(--ease), filter 1.2s var(--ease);
    will-change:transform;}
.scene--intro .grain{position:absolute;inset:0;pointer-events:none;
    opacity:.16;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>");}
.scene--intro .scrim-top{position:absolute;left:0;right:0;top:0;height:46%;
    pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(250,244,236,.94) 0%,
      rgba(250,244,236,.80) 34%,
      rgba(250,244,236,.42) 66%,
      rgba(250,244,236,0) 100%);
    transition:opacity .9s var(--ease);}
.scene--intro .scrim-bottom{position:absolute;left:0;right:0;bottom:0;height:56%;
    pointer-events:none;
    background:linear-gradient(to top,
      rgba(38,34,44,.72) 0%,
      rgba(38,34,44,.52) 28%,
      rgba(38,34,44,.20) 62%,
      rgba(38,34,44,0) 100%);
    transition:opacity .9s var(--ease);}
.scene--intro .layer{position:absolute;inset:0;
    display:flex;flex-direction:column;
    padding:calc(env(safe-area-inset-top) + 26px) 30px calc(env(safe-area-inset-bottom) + 34px);
    transition:opacity .7s var(--ease);}
.scene--intro .mark{font-size:12px;letter-spacing:.22em;font-weight:500;
    color:var(--ink-soft);
    opacity:0;animation:rise--intro .9s var(--ease) .15s forwards;}
.scene--intro .mark span{opacity:.62;letter-spacing:.14em;margin-left:.5em;font-size:11px}
.scene--intro .intro{margin-top:min(9cqh,72px)}
.scene--intro h1{font-size:clamp(29px,8.6vw,40px);
    font-weight:600;line-height:1.62;letter-spacing:.055em;
    color:var(--ink);
    text-shadow:0 1px 14px rgba(250,244,236,.85);
    opacity:0;animation:rise--intro 1.1s var(--ease) .35s forwards;}
.scene--intro .lede{margin-top:20px;
    font-size:clamp(13.5px,3.7vw,15px);
    font-weight:400;line-height:2.05;letter-spacing:.09em;
    color:var(--ink-soft);
    text-shadow:0 1px 10px rgba(250,244,236,.8);
    opacity:0;animation:rise--intro 1.1s var(--ease) .62s forwards;}
.scene--intro .action{margin-top:auto;
    display:flex;flex-direction:column;align-items:center;
    opacity:0;animation:rise--intro 1.2s var(--ease) .95s forwards;}
.scene--intro .phones{position:relative;
    width:74px;height:60px;
    display:grid;place-items:center;
    margin-bottom:20px;}
.scene--intro .halo{position:absolute;width:150px;height:150px;border-radius:50%;
    background:radial-gradient(circle,
      rgba(240,206,134,.55) 0%,
      rgba(232,166,127,.28) 38%,
      rgba(232,166,127,0) 70%);
    animation:halo--intro 5.4s ease-in-out infinite;}
.scene--intro .phones svg{position:relative;width:100%;height:100%;
    animation:breathe--intro 5.4s ease-in-out infinite;
    filter:drop-shadow(0 3px 10px rgba(30,26,36,.35));}
.scene--intro .cta{font-family:inherit;font-size:16.5px;font-weight:600;letter-spacing:.34em;text-indent:.34em;padding:17px 46px;cursor:pointer;transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
@media (hover:hover){
  .scene--intro .cta:hover{transform:translateY(-2px)}
}
.scene--intro .hint{margin-top:18px;
    font-size:12.5px;font-weight:400;line-height:1.9;letter-spacing:.1em;
    color:rgba(248,240,229,.82);
    text-align:center;
    text-shadow:0 1px 10px rgba(30,26,36,.55);}
@keyframes rise--intro{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
  }
@keyframes breathe--intro{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.055)}
  }
@keyframes halo--intro{
    0%,100%{opacity:.5;transform:scale(.94)}
    50%{opacity:.9;transform:scale(1.06)}
  }
.scene--intro.is-leaving .bg{transform:scale(1.09);filter:saturate(.82) brightness(.86)}
.scene--intro.is-leaving .layer{opacity:0}
.scene--intro.is-leaving .scrim-top{opacity:0}
.scene--intro.is-leaving .scrim-bottom{opacity:1}
.scene--intro .bloom{position:absolute;left:50%;top:78%;translate:-50% -50%;
    width:10px;height:10px;border-radius:50%;
    background:radial-gradient(circle,rgba(240,206,134,.9),rgba(232,166,127,.35) 45%,transparent 70%);
    opacity:0;pointer-events:none;}
.scene--intro.is-leaving .bloom{animation:bloom--intro 1.5s var(--ease) forwards}
@keyframes bloom--intro{
    0%{opacity:0;width:10px;height:10px}
    45%{opacity:.95}
    100%{opacity:0;width:1400px;height:1400px}
  }

/* ===== q1（來源：01_Q1_音量.html） ===== */
.scene--q1{--v:.5;}
.scene--q1 .bg{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 46%;
    transform:scale(calc(1.12 + var(--v) * .04));
    filter:blur(calc(1.6px + var(--vq, var(--v)) * 4.4px))
           saturate(calc(1.06 - var(--vq, var(--v)) * .24))
           brightness(calc(1.04 - var(--vq, var(--v)) * .2));
    transition:transform .5s var(--ease), filter .5s var(--ease);
    will-change:transform,filter;}
.scene--q1 .grain{position:absolute;inset:0;pointer-events:none;opacity:.15;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>")}
.scene--q1 .scrim-top{position:absolute;left:0;right:0;top:0;height:28%;pointer-events:none;
    background:linear-gradient(to bottom,rgba(250,244,236,.9),rgba(250,244,236,.45) 55%,rgba(250,244,236,0))}
.scene--q1 .scrim-bottom{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
    background:linear-gradient(to top,rgba(38,34,44,.46),rgba(38,34,44,0));
    opacity:calc(.45 + var(--v) * .55);transition:opacity .5s var(--ease)}
.scene--q1 .layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    padding:calc(env(safe-area-inset-top) + 24px) 26px calc(env(safe-area-inset-bottom) + 22px);
    transition:opacity .7s var(--ease)}
.scene--q1 .dots{display:flex;gap:9px;opacity:0;animation:rise--q1 .8s var(--ease) .1s forwards}
.scene--q1 .dots i{width:6px;height:6px;border-radius:50%;background:rgba(58,53,64,.26);transition:all .4s var(--ease)}
.scene--q1 .dots i.on{background:var(--ink);width:20px;border-radius:999px}
.scene--q1 .q{margin-top:auto;text-align:center;white-space:nowrap;
     font-size:clamp(13.5px,3.9vw,16.5px);font-weight:600;line-height:1.7;letter-spacing:.045em;
     color:var(--ink);text-shadow:0 1px 12px rgba(250,244,236,.85);
     opacity:0;animation:rise--q1 1s var(--ease) .3s forwards}
.scene--q1 .phonewrap{margin:15px 0 auto;position:relative;display:grid;place-items:center;
    opacity:0;animation:rise--q1 1.1s var(--ease) .55s forwards}
.scene--q1 .waves{position:absolute;inset:0;pointer-events:none}
.scene--q1 .waves span{position:absolute;inset:-4px;border-radius:48px;
    border:2px solid rgba(240,206,134,.75);opacity:0;
    animation:wave--q1 calc(3.2s - var(--vq, var(--v)) * 1.5s) ease-out infinite}
.scene--q1 .waves span:nth-child(2){animation-delay:calc((3.2s - var(--vq, var(--v)) * 1.5s)/3)}
.scene--q1 .waves span:nth-child(3){animation-delay:calc((3.2s - var(--vq, var(--v)) * 1.5s)/3*2)}
@keyframes wave--q1{0%{opacity:0;transform:scale(1)}
    16%{opacity:calc(var(--vq, var(--v)) * .75)}
    100%{opacity:0;transform:scale(calc(1.05 + var(--vq, var(--v)) * .42))}}
.scene--q1 .phone{position:relative;
    width:min(72vw, 274px);
    height:min(58cqh, 540px);
    border-radius:40px;padding:8px;
    background:linear-gradient(158deg,#EFE7DC,#D4C9BB);
    box-shadow:0 26px 54px rgba(22,18,28,.48),
               0 0 0 1.2px rgba(255,255,255,.55) inset,
               0 2px 3px rgba(255,255,255,.7) inset}
.scene--q1 .btn-side{position:absolute;background:linear-gradient(90deg,#D9CEC0,#C3B8AA);border-radius:3px}
.scene--q1 .btn-side.v1{left:-3px;top:23%;width:3.5px;height:34px}
.scene--q1 .btn-side.v2{left:-3px;top:32%;width:3.5px;height:34px}
.scene--q1 .btn-side.pw{right:-3px;top:27%;width:3.5px;height:52px}
.scene--q1 .screen{position:absolute;inset:8px;border-radius:33px;overflow:hidden;
    background:linear-gradient(172deg,#FBF4EA,#EFE5D8);
    display:flex;flex-direction:column;
    padding:12px 16px 14px;
    touch-action:none}
.scene--q1 .screen::after{content:"";position:absolute;inset:0;pointer-events:none;
    opacity:.16;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23s)' opacity='.6'/></svg>")}
.scene--q1 .island{position:absolute;left:50%;top:9px;translate:-50% 0;
    width:62px;height:17px;border-radius:99px;background:#2F2B36;z-index:3}
.scene--q1 .statusbar{display:flex;align-items:center;justify-content:space-between;
    font-size:10px;letter-spacing:.04em;color:rgba(58,53,64,.72);
    height:18px;flex:none;position:relative;z-index:4}
.scene--q1 .statusbar .r{display:flex;align-items:center;gap:4px}
.scene--q1 .bat{width:17px;height:9px;border:1.1px solid rgba(58,53,64,.6);border-radius:2.4px;position:relative}
.scene--q1 .bat::after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:9px;
    background:rgba(58,53,64,.62);border-radius:1px}
.scene--q1 .bat::before{content:"";position:absolute;right:-3px;top:2.6px;width:1.6px;height:3.4px;
    background:rgba(58,53,64,.45);border-radius:0 1px 1px 0}
.scene--q1 .nowlabel{flex:none;text-align:center;margin-top:12px;
    font-size:9.5px;letter-spacing:.28em;text-indent:.28em;color:rgba(58,53,64,.44)}
.scene--q1 .art{flex:1;min-height:0;margin:11px 0 0;border-radius:20px;position:relative;overflow:hidden;
    box-shadow:0 10px 24px rgba(30,26,36,.24);
    transform:scale(calc(1 + var(--v) * .022));
    transition:transform .4s var(--ease);
    background:
      radial-gradient(120% 84% at 24% 20%, rgba(232,166,127,.98), transparent 62%),
      radial-gradient(112% 78% at 84% 30%, rgba(199,188,212,.98), transparent 60%),
      radial-gradient(124% 92% at 46% 94%, rgba(185,207,198,.98), transparent 66%),
      linear-gradient(168deg,#F5EBDD,#E6DCCE)}
.scene--q1 .art::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23a)' opacity='.6'/></svg>")}
.scene--q1 .meta{flex:none;margin-top:13px;display:flex;align-items:center;gap:8px}
.scene--q1 .eq{display:flex;align-items:flex-end;gap:2px;height:12px;flex:none}
.scene--q1 .eq i{width:2.4px;background:var(--peach);border-radius:1px;
    animation:eq--q1 calc(1.5s - var(--vq, var(--v)) * .7s) ease-in-out infinite}
.scene--q1 .eq i:nth-child(1){height:5px;animation-delay:0s}
.scene--q1 .eq i:nth-child(2){height:11px;animation-delay:.18s}
.scene--q1 .eq i:nth-child(3){height:7px;animation-delay:.36s}
@keyframes eq--q1{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
.scene--q1 .meta .t{min-width:0}
.scene--q1 .meta .t b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);
    letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene--q1 .meta .t s{display:block;text-decoration:none;font-size:10.5px;
    color:rgba(58,53,64,.5);letter-spacing:.1em;margin-top:2px}
.scene--q1 .prog{flex:none;margin-top:11px}
.scene--q1 .prog .bar{height:3px;border-radius:99px;background:rgba(58,53,64,.15);position:relative}
.scene--q1 .prog .bar i{position:absolute;left:0;top:0;bottom:0;width:34%;
    background:rgba(58,53,64,.55);border-radius:99px}
.scene--q1 .prog .bar u{position:absolute;left:34%;top:50%;translate:-50% -50%;
    width:7px;height:7px;border-radius:50%;background:var(--ink)}
.scene--q1 .prog .tt{display:flex;justify-content:space-between;margin-top:5px;
    font-size:8.5px;color:rgba(58,53,64,.42);letter-spacing:.04em}
.scene--q1 .ctrl{flex:none;display:flex;align-items:center;justify-content:center;gap:26px;margin-top:9px}
.scene--q1 .ctrl svg{fill:var(--ink)}
.scene--q1 .ctrl .play{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
    background:var(--ink)}
.scene--q1 .ctrl .play svg{fill:var(--cream-warm)}
.scene--q1 .volrow{flex:none;display:flex;align-items:center;gap:9px;margin-top:14px;
    padding:9px 0;cursor:grab}
.scene--q1 .volrow:active{cursor:grabbing}
.scene--q1 .volrow svg{fill:rgba(58,53,64,.44);flex:none}
.scene--q1 .vtrack{flex:1;height:6px;border-radius:99px;background:rgba(58,53,64,.18);position:relative}
.scene--q1 .vfill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);
    border-radius:99px;background:linear-gradient(90deg,var(--butter),var(--peach));
    transition:width .09s linear}
.scene--q1 .vknob{position:absolute;left:calc(var(--v) * 100%);top:50%;translate:-50% -50%;
    width:17px;height:17px;border-radius:50%;
    background:#FFFCF7;box-shadow:0 2px 7px rgba(30,26,36,.38),0 0 0 1px rgba(58,53,64,.14);
    transition:left .09s linear}
.scene--q1 .phonewrap.idle .vknob{animation:slide--q1 2.4s var(--ease) .7s infinite}
.scene--q1 .phonewrap.idle .vknob::after{content:"";position:absolute;inset:-7px;border-radius:50%;
    border:2px solid rgba(232,166,127,.8);animation:knobpulse--q1 1.9s ease-out infinite}
@keyframes knobpulse--q1{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.7)}}
@keyframes slide--q1{0%,100%{margin-left:0}30%{margin-left:11px}62%{margin-left:-7px}}
.scene--q1 .okwrap{flex:none;height:44px;display:grid;place-items:center;margin-top:6px}
.scene--q1 .ok{grid-area:1/1;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.3em;text-indent:.3em;padding:11px 30px;cursor:pointer;opacity:0;transform:translateY(9px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.scene--q1.is-ready .ok{opacity:1;transform:none;pointer-events:auto}
.scene--q1 .tip{grid-area:1/1;display:flex;align-items:center;gap:8px;pointer-events:none;
    font-size:11.5px;font-weight:500;color:rgba(58,53,64,.68);
    transition:opacity .35s var(--ease)}
.scene--q1 .tip b{font-weight:inherit;letter-spacing:.15em;text-indent:.15em}
.scene--q1 .tip i{width:8px;height:8px;border-top:2px solid rgba(58,53,64,.55);
    border-right:2px solid rgba(58,53,64,.55);border-radius:1.5px;flex:none}
.scene--q1 .tip i.l{transform:rotate(-135deg);animation:tipbob--q1 1.7s ease-in-out infinite}
.scene--q1 .tip i.r{transform:rotate(45deg);animation:tipbob--q1 1.7s ease-in-out .25s infinite}
@keyframes tipbob--q1{0%,100%{opacity:.35}50%{opacity:1}}
.scene--q1.is-ready .tip{opacity:0}
@keyframes rise--q1{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ===== q2（來源：02_Q2_聲音.html） ===== */
.scene--q2 .bg{position:absolute;inset:0;width:100%;height:100%;
      object-fit:cover;object-position:50% 42%;
      transform:scale(1.07);filter:blur(3.2px) saturate(1.02) brightness(1.02);
      transition:transform 1.2s var(--ease),filter 1.2s var(--ease)}
.scene--q2 .grain{position:absolute;inset:0;pointer-events:none;opacity:.15;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>")}
.scene--q2 .scrim-top{position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;
    background:linear-gradient(to bottom,rgba(250,244,236,.9),rgba(250,244,236,.42) 58%,rgba(250,244,236,0))}
.scene--q2 .scrim-bottom{position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;
    background:linear-gradient(to top,rgba(40,34,42,.3),rgba(40,34,42,.08) 55%,rgba(40,34,42,0))}
.scene--q2 .layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    padding:calc(env(safe-area-inset-top) + 24px) 26px calc(env(safe-area-inset-bottom) + 30px);
    transition:opacity .7s var(--ease)}
.scene--q2 .dots{display:flex;gap:9px;opacity:0;animation:rise--q2 .8s var(--ease) .1s forwards}
.scene--q2 .dots i{width:6px;height:6px;border-radius:50%;background:rgba(58,53,64,.26);transition:all .4s var(--ease)}
.scene--q2 .dots i.on{background:var(--ink);width:20px;border-radius:999px}
.scene--q2 .q{margin-top:auto;text-align:center;white-space:nowrap;
     font-size:clamp(13.5px,3.9vw,16.5px);font-weight:600;line-height:1.7;letter-spacing:.045em;
     color:var(--ink);text-shadow:0 1px 12px rgba(250,244,236,.85);
     opacity:0;animation:rise--q2 1s var(--ease) .3s forwards}
.scene--q2 .waves{width:100%;margin:16px 0 auto;display:flex;flex-direction:column;gap:11px}
.scene--q2 .strip{position:relative;border-radius:20px;padding:0 16px;
    height:clamp(60px,9.4cqh,80px);
    display:flex;align-items:center;
    background:rgba(251,246,238,.72);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    box-shadow:0 0 0 1.2px rgba(255,255,255,.7) inset,0 10px 24px rgba(28,24,34,.26);
    cursor:pointer;overflow:hidden;
    opacity:0;transform:translateY(16px);
    animation:rise--q2 .9s var(--ease) forwards;
    transition:transform .5s var(--ease),opacity .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease);}
.scene--q2 .strip:nth-child(1){animation-delay:.5s}
.scene--q2 .strip:nth-child(2){animation-delay:.62s}
.scene--q2 .strip:nth-child(3){animation-delay:.74s}
.scene--q2 .strip:nth-child(4){animation-delay:.86s}
.scene--q2 .strip:active{transform:scale(.985)}
.scene--q2 .wave{display:flex;align-items:center;justify-content:space-between;width:100%;height:60%}
.scene--q2 .wave i{display:block;width:3px;border-radius:2px;flex:none;
    height:calc(var(--h) * 100%);
    background:var(--c);
    transform-origin:center;
    animation:playhead--q2 4.2s linear infinite;
    animation-delay:var(--d);}
.scene--q2 .k-metal   .wave i{--c:#B5674A}
.scene--q2 .k-lofi    .wave i{--c:#7A92A9}
.scene--q2 .k-piano   .wave i{--c:#DB8F62}
.scene--q2 .k-ambient .wave i{--c:#83AA99}
@keyframes playhead--q2{
    0%{opacity:.52;transform:scaleY(.95)}
    5%{opacity:1;transform:scaleY(1.08)}
    26%{opacity:.52;transform:scaleY(.95)}
    100%{opacity:.52;transform:scaleY(.95)}
  }
.scene--q2 .head{position:absolute;left:16px;right:16px;top:22%;bottom:22%;pointer-events:none}
.scene--q2 .head i{position:absolute;top:0;bottom:0;width:2px;border-radius:2px;
    background:linear-gradient(to bottom,rgba(232,166,127,0),rgba(224,140,92,.9),rgba(232,166,127,0));
    box-shadow:0 0 10px rgba(232,166,127,.75);
    animation:sweep--q2 4.2s linear infinite}
@keyframes sweep--q2{from{left:0%}to{left:100%}}
.scene--q2.is-picked .strip{opacity:.3;transform:scale(.972)}
.scene--q2.is-picked .strip.sel{opacity:1;transform:scale(1.035);
    background:rgba(253,249,243,.92);
    box-shadow:0 0 0 1.6px rgba(255,255,255,.85) inset,0 16px 34px rgba(28,24,34,.32);}
.scene--q2.is-picked .strip.sel .wave i,
.scene--q2.is-picked .strip.sel .head i{animation-play-state:paused}
@keyframes rise--q2{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ===== q3（來源：03_Q3_那個聲音.html） ===== */
.scene--q3{--pos:.5;--e:0;--rot:0deg;--sc:1.06;}
.scene--q3 .bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
      object-fit:cover;object-position:54% 46%;
      transform:scale(calc(1.2 - var(--e) * .03));
      filter:blur(calc(1.6px + (1 - var(--eq, var(--e))) * 5px))
             saturate(calc(.94 + var(--eq, var(--e)) * .2))
             brightness(calc(.97 + var(--eq, var(--e)) * .1));
      transition:filter .45s var(--ease),transform .45s var(--ease)}
.scene--q3 .grain{position:absolute;inset:0;pointer-events:none;opacity:.15;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>")}
.scene--q3 .scrim-top{position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;
    background:linear-gradient(to bottom,rgba(250,244,236,.92),rgba(250,244,236,.44) 58%,rgba(250,244,236,0))}
.scene--q3 .scrim-bottom{position:absolute;left:0;right:0;bottom:0;height:32%;pointer-events:none;
    background:linear-gradient(to top,rgba(40,34,42,.44),rgba(40,34,42,0))}
.scene--q3 .ambient{position:absolute;right:14%;top:27%;width:0;height:0;pointer-events:none}
.scene--q3 .ambient span{position:absolute;left:0;top:0;translate:-50% -50%;
    width:120px;height:120px;border-radius:50%;
    border:1.6px solid rgba(255,253,247,.92);
    box-shadow:0 0 14px rgba(255,250,238,.55);opacity:0;
    animation:amb--q3 3.8s cubic-bezier(.16,.7,.3,1) infinite}
.scene--q3 .ambient span:nth-child(2){animation-delay:1.26s}
.scene--q3 .ambient span:nth-child(3){animation-delay:2.52s}
@keyframes amb--q3{0%{opacity:0;transform:scale(.28)}
    18%{opacity:calc(var(--e) * .95)}100%{opacity:0;transform:scale(3)}}
.scene--q3 .rail{position:absolute;left:50%;top:32%;height:34%;width:2px;translate:-50% 0;
    background:linear-gradient(to bottom,rgba(58,53,64,.06),rgba(58,53,64,.24),rgba(58,53,64,.06));
    border-radius:2px;pointer-events:none}
.scene--q3 .notch{position:absolute;left:50%;translate:-50% -50%;
    width:11px;height:11px;border-radius:50%;
    background:rgba(252,247,240,.9);
    box-shadow:0 0 0 1.4px rgba(58,53,64,.28),0 2px 6px rgba(28,24,34,.24);
    transition:all .35s var(--ease)}
.scene--q3 .notch.n0{top:0}
.scene--q3 .notch.n1{top:50%}
.scene--q3 .notch.n2{top:100%}
.scene--q3 .notch.on{width:15px;height:15px;background:var(--ink);
    box-shadow:0 0 0 4px rgba(252,247,240,.75),0 2px 8px rgba(28,24,34,.3)}
.scene--q3 .opts{position:absolute;right:22px;top:32%;height:34%;pointer-events:auto}
.scene--q3 .opt{position:absolute;right:0;translate:0 -50%;
    font-size:12px;font-weight:600;letter-spacing:.14em;text-indent:.14em;
    color:rgba(58,53,64,.62);white-space:nowrap;cursor:pointer;
    background:rgba(252,247,240,.62);border-radius:999px;padding:7px 14px;
    box-shadow:0 2px 8px rgba(28,24,34,.14),0 0 0 1px rgba(255,255,255,.55) inset;
    transition:all .35s var(--ease)}
.scene--q3 .opt.o0{top:0}
.scene--q3 .opt.o1{top:50%}
.scene--q3 .opt.o2{top:100%}
.scene--q3 .opt.on{color:var(--ink);background:rgba(253,250,245,.95);
    box-shadow:0 5px 16px rgba(28,24,34,.24),0 0 0 1.4px rgba(255,255,255,.85) inset}
.scene--q3 .phones{position:absolute;left:50%;top:calc(32% + var(--pos) * 34%);
    translate:-50% -50%;width:min(46vw,180px);pointer-events:none;
    transform:rotate(var(--rot)) scale(var(--sc));
    transition:top .32s var(--ease),transform .32s var(--ease);
    filter:drop-shadow(0 14px 22px rgba(28,24,34,.34))}
.scene--q3 .phones img{width:100%;height:auto;display:block}
.scene--q3.is-idle .phones{animation:bob--q3 4.6s ease-in-out infinite}
@keyframes bob--q3{0%,100%{margin-top:0}50%{margin-top:-7px}}
.scene--q3 .music{position:absolute;left:50%;top:calc(32% + var(--pos) * 34%);translate:-50% -50%;
    width:0;height:0;pointer-events:none;transition:top .32s var(--ease)}
.scene--q3 .music span{position:absolute;left:0;top:0;translate:-50% -50%;
    width:150px;height:150px;border-radius:50%;
    border:1.6px solid rgba(240,206,134,.92);
    box-shadow:0 0 12px rgba(240,206,134,.45);opacity:0;
    animation:mus--q3 3s cubic-bezier(.16,.7,.3,1) infinite}
.scene--q3 .music span:nth-child(2){animation-delay:1s}
.scene--q3 .music span:nth-child(3){animation-delay:2s}
@keyframes mus--q3{0%{opacity:0;transform:scale(.72)}
    18%{opacity:calc((1 - var(--e)) * .85)}100%{opacity:0;transform:scale(2)}}
.scene--q3 .layer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    padding:calc(env(safe-area-inset-top) + 24px) 26px calc(env(safe-area-inset-bottom) + 28px);
    pointer-events:none;transition:opacity .7s var(--ease)}
.scene--q3 .dots{display:flex;gap:9px;opacity:0;animation:rise--q3 .8s var(--ease) .1s forwards}
.scene--q3 .dots i{width:6px;height:6px;border-radius:50%;background:rgba(58,53,64,.26);transition:all .4s var(--ease)}
.scene--q3 .dots i.on{background:var(--ink);width:20px;border-radius:999px}
.scene--q3 .head{position:absolute;left:0;right:0;top:22%;display:flex;flex-direction:column;
    align-items:center;pointer-events:none}
.scene--q3 .lede{font-size:11.5px;letter-spacing:.14em;text-indent:.14em;
    color:rgba(58,53,64,.62);text-shadow:0 1px 10px rgba(250,244,236,.85);
    opacity:0;animation:rise--q3 1s var(--ease) .28s forwards}
.scene--q3 .q{margin-top:8px;text-align:center;white-space:nowrap;
     font-size:clamp(13.5px,3.9vw,16.5px);font-weight:600;line-height:1.7;letter-spacing:.045em;
     color:var(--ink);text-shadow:0 1px 12px rgba(250,244,236,.85);
     opacity:0;animation:rise--q3 1s var(--ease) .38s forwards}
.scene--q3 .foot{margin-top:auto;height:86px;display:grid;place-items:center;width:100%}
.scene--q3 .hint{grid-area:1/1;pointer-events:none;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-indent:.14em;
    color:rgba(248,240,229,.94);text-shadow:0 1px 10px rgba(30,26,36,.7);
    opacity:0;animation:rise--q3 1s var(--ease) .8s forwards;transition:opacity .4s var(--ease)}
.scene--q3.is-ready .hint{opacity:0 !important}
.scene--q3 .confirm{grid-area:1/1;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:.32em;text-indent:.32em;padding:15px 40px;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.scene--q3.is-ready .confirm{opacity:1;transform:none;pointer-events:auto}
@keyframes rise--q3{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ===== q4（來源：04_Q4_這首歌.html） ===== */
.scene--q4 .bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
      object-fit:cover;object-position:50% 48%;transform:scale(1.17);
      filter:blur(5px) saturate(1.04) brightness(1.02);
      transition:filter 1s var(--ease),transform 1s var(--ease)}
.scene--q4 .grain{position:absolute;inset:0;pointer-events:none;opacity:.15;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>")}
.scene--q4 .scrim-top{position:absolute;left:0;right:0;top:0;height:32%;pointer-events:none;
    background:linear-gradient(to bottom,rgba(250,244,236,.9),rgba(250,244,236,.4) 58%,rgba(250,244,236,0))}
.scene--q4 .scrim-bottom{position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;
    background:linear-gradient(to top,rgba(46,34,34,.4),rgba(46,34,34,0))}
.scene--q4 .bloom{position:absolute;inset:0;pointer-events:none;opacity:0;
    background:radial-gradient(64% 42% at 50% 46%,rgba(240,206,134,.9),transparent 72%);
    mix-blend-mode:soft-light;transition:opacity .6s var(--ease)}
.scene--q4.is-kept .bloom{opacity:1}
.scene--q4 .dots{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 24px);
    display:flex;justify-content:center;gap:9px;
    opacity:0;animation:rise--q4 .8s var(--ease) .1s forwards}
.scene--q4 .dots i{width:6px;height:6px;border-radius:50%;background:rgba(58,53,64,.26)}
.scene--q4 .dots i.on{background:var(--ink);width:20px;border-radius:999px}
.scene--q4 .top{position:absolute;left:0;right:0;top:13%;padding:0 9cqw;
    display:flex;flex-direction:column;align-items:center;text-align:center}
.scene--q4 .lede{font-size:clamp(10px,3.1cqw,12px);line-height:1.85;letter-spacing:.1em;
    color:rgba(58,53,64,.64);text-shadow:0 1px 10px rgba(250,244,236,.9);
    opacity:0;animation:rise--q4 1s var(--ease) .28s forwards}
.scene--q4 .q{margin-top:8px;white-space:nowrap;
     font-size:clamp(13px,4.6cqw,17px);font-weight:600;line-height:1.7;letter-spacing:.05em;
     color:var(--ink);text-shadow:0 1px 12px rgba(250,244,236,.9);
     opacity:0;animation:rise--q4 1s var(--ease) .38s forwards}
.scene--q4 .cardzone{position:absolute;left:50%;top:calc(13% + 104px);translate:-50% 0;
    display:flex;flex-direction:column;align-items:center}
.scene--q4 .card{position:relative;width:min(58cqw,224px);
    background:linear-gradient(172deg,#FDF8F0,#F0E5D6);
    border-radius:24px;padding:12px 12px 14px;
    box-shadow:0 22px 44px rgba(46,30,28,.36),0 0 0 1.2px rgba(255,255,255,.75) inset;
    opacity:0;animation:rise--q4 1s var(--ease) .5s forwards;
    transition:transform .55s cubic-bezier(.3,.1,.2,1),opacity .45s ease-in .1s}
.scene--q4 .card::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
    opacity:.16;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23c)' opacity='.6'/></svg>")}
.scene--q4.is-skipped .card{transform:translateX(-140%) rotate(-16deg);opacity:0}
.scene--q4.is-kept .card{transform:scale(1.04)}
.scene--q4 .art{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;
    box-shadow:0 8px 18px rgba(46,30,28,.24);
    background:
      radial-gradient(118% 82% at 26% 22%, rgba(240,186,120,.98), transparent 62%),
      radial-gradient(112% 78% at 82% 28%, rgba(226,146,132,.98), transparent 60%),
      radial-gradient(124% 92% at 46% 92%, rgba(150,166,190,.95), transparent 66%),
      linear-gradient(166deg,#F7E9D6,#E7D8C6);
    animation:hit--q4 4.2s linear infinite}
.scene--q4 .art::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23a)' opacity='.6'/></svg>")}
@keyframes hit--q4{
    0%,32%{box-shadow:0 8px 18px rgba(46,30,28,.24)}
    41%{box-shadow:0 8px 26px rgba(46,30,28,.24),0 0 30px 4px rgba(240,206,134,.8)}
    56%,100%{box-shadow:0 8px 18px rgba(46,30,28,.24)}
  }
.scene--q4 .wave{display:flex;align-items:center;justify-content:space-between;
    height:32px;margin-top:11px;position:relative}
.scene--q4 .wave i{display:block;width:2.4px;border-radius:2px;flex:none;
    height:calc(var(--h) * 100%);background:#C98A63;transform-origin:center;
    animation:playhead--q4 4.2s linear infinite;animation-delay:var(--d)}
@keyframes playhead--q4{
    0%{opacity:.5;transform:scaleY(.95)}
    5%{opacity:1;transform:scaleY(1.1)}
    26%{opacity:.5;transform:scaleY(.95)}
    100%{opacity:.5;transform:scaleY(.95)}
  }
.scene--q4 .head{position:absolute;left:0;right:0;top:8%;bottom:8%;pointer-events:none}
.scene--q4 .head i{position:absolute;top:0;bottom:0;width:2px;border-radius:2px;
    background:linear-gradient(to bottom,rgba(224,140,92,0),rgba(206,110,66,.95),rgba(224,140,92,0));
    box-shadow:0 0 10px rgba(232,166,127,.8);animation:sweep--q4 4.2s linear infinite}
@keyframes sweep--q4{from{left:0%}to{left:100%}}
.scene--q4 .time{display:flex;justify-content:space-between;margin-top:7px;
    font-size:9px;letter-spacing:.06em;color:rgba(58,53,64,.44)}
.scene--q4 .ctrls{margin-top:26px;display:flex;align-items:flex-start;gap:min(13cqw,52px);
    opacity:0;animation:rise--q4 1s var(--ease) .72s forwards}
.scene--q4 .ctrl{display:flex;flex-direction:column;align-items:center;gap:9px;
    background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.scene--q4 .ctrl b{position:relative;display:grid;place-items:center;
    width:62px;height:62px;border-radius:50%;transition:transform .22s var(--ease)}
.scene--q4 .ctrl.play b{background:var(--ink);
    box-shadow:0 10px 24px rgba(30,22,26,.42),0 0 0 0 rgba(240,206,134,.55);
    animation:ready--q4 3.4s ease-in-out 1.6s infinite}
.scene--q4 .ctrl.next b{background:linear-gradient(180deg,var(--cream-warm),var(--cream));
    box-shadow:0 8px 20px rgba(30,22,26,.32),0 0 0 1.2px rgba(255,255,255,.7) inset}
.scene--q4 .ctrl s{text-decoration:none;font-size:clamp(10.5px,3.2cqw,12.5px);font-weight:600;
    letter-spacing:.14em;text-indent:.14em;color:rgba(250,244,236,.96);
    text-shadow:0 1px 10px rgba(40,28,26,.75)}
.scene--q4 .ctrl:active b{transform:scale(.92)}
@keyframes ready--q4{
    0%,100%{box-shadow:0 10px 24px rgba(30,22,26,.42),0 0 0 0 rgba(240,206,134,.5)}
    50%{box-shadow:0 10px 24px rgba(30,22,26,.42),0 0 0 13px rgba(240,206,134,0)}
  }
.scene--q4.is-done .ctrls{opacity:.25;pointer-events:none;transition:opacity .4s var(--ease)}
@keyframes rise--q4{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ===== q5（來源：05_Q5_眼皮.html） ===== */
.scene--q5{--s:.5;}
.scene--q5 .bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
      object-fit:cover;object-position:50% 48%;
      transform:scale(calc(1.14 + var(--s) * .05));
      filter:blur(calc(.6px + var(--sq, var(--s)) * 15px))
             saturate(calc(1.08 - var(--sq, var(--s)) * .4))
             brightness(calc(1.05 - var(--sq, var(--s)) * .34));
      transition:filter .18s linear,transform .18s linear}
.scene--q5 .grain{position:absolute;inset:0;pointer-events:none;opacity:.15;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>")}
.scene--q5 .vig{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(115% 78% at 50% 50%,transparent 30%,rgba(38,28,30,.9) 100%);
    opacity:calc(var(--s) * .9);transition:opacity .18s linear}
.scene--q5 .warm{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
    background:radial-gradient(70% 46% at 50% 46%,rgba(240,206,134,.85),transparent 72%);
    opacity:calc(var(--s) * .8);transition:opacity .18s linear}
.scene--q5 .scrim-top{position:absolute;left:0;right:0;top:0;height:32%;pointer-events:none;
    background:linear-gradient(to bottom,rgba(250,244,236,.88),rgba(250,244,236,.36) 58%,rgba(250,244,236,0))}
.scene--q5 .dots{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 24px);
    display:flex;justify-content:center;gap:9px;
    opacity:0;animation:rise--q5 .8s var(--ease) .1s forwards}
.scene--q5 .dots i{width:6px;height:6px;border-radius:50%;background:rgba(58,53,64,.26)}
.scene--q5 .dots i.on{background:var(--ink);width:20px;border-radius:999px}
.scene--q5 .top{position:absolute;left:0;right:0;top:14%;padding:0 9cqw;
    display:flex;flex-direction:column;align-items:center;text-align:center}
.scene--q5 .lede{font-size:clamp(10px,3.1cqw,12px);line-height:1.85;letter-spacing:.1em;
    color:rgba(58,53,64,.64);text-shadow:0 1px 10px rgba(250,244,236,.9);
    opacity:0;animation:rise--q5 1s var(--ease) .28s forwards}
.scene--q5 .q{margin-top:8px;white-space:nowrap;
     font-size:clamp(13px,4.6cqw,17px);font-weight:600;line-height:1.7;letter-spacing:.05em;
     color:var(--ink);text-shadow:0 1px 12px rgba(250,244,236,.9);
     opacity:0;animation:rise--q5 1s var(--ease) .38s forwards}
.scene--q5 .slider{position:absolute;left:50%;top:64%;translate:-50% 0;width:min(66cqw,268px);
    opacity:0;animation:rise--q5 1s var(--ease) .6s forwards}
.scene--q5 .state{text-align:center;margin-bottom:16px;height:20px;
    font-size:clamp(11.5px,3.6cqw,13.5px);font-weight:600;letter-spacing:.2em;text-indent:.2em;
    color:rgba(250,244,236,.98);text-shadow:0 1px 12px rgba(40,28,26,.8);
    opacity:0;transition:opacity .3s var(--ease)}
.scene--q5.is-touched .state{opacity:1}
.scene--q5 .railwrap{padding:16px 0;cursor:grab;touch-action:none}
.scene--q5 .railwrap:active{cursor:grabbing}
.scene--q5 .rail{position:relative;height:6px;border-radius:99px;
    background:rgba(252,247,240,.32);
    box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 2px 8px rgba(30,22,26,.24)}
.scene--q5 .fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--s) * 100%);
    border-radius:99px;background:linear-gradient(90deg,rgba(252,247,240,.9),rgba(240,206,134,.95));
    transition:width .1s linear}
.scene--q5 .knob{position:absolute;left:calc(var(--s) * 100%);top:50%;translate:-50% -50%;
    width:26px;height:26px;border-radius:50%;
    background:linear-gradient(180deg,#FFFDF9,var(--cream));
    box-shadow:0 4px 12px rgba(30,22,26,.42),0 0 0 1px rgba(58,53,64,.12);
    transition:left .1s linear}
.scene--q5 .slider.idle .knob{animation:slide--q5 2.6s var(--ease) .8s infinite}
.scene--q5 .slider.idle .knob::after{content:"";position:absolute;inset:-8px;border-radius:50%;
    border:2px solid rgba(240,206,134,.85);animation:pulse--q5 2s ease-out infinite}
@keyframes slide--q5{0%,100%{margin-left:0}30%{margin-left:14px}64%{margin-left:-10px}}
@keyframes pulse--q5{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.8)}}
.scene--q5 .ends{display:flex;justify-content:space-between;margin-top:11px;
    font-size:clamp(9.5px,2.9cqw,11px);letter-spacing:.14em;
    color:rgba(250,244,236,.7);text-shadow:0 1px 8px rgba(40,28,26,.7)}
.scene--q5 .foot{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 30px);
    display:grid;place-items:center}
.scene--q5 .hint{grid-area:1/1;pointer-events:none;font-size:clamp(11px,3.3cqw,12.5px);font-weight:500;
    letter-spacing:.16em;text-indent:.16em;
    color:rgba(250,244,236,.94);text-shadow:0 1px 10px rgba(40,28,26,.75);
    opacity:0;animation:rise--q5 1s var(--ease) .85s forwards;transition:opacity .4s var(--ease)}
.scene--q5.is-ready .hint{opacity:0 !important}
.scene--q5 .confirm{grid-area:1/1;font-family:inherit;font-size:clamp(13.5px,4cqw,15px);font-weight:600;letter-spacing:.32em;text-indent:.32em;padding:15px 40px;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.scene--q5.is-ready .confirm{opacity:1;transform:none;pointer-events:auto}
@keyframes rise--q5{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ===== q6（來源：06_Q6_最後一個聲音.html） ===== */
.scene--q6 .bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
      object-fit:cover;object-position:50% 48%;transform:scale(1.22);
      filter:blur(13px) saturate(.62) brightness(.5);
      transition:filter 1.4s var(--ease),transform 1.4s var(--ease)}
.scene--q6 .grain{position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>")}
.scene--q6 .vig{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(105% 70% at 50% 50%,transparent 20%,rgba(14,11,17,.94) 100%);
    transition:opacity 1.2s var(--ease)}
.scene--q6 .glow{position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:min(110cqw,430px);aspect-ratio:1;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(240,206,134,.42),rgba(232,166,127,.14) 44%,transparent 72%);
    transition:opacity 1s var(--ease)}
.scene--q6.is-stopped .glow{opacity:0}
.scene--q6 .dots{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 24px);
    display:flex;justify-content:center;gap:9px;
    opacity:0;animation:rise--q6 .9s var(--ease) .2s forwards}
.scene--q6 .dots i{width:6px;height:6px;border-radius:50%;background:rgba(248,240,229,.28)}
.scene--q6 .dots i.on{background:rgba(248,240,229,.95);width:20px;border-radius:999px}
.scene--q6 .top{position:absolute;left:0;right:0;top:12%;padding:0 9cqw;
    display:flex;flex-direction:column;align-items:center;text-align:center}
.scene--q6 .lede{font-size:clamp(10px,3.1cqw,12px);line-height:1.85;letter-spacing:.1em;
    color:rgba(248,240,229,.6);text-shadow:0 1px 12px rgba(10,8,14,.9);
    opacity:0;animation:rise--q6 1.1s var(--ease) .4s forwards}
.scene--q6 .q{margin-top:8px;white-space:nowrap;
     font-size:clamp(13px,4.6cqw,17px);font-weight:600;line-height:1.7;letter-spacing:.05em;
     color:rgba(250,244,236,.96);text-shadow:0 2px 16px rgba(10,8,14,.95);
     opacity:0;animation:rise--q6 1.1s var(--ease) .52s forwards}
.scene--q6 .phonewrap{position:absolute;left:50%;top:54%;translate:-50% -50%;
    opacity:0;animation:rise--q6 1.2s var(--ease) .7s forwards;
    transition:transform 1.1s var(--ease),opacity 1s var(--ease)}
.scene--q6.is-kept .phonewrap{transform:translateY(52px);opacity:.12}
.scene--q6.is-stopped .phonewrap{opacity:.1}
.scene--q6 .phone{position:relative;width:min(66cqw,252px);height:min(53cqh,470px);
    border-radius:40px;padding:8px;
    background:linear-gradient(158deg,#EFE7DC,#D4C9BB);
    box-shadow:0 28px 62px rgba(0,0,0,.6),
               0 0 0 1.2px rgba(255,255,255,.55) inset,
               0 2px 3px rgba(255,255,255,.7) inset,
               0 0 60px rgba(240,206,134,.3)}
.scene--q6 .btn-side{position:absolute;background:linear-gradient(90deg,#D9CEC0,#C3B8AA);border-radius:3px}
.scene--q6 .btn-side.v1{left:-3px;top:23%;width:3.5px;height:32px}
.scene--q6 .btn-side.v2{left:-3px;top:32%;width:3.5px;height:32px}
.scene--q6 .btn-side.pw{right:-3px;top:27%;width:3.5px;height:50px}
.scene--q6 .island{position:absolute;left:50%;top:9px;translate:-50% 0;
    width:58px;height:16px;border-radius:99px;background:#2F2B36;z-index:3}
.scene--q6 .screen{position:absolute;inset:8px;border-radius:33px;overflow:hidden;
    background:linear-gradient(172deg,#FBF4EA,#EFE5D8);
    display:flex;flex-direction:column;padding:12px 15px 14px;
    transition:filter .8s var(--ease)}
.scene--q6 .screen::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23s)' opacity='.6'/></svg>")}
.scene--q6.is-stopped .screen{filter:brightness(.42) saturate(.55)}
.scene--q6 .statusbar{display:flex;align-items:center;justify-content:space-between;
    font-size:10px;color:rgba(58,53,64,.72);height:17px;flex:none;position:relative;z-index:4}
.scene--q6 .statusbar .r{display:flex;align-items:center;gap:4px}
.scene--q6 .bat{width:17px;height:9px;border:1.1px solid rgba(58,53,64,.6);border-radius:2.4px;position:relative}
.scene--q6 .bat::after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:8px;
    background:rgba(58,53,64,.62);border-radius:1px}
.scene--q6 .bat::before{content:"";position:absolute;right:-3px;top:2.6px;width:1.6px;height:3.4px;
    background:rgba(58,53,64,.45);border-radius:0 1px 1px 0}
.scene--q6 .nowlabel{flex:none;text-align:center;margin-top:11px;
    font-size:9px;letter-spacing:.28em;text-indent:.28em;color:rgba(58,53,64,.44)}
.scene--q6 .art{flex:1;min-height:0;margin:10px 0 0;border-radius:20px;position:relative;overflow:hidden;
    box-shadow:0 10px 24px rgba(30,26,36,.24);
    background:
      radial-gradient(120% 84% at 24% 20%, rgba(232,166,127,.98), transparent 62%),
      radial-gradient(112% 78% at 84% 30%, rgba(199,188,212,.98), transparent 60%),
      radial-gradient(124% 92% at 46% 94%, rgba(185,207,198,.98), transparent 66%),
      linear-gradient(168deg,#F5EBDD,#E6DCCE)}
.scene--q6 .art::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23a)' opacity='.6'/></svg>")}
.scene--q6 .meta{flex:none;margin-top:12px;display:flex;align-items:center;gap:8px}
.scene--q6 .eq{display:flex;align-items:flex-end;gap:2px;height:12px;flex:none}
.scene--q6 .eq i{width:2.4px;background:var(--peach);border-radius:1px;
    animation:eq--q6 2.1s ease-in-out infinite}
.scene--q6 .eq i:nth-child(1){height:5px}
.scene--q6 .eq i:nth-child(2){height:11px;animation-delay:.24s}
.scene--q6 .eq i:nth-child(3){height:7px;animation-delay:.48s}
@keyframes eq--q6{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}
.scene--q6.is-stopped .eq i{animation-play-state:paused;transform:scaleY(.42)}
.scene--q6 .meta .t{min-width:0}
.scene--q6 .meta .t b{display:block;font-size:13px;font-weight:600;color:var(--ink);
    letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene--q6 .meta .t s{display:block;text-decoration:none;font-size:10px;
    color:rgba(58,53,64,.5);letter-spacing:.1em;margin-top:2px}
.scene--q6 .prog{flex:none;margin-top:10px}
.scene--q6 .prog .bar{height:3px;border-radius:99px;background:rgba(58,53,64,.15);position:relative}
.scene--q6 .prog .bar i{position:absolute;left:0;top:0;bottom:0;width:78%;
    background:rgba(58,53,64,.5);border-radius:99px}
.scene--q6 .prog .bar u{position:absolute;left:78%;top:50%;translate:-50% -50%;
    width:7px;height:7px;border-radius:50%;background:var(--ink)}
.scene--q6 .prog .tt{display:flex;justify-content:space-between;margin-top:5px;
    font-size:8.5px;color:rgba(58,53,64,.42)}
.scene--q6 .picks{flex:none;display:flex;gap:8px;margin-top:14px}
.scene--q6 .pick{flex:1;font-family:inherit;cursor:pointer;
    font-size:clamp(10.5px,3.2cqw,12.5px);font-weight:600;letter-spacing:.08em;text-indent:.08em;
    padding:12px 0;border-radius:999px;transition:transform .2s var(--ease),opacity .4s var(--ease)}
.scene--q6 .pick.keep{color:var(--ink);background:transparent;border:1.4px solid rgba(58,53,64,.35)}
.scene--q6 .pick.stop{color:var(--cream-warm);background:var(--ink);border:none;
    box-shadow:0 6px 16px rgba(30,26,36,.34)}
.scene--q6 .pick:active{transform:scale(.955)}
.scene--q6.is-done .picks{opacity:.25;pointer-events:none}
@keyframes rise--q6{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ===== nick（來源：07_暱稱.html） ===== */
.scene--nick .bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
      object-fit:cover;object-position:50% 48%;transform:scale(1.46);
      filter:blur(46px) saturate(.72) brightness(1.42);
      animation:sway--nick 22s ease-in-out infinite}
@keyframes sway--nick{0%,100%{transform:scale(1.35) translate(0,0)}
    50%{transform:scale(1.42) translate(-2%,-1.5%)}}
.scene--nick .wash{position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(80% 52% at 24% 22%,rgba(255,236,206,.85),transparent 68%),
      radial-gradient(76% 50% at 84% 34%,rgba(232,214,236,.7),transparent 66%),
      radial-gradient(90% 58% at 50% 92%,rgba(206,224,220,.7),transparent 70%),
      linear-gradient(180deg,rgba(255,250,242,.5),rgba(255,244,232,.24))}
.scene--nick .grain{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>")}
.scene--nick .motes span{position:absolute;border-radius:50%;background:rgba(255,252,244,.95);
    box-shadow:0 0 10px rgba(255,240,210,.9);pointer-events:none;
    animation:drift--nick linear infinite}
@keyframes drift--nick{0%{opacity:0;transform:translateY(18px)}
    20%{opacity:.85}100%{opacity:0;transform:translateY(-140px)}}
.scene--nick .top{position:absolute;left:0;right:0;top:11%;padding:0 10cqw;text-align:center}
.scene--nick .lede{font-size:clamp(10.5px,3.2cqw,12.5px);letter-spacing:.24em;text-indent:.24em;
    color:rgba(58,53,64,.5);
    opacity:0;animation:rise--nick 1.1s var(--ease) .5s forwards}
.scene--nick .q{margin-top:12px;font-size:clamp(15.5px,5.2cqw,20px);font-weight:600;
    line-height:1.7;letter-spacing:.06em;color:var(--ink);
    text-shadow:0 1px 16px rgba(255,248,238,.95);
    opacity:0;animation:rise--nick 1.1s var(--ease) .72s forwards}
.scene--nick .hang{position:absolute;left:50%;top:24%;translate:-50% 0;
    display:flex;flex-direction:column;align-items:center;
    transform-origin:50% 0;animation:hangsway--nick 6.5s ease-in-out infinite}
@keyframes hangsway--nick{0%,100%{rotate:-1.1deg}50%{rotate:1.1deg}}
.scene--nick .string{width:1.6px;height:min(9cqh,64px);
    background:linear-gradient(to bottom,rgba(58,53,64,.1),rgba(58,53,64,.42));
    opacity:0;animation:rise--nick 1s var(--ease) .9s forwards}
.scene--nick .tag{position:relative;width:min(72cqw,282px);
    background:linear-gradient(168deg,#FEFAF3,#F3E7D6);
    border-radius:20px;padding:30px 26px 26px;
    box-shadow:0 18px 40px rgba(96,68,52,.24),0 0 0 1.2px rgba(255,255,255,.85) inset;
    opacity:0;animation:rise--nick 1.1s var(--ease) 1s forwards}
.scene--nick .tag::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
    opacity:.2;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23t)' opacity='.6'/></svg>")}
.scene--nick .hole{position:absolute;left:50%;top:13px;translate:-50% 0;
    width:15px;height:15px;border-radius:50%;background:#EDDFCC;
    box-shadow:0 1px 2px rgba(96,68,52,.35) inset,0 1px 0 rgba(255,255,255,.9)}
.scene--nick .tag .label{text-align:center;font-size:clamp(9.5px,2.9cqw,11px);
    letter-spacing:.26em;text-indent:.26em;color:rgba(58,53,64,.42);margin-bottom:15px}
.scene--nick .field{position:relative}
.scene--nick .field input{width:100%;background:transparent;border:none;outline:none;
    font-family:inherit;font-size:clamp(16px,5cqw,19px);font-weight:500;
    letter-spacing:.16em;text-align:center;color:var(--ink);
    padding:6px 4px 12px;caret-color:var(--peach);
    user-select:text;-webkit-user-select:text}
.scene--nick .field input::placeholder{color:rgba(58,53,64,.26);letter-spacing:.1em;font-weight:400;font-size:.82em}
.scene--nick .line{height:1.6px;border-radius:2px;background:rgba(58,53,64,.2);position:relative}
.scene--nick .line::after{content:"";position:absolute;left:50%;right:50%;top:0;bottom:0;border-radius:2px;
    background:linear-gradient(90deg,rgba(232,166,127,.3),var(--peach),rgba(232,166,127,.3));
    transition:left .5s var(--ease),right .5s var(--ease)}
.scene--nick .field.on .line::after{left:0;right:0}
.scene--nick .note{margin-top:14px;text-align:center;font-size:clamp(9.5px,2.9cqw,11px);
    line-height:1.9;letter-spacing:.08em;color:rgba(58,53,64,.42)}
.scene--nick .go{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 8%);translate:-50% 0;font-family:inherit;cursor:pointer;white-space:nowrap;font-size:clamp(13.5px,4.1cqw,15px);font-weight:600;letter-spacing:.3em;text-indent:.3em;padding:15px 42px;opacity:0;animation:rise--nick 1.1s var(--ease) 1.3s forwards;transition:transform .22s var(--ease)}
@keyframes rise--nick{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.scene--nick.is-leaving .top,
.scene--nick.is-leaving .hang,
.scene--nick.is-leaving .go{opacity:0;transition:opacity .7s var(--ease)}
.scene--nick.is-leaving .bg{transform:scale(1.5);filter:blur(64px) saturate(.6) brightness(1.6);
    transition:transform 1.2s var(--ease),filter 1.2s var(--ease)}

/* ===== result（來源：08_結果_夢1.html） ===== */
.scene--result{--paper:#FCF7EC;}
.scene--result .bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
      object-fit:cover;object-position:var(--bg-x,50%) 44%;transform:scale(var(--bg-scale,1))}
.scene--result .grain{position:absolute;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:multiply;z-index:1;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>")}
.scene--result .scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;z-index:3;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
.scene--result .scroll::-webkit-scrollbar{display:none}
.scene--result .paper{position:relative;isolation:isolate}
.scene--result .sheet{position:absolute;inset:0;background:var(--paper);z-index:-1;
    filter:url(#torn) drop-shadow(0 9px 16px rgba(92,64,48,.3))}
.scene--result .sheet.s2{filter:url(#torn2) drop-shadow(0 9px 16px rgba(92,64,48,.3))}
.scene--result .sheet.s3{filter:url(#torn3) drop-shadow(0 8px 14px rgba(92,64,48,.28))}
.scene--result .sheet::after{content:"";position:absolute;inset:0;opacity:.19;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23p)' opacity='.6'/></svg>")}
.scene--result .tape{position:absolute;width:52px;height:16px;border-radius:2px;z-index:4;
    background:linear-gradient(100deg,rgba(242,218,178,.78),rgba(230,198,152,.62));
    box-shadow:0 1px 3px rgba(92,64,48,.22)}
.scene--result .tape.a{top:-7px;left:13px;rotate:-8deg}
.scene--result .tape.b{top:-7px;right:15px;rotate:7deg}
.scene--result .hero{min-height:calc(100% - 96px);display:flex;flex-direction:column;
    padding:calc(env(safe-area-inset-top) + 34px) 7cqw 34px}
.scene--result .topscrim{position:fixed;left:0;right:0;top:0;height:20cqh;pointer-events:none;z-index:2;
    background:linear-gradient(to bottom,rgba(34,22,30,.17),rgba(34,22,30,.06) 55%,rgba(34,22,30,0))}
.scene--result .mark{text-align:center;font-size:clamp(9.5px,2.9cqw,11px);font-weight:500;
    letter-spacing:.34em;text-indent:.34em;color:rgba(255,252,247,.96);
    text-shadow:0 1px 3px rgba(40,26,34,.55),0 2px 14px rgba(40,26,34,.5);
    opacity:0;animation:rise--result 1.1s var(--ease) .35s forwards}
.scene--result .cards{display:flex;flex-direction:column}
.scene--result .cards.top{margin-top:22px;margin-bottom:auto}
.scene--result .cards.bottom{margin-top:auto}
.scene--result .namecard{width:78%;align-self:flex-start;padding:17px 18px 19px;rotate:-2deg;z-index:2;
    opacity:0;animation:rise--result 1.1s var(--ease) .68s forwards}
.scene--result .quotecard{width:85%;align-self:flex-end;margin-top:-6px;padding:19px 18px 21px;
    rotate:1.5deg;z-index:1;
    opacity:0;animation:rise--result 1.1s var(--ease) .9s forwards}
.scene--result .kicker{text-align:center;font-size:clamp(9px,2.7cqw,10.5px);
    letter-spacing:.26em;text-indent:.26em;color:rgba(58,53,64,.46)}
.scene--result .dream{margin-top:8px;text-align:center;font-size:clamp(19px,6.3cqw,25px);
    font-weight:600;letter-spacing:.06em;line-height:1.45;color:var(--ink)}
.scene--result .quote{text-align:center;font-size:clamp(12.5px,3.9cqw,14.5px);
    line-height:1.95;letter-spacing:.045em;color:rgba(58,53,64,.86)}
.scene--result .more{padding:0 7cqw calc(env(safe-area-inset-bottom) + 44px);
    display:flex;flex-direction:column;gap:26px}
.scene--result .strip{width:92%;align-self:center;padding:23px 20px;rotate:.9deg}
.scene--result .strip p{text-align:center;font-size:clamp(12.5px,3.9cqw,14.5px);
    line-height:2.1;letter-spacing:.045em;color:rgba(58,53,64,.84)}
.scene--result .gift{padding:20px 20px 22px;rotate:-1.1deg;display:flex;align-items:center;gap:14px}
.scene--result .gift img{width:41%;max-width:142px;height:auto;flex:none;rotate:-4deg;
    filter:drop-shadow(3px 7px 1.5px rgba(96,68,52,.34))
           drop-shadow(1px 2px 0 rgba(96,68,52,.2))}
.scene--result .gift .g{min-width:0}
.scene--result .gift .g b{display:block;font-size:clamp(9px,2.7cqw,10.5px);font-weight:600;
    letter-spacing:.26em;text-indent:.26em;color:rgba(58,53,64,.46);margin-bottom:8px}
.scene--result .gift .g p{font-size:clamp(11.5px,3.5cqw,13px);line-height:1.9;
    letter-spacing:.04em;color:rgba(58,53,64,.84)}
.scene--result .unlock{padding:26px 22px 24px;rotate:.6deg}
.scene--result .hook{text-align:center;font-size:clamp(14px,4.5cqw,17px);font-weight:600;
    letter-spacing:.06em;color:var(--ink)}
.scene--result .why{margin-top:11px;text-align:center;font-size:clamp(11px,3.3cqw,12.5px);
    line-height:1.95;letter-spacing:.05em;color:rgba(58,53,64,.62)}
.scene--result .form{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.scene--result .pfield{position:relative;isolation:isolate;display:block;rotate:.5deg}
.scene--result .pfield .bs{position:absolute;inset:0;z-index:-1;border-radius:14px;background:#FFFDF8;
    border:2px solid rgba(58,53,64,.3);
    filter:url(#torn2) drop-shadow(0 4px 7px rgba(96,68,52,.22));
    transition:border-color .25s var(--ease)}
.scene--result .pfield:focus-within .bs{border-color:rgba(214,140,86,.85)}
.scene--result .form input{width:100%;background:transparent;border:none;outline:none;font-family:inherit;
    font-size:clamp(12.5px,3.7cqw,14px);letter-spacing:.06em;text-align:center;
    color:var(--ink);padding:14px 10px;user-select:text;-webkit-user-select:text}
.scene--result .form input::placeholder{color:rgba(58,53,64,.34)}
.scene--result .err{display:none;text-align:center;font-size:clamp(10px,3cqw,11.5px);
    letter-spacing:.04em;color:#B5674A;margin-top:-2px}
.scene--result .err.on{display:block}
.scene--result .pfield.shake{animation:shake--result .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake--result{
    0%,100%{transform:translateX(0)}
    18%{transform:translateX(-7px)}38%{transform:translateX(6px)}
    58%{transform:translateX(-4px)}78%{transform:translateX(3px)}
  }
.scene--result .trust{margin-top:11px;text-align:center;font-size:clamp(9px,2.7cqw,10.5px);
    line-height:1.85;color:rgba(58,53,64,.44)}
.scene--result .recipe{display:none}
.scene--result .unlock.open .form,
.scene--result .unlock.open .why{display:none}
.scene--result .unlock.open .recipe{display:block;animation:rise--result .8s var(--ease) forwards}
.scene--result .rt{text-align:center;font-size:clamp(10.5px,3.2cqw,12px);letter-spacing:.16em;
    color:rgba(58,53,64,.56);margin:16px 0 15px}
.scene--result .row{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.scene--result .row s{text-decoration:none;flex:none;width:4.9em;font-size:clamp(10px,3.1cqw,11.5px);
    color:rgba(58,53,64,.78)}
.scene--result .row .track{flex:1;height:15px;position:relative}
.scene--result .row .track i{position:absolute;left:0;top:0;bottom:0;width:0;
    filter:url(#torn3) drop-shadow(0 3px 4px rgba(96,68,52,.26));
    transition:width 1.1s var(--ease)}
.scene--result .row u{text-decoration:none;flex:none;width:2.7em;text-align:right;
    font-size:clamp(9.5px,3cqw,11px);color:rgba(58,53,64,.6)}
.scene--result .rnote{position:relative;isolation:isolate;margin-top:18px;padding:15px 14px;rotate:-1.4deg}
.scene--result .rnote .sheet{background:#FBF1DC}
.scene--result .rline{text-align:center;font-size:clamp(11.5px,3.5cqw,13px);
    line-height:1.95;color:rgba(58,53,64,.86)}
.scene--result .acts{display:flex;flex-direction:column;gap:13px;margin-top:2px}
@keyframes rise--result{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.scene--result .shareveil{position:fixed;inset:0;z-index:60;display:none;
    align-items:center;justify-content:center;padding:22px 5cqw;
    background:rgba(46,32,30,.62);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.scene--result .shareveil.on{display:flex;animation:fadein--result .35s var(--ease)}
@keyframes fadein--result{from{opacity:0}to{opacity:1}}
.scene--result .sharebox{width:100%;max-width:min(84cqw,330px);display:flex;flex-direction:column;gap:16px;
    animation:pop--result .45s var(--ease)}
@keyframes pop--result{from{opacity:0;transform:translateY(20px) scale(.96)}
    to{opacity:1;transform:none}}
.scene--result .polaroid{background:#FDFAF4;padding:11px 11px 34px;rotate:-1.6deg;
    box-shadow:0 20px 40px rgba(30,18,16,.5)}
.scene--result .shot{position:relative;aspect-ratio:9/16;overflow:hidden;background:#DFCFC0}
.scene--result .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--bg-x,50%) 44%;transform:scale(var(--bg-scale-wide, var(--bg-scale,1)))}
.scene--result .shotgrain{position:absolute;inset:0;opacity:.13;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n2)' opacity='.55'/></svg>")}
.scene--result .smark{position:absolute;top:9px;left:0;right:0;text-align:center;
    font-size:7.5px;letter-spacing:.3em;text-indent:.3em;color:rgba(252,247,240,.9);
    text-shadow:0 1px 6px rgba(20,14,22,.8)}
.scene--result .scards{position:absolute;left:7%;right:7%;bottom:15%;display:flex;flex-direction:column}
.scene--result .sname{width:80%;align-self:flex-start;padding:9px 10px 10px;rotate:-2deg;z-index:2}
.scene--result .squote{width:88%;align-self:flex-end;margin-top:-4px;padding:10px 10px;rotate:1.5deg;z-index:1}
.scene--result .skicker{text-align:center;font-size:6.5px;letter-spacing:.24em;color:rgba(58,53,64,.5)}
.scene--result .sdream{margin-top:4px;text-align:center;font-size:14px;font-weight:600;
    letter-spacing:.05em;color:var(--ink)}
.scene--result .squote p{text-align:center;font-size:8.5px;line-height:1.9;color:rgba(58,53,64,.86)}
.scene--result .sfoot{position:absolute;bottom:10px;left:0;right:0;text-align:center;
    font-size:7.5px;letter-spacing:.24em;color:rgba(252,247,240,.88);
    text-shadow:0 1px 6px rgba(20,14,22,.8)}
.scene--result .sharebtns{display:flex;flex-direction:column;gap:11px}

/* ---------- 寬比例舞台的背景裁切 ---------- */
/* 手機佔滿寬度後，比例最寬會到 0.562（iPhone SE）。object-fit:cover 在這個比例是靠
 * 寬度縮放，於是左右會看到更多原圖 —— 畫紙的邊就露出來了。夢3／夢4／夢5／夢6 四型
 * 因此另有「寬版」scale，由 app.js 一併寫進 --bg-scale-wide（夢1／夢2 不需要：
 * 夢1 目前的 1.12 已經夠，夢2 的原圖本來就沒有紙邊）。
 *
 * 用容器查詢而不是 @media：媒體查詢看的是「視窗」比例，桌機視窗是橫的（1.6），
 * 會誤判成寬比例，但那時舞台其實是 0.4615，根本不需要補。容器查詢看的是舞台本身。 */
@container (min-aspect-ratio: 1 / 2){
  .scene--result .bg{transform:scale(var(--bg-scale-wide, var(--bg-scale,1)))}
}

/* ---------- 分享降級的提示行 ---------- */
/* 分享走到哪一層要讓使用者知道，否則「按了傳給朋友卻跳出下載」會像壞掉 */
.scene--result .sharenote{display:none;font-size:11px;line-height:1.75;text-align:center;
  letter-spacing:.02em;color:rgba(252,247,240,.82);text-shadow:0 1px 4px rgba(20,14,22,.55);
  padding:0 6px}
.scene--result .sharenote.on{display:block}
/* .btn 自己是 flex，[hidden] 的 display:none 會被蓋掉，要明確寫 */
.scene--result .sharebtns button[hidden]{display:none}

/* ---------- 分享面板要塞得進舞台 ---------- */
/* 拍立得的高度完全由寬度決定（.shot 固定 aspect-ratio:9/16），而寬度只看 84cqw／330px
 * 兩個上限，沒有人管高度。iPhone 13 的 Safari 舞台只有 659px，整盒卻要 745px：
 * 上緣被切掉 23px，「先不要」整顆掉到畫面外（點背景還關得掉，但按鈕看不到）。
 *
 * 所以寬度再加一個「從剩下的高度反推」的上限：
 *   可用高度 = 100cqh − 面板留白 44 − 間距 16 − 按鈕區 165 − 拍立得上下留白 45
 *   .shot 寬度 = 可用高度 × 9/16，再加回拍立得左右留白 22
 * 收整個 .sharebox 而不是只收拍立得：照片與按鈕同寬是原本的構成，只縮照片會變成
 * 「小照片配大按鈕」。240px 寬的按鈕還是好按。
 * iPhone 13 算出 240px（原本 330px），桌機舞台 900px 高算出 375px，仍由 330px 決定，
 * 桌機版面完全不變。
 *
 * max(210px, …) 是下限：手機橫置時舞台只剩 320px 高，算式會給出 49px 這種按不到的寬度。
 * 寧可讓面板超出去用捲動解決，也不要縮到不能按。舞台高於 606px（所有手機直式都是）
 * 算式本來就大於 210px，下限不會生效。 */
.scene--result .sharebox{
  max-width:min(84cqw, 330px, max(210px, calc((100cqh - 272px) * 9 / 16 + 22px)))}

/* 算式擋不住的情況還是有：橫置時舞台更矮。讓面板可以捲當保險。
 * 置中改用 margin-block:auto 而不是 align-items:center —— flex 置中的盒子一旦溢出，
 * 上緣那段是捲不回來的。 */
.scene--result .shareveil{align-items:flex-start;overflow-y:auto;overscroll-behavior:contain}
.scene--result .sharebox{margin-block:auto}

/* 結果頁的 .scroll 是內層捲動容器，iOS 在它捲到底之後還會橡皮筋回彈，
 * 回彈露出的那一段有機會畫成 body 的 --surround 深色（html 上的 overscroll-behavior
 * 管不到內層捲動容器）。contain 讓回彈停在容器內，也順便阻止捲動鏈傳到頁面。 */
.scene--result .scroll{overscroll-behavior:contain}

/* ---------- 拖曳中不要讓背景的模糊做過渡 ---------- */
/* 三個拖曳場景的背景都有 transition（q1 .5s、q3 .45s、q5 .18s）。拖曳時每個
 * pointermove 都會把這個過渡重新指定一次目標，於是模糊在放手之後還要繼續算半秒，
 * 而且視覺上落後手指半秒 —— 那本身就會被感知成「拖不動、黏黏的」。
 *
 * 拖曳中關掉過渡（值已經是量化後的目標，本來就不需要補間），放手時才恢復：
 * app.js 在放手的同時把 --vq／--eq／--sq 寫成精確值，過渡負責把最後那一小段
 * 從階梯位置平滑收到準確的模糊量。 */
.scene--q1.is-dragging .bg,
.scene--q3.is-dragging .bg,
.scene--q5.is-dragging .bg{transition:none}

/* 蜜罐欄位：真人看不到也 tab 不到，機器人填了後端就當它是機器人。
 * 不用 display:none —— 有些爬蟲會跳過看不見的欄位，移出畫面比較有效。 */
.scene--result .botfield{position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;opacity:0;pointer-events:none}