/* 從學習證據到教學改進——全站設計系統 v5（立霧參考版風格；Ted 2026-10-04 拍板「全站換成立霧的樣子、內容用我們的」）
   五頁（index／learn／start／material／studio）都只載這一份；投影片另有 slides/deck.css。
   來源：workspace/outbox/20261004-workshop-reference/assets/reference.css（立霧的色票、字級、元件）。
   長相：白底、深藍主色、珊瑚橘強調、淺灰分隔線、圓角 8／5／3、沒有外框墨線、沒有偏移陰影、不用襯線展示字。
   內文 17px／1.8（立霧的 17px 保留；標題比他大一級），手機 16px。

   怎麼用（給各頁 builder）：
   - 只用這裡的類別與代幣；頁內 <style> 只放該頁獨有的版面，不准另開色票、不准硬編 hex。
   - 舊類別名全部保留、只換長相：.card .note .warn .ok .tip .kicker .sec-num .btn(.secondary/.small/.accent)
     .prompt(.prompt-head/.label/.copy) .human .steps .checklist .badge(.gold/.bad/.good/.b1–.b4) .redline .tabs .tabpanel
     textarea/input label.field .diff .toolbar .chart figure footer.site nav.topnav(.links/.site/.anchors/.sep/.navbtn/.ctl/.is-overflow)
     table.stack [data-th] .hint .msg .sr-only .grid2 .table-wrap :root.projector
     header.hero(.inner/.eyebrow/.sub/.meta .m/.deck/.art) .wrap main.editorial .sec(.first) h2 .num/.t .body .lead .prose
     .dests/.dest .c-y .c-c .c-a .c-l .c-n .pullquote(.pull/.after) .trio>.step(.ai/.see) td.time/.mins/.seg .skip
   - 入口頁元件（立霧的入口版面）：.home .homehero .overline .homeintro .actions .eventline .hostline
     .evidence-paper(.paper-top .version .paper-title .paper-label .paper-before .paper-after .paper-reason .paper-bottom .saved)
     .section-head .four-steps(.numline .number .mins .deliverable) .home-rule .rule .resource-list(.no .arrow) .compact-how
   - 代幣：新頁面請直接用 --teal／--gold／--line 這組立霧名字，或我們的 --ink／--paper／--card／--y／--c／--a／--l 四色；
     舊代幣（--frame --bw --sh --serif --red …）全部仍有定義、指到新色，舊頁面的頁內樣式不會斷。
   - 四色語意不變：--y＝你說什麼／第一塊（深藍，同主色）、--c＝你一定要自己看的／警示／第二塊（珊瑚橘）、
     --a＝AI 會做什麼／完成／第三塊（綠）、--l＝提示／第四塊（靛紫）。實心色上的字用 --on-chip（淺色＝白、深色＝墨）。
   - ⚠️--frame 映到中灰 --line-strong（不是立霧的淡線 --line）：講義四張自繪圖的描邊用它，映成淡線會看不見；
     想要立霧的淡框請直接寫 border:1px solid var(--line)。--serif 現在指向無襯線字，全站不再有襯線展示字。

   對比（WCAG 字／底 ≥4.5:1，淺深兩組都用 contrast.js 算過，2026-10-04）：
   淺：墨／白 15.5、墨／頁底 14.6、次要字／頁底 5.8、連結深藍／頁底 12.2、珊瑚橘字（--c-deep）／頁底 6.6、
       四塊標籤字壓各自淡底 6.0–11.4、白字壓四色實心 4.6–10.6（最低是珊瑚橘 --c #c4512f 4.6）、
       --red／頁底 5.1、佔位字／白 5.4、表頭字／淡藍 5.4、輸入框邊線／白 3.5（非文字 ≥3:1）。
   深：墨／頁底 16.1、墨／卡片 14.3、次要字／卡片 8.6、連結／卡片 10.6、珊瑚橘字／頁底 10.0、
       四塊標籤字壓各自淡底 7.4–8.7、墨字壓四色實心 7.8–9.8、--red／卡片 7.7、佔位字／卡片 6.6、輸入框邊線／卡片 5.3。
   裝飾用的鮭魚珊瑚 --gold #e7785c 壓頁底只有 2.7，所以它只畫線、不當字；要寫字用 --c-deep（淺）／--c（深）。 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;800&display=swap");

/* ───────── 代幣：淺色 ───────── */
:root{
  color-scheme:light;
  --paper:#f7f8fb;        /* 頁底：帶一點藍的白 */
  --card:#ffffff;         /* 卡片、導覽列：純白 */
  --ink:#17243d;          /* 墨色（深藍墨）：主字色 */
  --ink-soft:#566278;     /* 次要文字 */
  --teal:#243d70;         /* 主色：深藍（按鈕、色條、連結、題名第二行） */
  --teal-deep:#1c305a;    /* 主色深一階：連結、hover、次要按鈕字 */
  --teal-soft:#edf1f8;    /* 主色淡底：表頭、標籤、提示詞標籤列、hover */
  --gold:#e7785c;         /* 珊瑚橘（裝飾）：目前頁底線、分頁底線、色條；不當字 */
  --gold-soft:#fbebe5;    /* 珊瑚橘淡底 */
  --line:#dce2ec;         /* 分隔線、卡片邊：裝飾用 */
  --line-strong:#7c8aa2;  /* 輸入框邊線、導覽分隔線、自繪圖描邊（非文字 3.5:1） */
  --bad:#a23d32;  --bad-soft:#fbece9;    /* 錯、刪、必填 */
  --good:#27654f; --good-soft:#e9f4ed;   /* 對、加、完成 */
  --y:#243d70;  --y-soft:#edf1f8;  --y-deep:#1c305a;   /* 第一塊／「你說什麼」：深藍（同主色） */
  --c:#c4512f;  --c-soft:#fbebe5;  --c-deep:#934029;   /* 第二塊／「你一定要自己看的」／警示：珊瑚橘（實心是能壓白字的赤陶色） */
  --a:#27654f;  --a-soft:#e9f4ed;  --a-deep:#1f5440;   /* 第三塊／「AI 會做什麼」／完成：綠 */
  --l:#5a4fc2;  --l-soft:#ecebf9;  --l-deep:#4a3fa6;   /* 第四塊／提示：靛紫 */
  --sand:#8a97ad;         /* 中性色條（投影片那張卡） */
  --red:#b5452b;          /* 強調線、紅線段、「改在這裡」：能當字的珊瑚紅 */
  --frame:var(--line-strong);   /* 舊頁面的外框與自繪圖描邊：中灰（見檔頭 ⚠️） */
  --rule:var(--line);  --rule-strong:var(--line-strong);
  --tint:#edf1f8;         /* hover 淡底 */
  --placeholder:#5f6b84;
  --on-chip:#ffffff;      /* 壓在四色實心（步驟號、關卡圓點）上的字：淺色＝白 */
  --on-teal:#ffffff;      /* 壓在主色上的字 */
  --on-gold:#311c15;      /* 壓在珊瑚橘上的字 */
  --warn-text:var(--c-deep);
  --sh:0 8px 26px rgba(28,48,90,.06);        /* 唯一一種陰影：柔和、幾乎看不見 */
  --sh-pressed:0 2px 8px rgba(28,48,90,.08);
  --sh-color:#1c305a;
  --grid-dot:rgba(23,36,61,.06);  --rule-ink:rgba(23,36,61,.2);
  --y-hover:#1c305a;  --ink-hover:#2a3b5e;
  --bw:1px;
  --r:8px; --r-sm:5px;
  --focus:var(--teal);
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --serif:var(--sans);    /* 全站不再用襯線展示字：舊頁寫 var(--serif) 的地方自動變無襯線 */
  --mono:"Cascadia Code","Consolas","SFMono-Regular",Menlo,monospace;
  --max:1180px; --gutter:20px; --gap:32px;
  /* ── 更早的別名（舊頁面的頁內樣式還在用）── */
  --bg:var(--paper); --shadow:var(--sh);
  --hero-a:var(--paper); --hero-b:var(--paper); --on-hero:var(--ink); --on-hero-soft:var(--ink-soft);
}
/* ───────── 代幣：深色（近黑藍底、淡字；四色改成淺實心、字變墨；兩個選擇器內容必須一樣）───────── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#101725; --card:#182237; --ink:#f0f3fa; --ink-soft:#b3bfd3;
    --teal:#a9c4ff; --teal-deep:#bed3ff; --teal-soft:#243450;
    --gold:#f2a087; --gold-soft:#402b28;
    --line:#34415a; --line-strong:#8695b0;
    --bad:#ffac9d; --bad-soft:#402825; --good:#a4d6b6; --good-soft:#233b30;
    --y:#a9c4ff; --y-soft:#243450; --y-deep:#bed3ff;
    --c:#f2a087; --c-soft:#402b28; --c-deep:#f2b39f;
    --a:#a4d6b6; --a-soft:#233b30; --a-deep:#b9e2c7;
    --l:#c3b6f5; --l-soft:#2e2a4a; --l-deep:#d3c9f8;
    --sand:#6b7a94; --red:#ff8c7a; --tint:#243450; --placeholder:#9aa7c0;
    --on-chip:#152139; --on-teal:#152139; --on-gold:#311c15;
    --sh:0 8px 26px rgba(0,0,0,.35); --sh-pressed:0 2px 8px rgba(0,0,0,.4); --sh-color:#000;
    --grid-dot:rgba(240,243,250,.06); --rule-ink:rgba(240,243,250,.25);
    --y-hover:#bed3ff; --ink-hover:#dfe6f3;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#101725; --card:#182237; --ink:#f0f3fa; --ink-soft:#b3bfd3;
  --teal:#a9c4ff; --teal-deep:#bed3ff; --teal-soft:#243450;
  --gold:#f2a087; --gold-soft:#402b28;
  --line:#34415a; --line-strong:#8695b0;
  --bad:#ffac9d; --bad-soft:#402825; --good:#a4d6b6; --good-soft:#233b30;
  --y:#a9c4ff; --y-soft:#243450; --y-deep:#bed3ff;
  --c:#f2a087; --c-soft:#402b28; --c-deep:#f2b39f;
  --a:#a4d6b6; --a-soft:#233b30; --a-deep:#b9e2c7;
  --l:#c3b6f5; --l-soft:#2e2a4a; --l-deep:#d3c9f8;
  --sand:#6b7a94; --red:#ff8c7a; --tint:#243450; --placeholder:#9aa7c0;
  --on-chip:#152139; --on-teal:#152139; --on-gold:#311c15;
  --sh:0 8px 26px rgba(0,0,0,.35); --sh-pressed:0 2px 8px rgba(0,0,0,.4); --sh-color:#000;
  --grid-dot:rgba(240,243,250,.06); --rule-ink:rgba(240,243,250,.25);
  --y-hover:#bed3ff; --ink-hover:#dfe6f3;
}

/* ───────── 基礎 ───────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.8;letter-spacing:.01em}
[hidden]{display:none !important}
img,svg{max-width:100%;height:auto}
a{color:var(--teal-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
a:hover{color:var(--c-deep);text-decoration-color:currentColor}
p{margin:.5em 0 1em}
strong{font-weight:700}
h1,h2,h3,h4{line-height:1.3;margin:0 0 .5em;font-feature-settings:"palt";color:var(--ink)}
h2{font-weight:800;font-size:clamp(1.45rem,2.2vw,1.7rem);letter-spacing:-.02em;margin-top:1.6em}
h3{font-weight:700;font-size:1.15rem;margin-top:1.3em}
h4{font-size:1rem;font-weight:700}
ul,ol{padding-left:1.4em}
li{margin:.25em 0}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}
code,kbd,pre{font-family:var(--mono)}
code{background:var(--teal-soft);color:var(--ink);padding:1px 6px;border-radius:3px;font-size:.92em}
pre{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;overflow-x:auto;line-height:1.55;font-size:.92rem}
kbd{display:inline-block;background:var(--card);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:3px;padding:0 6px;font-size:.9em}
summary{cursor:pointer}
[id]{scroll-margin-top:76px}   /* 錨點與被 focus 的欄位捲進來時，別躲在黏頂導覽底下（WCAG 2.4.11） */
::selection{background:var(--teal);color:var(--on-teal)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:99;background:var(--teal);color:var(--on-teal);padding:10px 16px;border-radius:var(--r-sm);text-decoration:none;font-weight:700}
.skip:focus{top:12px}
/* 統一焦點環：全站所有可操作的東西同一個樣子 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[role=tab]:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* 版心：.wrap 是版心（1180）；header／nav／footer 用 .inner，同一組規則 */
.wrap,header.hero .inner,nav.topnav .inner,footer.site .inner{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
main{max-width:var(--max);margin:0 auto;padding:28px var(--gutter) 80px}
main.editorial{max-width:none;padding:0}   /* 章節自己用 .sec .wrap 排版心 */

/* ───────── 投影模式：上課投影用，只放大字級 ───────── */
:root.projector{font-size:20px}
:root.projector body{font-size:1.1rem;line-height:1.8}
:root.projector .note{font-size:.97rem}
:root.projector table{font-size:1rem}

/* ───────── 頁首 header.hero（子頁）：矮、白底、一條淡線；眉標＝珊瑚橘等寬小字、題名深藍墨、副標與資訊一行 ───────── */
header.hero{padding:36px 0;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
header.hero .inner{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
header.hero .eyebrow{display:block;margin:0 0 12px;font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.12em;color:var(--c-deep);line-height:1.6}
header.hero hr{display:none}
header.hero h1{font-weight:800;font-size:clamp(1.65rem,3vw,2.4rem);line-height:1.25;letter-spacing:-.03em;color:var(--ink);margin:0 0 .4em;text-wrap:balance}
header.hero h1 span{display:inline-block}
header.hero .deck{display:grid;gap:10px}
header.hero .sub{font-size:1.05rem;line-height:1.7;color:var(--ink-soft);margin:0;max-width:820px;text-wrap:balance}
header.hero .sub span{display:inline}
header.hero .meta{display:block;margin:0;font-size:.85rem;line-height:1.7;color:var(--ink-soft)}
header.hero .meta .m{display:inline;padding:0;border:0}
header.hero .meta .m+.m::before{content:"｜";margin:0 .4em;color:var(--line-strong)}   /* 連著兩個 .m（start.html 用 JS 產的）之間補分隔號；material.html 自己夾了 .sep，不會重複 */
header.hero .meta .sep{display:inline;margin:0 .5em;color:var(--line-strong)}
header.hero a:not(.btn){color:var(--teal-deep)}   /* :not(.btn)：這條特異度比 .btn 高，不排除會把頁首按鈕的白字蓋成深藍（2026-10-04 量到 1.22:1） */
header.hero .art{display:none}

/* ───────── 黏頂導覽：白底、62px、底下一條淡線；左邊「六個去處＋本頁錨點」單排可滑（右側淡出＝還有），右邊兩顆鈕固定 ───────── */
nav.topnav{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line)}
nav.topnav .inner{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-height:62px;min-width:0}
nav.topnav .links{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}
nav.topnav .links::-webkit-scrollbar{display:none}
nav.topnav .links::after{content:"";flex:0 0 28px}   /* 捲到底時，最後一個連結不會被右側淡出吃到 */
nav.topnav .links.is-overflow{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}   /* JS 只在真的溢出、還沒捲到底時加 */
nav.topnav .site,nav.topnav .anchors{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}
nav.topnav .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;white-space:nowrap;font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;border-top:2px solid transparent;touch-action:manipulation}
nav.topnav .links a:hover{color:var(--teal-deep);border-bottom-color:var(--line-strong)}
nav.topnav .links a[aria-current="page"]{font-weight:800;color:var(--teal-deep);border-bottom-color:var(--gold)}
nav.topnav .links a:focus-visible{outline-offset:-3px}   /* 連結在可滑的捲動盒裡，焦點環改畫在框內，才不會被盒邊切掉 */
nav.topnav .site a{font-weight:700}
nav.topnav .sep{flex:0 0 auto;width:1px;height:22px;margin:0 6px;background:var(--line-strong);opacity:.6}
nav.topnav .ctl{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}
nav.topnav button{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:6px;min-height:44px;min-width:44px;padding:0 12px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
nav.topnav button svg{width:18px;height:18px;flex:0 0 auto}
nav.topnav button:hover{background:var(--tint)}
nav.topnav button:active{transform:translateY(1px)}
nav.topnav button[aria-pressed="true"]{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-deep)}
/* 滑鼠用的捲動鈕：只在連結真的溢出時出現（左邊那顆要捲過才出現）；手機用手指滑，不顯示 */
nav.topnav .navbtn{flex:0 0 auto;width:36px;min-width:36px;padding:0;border:0;background:transparent;color:var(--teal-deep);justify-content:center}
nav.topnav .navbtn:hover{background:var(--tint)}

/* ───────── 版心 .sec：一欄；章節號（壹貳參）變成珊瑚橘等寬小字坐在標題上面；章節之間一條淡線 ───────── */
.sec{padding:clamp(40px,5vw,56px) 0;border-top:1px solid var(--line)}
.sec.first{border-top:0}
.sec .wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:20px}
.sec h2{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:6px;line-height:1.3}
.sec h2 .num{font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.12em;color:var(--c-deep);line-height:1.5}
.sec h2 .t{font-size:clamp(1.45rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.sec .body>:first-child{margin-top:0}
.sec .body>:last-child{margin-bottom:0}
.prose{max-width:44em}
.prose strong{font-weight:700}
.lead{font-size:1.08rem;line-height:1.9;margin:0;max-width:44em;color:var(--ink)}
.sec-num{font-family:var(--mono);font-weight:700;font-size:.75rem;letter-spacing:.12em;color:var(--c-deep);margin-right:.5em;vertical-align:middle}   /* 舊頁的章節號：h2 開頭一個字（壹貳參…） */
.kicker{display:inline-block;font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.1em;color:var(--teal-deep);background:var(--teal-soft);border-radius:3px;padding:3px 10px;margin-bottom:8px;line-height:1.6}

/* ───────── 卡片與色條：白底、1px 淡線、8px 圓角、沒有陰影；色條在左緣 4px ───────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:1em 0}
.card h3{margin-top:0}
.c-y,.c-c,.c-a,.c-l,.c-n{border-left-width:4px;border-left-style:solid}
.c-y{border-left-color:var(--y)} .c-c{border-left-color:var(--gold)} .c-a{border-left-color:var(--a)} .c-l{border-left-color:var(--l)} .c-n{border-left-color:var(--sand)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
/* 去處卡（舊入口用；留著給子頁）：左側色條＋等寬小號＋名稱＋說明＋箭頭 */
.dests{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.dest{background:var(--card);border:1px solid var(--line);border-left-width:4px;border-radius:var(--r);padding:0;margin:0}
.dest .head{display:flex;align-items:baseline;gap:12px;padding:16px 20px 0;text-decoration:none;color:var(--ink)}
.dest .head:hover{color:var(--teal-deep)}
.dest .head:hover .name{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
.dest .idx{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--c-deep);font-variant-numeric:tabular-nums}
.dest .name{font-weight:800;font-size:1.2rem;line-height:1.3}
.dest .arrow{margin-left:auto;width:20px;height:20px;flex:0 0 auto;align-self:center;color:var(--teal)}
.dest p{margin:0;padding:6px 20px 16px;max-width:44em;color:var(--ink-soft);font-size:.95rem}

/* ───────── 提示框四種：淡底＋左緣 3px 實色；不設 display（<p class="warn" hidden> 要能藏）───────── */
.note,.warn,.ok,.tip{padding:12px 16px;border-radius:0 var(--r) var(--r) 0;margin:1em 0;border-left:3px solid}
.note{background:var(--y-soft);border-left-color:var(--y)}
.warn{background:var(--c-soft);border-left-color:var(--c)}
.ok{background:var(--a-soft);border-left-color:var(--a)}
.tip{background:var(--l-soft);border-left-color:var(--l)}
.note>svg:first-child,.warn>svg:first-child,.ok>svg:first-child,.tip>svg:first-child{float:left;width:22px;height:22px;margin:4px 12px 0 0}
.note>svg:first-child{color:var(--y-deep)} .warn>svg:first-child{color:var(--c-deep)} .ok>svg:first-child{color:var(--a-deep)} .tip>svg:first-child{color:var(--l-deep)}
.note p:last-child,.warn p:last-child,.ok p:last-child,.tip p:last-child{margin-bottom:0}
.human{background:var(--gold-soft);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r);padding:12px 16px;margin:1em 0}   /* 「你一定要自己看的」 */
.human strong{color:var(--c-deep)}
.redline{border-left:3px solid var(--red);padding-left:16px;margin:1.2em 0}   /* 底線那一段：珊瑚紅邊條 */
.redline h3{color:var(--red);margin-top:0}
.hint{font-size:.88rem;color:var(--ink-soft)}
.msg{animation:msg-in .22s ease-out}   /* 工作台的訊息出現時一個很輕的過場 */
@keyframes msg-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ───────── 拉引句：白卡、左緣珊瑚橘 4px、粗體大字；下面一句用淡線隔開 ───────── */
.pullquote{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r);padding:clamp(20px,3vw,32px) clamp(20px,3vw,36px);margin:0}
.pullquote .pull{margin:0;font-weight:800;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.4;letter-spacing:-.01em;color:var(--ink);text-wrap:balance;font-feature-settings:"palt"}
.pullquote .after{margin:1em 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:1rem;line-height:1.7;color:var(--ink-soft)}

/* ───────── 按鈕：主要＝深藍實心白字、次要＝白底深藍字灰框、強調＝墨色實心；5px 圓角、沒有陰影 ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:.95rem;line-height:1.3;min-height:44px;padding:0 18px;background:var(--teal);color:var(--on-teal);border:1px solid var(--teal);border-radius:var(--r-sm);cursor:pointer;text-decoration:none;text-align:center;touch-action:manipulation;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .08s ease}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:var(--on-teal)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:var(--card);color:var(--teal-deep);border-color:var(--line-strong)}
.btn.secondary:hover{background:var(--tint);border-color:var(--teal);color:var(--teal-deep)}
.btn.accent{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.accent:hover{background:var(--ink-hover);border-color:var(--ink-hover);color:var(--paper)}
.btn.small{font-size:.86rem;padding:0 12px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:.6em 0}

/* ───────── 提示詞區塊：白底、1px 淡線、左緣 3px 深藍、淡藍標籤列＋右上複製鈕 ─────────
   舊寫法：<div class="prompt"><span class="label">…</span><button class="btn small copy">…</button>純文字</div>
   新寫法：<div class="prompt"><div class="prompt-head"><span class="label">…</span><button class="btn secondary small copy">…</button></div><pre>…</pre></div> */
.prompt{position:relative;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r);padding:14px 16px;margin:1em 0;white-space:pre-wrap;font-size:.98rem;line-height:1.75;overflow-wrap:anywhere}
.prompt .copy{position:absolute;top:8px;right:8px;z-index:1}
.prompt .label{display:flex;align-items:center;min-height:56px;margin:-14px -16px 12px;padding:8px 100px 8px 16px;background:var(--teal-soft);border-bottom:1px solid var(--line);border-radius:0 var(--r) 0 0;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--teal-deep);line-height:1.5;white-space:normal}
.prompt .prompt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-14px -16px 12px;padding:8px 8px 8px 16px;background:var(--teal-soft);border-bottom:1px solid var(--line);border-radius:0 var(--r) 0 0;white-space:normal}
.prompt .prompt-head .label{display:block;min-height:0;margin:0;padding:0;background:none;border:0;border-radius:0}
.prompt .prompt-head .copy{position:static;flex:0 0 auto}
.prompt pre{margin:0;padding:0;border:0;background:none;box-shadow:none;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--sans);font-size:.97rem;line-height:1.8;overflow:visible}

/* ───────── 步驟：舊的 .steps 編號清單（深藍圓號白字）；新的 .trio 三欄步驟卡（白卡、頂上一道 3px 色線）───────── */
.steps{counter-reset:step;list-style:none;padding:0}
.steps>li{counter-increment:step;position:relative;padding-left:46px;margin:1.1em 0}
.steps>li::before{content:counter(step);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;background:var(--teal);color:var(--on-teal);font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center}
.trio{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:1em 0}
.trio .step{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:var(--r-sm);padding:16px 18px;font-size:.95rem;line-height:1.8}
.trio .step.ai{border-top-color:var(--a)}
.trio .step.see{border-top-color:var(--gold);background:var(--gold-soft)}
.trio .step h4{margin:0 0 8px;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;font-weight:700;color:var(--teal-deep)}
.trio .step.ai h4{color:var(--a-deep)}
.trio .step.see h4{color:var(--c-deep)}
.trio .step p{margin:0}
.checklist label{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;min-height:44px}
.checklist label:hover{background:var(--tint)}
.checklist input{margin-top:3px}
.checklist label.done{text-decoration:line-through;color:var(--ink-soft)}

/* ───────── 標籤：淡底深字、3px 圓角、沒有框；四塊各配一色淡底 ───────── */
.badge{display:inline-block;background:var(--teal-soft);color:var(--teal-deep);border-radius:3px;padding:1px 8px;font-size:.78rem;font-weight:700;line-height:1.7}
.badge.b1{background:var(--y-soft);color:var(--y-deep)}
.badge.b2{background:var(--c-soft);color:var(--c-deep)}
.badge.b3{background:var(--a-soft);color:var(--a-deep)}
.badge.b4{background:var(--l-soft);color:var(--l-deep)}
.badge.gold{background:var(--gold-soft);color:var(--c-deep)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.good{background:var(--good-soft);color:var(--good)}

/* ───────── 分頁：底下一條淡線；目前分頁深藍字＋珊瑚橘底線 ───────── */
.tabs{display:flex;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:1em 0 0}
.tabs button{font:inherit;font-weight:700;font-size:1rem;background:transparent;border:0;border-bottom:3px solid transparent;padding:12px 10px;min-height:44px;cursor:pointer;color:var(--ink-soft);margin-bottom:-1px;touch-action:manipulation}
.tabs button:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.tabs button[aria-selected="true"]{color:var(--teal-deep);border-bottom-color:var(--gold)}
.tabpanel{padding-top:16px}

/* ───────── 表單：1px 中灰邊線、5px 圓角、最矮 44px、聚焦深藍外框；placeholder 不用瀏覽器預設灰 ───────── */
textarea,input[type=text],input[type=number],select{font:inherit;width:100%;padding:10px 12px;min-height:44px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
textarea{min-height:120px;line-height:1.7;resize:vertical}
textarea:hover,input[type=text]:hover,input[type=number]:hover,select:hover{border-color:var(--teal)}
::placeholder{color:var(--placeholder);opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--teal);width:22px;height:22px;margin:0;flex:0 0 auto;cursor:pointer}
label.field{display:block;margin:.8em 0 .2em;font-weight:700;line-height:1.5}
label.field small{font-weight:400;color:var(--ink-soft)}

/* ───────── 差異區：等寬字、淡線框；加＝綠淡底、刪＝紅淡底劃線 ───────── */
.diff{font-family:var(--mono);font-size:.9rem;line-height:1.55;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:auto}
.diff .ln{display:block;padding:1px 10px;white-space:pre-wrap}
.diff .add{background:var(--good-soft)}
.diff .del{background:var(--bad-soft);text-decoration:line-through;text-decoration-color:var(--bad)}
.diff .ctx{color:var(--ink-soft)}
.diff .hdr{background:var(--teal-soft);font-weight:700}
.chart{width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px}
figure{margin:1.2em 0;text-align:center}
figure figcaption{font-size:.9rem;color:var(--ink-soft);margin-top:6px;text-align:left}
figure svg{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px}

/* ───────── 表格：淡藍表頭、淡線列、時間等寬數字 ───────── */
.table-wrap{overflow-x:auto;margin:1em 0}
.sec .wrap>.table-wrap{margin:0}   /* 在版心格線裡時，間距交給 row-gap */
table{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.65;background:transparent}
caption{caption-side:bottom;text-align:left;padding-top:14px;font-size:.9rem;color:var(--ink-soft)}
th{font-size:.8rem;letter-spacing:.06em;font-weight:700;color:var(--ink-soft);text-align:left;padding:10px 12px;background:var(--teal-soft);border-bottom:1px solid var(--line);vertical-align:bottom}
td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
td.time{font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.9em;font-weight:600;color:var(--teal-deep)}
td.time .mins{display:block;font-family:var(--sans);font-weight:400;color:var(--ink-soft);font-size:.85em}
td.seg strong{font-weight:700;font-size:1rem;line-height:1.4}
td .badge{margin-top:6px}

/* ───────── 頁尾：一條淡線，小字 ───────── */
footer.site{border-top:1px solid var(--line);margin-top:24px;padding:36px 0 56px;font-size:.88rem;line-height:1.75;color:var(--ink-soft)}
footer.site p{margin:.4em 0}
footer.site a{overflow-wrap:anywhere}

/* ───────── 入口頁（body.home）：矮頁首兩欄＋「改一格」示範卡、四格、一句話、去處格、議程 ───────── */
.home header.hero{padding:0}
.homehero{max-width:var(--max);margin:0 auto;padding:56px var(--gutter) 52px;display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.overline{display:block;margin:0;font-family:var(--mono);letter-spacing:.12em;font-size:.76rem;font-weight:700;color:var(--c-deep);line-height:1.6}
.home header.hero h1{font-size:clamp(2.3rem,4.2vw,3.6rem);line-height:1.2;letter-spacing:-.03em;margin:20px 0 18px;font-weight:800}
.home header.hero h1 span{display:block}
.home header.hero h1 .accent{color:var(--teal)}
.homeintro{font-size:1rem;line-height:1.8;max-width:540px;color:var(--ink-soft);margin:0}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.eventline{border-top:1px solid var(--line);margin:32px 0 0;padding-top:18px;font-size:.84rem;line-height:1.7;color:var(--ink-soft)}
.eventline strong{display:block;color:var(--ink);font-family:var(--mono);font-size:.95rem;font-weight:700;letter-spacing:.02em;margin-bottom:6px}
.hostline{font-size:.76rem;line-height:1.7;color:var(--ink-soft);margin:18px 0 0}
.evidence-paper{position:relative;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:4px;box-shadow:14px 14px 0 var(--teal-soft)}
.paper-top{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:16px;font-size:.74rem;color:var(--ink-soft)}
.paper-top .version{background:var(--teal-soft);color:var(--teal-deep);padding:2px 8px;font-family:var(--mono);font-weight:700;border-radius:3px;white-space:nowrap}
.paper-title{font-size:1.18rem;font-weight:800;margin:20px 0 16px;color:var(--ink)}
.paper-label{font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft);margin:0}
.paper-before{padding:14px 16px;background:var(--paper);color:var(--ink-soft);text-decoration:line-through;margin:6px 0 18px;font-size:.92rem;line-height:1.7;border-left:2px solid var(--line)}
.paper-after{padding:16px;background:var(--teal-soft);border-left:3px solid var(--teal);margin:6px 0 0;font-size:.95rem;font-weight:700;line-height:1.7;color:var(--ink)}
.paper-reason{border-top:1px solid var(--line);padding-top:16px;margin:20px 0 0;font-size:.85rem;line-height:1.7;color:var(--ink-soft)}
.paper-reason b{display:block;color:var(--c-deep);font-size:.75rem;letter-spacing:.06em;margin-bottom:6px}
.paper-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:20px;font-size:.72rem;color:var(--ink-soft)}
.saved{color:var(--good);font-weight:700;white-space:nowrap}
.saved::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:7px;vertical-align:middle}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;margin-bottom:26px;align-items:end}
.section-head h2{margin:8px 0 0}
.section-head>p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.8}
.four-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.four-steps article{padding:20px 0 0;border-top:2px solid var(--teal);font-size:.88rem;line-height:1.75}
.four-steps .numline{display:flex;align-items:baseline;gap:10px;margin:0}
.four-steps .number{font-family:var(--mono);font-size:1.7rem;color:var(--c);font-weight:700;line-height:1}
.four-steps .mins{font-family:var(--mono);font-size:.76rem;color:var(--ink-soft);letter-spacing:.04em}
.four-steps h3{margin:16px 0 8px;font-size:1.05rem;font-weight:800;line-height:1.4}
.four-steps p{margin:0 0 12px;color:var(--ink-soft)}
.four-steps .deliverable{font-size:.8rem;border-top:1px solid var(--line);padding-top:12px;color:var(--teal-deep);font-weight:600;line-height:1.7}
.home-rule{display:grid;grid-template-columns:.65fr 1.35fr;gap:12px 42px}
.home-rule h2{font-size:clamp(1.5rem,2.4vw,1.85rem);line-height:1.45;margin:8px 0 0}
.home-rule p{margin:0 0 12px;color:var(--ink-soft);font-size:.95rem}
.home .rule{font-size:1.3rem;font-weight:800;color:var(--ink);line-height:1.5;margin:0 0 10px}
.resource-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.resource-list a{display:grid;grid-template-columns:48px 1fr 26px;gap:12px;text-decoration:none;color:var(--ink);padding:24px 20px 24px 0;border-bottom:1px solid var(--line);align-items:start;min-height:44px}
.resource-list a:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.resource-list a:hover{color:var(--ink)}
.resource-list a:hover b{color:var(--teal-deep);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.resource-list .no{font-family:var(--mono);color:var(--c-deep);font-size:.8rem;font-weight:700;letter-spacing:.06em;padding-top:4px}
.resource-list b{display:block;font-size:1.08rem;margin-bottom:4px;font-weight:800}
.resource-list small{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.7}
.resource-list .arrow{font-size:1.2rem;color:var(--teal);line-height:1}
.compact-how p{font-size:.95rem}

/* ───────── 桌機（≥760px）：版心邊距 28、三欄步驟卡 ───────── */
@media (min-width:760px){
  :root{--gutter:28px}
  .trio{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ───────── 手機與窄平板（≤760px）───────── */
@media (max-width:760px){
  header.hero{padding:26px 0}
  main{padding:24px var(--gutter) 64px}
  .sec{padding:32px 0}
  .homehero{grid-template-columns:1fr;gap:32px;padding:32px var(--gutter) 40px}
  .home header.hero h1{font-size:2.3rem}
  .homeintro{max-width:none}
  .actions .btn{flex:1 1 auto}
  .evidence-paper{padding:22px;box-shadow:8px 8px 0 var(--teal-soft)}
  .section-head,.home-rule{grid-template-columns:1fr;gap:10px}
  .four-steps{grid-template-columns:1fr 1fr;gap:20px}
  .resource-list{grid-template-columns:1fr}
  .resource-list a:nth-child(even){padding-left:0;border-left:0}
  .tabs{gap:4px}
  .tabs button{font-size:.92rem;padding:12px 6px}
  /* 表格改「每列一塊」，欄名（data-th）印在每格前面；四到七欄的表在 375px 不會被壓成一欄三個字 */
  table.stack,table.stack tbody,table.stack tr{display:block}
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack caption{display:block}
  table.stack tr{border-bottom:1px solid var(--line);padding:14px 0}
  table.stack tr:first-child{border-top:1px solid var(--line)}
  table.stack td{display:grid;grid-template-columns:minmax(5.5em,7em) 1fr;gap:2px 12px;border:0;padding:4px 0;white-space:normal;font-size:.95rem}
  table.stack td::before{content:attr(data-th);font-size:.76rem;letter-spacing:.08em;font-weight:700;color:var(--ink-soft);padding-top:.3em}
  table.stack td>.badge{justify-self:start;margin-top:0}   /* 標籤維持自己的寬度，不被格線拉成整欄寬 */
  table.stack td.num{text-align:left}
  table.stack td.refl{min-width:0}
  table.stack td.time{grid-template-columns:minmax(5.5em,7em) auto 1fr}   /* 第三欄給「8 分」，跟時間同一列 */
  table.stack td.time .mins{display:block;margin:0;align-self:end}
}
@media (max-width:640px){
  body{font-size:16px}
  nav.topnav .inner{gap:6px}
  nav.topnav .links a{padding:0 8px}
  nav.topnav #projToggle{display:none}   /* 手機沒有投影這回事；留一顆深淺色 */
  nav.topnav .navbtn{display:none !important}   /* 手機用手指滑＋右側淡出，不放捲動鈕 */
  .card{padding:16px}
  .dest .head{padding:14px 16px 0;gap:10px}
  .dest .name{font-size:1.1rem}
  .dest p{padding:6px 16px 14px}
  th,td{padding:8px 10px;font-size:.9rem}
}
@media (max-width:560px){
  .four-steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .btn:active,nav.topnav button:active{transform:none}
}
@media print{
  nav.topnav,.btn,.copy,header.hero .art,.skip,.actions{display:none !important}
  body{background:#fff;color:#000}
  .card,.prompt,.dest,.pullquote,.evidence-paper{box-shadow:none;break-inside:avoid}
}