:root{
  --blue:#004AB5;
  --blue-deep:#003A8F;
  --blue-soft:#EEF3FB;
  --blue-tint:#F6F9FD;
  --warm:#EBEAE7;
  --paper:#FAF9F6;
  --ink:#0A0A0A;
  --ink-2:#1a1a2e;
  --ink-3:#2a2a35;
  --grey:#6a6a72;
  --grey-2:#9a9aa1;
  --line:#E4E2DE;
  --line-2:#D2D0CB;
  --red:#D64545;
  --green:#3A8050;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink-2);
  font-family:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  font-feature-settings:"palt","ss01";
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
:lang(zh-Hant),[lang="zh-Hant"]{font-family:"Noto Sans TC","Inter","PingFang TC",sans-serif}

.wrap{max-width:780px;margin:0 auto;padding:48px 28px 80px}

header.top{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:36px}
header.top img{height:28px}
header.top .meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600}
header.top .meta .b{color:var(--blue);font-weight:700;margin-right:8px}

.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:14px}
h1{font-size:38px;line-height:1.12;letter-spacing:-.02em;font-weight:900;color:var(--ink-2);margin-bottom:14px}
h2{font-size:24px;line-height:1.25;letter-spacing:-.01em;font-weight:800;color:var(--ink-2);margin:42px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
h2:first-of-type{border-top:none;padding-top:0}
h3{font-size:18px;line-height:1.35;font-weight:700;color:var(--ink-2);margin:24px 0 10px}
h4{font-size:15px;font-weight:700;color:var(--ink-2);margin:18px 0 8px;letter-spacing:-.003em}
p{font-size:15px;line-height:1.7;color:var(--ink-3);margin-bottom:14px}
.lead{font-size:17px;line-height:1.6;color:var(--ink-3);font-weight:400;margin-bottom:20px}

ul,ol{padding-left:22px;margin-bottom:18px}
li{font-size:15px;line-height:1.7;color:var(--ink-3);margin-bottom:6px}
li::marker{color:var(--blue)}

code{font-family:"JetBrains Mono","SF Mono",Menlo,monospace;font-size:13px;background:#fff;border:1px solid var(--line);padding:2px 7px;border-radius:3px;color:var(--ink-2)}
pre{background:#0F1A2E;color:#D4E5FF;border-radius:6px;padding:16px 18px;font-family:"JetBrains Mono",monospace;font-size:12.5px;line-height:1.7;overflow-x:auto;margin:14px 0 20px;border:1px solid #0F1A2E}
pre code{background:none;border:none;padding:0;color:inherit;font-size:inherit}
pre .ct{color:#9DCDFF;opacity:.7}
pre .ok{color:#7FE6A8}
pre .pmt{color:#7FB3FF}
pre .em{color:#FFE08C}

a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--blue-deep)}

strong{color:var(--ink-2);font-weight:700}
em{font-style:normal;color:var(--blue);font-weight:600}

.callout{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);padding:16px 18px;margin:18px 0;border-radius:0 4px 4px 0}
.callout.warm{background:var(--paper);border-left-color:var(--ink-3)}
.callout.red{background:#FDF2F2;border-left-color:var(--red)}
.callout.green{background:#F0F7F2;border-left-color:var(--green)}
.callout h4{margin-top:0}
.callout p:last-child{margin-bottom:0}
.callout .tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:700;display:inline-block;margin-bottom:6px}
.callout.warm .tag{color:var(--ink-2)}
.callout.red .tag{color:var(--red)}
.callout.green .tag{color:var(--green)}

table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--paper);font-weight:700;color:var(--ink-2);font-size:12px;letter-spacing:.05em}
td code{font-size:12px}

.step-list{counter-reset:step;list-style:none;padding-left:0;margin:16px 0 24px}
.step-list > li{counter-increment:step;position:relative;padding:14px 0 14px 50px;border-bottom:1px solid var(--line)}
.step-list > li:last-child{border-bottom:none}
.step-list > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:14px;
  font-family:"Inter";font-weight:700;font-size:14px;color:var(--blue);
  letter-spacing:.04em;
  background:var(--blue-soft);
  padding:3px 8px;border-radius:3px;
}
.step-list h4{margin-top:0}

.toc{background:#fff;border:1px solid var(--line);padding:16px 20px;margin:24px 0 32px;border-radius:4px}
.toc .lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:700;margin-bottom:10px}
.toc ol{padding-left:20px;margin:0}
.toc li{font-size:14px;margin-bottom:4px}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

footer.bot{margin-top:60px;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--grey);line-height:1.6}
footer.bot a{color:var(--grey-2)}

@media print{
  body{background:#fff}
  .wrap{max-width:100%;padding:0}
  header.top,footer.bot{break-inside:avoid}
  pre{background:#f4f6fa;color:#1a1a2e;border:1px solid var(--line)}
  pre .ct,pre .ok,pre .pmt,pre .em{color:#1a1a2e}
}
