/* ===========================================================================
   Agent Skill 一日工作坊 — baoyu 編輯風 deck 設計系統（共用）
   每一章 deck 都 <link> 這支 + deck-stage.js。風格的單一真相在這裡。
   硬規則：無 emoji、無圓角色條卡片、無自繪 SVG 插畫、最小字級 24px、
   中英之間半形空格、全形標點（句中不用半形逗號、不用破折號）。
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,500;0,600;1,500&family=Noto+Sans+TC:wght@300;400;500;700;900&family=Noto+Serif+TC:wght@500;600;700;900&family=JetBrains+Mono:wght@400;600&display=swap");

deck-stage:not(:defined){visibility:hidden}
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#f4f0e6;            /* 暖紙底 */
  --bg-ink:#1b1e1b;        /* 深墨底（封面、章節幕、最值錢頁） */
  --ink:#1f2420;           /* 紙底文字 */
  --ink-soft:#5d5c4f;      /* 次級 */
  --ink-faint:#928b78;     /* 三級／索引數字 */
  --on-ink:#efeadd;        /* 墨底文字 */
  --on-ink-soft:#b6b09c;
  --rule:rgba(31,36,32,.18);
  --rule-ink:rgba(239,234,221,.22);
  --panel:#ece6d8;         /* 圖片／程式碼底板 */
  --teal:#2c7a6c;          /* 強調一（腳本／第一類） */
  --gold:#b3801f;          /* 強調二（主 Agent／時間戳／第二類） */
  --rust:#b3472d;          /* 強調三（子代理／禁令／第三類） */

  --font-display:"Newsreader","Noto Serif TC",Georgia,serif;
  --font-serif:"Noto Serif TC",serif;
  --font-body:"Noto Sans TC",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"JetBrains Mono","Noto Sans TC",monospace;

  --t-display:104px;
  --t-title:58px;
  --t-subtitle:40px;
  --t-lede:32px;
  --t-body:27px;
  --t-small:25px;
  --t-kicker:25px;

  --pad-x:124px;
  --pad-y:90px;
}

/* deck-stage 把 <section> 撐滿，但不撐裡面的 wrapper；給 wrapper 真高度，
   讓垂直排版填滿 1080，full-bleed 圖另計（object-fit 自處理）。 */
section[data-label] > *:not(img):not(picture):not(video):not(svg):not(canvas){
  height:100%;
  box-sizing:border-box;
}

.slide{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  padding:var(--pad-y) var(--pad-x);
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.slide.ink{background:var(--bg-ink);color:var(--on-ink)}

/* ---------- 共用標題區 ---------- */
.kicker{
  font-family:var(--font-mono);
  font-size:var(--t-kicker);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--teal);
  font-weight:600;
}
.ink .kicker{color:var(--gold)}
.title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:var(--t-title);
  line-height:1.18;
  letter-spacing:-.01em;
  margin-top:24px;
}
.title em{font-style:normal;color:var(--teal)}
.ink .title em{color:var(--gold)}
.lede{
  font-size:var(--t-lede);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:32em;
  margin-top:26px;
  font-weight:300;
}
.ink .lede{color:var(--on-ink-soft)}
.hr{height:1px;background:var(--rule);border:0;margin:38px 0}
.ink .hr{background:var(--rule-ink)}
.grow{flex:1 1 auto}              /* 把後面內容推到底，或撐開留白 */

/* ---------- 封面／章節幕 ---------- */
.cover{justify-content:center}
.cover .eyebrow{font-family:var(--font-mono);font-size:var(--t-kicker);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cover h1{font-family:var(--font-serif);font-weight:700;font-size:var(--t-display);line-height:1.14;letter-spacing:-.015em;margin-top:40px}
.cover .deck-sub{font-size:var(--t-subtitle);font-weight:300;color:var(--on-ink-soft);margin-top:34px;max-width:28em;line-height:1.5}
.cover .meta{font-family:var(--font-mono);font-size:var(--t-small);color:var(--on-ink-soft);letter-spacing:.04em;margin-top:60px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cover .meta .dot{width:5px;height:5px;border-radius:50%;background:var(--rust);display:inline-block}
/* 大編號章節幕（封面變體）：把 .chno 放進 .cover */
.chno{font-family:var(--font-display);font-size:200px;font-weight:600;color:var(--rule);line-height:.8;letter-spacing:-.02em}

/* ---------- 多欄索引列表（2 / 3 / 4 欄） ---------- */
.cols{display:grid;gap:0;flex:1 1 auto;align-content:center}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.col{padding:0 44px;border-left:1px solid var(--rule)}
.col:first-child{padding-left:0;border-left:0}
.ink .col{border-left-color:var(--rule-ink)}
.idx{font-family:var(--font-mono);font-size:var(--t-small);color:var(--ink-faint);letter-spacing:.1em}
.col h3{font-family:var(--font-serif);font-size:34px;font-weight:600;margin-top:18px;line-height:1.3}
.col p{font-size:var(--t-body);line-height:1.64;color:var(--ink-soft);margin-top:16px;font-weight:300}
.ink .col p{color:var(--on-ink-soft)}
.col p b,.col p strong{color:var(--ink);font-weight:600}
.ink .col p b,.ink .col p strong{color:var(--on-ink)}

/* ---------- 大編號流程（取代「步驟卡」） ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:46px 40px;flex:1 1 auto;align-content:center}
.num-item{display:flex;flex-direction:column;gap:12px}
.num-item .num{font-family:var(--font-display);font-size:84px;font-weight:600;line-height:.9;color:var(--ink)}
.num-item .num-lb{font-size:30px;font-weight:500;color:var(--ink)}
.ink .num-item .num-lb{color:var(--on-ink)}
.num-item.teal .num{color:var(--teal)} .num-item.gold .num{color:var(--gold)} .num-item.rust .num{color:var(--rust)}

/* ---------- 三角色欄 ---------- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.role{padding:0 40px;border-left:1px solid var(--rule)}
.role:first-child{padding-left:0;border-left:0}
.role .rh{font-family:var(--font-serif);font-size:33px;font-weight:700;line-height:1.2}
.role.teal .rh{color:var(--teal)} .role.gold .rh{color:var(--gold)} .role.rust .rh{color:var(--rust)}
.role .rt{font-size:var(--t-body);color:var(--ink-soft);line-height:1.6;margin-top:18px;font-weight:300}
.role .rt b{color:var(--ink);font-weight:600}

/* ---------- 圖例 ---------- */
.legend{display:flex;gap:38px;align-items:center;font-size:var(--t-small);color:var(--ink-soft);font-weight:400}
.ink .legend{color:var(--on-ink-soft)}
.legend i{font-style:normal}
.legend .sw{display:inline-block;width:30px;height:4px;border-radius:2px;margin-right:12px;vertical-align:middle}

/* ---------- 編輯表格 ---------- */
table.map{width:100%;border-collapse:collapse}
table.map td,table.map th{text-align:left;padding:18px 8px;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ink table.map td,.ink table.map th{border-bottom-color:var(--rule-ink)}
table.map thead th{font-family:var(--font-mono);font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;padding-bottom:14px}
table.map .fn{font-family:var(--font-mono);font-size:26px;color:var(--teal);font-weight:600;white-space:nowrap}
table.map .do{font-size:var(--t-body);color:var(--ink);font-weight:300}
.ink table.map .do{color:var(--on-ink)}
table.map .st{font-family:var(--font-mono);font-size:var(--t-small);color:var(--gold);font-weight:600;white-space:nowrap;text-align:right}

/* ---------- 鍵值清單（定義／對照） ---------- */
.kv{display:flex;flex-direction:column}
.kv-row{display:grid;grid-template-columns:minmax(180px,auto) 1fr;gap:34px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule)}
.kv-row:last-child{border-bottom:0}
.ink .kv-row{border-bottom-color:var(--rule-ink)}
.kv-row .k{font-family:var(--font-serif);font-size:30px;font-weight:600;color:var(--ink)}
.ink .kv-row .k{color:var(--on-ink)}
.kv-row .v{font-size:var(--t-body);color:var(--ink-soft);font-weight:300;line-height:1.55}
.ink .kv-row .v{color:var(--on-ink-soft)}

/* ---------- 禁令清單（✕ + 標題 + 說明） ---------- */
.donts{display:flex;flex-direction:column;gap:0}
.dont{display:grid;grid-template-columns:50px 1fr;gap:24px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)}
.dont:last-of-type{border-bottom:0}
.ink .dont{border-bottom-color:var(--rule-ink)}
.dont .x{font-family:var(--font-serif);font-size:32px;color:var(--rust);font-weight:700;line-height:1}
.dont .dt{font-size:29px;font-weight:600;color:var(--ink)}
.ink .dont .dt{color:var(--on-ink)}
.dont .dd{font-size:var(--t-small);font-weight:300;color:var(--ink-soft);margin-top:6px;line-height:1.45}
.ink .dont .dd{color:var(--on-ink-soft)}
.dont .dd code,.dont .dd b{font-family:var(--font-mono);font-size:.92em;color:var(--gold);font-weight:600}

/* ---------- 引言／金句 ---------- */
.pull{font-family:var(--font-serif);font-size:42px;line-height:1.45;font-weight:600;letter-spacing:-.005em;max-width:30em}
.pull .mk{color:var(--teal)}
.ink .pull{font-size:38px;line-height:1.42}
.ink .pull .mk{color:var(--gold)}
.pull-cap{font-family:var(--font-mono);font-size:var(--t-small);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px}
.ink .pull-cap{color:var(--on-ink-soft)}

/* ---------- 巨大數字（統計） ---------- */
.stat{font-family:var(--font-display);font-size:180px;font-weight:600;line-height:.9;color:var(--teal);letter-spacing:-.02em}
.stat.gold{color:var(--gold)} .stat.rust{color:var(--rust)}
.stat-cap{font-size:var(--t-subtitle);font-weight:300;color:var(--ink-soft);margin-top:20px;max-width:24em;line-height:1.45}

/* ---------- 圖片：截圖／示意（aspect-fit + 框 + 說明） ---------- */
.figure{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.figure .frame{border:1px solid var(--rule);background:#fff;border-radius:4px;box-shadow:0 1px 2px rgba(31,36,32,.06),0 18px 40px -22px rgba(31,36,32,.4);overflow:hidden;display:flex}
.figure img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.figure .cap{font-family:var(--font-mono);font-size:22px;color:var(--ink-faint);letter-spacing:.02em}
.figrow{display:grid;gap:34px;flex:1 1 auto;align-items:center}
.figrow.two{grid-template-columns:1fr 1fr}
.figrow.split{grid-template-columns:1fr 1fr}   /* 圖＋文 */

/* ---------- 程式碼／純文字檔（深底） ---------- */
.code{background:#22251f;color:#e9e4d6;font-family:var(--font-mono);font-size:24px;line-height:1.6;border-radius:6px;padding:28px 32px;white-space:pre-wrap;word-break:break-word;overflow:hidden}
.code .kw{color:#cf9c4e} .code .str{color:#9bbf8f} .code .cmt{color:#8f897a}

/* ---------- 小註腳／來源 ---------- */
.note-line{font-size:var(--t-body);color:var(--ink-soft);font-weight:300;line-height:1.6}
.note-line b{color:var(--ink);font-weight:600}
.ink .note-line{color:var(--on-ink-soft)}
.ink .note-line b{color:var(--on-ink)}
.src{font-family:var(--font-mono);font-size:22px;color:var(--ink-faint);letter-spacing:.02em;line-height:1.6}

/* ---------- 時間軸（4 點等距） ---------- */
.rail{display:flex;justify-content:space-between;align-items:center;position:relative;margin:54px 0 14px;padding:0 10px}
.rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--rule)}
.stop{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--bg);padding:0 14px}
.stop .ts{font-family:var(--font-mono);font-size:30px;font-weight:600;color:var(--gold);margin-bottom:18px}
.stop .pin{width:15px;height:15px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px var(--bg)}
.stop .tag{font-size:var(--t-small);color:var(--ink-soft);margin-top:18px}

/* ---------- 回總覽角標（章與章之間的導覽） ---------- */
.home-link{position:fixed;top:30px;right:34px;z-index:30;font-family:var(--font-mono);font-size:20px;letter-spacing:.08em;color:var(--ink-faint);text-decoration:none;background:rgba(244,240,230,.82);padding:8px 14px;border-radius:20px;border:1px solid var(--rule);backdrop-filter:blur(6px)}
.home-link:hover{color:var(--teal)}

@media print{.home-link{display:none}}