/* 塔羅占卜：版面與動態 */
  :root {
    --navy: #0a1430;
    --gold: #d1b778;
    --gold-light: #efdfb4;
    --text: #f1eee6;
    --step--1: 15px;
    --step-0: 17px;
    --step-1: 24px;
    --step-2: 33px;
    --step-3: 44px;
    --t-in: 1s;
    --t-hover: .25s;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { margin: 0; height: 100%; }
  body {
    background: var(--navy);
    color: var(--text);
    font-family: "PingFang TC", "Noto Sans TC", -apple-system, sans-serif;
    line-height: 1.8;
    overflow: hidden;
    touch-action: pinch-zoom;
  }
  #orb {
    position: fixed; inset: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity 2s ease;
  }
  #orb.ready { opacity: 1; }
  /* 移軸鏡效果：畫面上下約 10vh 漸進模糊，越靠邊越糊；兩層疊出由淺到深的散景 */
  .tilt { position: fixed; left: 0; right: 0; pointer-events: none; }
  .tilt-top { top: 0; }
  .tilt-bottom { bottom: 0; }
  .tilt.soft { height: 20vh; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .tilt.deep { height: 12vh; backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); }
  .tilt-top { -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
  .tilt-bottom { -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent); }

  main {
    position: relative; z-index: 1;
    min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 24px 16px;
  }
  .site-name {
    position: fixed; top: 28px; left: 0; right: 0; margin: 0; text-align: center;
    font-size: var(--step--1); letter-spacing: .3em; color: var(--gold);
  }
  h1 {
    margin: 0 0 16px;
    font-size: clamp(24px, 4.3vmin, var(--step-3)); font-weight: 300; letter-spacing: .04em; line-height: 1.4;
    white-space: nowrap;   /* 大小跟著水珠縮放，整句落在水珠中間的透明區 */
    text-shadow: 0 2px 24px rgba(5, 10, 30, .55);
  }
  .copy {
    margin: 0; font-size: var(--step-1); font-weight: 300; color: var(--gold-light);
    letter-spacing: .06em; text-shadow: 0 2px 18px rgba(5, 10, 30, .6);
  }
  .fade { opacity: 0; transform: translateY(8px); animation: fade-in var(--t-in) ease forwards; }
  .d1 { animation-delay: .9s; }
  .d2 { animation-delay: 1.5s; }
  .d3 { animation-delay: 2.1s; }
  .d4 { animation-delay: 2.7s; }
  @keyframes fade-in { to { opacity: 1; transform: none; } }

  .dock {
    position: fixed; z-index: 2; left: 0; right: 0;
    bottom: calc(6svh + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 10px;
  }
  /* 深色毛玻璃按鈕：半透明暗玻璃＋淺金字 */
  .btn-glass {
    position: relative;
    width: min(320px, calc(100vw - 32px)); height: 60px;
    border-radius: 999px;
    font: inherit; font-size: var(--step-1); font-weight: 400; letter-spacing: .12em;
    color: var(--gold);
    background-color: rgba(6, 11, 28, .62);
    background-image: linear-gradient(170deg,
      rgba(255,255,255,.14), rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 70%);
    border: 1px solid rgba(209, 183, 120, .35);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.35),
      inset 0 -10px 18px rgba(209,183,120,.10),
      0 0 0 1px rgba(5,10,30,.25),
      2px 8px 20px rgba(3,6,20,.35),
      4px 18px 40px rgba(3,6,20,.25);
    cursor: pointer;
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease, box-shadow var(--t-hover) ease, transform var(--t-hover) ease;
  }
  .btn-glass:hover {
    background-color: rgba(6, 11, 28, .78);
    color: var(--gold-light);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.45),
      inset 0 -10px 18px rgba(209,183,120,.16),
      0 0 0 1px rgba(5,10,30,.25),
      2px 10px 24px rgba(3,6,20,.4),
      4px 22px 48px rgba(3,6,20,.3);
  }
  .btn-glass:active { transform: translateY(0); }
  .btn-glass:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

  @media (orientation: portrait) {
    h1 { font-size: clamp(24px, 6.2vw, var(--step-3)); }
  }
  @media (max-width: 768px) {
    .copy { font-size: var(--step-0); }
    .site-name { top: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .fade { animation: none; opacity: 1; transform: none; }
    #orb { transition: none; }
  }
  /* ── 選主題頁 ── */
  .step { margin: 0 0 4px; font-size: var(--step--1); letter-spacing: .2em; color: var(--gold); }
  .topic h1 { font-size: clamp(24px, 4.3vmin, var(--step-2)); white-space: nowrap; margin: 0; }
  .btn-back {
    height: 44px; padding: 0 22px; border-radius: 999px;
    font: inherit; font-size: var(--step--1); letter-spacing: .12em; color: rgba(241,238,230,.75);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
  }
  .btn-back:hover { background: rgba(255,255,255,.12); color: var(--text); }
  main.topic { position: fixed; inset: 0; display: block; padding: 0; min-height: 0; }
  .head { position: absolute; left: 0; right: 0; text-align: center; transform: translateY(-50%); }
  .head.fade { transform: translateY(calc(-50% + 8px)); animation-name: fade-in-head; }
  @keyframes fade-in-head { to { opacity: 1; transform: translateY(-50%); } }

  /* ── 上下滑動選擇器：中間一個選項，上下兩個 30% 透明度 ── */
  .style-p .head { top: calc(50% - 31vmin - 44px); }
  .picker {
    position: absolute; left: 50%; top: calc(50% + 2vmin); width: min(520px, 90vw); height: 240px;
    transform: translate(-50%, -50%); overflow: hidden; outline: none;
    cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  }
  .picker.fade { transform: translate(-50%, calc(-50% + 8px)); animation-name: fade-in-p; }
  @keyframes fade-in-p { to { opacity: 1; transform: translate(-50%, -50%); } }
  .picker:active { cursor: grabbing; }
  .picker:focus-visible { outline: 1px solid rgba(209,183,120,.5); outline-offset: 6px; border-radius: 16px; }
  .picker-track { position: absolute; left: 0; right: 0; top: calc(50% - 40px); transition: transform 1s ease; }
  .picker-track.dragging { transition: none; }
  .opt { height: 80px; display: flex; align-items: center; justify-content: center; }
  /* 選項本身是玻璃膠囊按鈕；中間的全亮可點選確認，上下的 30% 透明度、點了會切換過去 */
  .opt span {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    height: 64px; min-width: 240px; padding: 0 32px; border-radius: 999px;
    font-size: var(--step-1); letter-spacing: .14em; color: var(--gold); white-space: nowrap;
    background-color: rgba(6, 11, 28, .55);
    background-image: linear-gradient(170deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 45%, rgba(255,255,255,0) 70%);
    border: 1px solid rgba(209, 183, 120, .35);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -10px 18px rgba(209,183,120,.10),
      0 0 0 1px rgba(5,10,30,.25), 2px 8px 20px rgba(3,6,20,.35), 4px 18px 40px rgba(3,6,20,.25);
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
  }
  .opt i { font-size: 1.1em; }
  .opt { opacity: 0; transform: scale(.8); transition: opacity 1s ease, transform 1s ease; }
  .opt.near { opacity: .3; cursor: pointer; }
  .opt.current { opacity: 1; transform: scale(1); cursor: pointer; }
  .opt.current span:hover { background-color: rgba(6, 11, 28, .78); color: var(--gold-light); }
  .opt.near:hover { opacity: .5; }
  .dock { gap: 14px; }
  /* 桌機：水珠右側的小圓點，提示有幾個選項，點了可以切換 */
  .dots {
    position: absolute; top: calc(50% + 2vmin); left: calc(50% + 31vmin + 36px);
    display: flex; flex-direction: column; gap: 6px; transform: translateY(-50%);
  }
  .dots.fade { transform: translateY(calc(-50% + 8px)); animation-name: fade-in-dots; }
  @keyframes fade-in-dots { to { opacity: 1; transform: translateY(-50%); } }
  .dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
    opacity: .3; transition: opacity 1s ease, transform 1s ease; }
  .dot:hover::before { opacity: .6; }
  /* 操作提示：桌機在水珠左側、手機在水珠下方；第一次切換後淡出 */
  .hint { position: absolute; margin: 0; font-size: var(--step--1); letter-spacing: .12em;
    color: rgba(209, 183, 120, .75); transition: opacity 1s ease; }
  .hint i { font-size: 26px; animation: hint-move 2.4s ease-in-out infinite; }
  @keyframes hint-move { 50% { transform: translateY(-6px); } }
  .hint.used { opacity: 0 !important; }
  .hint-desk { top: calc(50% + 2vmin); right: calc(50% + 31vmin + 36px); display: flex; flex-direction: column;
    align-items: center; gap: 6px; transform: translateY(-50%); }
  .hint-desk.fade { transform: translateY(calc(-50% + 8px)); animation-name: fade-in-dots; }
  .hint-touch { display: none; }
  .dot.on::before { opacity: 1; transform: scale(1.5); }
  .picked { position: fixed; left: 0; right: 0; top: 64px; margin: 0; text-align: center; font-size: var(--step--1);
    color: var(--gold); opacity: 0; transition: opacity .6s ease; }
  .picked.show { opacity: 1; }
  @media (orientation: portrait) {
    .style-p .head { top: calc(50% - 58vw); }
    .picker { height: 220px; }
    .picker-track { top: calc(50% - 36px); }
    .opt { height: 68px; }
    .picker-track { top: calc(50% - 34px); }
    .opt span { height: 56px; min-width: 200px; padding: 0 24px; font-size: var(--step-0); }
    .dots, .hint-desk { display: none; }
    .hint-touch { display: flex; align-items: center; justify-content: center; gap: 8px;
      left: 0; right: 0; top: calc(50% + 7px + 43vw + 20px); }
    .hint-touch i { font-size: 22px; }
  }
  /* 確認問題頁：問題放在水珠中間，時間一行、問題一行（太長時平衡換行） */
  .ask { position: absolute; left: 50%; top: calc(50% - 2vmin); width: min(62vmin, 90vw);
    transform: translate(-50%, -50%); text-align: center; }
  .ask.fade { transform: translate(-50%, calc(-50% + 8px)); animation-name: fade-in-p; }
  .ask h1 { margin: 0 0 16px; white-space: normal; text-wrap: balance; font-size: clamp(24px, 3.6vmin, var(--step-2)); }
  /* 桌機：整句接在一起、平衡成兩行；手機：時間一行、遇逗號再分行 */
  .ask h1 > span { display: inline; }
  .ask .w { display: inline-block; }
  .ask-note { margin: 0 auto; max-width: 17em; font-size: var(--step--1); line-height: 1.7; letter-spacing: .08em;
    color: rgba(241,238,230,.75); text-wrap: balance; }
  .ask-note > span { display: block; }
  .ask-note > span + span { margin-top: 8px; }
  @media (orientation: portrait) {
    .ask { top: calc(50% - 1vmin); width: 80vw; }
    .ask h1 > span { display: block; }
    .ask h1 { font-size: clamp(24px, 6.2vw, var(--step-2)); }
  }
  /* 洗牌：牌背在水珠裡繞著轉、彼此交錯；靠近水珠邊緣漸漸隱去 */
  .shuffle { position: absolute; left: 50%; top: calc(50% + 2vmin); width: 62vmin; height: 62vmin;
    transform: translate(-50%, -50%); pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%); }
  .shuffle .card { position: absolute; left: 50%; top: 50%; width: 13vmin; aspect-ratio: 449 / 744; margin: calc(-13vmin * 744 / 449 / 2) 0 0 -6.5vmin;
    border-radius: 8px; background: url('../cover.jpg') center / cover; border: 1px solid rgba(209,183,120,.4);
    box-shadow: 0 6px 18px rgba(3,6,20,.45); will-change: transform; }
  .shuffle-note { position: absolute; left: 0; right: 0; top: calc(50% + 2vmin + 31vmin + 20px); margin: 0; text-align: center;
    font-size: var(--step--1); letter-spacing: .12em; color: rgba(209, 183, 120, .75); }
  @media (orientation: portrait) {
    .shuffle { top: calc(50% + 7px); width: 86vw; height: 86vw; }
    .shuffle .card { width: 18vw; margin: calc(-18vw * 744 / 449 / 2) 0 0 -9vw; }
    .shuffle-note { top: calc(50% + 7px + 43vw + 24px); }
  }
  /* 抽牌：三張牌從那一疊滑出、橫排在水珠中間，逐張翻開 */
  .deal { position: absolute; left: 50%; top: calc(50% + 2vmin); width: 0; height: 0; pointer-events: none; }
  .deal-card { position: absolute; left: 0; top: 0; width: 15.6vmin; margin: -13vmin 0 0 -7.8vmin;
    perspective: 900px; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1), opacity .8s ease; }
  .deal-inner { position: relative; aspect-ratio: 449 / 744; transform-style: preserve-3d;
    transition: transform 1.1s cubic-bezier(.45, 0, .2, 1); }
  .deal-card.flipped .deal-inner { transform: rotateY(180deg); }
  .deal-face { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border: 1px solid rgba(209,183,120,.4); box-shadow: 0 8px 22px rgba(3,6,20,.45); background: center / cover; }
  .deal-face.back { background-image: url('../cover.jpg'); }
  .deal-face.front { transform: rotateY(180deg); background-color: #0a1430; }
  .deal-label { position: absolute; left: 50%; top: 100%; width: 12em; margin: 10px 0 0 -6em; text-align: center; line-height: 1.5;
    opacity: 0; transition: opacity 1s ease; }
  .deal-label b { display: block; font-weight: 400; font-size: var(--step--1); letter-spacing: .12em; color: var(--gold); }
  .deal-label span { display: block; font-size: var(--step-0); letter-spacing: .08em; color: var(--text); opacity: 0; transition: opacity 1s ease; }
  .deal-card.labelled .deal-label, .deal-card.flipped .deal-label span { opacity: 1; }
  @media (orientation: portrait) {
    .deal { top: calc(50% + 7px); }
    .deal-card { width: 22vw; margin: -18.2vw 0 0 -11vw; }
    .deal-label span { font-size: var(--step--1); }
  }
  /* 解讀：毛玻璃文字框從下方升起；三種版面 a 底部抽屜、b 浮動卡片、c 分欄 */
  .deal { transition: transform 1.6s cubic-bezier(.22, 1, .36, 1), opacity 1s ease; }
  .deal.reading-on .deal-label { opacity: 0 !important; }
  .reading { position: fixed; z-index: 3; display: flex; flex-direction: column;
    background: rgba(10, 18, 44, .5);
    background-image: linear-gradient(170deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(255,255,255,0) 70%);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.25), 0 -10px 40px rgba(3,6,20,.35);
    transform: translateY(110%); opacity: 0;
    transition: transform 1.4s cubic-bezier(.22, 1, .36, 1), opacity 1s ease; }
  .reading.show { transform: none; opacity: 1; }
  .reading-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    padding: 36px 32px 40px; }
  /* 捲軸：細細一條淡金色，沒有底軌，上下留白不貼框；滑過文字框時才稍微亮一點 */
  .reading-scroll::-webkit-scrollbar { width: 10px; }
  .reading-scroll::-webkit-scrollbar-track { background: transparent; margin: 32px 0; }
  .reading-scroll::-webkit-scrollbar-thumb { background: rgba(209,183,120,.16); border-radius: 999px;
    border: 4px solid transparent; background-clip: padding-box; }
  .reading:hover .reading-scroll::-webkit-scrollbar-thumb { background-color: rgba(209,183,120,.32); }
  .reading-scroll::-webkit-scrollbar-button { display: none; }
  @supports (-moz-appearance: none) {
    .reading-scroll { scrollbar-width: thin; scrollbar-color: rgba(209,183,120,.25) transparent; }
  }
  .reading-scroll > * { max-width: 44em; margin-left: auto; margin-right: auto; }
  .r-step { margin-bottom: 4px; font-size: var(--step--1); letter-spacing: .2em; color: var(--gold); text-align: center; }
  /* 問題每行最多 20 個字，只在詞與詞之間換行 */
  .r-q .w { display: inline-block; }
  .r-q { max-width: 20em !important; margin-top: 0; margin-bottom: 20px; font-size: var(--step-1); font-weight: 300; line-height: 1.5; text-align: center; text-wrap: balance; }
  .r-answer { margin-top: 0; margin-bottom: 36px; padding: 20px 0; border-top: 1px solid rgba(209,183,120,.25); border-bottom: 1px solid rgba(209,183,120,.25);
    font-size: var(--step-1); font-weight: 300; line-height: 1.7; color: var(--gold-light); text-align: center; text-wrap: pretty; }
  /* 每張牌放在自己那段解釋的左邊 */
  .r-sec { display: grid; grid-template-columns: calc(65vh * 449 / 744) 1fr; gap: 32px;   /* 桌機：牌高 65vh */ align-items: start; margin-bottom: 32px; }
  .r-card { width: 100%; aspect-ratio: 449 / 744; object-fit: cover; border-radius: 6px; border: 1px solid rgba(209,183,120,.4);
    display: block; box-shadow: 0 6px 16px rgba(3,6,20,.35); transition: opacity .4s ease; }
  .r-title { margin: 0 0 6px; font-size: var(--step--1); letter-spacing: .14em; color: var(--gold); }
  /* 解讀文字每行最多 20 個字：限制寬度 20em，只在詞與詞之間換行 */
  .reading .w { display: inline-block; }
  .reading-scroll > .r-answer { max-width: 20em; text-wrap: balance; }
  .r-lead, .r-detail { max-width: 20em; }
  .r-lead { margin: 0 0 6px; font-size: var(--step-0); line-height: 1.8; }
  .r-detail { margin: 0; font-size: var(--step--1); line-height: 1.8; color: rgba(241,238,230,.72); }
  .r-take { margin-top: 36px; padding: 20px 24px; border-radius: 16px; background: rgba(209,183,120,.08); border: 1px solid rgba(209,183,120,.22); }
  .r-take .r-lead { margin: 0; }
  .r-ai { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .r-ai .btn-glass { height: 52px; font-size: var(--step-0); }
  .r-ai-status { margin: 0; min-height: 1.8em; font-size: var(--step--1); color: var(--gold); }
  .r-ai-links { display: flex; gap: 20px; }
  .r-ai-links a { font-size: var(--step--1); letter-spacing: .1em; color: var(--text); text-underline-offset: 4px; }
  .r-share { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
  .r-share i { font-size: 18px; }
  .r-again { display: block; margin: 28px auto 0; }
  .layout-b .reading { left: 50%; top: 9vh; bottom: 5vh; width: min(900px, calc(100vw - 32px)); margin-left: calc(min(900px, calc(100vw - 32px)) / -2);
    border-radius: 28px; box-shadow: inset 0 1px 1px rgba(255,255,255,.25), 0 20px 60px rgba(3,6,20,.45); }
  /* B 版動態：文字框由下往上淡入；三張牌浮起後飛進框頂端的小圖位置 */
  .layout-b .reading { transform: translateY(56px); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1), opacity 1.2s ease; }
  .layout-b .reading.show { transform: none; }
  .layout-b .r-card { opacity: 0; }
  .layout-b .r-card.landed { opacity: 1; }
  .fly-card { position: absolute; transform-origin: 0 0; border-radius: 8px; background: center / cover;
    border: 1px solid rgba(209,183,120,.4); box-shadow: 0 8px 22px rgba(3,6,20,.45);
    transition: transform 1.3s cubic-bezier(.45, 0, .2, 1), box-shadow 1.3s ease; pointer-events: none; }
  .fly-clip { position: fixed; z-index: 4; left: 0; top: 0; width: 100vw; height: 100vh; overflow: hidden; pointer-events: none; }
  .fly-card.lift { box-shadow: 0 24px 50px rgba(3,6,20,.6); transition: transform 1.5s cubic-bezier(.22, 1, .36, 1), box-shadow 1.5s ease; }
  @media (orientation: portrait) {
    .reading-scroll { padding: 28px 20px 36px; }
    .layout-b .reading { left: 16px; right: 16px; width: auto; margin-left: 0; top: 64px; bottom: 16px; }
    /* 手機：牌在上、解釋在下；牌與上方題目同寬，文字靠左 */
    .r-sec { grid-template-columns: 1fr; gap: 18px; }
    .r-card { width: 100%; border-radius: 10px; }
  }
  /* 右上角音樂開關：小圓形玻璃按鈕 */
  .sound { position: fixed; z-index: 5; top: calc(18px + env(safe-area-inset-top)); right: calc(18px + env(safe-area-inset-right));
    width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    color: var(--gold); background: rgba(6, 11, 28, .45); border: 1px solid rgba(209, 183, 120, .3);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease; }
  .sound i { font-size: 20px; }
  .sound:hover { background-color: rgba(6, 11, 28, .7); color: var(--gold-light); }
  .sound[aria-pressed="false"] { color: rgba(209, 183, 120, .6); }
  .sound:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
  @media (max-width: 768px) { .sound { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); } }
  /* 首頁：大標與引言放在水珠中間 */
  .intro { position: absolute; left: 50%; top: calc(50% + 2vmin); transform: translate(-50%, -50%); text-align: center; }
  .intro.fade { transform: translate(-50%, calc(-50% + 8px)); animation-name: fade-in-p; }
  .topic .intro h1 { margin: 0 0 16px; font-size: clamp(24px, 4.3vmin, var(--step-3)); }
  @media (orientation: portrait) { .topic .intro h1 { font-size: clamp(24px, 6.2vw, var(--step-3)); } }
  /* 換頁：內容慢慢淡出、水珠縮小；換好內容後水珠放大到新頁的大小、內容再淡入 */
  #stage { transition: opacity .9s ease; }
  #stage.out { opacity: 0; transition-duration: .7s; }
  @media (prefers-reduced-motion: reduce) { .picker-track, .opt, .dot::before, #stage { transition: none; } .hint i { animation: none; } }