/* SeedKnot — KEYCARD 设计系统
   骨架母题：方格纸底 + 左缘绳结导轨 + 十二格助记词卡 + 砖红「结」标记风险段
   刻意避开：全屏渐变、玻璃拟态、居中巨型 hero、一行三张圆角 emoji 卡片。
   层次靠：纸纹、大号编号水印、硬边偏移阴影、双线分隔、斑马纹表格。 */

:root{
  --paper:#f2efe8;
  --paper-2:#e9e5db;
  --paper-3:#e0dbcf;
  --card:#fffdf8;
  --ink:#16161a;
  --ink-2:#3a3a40;
  --muted:#6c6a63;
  --faint:#a9a599;
  --line:#d5d0c4;
  --line-2:#bdb7a8;
  --grid:#e2ddd1;
  --knot:#b3341f;
  --knot-2:#8d2716;
  --knot-bg:#f8e7e1;
  --safe:#2f5d50;
  --safe-bg:#e2ebe6;
  --mark:#f4e2a6;
  --shadow:#1616160f;

  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;

  --rail: 96px;
  --maxw: 1200px;
  --read: 40rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#141419;
    --paper-2:#1b1b21;
    --paper-3:#22222a;
    --card:#1e1e25;
    --ink:#ecebe5;
    --ink-2:#c8c6bf;
    --muted:#95928a;
    --faint:#5d5a53;
    --line:#2e2e36;
    --line-2:#43434e;
    --grid:#1c1c23;
    --knot:#e0674f;
    --knot-2:#f08a72;
    --knot-bg:#3a1f19;
    --safe:#8fbdab;
    --safe-bg:#1d2b26;
    --mark:#4a3f10;
    --shadow:#00000055;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

/* 方格纸底：两组 1px 线，24px 网格。不是渐变装饰，是纸张质感。 */
body{
  margin:0; color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:24px 24px;
  font-family:var(--sans); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--knot); outline-offset:2px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------- 顶栏 ---------------- */
.top{
  border-bottom:2px solid var(--ink);
  background:var(--paper);
  box-shadow:0 1px 0 var(--line);
}
.top .wrap{display:flex; align-items:center; gap:20px; min-height:66px; flex-wrap:wrap}
.wordmark{
  font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  padding:6px 0 6px 14px; position:relative;
}
.wordmark::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; background:var(--knot);
}
.wordmark .dot{color:var(--knot)}
.topnav{margin-left:auto; display:flex; gap:2px; flex-wrap:wrap}
.topnav a{
  font-size:14px; color:var(--muted); text-decoration:none; padding:8px 12px;
  min-height:44px; display:inline-flex; align-items:center; position:relative;
}
.topnav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:12px; height:2px;
  background:var(--knot); transform:scaleX(0); transform-origin:left; transition:transform .15s ease;
}
.topnav a:hover{color:var(--ink)}
.topnav a:hover::after{transform:scaleX(1)}
.topnav a[aria-current="page"]{color:var(--ink)}
.topnav a[aria-current="page"]::after{transform:scaleX(1)}

/* 语种切换器 */
.langsw{display:flex; border:2px solid var(--ink); margin-left:14px; background:var(--card)}
.langsw a{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-decoration:none;
  color:var(--muted); padding:0 11px; min-height:34px; display:inline-flex; align-items:center;
  border-right:1px solid var(--line);
}
.langsw a:last-child{border-right:0}
.langsw a:hover{color:var(--ink); background:var(--paper-2)}
.langsw a[aria-current="true"]{background:var(--ink); color:var(--paper); font-weight:700}
@media (max-width:780px){
  .langsw{margin-left:0; order:-1}
  .langsw a{min-height:40px; padding:0 14px}
}

/* ---------------- 首页 hero ---------------- */
.hero{
  padding:60px 0 40px; border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-45deg, transparent 0 13px, var(--line) 13px 14px);
  opacity:.28;
  -webkit-mask-image:linear-gradient(105deg, transparent 55%, #000 100%);
  mask-image:linear-gradient(105deg, transparent 55%, #000 100%);
}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:56px; align-items:start; position:relative}
.hero h1{
  font-size:clamp(31px,5.3vw,58px); line-height:1.1; letter-spacing:-.03em;
  font-weight:800; margin:0 0 22px; text-wrap:balance;
}
.hero h1 em{
  font-style:normal; color:var(--knot); position:relative; white-space:nowrap;
}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.16em;
  background:var(--knot); opacity:.18;
}
.hero-lede{font-size:17.5px; color:var(--ink-2); margin:0 0 18px; max-width:36rem; padding-left:16px; border-left:3px solid var(--line-2)}
.hero-lede.small{font-size:16px; color:var(--muted); border-left-color:var(--line)}

/* 十二格助记词卡：本站视觉母题 */
.keycard{
  border:2px solid var(--ink); background:var(--card); padding:18px 18px 15px;
  box-shadow:7px 7px 0 var(--paper-3);
}
.keycard-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:13px;
}
.keycard-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.keycard-grid span{
  display:flex; align-items:baseline; gap:6px; font-family:var(--mono); font-size:12.5px;
  border:1px solid var(--line); padding:8px; color:var(--ink-2); background:var(--paper);
}
.keycard-grid span b{color:var(--faint); font-weight:400; font-size:10.5px; min-width:1.2em}
.keycard-grid span.gone{
  border:1px solid var(--knot); color:var(--knot); background:var(--knot-bg); font-weight:700;
  box-shadow:2px 2px 0 var(--knot-bg);
}
.keycard-note{margin:14px 0 0; font-size:13px; color:var(--muted); line-height:1.6; border-top:1px dashed var(--line-2); padding-top:11px}

/* ---------------- 首屏转化条（形态 A：0 交易所直链） ---------------- */
.codebar{
  border-bottom:1px solid var(--line);
  background:var(--paper-2);
  background-image:repeating-linear-gradient(90deg, transparent 0 7px, var(--line) 7px 8px);
  background-size:auto;
}
.codebar .wrap{
  display:flex; gap:20px 30px; align-items:center; flex-wrap:wrap;
  padding-top:16px; padding-bottom:16px; background:var(--paper-2);
}
.codebox{
  display:flex; align-items:center; gap:12px;
  border:2px solid var(--ink); background:var(--card); padding:8px 8px 8px 14px;
  box-shadow:4px 4px 0 var(--paper-3);
}
.codebox .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); line-height:1.2; max-width:4.5em}
.codebox .val{
  font-family:var(--mono); font-size:24px; font-weight:700; letter-spacing:.1em;
  border-bottom:3px solid var(--knot); padding-bottom:1px;
}
.copybtn{
  font:inherit; font-size:13.5px; font-family:var(--mono); letter-spacing:.06em;
  cursor:pointer; background:var(--ink); color:var(--paper); border:2px solid var(--ink);
  padding:0 15px; min-height:44px;
}
.copybtn:hover{background:var(--knot); border-color:var(--knot); color:#fff}
.copybtn[data-done="1"]{background:var(--safe); border-color:var(--safe); color:#fff}
.benefit{font-size:14.5px; color:var(--ink-2); max-width:32rem; margin:0}
.benefit sup{color:var(--knot); font-weight:700}
.benefit-note{font-size:12.5px; color:var(--muted); margin:5px 0 0; max-width:38rem; line-height:1.55}
.codebar-actions{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
  font-size:14.5px; text-decoration:none; border:2px solid var(--line-2);
  background:var(--card); transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{border-color:var(--ink); transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--line-2)}
.btn-solid{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-solid:hover{background:var(--knot); border-color:var(--knot); color:#fff; box-shadow:3px 3px 0 var(--knot-2)}

/* ---------------- 文章版式：左缘绳结导轨 ---------------- */
.page{padding:0 0 20px}
.page .wrap{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:0}
.rail{
  border-right:1px solid var(--line); padding:36px 18px 40px 0; position:sticky; top:0;
  align-self:start; max-height:100vh; overflow:auto;
}
.rail ol{list-style:none; margin:0; padding:0; position:relative}
/* 竖着的那根「绳」 */
.rail ol::before{
  content:""; position:absolute; left:3px; top:6px; bottom:6px; width:1px; background:var(--line-2);
}
.rail li{margin:0 0 2px; position:relative}
.rail a{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted);
  text-decoration:none; padding:6px 0 6px 18px; position:relative;
}
/* 绳上的结 */
.rail a::before{
  content:""; position:absolute; left:0; top:50%; margin-top:-3.5px;
  width:7px; height:7px; background:var(--paper); border:1px solid var(--line-2);
}
.rail a:hover{color:var(--ink)}
.rail a:hover::before{border-color:var(--ink)}
.rail a.knotted{color:var(--knot); font-weight:700}
.rail a.knotted::before{background:var(--knot); border-color:var(--knot); width:9px; height:9px; left:-1px; margin-top:-4.5px}
.rail .rail-title{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.body{padding:36px 0 0 40px; min-width:0}

.crumbs{font-size:12.5px; color:var(--muted); margin:0 0 22px}
.crumbs a{text-decoration:none; border-bottom:1px solid var(--line-2)}
.crumbs a:hover{border-bottom-color:var(--knot); color:var(--knot)}

.kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--knot); margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.kicker::before{content:""; width:26px; height:2px; background:var(--knot)}
.body h1{
  font-size:clamp(28px,3.9vw,44px); line-height:1.17; letter-spacing:-.025em;
  font-weight:800; margin:0 0 18px; max-width:22em; text-wrap:balance;
}
.standfirst{
  font-size:18px; color:var(--ink-2); margin:0 0 24px; max-width:var(--read); line-height:1.7;
  padding-left:18px; border-left:4px solid var(--knot);
}
.byline{
  display:flex; gap:8px 0; flex-wrap:wrap; font-size:12.5px; color:var(--muted);
  border-top:2px solid var(--ink); border-bottom:1px solid var(--line); padding:11px 0; margin:0 0 28px;
}
.byline span{padding:0 16px; border-right:1px solid var(--line)}
.byline span:first-child{padding-left:0; color:var(--ink-2); font-weight:600}
.byline span:last-child{border-right:0}
.byline a{color:var(--muted)}
.byline time{font-variant-numeric:tabular-nums}

.prose{max-width:var(--read)}
.prose.wide{max-width:54rem}

/* 章节标题：大号编号水印压在下面，双线分隔 */
.prose h2{
  font-size:25px; line-height:1.3; letter-spacing:-.015em; font-weight:750;
  margin:56px 0 16px; padding:38px 0 0; position:relative; isolation:isolate;
  border-top:2px solid var(--ink);
}
.prose h2::after{
  content:""; position:absolute; left:0; right:0; top:3px; height:1px; background:var(--line);
}
.prose h2 .no{
  position:absolute; left:-2px; top:10px; z-index:-1;
  font-family:var(--mono); font-size:clamp(42px,6.5vw,62px); font-weight:700;
  letter-spacing:-.02em; color:var(--line); line-height:1; pointer-events:none;
}
.prose h3{
  font-size:19px; font-weight:700; margin:34px 0 11px; letter-spacing:-.005em;
  padding-left:14px; border-left:3px solid var(--line-2);
}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 20px; padding-left:1.4em}
.prose li{margin:0 0 9px}
.prose ul li::marker{color:var(--knot); content:"▪  "}
.prose ol li::marker{color:var(--knot); font-family:var(--mono); font-size:.85em; font-weight:700}
.prose strong{font-weight:700}
.prose a{text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:1px}
.prose a:hover{border-bottom:2px solid var(--knot); color:var(--knot)}
.prose mark{background:var(--mark); color:var(--ink); padding:1px 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.prose code{
  font-family:var(--mono); font-size:.86em; background:var(--card);
  border:1px solid var(--line-2); padding:1px 6px; word-break:break-all;
}

/* 直接答案块：GEO 结论前置 */
.answer{
  border:1px solid var(--line-2); border-left:5px solid var(--ink);
  background:var(--card); padding:16px 20px 15px; margin:0 0 22px; font-size:16.5px;
  position:relative; box-shadow:4px 4px 0 var(--paper-2);
}
.answer::before{
  content:"一句话回答"; position:absolute; top:-9px; left:14px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); background:var(--card); padding:0 7px; border:1px solid var(--line);
}
.answer p{margin:6px 0 0}
.answer p + p{margin-top:10px}

/* 「结」= 风险标记；「安全做法」= 墨绿 */
.knot,.safe{
  border:1px solid; padding:17px 20px; margin:28px 0; font-size:15.5px;
  position:relative; box-shadow:5px 5px 0 var(--paper-2);
}
.knot{border-color:var(--knot); background:var(--knot-bg); color:var(--ink)}
.safe{border-color:var(--safe); background:var(--safe-bg)}
.knot::before,.safe::before{
  content:""; position:absolute; left:-1px; top:-1px; width:12px; height:12px;
}
.knot::before{background:var(--knot)}
.safe::before{background:var(--safe)}
.knot .knot-h,.safe .knot-h{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:9px; padding-bottom:8px;
}
.knot .knot-h{color:var(--knot); border-bottom:1px solid var(--knot)}
.safe .knot-h{color:var(--safe); border-bottom:1px solid var(--safe)}
.knot p:last-child,.knot ul:last-child,.knot ol:last-child,
.safe p:last-child,.safe ul:last-child,.safe ol:last-child{margin-bottom:0}

/* 目录 */
.toc{
  border:2px solid var(--ink); background:var(--card); padding:18px 22px; margin:0 0 34px;
  box-shadow:6px 6px 0 var(--paper-3);
}
.toc h2{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px; border:0; padding:0 0 9px; font-weight:400;
  border-bottom:1px solid var(--line);
}
.toc h2::after{display:none}
.toc ol{margin:0; padding:0; list-style:none; counter-reset:toc; font-size:15px;
  columns:2; column-gap:30px}
.toc li{margin:0 0 8px; counter-increment:toc; break-inside:avoid; padding-left:2.2em; position:relative}
.toc li::before{
  content:counter(toc,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:11.5px; color:var(--knot); font-weight:700;
}
.toc a{text-decoration:none; border-bottom:1px solid transparent}
.toc a:hover{border-bottom-color:var(--ink)}

/* 表格 */
.tbl-scroll{overflow-x:auto; margin:0 0 26px; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-2); background:var(--card)}
table.data{border-collapse:collapse; width:100%; font-size:14.5px; min-width:34rem}
table.data caption{
  text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); padding:11px 14px;
  background:var(--paper-2); border-bottom:1px solid var(--line-2);
}
table.data th{
  text-align:left; font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  font-weight:700; padding:10px 14px; border-bottom:2px solid var(--ink); vertical-align:bottom;
  background:var(--paper-2); white-space:nowrap;
}
table.data td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
table.data tbody tr:nth-child(even){background:var(--paper-2)}
table.data tbody tr:hover{background:var(--mark)}
table.data td:first-child{border-left:3px solid transparent}
table.data tbody tr:hover td:first-child{border-left-color:var(--knot)}
table.data td b{font-weight:700}
table.data .bad{color:var(--knot-2); font-weight:600}
table.data .ok{color:var(--safe); font-weight:600}
@media (prefers-color-scheme: dark){
  table.data .bad{color:var(--knot)}
  table.data tbody tr:hover{background:#2a2a33}
}

/* 配图 */
figure{margin:30px 0}
figure img{display:block; width:100%; height:auto; border:2px solid var(--ink)}
figcaption{
  font-size:13px; color:var(--muted); margin-top:10px; line-height:1.6;
  padding-left:14px; border-left:3px solid var(--line-2);
}
.article-cover{margin:0 0 30px}
.article-cover img{border:2px solid var(--ink); box-shadow:8px 8px 0 var(--paper-3)}
.diagram{margin:30px 0}
.diagram img{border:1px solid var(--line-2); box-shadow:5px 5px 0 var(--paper-2); background:var(--card)}

/* 转化区（仅两个转化页使用） */
.convert{
  border:2px solid var(--ink); background:var(--card); padding:22px 24px; margin:32px 0;
  box-shadow:7px 7px 0 var(--paper-3); position:relative;
}
.convert::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--knot);
}
.convert h3{margin:6px 0 11px; font-size:19px; padding:0; border:0}
.convert p{margin:0 0 13px; font-size:15px}
.convert .disclose{
  font-size:13px; color:var(--muted); margin:14px 0 0; line-height:1.65;
  border-top:1px dashed var(--line-2); padding-top:12px;
}
.convert a.out{
  display:inline-flex; align-items:center; min-height:46px; padding:0 22px;
  background:var(--knot); color:#fff; text-decoration:none; font-size:15.5px; font-weight:600;
  border:2px solid var(--knot); transition:transform .12s ease, box-shadow .12s ease;
}
.convert a.out:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--knot-2)}

/* FAQ */
.faq{margin:48px 0 0}
.faq h2{border-top:2px solid var(--ink); padding-top:38px}
.faq h3{
  font-size:17.5px; margin:28px 0 9px; padding-left:0; border-left:0;
  display:flex; gap:11px; align-items:baseline;
}
.faq h3::before{
  content:"Q"; font-family:var(--mono); font-size:12px; color:var(--knot); font-weight:700;
  border:1px solid var(--knot); width:20px; height:20px; display:inline-flex;
  align-items:center; justify-content:center; flex:none; align-self:flex-start; margin-top:3px;
}
.faq p{margin:0 0 16px; font-size:16px; padding-left:31px; color:var(--ink-2)}

/* 文末相关 */
.related{border-top:2px solid var(--ink); margin:52px 0 0; padding:24px 0 0}
.related h2{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px; font-weight:400;
}
.related ul{list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:rel}
.related li{counter-increment:rel; border-bottom:1px solid var(--line)}
.related li:first-child{border-top:1px solid var(--line)}
.related a{
  text-decoration:none; font-size:15.5px; display:flex; gap:14px; align-items:baseline;
  padding:12px 6px 12px 0; transition:padding-left .14s ease;
}
.related a::before{
  content:counter(rel,decimal-leading-zero); font-family:var(--mono); font-size:11.5px;
  color:var(--faint); flex:none;
}
.related a:hover{color:var(--knot); padding-left:8px; background:var(--paper-2)}
.related a:hover::before{color:var(--knot)}

/* ---------------- 首页索引区 ---------------- */
.sec{padding:52px 0; border-bottom:1px solid var(--line); position:relative}
.sec + .sec::before{
  content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px;
  transform:translateX(-50%) rotate(45deg); background:var(--paper); border:1px solid var(--line-2);
}
.sec-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin:0 0 26px;
  padding-bottom:16px; border-bottom:2px solid var(--ink)}
.sec-head h2{font-size:25px; font-weight:750; letter-spacing:-.015em; margin:0}
.sec-head .no{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:#fff;
  background:var(--knot); padding:5px 9px; align-self:center;
}
.sec-head p{margin:0; font-size:14.5px; color:var(--muted); flex:1 1 18rem}
.sub-head{
  font-size:11px; margin:32px 0 12px; color:var(--muted); font-family:var(--mono);
  letter-spacing:.2em; text-transform:uppercase; display:flex; align-items:center; gap:12px;
}
.sub-head::after{content:""; flex:1; height:1px; background:var(--line)}

.stack{list-style:none; margin:0; padding:0; border-top:2px solid var(--ink)}
.stack li{border-bottom:1px solid var(--line)}
.stack a.row{
  display:grid; grid-template-columns:3.8rem minmax(0,1fr) minmax(0,1.15fr); gap:18px;
  padding:16px 10px 16px 0; text-decoration:none; align-items:baseline;
  border-left:4px solid transparent; transition:border-color .14s ease, background .14s ease;
}
.stack a.row:hover{background:var(--paper-2); border-left-color:var(--knot)}
.stack .n{
  font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;
  padding-left:12px;
}
.stack a.row:hover .n{color:var(--knot); font-weight:700}
.stack .t{font-size:16.5px; font-weight:650; line-height:1.45}
.stack .d{font-size:14px; color:var(--muted); line-height:1.55}
.stack .t .len{
  font-family:var(--mono); font-size:10px; color:#fff; background:var(--knot);
  letter-spacing:.1em; margin-left:9px; padding:2px 6px; font-weight:400; vertical-align:2px;
}

.qgrid{list-style:none; margin:0; padding:0; columns:2; column-gap:38px; counter-reset:q}
.qgrid li{break-inside:avoid; margin:0 0 11px; counter-increment:q; padding-left:2.4em; position:relative}
.qgrid li::before{
  content:counter(q,decimal-leading-zero); position:absolute; left:0; top:3px;
  font-family:var(--mono); font-size:11px; color:var(--faint);
}
.qgrid a{font-size:15px; text-decoration:none; border-bottom:1px solid var(--line)}
.qgrid a:hover{border-bottom:2px solid var(--knot); color:var(--knot)}

/* 首页三层结构模块 */
.layers{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; border:2px solid var(--ink); background:var(--card)}
.layers > div{padding:20px 22px; border-right:1px solid var(--line)}
.layers > div:last-child{border-right:0}
.layers .lv{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; background:var(--ink); padding:3px 8px; display:inline-block; margin-bottom:11px;
}
.layers > div:nth-child(2) .lv{background:var(--knot)}
.layers > div:nth-child(3) .lv{background:var(--safe)}
.layers h3{font-size:17px; margin:0 0 8px; font-weight:700}
.layers p{margin:0 0 8px; font-size:14px; color:var(--muted); line-height:1.6}
.layers p:last-child{margin:0}
.layers b{color:var(--ink-2)}

/* ---------------- 工具页 ---------------- */
.tool{
  border:2px solid var(--ink); background:var(--card); padding:24px; margin:0 0 30px;
  box-shadow:7px 7px 0 var(--paper-3);
}
.tool label{display:block; font-size:12.5px; color:var(--muted); margin:0 0 8px;
  font-family:var(--mono); letter-spacing:.08em}
.tool input[type=text],.tool textarea{
  width:100%; font:inherit; font-family:var(--mono); font-size:15px; color:var(--ink);
  background:var(--paper); border:2px solid var(--line-2); padding:12px 13px;
}
.tool input[type=text]:focus,.tool textarea:focus{outline:none; border-color:var(--ink); background:var(--card)}
.tool .btnrow{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0}
.tool .out{margin:20px 0 0; font-size:15px}
.tool .out:empty{display:none}
.res{border:1px solid var(--line-2); border-left:5px solid var(--line-2); padding:14px 17px; background:var(--paper-2); margin:0 0 11px}
.res.hit{border-left-color:var(--safe); background:var(--safe-bg)}
.res.miss{border-left-color:var(--knot); background:var(--knot-bg)}
.res .rt{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px}
.res p{margin:0 0 7px; font-size:14.5px}
.res p:last-child{margin:0}

.checklist{list-style:none; margin:0; padding:0; counter-reset:ck}
.checklist li{border-bottom:1px solid var(--line); padding:15px 0 15px 0; counter-increment:ck; position:relative}
.checklist li:first-child{border-top:2px solid var(--ink)}
.checklist li:hover{background:var(--paper-2)}
.checklist label{display:flex; gap:13px; align-items:flex-start; cursor:pointer; color:var(--ink); font-size:16px; margin:0; padding:0 8px}
.checklist input[type=checkbox]{width:20px; height:20px; margin:3px 0 0; flex:none; accent-color:var(--knot)}
.checklist .why{
  margin:8px 0 0 41px; font-size:14px; color:var(--muted); line-height:1.6;
  padding-left:13px; border-left:2px solid var(--line);
}
.checklist li:has(input:checked){background:var(--knot-bg)}
.checklist li:has(input:checked) .why{border-left-color:var(--knot)}
.score{
  font-family:var(--mono); font-size:14px; border:2px solid var(--ink); background:var(--paper-2);
  padding:15px 18px; margin:22px 0 0; box-shadow:4px 4px 0 var(--paper-3);
}
.score b{font-size:22px; color:var(--knot)}
.score p{font-family:var(--sans)}

.glossary{margin:0}
.glossary dt{
  font-weight:700; font-size:17.5px; margin:30px 0 7px; padding:16px 0 0 14px;
  border-top:1px solid var(--line); border-left:4px solid var(--knot);
}
.glossary dt .en{font-family:var(--mono); font-size:12px; color:var(--muted); font-weight:400; margin-left:10px; letter-spacing:.06em}
.glossary dd{margin:0 0 12px 18px; font-size:16px; color:var(--ink-2)}
.glossary dd a{color:var(--ink)}

.nojs{border:1px solid var(--knot); border-left:5px solid var(--knot); background:var(--knot-bg); padding:13px 17px; font-size:14.5px; margin:0 0 24px}

/* ---------------- 页脚 ---------------- */
.foot{
  border-top:3px solid var(--ink); background:var(--paper-2);
  padding:40px 0 60px; font-size:14px; color:var(--muted);
  position:relative; overflow:hidden;
}
.foot .wrap{position:relative}
.foot .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:26px 34px; margin:0 0 30px}
.foot h2{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 12px; font-weight:700; padding-bottom:8px;
  border-bottom:2px solid var(--line-2);
}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin:0 0 8px}
.foot a{text-decoration:none; color:var(--ink-2)}
.foot a:hover{color:var(--knot); text-decoration:underline; text-underline-offset:3px}
.foot .legal{border-top:1px solid var(--line); padding-top:22px; max-width:58rem}
.foot .legal p{margin:0 0 11px; line-height:1.75}
.foot .legal b{color:var(--ink-2)}
.foot .legal a{border-bottom:1px solid var(--line-2)}
/* 页脚大字水印 */
.foot::after{
  content:"SEEDKNOT"; position:absolute; right:-.06em; bottom:-.28em;
  font-family:var(--mono); font-weight:700; font-size:clamp(76px,15vw,190px);
  letter-spacing:.02em; color:var(--line); opacity:.5; line-height:1; pointer-events:none;
  user-select:none;
}

/* ---------------- 404 ---------------- */
.oops{padding:80px 0 90px}
.oops h1{font-size:clamp(29px,4.6vw,46px); font-weight:800; letter-spacing:-.025em; margin:0 0 18px}
.oops .code404{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:#fff;
  background:var(--knot); display:inline-block; padding:5px 10px; margin:0 0 18px;
}

/* ---------------- 响应式 ---------------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr; gap:32px}
  .qgrid{columns:1}
  .toc ol{columns:1}
  .stack a.row{grid-template-columns:3.2rem minmax(0,1fr); row-gap:7px}
  .stack .d{grid-column:2 / -1}
  .layers > div{border-right:0; border-bottom:1px solid var(--line)}
  .layers > div:last-child{border-bottom:0}
}
@media (max-width:780px){
  body{font-size:16.5px; background-size:20px 20px}
  .page .wrap{grid-template-columns:1fr}
  .rail{
    position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line);
    padding:16px 0; margin-bottom:8px; overflow:visible;
  }
  .rail ol{display:flex; flex-wrap:wrap; gap:6px}
  .rail ol::before{display:none}
  .rail li{margin:0}
  .rail a{padding:6px 10px; border:1px solid var(--line); background:var(--card)}
  .rail a::before{display:none}
  .rail a.knotted{border-color:var(--knot); background:var(--knot-bg)}
  .rail .rail-title{margin-bottom:10px}
  .body{padding:22px 0 0}
  .hero{padding:34px 0 26px}
  .hero::before{display:none}
  .codebar .wrap{gap:14px}
  .codebar-actions{margin-left:0; width:100%}
  .btn{flex:1 1 auto; justify-content:center}
  .keycard-grid{grid-template-columns:repeat(2,1fr)}
  .keycard{box-shadow:5px 5px 0 var(--paper-3)}
  .prose h2{padding-top:32px; margin-top:44px}
  .prose h2 .no{font-size:40px; top:8px}
  .faq p{padding-left:0}
  .byline span{padding:0 10px}
  .byline span:first-child{padding-left:0}
}
@media (max-width:400px){
  .wrap{padding:0 15px}
  .codebox{padding:8px}
  .codebox .val{font-size:21px}
  .codebox .lbl{display:none}
  .hero h1{font-size:28px}
  .article-cover img,.convert,.tool,.toc,.answer,.knot,.safe{box-shadow:none}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}

@media print{
  body{background:#fff}
  .rail,.topnav,.codebar,.foot{display:none}
}