/* A Better Me — MBTI 漫畫互動區塊｜樣式
   這一份會整包搬進 maybeits.me 首頁，所以不要在這裡寫
   跟這個區塊無關的東西。 */
/* ⚠️ 這些變數原本掛在 :root。併進真站後首頁自己在 .page{} 裡也定義了
   --cream / --ink / --stone / --paper / --shadow 同名變數，而 .page 是這個
   區塊的祖先——就近取值的結果是區塊會拿到首頁的值，--paper 從半透明變成
   不透明、--stone 也換了色。收進區塊自己的作用域，兩邊才各拿各的。

   ⚠️ --stone-dark 目前是自我引用（等於無效），用到它的十幾處文字實際上
   繼承了 --ink。深色、對比足，所以維持現狀沒有改，但它並不是原本設計的值。 */
.mbti-comic-host {
      /* ── 真站 maybeits.me 的品牌色（src/app/globals.css 的莫蘭迪色）──
         名稱與數值都跟真站一致，之後併進去可以直接對應成
         Tailwind 的 bg-cream / text-ink / text-stone / border-beige…… */
      --cream:       #f5f0ea;   /* --morandi-cream        → bg-cream */
      --beige:       #e8ddd0;   /* --morandi-beige        → border-beige */
      --warm-beige:  #d9c9b8;   /* --morandi-warm-beige   → bg-warm-beige */
      --brown:       #b5a290;   /* --morandi-brown */
      --taupe:       #8b7d6b;   /* --morandi-taupe */
      --teal:        #7b9a9c;   /* --morandi-teal         → text-teal */
      --teal-deep:   #5a7a7c;   /* --morandi-teal-deep    → text-teal-deep */
      --soft-teal:   #a8bfbe;   /* --morandi-soft-teal    → border-soft-teal */
      --ink:         #4a4542;   /* --morandi-dark         → text-ink */
      --stone:       #8c8580;   /* --morandi-gray         → text-stone */

      /* ── 這一區自己的顏色（真站沒有，同事併版時要一起帶過去）── */
      --teal-dark:   #426a6c;   /* 小字用；真站的 teal-deep 在淺底上只有 4.3:1，不夠 */
      --stone-dark:  var(--stone-dark);   /* 同理，stone 在白底只有 4.2:1 */
      --paper:       rgba(255, 252, 247, 0.91);
      --gold:        #dbc07f;
      --rose:        #e4bbb3;
      --lavender:    #b9acbe;
      --shadow:      0 28px 74px rgba(70, 57, 47, 0.13);
      --soft-shadow: 0 16px 36px rgba(70, 57, 47, 0.08);
    }

    .mbti-comic-host, .mbti-comic-host * { box-sizing: border-box; }

    /* 原本這裡是預覽頁的 body。併進真站後 body 是整個首頁共用的，
       在這裡設 background / font-family 會把首頁其他區塊一起蓋掉
       （實測首頁的底色確實被這兩個光暈換掉了），所以全部收進區塊自己。

       外框保持全寬讓光暈鋪滿，內容則交給下面的 > * 對齊首頁容器。
       背景不帶 --cream：首頁底色本來就是同一個 #f5f0ea，留白處讓它透出來即可。 */
    .mbti-comic-host {
      display: block;
      color: var(--ink);
      background:
        radial-gradient(circle at 6% 15%, rgba(93, 131, 132, .13), transparent 29%),
        radial-gradient(circle at 92% 87%, rgba(228, 187, 179, .17), transparent 30%);
      font-family:
        "ChironGoRoundTC", "jf-openhuninn", ui-rounded,
        "Noto Sans TC", "PingFang TC", "Microsoft JhengHei",
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    /* ⚠️ 容器（內容寬度與上下節奏）不在這裡，在 homepage-v2.module.css 的 .shell 旁邊。
       原本預覽用的 <main class="page"> 外殼併版時被移除，要換成真站的容器；
       而真站的 .shell 在 680px 以下會從 40px 邊距縮成 30px、.section 也改成 60px，
       兩組數值必須一起改才不會對不齊，所以放在同一支檔案裡維護。 */

    .mbti-comic-host button { font: inherit; }

    /* ── 所有可以按的東西，共用同一套「按得到」的回饋 ─────────────
       手機沒有滑鼠，hover 那一套在手機上完全不會發生。
       使用者唯一能感覺到「我真的按到了」的，就是按下去的那一瞬間。
       原本 16 個可點元素裡有 13 個沒有按下狀態，等於在手機上完全沒回饋。

       用 :where() 包起來是刻意的：它的權重是 0，
       所以下面任何一個元件自己寫的 :hover / :active 都蓋得過它，
       不會變成互相打架的覆寫。 */
    .path-choice,
    .type-button,
    .version-card,
    .flip-button,
    .finish-button,
    .mix-cta,
    .back-link,
    .reset-button,
    .change-fork-button,
    .mix-mode-button,
    .same-type-button,
    .other-question-button,
    .question-button,
    .universe-question-button,
    .answer-button,
    .comic-source {
      /* 手機點下去不要出現系統的灰色方塊，我們自己畫回饋 */
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    :where(.path-choice,
    .type-button,
    .version-card,
    .flip-button,
    .finish-button,
    .mix-cta,
    .back-link,
    .reset-button,
    .change-fork-button,
    .mix-mode-button,
    .same-type-button,
    .other-question-button,
    .question-button,
    .universe-question-button,
    .answer-button,
    .comic-source):active {
      transform: scale(.97);
      transition-duration: 60ms;
    }

    /* 只有真的有滑鼠的裝置才給 hover，
       否則手機點完之後 hover 會「黏住」不退。 */
    @media (hover: hover) {
      :where(.path-choice,
    .type-button,
    .version-card,
    .flip-button,
    .finish-button,
    .mix-cta,
    .back-link,
    .reset-button,
    .change-fork-button,
    .mix-mode-button,
    .same-type-button,
    .other-question-button,
    .question-button,
    .universe-question-button,
    .answer-button,
    .comic-source):hover {
        cursor: pointer;
      }

      .change-fork-button:hover {
        color: var(--ink);
        text-decoration-color: var(--teal-deep);
      }

      .comic-source:hover {
        border-color: var(--teal-deep);
        box-shadow: 0 10px 24px rgba(70,57,47,.10);
        transform: translateY(-2px);
      }

      .mix-mode-button:hover {
        color: var(--ink);
        background: rgba(255,255,255,.72);
      }

      .reset-button:hover {
        color: var(--ink);
        text-decoration-color: var(--ink);
      }

      .mix-cta:hover {
        background: var(--teal-dark);
      }
    }

    .comic-source {
      transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
    }

    .change-fork-button {
      transition: color 150ms ease, text-decoration-color 150ms ease;
    }


    /* 對齊真站首頁的容器：
         <div className="mx-auto max-w-[68rem] px-5 sm:px-6">
       68rem = 1088px，左右 20px（sm 以上 24px）。
       上下用真站的段落節奏 py-14 / sm:py-18 / lg:py-24 = 56 / 72 / 96px。
       同事併版時，這個 .page 會被真站自己的容器取代，數值一樣就不會跑。 */
    .page {
      width: 100%;
      max-width: 1088px;
      margin: 0 auto;
      padding: 56px 20px;
    }

    @media (min-width: 640px) {
      .page { padding: 72px 24px; }
    }

    @media (min-width: 1024px) {
      .page { padding: 96px 24px; }
    }

    /* 規格對齊首頁的 .eyebrow（1.15rem / 800 / .08em，前綴線 38px），
       否則同一頁上兩種小標看起來像兩套設計。 */
    /* 「玩看看」：三個圈圈輪流彈一下，提示下面兩張卡是可以按的。
       顏色沿用左側 MBTI 四色塊的前三色（--soft-teal / --rose / --gold），
       同一個區塊裡的色票才不會各講各的。 */
    .play-hint {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 0 0 15px;
    }

    .play-bubble {
      display: grid;
      place-items: center;
      /* 圈縮小、字級不變，所以字幾乎撐滿圓——刻意的，看起來比較像貼紙 */
      width: 44px;
      height: 44px;
      border-radius: 999px;
      color: #3d3835;
      font-size: 19px;
      font-weight: 900;
      letter-spacing: 0;
      box-shadow: 0 6px 14px rgba(70,57,47,.13);
      animation: playBounce 1.7s ease-in-out infinite;
    }

    /* 五顆各一色、不重複；左右兩顆是指向下面卡片的箭頭。
       延遲依序錯開，看起來像一波由左往右的彈跳。 */
    .play-bubble:nth-child(1) { background: var(--lavender); }
    .play-bubble:nth-child(2) { background: var(--soft-teal);  animation-delay: .13s; }
    .play-bubble:nth-child(3) { background: var(--rose);       animation-delay: .26s; }
    .play-bubble:nth-child(4) { background: var(--gold);       animation-delay: .39s; }
    .play-bubble:nth-child(5) { background: var(--warm-beige); animation-delay: .52s; }

    /* 左右兩顆是指向下方卡片的箭頭。
       ⚠️ 用「朝下的字符」，不要用「➜ 加 rotate」，也不要用 SVG 遮罩：
          旋轉會把字符墨跡在行盒裡的偏差轉成看得見的位移，補正值還跟字體綁定，
          追不完（2026-08-24 為此改了三輪，補在 Y 軸還一度把它推成偏上）。
          直接用朝下的字符就沒有旋轉，垂直對齊跟旁邊「玩玩看」三個字走同一套
          grid 置中，那三個字是正的，這個自然也正。
       \FE0E 是文字變體選擇器，沒有它 ⬇ 在部分裝置會被畫成彩色 emoji。 */
    .play-arrow {
      font-size: 0;   /* 藏掉原本的 ➜ text node */
    }
    .play-arrow::before {
      content: "\2B07\FE0E";
      display: block;
      font-size: 21px;
      line-height: 1;
      /* ⬇ 的墨跡在行盒裡比中文字更靠上，看起來就是沒對準圓心。
         補正值以「線上實測」為準：截整條 play-hint、逐顆量墨跡重心，
         箭頭與「玩」「看」的落差先是 4.5px，補 0.21em 後仍差 2.4px，
         合計 0.32em 才齊平。
         ⚠️ 不要拿本機量到的值來調：本機字體與線上不同（線上有 justfont），
            同樣補 0.21em 在本機只剩 0.5px 落差、線上卻還有 2.4px。
         ⚠️ 這裡沒有 rotate，所以 translate 就是單純的垂直位移，不會被轉向。 */
      translate: 0 0.32em;
    }

    @keyframes playBounce {
      0%, 62%, 100% { transform: translateY(0); }
      31%           { transform: translateY(-8px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .play-bubble { animation: none; }
    }

    .brandline {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 15px;
      color: var(--teal-deep);
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .brandline::before {
      width: 38px;
      height: 1px;
      content: "";
      background: var(--teal-deep);
      opacity: .65;
    }

    .experience {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: 40px;
      min-height: 760px;
      /* start 不會把兩欄拉齊，內容多的那欄自己長長，另一欄停在 760，
         底邊就對不齊。stretch 才會兩欄一樣高。 */
      align-items: stretch;
    }

    /* LEFT: the only permanent visual */
    .machine {
      position: relative;
      display: flex;
      min-height: 760px;
      padding: 48px;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.84);
      border-radius: 42px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.34), transparent 45%),
        #eee5da;
      box-shadow: var(--shadow);
      isolation: isolate;
    }

    .machine::before,
    .machine::after {
      position: absolute;
      z-index: -1;
      content: "";
      border-radius: 999px;
      filter: blur(3px);
    }

    .machine::before {
      width: 310px;
      height: 310px;
      left: -130px;
      top: -130px;
      background: rgba(171,193,191,.46);
    }

    .machine::after {
      width: 280px;
      height: 280px;
      right: -120px;
      bottom: -120px;
      background: rgba(228,187,179,.31);
    }

    .machine-core {
      width: min(100%, 570px);
    }

    .machine-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 28px;
    }

    /* 字級與字重對齊 brandline（也就是「從四個字母，慢慢看懂自己」那一行），
       同一頁上的小標才是同一套系統。950 在這個字級下太重，一起降到 800。 */
    .machine-kicker {
      margin: 0 0 7px;
      color: var(--teal-dark);
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .machine-title {
      margin: 0;
      font-size: clamp(18px, 2.25vw, 36px);
      line-height: 1.3;
      letter-spacing: -.035em;
    }

    .status-pill {
      flex: 0 0 auto;
      padding: 9px 12px;
      border: 1px solid rgba(71,66,62,.22);
      border-radius: 999px;
      background: rgba(255,255,255,.58);
      color: var(--stone-dark);
      font-size: 0.72rem;
      font-weight: 900;
    }

    .letters {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      padding: 6px 22px 14px;
      perspective: 1100px;
    }

    .letter-card {
      min-height: 196px;
      perspective: 850px;
      transition: transform 220ms ease, filter 220ms ease;
    }

    .letter-card.is-current {
      z-index: 4;
      transform: translateY(-7px) scale(1.025);
      filter: saturate(1.06);
    }

    .letter-inner {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 196px;
      transform-style: preserve-3d;
      transition: transform 620ms cubic-bezier(.2,.78,.2,1);
    }

    .letter-card.is-flipped .letter-inner {
      transform: rotateY(180deg);
    }

    .letter-face {
      position: absolute;
      inset: 0;
      display: flex;
      padding: 24px 18px 18px;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(71,66,62,.86);
      border-radius: 34px;
      backface-visibility: hidden;
      box-shadow: 6px 8px 0 rgba(74,69,66,.09);
    }

    .letter-card.is-current .letter-face {
      border-color: var(--teal-dark);
      box-shadow:
        0 0 0 6px rgba(255,255,255,.65),
        12px 16px 0 rgba(71,66,62,.11);
    }

    .letter-glyph {
      font-size: clamp(42px, 6.8vw, 94px);
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.08em;
    }

    .dimension-tag {
      position: absolute;
      top: 15px;
      left: 15px;
      display: inline-flex;
      min-height: 31px;
      padding: 5px 8px 5px 6px;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(71,66,62,.19);
      border-radius: 999px;
      background: rgba(255,255,255,.62);
      box-shadow: 0 7px 18px rgba(71,66,62,.06);
      white-space: nowrap;
    }

    .dimension-icon {
      display: grid;
      width: 20px;
      height: 20px;
      place-items: center;
      border-radius: 999px;
      color: var(--teal-dark);
      background: rgba(255,255,255,.70);
    }

    .dimension-icon svg {
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .dimension-label {
      font-size: 0.72rem;
      font-weight: 950;
      letter-spacing: .05em;
    }

    .dimension-pair {
      padding-left: 6px;
      border-left: 1px solid rgba(71,66,62,.18);
      color: rgba(71,66,62,.82);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: .04em;
    }

    .letter-meaning {
      position: absolute;
      right: 14px;
      bottom: 13px;
      left: 14px;
      color: rgba(71,66,62,1);
      font-size: 0.72rem;
      font-weight: 900;
      line-height: 1.25;
      text-align: center;
      letter-spacing: .03em;
    }

    .letter-card:nth-child(1) .letter-face { background: var(--soft-teal); }
    .letter-card:nth-child(2) .letter-face { background: var(--rose); }
    .letter-card:nth-child(3) .letter-face { background: var(--gold); }
    .letter-card:nth-child(4) .letter-face { background: var(--lavender); }

    .letter-back {
      transform: rotateY(180deg) !important;
    }

    .letter-card:nth-child(1) .letter-back { background: var(--soft-teal); }
    .letter-card:nth-child(2) .letter-back { background: var(--rose); }
    .letter-card:nth-child(3) .letter-back { background: var(--gold); }
    .letter-card:nth-child(4) .letter-back { background: var(--lavender); }

    .machine-message {
      position: relative;
      margin: 24px 22px 0;
      padding: 20px 22px 20px 54px;
      border: 1px solid rgba(71,66,62,.17);
      border-radius: 20px;
      background: rgba(255,255,255,.57);
      box-shadow: var(--soft-shadow);
      color: var(--stone-dark);
      font-size: 15px;
      font-weight: 750;
      line-height: 1.7;
    }

    .machine-message::before {
      position: absolute;
      left: 19px;
      top: 15px;
      content: "⌁";
      color: var(--teal-deep);
      font-size: 27px;
      font-weight: 900;
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .typewriter-title {
      /* 標題固定一行。min-height 留一個行高，字還沒打完時版面才不會跳。 */
      min-height: 1.12em;
      white-space: nowrap;
    }

    .typewriter-visible {
      white-space: nowrap;
    }

    .type-caret {
      display: inline-block;
      width: .08em;
      height: .88em;
      margin-left: .08em;
      border-radius: 999px;
      vertical-align: -.05em;
      background: currentColor;
      opacity: 0;
    }

    .typewriter-title.is-typing .type-caret {
      opacity: .78;
      animation: caretBlink .78s steps(1, end) infinite;
    }

    .typewriter-title.is-finished .type-caret {
      opacity: 0;
      transition: opacity 380ms ease;
    }

    @keyframes caretBlink {
      0%, 48% { opacity: .78; }
      49%, 100% { opacity: 0; }
    }

    .mobile-machine,
    .mobile-machine-slot {
      display: none;
    }

    /* RIGHT: only one step is visible at a time */
    .flow {
      position: relative;
      min-height: 760px;
      padding: clamp(30px, 5vw, 72px);
      border: 1px solid rgba(255,255,255,.84);
      border-radius: 42px;
      background: rgba(249,246,241,.82);
      box-shadow: var(--shadow);
    }

    .flow-stage {
      display: none;
      animation: stageIn 360ms cubic-bezier(.2,.8,.2,1) both;
    }

    .flow-stage.active { display: block; }

    @keyframes stageIn {
      from { opacity: 0; transform: translateY(12px); filter: blur(2px); }
      to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    /* 字級與字重對齊 brandline（也就是「從四個字母，慢慢看懂自己」那一行），
       同一頁上的小標才是同一套系統。950 在這個字級下太重，一起降到 800。 */
    .eyebrow {
      margin: 0 0 15px;
      color: var(--teal-dark);
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: .08em;
    }

    .flow .typewriter-title,
    .flow h2 {
      margin: 0;
      letter-spacing: -.055em;
    }

    /* 打字機標題原本是 h1；為了讓整頁只有一個 h1（首頁的 hero 才是 h1），
       它已改成 h2，字級改綁 .typewriter-title 這個 class，外觀維持不變。
       class 選擇器的權重高於下方的 .flow h2，所以不會被蓋掉。 */
    .flow .typewriter-title {
      max-width: 700px;
      /* 標題不換行，字級就必須跟著「這一欄」的寬度走，不是跟著整個視窗。
         實測：這行字的寬度 = 字級 × 7.43。左欄放圖時只剩 486px 可用，
         所以上限 56px（最窄的狀態只有 439px 可用）。 */
      font-size: 3.15rem;   /* = 真站首頁 h1 的 lg:text-[3.15rem]（50.4px） */
      line-height: 1.12;
    }

    /* 真站 h1 的三段字級：text-[2.1rem] sm:text-[2.55rem] lg:text-[3.15rem]。
       這裡的標題不換行，所以最窄的螢幕要再往下收一點：
       文字欄 = 螢幕寬 - 76px（.page 左右 20 + .flow 左右 18），
       這行字寬 = 字級 × 7.43，除以 7.6 留餘裕。 */
    @media (max-width: 1023px) {
      .flow .typewriter-title { font-size: 2.55rem; }
    }

    @media (max-width: 639px) {
      .flow .typewriter-title { font-size: min(2.1rem, calc((100vw - 76px) / 7.6)); }
    }

    .flow h2 {
      font-size: clamp(25px, 4vw, 56px);
      line-height: 1.2;
    }

    .lead {
      max-width: 690px;
      margin: 21px 0 33px;
      color: var(--stone-dark);
      font-size: clamp(17px, 1.55vw, 21px);
      line-height: 1.85;
    }

    .choice-list {
      display: grid;
      gap: 14px;
      max-width: 680px;
    }

    .path-choice {
      position: relative;
      display: grid;
      grid-template-columns: 54px 1fr 34px;
      gap: 17px;
      min-height: 102px;
      padding: 22px;
      align-items: center;
      /* 這是整區第一個要按的東西。原本 61% 白底 + 髮絲框，
         在米色背景上幾乎看不出是按鈕，所以框加粗、底色補實。
         用 2px 不用 1.5px：1.5px 在某些螢幕縮放下會被吸附回 1px，等於沒改。 */
      border: 2px solid rgba(88,121,123,.30);
      border-radius: 23px;
      color: var(--ink);
      text-align: left;
      background: rgba(255,255,255,.88);
      box-shadow: 0 10px 28px rgba(70,57,47,.07);
      cursor: pointer;
      transition:
        transform 190ms ease,
        border-color 190ms ease,
        background-color 190ms ease,
        box-shadow 190ms ease;
    }

    .path-choice:hover {
      transform: translateY(-3px);
      border-color: var(--teal-deep);
      background: #fff;
      box-shadow: 0 16px 32px rgba(70,57,47,.11);
    }

    /* 按下去要看得到「被按到了」，不然使用者不確定有沒有點成功 */
    .path-choice:active {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(70,57,47,.10);
    }

    /* 呼吸感：只掛在「現在該按的那一個」。
       使用者一動作就永久拿掉，免得變成一直在閃的廣告。
       整份最下面有 prefers-reduced-motion 的總開關會關掉它。 */
    @keyframes mbtiBreathe {
      0%, 100% {
        box-shadow:
          0 10px 28px rgba(70,57,47,.07),
          0 0 0 0 rgba(88,121,123,.34);
      }
      55% {
        box-shadow:
          0 10px 28px rgba(70,57,47,.07),
          0 0 0 11px rgba(88,121,123,0);
      }
    }

    .wants-attention {
      animation: mbtiBreathe 2.8s ease-in-out infinite;
    }

    .path-icon {
      display: grid;
      width: 54px;
      height: 54px;
      place-items: center;
      border-radius: 17px;
      color: white;
      background: var(--teal-deep);
      font-size: 22px;
      font-weight: 950;
    }

    .path-choice.secondary .path-icon {
      color: var(--ink);
      background: var(--gold);
    }

    .path-title {
      display: block;
      font-size: 19px;
      font-weight: 950;
    }

    .path-copy {
      display: block;
      margin-top: 5px;
      color: var(--stone-dark);
      font-size: 0.94rem;
      font-weight: 700;
      line-height: 1.55;
    }

    /* 原本只是一個裸的「→」，跟內文沒兩樣。
       改成實心圓片：圓形 + 填色 + 滑過會往前移，是大家都認得的「可以按」。 */
    .path-arrow {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 999px;
      color: #fff8ef;
      background: var(--teal-dark);
      font-size: 16px;
      font-weight: 900;
      line-height: 1;
      transition: transform 190ms ease, background-color 190ms ease;
    }

    .path-choice.secondary .path-arrow {
      color: var(--ink);
      background: var(--gold);
    }

    .path-choice:hover .path-arrow { transform: translateX(3px); }

    .tiny-note {
      margin: 20px 0 0;
      color: var(--stone-dark);
      font-size: 0.92rem;
      line-height: 1.7;
    }

    /* 原本是透明底、沒有框的純文字，跟內文長得一樣，所以沒人知道可以按。
       改成小膠囊 + 左邊一個圓形箭頭，一眼看得出是返回鍵。
       箭頭由 CSS 畫，HTML 裡不要再手寫「←」。 */
    .back-link {
      display: inline-flex;
      gap: 8px;
      margin: 0 0 27px;
      /* 高度要 >= 44px，手指才按得準（實測 36px 太小） */
      padding: 10px 17px 10px 10px;
      align-items: center;
      border: 1px solid rgba(88,121,123,.30);
      border-radius: 999px;
      color: var(--teal-dark);
      background: rgba(255,255,255,.72);
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 900;
      transition:
        transform 170ms ease,
        border-color 170ms ease,
        background-color 170ms ease;
    }

    .back-link::before {
      /* 統一用 ➜，往左的方向靠旋轉做（這個符號本身只有向右的形狀） */
      content: "➜";
      transform: rotate(180deg);
      display: grid;
      width: 22px;
      height: 22px;
      place-items: center;
      border-radius: 999px;
      color: #fff8ef;
      background: var(--teal-deep);
      font-size: 12px;
      line-height: 1;
      transition: transform 170ms ease;
    }

    .back-link:hover {
      border-color: var(--teal-deep);
      background: #fff;
      transform: translateX(-2px);
    }

    .back-link:hover::before { transform: translateX(-2px); }

    .back-link:active { transform: translateX(-2px) scale(.98); }

    /* Type picker: appears only after choosing the "I remember" path */
    .type-picker {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 11px;
      max-width: 680px;
      margin-top: 27px;
    }

    .type-button {
      min-height: 68px;
      border: 1.4px solid rgba(71,66,62,.52);
      border-radius: 18px;
      color: var(--ink);
      /* 深色字在粉彩底上只有 4.37:1。疊一層 22% 白把底色提亮，
         色相不變、對比拉到 4.5 以上。 */
      background:
        linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
        var(--type-color);
      box-shadow: 4px 5px 0 rgba(71,66,62,.07);
      cursor: pointer;
      font-size: 19px;
      font-weight: 950;
      letter-spacing: -.035em;
      transition: transform 170ms ease, box-shadow 170ms ease, filter 170ms ease;
    }

    .type-button:hover {
      transform: translateY(-4px);
      box-shadow: 6px 9px 0 rgba(71,66,62,.10);
      filter: saturate(1.06);
    }

    .group-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 18px;
      margin-top: 17px;
      color: var(--stone-dark);
      font-size: 11px;
      font-weight: 800;
    }

    .legend-item {
      display: inline-flex;
      gap: 7px;
      align-items: center;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--dot);
    }

    /* 4-question quick path */
    .progress {
      display: flex;
      gap: 7px;
      max-width: 660px;
      margin: 25px 0 31px;
    }

    .progress-bar {
      height: 6px;
      flex: 1;
      overflow: hidden;
      border-radius: 999px;
      background: #e6ddd2;
    }

    .progress-bar span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: var(--teal-deep);
      transition: width 260ms ease;
    }

    .progress-bar.done span { width: 100%; }

    .question-count {
      margin: 0 0 9px;
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .11em;
    }

    .quick-question {
      max-width: 680px;
      margin: 0 0 25px;
      font-size: clamp(20px, 3.1vw, 43px);
      font-weight: 950;
      line-height: 1.4;
      letter-spacing: -.04em;
    }

    .answer-list {
      display: grid;
      gap: 13px;
      max-width: 680px;
    }

    .answer-button {
      min-height: 78px;
      padding: 18px 21px;
      border: 1px solid var(--warm-beige);
      border-radius: 20px;
      color: var(--ink);
      text-align: left;
      background: rgba(255,255,255,.62);
      cursor: pointer;
      font-size: 16px;
      font-weight: 850;
      line-height: 1.55;
      transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
    }

    .answer-button:hover {
      transform: translateX(5px);
      border-color: var(--teal-deep);
      background: rgba(255,255,255,.9);
    }

    /* Result */
    .result-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      max-width: 690px;
      margin-bottom: 23px;
    }

    .result-code {
      margin: 0;
      font-size: clamp(46px, 7.4vw, 106px);
      line-height: .9;
      letter-spacing: -.075em;
    }

    .result-caption {
      margin: 11px 0 0;
      color: var(--stone-dark);
      font-size: 14px;
      font-weight: 800;
    }

    .demo-badge {
      flex: 0 0 auto;
      padding: 10px 12px;
      border: 1px solid rgba(71,66,62,.18);
      border-radius: 999px;
      color: var(--stone-dark);
      background: rgba(255,255,255,.62);
      font-size: 0.72rem;
      font-weight: 900;
    }

    .reveal-shell {
      max-width: 690px;
      perspective: 1200px;
    }

    .reveal-card {
      position: relative;
      /* 兩面疊在一起，所以高度只能靠這裡給。
         實測 16 型裡最擠的一型內容約 262px，留 320 還有 58px 餘裕。 */
      min-height: 320px;
      transform-style: preserve-3d;
      transition: transform 700ms cubic-bezier(.2,.75,.2,1);
    }

    .reveal-card.flipped {
      transform: rotateY(180deg);
    }

    .reveal-face {
      position: absolute;
      inset: 0;
      display: flex;
      /* 下方留白要比上方多：按鈕在左下角，卡片圓角 28px 就在那裡往內收，
         留白不夠時按鈕看起來像要掉出角落。 */
      padding: 31px 31px 40px;
      flex-direction: column;
      /* 原本是 space-between。卡片高度是由另一面撐出來的，
         多出來的空白會全部堆在按鈕上方（實測 95px 的空洞）。
         改成置中，剩下的空白平均分到上下，看起來才平衡。 */
      justify-content: center;
      gap: 22px;
      border: 1px solid var(--warm-beige);
      border-radius: 28px;
      backface-visibility: hidden;
      background:
        linear-gradient(145deg, rgba(255,255,255,.62), transparent 48%),
        var(--paper);
      box-shadow: var(--soft-shadow);
    }

    .reveal-back {
      transform: rotateY(180deg);
      background:
        linear-gradient(145deg, rgba(171,193,191,.19), transparent 48%),
        var(--paper);
    }

    .card-label {
      margin: 0 0 11px;
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .13em;
    }

    .card-line {
      margin: 0;
      /* 原本上限 43px，在 421px 寬的卡裡一行只放得下 9 個字，
         長一點的型別三行就把卡片撐爆、按鈕被擠出去。 */
      font-size: clamp(21px, 2.0vw, 28px);   /* 一行要放得下 14~16 個中文字：卡內寬 422 ÷ 15 */
      font-weight: 950;
      line-height: 1.5;
      letter-spacing: -.03em;
    }

    /* 膠囊型的動作按鈕：文字一律一行，不然箭頭或最後兩個字
       會自己掉到第二行，看起來像壞掉。 */
    .flip-button,
    .finish-button,
    .mix-cta,
    .back-link,
    .mix-mode-button,
    .reset-button,
    .change-fork-button {
      white-space: nowrap;
    }

    .flip-button,
    .question-button,
    .reset-button,
    .finish-button,
    .other-question-button {
      min-height: 49px;
      border-radius: 16px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 950;
      transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        border-color 170ms ease,
        background-color 170ms ease;
    }

    .flip-button,
    .finish-button {
      padding: 0 30px;
      border: 0;
      border-radius: 999px;
      color: white;
      background: var(--teal-dark);
      /* 陰影收斂：原本 0 11px 25px 太重，按鈕會像貼在卡片上的一塊板子 */
      box-shadow: 0 6px 16px rgba(88,121,123,.20);
    }

    /* 翻牌卡的按鈕原本被父層的 flex 拉成滿寬，
       374px 的色塊裡只放 13px 的字，左右空一大片，比例很怪。
       改成貼齊文字寬度。 */
    .flip-button {
      /* 這是這張卡唯一的動作，放中間才是視覺重心 */
      align-self: center;
      width: max-content;
      max-width: 100%;
      min-height: 56px;
      padding: 0 34px;
      font-size: 14.5px;
    }

    .flip-button:hover,
    .finish-button:hover,
    .question-button:hover,
    .reset-button:hover,
    .other-question-button:hover {
      transform: translateY(-2px);
    }

    /* 主要按鈕的互動要看得很清楚：滑過會浮起來、顏色變深，
       按下去會沉回去。使用者才確定自己真的按到了。 */
    .flip-button:hover,
    .finish-button:hover {
      background: var(--teal-dark);
      box-shadow: 0 12px 26px rgba(88,121,123,.32);
    }

    .flip-button:active,
    .finish-button:active {
      transform: translateY(1px);
      box-shadow: 0 3px 10px rgba(88,121,123,.26);
    }

    .result-actions {
      display: none;
      max-width: 690px;
      margin-top: 22px;
    }

    .result-actions.show {
      display: block;
      animation: stageIn 320ms cubic-bezier(.2,.8,.2,1) both;
    }

    .followup-title {
      margin: 0 0 11px;
      color: var(--stone-dark);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.55;
    }

    .question-choice-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px;
    }

    .question-button {
      position: relative;
      display: flex;
      min-height: 122px;
      padding: 17px 44px 17px 17px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      border: 1px solid var(--warm-beige);
      color: var(--ink);
      text-align: left;
      background: rgba(255,255,255,.62);
    }

    .question-button:hover {
      border-color: var(--teal-deep);
      background: rgba(255,255,255,.90);
      box-shadow: 0 13px 28px rgba(70,57,47,.08);
    }

    .question-axis {
      display: inline-flex;
      min-height: 26px;
      margin-bottom: 10px;
      padding: 0 9px;
      align-items: center;
      border-radius: 999px;
      color: var(--teal-dark);
      background: rgba(171,193,191,.30);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .06em;
    }

    .question-title-text {
      font-size: 14px;
      font-weight: 950;
      line-height: 1.55;
    }

    .question-arrow {
      position: absolute;
      right: 16px;
      bottom: 15px;
      color: var(--teal-dark);
      font-size: 20px;
      font-weight: 900;
    }

    .reset-button {
      min-height: 41px;
      margin-top: 11px;
      padding: 0 3px;
      border: 0;
      color: var(--stone-dark);
      background: transparent;
      text-decoration: underline;
      text-decoration-color: rgba(120,113,107,.35);
      text-underline-offset: 4px;
    }

    .question-panel.is-changing {
      animation: questionSwap 340ms cubic-bezier(.2,.8,.2,1) both;
    }

    @keyframes questionSwap {
      from { opacity: 0; transform: translateY(10px); filter: blur(2px); }
      to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    .os-list {
      display: grid;
      gap: 11px;
      max-width: 690px;
      margin-top: 26px;
    }

    .os-bubble {
      position: relative;
      padding: 16px 18px 16px 49px;
      border-radius: 18px;
      background: rgba(238,229,218,.77);
      font-size: 16px;
      font-weight: 850;
      line-height: 1.6;
    }

    .os-bubble::before {
      position: absolute;
      left: 18px;
      top: 13px;
      content: "…";
      color: var(--teal-deep);
      font-size: 22px;
      font-weight: 950;
    }

    .answer-note {
      max-width: 690px;
      margin: 20px 0 0;
      padding: 17px 19px;
      border-left: 4px solid var(--teal-deep);
      color: var(--stone-dark);
      background: rgba(255,255,255,.35);
      font-size: 15px;
      line-height: 1.8;
    }

    .question-actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      max-width: 690px;
      margin-top: 22px;
    }

    .other-question-button {
      min-height: 56px;
      padding: 12px 17px;
      border: 1px solid var(--warm-beige);
      color: var(--ink);
      text-align: left;
      background: rgba(255,255,255,.62);
      line-height: 1.5;
    }

    .other-question-button:hover {
      border-color: var(--teal-deep);
      background: rgba(255,255,255,.90);
    }

    .finish-button {
      display: inline-flex;
      min-height: 56px;
      align-items: center;
      text-decoration: none;
    }


    .same-type-button {
      display: grid;
      width: 100%;
      min-height: 104px;
      padding: 20px 20px 20px 22px;
      grid-template-columns: 1fr 34px;
      gap: 16px;
      align-items: center;
      border: 1px solid rgba(93,131,132,.38);
      border-radius: 22px;
      color: var(--ink);
      text-align: left;
      background:
        linear-gradient(135deg, rgba(171,193,191,.28), rgba(255,255,255,.68));
      box-shadow: 0 13px 30px rgba(70,57,47,.08);
      cursor: pointer;
      transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    }

    .same-type-button:hover {
      transform: translateY(-3px);
      border-color: var(--teal-deep);
      box-shadow: 0 18px 36px rgba(70,57,47,.11);
    }

    .same-type-kicker,
    .same-type-copy {
      display: block;
    }

    .same-type-kicker {
      margin-bottom: 6px;
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .09em;
    }

    .same-type-copy {
      font-size: 17px;
      font-weight: 900;
      line-height: 1.55;
    }

    .same-type-arrow {
      color: var(--teal-dark);
      font-size: 27px;
      font-weight: 900;
    }

    .fork-lead {
      max-width: 680px;
      margin: 16px 0 25px;
      color: var(--stone-dark);
      font-size: 16px;
      line-height: 1.8;
    }

    .fork-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 13px;
      max-width: 690px;
    }

    .fork-option {
      position: relative;
      min-height: 174px;
      padding: 22px 22px 55px;
      border: 1px solid var(--warm-beige);
      border-radius: 24px;
      color: var(--ink);
      text-align: left;
      background: rgba(255,255,255,.64);
      box-shadow: 0 12px 28px rgba(70,57,47,.06);
      cursor: pointer;
      transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
    }

    .fork-option:hover {
      transform: translateY(-4px);
      border-color: var(--teal-deep);
      background: rgba(255,255,255,.92);
      box-shadow: 0 18px 34px rgba(70,57,47,.10);
    }

    .fork-option-mark {
      display: inline-grid;
      width: 32px;
      height: 32px;
      margin-bottom: 14px;
      place-items: center;
      border-radius: 11px;
      color: var(--teal-dark);
      background: rgba(171,193,191,.34);
      font-size: 12px;
      font-weight: 950;
    }

    .fork-option-text {
      display: block;
      font-size: 17px;
      font-weight: 900;
      line-height: 1.65;
    }

    .fork-option-arrow {
      position: absolute;
      right: 20px;
      bottom: 18px;
      color: var(--teal-dark);
      font-size: 22px;
      font-weight: 900;
    }

    .fork-result-view {
      max-width: 700px;
      animation: stageIn 360ms cubic-bezier(.2,.8,.2,1) both;
    }

    .fork-result-view[hidden],
    .fork-choice-view[hidden] {
      display: none;
    }

    .fork-result-kicker {
      margin: 0 0 10px;
      color: var(--stone-dark);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .08em;
    }

    .fork-protect {
      display: inline-flex;
      min-height: 34px;
      margin-bottom: 16px;
      padding: 0 12px;
      align-items: center;
      border-radius: 999px;
      color: var(--teal-dark);
      background: rgba(171,193,191,.34);
      font-size: 13px;
      font-weight: 950;
    }

    .fork-result-title {
      max-width: 690px;
      margin: 0;
      font-size: clamp(24px, 4vw, 57px);
      line-height: 1.24;
      letter-spacing: -.055em;
    }

    .fork-emotion {
      max-width: 680px;
      margin: 22px 0 0;
      font-size: 20px;
      font-weight: 900;
      line-height: 1.75;
    }

    .fork-reason {
      max-width: 680px;
      margin: 13px 0 0;
      color: var(--stone-dark);
      font-size: 15px;
      line-height: 1.8;
    }

    .own-version {
      max-width: 680px;
      margin: 25px 0 0;
      padding: 18px 20px;
      border-left: 4px solid var(--teal-deep);
      border-radius: 0 16px 16px 0;
      background: rgba(255,255,255,.46);
      font-size: 20px;
      font-weight: 950;
      line-height: 1.65;
    }

    .layer-bridge {
      max-width: 700px;
      margin-top: 27px;
      padding: 0;
    }

    .surface-demo {
      padding: 21px;
      border: 1px solid rgba(93,131,132,.25);
      border-radius: 23px;
      background:
        radial-gradient(circle at 88% 16%, rgba(219,192,127,.23), transparent 31%),
        linear-gradient(145deg, rgba(171,193,191,.18), rgba(255,255,255,.68));
      box-shadow: 0 15px 34px rgba(70,57,47,.07);
    }

    .surface-label {
      margin: 0 0 6px;
      color: var(--stone-dark);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .09em;
    }

    .surface-title {
      margin: 0;
      font-size: clamp(17px, 2.8vw, 38px);
      font-weight: 950;
      line-height: 1.35;
      letter-spacing: -.04em;
    }

    .reason-row {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 17px;
    }

    .reason-pill {
      display: inline-flex;
      min-height: 38px;
      padding: 7px 12px;
      align-items: center;
      border: 1px solid rgba(71,66,62,.13);
      border-radius: 999px;
      color: var(--ink);
      background: rgba(255,255,255,.72);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.35;
    }

    .reason-pill::before {
      width: 7px;
      height: 7px;
      margin-right: 7px;
      content: "";
      border-radius: 999px;
      background: var(--teal-deep);
    }

    .reason-pill:nth-child(2)::before { background: var(--gold); }
    .reason-pill:nth-child(3)::before { background: var(--lavender); }

    .surface-conclusion {
      margin: 17px 0 0;
      padding-top: 15px;
      border-top: 1px solid rgba(71,66,62,.11);
      font-size: 15px;
      font-weight: 950;
      line-height: 1.7;
    }

    .change-fork-button {
      min-height: 43px;
      margin-top: 12px;
      padding: 0 2px;
      border: 0;
      color: var(--teal-dark);
      background: transparent;
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      text-decoration: underline;
      text-decoration-color: rgba(66,106,108,.32);
      text-underline-offset: 4px;
    }

    .fork-followups {
      max-width: 690px;
      margin-top: 25px;
      padding-top: 23px;
      border-top: 1px solid var(--warm-beige);
    }


    /* V11: use the left column to explain the personalized mix instead of leaving it empty. */
    .experience.has-mix {
      grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
    }

    .experience.has-mix .machine {
      min-height: 760px;
      padding: 42px;
      align-items: center;
    }

    .experience.has-mix .machine-core {
      width: min(100%, 620px);
    }

    .experience.has-mix .machine-top {
      margin-bottom: 18px;
    }

    .experience.has-mix .letters {
      gap: 14px;
      padding: 0 8px 8px;
    }

    .experience.has-mix .letter-card,
    .experience.has-mix .letter-inner {
      min-height: 158px;
    }

    .experience.has-mix .letter-face {
      padding: 22px 14px 16px;
      border-radius: 28px;
    }

    .experience.has-mix .letter-glyph {
      font-size: clamp(39px, 5vw, 72px);
    }

    .experience.has-mix .machine-message {
      margin: 17px 8px 0;
      padding-top: 17px;
      padding-bottom: 17px;
    }

    .mix-panel[hidden] { display: none !important; }
    .mix-panel:not([hidden]) { display: block !important; }

    .mix-panel {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: 28px;
      margin: 0;
      padding: 30px;
      border: 1px solid rgba(93,131,132,.24);
      border-radius: 32px;
      background:
        radial-gradient(circle at 90% 12%, rgba(219,192,127,.22), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.72), rgba(238,229,218,.72));
      box-shadow: 0 16px 36px rgba(70,57,47,.08);
      animation: stageIn 360ms cubic-bezier(.2,.8,.2,1) both;
    }

    .mix-kicker {
      margin: 0 0 8px;
      color: var(--teal-dark);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: .08em;
    }

    /* 這是桌機兩欄時的內距。手機在 650 斷點會改回較窄的值，
       否則 375 寬的畫面左右各被吃掉 46px，卡片只剩 262px。 */
    .experience.has-mix .flow {
      padding: 44px 46px 54px;
    }

    .experience.has-mix .fork-result-title {
      font-size: clamp(23px, 3.2vw, 49px);
    }

    .experience.has-mix .fork-emotion {
      margin-top: 17px;
      font-size: 18px;
    }

    .experience.has-mix .fork-reason {
      margin-top: 10px;
    }

    .experience.has-mix .own-version {
      margin-top: 18px;
      padding: 15px 17px;
      font-size: 15px;
      font-weight: 850;
      line-height: 1.72;
    }

    .experience.has-mix .layer-bridge {
      margin-top: 17px;
    }

    .experience.has-mix .surface-demo {
      padding: 17px 18px;
    }

    .experience.has-mix .surface-title {
      font-size: clamp(22px, 2.2vw, 31px);
    }

    .experience.has-mix .surface-conclusion {
      margin-top: 13px;
      padding-top: 12px;
      font-size: 13px;
      font-weight: 850;
    }

    .mobile-method-card { display: none; }

    .live {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    /* 用鍵盤 Tab 的人要清楚看到「現在停在哪一個」。
       原本 28% 透明度幾乎看不見。 */
    .mbti-comic-host button:focus-visible,
    .mbti-comic-host a:focus-visible {
      outline: 3px solid var(--teal-deep);
      outline-offset: 3px;
      border-radius: inherit;
    }

    @media (max-width: 1080px) {

      /* 容器寬度統一由最上面那組（真站的 68rem + 20/24px）決定，這裡不再另外壓縮 */
      .experience { grid-template-columns: 1fr; }
      .experience.has-mix { grid-template-columns: 1fr; }
      .mix-panel { grid-column: auto; grid-template-columns: 1fr; }
      .machine,
      .flow { min-height: auto; }
      .machine { padding: 42px; }
      .flow { padding: 50px 42px 58px; }
      .machine-core { width: min(100%, 650px); }
    }

    @media (max-width: 650px) {
      /* 原本手機被鎖成最寬 560px、左右內距 0，
         跟真站的 px-5 不一樣，併版後會對不齊。改成沿用上面那組。 */

      /* 原本這裡補了 margin-left:6px，是為了在交接包自己的預覽外殼下對齊。
         併版後容器換成真站的，這 6px 反而讓小標比內容多凸出 6px。 */

      .experience {
        display: block;
      }

      .machine { display: none; }

      .flow,
      /* 開了混合面板時也要用同一組內距，不能沿用桌機的 46px */
      .experience.has-mix .flow {
        min-height: auto;
        padding: 35px 18px 45px;
        overflow: visible;
        border-radius: 29px;
      }


      .mobile-machine-slot {
        display: block;
      }

      .mobile-machine {
        display: block;
        width: 100%;
        padding: 10px;
        border: 1px solid rgba(255,255,255,.82);
        border-radius: 22px;
        background:
          linear-gradient(145deg, rgba(255,255,255,.45), transparent 48%),
          rgba(238,229,218,.94);
        box-shadow: 0 14px 34px rgba(70,57,47,.10);
        transition: box-shadow 200ms ease, transform 200ms ease, background-color 200ms ease;
      }

      .mobile-machine.is-inline {
        position: relative;
        margin: -4px 0 24px;
      }

      .mobile-machine.is-sticky {
        position: sticky;
        z-index: 40;
        top: max(8px, env(safe-area-inset-top));
        scroll-margin-top: max(8px, env(safe-area-inset-top));
        margin: 0 0 18px;
        border-color: rgba(255,255,255,.92);
        background:
          linear-gradient(145deg, rgba(255,255,255,.60), transparent 48%),
          rgba(238,229,218,.94);
        box-shadow:
          0 16px 38px rgba(70,57,47,.16),
          0 0 0 1px rgba(93,131,132,.06);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }

      .mobile-machine-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 1px 4px 8px;
      }

      .mobile-machine-title {
        color: var(--teal-dark);
        font-size: 10px;
        font-weight: 950;
        letter-spacing: .10em;
      }

      .mobile-status {
        max-width: 54%;
        overflow: hidden;
        color: var(--stone-dark);
        font-size: 10px;
        font-weight: 900;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mobile-letter-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
      }

      .mobile-letter-card {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 82px;
        padding: 9px 4px 7px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 1.4px solid rgba(71,66,62,.64);
        border-radius: 16px;
        box-shadow: 3px 4px 0 rgba(71,66,62,.07);
        transition: transform 190ms ease, box-shadow 190ms ease, border-color 190ms ease;
      }

      .mobile-letter-card:nth-child(1) { background: var(--soft-teal); }
      .mobile-letter-card:nth-child(2) { background: var(--rose); }
      .mobile-letter-card:nth-child(3) { background: var(--gold); }
      .mobile-letter-card:nth-child(4) { background: var(--lavender); }

      .mobile-letter-card.is-current {
        z-index: 2;
        border-color: var(--teal-dark);
        box-shadow:
          0 0 0 3px rgba(255,255,255,.72),
          4px 6px 0 rgba(71,66,62,.09);
        transform: translateY(-3px) rotate(0) scale(1.035);
      }

      .mobile-letter-card.is-updated {
        animation: mobileLetterPop 310ms cubic-bezier(.2,.8,.2,1) both;
      }

      @keyframes mobileLetterPop {
        0% { transform: scale(.88) rotateY(70deg); opacity: .45; }
        100% { transform: scale(1) rotateY(0); opacity: 1; }
      }

      .mobile-dimension-icon {
        position: absolute;
        top: 7px;
        left: 7px;
        display: grid;
        width: 17px;
        height: 17px;
        place-items: center;
        border-radius: 999px;
        color: var(--teal-dark);
        background: rgba(255,255,255,.68);
      }

      .mobile-dimension-icon svg {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .mobile-letter-value {
        font-size: 24px;
        font-weight: 950;
        line-height: 1;
        letter-spacing: -.07em;
      }

      .mobile-letter-meaning {
        position: absolute;
        right: 3px;
        bottom: 6px;
        left: 3px;
        overflow: hidden;
        /* 原本 8px：4 個字塞在 17px 寬裡，等於看不清楚的裝飾。
           卡片實際有 64px 寬，放得下 11.5px。 */
        color: rgba(71,66,62,1);
        font-size: 0.72rem;
        font-weight: 900;
        line-height: 1.15;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .lead {
        margin-bottom: 26px;
        font-size: 17px;
      }

      .path-choice {
        grid-template-columns: 48px 1fr 28px;
        gap: 13px;
        padding: 17px;
      }

      .path-arrow {
        width: 28px;
        height: 28px;
        font-size: 14px;
      }

      .path-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
      }

      .type-picker {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }

      .type-button {
        min-height: 56px;
        border-radius: 14px;
        font-size: 15px;
      }

      .group-legend { display: none; }

      .quick-question { font-size: 24px; }

      .answer-button {
        min-height: 72px;
        padding: 16px;
        font-size: 15px;
      }

      .result-code { font-size: 46px; }

      .reveal-card { min-height: 300px; }   /* 手機最擠的一型約 241px */

      .reveal-face {
        padding: 25px 21px;
        border-radius: 23px;
      }

      /* 手機卡片內寬 276px（375 螢幕）÷15 約 18.5px；320 螢幕內寬 222px 用 17px。 */
      .card-line { font-size: clamp(17px, 5vw, 22px); }
      .question-choice-grid { grid-template-columns: 1fr; }

      .question-button {
        min-height: 105px;
      }

      .question-actions {
        grid-template-columns: 1fr;
      }

      .finish-button,
      .other-question-button {
        width: 100%;
        justify-content: center;
      }

      .other-question-button {
        justify-content: flex-start;
      }
    }


    @media (max-width: 650px) {
      .mix-panel { display: none !important; }

      .mobile-method-card {
        display: block;
        margin-top: 14px;
        padding: 18px;
        border: 1px solid rgba(93,131,132,.22);
        border-radius: 21px;
        background:
          radial-gradient(circle at 92% 8%, rgba(219,192,127,.22), transparent 30%),
          rgba(255,255,255,.62);
      }

      .mobile-method-kicker {
        margin: 0 0 7px;
        color: var(--teal-dark);
        font-size: 10px;
        font-weight: 950;
        letter-spacing: .07em;
      }

      .mobile-method-card h3 {
        margin: 0;
        font-size: 19px;
        line-height: 1.42;
        letter-spacing: -.035em;
      }

      .mobile-method-intro,
      .mobile-method-summary {
        margin: 11px 0 0;
        color: var(--stone-dark);
        font-size: 13px;
        line-height: 1.72;
      }

      .mobile-method-summary strong { color: var(--ink); }

      .mobile-method-formula {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        gap: 5px;
        margin-top: 13px;
        align-items: center;
      }

      .mobile-method-formula span {
        display: grid;
        min-height: 48px;
        padding: 7px 4px;
        place-items: center;
        border: 1px solid rgba(71,66,62,.11);
        border-radius: 12px;
        background: rgba(255,255,255,.72);
        font-size: 10px;
        font-weight: 950;
        text-align: center;
      }

      .mobile-method-formula b {
        color: var(--teal-dark);
        font-size: 13px;
      }

      .mobile-zodiac-kicker {
        margin: 15px 0 8px;
        font-size: 11px;
        font-weight: 950;
      }

      .mobile-zodiac-list {
        display: grid;
        gap: 7px;
      }

      .mobile-zodiac-card {
        display: grid;
        grid-template-columns: 55px 1fr;
        gap: 8px;
        min-height: 51px;
        padding: 9px 10px;
        align-items: center;
        border: 1px solid rgba(71,66,62,.10);
        border-radius: 13px;
        background: rgba(255,255,255,.68);
      }

      .mobile-zodiac-card span {
        color: var(--teal-dark);
        font-size: 10px;
        font-weight: 950;
      }

      .mobile-zodiac-card strong {
        font-size: 11px;
        font-weight: 850;
        line-height: 1.5;
      }

      .mobile-answer-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 12px;
      }

      .mobile-answer-row span {
        min-height: 34px;
        padding: 8px 10px;
        border-radius: 11px;
        color: var(--teal-dark);
        background: rgba(171,193,191,.26);
        font-size: 11px;
        font-weight: 900;
      }
    }

    @media (max-width: 650px) {
      .same-type-button {
        min-height: 96px;
        padding: 17px;
      }

      .same-type-copy {
        font-size: 15px;
      }

      .fork-options {
        grid-template-columns: 1fr;
      }

      .fork-option {
        min-height: 139px;
        padding: 18px 18px 48px;
      }

      .fork-result-title {
        font-size: 24px;
      }

      .fork-emotion {
        font-size: 18px;
      }

      .own-version {
        font-size: 18px;
      }

      .layer-bridge {
        margin-top: 23px;
      }

      .surface-demo,
      .method-block {
        padding: 18px;
      }

      .surface-title {
        font-size: 19px;
      }

      .reason-row {
        display: grid;
        grid-template-columns: 1fr;
      }

      .reason-pill {
        width: 100%;
        justify-content: flex-start;
      }
    }

    @media (max-width: 650px) {
      #stageFork.active { display: block !important; }
      #stageFork.active .mobile-method-card { display: block !important; }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
      }
    }


    /* ---------- V12: full-bleed visual explanation ---------- */
    #stageFork { display: none !important; }
    .mobile-method-card { display: none !important; }

    .experience.has-mix {
      grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
    }

    .experience.has-mix .machine,
    .experience.has-mix .flow {
      min-height: 760px;
    }

    .mix-panel[hidden] { display: none !important; }

    .mix-panel {
      position: relative;
      display: block;
      grid-column: 1 / -1;
      width: 100vw;
      min-height: 100vh;
      margin: 36px calc(50% - 50vw) 0;
      padding: clamp(48px, 7vw, 110px) max(24px, calc((100vw - 1420px) / 2));
      overflow: hidden;
      border: 0;
      border-radius: 0;
      color: #f7f2ea;
      background:
        radial-gradient(circle at 16% 18%, rgba(171,193,191,.24), transparent 28%),
        radial-gradient(circle at 85% 22%, rgba(219,192,127,.18), transparent 27%),
        radial-gradient(circle at 74% 88%, rgba(185,172,190,.20), transparent 32%),
        linear-gradient(135deg, #263738 0%, #303a3a 45%, #3a3138 100%);
      box-shadow: none;
      isolation: isolate;
      animation: stageIn 420ms cubic-bezier(.2,.8,.2,1) both;
    }

    .mix-panel::before {
      position: absolute;
      inset: 0;
      z-index: -2;
      content: "";
      opacity: .32;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.78) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(219,192,127,.66) 0 1px, transparent 1.6px);
      background-position: 0 0, 31px 41px;
      background-size: 76px 76px, 113px 113px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 92%);
    }

    .mix-panel::after {
      position: absolute;
      left: 50%;
      bottom: -280px;
      z-index: -1;
      width: min(1100px, 90vw);
      height: 520px;
      content: "";
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(93,131,132,.36), transparent 68%);
      transform: translateX(-50%);
      filter: blur(8px);
    }

    @keyframes starPulse {
      0%,100% { opacity: .35; transform: scale(.75); }
      50% { opacity: 1; transform: scale(1.35); }
    }

    /* 這條的 max-width 已移除，但實際生效的是下面 .comic-mix .comic-hero
       那條（同元素、兩個 class、優先級較高）。 */
    .mix-hero {
      position: relative;
      z-index: 2;
      margin: 0 auto 54px;
      text-align: center;
    }

    .mix-panel .mix-kicker {
      margin: 0 0 13px;
      color: #bcd2cf;
      font-size: 13px;
      font-weight: 950;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .mix-hero h2 {
      margin: 0;
      color: #fffaf3;
      font-size: clamp(31px, 6vw, 88px);
      font-weight: 950;
      line-height: 1.08;
      letter-spacing: -.065em;
    }

    .mix-hero h2 em {
      color: #e6c987;
      font-style: normal;
    }

    .mix-intro {
      max-width: 860px;
      margin: 24px auto 0;
      color: rgba(247,242,234,.76);
      font-size: clamp(16px, 1.5vw, 20px);
      line-height: 1.85;
    }

    .mix-view-switch {
      position: relative;
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-top: 28px;
      padding: 5px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(12px);
    }

    /* 兩顆切換鈕中間的提示箭頭：指向「還沒選的那一顆」，並持續小幅左右晃動，
       讓人一眼看出這裡是可以切換的。
       ⚠️ 不能停在正中央——那條線正好是兩顆鈕的接縫，箭頭會壓到已選取那顆的
          綠色底。改成往「未選取」那一側偏 26px，落在透明的那半邊上。
       選取狀態靠 :has() 判斷：選左邊那顆時箭頭朝右（指向右邊那顆），反之朝左。 */
    .mix-switch-hint {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 3;
      color: var(--teal-dark);
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    /* 預設（右邊那顆被選取）：箭頭朝左、往左偏 */
    .mix-view-switch:has(.mix-mode-button:last-child.is-active) .mix-switch-hint {
      animation: switchNudgeLeft 1.5s ease-in-out infinite;
    }

    /* 左邊那顆被選取：箭頭朝右、往右偏 */
    .mix-view-switch:has(.mix-mode-button:first-child.is-active) .mix-switch-hint {
      animation: switchNudgeRight 1.5s ease-in-out infinite;
    }

    @keyframes switchNudgeRight {
      0%, 100% { transform: translate(calc(-50% + 12px), -50%) rotate(0deg); }
      50%      { transform: translate(calc(-50% + 20px), -50%) rotate(0deg); }
    }

    /* ⚠️ 轉 180 度之後要往下補 3px：➜ 的字形重心本來就略低於幾何中心，
       翻過來就變成偏高，跟朝右那顆對不齊。 */
    @keyframes switchNudgeLeft {
      0%, 100% { transform: translate(calc(-50% - 20px), calc(-50% + 3px)) rotate(180deg); }
      50%      { transform: translate(calc(-50% - 28px), calc(-50% + 3px)) rotate(180deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .mix-switch-hint { animation: none !important; }
      .mix-view-switch:has(.mix-mode-button:first-child.is-active) .mix-switch-hint { transform: translate(calc(-50% + 12px), -50%); }
      .mix-view-switch:has(.mix-mode-button:last-child.is-active) .mix-switch-hint { transform: translate(calc(-50% - 12px), calc(-50% + 3px)) rotate(180deg); }
    }

    .mix-mode-button {
      /* 字級一次拉大三級（13→19px）。按鈕高度與左右內距跟著放大，
         否則字會頂到膠囊的邊。 */
      min-height: 54px;
      padding: 0 26px;
      border: 0;
      border-radius: 999px;
      color: var(--stone-dark);
      background: transparent;
      cursor: pointer;
      font-size: 19px;
      font-weight: 900;
      transition: color 180ms ease, background 180ms ease, transform 180ms ease;
    }

    .mix-mode-button:hover { transform: translateY(-1px); }

    .mix-mode-button.is-active {
      color: #263738;
      background: #f7f2ea;
      box-shadow: 0 9px 24px rgba(0,0,0,.18);
    }

    @keyframes orbitSpin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes orbitSpinReverse {
      from { transform: translate(-50%, -50%) rotate(360deg); }
      to { transform: translate(-50%, -50%) rotate(0deg); }
    }

    .source-personality { left: 6%; top: 10%; }
    .source-birth { right: 5%; top: 8%; }
    .source-east { left: 7%; bottom: 11%; }
    .source-west { right: 6%; bottom: 9%; }

    .prism-caption {
      position: absolute;
      left: 50%;
      bottom: 23px;
      z-index: 6;
      width: min(88%, 520px);
      margin: 0;
      color: rgba(247,242,234,.78);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.6;
      text-align: center;
      transform: translateX(-50%);
    }

    .mix-panel[data-mode="mbti"] .source-birth,
    .mix-panel[data-mode="mbti"] .source-east,
    .mix-panel[data-mode="mbti"] .source-west {
      opacity: .13;
      filter: grayscale(1);
      transform: scale(.88);
    }

    .mix-panel[data-mode="mbti"] .orbit-ring {
      opacity: .18;
      animation-play-state: paused;
    }

    .version-deck {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 27px;
    }

    .version-card {
      position: relative;
      min-height: 154px;
      padding: 18px 16px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 23px;
      color: #fffaf3;
      text-align: left;
      background: rgba(255,255,255,.065);
      cursor: pointer;
      transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
    }

    .version-card:hover {
      transform: translateY(-5px);
      border-color: rgba(230,201,135,.75);
      background: rgba(255,255,255,.13);
    }

    .version-card.is-active {
      box-shadow: 0 18px 40px rgba(0,0,0,.18);
    }

    .version-card small,
    .version-card strong {
      display: block;
    }

    .version-card small {
      color: #bcd2cf;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .04em;
    }

    .version-card strong {
      margin-top: 7px;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.55;
    }

    .version-output {
      display: grid;
      grid-template-columns: 78px 1fr;
      gap: 18px;
      min-height: 138px;
      margin-top: 15px;
      padding: 23px;
      align-items: center;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 28px;
      color: #263738;
      background: linear-gradient(135deg, #f7f2ea, #e9dfd3);
      box-shadow: 0 24px 62px rgba(0,0,0,.22);
    }

    .version-output.is-changing {
      animation: questionSwap 340ms cubic-bezier(.2,.8,.2,1) both;
    }


    .version-output small,
    .version-output strong {
      display: block;
    }

    .version-output small {
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .06em;
    }

    .version-output strong {
      margin-top: 7px;
      font-size: clamp(20px, 2.2vw, 31px);
      font-weight: 950;
      line-height: 1.45;
      letter-spacing: -.035em;
    }

    .mix-panel[data-mode="mbti"] .version-card-glyph {
      color: #bcd2cf;
    }

    /* 左右不留內距，三張卡片才會跟上下區塊切齊同一條線（原本 22px 內距
       加 1px 邊框，讓它們比上下窄了 23px）。
       原本的白色半透明邊框、底色與 blur 是為深色底做的玻璃面板效果，
       白底移除後在淺色背景上已經看不出來，一併拿掉。 */
    .translator-strip {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(240px, .75fr) minmax(310px, 1fr) minmax(360px, 1.2fr);
      gap: 18px;
      margin: 72px auto 0;
      padding: 22px 0;
      align-items: center;
    }

    .human-answers {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .human-answers span {
      display: grid;
      min-height: 46px;
      padding: 11px 14px;
      place-items: center start;
      border-radius: 17px;
      color: #263738;
      text-align: left;
      background: #f7f2ea;
      font-size: 12px;
      font-weight: 950;
      line-height: 1.45;
    }

    .oneofone-stage {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1.25fr;
      gap: 15px;
      max-width: 1180px;
      margin: 58px auto 0;
      align-items: stretch;
    }


    .plain-truth {
      margin-top: 16px;
      padding: 16px 17px;
      border: 1px solid rgba(230,201,135,.28);
      border-radius: 17px;
      background: rgba(230,201,135,.08);
    }

    .plain-truth strong,
    .plain-truth p {
      display: block;
      margin: 0;
    }

    .plain-truth strong {
      /* #f4dfac 是為舊的深色橫幅寫的，放在淺色卡片上幾乎看不見。
         --teal-deep 在這個薄荷底上只有 4.34:1，再壓深一階到 4.5 以上。 */
      color: var(--teal-dark);
      font-size: 14px;
      font-weight: 950;
      line-height: 1.55;
    }

    .plain-truth p {
      margin-top: 7px;
      /* 原本是 rgba(247,242,234,.70)（深色橫幅時代的米白字），
         放在淺色卡片上等於看不見。實際生效的是下面的 .comic-truth p，
         這裡直接改成一樣的值，不要留兩套打架的設定。 */
      color: var(--stone-dark);
      font-size: 0.94rem;
      line-height: 1.75;
    }

    .mix-question-zone {
      position: relative;
      z-index: 2;
      display: grid;
      /* 原本 minmax 的下限寫死 300+540，加上 34px 間距＝874，
         但虛線框裡只有 837px 可用，右邊就會凸出去。
         下限改 0，讓兩欄真的照比例縮。 */
      grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
      gap: 34px;
      max-width: 1250px;
      margin: 70px auto 0;
      padding-top: 38px;
      border-top: 1px solid rgba(255,255,255,.13);
      align-items: start;
    }

    .mix-question-kicker {
      margin: 0 0 7px;
      /* #bcd2cf 也是深色橫幅時代的，淺底上讀不到 */
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: .10em;
    }

    .mix-question-zone h3 {
      margin: 0;
      color: #fffaf3;
      font-size: clamp(17px, 2.8vw, 39px);
      font-weight: 950;
      line-height: 1.35;
      letter-spacing: -.04em;
    }

    .universe-question-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .universe-question-button {
      position: relative;
      min-height: 128px;
      padding: 18px 43px 18px 18px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 22px;
      color: #fffaf3;
      text-align: left;
      background: rgba(255,255,255,.065);
      cursor: pointer;
      transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .universe-question-button:hover {
      transform: translateY(-4px);
      border-color: rgba(230,201,135,.70);
      background: rgba(255,255,255,.11);
    }

    .universe-question-button small,
    .universe-question-button strong {
      display: block;
    }

    .universe-question-button small {
      margin-bottom: 9px;
      color: #bcd2cf;
      font-size: 0.72rem;
      font-weight: 950;
      letter-spacing: .06em;
    }

    .universe-question-button strong {
      font-size: 14px;
      font-weight: 900;
      line-height: 1.55;
    }

    .universe-question-button::after {
      position: absolute;
      right: 16px;
      bottom: 15px;
      content: "➜";
      color: #e6c987;
      font-size: 20px;
      font-weight: 950;
    }

    .mix-footer {
      position: relative;
      z-index: 2;
      display: flex;
      max-width: 900px;
      margin: 46px auto 0;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .mix-cta {
      min-height: 58px;
      padding: 0 26px;
      border: 0;
      border-radius: 19px;
      color: #263738;
      background: #e6c987;
      box-shadow: 0 18px 40px rgba(0,0,0,.20);
      cursor: pointer;
      font-size: 15px;
      font-weight: 950;
      transition: transform 180ms ease, box-shadow 180ms ease;
    }

    .mix-cta:hover {
      transform: translateY(-3px);
      box-shadow: 0 23px 48px rgba(0,0,0,.26);
    }

    .mix-footer p {
      max-width: 650px;
      margin: 13px 0 0;
      color: rgba(247,242,234,.47);
      font-size: 10px;
      line-height: 1.65;
    }

    @media (max-width: 1080px) {
      /* 前面有一條沒包媒體查詢的 .experience.has-mix 排在 1080 斷點後面，
         會把單欄設定蓋掉，所以在這裡補回來。 */
      .experience,
      .experience.has-mix { grid-template-columns: 1fr; }
      .experience.has-mix .machine,
      .experience.has-mix .flow { min-height: auto; }

      .mix-panel {
        min-height: auto;
        padding: 56px 26px 62px;
      }

      .translator-strip {
        grid-template-columns: 1fr;
        max-width: 780px;
      }

      .mix-question-zone {
        grid-template-columns: 1fr;
        max-width: 780px;
      }
    }

    @media (max-width: 650px) {
      .experience.has-mix {
        grid-template-columns: 1fr;
      }

      .mix-panel {
        width: 100%;
        min-height: auto;
        margin: 26px 0 0;
        padding: 40px 18px 48px;
      }

      .mix-hero {
        margin-bottom: 38px;
        text-align: left;
      }

      .mix-panel .mix-kicker { font-size: 11px; }

      .mix-hero h2 {
        font-size: 30px;
        line-height: 1.12;
      }

      .mix-intro {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.75;
      }

      .mix-view-switch {
        display: grid;
        width: 100%;
      }

      .mix-mode-button {
        min-width: 0;
        padding: 0 10px;
        font-size: 11px;
      }

      .source-personality { left: 3%; top: 7%; }
      .source-birth { right: 3%; top: 6%; }
      .source-east { left: 3%; bottom: 9%; }
      .source-west { right: 3%; bottom: 8%; }

      .prism-caption {
        bottom: 18px;
        font-size: 10px;
      }

      .version-deck {
        display: flex;
        gap: 9px;
        margin-right: -16px;
        padding-right: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
      }

      .version-card {
        flex: 0 0 71%;
        min-height: 140px;
        scroll-snap-align: start;
      }

      .version-output {
        grid-template-columns: 60px 1fr;
        gap: 13px;
        padding: 18px;
        border-radius: 23px;
      }


      .version-output strong { font-size: 20px; }

      .translator-strip {
        margin-top: 45px;
        padding: 18px;
      }

      .human-answers { grid-template-columns: 1fr; }
      .human-answers span { min-height: 49px; }

      .oneofone-stage {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 42px;
      }

      .mix-question-zone {
        gap: 20px;
        margin-top: 52px;
        padding-top: 30px;
      }

      .universe-question-grid { grid-template-columns: 1fr; }
      .universe-question-button { min-height: 105px; }
    }

  

    /* ---------- V14: full-width hand-drawn comic presentation ---------- */
    .mix-panel.comic-mix {
      position: relative;
      width: 100%;
      /* 白底卡片已移除（原本有格線底、2px 邊框、圓角與陰影）。少了卡片就不需要
         內距，也不必再往外擴——內容直接等於頁面容器的寬度。
         左右歸零、上下保留，垂直節奏才不會整段黏在一起。 */
      margin: 36px 0 0;
      min-height: auto;
      padding: clamp(29px, 5vw, 78px) 0;
      color: #35312e;
      /* ⚠️ 這行不能省。.mix-panel 還有一版是「滿版深色橫幅」，帶深綠底與兩層裝飾；
         原本被這裡的白底蓋住看不見，白底一拿掉就整個露出來——深色字落在深色底上，
         大標幾乎讀不到（2026-08-23 實測）。連同那兩個裝飾偽元素一起關掉。 */
      background: none;
      box-shadow: none;
      border: 0;
      border-radius: 0;
    }

    .mix-panel.comic-mix::before,
    .mix-panel.comic-mix::after { content: none; }

    .comic-paper-dots {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .48;
      background-image:
        radial-gradient(circle at 8% 13%, rgba(228,187,179,.75) 0 4px, transparent 5px),
        radial-gradient(circle at 83% 9%, rgba(219,192,127,.80) 0 3px, transparent 4px),
        radial-gradient(circle at 93% 47%, rgba(171,193,191,.72) 0 4px, transparent 5px),
        radial-gradient(circle at 4% 74%, rgba(185,172,190,.65) 0 3px, transparent 4px);
    }

    /* 不設 max-width：大標區要跟下面的卡片區一樣吃滿頁面容器的 1120。
       裡面是置中排版，放寬不會改變標題與按鈕的視覺；那句說明的行長
       由 .mix-intro 自己的 860 控制，不會因此拉成超長一行。
       ⚠️ 這個元素同時掛著 mix-hero 與 comic-hero 兩個 class，寬度是由
          這條（兩個 class，優先級較高）決定的，改 .mix-hero 那條沒有用。 */
    .comic-mix .comic-hero {
      position: relative;
      z-index: 1;
      margin: 0 auto 42px;
      text-align: center;
    }

    .comic-mix .mix-kicker {
      display: inline-block;
      margin: 0 0 12px;
      padding: 7px 13px;
      border: 2px solid #47423e;
      border-radius: 999px;
      color: #47423e;
      background: #f3df82;
      box-shadow: 4px 5px 0 rgba(71,66,62,.12);
      font-size: 13px;
      letter-spacing: .08em;
    }

    .comic-mix .mix-hero h2 {
      margin: 0;
      color: #35312e;
      font-size: clamp(33px, 6vw, 86px);
      line-height: 1.02;
      letter-spacing: -.065em;
    }

    .comic-mix .mix-hero h2 em {
      position: relative;
      display: inline-block;
      color: #35312e;
      font-style: normal;
      z-index: 1;
    }

    .comic-mix .mix-hero h2 em::before {
      position: absolute;
      z-index: -1;
      right: -10px;
      bottom: .05em;
      left: -10px;
      height: .34em;
      border-radius: 999px 70% 999px 60%;
      content: "";
      background: rgba(228,187,179,.88);
    }

    .comic-mix .mix-intro {
      max-width: 820px;
      margin: 22px auto 0;
      color: var(--stone-dark);
      font-size: clamp(16px, 1.5vw, 20px);
      line-height: 1.8;
    }

    .comic-mix .mix-view-switch {
      display: inline-flex;
      margin: 25px auto 0;
      padding: 5px;
      border: 1px solid var(--warm-beige);
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 12px 34px rgba(74,69,66,.055);
    }

    /* ⚠️ 字級要改這一條，不是上面單 class 的 .mix-mode-button——
       這個元素兩條都吃得到，兩個 class 的優先級較高，改單 class 那條沒有作用。 */
    .comic-mix .mix-mode-button {
      min-height: 54px;
      /* 內距要夠寬：字級放大到 19px 之後，26px 會讓文字頂到膠囊邊，
         中間也騰不出空間給提示箭頭（箭頭會壓在「母」字上）。 */
      padding: 0 40px;
      border: 0;
      border-radius: 999px;
      color: var(--ink);
      background: transparent;
      font-size: 19px;
      font-weight: 950;
      cursor: pointer;
    }

    .comic-mix .mix-mode-button.is-active {
      color: #fff;
      background: var(--teal-dark);
      box-shadow: 0 7px 18px rgba(93,131,132,.20);
    }

    .comic-main-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px;
      align-items: stretch;
    }

    .comic-storyboard,
    .comic-method {
      min-width: 0;
      padding: clamp(22px, 2.8vw, 36px);
      border: 1px solid var(--warm-beige);
      border-radius: 30px;
      background: rgba(255,255,255,.93);
      box-shadow: 0 12px 34px rgba(74,69,66,.055);
    }

    .comic-section-label {
      display: inline-block;
      margin-bottom: 12px;
      padding: 8px 14px;
      border: 2px solid #47423e;
      border-radius: 8px;
      background: #f4df82;
      font-size: 16px;
      font-weight: 950;
      letter-spacing: .06em;
    }

    .comic-storyboard h3 {
      margin: 0;
      color: #35312e;
      font-size: clamp(18px, 2.8vw, 42px);
      line-height: 1.24;
      letter-spacing: -.045em;
    }

    .comic-situation {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      margin-top: 20px;
      align-items: start;
    }

    .comic-situation span {
      display: inline-flex;
      min-height: 31px;
      padding: 0 10px;
      align-items: center;
      border: 2px solid #47423e;
      border-radius: 9px;
      background: var(--soft-teal);
      font-size: 0.72rem;
      font-weight: 950;
      white-space: nowrap;
    }

    .comic-situation strong {
      padding-top: 4px;
      font-size: 15px;
      line-height: 1.65;
    }

    .comic-version-deck {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 20px;
    }

    .comic-mix .version-card {
      position: relative;
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 11px;
      min-height: 0;
      padding: 15px;
      overflow: visible;
      border: 1px solid var(--warm-beige);
      border-radius: 25px;
      color: #35312e;
      text-align: left;
      background: #fffefa;
      box-shadow: 0 12px 34px rgba(74,69,66,.055);
      cursor: pointer;
      transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    }

    .comic-mix .version-card:hover {
      background: #fffaf3;
      box-shadow: 0 18px 44px rgba(74,69,66,.10);
    }

    .comic-mix .version-card.is-active {
      background: #fff8ef;
      box-shadow: 0 14px 34px rgba(74,69,66,.09);
    }

    .comic-mix .version-card.is-active {
      border-color: var(--teal-deep);
      outline: 3px solid rgba(88,121,123,.20);
      outline-offset: -1px;
    }

    .scene-figure {
      margin: 14px 0 0;
      overflow: hidden;
      border: 1px solid var(--warm-beige);
      border-radius: 20px;
      background: #ffffff;
    }

    .scene-figure img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 2;
      object-fit: cover;
    }



    .comic-bubble {
      position: relative;
      /* 兩張卡的句子長度不同，align-self:start 會讓兩個泡泡高度不一。
         改成 stretch，兩個永遠一樣高。 */
      align-self: stretch;
      margin-top: 6px;
      padding: 12px 14px;
      border: 2px solid #47423e;
      border-radius: 18px;
      background: #fff;
      box-shadow: 4px 5px 0 rgba(71,66,62,.08);
      font-size: 14px;
      font-weight: 950;
      line-height: 1.55;
    }

    .comic-bubble::after {
      position: absolute;
      left: 28px;
      top: -10px;
      width: 17px;
      height: 17px;
      border-left: 2px solid var(--ink);
      border-top: 2px solid var(--ink);
      content: "";
      background: #fff;
      transform: rotate(45deg);
    }

    .comic-card-bottom {
      /* 原本標籤和文字並排，文字只剩一半寬度，字多的型別會變三行、兩張卡就不齊。
         改成上下排，文字拿到整張卡的寬度，行數才穩定。 */
      display: grid;
      grid-template-columns: 1fr;
      gap: 5px;
      min-height: 78px;
      margin-top: 0;
      align-content: start;
      justify-items: start;
    }

    .comic-card-bottom small {
      display: inline-flex;
      min-height: 26px;
      padding: 0 8px;
      align-items: center;
      border-radius: 999px;
      color: #426a6c;
      background: rgba(171,193,191,.34);
      font-size: 0.72rem;
      font-weight: 950;
      white-space: nowrap;
    }

    .comic-card-bottom strong {
      font-size: 13px;
      line-height: 1.45;
    }

    .comic-narrator {
      /* 原本是「圓圈 ＋ 文字」兩欄。圓圈拿掉了，這裡改成單欄，
         否則會留一個 54px 的空格。 */
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      margin-top: 20px;
      padding: 18px;
      align-items: center;
      border: 1px solid var(--warm-beige);
      border-radius: 22px;
      background: #fff6e9;
      box-shadow: 0 12px 34px rgba(74,69,66,.055);
    }


    .comic-narrator small,
    .comic-narrator strong { display: block; }
    .comic-narrator small {
      margin-bottom: 4px;
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 950;
    }
    .comic-narrator strong {
      font-size: 18px;
      line-height: 1.55;
    }

    .comic-truth {
      margin-top: 14px;
      padding: 14px 16px;
      border-left: 5px solid #5d8384;
      border-radius: 0 15px 15px 0;
      background: rgba(171,193,191,.15);
    }
    .comic-truth strong { font-size: 14px; }
    .comic-truth p {
      margin: 5px 0 0;
      color: var(--stone-dark);
      font-size: 0.94rem;
      line-height: 1.65;
    }

    .comic-source-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 4px;
    }

    .comic-source {
      display: grid;
      grid-template-rows: auto auto 1fr;
      gap: 4px;
      align-content: start;
      overflow: hidden;
      padding: 10px 10px 12px;
      border: 1px solid var(--warm-beige);
      border-radius: 20px;
      text-align: center;
      background: #fff;
      box-shadow: 0 12px 34px rgba(74,69,66,.055);
      transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
    }

    /* 圖本身已經有顏色（彩色卡片、黃色膠帶），卡片再上色會打架，改成中性白 */
    .comic-source:nth-child(n) { background: #ffffff; }

    .comic-source-img {
      display: block;
      width: min(100%, 118px);
      height: auto;
      margin: 0 auto;
      aspect-ratio: 1 / 1;
      object-fit: contain;
    }

    .comic-source small {
      display: block;
      color: var(--stone-dark);
      font-size: 11.5px;
      line-height: 1.55;
    }
    .comic-source strong,
    .comic-source small { display: block; }
    .comic-source strong { font-size: 14.5px; }
    .comic-source small {
      margin-top: 4px;
      color: var(--stone-dark);
      font-size: 0.92rem;
      line-height: 1.55;
    }

    .comic-mix[data-mode="mbti"] .source-birth,
    .comic-mix[data-mode="mbti"] .source-east,
    .comic-mix[data-mode="mbti"] .source-west {
      opacity: .17;
      filter: grayscale(1);
      transform: scale(.94);
    }

    .comic-mixer-card {
      margin-top: 18px;
      padding: 14px;
      border: 2px dashed rgba(71,66,62,.55);
      border-radius: 24px;
      background: #ffffff;
    }

    .comic-mixer-svg {
      display: block;
      width: 100%;
      max-height: 300px;
    }

    .comic-machine-caption {
      display: grid;
      gap: 5px;
      margin-top: 4px;
      text-align: center;
    }
    .comic-machine-caption strong { font-size: 14px; }
    .comic-machine-caption span {
      color: var(--stone-dark);
      font-size: 0.92rem;
      line-height: 1.6;
    }

    .human-answer-board {
      margin-top: 18px;
    }
    .human-answer-board > p {
      margin: 0 0 9px;
      color: #426a6c;
      font-size: 0.92rem;
      font-weight: 950;
    }

    .comic-answer-bubbles {
      display: grid;
      gap: 8px;
    }
    .comic-answer-bubbles span {
      position: relative;
      min-height: 48px;
      padding: 12px 14px 12px 36px;
      border: 2px solid #47423e;
      border-radius: 18px;
      background: #fff;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.5;
    }
    .comic-answer-bubbles span::before {
      position: absolute;
      left: 13px;
      top: 12px;
      width: 16px;
      height: 16px;
      content: "";
      background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358797b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.4c0 4-3.8 7.2-8.5 7.2a9.8 9.8 0 0 1-2.6-.34L4.5 20l1.2-3.4A6.9 6.9 0 0 1 3.5 11.4C3.5 7.4 7.3 4.2 12 4.2s8.5 3.2 8.5 7.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .comic-mix .prism-caption {
      /* 原本是 position:absolute; left:50% + translateX(-50%)，為舊的滿版橫幅寫的。
         改回正常排列時，transform 也必須一起歸零，否則會往左偏半個身寬。 */
      position: static;
      transform: none;
      width: auto;
      margin: 18px 0 0;
      color: #766f69;
      font-size: 0.92rem;
      line-height: 1.65;
      text-align: center;
    }

    .comic-promise {
      margin-top: 44px;
      text-align: center;
    }
    .comic-promise h3 {
      margin: 0;
      color: #35312e;
      font-size: clamp(23px, 2.2vw, 32px);
      line-height: 1.3;
      letter-spacing: -.035em;
    }
    .comic-promise p {
      max-width: 40em;
      margin: 10px auto 0;
      color: var(--stone-dark);
      font-size: 14.5px;
      line-height: 1.8;
    }

    .comic-strip {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 24px;
      align-items: stretch;
    }

    .comic-strip-panel {
      position: relative;
      display: grid;
      grid-template-rows: auto auto 1fr;
      gap: 13px;
      align-content: start;
      padding: 24px 20px 20px;
      overflow: hidden;
      border: 1px solid var(--warm-beige);
      border-radius: 22px;
      background: #ffffff;
      box-shadow: 0 12px 34px rgba(74,69,66,.055);
    }

    .panel-no {
      position: absolute;
      top: 12px;
      right: 13px;
      color: rgba(71,66,62,.82);
      font-size: 0.72rem;
      font-weight: 950;
    }


    .mini-comic-title {
      display: inline-block;
      justify-self: start;
      min-height: 22px;
      padding: 5px 10px;
      border-radius: 8px;
      background: #e8dca8;
      color: #4a4542;
      font-size: 14px;
      font-weight: 950;
    }

    .comic-strip-panel > p {
      margin: 0;
      /* --stone 在白底只有 4.22:1 */
      color: var(--stone-dark);
      font-size: 0.92rem;
      line-height: 1.75;
    }

    .comic-punchline {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-areas: "stamp copy" "art art";
      gap: 22px 24px;
      margin-top: 44px;
      padding: 28px 30px 26px;
      align-items: start;
      border: 1px solid var(--warm-beige);
      border-radius: 28px;
      background: linear-gradient(110deg, rgba(219,192,127,.25), rgba(228,187,179,.20), rgba(171,193,191,.23));
      box-shadow: 0 12px 34px rgba(74,69,66,.055);
    }

    .punchline-stamp {
      grid-area: stamp;
      align-self: center;
      padding: 10px 13px;
      border: 3px solid #d05c55;
      border-radius: 10px;
      color: #b34f48;
      background: rgba(255,255,255,.65);
      font-size: 14px;
      font-weight: 950;
    }

    .punchline-person {
      position: relative;
      grid-area: art;
      display: block;
    }
    .punchline-head {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1800 / 600;
      border: 1px solid var(--warm-beige);
      border-radius: 20px;
      background: transparent;
      object-fit: cover;
    }

    .punchline-copy { grid-area: copy; }
    .punchline-copy strong,
    .punchline-copy span { display: block; }
    .punchline-copy strong {
      font-size: clamp(17px, 3vw, 43px);
      line-height: 1.15;
      letter-spacing: -.04em;
    }
    .punchline-copy span {
      margin-top: 8px;
      color: var(--stone-dark);
      font-size: 14px;
      line-height: 1.65;
    }

    .comic-question-zone {
      position: relative;
      color: #35312e;
      z-index: 1;
      margin-top: 34px;
      padding: 28px;
      border: 2px dashed rgba(71,66,62,.55);
      border-radius: 28px;
      background: rgba(255,255,255,.64);
    }
    .comic-question-zone h3 {
      margin: 7px 0 0;
      color: #35312e;
      font-size: clamp(17px, 2.7vw, 38px);
      line-height: 1.3;
      letter-spacing: -.035em;
    }

    .comic-mix .universe-question-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 20px;
    }

    .comic-mix .universe-question-button {
      position: relative;
      min-height: 126px;
      padding: 18px 56px 18px 18px;
      border: 1px solid var(--warm-beige);
      border-radius: 20px;
      color: #35312e;
      text-align: left;
      background: #fff;
      box-shadow: 0 12px 34px rgba(74,69,66,.055);
      cursor: pointer;
      transition: transform 180ms ease, box-shadow 180ms ease;
    }
    .comic-mix .universe-question-button:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 38px rgba(74,69,66,.10);
    }
    .comic-mix .universe-question-button::after {
      position: absolute;
      right: 17px;
      bottom: 15px;
      content: "➜";
      color: #426a6c;
      font-size: 23px;
      font-weight: 950;
    }
    .comic-mix .universe-question-button small,
    .comic-mix .universe-question-button strong { display: block; }
    .comic-mix .universe-question-button small {
      margin-bottom: 8px;
      color: #426a6c;
      font-size: 0.72rem;
      font-weight: 950;
    }
    .comic-mix .universe-question-button strong {
      font-size: 16px;
      line-height: 1.55;
    }

    /* ── 做完就拿走 ─────────────────────────────────
       字級與間距沿用真站的階梯（h3 1.28rem / 內文 0.92rem），
       兩欄在 760 以下改成一欄。 */
    .comic-takeaway {
      position: relative;
      z-index: 1;
      margin-top: 34px;
      padding: 28px 28px 30px;
      border: 1px solid var(--warm-beige);
      border-radius: 20px;
      background: rgba(255,255,255,.72);
    }

    .comic-takeaway h3 {
      margin: 6px 0 0;
      color: var(--ink);
      font-size: 1.28rem;
      font-weight: 950;
      line-height: 1.5;
      letter-spacing: -.02em;
    }

    .takeaway-lead {
      max-width: 46em;
      margin: 12px 0 0;
      color: var(--stone-dark);
      font-size: 0.98rem;
      line-height: 1.85;
    }

    /* 最後一句是整段的重點，要比內文重、但不搶標題 */
    .takeaway-punch {
      margin: 20px 0 0;
      padding-top: 18px;
      border-top: 1px solid var(--beige);
      color: var(--ink);
      font-size: 1.02rem;
      font-weight: 900;
      line-height: 1.9;
    }

    .takeaway-punch em {
      color: var(--teal-dark);
      font-style: normal;
      font-weight: 950;
    }

    .takeaway-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 22px;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    .takeaway-grid li {
      padding: 14px 16px;
      border: 1px solid var(--beige);
      border-radius: 14px;
      background: #fff;
    }

    .takeaway-grid strong {
      display: block;
      color: var(--ink);
      font-size: 0.98rem;
      font-weight: 950;
      line-height: 1.5;
    }

    .takeaway-grid span {
      display: block;
      margin-top: 6px;
      color: var(--stone-dark);
      font-size: 0.92rem;
      font-weight: 400;
      line-height: 1.75;
    }

    /* 標籤範例用膠囊標出來，讓人一眼看到「原來會拿到這種東西」 */
    .takeaway-grid em {
      display: inline-block;
      padding: 1px 8px;
      border-radius: 999px;
      background: rgba(219,192,127,.32);
      color: var(--ink);
      font-style: normal;
      font-weight: 900;
    }

    @media (max-width: 760px) {
      .comic-takeaway { padding: 22px 18px 24px; }
      .takeaway-grid { grid-template-columns: 1fr; gap: 12px; }
    }

    .comic-footer {
      position: relative;
      z-index: 1;
      display: flex;
      margin-top: 28px;
      align-items: center;
      justify-content: center;
      gap: 18px;
      text-align: left;
    }
    /* 外觀對齊首頁的 .cta（「看看，哪一段最像我」那顆）：同一頁的主要按鈕
       應該長一樣。--tealDeep 由首頁的 .page 提供，這個區塊在它底下拿得到；
       仍留 fallback，單獨預覽這份 CSS 時才不會沒有顏色。 */
    .comic-footer .mix-cta {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 54px;
      padding: 14px 24px;
      border: 0;
      border-radius: 18px;
      color: #fff;
      background: var(--tealDeep, #58797b);
      box-shadow: 0 14px 32px rgb(90 122 124 / .24);
      font-size: 1rem;
      font-weight: 800;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .comic-footer .mix-cta:hover {
      transform: translateY(-2px);
      background: var(--tealDeep, #58797b);
      box-shadow: 0 18px 38px rgb(90 122 124 / .3);
    }
    .comic-footer p {
      max-width: 620px;
      margin: 0;
      color: #736d67;
      font-size: 0.92rem;
      line-height: 1.6;
    }

    @media (max-width: 1080px) {
      .comic-main-grid { grid-template-columns: 1fr; }
      .comic-storyboard,
      .comic-method { transform: none; }
      /* 原本是 2 欄 + 第三格全寬，第三格會比前兩格寬 377px。
         三格是 01→02→03 的敘事順序，直排反而更好讀，而且永遠等寬。 */
      .comic-strip { grid-template-columns: 1fr; }
      .comic-source-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 650px) {
      .mix-panel.comic-mix {
        width: 100%;
        /* 左右歸零同上：沒有卡片了，內容直接對齊頁面容器 */
        padding: 28px 0 42px;
      }
      .comic-mix .mix-hero { margin-bottom: 26px; }
      .comic-mix .mix-hero h2 { font-size: 30px; }
      .comic-mix .mix-intro {
        margin-top: 16px;
        font-size: 15px;
        line-height: 1.72;
      }
      .comic-mix .mix-view-switch {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr;
      }
      /* 手機也跟著放大三級（原本壓到 11px）。內距收窄一些，兩顆鈕加起來
         才不會撐破膠囊。 */
      .comic-mix .mix-mode-button {
        min-height: 48px;
        padding: 0 14px;
        font-size: 17px;
      }
      .comic-storyboard,
      .comic-method {
        padding: 19px 14px;
        border-radius: 23px;
        box-shadow: 0 12px 34px rgba(74,69,66,.055);
      }
      .comic-storyboard h3 { font-size: 19px; }
      .comic-situation { grid-template-columns: 1fr; gap: 7px; }
      .comic-situation span { width: max-content; }
      /* 手機也維持兩欄並排（原本被壓成單欄）。欄寬只剩一半，所以內距與字級
         一起收緊；等高交給 grid 預設的 stretch，兩張自然等於較高那張，
         不必也不該再鎖 min-height。 */
      .comic-version-deck { grid-template-columns: 1fr 1fr; gap: 9px; }
      .comic-mix .version-card { padding: 12px 10px; }
      .comic-mix .version-card .comic-bubble { font-size: 13px; line-height: 1.62; }
      .comic-mix .version-card .version-fear-label { font-size: 11px; }
      .comic-mix .version-card .version-text { font-size: 12.5px; line-height: 1.6; }
      /* ⛔ 不要在這裡鎖最小高度。兩張卡片並排時，grid 預設的 stretch already
         讓它們等高（等於內容較多那張）；鎖死 323px 只會在文字短時下面空一大片
         ——那正是先前回報的跑版。 */
      .comic-mix .version-card { min-height: 0; }
      .comic-source-row {
        grid-template-columns: 1fr 1fr;
      }
      .comic-source { min-height: 96px; }
      .comic-mixer-card { padding: 8px; }
      .comic-mixer-svg { max-height: 250px; }
      /* 手機版改成橫向輪播：卡片佔 60%，左右各露出約 1/5，讓人一眼看出可以滑。
         刻意不放左右箭頭，靠露出的鄰卡當提示。
         無限循環由 mbti-comic-block.tsx 負責（前後各複製一份卡片，滑進緩衝區時
         無聲跳位），所以這裡不做任何頭尾的 padding 補償。 */
      .comic-strip {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* ⚠️ 左右內距一定要歸零。.translator-strip 的手機規則給了 padding:18px，
           而 flex-basis 的百分比是相對 content box 算的：留著內距的話
           60% 會變成 (360-36)×0.6=194px，露出的比例就跟著跑掉。
           歸零之後 60% 才真的是可視寬的 60%，左右各露出 20%。 */
        padding-inline: 0;
      }
      .comic-strip::-webkit-scrollbar { display: none; }
      .comic-strip-panel,
      .comic-strip-panel:last-child {
        grid-column: auto;
        min-height: 300px;
        transform: none;
        flex: 0 0 60%;
        scroll-snap-align: center;
        /* 一次只走一張：沒有這行的話，滑快一點慣性會一路衝過好幾張，
           使用者很難停在想看的那張上。always 會讓每個 snap 點都攔下來。 */
        scroll-snap-stop: always;
      }
      .comic-punchline {
        grid-template-columns: 1fr;
        grid-template-areas: "stamp" "copy" "art";
        gap: 14px;
        padding: 22px 18px;
      }
      .punchline-stamp { grid-area: stamp; width: max-content; }
      .punchline-copy { grid-area: copy; }
      .punchline-person { grid-area: art; }
      .punchline-copy strong { font-size: 21px; }
      .punchline-head { width: 100%; height: auto; }
      .comic-question-zone { padding: 21px 14px; }
      .comic-mix .universe-question-grid { grid-template-columns: 1fr; }
      .comic-footer {
        display: grid;
        gap: 12px;
        text-align: center;
      }
      .comic-footer .mix-cta { width: 100%; }
      .comic-footer p { text-align: left; }
    }

    /* v15：手刻 SVG 改為生圖 img 插槽，新增對應樣式 */
    .comic-mixer-svg {
      aspect-ratio: 520 / 300;
      object-fit: cover;
    }

    .comic-strip-panel-img {
      display: block;
      width: 100%;
      height: auto;
      margin-top: 4px;
      border-radius: 14px;
      aspect-ratio: 280 / 180;
      object-fit: cover;
    }