/* ============================================================
   买币指南 buyledge.com — 站点样式表
   设计语言：工具书 / 编辑部（editorial reference manual）
   - 不加载任何 Web 字体：站内已承诺不向第三方服务器发请求。
     辨识度靠版式尺度、色彩层次、装饰构件做出来。
   - 单文件覆盖全站 29 个页面，类名词汇表与 _private/gen.py 外壳一致。
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 底色三层：画布 / 强调区 / 卡片 */
  --canvas:#F6F2EA;
  --canvas-2:#EDE7D9;
  --surface:#FFFCF7;
  --surface-2:#F1ECE1;
  --surface-3:#E7E0D1;

  /* 文字三级 */
  --ink:#14120C;
  --ink-2:#3D392E;
  --ink-3:#71695A;

  /* 描边三级 */
  --line:#E2DACA;
  --line-2:#CFC4AE;
  --line-3:#B9AC91;

  /* 主色：深松绿。链接、主按钮、序号、进度 */
  --brand:#0B5140;
  --brand-1:#084234;
  --brand-2:#12705A;
  --brand-tint:#E2EFEA;
  --brand-ink:#FFFFFF;

  /* 次色：黄铜。只用于装饰性数字、章节标记，不承担语义 */
  --gold:#93641A;
  --gold-tint:#F6EBD6;

  /* 语义三色：能用 / 有代价 / 走不通 */
  --pos:#14664F;   --pos-tint:#E3F0EA;
  --warn:#8F4E08;  --warn-tint:#FAEBD8;
  --neg:#9C2A1D;   --neg-tint:#F9E7E3;

  /* 圆角 */
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;

  /* 阴影：一层贴地、二层浮起、三层悬停 */
  --sh-1:0 1px 2px rgba(20,18,12,.05);
  --sh-2:0 2px 4px rgba(20,18,12,.05),0 12px 28px -18px rgba(20,18,12,.32);
  --sh-3:0 4px 10px rgba(20,18,12,.07),0 26px 50px -24px rgba(20,18,12,.42);
  --edge:rgba(20,18,12,.16);

  /* 版心 */
  --w-shell:72rem;   /* 页面外壳，页眉页脚同宽 */
  --w-read:47rem;    /* 带右侧目录的正文，阅读行长 */
  --w-wide:60rem;    /* 无目录的目录页 / 工具页 */

  /* 字族 */
  --f-sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* 拉丁与数字走衬线，中文回落到正文同款黑体：
     避免大字号处被系统 serif（宋体）接管、和正文明显不是一套字。 */
  --f-num:"Iowan Old Style",Georgia,"Times New Roman","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  color-scheme:light dark;
}

@media (prefers-color-scheme:dark){
  :root{
    --canvas:#0F0E0A;
    --canvas-2:#15130D;
    --surface:#1A1812;
    --surface-2:#221F17;
    --surface-3:#2B271D;

    --ink:#F0ECE1;
    --ink-2:#CFC8B8;
    --ink-3:#968E7C;

    --line:#2E2A20;
    --line-2:#413C2E;
    --line-3:#565040;

    --brand:#63C9AB;
    --brand-1:#8FDCC4;
    --brand-2:#63C9AB;
    --brand-tint:#15332B;
    --brand-ink:#08120F;

    --gold:#DDA85C;
    --gold-tint:#332810;

    --pos:#63C9AB;   --pos-tint:#14312A;
    --warn:#E0A263;  --warn-tint:#33260F;
    --neg:#E88E7F;   --neg-tint:#331C18;

    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px -18px rgba(0,0,0,.9);
    --sh-3:0 4px 10px rgba(0,0,0,.5),0 26px 50px -24px rgba(0,0,0,1);
    --edge:rgba(0,0,0,.6);
  }
}

/* ---------- 2. 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5.5rem;
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.85;
  letter-spacing:.01em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{
  color:var(--brand);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  transition:color .15s ease,text-decoration-color .15s ease;
}
a:hover{color:var(--brand-2);text-decoration-thickness:2px}

::selection{background:var(--brand-tint);color:var(--brand-1)}

:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:var(--r-xs)}

hr{border:0;border-top:1px solid var(--line)}

.wrap{max-width:var(--w-shell);margin:0 auto;padding:0 1.5rem}
@media (max-width:560px){.wrap{padding:0 1.15rem}}

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:1rem;top:.6rem;z-index:99;
  background:var(--surface);color:var(--ink);
  padding:.6rem 1rem;border-radius:var(--r-sm);
  border:1px solid var(--line-2);box-shadow:var(--sh-2);
}

/* 全站通用的小标签：字距拉开的等宽小字，工具书感的来源之一 */
.kicker,.toc__t,.card__k,.gl-tag,.foot-grid h3,.cal__t,thead th,.rel h2{
  font-family:var(--f-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- 3. 页眉 ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--canvas) 86%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head__in{
  display:flex;align-items:center;gap:1rem;
  min-height:4.25rem;position:relative;
}

.brand{
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--ink);
}
/* ₿ 放进一个实心方牌里，给品牌一个视觉锚点 */
.brand__mark{
  display:grid;place-items:center;
  width:2rem;height:2rem;flex:none;
  border-radius:var(--r-xs);
  background:var(--brand);color:var(--brand-ink);
  font-family:var(--f-num);font-size:1.15rem;font-weight:700;
  line-height:1;box-shadow:var(--sh-1);
}
.brand__name{font-size:1.06rem;font-weight:680;letter-spacing:.02em}
.brand__dom{
  font-family:var(--f-mono);font-size:.7rem;
  color:var(--ink-3);letter-spacing:.04em;
  padding:.15rem .4rem;border-radius:var(--r-xs);
  background:var(--surface-2);
}
@media (max-width:460px){.brand__dom{display:none}}

.nav{margin-left:auto;display:flex;gap:.1rem;align-items:center}
.nav a{
  position:relative;
  color:var(--ink-2);text-decoration:none;font-size:.93rem;
  padding:.5rem .78rem;border-radius:var(--r-pill);
  white-space:nowrap;transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--brand-1);background:var(--brand-tint);font-weight:640}

/* 语种切换。DOM 顺序是 brand → nav-toggle → nav → lang：
   宽屏 .nav 吃掉 margin-left:auto，它就落在导航右边；
   窄屏 .nav 绝对定位脱离，改由 .nav-toggle 顶开，它跟在菜单钮右边。 */
.lang{
  flex:none;
  display:inline-flex;align-items:center;
  margin-left:.6rem;padding:.35rem .7rem;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:.78rem;font-weight:640;letter-spacing:.04em;
  color:var(--ink-2);text-decoration:none;background:var(--surface);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.lang:hover{background:var(--brand-tint);border-color:transparent;color:var(--brand-1)}

.nav-toggle{
  margin-left:auto;display:none;align-items:center;gap:.4rem;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);
  border-radius:var(--r-pill);padding:.42rem .9rem;
  font:inherit;font-size:.9rem;cursor:pointer;
  box-shadow:var(--sh-1);transition:border-color .15s ease;
}
.nav-toggle:hover{border-color:var(--line-3)}

@media (max-width:860px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    flex-direction:column;align-items:stretch;gap:.15rem;
    background:var(--surface);
    border:1px solid var(--line);border-top:0;
    border-radius:0 0 var(--r) var(--r);
    padding:.5rem;display:none;box-shadow:var(--sh-3);
  }
  .nav.is-open{display:flex}
  .nav a{padding:.65rem .7rem;border-radius:var(--r-sm)}
}

/* ---------- 4. 面包屑 ---------- */
.crumbs{font-size:.8rem;color:var(--ink-3);padding:1.4rem 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}

/* ---------- 5. 骨架：正文 + 右侧目录 ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;padding:.5rem 0 4.5rem}
@media (min-width:1080px){
  .layout{grid-template-columns:minmax(0,1fr) 16rem;gap:4rem}
  .toc-col{order:2}
}
.article{max-width:var(--w-read);min-width:0}
/* 目录型页面没有右侧目录，47rem 会在右边留下大片空白 */
.article--wide{max-width:var(--w-wide)}
.tool{max-width:var(--w-wide)}

/* ---------- 6. 文章头 ---------- */
.art-head{padding:2rem 0 1.4rem;position:relative}
.art-head::after{
  content:"";display:block;margin-top:1.4rem;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand) 0,var(--brand) 3.5rem,var(--line) 3.5rem,var(--line) 100%);
}
.kicker{
  display:inline-block;font-size:.7rem;font-weight:700;
  color:var(--brand);margin:0 0 .9rem;
  padding:.24rem .6rem;border-radius:var(--r-xs);
  background:var(--brand-tint);
}
h1{
  font-size:clamp(1.75rem,1.1rem + 2.4vw,2.6rem);
  line-height:1.28;margin:0 0 .9rem;
  letter-spacing:-.015em;font-weight:730;
}
.lede{font-size:1.08rem;color:var(--ink-2);margin:0 0 1.1rem;line-height:1.75}
.meta{
  display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;
  font-size:.78rem;color:var(--ink-3);
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;
}
.meta span{display:inline-flex;align-items:center;gap:.35rem}
.meta span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--line-2)}

/* ---------- 7. 正文排版 ---------- */
.prose{padding-top:1.8rem}

/* 用 :where() 压到零特指度：正文里的普通段落和列表照常走这套，
   而 .steps / .path / .list / .check / .updated / .cta__fine 这些
   自带排版的组件仍由它们自己的规则决定间距（否则会被这里顶掉）。 */
.prose :where(p){margin:0 0 1.1rem}
.prose :where(ul,ol){margin:0 0 1.2rem;padding-left:1.4rem}

.prose h2{
  font-size:clamp(1.3rem,1.15rem + .55vw,1.5rem);
  line-height:1.42;margin:3.2rem 0 1rem;
  font-weight:720;letter-spacing:-.01em;
  padding-top:1.1rem;border-top:1px solid var(--line);
  position:relative;
}
/* 章节起点的一小段主色横杠，压住 h2 上方的分隔线 */
.prose h2::before{
  content:"";position:absolute;top:-1px;left:0;
  width:3.5rem;height:2px;border-radius:2px;background:var(--brand);
}
.prose h2:first-child{margin-top:1.4rem}
.prose h3{font-size:1.1rem;margin:2.2rem 0 .7rem;font-weight:690;color:var(--ink)}
.prose h4{font-size:.99rem;margin:1.6rem 0 .45rem;font-weight:660;color:var(--ink-2)}
.prose li{margin:0 0 .55rem}
.prose li>ul,.prose li>ol{margin-top:.55rem}
.prose li::marker{color:var(--line-3)}
.prose strong{font-weight:690;color:var(--ink)}
/* em 当高亮用：底部一道主色淡彩，不用斜体（中文斜体很难看） */
.prose em{
  font-style:normal;
  background:linear-gradient(transparent 60%,var(--brand-tint) 60%);
  padding:0 .12em;
}
.prose hr{margin:2.8rem 0}
.prose blockquote{
  margin:1.6rem 0;padding:.3rem 0 .3rem 1.3rem;
  border-left:3px solid var(--line-2);color:var(--ink-2);
}

.anchor{
  float:left;margin-left:-1.3rem;width:1.3rem;
  color:var(--line-2);text-decoration:none;
  opacity:0;font-weight:400;transition:opacity .15s ease;
}
h2:hover .anchor,h3:hover .anchor,.anchor:focus{opacity:1}
@media (max-width:960px){.anchor{display:none}}

code{
  font-family:var(--f-mono);font-size:.85em;
  background:var(--surface-2);border:1px solid var(--line);
  padding:.1em .4em;border-radius:var(--r-xs);
  word-break:break-word;
}
/* 界面上的按钮 / 菜单名 */
code.ui{
  background:var(--brand-tint);border-color:transparent;color:var(--brand-1);
  font-family:var(--f-sans);font-size:.9em;font-weight:640;
}

/* ---------- 8. 提示块 ---------- */
.cal{
  margin:1.8rem 0;padding:1.15rem 1.3rem;
  border-radius:var(--r);
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--line-2);
}
.cal>:first-child{margin-top:0}
.cal>:last-child{margin-bottom:0}
.cal__t{
  display:block;font-weight:700;font-size:.74rem;
  margin-bottom:.6rem;color:var(--ink-2);
}
/* 每种提示块前面一个圆形字标，纯 ASCII 字符，不依赖图标字体 */
.cal__t::before{
  content:"i";
  display:inline-grid;place-items:center;
  width:1.2rem;height:1.2rem;margin-right:.5rem;
  border-radius:50%;
  /* 底色按类型给，字色一律用画布色：深浅两套主题下都够对比。
     这里不能用 currentColor 当底色 —— 同一条规则里字色也被改了，
     两者会解析成同一个值，字标直接隐形。 */
  background:var(--ink-2);color:var(--canvas);
  font-size:.7rem;font-weight:700;letter-spacing:0;
  vertical-align:-.22em;
}
.cal--note{background:var(--brand-tint);border-color:transparent;border-left-color:var(--brand)}
.cal--note .cal__t{color:var(--brand-1)}
.cal--note .cal__t::before{background:var(--brand)}
.cal--warn{background:var(--warn-tint);border-color:transparent;border-left-color:var(--warn)}
.cal--warn .cal__t{color:var(--warn)}
.cal--warn .cal__t::before{content:"!";background:var(--warn)}
.cal--stop{background:var(--neg-tint);border-color:transparent;border-left-color:var(--neg)}
.cal--stop .cal__t{color:var(--neg)}
.cal--stop .cal__t::before{content:"\00D7";background:var(--neg)}
.cal--real{background:var(--surface-2);border-color:transparent;border-left-color:var(--ink-2)}
.cal--real .cal__t{color:var(--ink)}
.cal--real .cal__t::before{content:"\2022";background:var(--ink-2)}

/* ---------- 9. 步骤时间轴 ---------- */
.steps{list-style:none;counter-reset:step;margin:2rem 0;padding:0}
.steps>li{
  counter-increment:step;position:relative;
  padding:0 0 1.8rem 3.2rem;margin:0;
  border-left:2px solid var(--line);
}
.steps>li:last-child{border-left-color:transparent;padding-bottom:0}
/* 序号奖章：实心主色圆 + 画布色描边，把时间轴的竖线压断 */
.steps>li::before{
  content:counter(step);
  position:absolute;left:-1.05rem;top:-.15rem;
  width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--brand);color:var(--brand-ink);
  box-shadow:0 0 0 4px var(--canvas),var(--sh-1);
  display:grid;place-items:center;
  font-family:var(--f-num);font-size:.92rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.steps>li>h3,.steps>li>h4{margin-top:0}
.steps__t{display:block;font-weight:690;margin:0 0 .4rem;font-size:1.03rem;line-height:1.5}

/* ---------- 10. 表格 ---------- */
.tbl{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:1.8rem 0;
  border:1px solid var(--line);border-radius:var(--r);
  background-color:var(--surface);
  /* 左右两侧内阴影：只有真的还能横向滚动时才出现 */
  background-image:
    linear-gradient(to right,var(--surface),transparent),
    linear-gradient(to left,var(--surface),transparent),
    linear-gradient(to right,var(--edge),transparent),
    linear-gradient(to left,var(--edge),transparent);
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:2.5rem 100%,2.5rem 100%,.9rem 100%,.9rem 100%;
  background-attachment:local,local,scroll,scroll;
}
table{border-collapse:collapse;width:100%;font-size:.91rem;line-height:1.65}
th,td{padding:.78rem .95rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  position:sticky;top:0;z-index:1;
  background:var(--surface-2);
  font-size:.68rem;color:var(--ink-2);font-weight:700;
  white-space:nowrap;
  border-bottom:1px solid var(--line-2);
}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
tbody tr:last-child td{border-bottom:0}
/* 首列当行头用：加重，方便横向滚动时对位 */
tbody th{font-weight:680;color:var(--ink)}
/* 自动表格布局会把首列压到只剩一个词的宽度（说明列内容长时尤其明显）。
   给它一个下限，中英文都受益。 */
.tbl th:first-child,.tbl td:first-child{min-width:6.5rem}

td .yes,.yes{color:var(--pos);font-weight:660}
td .no,.no{color:var(--neg);font-weight:660}
td .maybe,.maybe{color:var(--warn);font-weight:660}

/* 窄屏下给表一个下限宽度：不给的话 width:100% 会把栏位压到一行一两个字，
   .tbl 的横向滚动也就永远不会触发。宁可让读者横向划一下。 */
/* 断点跟目录一致：1080 以下是单栏，版心不够宽，表就该改成横向滚动。
   卡在 760–1080 之间的平板宽度以前会漏掉，多列表在那儿被压得最狠。 */
@media (max-width:1079px){
  .tbl table{min-width:36rem}
  /* 任何一列都不该被压到只剩一个词 */
  .tbl th,.tbl td{min-width:6rem}
  /* 列越多，36rem 分下来每列越挤，按列数分档放宽。
     反正 .tbl 已经能横向滚动，宽一点只是多划两下。 */
  .tbl:has(thead th:nth-child(4)) table{min-width:44rem}
  .tbl:has(thead th:nth-child(5)) table{min-width:54rem}
  .tbl th:first-child,.tbl td:first-child{min-width:7.5rem}
  /* 首列往往是行头（方式名、路线名），列多时给它更多余地 */
  .tbl:has(thead th:nth-child(5)) th:first-child,
  .tbl:has(thead th:nth-child(5)) td:first-child{min-width:9.5rem}
}

/* ---------- 11. 图片 ---------- */
figure{margin:2.2rem 0}
figure img{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);box-shadow:var(--sh-2);
}
figcaption{
  font-size:.79rem;color:var(--ink-3);margin-top:.75rem;line-height:1.6;
  padding-left:.75rem;border-left:2px solid var(--line);
}

/* ---------- 12. 目录 ---------- */
.toc{
  position:sticky;top:5.5rem;
  font-size:.85rem;line-height:1.5;
  padding-left:1.2rem;
  border-left:2px solid var(--line);
  max-height:calc(100vh - 8rem);overflow:auto;
}
.toc__t{font-size:.66rem;color:var(--ink-3);margin:0 0 .9rem;font-weight:700}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0 0 .55rem}
.toc li.lvl3{padding-left:.9rem;font-size:.81rem}
.toc a{
  position:relative;display:block;padding-left:.95rem;
  color:var(--ink-2);text-decoration:none;
  transition:color .15s ease;
}
/* 每条前面一个小圆点，当前节点亮起并带一圈淡彩 */
.toc a::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;
  background:var(--line-2);transition:background .15s ease,box-shadow .15s ease;
}
.toc a:hover{color:var(--brand)}
.toc a.is-active{color:var(--brand-1);font-weight:660}
.toc a.is-active::before{background:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}

/* 窄屏时目录排在标题上方，所以要尽量矮：缩字号、收紧行距、双栏排，
   否则首屏几乎全被目录占掉，正文标题反而被推到折线以下。 */
@media (max-width:1079px){
  .toc-col{order:-1}
  .toc{
    position:static;max-height:none;
    border-left:0;padding:.9rem 1.05rem;
    font-size:.79rem;line-height:1.5;
    background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--sh-1);
  }
  .toc__t{font-size:.64rem;margin-bottom:.6rem}
  .toc li{margin:0 0 .32rem}
  .toc>ol{columns:2;column-gap:1.2rem}
  .toc a{break-inside:avoid}
  .toc li.lvl3{display:none}
}
@media (max-width:359px){.toc>ol{columns:1}}

/* ---------- 13. 按钮与转化区 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--brand);color:var(--brand-ink);
  text-decoration:none;
  padding:.78rem 1.5rem;border-radius:var(--r-pill);
  font-weight:660;font-size:.98rem;
  border:0;cursor:pointer;font-family:inherit;
  box-shadow:var(--sh-2);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{
  background:var(--brand-1);color:var(--brand-ink);
  transform:translateY(-1px);box-shadow:var(--sh-3);
}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:transparent;color:var(--brand);
  border:1px solid var(--line-2);box-shadow:none;
}
.btn--ghost:hover{background:var(--surface-2);color:var(--brand-1);border-color:var(--line-3)}

.cta{
  position:relative;overflow:hidden;
  margin:2.4rem 0;padding:1.6rem 1.6rem;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-2);
}
/* 顶部一道主色渐变条，把转化区和普通卡片区分开 */
.cta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--gold));
}
.cta__t{font-weight:710;margin:0 0 .6rem;font-size:1.1rem;letter-spacing:-.005em}
.cta :where(p){margin:0 0 1.1rem;color:var(--ink-2);font-size:.95rem}
.cta__fine{
  font-size:.78rem;color:var(--ink-3);
  margin:1rem 0 0;line-height:1.65;
  padding-top:.9rem;border-top:1px dashed var(--line);
}

/* ---------- 14. 卡片 ---------- */
.cards{
  display:grid;gap:1.1rem;
  /* 15.5rem 而不是 16.5rem：首页版心刚好放得下四篇主文一行排完，
     再宽一点第四张就会掉到第二行落单。 */
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
  margin:1.6rem 0;
}
.card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:.45rem;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.25rem 1.3rem;
  text-decoration:none;color:inherit;
  box-shadow:var(--sh-1);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
/* 悬停时顶部滑出一条主色，卡片轻微浮起 */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--brand);
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh-3);border-color:var(--line-2);color:inherit;
}
.card:hover::before{transform:scaleX(1)}
.card__k{font-size:.66rem;color:var(--brand);font-weight:700}
.card__t{font-weight:690;font-size:1.03rem;line-height:1.45;letter-spacing:-.005em}
.card__d{font-size:.88rem;color:var(--ink-2);line-height:1.68;margin:0}
.card__m{
  font-size:.74rem;color:var(--ink-3);font-family:var(--f-mono);
  margin-top:auto;padding-top:.8rem;
}

/* ---------- 15. 条目列表 ---------- */
.list{list-style:none;margin:1.4rem 0;padding:0;border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.list a{
  position:relative;
  display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap;
  padding:1.05rem .9rem 1.05rem 1rem;
  text-decoration:none;color:inherit;
  transition:background .15s ease,padding-left .15s ease;
}
/* 悬停时左侧推出一条主色竖线，整行微微右移 */
.list a::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brand);
  transform:scaleY(0);transition:transform .18s ease;
}
.list a:hover{background:var(--surface-2);padding-left:1.4rem}
.list a:hover::before{transform:scaleY(1)}
.list__t{font-weight:650;flex:1 1 18rem;min-width:0;font-size:1rem}
.list__d{flex:1 1 100%;font-size:.86rem;color:var(--ink-3);line-height:1.65}
.list__m{
  font-size:.72rem;color:var(--ink-3);
  font-family:var(--f-mono);white-space:nowrap;
  padding:.15rem .5rem;border-radius:var(--r-xs);background:var(--surface-2);
}

/* ---------- 16. 首页 ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:4.5rem 0 3.6rem;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(1100px 420px at 12% -20%,var(--brand-tint),transparent 68%),
    linear-gradient(180deg,var(--canvas-2),var(--canvas));
}
/* 淡淡的方格纹理，往右下角渐隐 —— 给首屏一个"被设计过"的底子 */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:3.5rem 3.5rem;
  -webkit-mask-image:radial-gradient(880px 340px at 18% 0%,#000,transparent 70%);
  mask-image:radial-gradient(880px 340px at 18% 0%,#000,transparent 70%);
  opacity:.5;
}
.hero__in{position:relative;max-width:44rem}
.hero h1{
  font-size:clamp(2rem,1.25rem + 2.7vw,2.9rem);
  line-height:1.22;margin-bottom:1.2rem;letter-spacing:-.025em;font-weight:750;
  /* 不加的话末行会只剩一个「到」字吊在那儿 */
  text-wrap:balance;
}
.hero :where(p){font-size:1.1rem;color:var(--ink-2);margin:0 0 1rem;line-height:1.8}
.hero__acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__stat{margin-top:1.8rem}
.hero__note{
  font-size:.83rem;color:var(--ink-3);margin-top:1.4rem;
  padding-top:1.1rem;border-top:1px solid var(--line-2);
  max-width:36rem;line-height:1.7;
}

.sec{padding:3.4rem 0 .4rem}
.sec__h{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 .4rem}
.sec__h h2{
  font-size:clamp(1.3rem,1.15rem + .6vw,1.55rem);
  margin:0;font-weight:730;letter-spacing:-.015em;
  position:relative;padding-left:.95rem;
}
/* 版块标题前的主色竖条 */
.sec__h h2::before{
  content:"";position:absolute;left:0;top:.2em;bottom:.2em;
  width:4px;border-radius:2px;background:var(--brand);
}
.sec__h p{margin:0;color:var(--ink-3);font-size:.89rem}
.sec__more{margin-left:auto;font-size:.87rem;font-weight:640;text-decoration:none}
.sec__more:hover{text-decoration:underline}

/* 首页五步路径 */
.path{list-style:none;counter-reset:p;margin:1.6rem 0;padding:0;display:grid;gap:.85rem}
.path li{
  counter-increment:p;
  display:grid;grid-template-columns:2.4rem minmax(0,1fr);
  column-gap:1rem;row-gap:0;align-items:start;
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.3rem;
  box-shadow:var(--sh-1);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.path li:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2)}
/* 序号只占第一行第一列；标题、说明、链接全部留在第二列自上而下排。
   不写死列位的话，说明文字会被自动排进序号列里，挤成一字一行。 */
.path li::before{
  content:counter(p,decimal-leading-zero);
  grid-column:1;grid-row:1;
  width:2.4rem;height:2.4rem;border-radius:var(--r-xs);
  background:var(--gold-tint);color:var(--gold);
  display:grid;place-items:center;
  font-family:var(--f-num);font-weight:700;font-size:.92rem;
  font-variant-numeric:tabular-nums;
}
.path b,.path span,.path a{grid-column:2}
.path b{display:flex;align-items:center;min-height:2.4rem;font-size:1.04rem;font-weight:690;margin-bottom:.2rem}
.path span{font-size:.89rem;color:var(--ink-2);line-height:1.7;display:block}
.path a{font-size:.85rem;font-weight:620;justify-self:start;margin-top:.6rem;text-decoration:none}
.path a:hover{text-decoration:underline}
/* 宽屏把入口链接挪到右侧竖直居中，否则每张卡右边三成宽都是空的 */
@media (min-width:860px){
  .path li{grid-template-columns:2.4rem minmax(0,1fr) auto;column-gap:1.4rem}
  .path b{grid-column:2;grid-row:1}
  .path span{grid-column:2;grid-row:2}
  .path a{
    grid-column:3;grid-row:1 / span 2;
    align-self:center;justify-self:end;margin-top:0;
    padding:.5rem .95rem;border-radius:var(--r-pill);
    border:1px solid var(--line-2);white-space:nowrap;
    transition:background .15s ease,border-color .15s ease;
  }
  .path a:hover{background:var(--brand-tint);border-color:transparent;text-decoration:none}
}

/* ---------- 17. 工具页 ---------- */
.tool-panel{
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem;margin:1.8rem 0;box-shadow:var(--sh-2);
}
.field{display:flex;flex-direction:column;gap:.4rem;margin:0 0 1.2rem}
.field label{font-size:.85rem;font-weight:660;color:var(--ink-2)}
.field small{font-size:.78rem;color:var(--ink-3);line-height:1.55}

input[type=text],input[type=number],input[type=search],select{
  font:inherit;font-size:1rem;
  padding:.68rem .85rem;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--canvas);color:var(--ink);width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
input[type=text]:focus,input[type=number]:focus,input[type=search]:focus,select:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);outline:none;
}

.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:.2rem 0 1.2rem}
.chip{
  font:inherit;font-size:.86rem;
  padding:.45rem .95rem;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.chip:hover{border-color:var(--line-3);background:var(--surface-2)}
.chip[aria-pressed=true]{
  background:var(--brand);border-color:var(--brand);color:var(--brand-ink);
  box-shadow:var(--sh-1);
}

.result{
  background:var(--brand-tint);
  border-radius:var(--r);padding:1.3rem 1.4rem;margin:1.4rem 0 0;
  border:1px solid transparent;
}
.result>:first-child{margin-top:0}
.result>:last-child{margin-bottom:0}
.result b{color:var(--brand-1)}
.big{
  font-family:var(--f-num);font-size:2rem;
  font-variant-numeric:tabular-nums;
  color:var(--brand-1);line-height:1.35;letter-spacing:-.01em;
}

.check{list-style:none;margin:1.4rem 0;padding:0}
.check li{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  margin:0 0 .8rem;padding:1rem 1.1rem;
  transition:background .15s ease,border-color .15s ease;
}
.check li.done{background:var(--brand-tint);border-color:transparent}
/* 不能用 flex：label 里一旦出现 <strong> 之类的内联标签，
   它和前后的文字会各自变成 flex 项，被 gap 拆出几处空隙。 */
.check label{display:block;position:relative;padding-left:1.85rem;cursor:pointer;font-weight:660}
.check input{
  position:absolute;left:0;top:.45rem;margin:0;
  width:1.1rem;height:1.1rem;accent-color:var(--brand);cursor:pointer;
}
.check .sub{margin:.45rem 0 0 1.85rem;font-size:.88rem;color:var(--ink-2);font-weight:400;line-height:1.7}
.check .sub a{font-size:.86rem}

.progress{
  height:.55rem;border-radius:var(--r-pill);
  background:var(--surface-2);overflow:hidden;border:1px solid var(--line);
}
.progress i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  width:0;transition:width .3s ease;
}

/* 术语表 */
.gl-item{border-bottom:1px solid var(--line);padding:1.05rem 0}
.gl-item h3{margin:0 0 .35rem;font-size:1.02rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.gl-item .en{font-size:.78rem;color:var(--ink-3);font-weight:400;font-family:var(--f-mono)}
.gl-item p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.75}
.gl-tag{
  font-size:.64rem;color:var(--brand-1);background:var(--brand-tint);
  padding:.16rem .55rem;border-radius:var(--r-pill);font-weight:700;
}
.empty{color:var(--ink-3);padding:1.8rem 0;font-size:.92rem}
.count{font-size:.8rem;color:var(--ink-3);font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- 18. 常见问题 ---------- */
.faq details{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  margin:0 0 .8rem;padding:0 1.2rem;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.faq details:hover{border-color:var(--line-2)}
.faq details[open]{box-shadow:var(--sh-1)}
.faq summary{
  cursor:pointer;font-weight:660;padding:1.05rem 0;
  list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;
  width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--surface-2);
  /* 用两条渐变画一个 +，展开时竖线消失变成 − */
  background-image:
    linear-gradient(var(--brand),var(--brand)),
    linear-gradient(var(--brand),var(--brand));
  background-size:.7rem 2px,2px .7rem;
  background-position:center,center;
  background-repeat:no-repeat;
  transition:transform .2s ease;
}
.faq details[open] summary::after{background-size:.7rem 2px,0 0;transform:rotate(180deg)}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq__body{padding:1rem 0 .4rem;font-size:.95rem;color:var(--ink-2)}
.faq__body>:first-child{margin-top:0}
.faq__body>:last-child{margin-bottom:0}

/* ---------- 19. 相关阅读 / 更新时间 / 翻页 ---------- */
.rel{
  margin:3.4rem 0 0;padding:1.5rem 1.6rem;
  background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.rel h2{
  font-size:.68rem;color:var(--ink-3);
  margin:0 0 1rem;border:0;padding:0;font-weight:700;
}
.rel h2::before{display:none}
.rel ul{list-style:none;margin:0;padding:0}
.rel li{margin:0 0 .7rem;font-size:.95rem}
.rel li:last-child{margin-bottom:0}
.rel a{text-decoration:none;font-weight:640}
.rel a:hover{text-decoration:underline}
.rel span{color:var(--ink-3);font-size:.85rem;font-weight:400}

.updated{
  margin:3rem 0 0;font-size:.81rem;color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:1.2rem;line-height:1.7;
}

.pager{display:flex;gap:1rem;justify-content:space-between;margin:2.4rem 0 0;font-size:.9rem;flex-wrap:wrap}
.pager a{text-decoration:none;font-weight:640}

/* ---------- 20. 页脚 ---------- */
.site-foot{
  border-top:1px solid var(--line);
  background:var(--canvas-2);
  margin-top:4rem;padding:3rem 0 3.4rem;
  font-size:.88rem;color:var(--ink-2);
}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.foot-grid h3{font-size:.66rem;color:var(--ink-3);margin:0 0 .9rem;font-weight:700}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:0 0 .55rem}
.foot-grid a{color:var(--ink-2);text-decoration:none;transition:color .15s ease}
.foot-grid a:hover{color:var(--brand);text-decoration:underline}
.foot-note{
  margin-top:2.4rem;padding-top:1.5rem;
  border-top:1px solid var(--line-2);
  font-size:.79rem;color:var(--ink-3);line-height:1.8;
}
.foot-note p{margin:0 0 .55rem}
.foot-note p:last-child{margin-bottom:0}

/* ---------- 21. 动效与打印 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .card:hover,.path li:hover,.btn:hover{transform:none}
}

@media print{
  .site-head,.nav,.nav-toggle,.toc-col,.site-foot,.skip,.crumbs,.cta{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  .article,.layout{max-width:none}
  .card,.cal,.tbl,.check li{box-shadow:none;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555}
}