:root{
    --page:#FBFAF8; --surface:#FFFFFF; --surface-2:#F3F2EE;
    --border:#E4E1DA; --border-strong:#C9C5BB;
    --ink:#1C1B18; --ink-2:#56534C; --ink-3:#8A867C;
    --accent:#1F5FA9; --accent-bg:#E9F0F9; --accent-line:#B4CCE6;
    --warn:#9A5B14; --warn-bg:#FBF1E3; --warn-line:#E5C695;
    --ok:#1F6B4F; --ok-bg:#E6F2EC; --ok-line:#A9D4C0;
    --sans:-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei","Segoe UI",sans-serif;
    --mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --page:#16161A; --surface:#1D1D22; --surface-2:#24242A;
      --border:#33333B; --border-strong:#4A4A54;
      --ink:#ECEBE7; --ink-2:#AFACA5; --ink-3:#7E7B74;
      --accent:#79A8DC; --accent-bg:#1A2634; --accent-line:#30455F;
      --warn:#DCA65C; --warn-bg:#2C2113; --warn-line:#57411C;
      --ok:#6FC29C; --ok-bg:#132720; --ok-line:#245240;
    }
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);line-height:1.8;font-size:16px;}
  .wrap{max-width:1000px;margin:0 auto;padding:0 24px 120px;}

  /* ── 左側固定目錄 ────────────────────────────── */
  .sidebar{
    position:fixed;top:0;left:0;width:272px;height:100vh;overflow-y:auto;
    background:var(--surface);border-right:1px solid var(--border);
    padding:26px 0 40px;z-index:50;overscroll-behavior:contain;
  }
  .sb-brand{padding:0 22px 18px;border-bottom:1px solid var(--border);margin-bottom:14px;}
  .sb-brand .n{font-size:15px;font-weight:700;line-height:1.4;}
  .sb-brand .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;margin-top:5px;}
  /* ── 搜尋 ────────────────────────────── */
  .sb-search{position:relative;padding:14px 22px 4px;}
  .sb-search input{
    width:100%;padding:9px 34px 9px 12px;font-size:13.5px;font-family:var(--sans);
    border:1px solid var(--border-strong);border-radius:8px;background:var(--surface-2);
    color:var(--ink);outline:none;
  }
  .sb-search input:focus{border-color:var(--accent);background:var(--surface);}
  .sb-search .sb-search-ic{position:absolute;right:33px;top:23px;font-size:13px;color:var(--ink-3);pointer-events:none;}
  .search-results{
    display:none;position:absolute;left:22px;right:22px;top:100%;margin-top:6px;
    max-height:64vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border-strong);
    border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.2);z-index:80;
  }
  .search-results.on{display:block;}
  .search-results .sr-item{display:block;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;text-decoration:none;color:inherit;}
  .search-results .sr-item:last-child{border-bottom:none;}
  .search-results .sr-item:hover{background:var(--accent-bg);}
  .search-results .sr-path{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
  .search-results .sr-title{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.4;}
  .search-results .sr-snip{font-size:12.5px;color:var(--ink-2);line-height:1.5;}
  .search-results .sr-snip mark{background:var(--accent-line);color:var(--ink);border-radius:2px;padding:0 1px;}
  .search-results .sr-empty{padding:16px 14px;font-size:13px;color:var(--ink-3);}
  .search-flash{animation:searchFlash 2.2s ease;border-radius:8px;}
  @keyframes searchFlash{
    0%{background:var(--accent-bg);}
    100%{background:transparent;}
  }

  .sb-part{
    display:flex;align-items:center;gap:6px;width:100%;
    padding:14px 18px 8px 20px;margin:0;border:0;background:none;cursor:pointer;
    font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.1em;
    color:var(--ink-3);text-transform:uppercase;text-align:left;
  }
  .sb-part:hover{color:var(--ink);}
  .sb-caret{font-size:10px;transition:transform .18s ease;display:inline-block;}
  .sb-part[aria-expanded="false"] .sb-caret{transform:rotate(-90deg);}
  .sb-count{margin-left:auto;font-size:10px;font-weight:600;letter-spacing:0;
    color:var(--ink-3);background:var(--surface-2);border-radius:9px;padding:1px 7px;}
  .sb-group{overflow:hidden;}
  .sb-part[aria-expanded="false"] + .sb-group{display:none;}
  .sidebar a{
    display:block;padding:6px 22px 6px 24px;font-size:13.5px;line-height:1.5;
    color:var(--ink-2);text-decoration:none;border-left:2px solid transparent;
  }
  .sidebar a:hover{color:var(--ink);background:var(--surface-2);}
  .sidebar a.on{color:var(--accent);border-left-color:var(--accent);background:var(--accent-bg);font-weight:600;}
  .sidebar a .cn{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-right:7px;}
  .sidebar a.on .cn{color:var(--accent);}

  .sb-toggle{
    display:none;position:fixed;left:16px;bottom:20px;z-index:60;
    background:var(--ink);color:var(--page);border:none;border-radius:999px;
    padding:11px 20px;font-size:14px;font-weight:600;font-family:var(--sans);
    cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.28);
  }
  .sb-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:45;}

  @media (min-width:1000px){
    body{padding-left:272px;}
  }
  @media (max-width:999px){
    .sidebar{transform:translateX(-100%);transition:transform .22s ease;width:280px;}
    body.nav-open .sidebar{transform:none;}
    body.nav-open .sb-scrim{display:block;}
    .sb-toggle{display:block;}
  }
  /* 本文件近 10 萬 px，html 全域 smooth 會讓遠距離跳轉在 Chrome 失效，
     改由 JS 依距離決定：近距離平滑、遠距離直接跳。 */
  html{scroll-behavior:auto;}
  @media (prefers-reduced-motion: reduce){
    .sidebar{transition:none;}
  }

  header.cover{padding:72px 0 40px;border-bottom:2px solid var(--ink);}
  .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;margin:0 0 18px;}
  h1{font-size:40px;font-weight:700;line-height:1.25;margin:0 0 16px;letter-spacing:-.01em;}
  .lede{color:var(--ink-2);font-size:17px;max-width:660px;margin:0;}
  .cover-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
  .pill{font-size:13px;padding:5px 13px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);}

  /* ── 5 分鐘快速上手 ────────────────────────────── */
  .qs{margin:52px 0 0;}
  .qs-head h2{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px;}
  .qs-head p{margin:0 0 20px;color:var(--ink-2);font-size:14.5px;}
  .qs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  @media (max-width:700px){.qs-grid{grid-template-columns:1fr;}}
  .qs-card{border:1px solid var(--border);border-radius:14px;padding:22px 24px;background:var(--surface);}
  .qs-card .qn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:4px;}
  .qs-card h3{margin:0 0 4px;font-size:18px;}
  .qs-card .who{margin:0 0 16px;font-size:13px;color:var(--ink-3);}
  .qs-card ol{list-style:none;padding:0;margin:0;counter-reset:qs;}
  .qs-card ol li{counter-increment:qs;position:relative;padding-left:27px;margin-bottom:11px;font-size:14px;line-height:1.5;}
  .qs-card ol li:last-child{margin-bottom:0;}
  .qs-card ol li::before{
    content:counter(qs);position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
    background:var(--surface-2);border:1px solid var(--border-strong);color:var(--ink-2);
    font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  }
  .qs-card a{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap;}
  .qs-card a:hover{text-decoration:underline;}

  .part{margin:80px 0 0;padding:28px 32px;border-radius:16px;background:var(--ink);color:var(--page);}
  .part .pn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;opacity:.7;}
  .part h2{font-size:30px;font-weight:700;margin:6px 0 8px;color:var(--page);border:none;padding:0;}
  .part p{margin:0;opacity:.85;font-size:15px;}

  section.ch{margin:56px 0 0;scroll-margin-top:20px;}
  h2.ch-title{font-size:25px;font-weight:700;margin:0 0 6px;padding-top:26px;border-top:2px solid var(--ink);}
  .ch-num{font-family:var(--mono);font-size:12.5px;color:var(--accent);letter-spacing:.1em;display:block;margin-bottom:4px;}
  .ch-intro{color:var(--ink-2);font-size:15.5px;margin:0 0 28px;}
  h3{font-size:19px;font-weight:700;margin:38px 0 12px;scroll-margin-top:20px;}
  h4{font-size:16px;font-weight:700;margin:26px 0 10px;color:var(--ink);scroll-margin-top:20px;}
  p{margin:0 0 14px;}
  ul,ol{padding-left:24px;margin:0 0 16px;}
  li{margin-bottom:7px;}
  code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);padding:2px 7px;border-radius:5px;border:1px solid var(--border);}

  .tblwrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface);margin:18px 0;}
  table{width:100%;border-collapse:collapse;font-size:14.5px;}
  th{text-align:left;font-weight:700;color:var(--ink-2);font-size:12px;padding:12px 16px;background:var(--surface-2);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-strong);white-space:nowrap;}
  td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:top;}
  tr:last-child td{border-bottom:none;}
  td.f{font-weight:600;white-space:nowrap;}
  .req{color:#C0392B;font-weight:700;}
  @media (prefers-color-scheme: dark){.req{color:#E88A80;}}

  .note{border:1px solid var(--accent-line);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:16px 20px;background:var(--accent-bg);margin:20px 0;font-size:14.5px;}
  .note b{color:var(--accent);}
  .note.warn{border-color:var(--warn-line);border-left-color:var(--warn);background:var(--warn-bg);}
  .note.warn b{color:var(--warn);}
  .note.ok{border-color:var(--ok-line);border-left-color:var(--ok);background:var(--ok-bg);}
  .note.ok b{color:var(--ok);}

  figure{margin:22px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);}
  figure img{display:block;width:100%;height:auto;}
  figcaption{padding:11px 18px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--border);background:var(--surface-2);}
  figcaption b{color:var(--ink);}

  ol.steps{counter-reset:st;list-style:none;padding-left:0;margin:20px 0;}
  ol.steps>li{counter-increment:st;position:relative;padding-left:46px;margin-bottom:22px;}
  ol.steps>li::before{content:counter(st);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;}
  ol.steps>li>b{display:block;font-size:16px;margin-bottom:4px;}

  .quick{background:var(--surface);border:2px solid var(--ink);border-radius:16px;padding:26px 30px;margin:28px 0;}
  .quick h3{margin:0 0 6px;font-size:20px;}
  .quick .sub{color:var(--ink-2);font-size:14.5px;margin:0 0 18px;}
  .quick ul{list-style:none;padding-left:0;margin:0;}
  .quick li{padding-left:34px;position:relative;margin-bottom:12px;font-size:15px;}
  .quick li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border:2px solid var(--border-strong);border-radius:5px;}

  .faq{border-top:1px solid var(--border);padding:18px 0;}
  .faq:last-of-type{border-bottom:1px solid var(--border);}
  .faq .q{font-weight:700;font-size:15.5px;margin:0 0 6px;}
  .faq .a{color:var(--ink-2);font-size:14.5px;margin:0;}

  footer{margin-top:80px;padding-top:28px;border-top:2px solid var(--ink);color:var(--ink-3);font-size:13px;}
  .rev{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:8px;}

  /* ── 圖片放大燈箱 ────────────────────────────── */
  figure img{cursor:zoom-in;}
  .lightbox{
    display:none;position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.88);
    padding:40px;overflow:auto;cursor:zoom-out;
  }
  .lightbox.on{display:flex;align-items:flex-start;justify-content:center;}
  .lightbox img{max-width:100%;width:auto;height:auto;margin:auto;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);}
  .lightbox-close{
    position:fixed;top:20px;right:28px;z-index:201;
    background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);
    border-radius:999px;width:40px;height:40px;font-size:20px;line-height:1;cursor:pointer;
  }
  .lightbox-hint{
    position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:201;
    color:rgba(255,255,255,.65);font-size:12.5px;font-family:var(--mono);
  }

  /* ── 列印樣式 ────────────────────────────── */

  .ch-meta{
    display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-4px 0 18px;
    font-size:12.5px;color:var(--ink-3);
  }
  .ch-meta span{background:var(--surface-2);border:1px solid var(--border);
    border-radius:20px;padding:2px 11px;font-variant-numeric:tabular-nums;}
  .ch-meta .mn{color:var(--accent);border-color:var(--accent-line);background:var(--accent-bg);font-weight:600;}
  .tabmap{border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin:20px 0 26px;background:var(--surface-2);}
  .tabmap .tm-h{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:10px;}
  .tabmap ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 14px;}
  @media (max-width:700px){.tabmap ol{grid-template-columns:1fr;}}
  .tabmap li{font-size:13.5px;}
  .tabmap a{color:var(--ink-2);text-decoration:none;}
  .tabmap a:hover{color:var(--accent);text-decoration:underline;}
  .tabmap .tm-n{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;
    border-radius:50%;background:var(--surface);border:1px solid var(--border-strong);
    font-size:11px;margin-right:7px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
  /* 收尾區塊 */
  .finish{background:var(--surface);border:2px solid var(--accent);border-radius:16px;padding:30px 32px;margin:56px 0 8px;}
  .finish .fh{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
  .finish h3{margin:0 0 8px;font-size:22px;}
  .finish .fsub{color:var(--ink-2);font-size:14.5px;margin:0 0 22px;}
  .fin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:24px;}
  @media (max-width:700px){.fin-grid{grid-template-columns:1fr;}}
  .fin-card{border:1px solid var(--border);border-radius:12px;padding:18px 20px;background:var(--page);}
  .fin-card h4{margin:0 0 10px;font-size:15.5px;}
  .fin-card p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.7;}
  .fin-card .next{display:block;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);color:var(--ink);font-size:14px;}
  .fin-card .next b{color:var(--accent);}
  .fin-help{border-top:1px solid var(--border);padding-top:20px;}
  .fin-help h4{margin:0 0 10px;font-size:15px;}
  .fin-help ul{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink-2);}
  .fin-help li{margin-bottom:6px;}
  /* 回到頂端 */
  .to-top{position:fixed;right:22px;bottom:22px;z-index:60;width:46px;height:46px;border-radius:50%;
    border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-2);
    font-size:18px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.13);
    opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;transform:translateY(8px);}
  .to-top.on{opacity:1;pointer-events:auto;transform:none;}
  .to-top:hover{color:var(--accent);border-color:var(--accent);}

  @media print{
    .sidebar,.sb-toggle,.sb-scrim,.lightbox,.search-results,.to-top{display:none !important;}
    .sb-group{display:block !important;}
    body{padding-left:0 !important;background:#fff;color:#000;font-size:11.5px;}
    .wrap{max-width:none;padding:0;}
    a{color:inherit;text-decoration:none;}
    .part{background:#fff !important;color:#000 !important;border:2px solid #000;break-before:page;}
    .part h2{color:#000 !important;}
    .part:first-of-type{break-before:auto;}
    header.cover{break-after:page;}
    section.ch{break-inside:avoid-page;}
    h2.ch-title,h3,h4{break-after:avoid-page;}
    figure,table,.note,.quick,.faq,.finish{break-inside:avoid-page;}
    figure img{cursor:default;}
    .note,.note.warn,.note.ok{background:#fff !important;border:1px solid #000;}
    .quick{border-color:#000;}
    th{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  }

/* ── 分頁版專用 ───────────────────────── */
/* body 已有 padding-left:272px 讓出側欄，這裡只要置中就好，不要再加 margin */
.page{max-width:900px;margin:0 auto;padding:0 24px 100px;}
.page header.cover{border-bottom:none;padding-top:34px;}
.crumb{font-size:13px;color:var(--ink-3);padding:26px 0 0;}
.crumb a{color:var(--ink-2);text-decoration:none;}
.crumb a:hover{color:var(--accent);text-decoration:underline;}
.crumb span{margin:0 7px;color:var(--border-strong);}
.roletag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--accent);background:var(--accent-bg);border:1px solid var(--accent-line);
  border-radius:20px;padding:3px 12px;margin:14px 0 4px;}
.page section.ch{border-top:0;padding-top:6px;}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 0;}
@media (max-width:700px){.pager{grid-template-columns:1fr;}}
.pager a{display:block;border:1px solid var(--border);border-radius:12px;padding:14px 18px;
  text-decoration:none;color:var(--ink);background:var(--surface);}
.pager a:hover{border-color:var(--accent);}
.pager a.next{text-align:right;grid-column:2;}
@media (max-width:700px){.pager a.next{grid-column:1;text-align:left;}}
.pager .lbl{font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;}
.pager .t{font-size:15px;font-weight:600;margin-top:3px;}
.related{margin:38px 0 0;padding:20px 22px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface-2);}
.related h3{margin:0 0 10px;font-size:15px;}
.related ul{margin:0;padding-left:18px;columns:2;column-gap:26px;}
@media (max-width:700px){.related ul{columns:1;}}
.related li{margin:5px 0;font-size:14.5px;}
.related a{color:var(--ink-2);text-decoration:none;}
.related a:hover{color:var(--accent);text-decoration:underline;}
.cta{margin:38px 0 0;padding:26px 28px;border:2px solid var(--ink);border-radius:16px;
  background:var(--surface);}
.cta h3{margin:0 0 6px;font-size:19px;}
.cta p{margin:0 0 16px;color:var(--ink-2);font-size:14.5px;}
.cta a{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:700;padding:11px 24px;border-radius:10px;font-size:15px;}
.hubcard{margin:34px 0 0;padding:24px 26px;border:1px solid var(--border);border-radius:16px;
  background:var(--surface);}
.hubcard h2{margin:0 0 4px;font-size:21px;}
.hubcard .who{margin:0 0 16px;color:var(--ink-3);font-size:13.5px;}
.hubcard ol{list-style:none;margin:0;padding:0;columns:2;column-gap:30px;}
@media (max-width:700px){.hubcard ol{columns:1;}}
.hubcard li{margin:6px 0;break-inside:avoid;}
.hubcard a{color:var(--ink-2);text-decoration:none;font-size:14.5px;}
.hubcard a:hover{color:var(--accent);}
.hubcard .n{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-right:8px;}