:root {
        --brand: #61d0df;
        --brand-dark: #3fb7c7;
        --brand-darker: #2b8a97;
        --brand-light: #e8f8fb;
        --brand-tint: #f4fbfc;
        --deep: #0e2f3a;
        --deep-2: #123846;
        --purple: #8c5adc;
        --purple-light: #f5f0ff;
        --ink: #14232b;
        --ink-2: #35474f;
        --ink-3: #52636c;
        --line: #e5eef1;
        --tree-line: #a9d8de;
        --bg: #fafdfe;
        --white: #ffffff;
        --warn: #d99a1f;
        --warn-bg: #fff7e6;
        --warn-line: #fbe7b8;
        --danger: #ea5b45;
        --danger-bg: #fdece8;
        --danger-line: #f7ccc0;
        --ok: #2e9968;
        --ok-bg: #e9f8f0;
        --ok-line: #c6e9d4;
        --shadow: 0 4px 24px rgba(97, 208, 223, 0.1);
        --shadow-lg: 0 10px 40px rgba(97, 208, 223, 0.18);
        --radius: 16px;
        --radius-sm: 10px;
      }
      * { box-sizing: border-box; margin: 0; padding: 0; }
      html { scroll-behavior: smooth; }
      body {
        font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
        background: var(--bg);
        color: var(--ink);
        line-height: 1.8;
        font-size: 17px;
        -webkit-font-smoothing: antialiased;
      }
      img { max-width: 100%; }

      /* ===== 頂欄 ===== */
      .top-bar {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
      }
      .top-bar-inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 12px 24px;
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .menu-btn {
        display: none;
        background: var(--brand-light);
        color: var(--brand-darker);
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 20px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .brand-logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
      .brand-logo .brand-img { height: 40px; width: auto; display: block; flex-shrink: 0; }
      .brand-logo .brand-sep { width: 1px; height: 22px; background: var(--line); flex-shrink: 0; }
      .brand-logo .brand-txt {
        color: var(--ink-2);
        font-weight: 700;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .top-chapter {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--brand-darker);
        font-weight: 700;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 42vw;
      }
      .top-chapter i { font-size: 18px; flex-shrink: 0; }
      .progress-track { height: 6px; background: var(--line); position: relative; }
      .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--brand-dark)); transition: width 0.3s ease; }
      .backdrop { display: none; }

      /* ===== 主容器 ===== */
      .layout { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 272px 1fr; gap: 28px; padding: 24px; }

      /* ===== 側邊目錄 ===== */
      .sidebar { position: sticky; top: 68px; height: calc(100vh - 88px); overflow-y: auto; padding-right: 6px; }
      .sidebar::-webkit-scrollbar { width: 4px; }
      .sidebar::-webkit-scrollbar-thumb { background: var(--brand-light); border-radius: 4px; }
      .side-group-title {
        font-size: 12.5px;
        letter-spacing: 1px;
        color: var(--ink-2);
        margin: 18px 0 8px 10px;
        font-weight: 800;
      }
      .side-group-title:first-child { margin-top: 4px; }
      .side-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; }
      .side-nav a {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 10px;
        border-radius: 10px;
        color: var(--ink-2);
        text-decoration: none;
        font-size: 14.5px;
        font-weight: 500;
        transition: all 0.2s;
        position: relative;
      }
      .side-nav a:hover { background: var(--brand-tint); color: var(--brand-darker); }
      .side-nav a.active { background: var(--brand); color: #fff; font-weight: 700; }
      .side-nav a.active::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        background: var(--brand);
        border-radius: 2px;
      }
      .side-nav i.side-ic { font-size: 16px; opacity: 0.85; flex-shrink: 0; }
      .side-nav .side-check { margin-left: auto; font-size: 16px; color: var(--ok); opacity: 0; flex-shrink: 0; }
      .side-nav a.is-read .side-check { opacity: 1; }

      /* ===== 主要內容 ===== */
      .main { min-width: 0; }
      .hero, .chapter, .quiz { display: none; }
      .hero.active, .chapter.active, .quiz.active { display: block; animation: fadeUp 0.28s ease; }
      @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

      /* Hero / 首頁 */
      .home-hero { text-align: center; padding: 56px 28px 48px; background: linear-gradient(135deg, var(--deep), var(--deep-2)); border-radius: 24px; }
      /* 廣告訊號：只在首頁保留一個安靜的視覺焦點。 */
      .home-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: radial-gradient(circle at 82% 18%, rgba(97,208,223,.22), transparent 34%), linear-gradient(125deg, #0b2d3c, #154c5b);
      }
      .home-hero::before {
        content: "";
        position: absolute;
        width: 380px;
        aspect-ratio: 1;
        right: -95px;
        top: -125px;
        border: 1px solid rgba(176,238,245,.3);
        border-radius: 50%;
        box-shadow: 0 0 0 58px rgba(176,238,245,.075), 0 0 0 116px rgba(176,238,245,.045);
        pointer-events: none;
        z-index: -1;
      }
      .home-hero h1 { overflow: hidden; }
      .hero.active .home-hero h1 { animation: headlineReveal .7s cubic-bezier(.2,.8,.2,1) both; }
      @keyframes headlineReveal { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: translateY(0); } }
      .home-hero .home-logo { height: 68px; width: auto; margin: 0 auto 24px; display: block; background: #fff; padding: 10px 22px; border-radius: 14px; }
      .home-hero h1 { font-size: 42px; font-weight: 900; color: #fff; letter-spacing: .5px; margin-bottom: 12px; }
      .home-hero .home-sub { color: rgba(255,255,255,.92); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
      .home-hero .home-tagline { color: rgba(255,255,255,.6); font-size: 14px; }
      .home-hero { text-align: left; padding: 58px 54px 44px; }
      .home-hero h1 { max-width: 760px; font-size: clamp(34px, 4vw, 54px); line-height: 1.25; }
      .home-hero .home-sub { max-width: 680px; font-size: 20px; line-height: 1.5; }
      .home-hero .home-tagline { color: rgba(255,255,255,.84); font-size: 15px; }
      .home-path { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; color: #e7f7fa; font-size: 14px; font-weight: 700; }
      .home-path span { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid rgba(231,247,250,.34); border-radius: 999px; background: rgba(255,255,255,.08); }
      .home-path i { opacity: .65; font-size: 17px; }
      .home-hero .home-quote {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 22px;
        padding: 12px 22px;
        background: #fff;
        color: var(--brand-darker);
        border-radius: 999px;
        font-weight: 700;
        font-size: 14.5px;
      }
      .goal-banner {
        max-width: 760px;
        margin: 28px auto 0;
        background: linear-gradient(135deg, var(--brand-tint), var(--white));
        border: 1.5px solid var(--brand-light);
        border-radius: var(--radius);
        padding: 20px 26px;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        text-align: left;
      }
      .goal-banner i { color: var(--brand-darker); font-size: 24px; flex-shrink: 0; margin-top: 2px; }
      .goal-banner .gb-label { color: var(--brand-darker); font-weight: 800; font-size: 12.5px; letter-spacing: 1px; margin-bottom: 4px; }
      .goal-banner .gb-text { color: var(--ink); font-weight: 600; font-size: 15.5px; }
      .outline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
      .outline-card {
        display: block;
        text-decoration: none;
        background: var(--white);
        border: 1.5px solid var(--line);
        border-radius: var(--radius);
        padding: 22px 18px;
        transition: all 0.25s;
        position: relative;
        overflow: hidden;
      }
      .outline-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
      .outline-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
      .outline-card:hover::before { transform: scaleX(1); }
      .outline-card .oc-num { font-size: 40px; font-weight: 900; color: var(--brand-darker); margin-bottom: 8px; line-height: 1; }
      .outline-card .oc-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
      .outline-card .oc-sub { color: var(--ink-3); font-size: 13px; line-height: 1.6; }
      .outline-card:nth-child(2) { --card-accent: #3155ad; --card-soft: #edf2ff; }
      .outline-card:nth-child(3) { --card-accent: #6b48aa; --card-soft: #f4edff; }
      .outline-card:nth-child(4) { --card-accent: #a94f24; --card-soft: #fff2e9; }
      .outline-card { --card-accent: #08717d; --card-soft: #e5f7f8; }
      .outline-card::before { background: var(--card-accent); }
      .outline-card:hover, .outline-card:focus-visible { border-color: var(--card-accent); background: var(--card-soft); }
      .outline-card .oc-num { color: var(--card-accent); }
      .outline-card { min-height: 158px; padding: 24px 26px; background: linear-gradient(125deg, var(--white) 72%, var(--card-soft)); }
      .outline-card::before { transform: scaleX(1); height: 4px; }
      .outline-card .oc-num { font-size: 34px; margin-bottom: 12px; }
      .outline-card .oc-title { font-size: 19px; line-height: 1.4; }
      .outline-card .oc-sub { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
      .outline-card .oc-count { display: inline-block; margin-top: 18px; padding: 4px 9px; border-radius: 6px; background: var(--card-soft); color: var(--card-accent); font-size: 12px; font-weight: 800; }
      .quiz-callout { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
      .quiz-callout p { color: var(--ink-2); font-size: 14px; }
      .quiz-callout a { color: #08717d; font-size: 14px; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }

      /* FX209：章節切換時以色彩辨識課程，不改動教學內容。 */
      body { --chapter-accent: #08717d; --chapter-soft: #e5f7f8; --chapter-dark: #0b4050; }
      body[data-chapter="2"] { --chapter-accent: #3155ad; --chapter-soft: #edf2ff; --chapter-dark: #1b397b; }
      body[data-chapter="3"] { --chapter-accent: #6b48aa; --chapter-soft: #f4edff; --chapter-dark: #3d276b; }
      body[data-chapter="4"] { --chapter-accent: #a94f24; --chapter-soft: #fff2e9; --chapter-dark: #733817; }
      .progress-fill { background: var(--chapter-accent); transition: width .3s ease, background-color .35s ease; }
      .side-nav a.active { background: var(--chapter-accent); }
      .side-nav a.active::before { background: var(--chapter-accent); }
      .top-chapter { color: var(--chapter-accent); transition: color .35s ease; }
      .chapter.active { border-top: 5px solid var(--chapter-accent); }
      .chapter .ch-num { background: var(--chapter-accent); box-shadow: none; }

      /* 課程內容區塊 */
      .chapter { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 34px 36px; margin-bottom: 24px; scroll-margin-top: 90px; }
      .ch-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-darker); background: var(--brand-tint); border: 1px solid var(--brand-light); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; margin-bottom: 12px; }
      .ch-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 2px dashed var(--line); }
      .ch-num { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--white); font-weight: 800; font-size: 21px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(97, 208, 223, 0.35); flex-shrink: 0; }
      .ch-num i { font-size: 24px; }
      .ch-title { flex: 1; min-width: 0; }
      .ch-title h2 { font-size: 27px; font-weight: 800; color: var(--ink); line-height: 1.3; }
      .ch-title .ch-sub { color: var(--ink-2); font-size: 13.5px; margin-top: 6px; }

      .chapter h3 { font-size: 20px; font-weight: 800; color: var(--ink); margin: 32px 0 14px; display: flex; align-items: center; gap: 10px; }
      .chapter h3:first-of-type { margin-top: 0; }
      .chapter h3 i { color: var(--brand-darker); background: var(--brand-tint); font-size: 17px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
      .chapter h4 { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 16px 0 8px; }
      .chapter p { color: var(--ink); margin: 8px 0; }
      .chapter > p, .chapter > ul, .chapter > ol { max-width: 760px; }
      .chapter p.lead { color: var(--ink); font-size: 18px; font-weight: 600; }
      .chapter ul, .chapter ol { padding-left: 22px; color: var(--ink); margin: 8px 0; }
      .chapter li { margin: 6px 0; }
      .chapter strong { color: var(--ink); font-weight: 700; }

      /* 章節開場橫幅（大章第一頁） */
      .chapter-intro {
        background: linear-gradient(135deg, var(--deep), var(--deep-2));
        border: none;
        border-radius: 20px 20px 0 0;
        margin: -34px -36px 28px;
        padding: 40px 36px 32px;
        color: #fff;
      }
      .chapter-intro .ch-eyebrow { display: inline-block; background: none; border: none; padding: 0; margin-bottom: 14px; color: #fff; font-size: 26px; font-weight: 900; letter-spacing: .3px; line-height: 1.3; }
      .chapter-intro p.lead { color: rgba(255,255,255,.88); font-weight: 500; }
      .chapter-intro .ci-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
      .chapter-intro .ci-tag { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; }
      .chapter-intro .ci-tag small { display: block; color: rgba(255,255,255,.65); font-weight: 500; font-size: 11.5px; margin-top: 2px; }

      .src-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--purple-light); color: var(--purple); font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }

      /* 卡片格 */
      .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 16px 0; }
      .card-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
      .info-card { background: var(--brand-tint); border: 1.5px solid var(--brand-light); border-radius: var(--radius-sm); padding: 18px; }
      .info-card .ic-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
      .info-card .ic-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--white); color: var(--brand-darker); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
      .info-card .ic-title { font-weight: 800; color: var(--ink); font-size: 14.5px; }
      .info-card .ic-desc { color: var(--ink-2); font-size: 13px; line-height: 1.65; }
      .info-card .ic-desc + .ic-desc { margin-top: 2px; }
      .info-card .ic-tag { display: inline-block; margin-top: 8px; background: var(--white); color: var(--brand-darker); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--brand-light); }
      .info-card .ic-example { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); font-style: normal; background: var(--white); padding: 6px 10px; border-radius: 8px; }

      .info-card.warn { background: var(--warn-bg); border-color: var(--warn-line); }
      .info-card.warn .ic-icon { color: var(--warn); }
      .info-card.danger { background: var(--danger-bg); border-color: var(--danger-line); }
      .info-card.danger .ic-icon { color: var(--danger); }
      .info-card.ok { background: var(--ok-bg); border-color: var(--ok-line); }
      .info-card.ok .ic-icon { color: var(--ok); }
      .info-card.purple { background: var(--purple-light); border-color: #e4d6f5; }
      .info-card.purple .ic-icon { color: var(--purple); }

      .priority-tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; letter-spacing: 0.5px; }
      .priority-tag.must { background: var(--danger-bg); color: var(--danger); }
      .priority-tag.important { background: var(--warn-bg); color: var(--warn); }
      .priority-tag.suggest { background: var(--brand-light); color: var(--brand-darker); }
      .priority-tag.daily { background: var(--ok-bg); color: var(--ok); }
      .priority-tag.core { background: var(--danger-bg); color: var(--danger); }
      .priority-tag.cycle { background: var(--purple-light); color: var(--purple); }
      .priority-tag.weekly { background: var(--warn-bg); color: var(--warn); }

      /* 平台卡（第一課） */
      .platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 16px 0; }
      .platform-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 20px 16px; text-align: center; transition: all 0.2s; }
      .platform-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-3px); }
      .platform-card i { font-size: 34px; color: var(--brand-darker); margin-bottom: 10px; display: block; }
      .platform-card .pc-name { font-weight: 800; color: var(--ink); font-size: 15px; margin-bottom: 6px; }
      .platform-card .pc-desc { color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }

      /* 數字磚 */
      .stat-bricks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
      .stat-brick { background: linear-gradient(135deg, var(--brand-tint), var(--white)); border: 1.5px solid var(--brand-light); border-radius: var(--radius-sm); padding: 22px 18px; text-align: center; }
      .stat-brick .sb-num { font-size: 38px; font-weight: 900; color: var(--brand-darker); margin-bottom: 6px; }
      .stat-brick .sb-desc { color: var(--ink); font-size: 13px; font-weight: 600; }
      .stat-brick .sb-sub { color: var(--ink-3); font-size: 12px; margin-top: 3px; }

      /* 是/不是 兩欄比較 */
      .compare-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; align-items: start; }
      .compare-col { border-radius: var(--radius); padding: 18px; }
      .compare-col.pos { background: var(--ok-bg); border: 1.5px solid var(--ok-line); }
      .compare-col.neg { background: var(--danger-bg); border: 1.5px solid var(--danger-line); }
      .compare-col-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; margin-bottom: 12px; }
      .compare-col.pos .compare-col-head { color: var(--ok); }
      .compare-col.neg .compare-col-head { color: var(--danger); }
      .compare-item { background: var(--white); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
      .compare-item:last-child { margin-bottom: 0; }
      .compare-item .ci-h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 14px; margin-bottom: 4px; }
      .compare-item .ci-h i { color: inherit; }
      .compare-col.pos .compare-item .ci-h i { color: var(--ok); }
      .compare-col.neg .compare-item .ci-h i { color: var(--danger); }
      .compare-item .ci-b { color: var(--ink-2); font-size: 13px; }

      /* VS 兩欄清單 */
      .vs-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin: 18px 0; }
      .vs-col { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
      .vs-col h4 { color: var(--brand-darker); font-size: 15px; font-weight: 800; margin: 0 0 10px; }
      .vs-col ul { padding-left: 18px; margin: 0; }
      .vs-badge { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; box-shadow: var(--shadow); }

      /* 表格 */
      .table-wrap { overflow-x: auto; margin: 16px 0; border-radius: var(--radius-sm); border: 1px solid var(--line); }
      table.data-table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 13.5px; }
      table.data-table th, table.data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
      table.data-table th { background: var(--brand); color: #fff; font-weight: 800; white-space: nowrap; }
      table.data-table td { color: var(--ink-2); }
      table.data-table td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }
      table.data-table tr:last-child td { border-bottom: none; }
      table.data-table tr:hover td { background: var(--brand-tint); }
      .compare-table td:nth-child(2) { background: var(--brand-tint); }
      .compare-table td:nth-child(3) { background: #fdf6f0; }
      .compare-table tbody tr:nth-child(6) td:first-child::before { content: "\25CF  "; color: var(--ok); }
      .compare-table tbody tr:nth-child(7) td:first-child::before { content: "\25CF  "; color: var(--danger); }

      /* 提示框 */
      .tips-box { display: flex; align-items: flex-start; gap: 12px; border-radius: var(--radius-sm); padding: 16px 20px; margin: 18px 0; }
      .tips-box.brand { background: linear-gradient(135deg, var(--deep), var(--deep-2)); border-left: none; }
      .tips-box.warn { background: var(--warn-bg); border-left: 4px solid var(--warn); }
      .tips-box.danger { background: var(--danger-bg); border-left: 4px solid var(--danger); }
      .tips-box.ok { background: linear-gradient(135deg, var(--ok), #1f7a52); border-left: none; }
      .tips-box i { font-size: 21px; flex-shrink: 0; margin-top: 2px; }
      .tips-box.brand i { color: #fff; }
      .tips-box.warn i { color: var(--warn); }
      .tips-box.danger i { color: var(--danger); }
      .tips-box.ok i { color: #fff; }
      .tips-box .tb-label { font-weight: 800; font-size: 12.5px; letter-spacing: 0.5px; margin-bottom: 4px; }
      .tips-box.brand .tb-label { color: rgba(255,255,255,.7); }
      .tips-box.warn .tb-label { color: var(--warn); }
      .tips-box.danger .tb-label { color: var(--danger); }
      .tips-box.ok .tb-label { color: rgba(255,255,255,.75); }
      .tips-box .tb-text { color: var(--ink); font-size: 14.5px; font-weight: 500; }
      .tips-box.brand .tb-text, .tips-box.ok .tb-text { color: #fff; }

      /* 標籤雲 */
      .tag-group { margin: 14px 0; }
      .tag-group .tg-title { font-weight: 800; color: var(--brand-darker); font-size: 13.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
      .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
      .tag-chip { background: var(--brand-tint); border: 1px solid var(--brand-light); color: var(--ink-2); font-size: 12.5px; padding: 6px 12px; border-radius: 8px; }

      /* 自訂受眾群組 */
      .audience-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; }
      .audience-group { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; }
      .audience-group h4 { color: var(--brand-darker); font-size: 14.5px; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
      .audience-group .ag-highlight { display: inline-block; background: var(--brand-light); color: var(--brand-darker); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 6px; margin-bottom: 10px; }
      .audience-group ul { padding-left: 18px; margin: 0; }
      .audience-group li { font-size: 12.8px; color: var(--ink-2); margin: 4px 0; }

      /* 漏斗 */
      .funnel { display: flex; align-items: stretch; gap: 6px; margin: 18px 0; }
      .funnel-stage { flex: 1; background: linear-gradient(135deg, var(--brand-tint), var(--white)); border: 1.5px solid var(--brand-light); border-radius: var(--radius-sm); padding: 16px 12px; text-align: center; }
      .funnel-stage .fs-title { font-weight: 800; color: var(--ink); font-size: 14px; margin-bottom: 5px; }
      .funnel-stage .fs-metric { color: var(--brand-darker); font-size: 12px; font-weight: 700; }
      .funnel-stage .fs-extra { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--brand-light); color: var(--ink-2); font-size: 12px; line-height: 1.5; }
      .funnel-stage .fs-quote { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--brand-light); color: var(--ink-3); font-size: 11.5px; line-height: 1.5; font-style: normal; }
      .funnel-arrow { display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 18px; flex-shrink: 0; width: 20px; }

      /* 漏斗視覺化（梯形，2-1／3-1／3-6 用） */
      .funnel-viz { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 0 28px; margin: 22px 0; }
      .funnel-graphic { position: relative; }
      .funnel-svg { width: 100%; height: 100%; display: block; }
      .funnel-svg .fv-b1 { fill: var(--brand-tint); }
      .funnel-svg .fv-b2 { fill: var(--brand-light); }
      .funnel-svg .fv-b3 { fill: var(--brand); }
      .funnel-svg .fv-b4 { fill: var(--brand-darker); }
      .funnel-labels { position: absolute; inset: 0; display: flex; flex-direction: column; text-align: center; }
      .funnel-label { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px 22px; }
      .funnel-label .fl-title { font-weight: 800; font-size: 13.5px; }
      .funnel-label .fl-metric { font-size: 11px; font-weight: 600; opacity: .8; }
      .funnel-label:nth-child(1), .funnel-label:nth-child(2) { color: var(--ink); }
      .funnel-label:nth-child(3), .funnel-label:nth-child(4) { color: #fff; }
      .funnel-rows { display: flex; flex-direction: column; }
      .funnel-row { flex: 1; display: flex; align-items: center; color: var(--ink-2); font-size: 13px; line-height: 1.55; padding: 8px 0 8px 20px; border-left: 2px dashed var(--brand-light); position: relative; }
      .funnel-row::before { content: ""; position: absolute; left: -2px; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }

      /* 三層級樹狀圖 */
      .tree-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
      .tree-legend .tl-item { flex: 1; min-width: 150px; background: var(--brand-tint); border: 1px solid var(--brand-light); border-radius: 10px; padding: 10px 14px; text-align: center; }
      .tree-legend .tl-item b { display: block; color: var(--brand-darker); font-size: 13.5px; }
      .tree-legend .tl-item span { color: var(--ink-3); font-size: 11.5px; }
      .tree-diagram { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px 0; }
      .tree-node { background: linear-gradient(135deg, var(--deep), var(--deep-2)); color: var(--white); border-radius: 12px; padding: 14px 26px; font-weight: 800; font-size: 14.5px; text-align: center; box-shadow: var(--shadow); }
      .tree-arrow-down { color: var(--deep); font-size: 20px; }
      .tree-groups { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; width: 100%; margin-top: 22px; }
      .tree-group { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; padding-top: 22px; flex: 1; min-width: 150px; max-width: 230px; }
      .tree-group::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 22px; background: var(--tree-line); }
      .tree-group::after { content: ""; position: absolute; top: 0; height: 2px; background: var(--tree-line); }
      .tree-group:first-child::after { left: 50%; right: -11px; }
      .tree-group:last-child::after { left: -11px; right: 50%; }
      .tree-group:not(:first-child):not(:last-child)::after { left: -11px; right: -11px; }
      .tree-adset { background: var(--brand); color: #fff; border: none; border-radius: 10px; padding: 10px 18px; font-weight: 700; font-size: 13px; text-align: center; box-shadow: 0 3px 10px rgba(97,208,223,.3); }
      .tree-ads { display: flex; gap: 8px; padding-top: 16px; position: relative; }
      .tree-ad { background: var(--warn); border: none; border-radius: 8px; padding: 8px 12px; font-size: 11.5px; font-weight: 700; color: #fff; position: relative; flex: 1; text-align: center; }
      .tree-ad::before { content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 2px; height: 16px; background: var(--tree-line); }
      .tree-ad::after { content: ""; position: absolute; top: -16px; height: 2px; background: var(--tree-line); }
      .tree-ad:first-child::after { left: 50%; right: -4px; }
      .tree-ad:last-child::after { left: -4px; right: 50%; }

      /* 設定卡（受眾實例） */
      .setting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 16px 0; }
      .setting-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
      .setting-card .sc-quote { color: var(--ink); font-weight: 700; font-size: 14.5px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1.5px dashed var(--line); }
      .setting-card .sc-row { display: flex; gap: 8px; font-size: 12.8px; margin: 6px 0; align-items: flex-start; }
      .setting-card .sc-row .sc-k { color: var(--ink-3); font-weight: 700; flex-shrink: 0; min-width: 52px; }
      .setting-card .sc-row.include .sc-k { color: var(--ok); }
      .setting-card .sc-row.exclude .sc-k { color: var(--danger); }
      .setting-card .sc-v { color: var(--ink-2); }
      .setting-card .sc-reach { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--line); display: flex; justify-content: space-between; align-items: center; }
      .setting-card .sc-reach .sc-reach-label { color: var(--ink-3); font-size: 12px; }
      .setting-card .sc-reach .sc-reach-num { color: var(--brand-darker); font-weight: 900; font-size: 23px; }

      /* 組合卡（包含排除） */
      .combo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 16px 0; }
      .combo-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
      .combo-card .cc-title { font-weight: 800; color: var(--ink); font-size: 14.5px; margin-bottom: 12px; }
      .combo-card .cc-line { display: flex; gap: 8px; font-size: 13px; margin: 6px 0; }
      .combo-card .cc-line .cc-k { font-weight: 800; flex-shrink: 0; min-width: 44px; }
      .combo-card .cc-line.include .cc-k { color: var(--ok); }
      .combo-card .cc-line.exclude .cc-k { color: var(--danger); }
      .combo-card .cc-line .cc-v { color: var(--ink-2); }
      .combo-card .cc-desc { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--ink-3); font-size: 12.5px; }

      /* Tabs（四階段影片策略） */
      .tab-nav { display: flex; gap: 8px; margin: 18px 0 16px; padding: 6px; background: #f0f3f5; border-radius: 12px; border: 1px solid var(--line); flex-wrap: wrap; }
      .tab-btn { flex: 1; min-width: 100px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 14px; background: transparent; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: all 0.2s; }
      .tab-btn:hover { background: rgba(255, 255, 255, 0.7); }
      .tab-btn.active { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--white); box-shadow: 0 4px 12px rgba(97, 208, 223, 0.35); }
      .tab-panel { display: none; }
      .tab-panel.active { display: block; animation: fadeUp 0.25s ease; }
      .pairing-box { background: var(--brand-tint); border: 1.5px solid var(--brand-light); border-radius: var(--radius-sm); padding: 16px 20px; margin: 16px 0; }
      .pairing-box h4 { color: var(--brand-darker); margin: 0 0 10px; font-size: 14px; }
      .pairing-row { display: flex; gap: 10px; font-size: 13px; margin: 7px 0; }
      .pairing-row .pr-k { color: var(--ink-3); font-weight: 700; min-width: 68px; flex-shrink: 0; }
      .pairing-row .pr-v { color: var(--ink); }
      .example-box { background: var(--white); border: 1.5px dashed var(--line); border-radius: var(--radius-sm); padding: 14px 18px; margin: 12px 0; }
      .example-box .eb-item { font-size: 13px; color: var(--ink-2); margin: 6px 0; }
      .example-box .eb-item strong { color: var(--brand-darker); }

      /* 時間軸（測試期／優化期／放大期 色帶） */
      .timeline { display: flex; gap: 0; margin: 24px 0 26px; }
      .timeline-item { flex: 1; position: relative; padding-top: 26px; text-align: center; }
      .timeline-item::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 5px; border-radius: 3px; }
      .timeline-item.phase-test::before { background: var(--brand-tint); }
      .timeline-item.phase-optimize::before { background: var(--brand); }
      .timeline-item.phase-scale::before { background: var(--deep); }
      .timeline-item .ti-dot { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border-radius: 50%; background: #fff; z-index: 2; }
      .timeline-item.phase-test .ti-dot { border: 3px solid var(--brand-dark); }
      .timeline-item.phase-optimize .ti-dot { border: 3px solid var(--brand-darker); }
      .timeline-item.phase-scale .ti-dot { border: 3px solid var(--deep); }
      .timeline-item .ti-title { font-weight: 800; color: var(--ink); font-size: 14.5px; margin: 16px 0 6px; }
      .timeline-item .ti-desc { color: var(--ink-2); font-size: 13px; padding: 0 10px; }

      /* 循環流程（5階段） */
      .cycle-flow { display: flex; align-items: stretch; gap: 4px; margin: 20px 0; }
      .cycle-step { flex: 1; min-width: 0; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 16px 12px; text-align: center; position: relative; }
      .cycle-arrow { display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 16px; flex-shrink: 0; width: 18px; }
      .cycle-step .cs-n { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; margin: 0 auto 8px; }
      .cycle-step .cs-title { font-weight: 800; color: var(--ink); font-size: 13px; margin-bottom: 6px; }
      .cycle-step .cs-desc { color: var(--ink-2); font-size: 11.5px; line-height: 1.5; margin-bottom: 6px; }
      .cycle-step .cs-metric { color: var(--brand-darker); font-size: 11px; font-weight: 700; border-top: 1px dashed var(--brand-light); padding-top: 6px; }

      /* 身份轉換 */
      .identity-transform { display: flex; align-items: center; gap: 16px; margin: 18px 0; }
      .identity-box { flex: 1; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; }
      .identity-box.before { color: var(--ink-3); }
      .identity-box.after { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-darker); font-weight: 800; }
      .identity-box .id-label { font-size: 11px; letter-spacing: 1px; margin-bottom: 8px; opacity: 0.7; }
      .identity-box .id-text { font-size: 15px; font-weight: 700; }
      .identity-arrow { color: var(--brand); font-size: 24px; flex-shrink: 0; }

      /* 引言 */
      .quote-block { background: var(--white); border-left: 4px solid var(--brand-light); border-radius: 10px; padding: 12px 18px; margin: 10px 0; color: var(--ink-2); font-size: 13.5px; font-style: normal; }

      /* 上一課/下一課 */
      .chapter-nav { display: flex; gap: 12px; margin-top: 8px; margin-bottom: 24px; }
      .chapter-nav a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--white); border: 1.5px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); transition: all 0.2s; min-width: 0; }
      .chapter-nav a:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(97, 208, 223, 0.15); transform: translateY(-2px); }
      .chapter-nav a.disabled { opacity: 0.35; pointer-events: none; }
      .chapter-nav a.next { justify-content: flex-end; text-align: right; }
      .chapter-nav .cn-arrow { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-light); color: var(--brand-darker); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
      .chapter-nav a:hover .cn-arrow { background: var(--brand); color: var(--white); }
      .chapter-nav .cn-label { font-size: 11px; color: var(--ink-3); letter-spacing: 1px; font-weight: 700; }
      .chapter-nav .cn-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .chapter-nav .cn-body { min-width: 0; }

      .mark-read-row { display: flex; justify-content: center; margin: 4px 0 20px; }
      .mark-read-btn { display: flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink-2); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
      .mark-read-btn:hover { border-color: var(--brand); color: var(--brand-darker); }
      .mark-read-btn.done { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
      .mark-read-btn i { font-size: 17px; }

      /* 小測驗 */
      .quiz-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0 28px; }
      .review-card { background: var(--brand-tint); border: 1.5px solid var(--brand-light); border-radius: var(--radius-sm); padding: 16px 18px; }
      .review-card .rc-title { font-weight: 800; color: var(--brand-darker); font-size: 14px; margin-bottom: 6px; }
      .review-card .rc-text { color: var(--ink-2); font-size: 12.8px; line-height: 1.65; }
      .quiz-sub { color: var(--ink-3); font-size: 14px; margin-bottom: 20px; }
      .q-item { background: var(--brand-tint); border: 1.5px solid var(--brand-light); border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 14px; }
      .q-question { font-weight: 700; color: var(--ink); font-size: 14.5px; margin-bottom: 12px; display: flex; gap: 10px; }
      .q-idx { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
      .q-options { display: flex; flex-direction: column; gap: 8px; }
      .q-option { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font-size: 13.5px; cursor: pointer; transition: all 0.15s; font-family: inherit; }
      .q-option:hover { border-color: var(--brand); }
      .q-option .q-marker { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-light); color: var(--brand-darker); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; flex-shrink: 0; }
      .q-option.correct { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
      .q-option.correct .q-marker { background: var(--ok); color: var(--white); }
      .q-option.wrong { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
      .q-option.wrong .q-marker { background: var(--danger); color: var(--white); }
      .q-answer { margin-top: 12px; padding: 12px 14px; background: var(--white); border-radius: 8px; font-size: 13px; color: var(--ink-2); display: none; border-left: 3px solid var(--brand); }
      .q-answer.show { display: block; }
      .thanks-banner { text-align: center; padding: 30px 20px; margin-bottom: 10px; }
      .thanks-banner i { font-size: 40px; color: var(--brand-darker); margin-bottom: 12px; display: block; }
      .thanks-banner .tb-big { font-size: 30px; font-weight: 800; letter-spacing: 4px; color: var(--ink); }
      .thanks-banner .tb-sub { font-size: 15px; font-weight: 700; letter-spacing: 3px; color: var(--brand-darker); margin-top: 4px; }

      /* footer */
      .footer { text-align: center; padding: 30px 20px 10px; color: var(--ink-3); font-size: 13px; }

      /* 回饋泡泡 */
      .feedback-btn { position: fixed; right: 24px; bottom: 24px; background: var(--brand); color: var(--white); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 90; box-shadow: 0 6px 20px rgba(97, 208, 223, 0.4); border: none; font-size: 24px; transition: transform 0.2s; }
      .feedback-btn:hover { transform: scale(1.06); }
      .feedback-panel { position: fixed; right: 24px; bottom: 92px; width: 320px; background: var(--white); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-lg); display: none; z-index: 90; border: 1px solid var(--line); }
      .feedback-panel.open { display: block; }
      .feedback-panel h4 { color: var(--ink); font-size: 15px; margin-bottom: 6px; }
      .feedback-panel p { color: var(--ink-3); font-size: 13px; margin-bottom: 12px; }
      .feedback-panel textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 14px; resize: vertical; }
      .feedback-panel textarea:focus { outline: 2px solid var(--brand); border-color: transparent; }
      .feedback-panel .fb-actions { display: flex; gap: 8px; margin-top: 10px; }
      .feedback-panel button { flex: 1; padding: 8px; border-radius: 8px; border: none; font-weight: 700; cursor: pointer; font-size: 13px; }
      .fb-send { background: var(--brand); color: var(--white); }
      .fb-cancel { background: var(--brand-light); color: var(--brand-darker); }

      /* 閱讀尺寸與對比：讓圖表、練習題和卡片說明保持清楚。 */
      .layout { max-width: 1280px; grid-template-columns: 248px minmax(0, 1fr); gap: 32px; }
      .top-progress { flex-shrink: 0; padding-left: 16px; border-left: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 700; }
      .side-group { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
      .side-group summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 8px; border-radius: 9px; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.4; }
      .side-group summary::-webkit-details-marker { display: none; }
      .side-group summary:hover { background: #f0f6f8; }
      .side-group .sg-num { color: var(--chapter-accent); font-size: 13px; font-weight: 900; }
      .side-group .sg-title { flex: 1; min-width: 0; }
      .side-group .sg-progress { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
      .side-group summary > i { color: var(--ink-3); transition: transform .2s ease; }
      .side-group[open] summary > i { transform: rotate(180deg); }
      .side-group[open] .side-nav { padding-left: 8px; padding-bottom: 4px; }
      .side-group .side-nav a { font-size: 13.5px; padding: 9px 8px; }
      .lesson-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 0 4px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
      .lesson-context[hidden] { display: none; }
      .lesson-context strong { color: var(--chapter-accent); }
      .continue-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0 0; padding: 22px 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
      .continue-label { color: #08717d; font-size: 13px; font-weight: 800; }
      .continue-count { margin: 3px 0; color: var(--ink); font-size: 21px; font-weight: 900; line-height: 1.4; }
      .continue-panel p { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
      .continue-panel a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; min-height: 46px; padding: 10px 18px; border-radius: 9px; color: #fff; background: #08717d; text-decoration: none; font-size: 14px; font-weight: 800; }
      .continue-panel a:hover { background: #075c66; }
      .chapter { scroll-margin-top: 150px; }
      .chapter .chapter-intro { background: linear-gradient(125deg, var(--chapter-dark), var(--chapter-accent)); }
      .chapter h3 i { color: var(--chapter-accent); background: var(--chapter-soft); }
      .ch-title .ch-sub { font-size: 15px; line-height: 1.65; }
      .chapter h3 { line-height: 1.4; }
      .info-card .ic-desc, .platform-card .pc-desc, .compare-item .ci-b, .timeline-item .ti-desc, .review-card .rc-text { font-size: 14.5px; line-height: 1.7; }
      .audience-group li, .funnel-stage .fs-extra, .funnel-stage .fs-quote, .cycle-step .cs-desc, .q-option, .q-answer { font-size: 14px; line-height: 1.65; }
      .setting-card .sc-row, .combo-card .cc-line, .pairing-row, .example-box .eb-item, .funnel-row, .quote-block { font-size: 14px; line-height: 1.65; }
      .stat-brick .sb-sub, .tree-legend .tl-item span, .setting-card .sc-reach .sc-reach-label, .combo-card .cc-desc, .cycle-step .cs-metric, .chapter-nav .cn-label { font-size: 13px; line-height: 1.55; }
      .cycle-step .cs-title, .funnel-stage .fs-title, .q-question { font-size: 15px; }
      .tab-btn.active { background: var(--chapter-accent); color: #fff; box-shadow: none; }
      .tree-adset, .feedback-btn, .cycle-step .cs-n, .q-idx { color: var(--deep); }
      a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--chapter-accent); outline-offset: 3px; }

      /* ===== 手機版 ===== */
      @media (max-width: 900px) {
        .menu-btn { display: flex; }
        .layout { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
        .sidebar { position: fixed; top: 0; left: -100%; width: 280px; height: 100vh; background: var(--white); z-index: 200; padding: 22px 18px; overflow-y: auto; transition: left 0.3s; box-shadow: var(--shadow-lg); }
        .sidebar.open { left: 0; }
        .backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 150; }
        .top-bar-inner { padding: 10px 14px; gap: 10px; }
        .brand-logo .brand-img { height: 30px; }
        .brand-logo .brand-txt { display: none; }
        .brand-logo .brand-sep { display: none; }
        .top-chapter { max-width: 50vw; font-size: 12.5px; }
        .top-progress { display: none; }
        .home-hero h1 { font-size: 24px; }
        .home-hero { padding: 42px 24px 34px; }
        .home-hero::before { width: 250px; right: -120px; top: -100px; }
        .home-hero .home-sub { font-size: 17px; }
        .home-path { gap: 6px; margin-top: 24px; font-size: 13px; }
        .home-path span { padding: 5px 9px; }
        .home-path i { display: none; }
        .outline-grid { grid-template-columns: 1fr; }
        .outline-card { min-height: auto; padding: 20px 22px; }
        .quiz-callout { align-items: flex-start; flex-direction: column; }
        .continue-panel { align-items: stretch; flex-direction: column; gap: 14px; padding: 20px; }
        .continue-panel a { align-self: flex-start; }
        .chapter { padding: 22px 18px; border-radius: 16px; }
        .ch-title h2 { font-size: 21px; }
        .ch-num { width: 42px; height: 42px; font-size: 17px; }
        .platform-grid { grid-template-columns: repeat(2, 1fr); }
        .stat-bricks { grid-template-columns: 1fr; }
        .compare-two { grid-template-columns: 1fr; }
        .vs-wrap { grid-template-columns: 1fr; }
        .vs-badge { margin: 0 auto; }
        .funnel { flex-direction: column; }
        .funnel-arrow { transform: rotate(90deg); width: auto; height: 20px; }
        .funnel-viz { display: block; }
        .funnel-graphic { display: none; }
        .funnel-rows { gap: 8px; }
        .funnel-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
        .funnel-row::before { position: static; transform: none; width: auto; height: auto; padding: 5px 6px; border-radius: 7px; background: var(--chapter-soft); color: var(--chapter-accent); font-size: 12px; font-weight: 800; text-align: center; line-height: 1.4; }
        .funnel-row:nth-child(1)::before { content: '認知｜接觸'; }
        .funnel-row:nth-child(2)::before { content: '興趣｜考慮'; }
        .funnel-row:nth-child(3)::before { content: '想要｜了解'; }
        .funnel-row:nth-child(4)::before { content: '行動｜購買'; }
        .funnel-label .fl-metric { display: none; }
        .funnel-label .fl-title { font-size: 12px; }
        .tree-groups { flex-direction: column; align-items: center; }
        .tree-group { max-width: 100%; width: 100%; }
        .tree-group::after { display: none; }
        .cycle-flow { flex-direction: column; }
        .cycle-arrow { transform: rotate(90deg); width: auto; height: 18px; }
        .timeline { flex-direction: column; gap: 22px; }
        .timeline-item { padding-top: 0; padding-left: 26px; text-align: left; }
        .timeline-item::before { top: 6px; bottom: 6px; left: 6px; right: auto; width: 5px; height: auto; }
        .timeline-item .ti-dot { top: 6px; left: 6px; transform: translate(-50%, -50%); }
        .timeline-item .ti-title { margin: 0 0 4px; }
        .timeline-item .ti-desc { padding: 0; }
        .chapter-intro { margin: -22px -18px 22px; padding: 30px 18px 26px; border-radius: 16px 16px 0 0; }
        .identity-transform { flex-direction: column; }
        .identity-arrow { transform: rotate(90deg); }
        .chapter-nav { flex-direction: column; gap: 8px; }
        .chapter-nav a { padding: 12px 16px; }
        .tab-btn { min-width: 44%; }
        .feedback-panel { right: 14px; left: 14px; width: auto; }
        .feedback-btn { right: 16px; bottom: 16px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero.active .home-hero h1, .hero.active, .chapter.active, .quiz.active { animation: none; }
        .progress-fill, .top-chapter { transition: none; }
      }
    
html{scroll-behavior:auto}.tree-ad{color:var(--deep);flex:initial}.data-table th{color:var(--deep)!important}.quiz h2{font-size:25px}.chapter p.lead{font-size:17px;line-height:1.85}.side-check{min-width:16px}

/* Course controls and readable diagrams. Effects are one-shot and user controlled. */
.motion-toggle,.effect-play,.hero-replay{font:inherit;font-weight:700;cursor:pointer;min-height:40px;border-radius:8px;padding:7px 12px}
.motion-toggle{flex-shrink:0;border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:12px}
.motion-toggle:disabled{cursor:default;color:var(--ink-3)}
.hero-replay{margin-top:20px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08);color:#fff;font-size:13px}
.effect-play{border:1px solid var(--chapter-accent);background:var(--chapter-soft);color:var(--chapter-accent);font-size:14px}
.effect-play:disabled{cursor:progress}
.flow-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 8px}
.flow-controls span{font-size:13px;color:var(--ink-2)}
.cycle-step{transition:border-color .2s,background-color .2s}
.cycle-step.is-current{border-color:var(--chapter-accent);background:var(--chapter-soft);box-shadow:0 0 0 2px var(--chapter-soft)}
.cycle-step.is-done .cs-n,.cycle-step.is-current .cs-n{background:var(--chapter-accent);color:#fff}
.fx-highlight{background:linear-gradient(transparent 58%,#bdeef3 58%);background-repeat:no-repeat;background-size:100% 100%;padding:0 2px}
html[data-motion=on] .chapter.active .fx-highlight{animation:highlightDraw .8s ease-out both}
@keyframes highlightDraw{from{background-size:0% 100%}to{background-size:100% 100%}}
.quiz-source{display:inline-block;margin-top:8px;color:#17616b;font-weight:700;text-underline-offset:3px}
.quiz-reset{margin:20px 0}
.funnel-row{min-width:0;overflow-wrap:anywhere}
.journey-copy{min-width:0;padding:7px 0}.journey-copy strong{display:block;font-size:15px;color:var(--chapter-accent);line-height:1.5}.chapter .journey-copy p{margin:5px 0 0;font-size:14px;line-height:1.75;color:var(--ink-2)}
.funnel-label{padding:2px 0}
.funnel-label:nth-child(n+3) .fl-title,.funnel-label:nth-child(n+3) .fl-metric{background:#17616b;color:#fff;border-radius:4px;padding:0 5px;opacity:1}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(min-width:901px){.funnel-viz{grid-template-columns:minmax(200px,28%) minmax(0,1fr)}.funnel-graphic{min-height:290px}}
@media(max-width:900px){
 .top-bar-inner{gap:8px}.brand-logo{display:none}.top-chapter{flex:1;min-width:0;max-width:none;margin-left:0}.top-chapter span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.motion-toggle{font-size:11px;padding:6px 9px;min-height:38px}
 .card-grid,.card-grid.cols-2,.audience-groups,.setting-grid,.combo-grid,.quiz-review{grid-template-columns:minmax(0,1fr)}
 .card-grid>*,.audience-groups>*,.setting-grid>*,.combo-grid>*{min-width:0;overflow-wrap:anywhere}
 .funnel-row{grid-template-columns:90px minmax(0,1fr)}.funnel-row::before{white-space:pre-line;line-height:1.75;align-self:stretch;display:grid;place-content:center;padding:7px 4px}
 .funnel-row:nth-child(1)::before{content:'認知｜接觸\A觸及、互動'}
 .funnel-row:nth-child(2)::before{content:'興趣｜考慮\A點擊、PV'}
 .funnel-row:nth-child(3)::before{content:'想要｜了解\A加入購物車'}
 .funnel-row:nth-child(4)::before{content:'行動｜購買\A購買／預約'}
 .chapter h3{overflow-wrap:anywhere}.flow-controls{align-items:flex-start;flex-direction:column}
 .table-wrap::before{content:'表格可左右滑動';display:block;padding:7px 12px;color:var(--ink-2);font-size:12px;background:var(--brand-tint)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Reading comes first: clear summaries, wider prose, and comfortable cards. */
.hero.active,.chapter.active,.quiz.active,.hero.active .home-hero h1{animation:none}
.layout{max-width:1600px;grid-template-columns:240px minmax(0,1fr);gap:28px}
.top-bar-inner{max-width:1600px}
.chapter>p,.chapter>ul,.chapter>ol{max-width:920px}
.chapter .ch-sub{font-size:16px;line-height:1.8}
.chapter p.lead{font-size:18px;line-height:1.85}
.card-grid,.card-grid.cols-2,.setting-grid,.combo-grid,.audience-groups{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.info-card{padding:22px}.info-card .ic-title,.compare-item .ci-h,.setting-card .sc-quote,.combo-card .cc-title{font-size:17px;line-height:1.6}
.info-card .ic-desc,.compare-item .ci-b,.timeline-item .ti-desc,.setting-card .sc-row,.combo-card .cc-line,.combo-card .cc-desc,.audience-group li,.tips-box .tb-text{font-size:16px;line-height:1.85}
.platform-card .pc-desc,.funnel-row,.review-card .rc-text{font-size:15.5px;line-height:1.85}
.q-question{font-size:17px;line-height:1.8}.q-option,.q-answer{font-size:16px;line-height:1.8}.data-table{font-size:15.5px!important;line-height:1.8}.tips-box .tb-label{font-size:14px}.platform-card .pc-name{font-size:17px}
.lesson-takeaways{margin:0 0 26px;padding:18px 22px;border:1px solid var(--brand-light);border-left:4px solid var(--chapter-accent);border-radius:0 12px 12px 0;background:var(--brand-tint)}
.journey-copy strong{font-size:17px;line-height:1.6}.chapter .journey-copy p{font-size:16px;line-height:1.85}
.lesson-takeaways>strong{font-size:13px;color:var(--chapter-accent)}
.chapter .lesson-takeaways ul{margin:7px 0 0;padding-left:20px;color:var(--ink);font-size:16px;line-height:1.85}
.chapter .lesson-takeaways li{margin:5px 0}
mark.fx-highlight{color:inherit;background:linear-gradient(transparent 58%,#ffe6a6 58%);background-repeat:no-repeat;padding:0 1px}
.lesson-outline{margin:0 0 26px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.lesson-outline summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--ink-2)}
.lesson-outline>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lesson-outline button{font:inherit;font-size:14px;line-height:1.6;text-align:left;border:1px solid var(--line);background:var(--brand-tint);border-radius:7px;padding:8px 12px;cursor:pointer;color:var(--ink-2)}
.chapter h3[id]{scroll-margin-top:100px}
.mark-read-row{gap:12px;flex-wrap:wrap}
.lesson-back-top{font:inherit;font-size:14px;border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;padding:10px 18px;cursor:pointer}
.chapter-nav .cn-title{white-space:normal;overflow:visible;line-height:1.6}
@media(max-width:1100px) and (min-width:901px){.layout{grid-template-columns:210px minmax(0,1fr);gap:22px}.card-grid.cols-2,.audience-groups,.setting-grid,.combo-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
 .layout{grid-template-columns:minmax(0,1fr);padding:14px 10px;gap:14px}
 .chapter{padding:22px 16px}.chapter-intro{margin:-22px -16px 22px;padding:28px 16px}
 .ch-head{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px 12px}
 .ch-title{display:contents}.ch-title h2{grid-column:2;align-self:center;font-size:22px;line-height:1.5}
 .ch-title .ch-sub{grid-column:1/-1;margin-top:0;font-size:16px;line-height:1.85}
 .chapter p.lead{font-size:17px}.chapter h3{font-size:20px;line-height:1.6}
 .card-grid,.card-grid.cols-2,.setting-grid,.combo-grid,.audience-groups{grid-template-columns:minmax(0,1fr)}
 .info-card{padding:20px}.chapter .lesson-takeaways ul{font-size:16px}.lesson-takeaways{padding:16px 18px;margin-bottom:22px}
 .lesson-context{flex-wrap:wrap;gap:3px 12px;line-height:1.7}.lesson-context strong{font-size:13px}
 .funnel-row{display:block;padding:16px;font-size:16px;line-height:1.85}
 .funnel-row::before{display:block;white-space:normal;text-align:left;padding:7px 10px;margin-bottom:11px;font-size:13px;line-height:1.7}
 .funnel-row:nth-child(1)::before{content:'認知｜接觸　觸及、互動'}
 .funnel-row:nth-child(2)::before{content:'興趣｜考慮　點擊、PV'}
 .funnel-row:nth-child(3)::before{content:'想要｜了解　加入購物車'}
 .funnel-row:nth-child(4)::before{content:'行動｜購買　購買／預約'}
 .journey-copy{padding:0}.journey-copy strong{font-size:16px}.chapter .journey-copy p{font-size:16px;line-height:1.85}
 .lesson-outline button{width:100%}.mark-read-row{justify-content:flex-start}.chapter-nav a{padding:14px 16px}
 .tips-box{padding:16px}.src-tag{line-height:1.7}.home-hero{padding:36px 22px 32px}
}