:root {
  --cn-bg:#ffffff; --cn-bg2:#f5f4f0; --cn-bg3:#eceae3;
  --cn-text:#1a1a18; --cn-text2:#5f5e5a; --cn-text3:#888780;
  --cn-border:rgba(0,0,0,0.10); --cn-border2:rgba(0,0,0,0.18);
  --cn-purple-bg:#EEEDFE; --cn-purple-br:#534AB7; --cn-purple-tx:#3C3489;
  --cn-teal-bg:#E1F5EE;   --cn-teal-br:#0F6E56;   --cn-teal-tx:#085041;
  --cn-amber-bg:#FAEEDA;  --cn-amber-br:#854F0B;  --cn-amber-tx:#633806;
  --cn-coral-bg:#FAECE7;  --cn-coral-br:#993C1D;  --cn-coral-tx:#712B13;
  --cn-gray-bg:#F1EFE8;   --cn-gray-br:#5F5E5A;   --cn-gray-tx:#444441;
  --cn-blue-bg:#E6F1FB;   --cn-blue-br:#185FA5;   --cn-blue-tx:#0C447C;
  --cn-green-bg:#EAF3DE;  --cn-green-br:#3B6D11;  --cn-green-tx:#27500A;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cn-bg:#1c1c1a; --cn-bg2:#252523; --cn-bg3:#2e2e2b;
    --cn-text:#e8e6de; --cn-text2:#9c9a92; --cn-text3:#5f5e5a;
    --cn-border:rgba(255,255,255,0.08); --cn-border2:rgba(255,255,255,0.16);
    --cn-purple-bg:#26215C; --cn-purple-br:#AFA9EC; --cn-purple-tx:#CECBF6;
    --cn-teal-bg:#04342C;   --cn-teal-br:#5DCAA5;   --cn-teal-tx:#9FE1CB;
    --cn-amber-bg:#412402;  --cn-amber-br:#EF9F27;  --cn-amber-tx:#FAC775;
    --cn-coral-bg:#4A1B0C;  --cn-coral-br:#F0997B;  --cn-coral-tx:#F5C4B3;
    --cn-gray-bg:#2C2C2A;   --cn-gray-br:#B4B2A9;   --cn-gray-tx:#D3D1C7;
    --cn-blue-bg:#042C53;   --cn-blue-br:#85B7EB;   --cn-blue-tx:#B5D4F4;
    --cn-green-bg:#173404;  --cn-green-br:#97C459;  --cn-green-tx:#C0DD97;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--cn-bg);color:var(--cn-text);line-height:1.75;font-size:15px}
.cn-page{max-width:820px;margin:0 auto;padding:44px 24px 88px}
.cn-breadcrumb{font-size:12px;color:var(--cn-text3);margin-bottom:8px}
h1{font-size:28px;font-weight:500;margin-bottom:6px}
.cn-subtitle{font-size:13px;color:var(--cn-text3);margin-bottom:40px}
h2{font-size:18px;font-weight:500;margin:44px 0 14px;padding-bottom:8px;border-bottom:1.5px solid var(--cn-border2)}
h3{font-size:15px;font-weight:500;margin:28px 0 10px}
h4{font-size:13.5px;font-weight:500;margin:18px 0 8px;color:var(--cn-text2)}
p{margin-bottom:14px}
ul,ol{margin:0 0 14px 22px}
li{margin-bottom:6px}
.cn-num{color:var(--cn-text3);font-variant-numeric:tabular-nums;margin-right:8px}
code{font-family:'SF Mono','Fira Code',monospace;font-size:12.5px;background:var(--cn-bg3);border:1px solid var(--cn-border);border-radius:4px;padding:1px 6px}
table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:13.5px}
th{background:var(--cn-bg2);font-weight:500;text-align:left;padding:9px 14px;border-bottom:2px solid var(--cn-border2);color:var(--cn-text)}
td{padding:9px 14px;border-bottom:1px solid var(--cn-border);color:var(--cn-text);vertical-align:top}
figure{margin:0}
figcaption{font-size:12px;color:var(--cn-text3);text-align:center;margin-top:10px}
.diagram-card{background:var(--cn-bg2);border:1px solid var(--cn-border2);border-radius:14px;padding:22px;margin:18px 0}
.callout{border-left:3px solid;border-radius:0 10px 10px 0;padding:12px 16px;margin:16px 0;font-size:13.5px}
.callout.info{background:var(--cn-teal-bg);border-color:var(--cn-teal-br);color:var(--cn-teal-tx)}
.callout.concept{background:var(--cn-purple-bg);border-color:var(--cn-purple-br);color:var(--cn-purple-tx)}
.callout.warn{background:var(--cn-amber-bg);border-color:var(--cn-amber-br);color:var(--cn-amber-tx)}
.cn-qa{background:var(--cn-bg2);border:1px dashed var(--cn-border2);border-radius:12px;padding:16px 18px;margin:18px 0}
.cn-qa .cn-qa-label{font-size:11px;letter-spacing:.04em;color:var(--cn-text3);margin-bottom:8px}
.cn-qa .cn-q{font-weight:500;color:var(--cn-text);margin-bottom:8px}
.cn-qa .cn-q::before{content:"Q ";color:var(--cn-coral-br);font-weight:600}
.cn-qa .cn-a{color:var(--cn-text2);font-size:14px}
.cn-qa .cn-a::before{content:"A ";color:var(--cn-teal-br);font-weight:600}
.cn-qa .cn-a p{margin-bottom:10px}
.cn-qa .cn-a p:last-child{margin-bottom:0}
.cn-qa pre{background:var(--cn-bg3);border:1px solid var(--cn-border);border-radius:8px;padding:10px 12px;margin:10px 0;overflow-x:auto;font-size:12px;line-height:1.6;color:var(--cn-text)}
.cn-qa pre code{background:none;border:none;padding:0;font-size:12px}
.cn-node{cursor:pointer}
.cn-node:hover rect,.cn-node:hover circle{opacity:.85}
.cn-expand-panel{background:var(--cn-bg2);border:1px solid var(--cn-border2);border-radius:10px;padding:14px 16px;margin:10px 0;font-size:13.5px}
.cn-expand-panel h4{font-size:13px;font-weight:500;margin-bottom:6px;color:var(--cn-text)}
.cn-expand-panel p{margin-bottom:0;color:var(--cn-text2)}
.cn-footer{display:flex;justify-content:space-between;margin-top:56px;padding-top:20px;border-top:1px solid var(--cn-border2);font-size:13px;color:var(--cn-text3)}
.cn-footer a{text-decoration:none;color:var(--cn-text3)}
.cn-footer a.cn-next{color:var(--cn-purple-br)}