/* ============================================================
   经纬志 — 全站样式
   设计基调：现代制图编辑体。暖纸底、发丝线、赭石色信号、经纬网格纹理。
   ============================================================ */

:root {
  color-scheme: light;

  /* 纸与墨 */
  --paper:      #FCFBF7;
  --paper-2:    #F4F1E9;
  --paper-3:    #EBE7DC;
  --ink:        #14171C;
  --ink-2:      #4A5058;
  --ink-3:      #85898F;
  --rule:       #E4DFD2;
  --rule-2:     #CFC7B4;

  /* 赭石：只用于结构性强调，不铺面积 */
  --accent:      #A4551A;
  --accent-deep: #7C3F12;
  --accent-soft: #FBF0E2;
  --accent-line: #E8CDA8;

  /* 测绘青：次要分类色 */
  --teal:      #14625B;
  --teal-soft: #E7F2F0;

  /* 代码面板 */
  --code-bg:      #12151A;
  --code-bg-2:    #0C0E12;
  --code-text:    #D9DDE4;
  --code-comment: #6E7A88;
  --code-line:    21px;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun",
           Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;

  --radius: 4px;
  --radius-lg: 8px;

  --rail: 272px;
  --toc: 208px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper:      #0D1014;
    --paper-2:    #141920;
    --paper-3:    #1B212A;
    --ink:        #E7E5DF;
    --ink-2:      #A7ADB6;
    --ink-3:      #6F757E;
    --rule:       #232A33;
    --rule-2:     #313A45;
    --accent:      #E89A4B;
    --accent-deep: #F3B477;
    --accent-soft: #1E1710;
    --accent-line: #4A3522;
    --teal:      #5FBDB3;
    --teal-soft: #10201E;
    --code-bg:      #0A0D11;
    --code-bg-2:    #06080B;
    --code-text:    #D9DDE4;
    --code-comment: #5E6A78;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: border-color .12s ease, color .12s ease;
}
a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }

code {
  font-family: var(--mono);
  font-size: 0.87em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 0.06em 0.34em;
  border-radius: 3px;
  color: var(--ink);
}

/* ============================================================
   顶栏
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 60px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  height: 100%;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1600px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  border: 0;
  white-space: nowrap;
}
.brand::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.brand:hover { color: var(--accent-deep); border: 0; }

.brand-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-left: 10px;
  border-left: 1px solid var(--rule-2);
}

.topbar .spacer { flex: 1 1 auto; }

.menu-btn {
  display: none;
  width: 34px; height: 34px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

/* ============================================================
   三栏骨架
   ============================================================ */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
}

.shell.has-toc {
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--toc);
}

/* ---------- 左侧目录 ---------- */

.sidebar {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 0 48px;
  border-right: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.55;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, var(--paper-2) 100%);
}

.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 4px; }

.nav-stack { margin-bottom: 2px; }

.nav-stack > .nav-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 20px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: left;
  border-left: 2px solid transparent;
}
.nav-stack > .nav-head:hover { background: var(--paper-2); }

.nav-stack > .nav-head .chev {
  flex: 0 0 auto;
  width: 10px;
  color: var(--ink-3);
  font-size: 9px;
  transition: transform .15s ease;
}
.nav-stack.is-open > .nav-head .chev { transform: rotate(90deg); }

.nav-stack.is-current > .nav-head {
  border-left-color: var(--accent);
  color: var(--accent-deep);
}

.nav-idx {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ink-3);
  opacity: .8;
}
.nav-stack.is-current > .nav-head .nav-idx { color: var(--accent); opacity: 1; }

.nav-stack > .nav-body { display: none; padding: 2px 0 8px; }
.nav-stack.is-open > .nav-body { display: block; }

.nav-sec { margin-bottom: 1px; }

.nav-sec > .nav-sec-head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 20px 5px 34px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.nav-sec > .nav-sec-head:hover { color: var(--ink-2); }
.nav-sec > .nav-sec-head .chev {
  flex: 0 0 auto;
  width: 9px;
  font-size: 8px;
  transition: transform .15s ease;
}
.nav-sec.is-open > .nav-sec-head .chev { transform: rotate(90deg); }

.nav-sec > .nav-items { display: none; }
.nav-sec.is-open > .nav-items { display: block; }

.nav-items a {
  display: block;
  padding: 4.5px 20px 4.5px 50px;
  color: var(--ink-2);
  border: 0;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.5;
  transition: color .1s ease, background .1s ease;
}
.nav-items a:hover {
  color: var(--ink);
  background: var(--paper-2);
  border-left-color: var(--rule-2);
}
.nav-items a.is-active {
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-left-color: var(--accent);
  font-weight: 500;
}

.nav-foot {
  margin-top: 24px;
  padding: 16px 20px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.nav-foot a {
  display: block;
  padding: 3px 0;
  border: 0;
  color: var(--ink-2);
}
.nav-foot a:hover { color: var(--accent-deep); }

.side-mask { display: none; }

/* ---------- 右侧页内目录 ---------- */

.toc {
  position: sticky;
  top: 60px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 34px 20px 40px 8px;
  font-size: 12.5px;
  line-height: 1.5;
}

.toc-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.toc a {
  display: block;
  padding: 3.5px 0 3.5px 12px;
  color: var(--ink-3);
  border: 0;
  border-left: 1px solid var(--rule-2);
  transition: color .1s ease, border-color .1s ease;
}
.toc a:hover { color: var(--ink); border-left-color: var(--ink-3); }
.toc a.is-active {
  color: var(--accent-deep);
  border-left-color: var(--accent);
  font-weight: 500;
}
.toc a.depth-3 { padding-left: 24px; font-size: 12px; }

/* ============================================================
   内容区
   ============================================================ */

.content { min-width: 0; }

.doc {
  max-width: 760px;
  padding: 36px 40px 96px 44px;
}

.doc-wide {
  max-width: 1000px;
  padding: 36px 40px 96px 44px;
}

.crumb {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.crumb a { color: var(--ink-3); border: 0; }
.crumb a:hover { color: var(--accent-deep); }

.doc h1, .home h1 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.36;
  margin: 0 0 14px;
}

.doc h1 {
  font-size: 30px;
  padding-top: 18px;
  position: relative;
}
.doc h1::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px;
  height: 2px;
  background: var(--accent);
}

.doc .lede {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 640px;
}

.doc .doc-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 30px;
}

.doc h2 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.005em;
  margin: 46px 0 14px;
  padding-top: 10px;
  scroll-margin-top: 76px;
  position: relative;
}
.doc h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 18px;
  height: 1px;
  background: var(--rule-2);
}

.doc h3 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 30px 0 10px;
  scroll-margin-top: 76px;
  color: var(--ink);
}

.doc p { margin: 0 0 15px; }
.doc ul, .doc ol { margin: 0 0 15px; padding-left: 1.45em; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--ink-3); }

.doc blockquote {
  margin: 20px 0;
  padding: 2px 0 2px 18px;
  border-left: 1px solid var(--rule-2);
  color: var(--ink-2);
  font-size: 14.5px;
}
.doc blockquote p:last-child { margin-bottom: 0; }

.doc hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

/* ---------- 表格 ---------- */

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.8px;
  margin: 20px 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.doc th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  vertical-align: bottom;
}

.doc td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.doc tr:last-child td { border-bottom: 0; }
.doc tbody tr { transition: background .1s ease; }
.doc tbody tr:hover { background: var(--paper-2); }
.doc td:first-child, .doc th:first-child { padding-left: 2px; }
.doc td code { white-space: nowrap; }
.doc td code { background: transparent; border: 0; padding: 0; color: var(--accent-deep); }

.tbl-wrap { overflow-x: auto; }

/* ---------- 提示块 ---------- */

.tip {
  margin: 22px 0;
  padding: 14px 18px 14px 18px;
  background: var(--paper-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14.3px;
  line-height: 1.72;
}
.tip p:first-child { margin-top: 0; }
.tip p:last-child { margin-bottom: 0; }
.tip b, .tip strong { font-weight: 600; color: var(--ink); }

/* ---------- 代码 ---------- */

.sig, .doc pre.code {
  font-family: var(--mono);
  font-size: 12.8px;
  line-height: 1.78;
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  white-space: pre;
  position: relative;
}

.sig {
  padding: 13px 16px;
  margin: 16px 0 20px;
  border-left: 2px solid var(--accent);
}

.doc pre.code {
  padding: 16px 18px;
  margin: 18px 0;
}

.doc pre.code code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

/* ============================================================
   工作台
   ============================================================ */

.demo {
  margin: 26px 0 30px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
}

.demo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  flex-wrap: wrap;
}

.demo-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: auto;
}

.demo-btn {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 6px 11px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.demo-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.demo-btn:disabled { opacity: .55; }

.demo-toggle {
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--accent-deep);
  cursor: pointer;
  white-space: nowrap;
}
.demo-toggle:hover { background: var(--accent-soft); }

.demo-body { display: flex; flex-direction: column; }

.demo-codewrap { position: relative; }

.demo-code {
  position: relative;
  display: flex;
  background: var(--code-bg);
  overflow: auto;
  transition: max-height .22s ease;
}
.demo-code.is-collapsed {
  max-height: calc(var(--code-line) * 5 + 20px);
  overflow: hidden;
}
.demo-code.is-expanded { max-height: 560px; }

.demo-gutter {
  flex: 0 0 auto;
  position: sticky;
  left: 0;
  z-index: 2;
  padding: 10px 10px 10px 14px;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  line-height: var(--code-line);
  color: var(--code-comment);
  background: var(--code-bg);
  border-right: 1px solid rgba(255, 255, 255, .06);
  user-select: none;
  white-space: pre;
}

.demo-code pre {
  flex: 1 1 auto;
  margin: 0;
  padding: 10px 16px 10px 12px;
}

.demo-code code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: var(--code-line);
  background: none;
  border: 0;
  padding: 0;
  color: var(--code-text);
  tab-size: 2;
  white-space: pre;
}

.demo-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 54px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(18,21,26,0) 0%, var(--code-bg) 74%);
  z-index: 3;
}
.demo-code.is-expanded + .demo-fade,
.demo-code:not(.is-collapsed) + .demo-fade { display: none; }

.demo-more {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 31px;
  border: 0;
  padding: 0;
  background: none;
  color: #8FA0B4;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  cursor: pointer;
}
.demo-more:hover { color: #E4EAF2; }
.demo-more[hidden] { display: none; }

.demo-frame {
  position: relative;
  border-top: 1px solid var(--rule);
  height: 500px;
  background: var(--paper-3);
}
.demo-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.demo-frame.is-full {
  position: fixed;
  inset: 0;
  z-index: 999;
  height: auto;
  border: 0;
}

.demo-runbar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.demo-runbar .spacer { margin-left: auto; }
.demo-runbar .mono { text-transform: none; letter-spacing: 0; }

.demo-runbar .live::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}

.demo-status {
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-family: var(--mono);
  border-top: 1px solid var(--rule);
}
.demo-status:empty { display: none; }

/* ============================================================
   首页
   ============================================================ */

.home {
  padding: 0 40px 96px 44px;
  max-width: 1040px;
}

/* 经纬网格标题区 */
.hero {
  position: relative;
  margin: 0 -40px 0 -44px;
  padding: 64px 40px 52px 44px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--rule) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 72px);
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 20% 0%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 80% at 20% 0%, #000 10%, transparent 78%);
  pointer-events: none;
}

.hero > * { position: relative; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::after {
  content: "";
  flex: 0 0 40px;
  height: 1px;
  background: var(--accent-line);
}

.home h1 {
  font-size: 40px;
  line-height: 1.28;
  margin: 0 0 18px;
  max-width: 720px;
}

.home .lede {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0;
}

/* 数据条 */
.stats {
  display: flex;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}
.stat {
  padding: 16px 32px 0 0;
  margin-right: 32px;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; margin-right: 0; }
.stat b {
  display: block;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* 目录块 */
.stack-block {
  border-top: 1px solid var(--rule);
  padding: 26px 0 8px;
  position: relative;
}

.stack-block:first-of-type { border-top: 0; }

.stack-block h2 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.005em;
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.stack-block h2 .idx {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--accent-deep);
  letter-spacing: .1em;
  border: 1px solid var(--accent-line);
  border-radius: 2px;
  padding: 1px 5px;
  background: var(--accent-soft);
}

.stack-block .stack-desc {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 18px;
  max-width: 620px;
}

.col-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding-bottom: 18px;
}

.col-grid h3 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
}

.col-grid ul { list-style: none; margin: 0; padding: 0; }
.col-grid li { margin-bottom: 2px; }

.col-grid li a {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  border: 0;
  padding: 3px 0 3px 12px;
  position: relative;
}
.col-grid li a::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 1px;
  background: var(--rule-2);
  transition: width .12s ease, background .12s ease;
}
.col-grid li a:hover { color: var(--accent-deep); }
.col-grid li a:hover::before { width: 9px; background: var(--accent); }

/* ============================================================
   其它
   ============================================================ */

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  line-height: 1;
  padding: 5px 8px;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}

.faq { margin: 24px 0; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  padding: 15px 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  display: inline-block;
  width: 1.3em;
  color: var(--ink-3);
  font-family: var(--mono);
  font-weight: 400;
}
.faq details[open] summary::before { content: "−"; }
.faq .faq-body {
  padding: 0 0 18px 1.3em;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.78;
}

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 30px 40px 44px 44px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-3);
  background: var(--paper-2);
}
.site-foot p { margin: 0 0 6px; }

.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }

::selection { background: var(--accent-soft); color: var(--accent-deep); }

/* ============================================================
   语法高亮（highlight.js token 配色）
   与全站赭石 / 青灰体系一致，不用彩虹色
   ============================================================ */

.hljs { color: var(--code-text); background: transparent; }

.hljs-comment,
.hljs-quote { color: #5F6B7A; font-style: italic; }

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag { color: #E09A4E; }

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-template-string { color: #9DBA8C; }

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-meta { color: #8FB0C4; }

.hljs-title,
.hljs-title.function_,
.hljs-section,
.hljs-built_in,
.hljs-function { color: #DCC48F; }

.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class { color: #D08A62; }

.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable,
.hljs-property { color: #A9C4CE; }

.hljs-type,
.hljs-class .hljs-title,
.hljs-params { color: #C4B49A; }

.hljs-deletion { color: #C97A6A; }

.hljs-link { text-decoration: underline; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* 正文内代码块：拷贝按钮 */
.doc pre.code { position: relative; }

.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  color: #8FA0B4;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.doc pre.code:hover .code-copy { opacity: 1; }
.code-copy:hover { color: #E4EAF2; border-color: rgba(255, 255, 255, .3); }
.code-copy:disabled { opacity: .55; }

/* ============================================================
   响应式
   ============================================================ */

@media (max-width: 1240px) {
  .shell.has-toc { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 1000px) {
  .col-grid { grid-template-columns: 1fr; gap: 22px; }
  .home h1 { font-size: 31px; }
}

@media (max-width: 900px) {
  .shell, .shell.has-toc { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 286px;
    height: auto;
    z-index: 55;
    transform: translateX(-100%);
    transition: transform .22s ease;
    border-right: 1px solid var(--rule);
    background: var(--paper);
  }
  .sidebar.is-open { transform: translateX(0); }

  .side-mask {
    display: none;
    position: fixed;
    inset: 60px 0 0 0;
    background: rgba(10, 12, 15, .4);
    z-index: 50;
  }
  .side-mask.is-open { display: block; }

  .menu-btn { display: block; }

  .doc, .doc-wide, .home { padding: 24px 20px 72px; }
  .hero { margin: 0 -20px; padding: 40px 20px 34px; }
  .home h1 { font-size: 27px; }
  .doc h1 { font-size: 24px; }

  .stat { padding-right: 20px; margin-right: 20px; }
  .stat b { font-size: 21px; }

  .demo-frame { height: 400px; }
  .demo-code.is-expanded { max-height: 400px; }

  .site-foot { padding: 26px 20px 36px; }
}

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

/* ============================================================
   经纬志 · 视觉升级层
   叠加在上方基础样式之上，只改排版质感与细节，不改结构类名。
   方向：现代制图编辑体（cartographic editorial）
   ============================================================ */

:root{
  --paper:#FAF7F0;
  --paper-2:#F3EEE3;
  --paper-3:#E8E1D1;
  --ink:#0F1218;
  --ink-2:#444A53;
  --ink-3:#7B818B;
  --rule:#DED7C7;
  --rule-2:#C5BBA5;
  --accent:#9C4A15;
  --accent-deep:#6B320F;
  --accent-soft:#F8EDDC;
  --accent-line:#E2C69F;
  --teal:#0F514B;
  --link:#28456F;
  --link-soft:#E9EFF8;
  --shadow-1:0 1px 2px rgba(15,18,24,.05), 0 14px 30px -22px rgba(15,18,24,.45);
  --serif:"Source Han Serif SC","Noto Serif CJK SC","Songti SC","STSong","SimSun",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0C0F13;
    --paper-2:#131820;
    --paper-3:#1A212B;
    --ink:#E9E6DE;
    --ink-2:#A5ABB4;
    --ink-3:#6C727C;
    --rule:#202730;
    --rule-2:#2F3843;
    --accent:#E29A4F;
    --accent-deep:#F1B67C;
    --accent-soft:#1E1710;
    --accent-line:#4A3521;
    --teal:#57B4AA;
    --link:#8FB3E8;
    --link-soft:#131C29;
    --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 16px 34px -24px rgba(0,0,0,.9);
  }
}

/* ---------- 纸面质感 ---------- */
body{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.035'/%3E%3C/svg%3E");
  font-size:15.5px;
  line-height:1.82;
}

::selection{ background:var(--accent-soft); color:var(--accent-deep); }

/* ---------- 顶栏 ---------- */
.topbar{
  height:62px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar-inner{ height:62px; }

.brand{
  gap:11px;
  font-size:19.5px;
  letter-spacing:.04em;
}
.brand::before{ content:none; }
.brand-mark{
  flex:0 0 auto;
  color:var(--ink);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.brand:hover .brand-mark{ transform:rotate(-8deg); }
.brand-name{ font-weight:600; }

.brand-tag{
  border-left:1px solid var(--rule-2);
  letter-spacing:.14em;
  font-size:10px;
  color:var(--ink-3);
}

/* ---------- 侧栏目录 ---------- */
.sidebar{
  border-right:1px solid var(--rule);
  background:linear-gradient(180deg, var(--paper) 0, var(--paper) 62%, transparent 100%);
  padding-top:14px;
}
.nav-stack > .nav-head{
  border-radius:3px;
  letter-spacing:.01em;
}
.nav-stack.is-current > .nav-head{
  background:linear-gradient(90deg, var(--accent-soft), transparent 82%);
  box-shadow:inset 2px 0 0 var(--accent);
}
.nav-idx{
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}
.nav-sec > .nav-sec-head{
  letter-spacing:.12em;
  font-size:10px;
  text-transform:uppercase;
  color:var(--ink-3);
}
.nav-items a{
  border-radius:3px;
  transition:color .14s ease, background-color .14s ease, padding-left .14s ease;
}
.nav-items a:hover{ padding-left:5px; }
.nav-items a.is-active{
  background:var(--accent-soft);
  color:var(--accent-deep);
  font-weight:500;
  box-shadow:inset 2px 0 0 var(--accent);
}

/* ---------- 页内目录 ---------- */
.toc-title{
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:10px;
  color:var(--ink-3);
}
.toc a{
  transition:color .14s ease, border-color .14s ease;
}
.toc a.is-active{
  color:var(--accent-deep);
  border-left-color:var(--accent);
  font-weight:500;
}

/* ---------- 正文排版 ---------- */
.doc{
  font-feature-settings:"palt" 1;
}
.doc p, .doc li{
  max-width:68ch;
}
.doc p{
  margin:0 0 16px;
  color:var(--ink-2);
}
.doc strong, .doc b{ color:var(--ink); font-weight:600; }

a{
  color:var(--link);
  border-bottom:1px solid color-mix(in srgb, var(--link) 26%, transparent);
  transition:color .14s ease, border-color .14s ease, background-color .14s ease;
}
a:hover{
  color:var(--accent-deep);
  border-bottom-color:var(--accent);
  background:var(--accent-soft);
}

.doc h1, .home h1{
  font-family:var(--serif);
  letter-spacing:-.021em;
  font-weight:600;
}
.doc h1{
  font-size:33px;
  line-height:1.34;
  margin:0 0 18px;
  padding-top:22px;
}
.doc h1::before{
  content:"";
  display:block;
  width:44px;
  height:2px;
  background:var(--accent);
  margin:0 0 18px;
  border:0;
}

.doc .lede{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.86;
  color:var(--ink-2);
  max-width:62ch;
  margin:0 0 20px;
}

.doc .doc-meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
  padding:10px 0 0;
  border-top:1px solid var(--rule);
  margin-bottom:34px;
}

.doc{ counter-reset:sec; }
.doc h2{
  counter-increment:sec;
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:-.012em;
  line-height:1.4;
  margin:44px 0 16px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  display:flex;
  align-items:baseline;
  gap:12px;
}
.doc h2::before{
  content:counter(sec,decimal-leading-zero);
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--accent);
  background:none;
  border:0;
  width:auto;
  height:auto;
  padding:0;
  flex:0 0 auto;
  transform:translateY(-2px);
}

.doc h3{
  font-family:var(--sans);
  font-size:16px;
  font-weight:600;
  letter-spacing:.002em;
  margin:30px 0 10px;
  color:var(--ink);
}

.doc blockquote{
  border-left:2px solid var(--accent-line);
  background:var(--paper-2);
  padding:16px 20px;
  margin:22px 0;
  border-radius:0 4px 4px 0;
}

.crumb{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.05em;
  margin-bottom:8px;
}

/* ---------- 表格 ---------- */
.doc table{
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--rule-2);
  font-size:14px;
  margin:22px 0 26px;
}
.doc th{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:11px 14px;
  border-bottom:1px solid var(--rule-2);
}
.doc td{
  padding:12px 14px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
  color:var(--ink-2);
}
.doc td:first-child{
  color:var(--ink);
  font-weight:500;
}
.doc tbody tr:hover{ background:var(--paper-2); }
.doc td code{
  color:var(--accent-deep);
  font-size:.92em;
}

/* ---------- 代码 ---------- */
.doc pre.code, .sig{
  border-radius:6px;
  border:1px solid #232A33;
  box-shadow:var(--shadow-1);
}
.doc pre.code{
  margin:20px 0 26px;
  background:var(--code-bg);
}
.doc pre.code code{
  font-family:var(--mono);
  font-size:12.8px;
  line-height:21px;
}
.doc code{
  font-family:var(--mono);
  font-size:.9em;
  background:var(--paper-3);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:1px 5px;
}

.tip{
  border-left:2px solid var(--accent);
  background:var(--paper-2);
  border-radius:0 5px 5px 0;
}

/* ---------- 演示工作台 ---------- */
.demo{
  border:1px solid var(--rule-2);
  border-radius:8px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:var(--shadow-1);
  margin:26px 0 34px;
}
.demo-head{
  background:linear-gradient(180deg, var(--paper-2), var(--paper));
  border-bottom:1px solid var(--rule);
}
.demo-title{
  font-family:var(--mono);
  letter-spacing:.06em;
}
.demo-frame{
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in srgb, var(--rule) 45%, transparent) 9px 10px);
}
.demo-runbar{
  border-top:1px solid var(--rule);
  background:var(--paper-2);
}
.demo-btn{
  border-radius:3px;
  transition:background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.demo-btn:active{ transform:translateY(1px); }

/* ---------- 首页 ---------- */
.hero{
  padding:76px 40px 58px 44px;
}
.hero::before{
  background-image:
    repeating-radial-gradient(circle at 82% 12%, transparent 0 37px, var(--rule) 37px 38px),
    repeating-linear-gradient(0deg, transparent 0 71px, var(--rule) 71px 72px),
    repeating-linear-gradient(90deg, transparent 0 71px, var(--rule) 71px 72px);
  opacity:.42;
  -webkit-mask-image:radial-gradient(ellipse 92% 96% at 78% 6%, #000 4%, transparent 74%);
  mask-image:radial-gradient(ellipse 92% 96% at 78% 6%, #000 4%, transparent 74%);
}

.eyebrow{
  letter-spacing:.2em;
  font-size:10px;
  color:var(--accent-deep);
}

.home h1{
  font-size:52px;
  line-height:1.16;
  letter-spacing:-.028em;
  margin:0 0 22px;
  max-width:15ch;
}

.home .lede{
  font-family:var(--serif);
  font-size:17px;
  line-height:1.9;
  max-width:56ch;
}

.stats{
  margin-top:46px;
  border-top:2px solid var(--ink);
}
.stat b{
  font-size:30px;
  letter-spacing:-.03em;
}
.stack-block h2{
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:-.012em;
}
.stack-block h2 .idx{
  border-radius:2px;
  background:var(--accent-soft);
  border-color:var(--accent-line);
}
.stack-block .stack-desc{
  line-height:1.75;
}
.col-grid h3{
  letter-spacing:.16em;
  font-size:10px;
}

/* ---------- 页脚 ---------- */
.foot{
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.03em;
  color:var(--ink-3);
}

/* ---------- 焦点可见性 ---------- */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------- 入场动效 ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero > *, .doc > *{
    animation:jz-rise .52s cubic-bezier(.22,.72,.24,1) both;
  }
  .hero > *:nth-child(1), .doc > *:nth-child(1){ animation-delay:.02s; }
  .hero > *:nth-child(2), .doc > *:nth-child(2){ animation-delay:.06s; }
  .hero > *:nth-child(3), .doc > *:nth-child(3){ animation-delay:.10s; }
  .hero > *:nth-child(4), .doc > *:nth-child(4){ animation-delay:.14s; }
  .hero > *:nth-child(5), .doc > *:nth-child(5){ animation-delay:.18s; }
  .hero > *:nth-child(n+6), .doc > *:nth-child(n+6){ animation-delay:.22s; }
}
@keyframes jz-rise{
  from{ opacity:0; transform:translateY(9px); }
  to{ opacity:1; transform:none; }
}

/* ---------- 窄屏 ---------- */
@media (max-width:880px){
  .doc h1{ font-size:27px; }
  .home h1{ font-size:34px; }
  .doc h2{ font-size:20px; }
  .hero{ padding:52px 22px 40px 24px; }
}

/* ============================================================
   经纬志 · 入口与导航补充
   首页 CTA、技术栈首页主图、侧栏栈名可点击
   ============================================================ */

/* ---------- 首页 CTA ---------- */
.hero-sub{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.05em;
  line-height:1.9;
  color:var(--ink-3);
  margin:0 0 24px;
  max-width:60ch;
}
.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 4px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px 12px;
  border:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  border-radius:3px;
  font-size:13.5px;
  letter-spacing:.02em;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:translateY(-1px);
}
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--rule-2);
}
.btn.ghost:hover{
  color:var(--accent-deep);
  border-color:var(--accent);
  background:var(--accent-soft);
}

/* ---------- 技术栈首页 ---------- */
.stack-hero{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
  padding:26px 0 40px;
  border-bottom:1px solid var(--rule);
  margin-bottom:6px;
}
.stack-hero-body h1{
  padding-top:0;
  margin-bottom:14px;
}
.stack-hero-body h1::before{ margin-bottom:16px; }
.stack-hero .doc-meta{
  border-top:0;
  padding-top:0;
  margin-bottom:22px;
}
.stack-hero .hero-cta{ margin-top:2px; }

.stack-figure{
  position:relative;
  aspect-ratio:5/4;
  border:1px solid var(--rule-2);
  border-radius:5px;
  background:var(--paper-2);
  overflow:hidden;
  isolation:isolate;
}
.stack-figure::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in srgb, var(--rule) 62%, transparent) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--rule) 62%, transparent) 22px 23px);
  opacity:.55;
}
.stack-figure::after{
  content:"";
  position:absolute;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.stack-figure:hover::after{ transform:scale(1.04) rotate(-1.5deg); }

/* Cesium：经纬球 */
.stack-figure[data-stack="cesium"]::after{
  left:22%; top:19%;
  width:56%; aspect-ratio:1;
  border-radius:50%;
  border:1.5px solid var(--accent);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 44%, var(--accent-line) 44% 45.4%, transparent 45.4%),
    linear-gradient(90deg, transparent 0 48.6%, var(--accent-line) 48.6% 51.4%, transparent 51.4%);
  box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Leaflet：单点标记 */
.stack-figure[data-stack="leaflet"]::after{
  left:50%; top:26%;
  width:74px; height:74px;
  margin-left:-37px;
  border-radius:50% 50% 50% 4px;
  background:var(--accent);
  transform:rotate(-45deg);
  box-shadow:0 16px 22px -14px color-mix(in srgb, var(--ink) 55%, transparent);
}
.stack-figure[data-stack="leaflet"]:hover::after{ transform:rotate(-45deg) translateY(-4px); }

/* OpenLayers：层叠面 */
.stack-figure[data-stack="openlayers"]::after{
  left:24%; top:32%;
  width:52%; height:34%;
  border:1.5px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  transform:skewY(-9deg);
  box-shadow:
    0 -14px 0 -1px var(--paper-2),
    0 -15px 0 0 var(--rule-2),
    0 -28px 0 -1px var(--paper-2),
    0 -29px 0 0 var(--rule-2);
}

/* deck.gl：点阵散列 */
.stack-figure[data-stack="deckgl"]::after{
  inset:18% 16%;
  background-image:
    radial-gradient(circle, var(--accent) 0 2.1px, transparent 2.1px),
    radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent) 0 1.5px, transparent 1.5px);
  background-size:29px 29px, 21px 21px;
  background-position:4px 6px, 12px 15px;
  -webkit-mask-image:linear-gradient(160deg, #000 12%, transparent 88%);
  mask-image:linear-gradient(160deg, #000 12%, transparent 88%);
}

/* Turf.js：缓冲区同心环 */
.stack-figure[data-stack="turf"]::after{
  left:50%; top:50%;
  width:8px; height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:
    0 0 0 26px color-mix(in srgb, var(--accent) 5%, transparent),
    0 0 0 25px var(--accent-line),
    0 0 0 52px color-mix(in srgb, var(--accent) 4%, transparent),
    0 0 0 51px var(--accent-line),
    0 0 0 78px color-mix(in srgb, var(--accent) 3%, transparent),
    0 0 0 77px var(--rule-2);
}

/* MapLibre：矢量瓦片格 */
.stack-figure[data-stack="maplibre"]::after{
  inset:20% 18%;
  background-image:
    linear-gradient(90deg, var(--accent) 0 1.5px, transparent 1.5px),
    linear-gradient(0deg, var(--accent) 0 1.5px, transparent 1.5px);
  background-size:33% 50%, 50% 100%;
  opacity:.75;
}

/* three.js：线框立方 */
.stack-figure[data-stack="three"]::after{
  left:30%; top:28%;
  width:40%; aspect-ratio:1;
  border:1.5px solid var(--accent);
  transform:rotate(30deg) skewY(-14deg);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    18px 18px 0 -1px var(--paper-2),
    18px 18px 0 0 var(--rule-2);
}
.stack-figure[data-stack="three"]:hover::after{ transform:rotate(34deg) skewY(-14deg) scale(1.04); }

/* luma.gl：渲染三角形 */
.stack-figure[data-stack="lumagl"]::after{
  left:26%; top:24%;
  width:48%; aspect-ratio:1;
  clip-path:polygon(50% 4%, 96% 94%, 4% 94%);
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 78%, transparent) 0 42%,
    color-mix(in srgb, var(--teal) 55%, transparent) 42% 72%,
    color-mix(in srgb, var(--accent) 26%, transparent) 72% 100%);
}

/* ---------- 侧栏：栈名可点击 ---------- */
.nav-head{
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-chev{
  flex:0 0 auto;
  width:18px; height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink-3);
  cursor:pointer;
}
.nav-chev .chev{
  display:inline-block;
  font-size:10px;
  transition:transform .18s ease;
}
.nav-stack.is-open > .nav-head .nav-chev .chev{ transform:rotate(90deg); }
.nav-home{
  flex:1 1 auto;
  border:0;
  color:inherit;
  font:inherit;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-home:hover{
  color:var(--accent-deep);
  background:transparent;
  border:0;
}

/* ---------- 窄屏 ---------- */
@media (max-width:880px){
  .stack-hero{
    grid-template-columns:1fr;
    gap:24px;
  }
  .stack-figure{ aspect-ratio:16/9; order:-1; }
}

/* ---------- 技术栈首页：链接网格 ---------- */
.link-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
  gap:0 30px;
  margin:16px 0 10px;
}
.link-grid a{
  display:block;
  padding:8px 0 8px 0;
  border-bottom:1px solid var(--rule);
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-2);
  transition:color .14s ease, border-color .14s ease, padding-left .14s ease;
}
.link-grid a:hover{
  color:var(--accent-deep);
  border-bottom-color:var(--accent);
  background:transparent;
  padding-left:6px;
}
.more-note{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-3);
  margin:8px 0 0;
}

/* ============================================================
   顶栏一级菜单（nav.js 注入）
   ============================================================ */

.site-menu{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
  padding-left:14px;
  border-left:1px solid var(--rule);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.site-menu::-webkit-scrollbar{ display:none; }

.sm-link{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  height:36px;
  padding:0 13px;
  border:0;
  border-radius:6px;
  font-size:13.5px;
  letter-spacing:.01em;
  color:var(--ink-2);
  white-space:nowrap;
  transition:color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.sm-link:hover{
  color:var(--ink);
  background:var(--paper-2);
  border:0;
}
.sm-idx{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.04em;
  color:var(--ink-3);
  opacity:.85;
  font-variant-numeric:tabular-nums;
}
.sm-link.is-active{
  color:var(--accent-deep);
  font-weight:600;
  background:linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 45%, var(--paper)));
  box-shadow:inset 0 0 0 1px var(--accent-line), 0 1px 2px rgba(15,18,24,.05);
}
.sm-link.is-active .sm-idx{ color:var(--accent); opacity:1; }
.sm-link.is-active::before{
  content:"";
  flex:0 0 auto;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--accent);
}

/* ============================================================
   侧栏：当前栈位置标识 + 首页栈列表
   ============================================================ */

.nav-crumb{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:4px 20px 14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--rule);
  font-size:13px;
}
.nav-crumb a{
  border:0;
  color:var(--ink-3);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
}
.nav-crumb a:hover{ color:var(--accent-deep); background:transparent; }
.nav-crumb .sep{ color:var(--rule-2); }
.nav-crumb .cur{
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ink);
}

.nav-all a{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:6px 20px;
}
.nav-all a .nav-idx{ flex:0 0 auto; }

/* ============================================================
   顶栏菜单响应式
   ============================================================ */

@media (max-width:1100px){
  .sm-idx{ display:none; }
}

@media (max-width:1360px){
  .brand-tag{ display:none; }
}

@media (max-width:760px){
  .brand-tag{ display:none; }
  .site-menu{
    margin-left:2px;
    padding-left:10px;
    gap:3px;
  }
  .sm-link{
    height:32px;
    padding:0 10px;
    font-size:13px;
    border-radius:5px;
  }
}

/* ============================================================
   首页 · 宣传页（无侧栏）
   设计方向：把站点当成一张摊开的地图册来排
   ============================================================ */

.landing{
  max-width:1240px;
  margin:0 auto;
  padding:0 40px 0 40px;
}

/* ---------- 首屏 ---------- */

.lp-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:56px;
  align-items:center;
  padding:74px 0 62px;
  border-bottom:1px solid var(--rule);
}

.lp-hero::before{
  content:"";
  position:absolute;
  inset:-1px -40px 0 -40px;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 71px, var(--rule) 71px 72px),
    repeating-linear-gradient(90deg, transparent 0 71px, var(--rule) 71px 72px);
  opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 76% 90% at 88% 8%, #000 4%, transparent 72%);
  mask-image:radial-gradient(ellipse 76% 90% at 88% 8%, #000 4%, transparent 72%);
  pointer-events:none;
}
.lp-hero > *{ position:relative; }

.lp-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:24px;
}
.lp-eyebrow::after{
  content:"";
  flex:0 0 54px;
  height:1px;
  background:var(--accent-line);
}

.lp-title{
  font-family:var(--serif);
  font-size:56px;
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.03em;
  margin:0 0 26px;
  max-width:none;
}
.lp-title em{
  font-style:normal;
  color:var(--accent-deep);
  position:relative;
}
.lp-title em::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.06em;
  height:.09em;
  background:var(--accent-line);
  z-index:-1;
}

.lp-lede{
  font-family:var(--serif);
  font-size:17.5px;
  line-height:1.92;
  color:var(--ink-2);
  max-width:34em;
  margin:0 0 30px;
}

.lp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:38px;
}
.btn-ink{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.btn-line{
  background:transparent;
  color:var(--ink);
  border-color:var(--rule-2);
}
.btn-line:hover{
  color:var(--accent-deep);
  border-color:var(--accent);
  background:var(--accent-soft);
}

.lp-facts{
  display:grid;
  grid-template-columns:repeat(4,auto);
  justify-content:start;
  gap:0;
  border-top:1px solid var(--rule-2);
  padding-top:16px;
  max-width:520px;
}
.lp-facts > div{
  padding:0 22px;
  border-right:1px solid var(--rule);
}
.lp-facts > div:first-child{ padding-left:0; }
.lp-facts > div:last-child{ border-right:0; padding-right:0; }
.lp-facts b{
  display:block;
  font-family:var(--mono);
  font-size:22px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.lp-facts span{
  display:block;
  margin-top:4px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ---------- 首屏地图图纸 ---------- */

.lp-sheet{
  position:relative;
  margin:0;
  transform:rotate(-1.6deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.lp-sheet:hover{ transform:rotate(-.6deg) translateY(-4px); }

.lp-sheet svg{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--rule-2);
  border-radius:3px;
  background:#FDFBF5;
  box-shadow:
    0 1px 0 rgba(15,18,24,.04),
    0 18px 44px -30px rgba(15,18,24,.55);
}
@media (prefers-color-scheme: dark){
  .lp-sheet svg{ background:#101419; }
}

.sheet-caption{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.09em;
  color:var(--ink-3);
  text-transform:uppercase;
}

/* 动效：等高线浮现、路径描线 */
@media (prefers-reduced-motion: no-preference){
  .sheet-contour{ animation:lp-contour .9s ease both; }
  .sheet-contour:nth-of-type(2){ animation-delay:.08s; }
  .sheet-contour:nth-of-type(3){ animation-delay:.16s; }
  .sheet-contour:nth-of-type(4){ animation-delay:.24s; }

  .sheet-route{
    stroke-dasharray:6 5;
    animation:lp-route 1.7s cubic-bezier(.3,.7,.3,1) .35s both;
  }
}
@keyframes lp-contour{
  from{ opacity:0; transform:scale(.94); }
  to{ opacity:1; transform:none; }
}
@keyframes lp-route{
  from{ opacity:0; stroke-dashoffset:80; }
  to{ opacity:1; stroke-dashoffset:0; }
}

/* ---------- 通用分节 ---------- */

.lp-section{
  padding:66px 0 60px;
  border-bottom:1px solid var(--rule);
}

.lp-head{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:0 18px;
  margin-bottom:40px;
}
.lp-num{
  grid-row:span 2;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--accent);
  padding-top:8px;
}
.lp-head h2{
  font-family:var(--serif);
  font-size:32px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.32;
  margin:0 0 8px;
}
.lp-head p{
  font-size:14.5px;
  line-height:1.8;
  color:var(--ink-3);
  margin:0;
  max-width:60ch;
}

/* ---------- 三块理由 ---------- */

.lp-why{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--rule);
}
.lp-why article{
  padding:26px 30px 8px 0;
  border-right:1px solid var(--rule);
}
.lp-why article:last-child{ border-right:0; padding-right:0; }
.lp-why .w-idx{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--ink-3);
  display:block;
  margin-bottom:14px;
}
.lp-why h3{
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  margin:0 0 10px;
  letter-spacing:-.01em;
}
.lp-why p{
  font-size:14px;
  line-height:1.82;
  color:var(--ink-2);
  margin:0;
}

/* ---------- 技术栈索引 ---------- */

.lp-stacks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.lp-stack{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:20px;
  padding:18px;
  border:1px solid var(--rule);
  border-radius:6px;
  background:linear-gradient(180deg, var(--paper) 0, var(--paper-2) 160%);
  border-bottom:1px solid var(--rule);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lp-stack:hover{
  border-color:var(--accent-line);
  transform:translateY(-2px);
  box-shadow:0 14px 30px -24px rgba(15,18,24,.5);
  background:var(--paper);
}
.lp-stack .stack-figure{
  aspect-ratio:1/1;
  border-radius:4px;
  background:var(--paper-2);
}
.lp-stack-body{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.lp-stack-top{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin-bottom:7px;
}
.lp-stack-top .idx{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--accent);
}
.lp-stack-top h3{
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0;
}
.lp-stack-desc{
  font-size:13px;
  line-height:1.72;
  color:var(--ink-3);
  margin:0 0 10px;
}
.lp-stack-meta{
  margin-top:auto;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.06em;
  color:var(--ink-3);
  display:flex;
  gap:12px;
}
.lp-stack-meta span{ white-space:nowrap; }
.lp-stack-go{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--accent-deep);
  margin-top:8px;
}

/* ---------- 示例画廊 ---------- */

.lp-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.lp-shot{
  display:block;
  border:1px solid var(--rule);
  border-radius:5px;
  overflow:hidden;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lp-shot:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 18px 34px -26px rgba(15,18,24,.6);
}
.lp-shot.is-wide{ grid-column:span 2; }
.lp-shot-media{
  position:relative;
  display:block;
  aspect-ratio:16/10;
  background:var(--paper-3);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.lp-shot-media img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.lp-shot-cap{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:11px 13px 12px;
}
.lp-shot-cap b{
  font-size:13.5px;
  font-weight:500;
  color:var(--ink);
  line-height:1.5;
}
.lp-shot-cap span{
  margin-left:auto;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ---------- 实战手册 ---------- */

.lp-cookbook{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px;
  align-items:start;
}
.lp-cookbook-copy p{
  font-size:15px;
  line-height:1.86;
  color:var(--ink-2);
  margin:0 0 16px;
  max-width:44ch;
}
.lp-case-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 26px;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--rule);
}
.lp-case-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--rule);
  font-size:13.5px;
  color:var(--ink-2);
}
.lp-case-list li a{ border:0; color:inherit; }
.lp-case-list li a:hover{ color:var(--accent-deep); background:transparent; }
.lp-case-list em{
  font-style:normal;
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ---------- 三步 ---------- */

.lp-how{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:34px;
}
.lp-step{
  position:relative;
  padding-top:22px;
  border-top:2px solid var(--ink);
}
.lp-step:nth-child(2){ border-top-color:var(--accent); }
.lp-step:nth-child(3){ border-top-color:var(--rule-2); }
.lp-step .s-num{
  position:absolute;
  top:-11px;
  left:0;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
  background:var(--paper);
  padding-right:8px;
}
.lp-step h3{
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
  margin:0 0 8px;
}
.lp-step p{
  font-size:14px;
  line-height:1.8;
  color:var(--ink-2);
  margin:0;
}

/* ---------- 收尾 CTA ---------- */

.lp-cta{
  padding:78px 0 84px;
  text-align:center;
}
.lp-cta .lp-eyebrow{
  justify-content:center;
  margin-bottom:20px;
}
.lp-cta h2{
  font-family:var(--serif);
  font-size:42px;
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.26;
  margin:0 auto 16px;
  max-width:18ch;
}
.lp-cta p{
  font-size:15px;
  color:var(--ink-3);
  margin:0 auto 28px;
  max-width:52ch;
  line-height:1.8;
}
.lp-cta .lp-actions{ justify-content:center; margin-bottom:0; }

/* ---------- 首页页脚 ---------- */

.lp-foot{
  border-top:2px solid var(--ink);
  padding:34px 0 46px;
  background:transparent;
}
.lp-foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));
  gap:36px;
}
.lp-foot h4{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 12px;
  font-weight:500;
}
.lp-foot ul{
  list-style:none;
  margin:0;
  padding:0;
  columns:2;
  column-gap:22px;
}
.lp-foot li{ margin-bottom:4px; break-inside:avoid; }
.lp-foot a{
  font-size:12.5px;
  color:var(--ink-2);
  border:0;
}
.lp-foot a:hover{ color:var(--accent-deep); background:transparent; }
.lp-foot-brand{
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 8px;
}
.lp-foot-note{
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--ink-3);
  margin:0;
}

/* ---------- 首页响应式 ---------- */

@media (max-width:1080px){
  .lp-hero{ grid-template-columns:1fr; gap:40px; padding:56px 0 48px; }
  .lp-sheet{ max-width:560px; transform:none; }
  .lp-title{ font-size:44px; max-width:none; }
  .lp-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-shot.is-wide{ grid-column:span 2; }
  .lp-cookbook{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:820px){
  .landing{ padding:0 22px; }
  .lp-hero::before{ inset:-1px -22px 0 -22px; }
  .lp-title{ font-size:30px; letter-spacing:-.02em; }
  .lp-lede{ font-size:16px; }
  .lp-facts{ grid-template-columns:repeat(2,auto); gap:14px 0; max-width:none; }
  .lp-facts > div:nth-child(2){ border-right:0; padding-right:0; }
  .lp-facts > div:nth-child(3){ padding-left:0; }
  .lp-head{ grid-template-columns:1fr; gap:8px; }
  .lp-num{ padding-top:0; }
  .lp-head h2{ font-size:26px; }
  .lp-section{ padding:48px 0 44px; }
  .lp-why{ grid-template-columns:1fr; }
  .lp-why article{ border-right:0; border-bottom:1px solid var(--rule); padding:22px 0 18px; }
  .lp-why article:last-child{ border-bottom:0; }
  .lp-stacks{ grid-template-columns:1fr; }
  .lp-stack{ grid-template-columns:104px minmax(0,1fr); }
  .lp-gallery{ grid-template-columns:1fr; }
  .lp-shot.is-wide{ grid-column:span 1; }
  .lp-how{ grid-template-columns:1fr; gap:26px; }
  .lp-cta{ padding:56px 0 60px; }
  .lp-cta h2{ font-size:30px; }
  .lp-foot-grid{ grid-template-columns:1fr; gap:24px; }
}

@media (prefers-color-scheme: dark){
  .lp-stack{ background:var(--paper-2); }
  .lp-sheet svg{ box-shadow:0 18px 44px -30px #000; }
}

/* ============================================================
   技术栈首页 · 完整目录与图文示例
   ============================================================ */

.stack-page{ max-width:1120px; }

.stack-index{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 26px;
  padding:0 0 22px;
  border-bottom:1px solid var(--rule);
}
.stack-index a{
  display:inline-flex;
  align-items:baseline;
  gap:7px;
  padding:7px 13px;
  border:1px solid var(--rule);
  border-radius:4px;
  font-size:12.5px;
  color:var(--ink-2);
  transition:border-color .14s ease, color .14s ease, background-color .14s ease;
}
.stack-index a:hover{
  border-color:var(--accent-line);
  color:var(--accent-deep);
  background:var(--accent-soft);
}
.stack-index .cnt{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--ink-3);
}

.answer-box{
  margin:0 0 34px;
  padding:16px 20px;
  border-left:2px solid var(--accent);
  background:var(--paper-2);
  border-radius:0 5px 5px 0;
  font-size:14.3px;
  line-height:1.82;
  color:var(--ink-2);
  max-width:74ch;
}
.answer-box b{
  color:var(--ink);
  font-weight:600;
  margin-right:6px;
}

.sec-count{
  margin-left:10px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:2px 7px;
  transform:translateY(-3px);
}

/* ---------- 教程卡片 ---------- */

.tut-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--rule);
}
.tut-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px 22px 18px 0;
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
}
.tut-card:nth-child(3n){ border-right:0; padding-right:0; }
.tut-card .t-num{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--accent);
}
.tut-card h3{
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  margin:0;
  line-height:1.45;
  letter-spacing:-.005em;
}
.tut-card h3 a{ border:0; color:inherit; }
.tut-card h3 a:hover{ color:var(--accent-deep); background:transparent; }
.tut-card p{
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-3);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- API 全量列表 ---------- */

.api-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.api-item{
  display:flex;
  align-items:baseline;
  gap:7px;
  padding:9px 12px;
  border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);
  font-size:12.5px;
  color:var(--ink-2);
  min-width:0;
  transition:background-color .12s ease, color .12s ease;
}
.api-item:hover{
  background:var(--accent-soft);
  color:var(--accent-deep);
  border-bottom-color:var(--rule);
}
.api-item .a-dot{
  flex:0 0 auto;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--rule-2);
}
.api-item:hover .a-dot{ background:var(--accent); }
.api-item span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- 示例图文卡片 ---------- */

.ex-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.ex-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--rule);
  border-radius:5px;
  overflow:hidden;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ex-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 18px 34px -26px rgba(15,18,24,.55);
}
.ex-shot{
  position:relative;
  aspect-ratio:16/10;
  margin:0;
  border-bottom:1px solid var(--rule);
  background:var(--paper-3);
  overflow:hidden;
}
.ex-shot img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.ex-card:hover .ex-shot img{ transform:scale(1.03); }
.ex-shot.is-plate{
  background:#0E1116;
}
.ex-shot.is-missing{
  aspect-ratio:16/10;
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, color-mix(in srgb, var(--rule) 50%, transparent) 8px 9px),
    var(--paper-2);
}
.ex-shot.is-missing::after{
  content:"运行效果";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--ink-3);
}
.ex-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:13px 15px 15px;
}
.ex-body h3{
  font-size:14.5px;
  font-weight:600;
  line-height:1.5;
  margin:0;
  color:var(--ink);
}
.ex-body p{
  font-size:12.2px;
  line-height:1.68;
  color:var(--ink-3);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ex-go{
  margin-top:2px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-deep);
}

/* ---------- FAQ ---------- */

.stack-faq{
  max-width:820px;
  margin:40px 0 0;
  border-top:2px solid var(--ink);
}
.stack-faq h2{
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
  margin:22px 0 6px;
  padding:0;
  border:0;
  display:block;
}
.stack-faq h2::before{ display:none; }
.stack-faq details{
  border-bottom:1px solid var(--rule);
  padding:15px 0;
}
.stack-faq summary{
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  list-style:none;
  color:var(--ink);
}
.stack-faq summary::-webkit-details-marker{ display:none; }
.stack-faq summary::before{
  content:"+";
  display:inline-block;
  width:1.35em;
  font-family:var(--mono);
  font-weight:400;
  color:var(--accent);
}
.stack-faq details[open] summary::before{ content:"−"; }
.stack-faq .faq-a{
  padding:8px 0 4px 1.35em;
  font-size:14.2px;
  line-height:1.82;
  color:var(--ink-2);
  max-width:70ch;
}

/* ---------- 技术栈页响应式 ---------- */

@media (max-width:1080px){
  .tut-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tut-card:nth-child(3n){ border-right:1px solid var(--rule); padding-right:22px; }
  .tut-card:nth-child(2n){ border-right:0; padding-right:0; }
  .api-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ex-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:700px){
  .tut-grid{ grid-template-columns:1fr; }
  .tut-card, .tut-card:nth-child(3n){ border-right:0; padding-right:0; }
  .api-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ex-grid{ grid-template-columns:1fr; }
  .stack-page{ max-width:none; }
}

/* ============================================================
   实战手册首页 · 现场笔记体
   ============================================================ */

.cb-page{ max-width:1120px; }

.cb-hero{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:52px;
  align-items:center;
  padding:34px 0 44px;
  border-bottom:1px solid var(--rule);
}

.cb-hero h1{
  font-family:var(--serif);
  font-size:48px;
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.2;
  margin:0 0 18px;
  padding-top:16px;
  position:relative;
}
.cb-hero h1::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:46px; height:2px;
  background:var(--accent);
}

.cb-hero .lede{
  font-family:var(--serif);
  font-size:16.5px;
  line-height:1.9;
  color:var(--ink-2);
  max-width:36em;
  margin:0 0 26px;
}

.cb-stats{
  display:flex;
  gap:0;
  margin:0 0 28px;
  padding-top:14px;
  border-top:1px solid var(--rule-2);
  max-width:430px;
}
.cb-stats > div{
  padding:0 24px;
  border-right:1px solid var(--rule);
}
.cb-stats > div:first-child{ padding-left:0; }
.cb-stats > div:last-child{ border-right:0; padding-right:0; }
.cb-stats b{
  display:block;
  font-family:var(--mono);
  font-size:24px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cb-stats span{
  display:block;
  margin-top:4px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--ink-3);
  white-space:nowrap;
}

.cb-sheet{
  margin:0;
  transform:rotate(1.2deg);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.cb-sheet:hover{ transform:rotate(.4deg) translateY(-3px); }
.cb-sheet svg{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--rule-2);
  border-radius:3px;
  background:#FDFBF5;
  box-shadow:0 18px 44px -30px rgba(15,18,24,.55);
}
@media (prefers-color-scheme: dark){
  .cb-sheet svg{ background:#101419; }
}

/* ---------- 三步用法 ---------- */

.cb-guide{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  margin:34px 0 50px;
}
.cb-guide-step{
  position:relative;
  padding-top:20px;
  border-top:2px solid var(--ink);
}
.cb-guide-step:nth-child(2){ border-top-color:var(--accent); }
.cb-guide-step:nth-child(3){ border-top-color:var(--rule-2); }
.cb-guide-step span{
  position:absolute;
  top:-10px; left:0;
  padding-right:8px;
  background:var(--paper);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
}
.cb-guide-step h3{
  font-family:var(--serif);
  font-size:18px;
  font-weight:600;
  margin:0 0 6px;
}
.cb-guide-step p{
  font-size:13px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0;
}

/* ---------- 分类 ---------- */

.cb-cat{
  margin:0 0 44px;
  scroll-margin-top:78px;
}
.cb-cat-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px;
  padding-bottom:12px;
  border-bottom:2px solid var(--ink);
  margin-bottom:16px;
}
.cb-cat-head h2{
  font-family:var(--serif);
  font-size:23px;
  font-weight:600;
  letter-spacing:-.012em;
  margin:0;
  padding:0;
  border:0;
  display:block;
}
.cb-cat-head h2::before{ display:none; }
.cb-cat-count{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  color:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:2px 7px;
}
.cb-cat-head p{
  flex:0 0 100%;
  max-width:none;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-3);
  margin:2px 0 0;
}

.cb-cat-idx{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--accent);
  flex:0 0 auto;
}

.cb-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.cb-card{
  display:grid;
  grid-template-columns:126px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:11px;
  border:1px solid var(--rule);
  border-radius:4px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.cb-card:hover{
  border-color:var(--accent-line);
  background:var(--paper);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -24px rgba(15,18,24,.55);
}
.cb-thumb{
  display:block;
  width:126px;
  aspect-ratio:4/3;
  border:1px solid var(--rule);
  border-radius:3px;
  overflow:hidden;
  background:var(--paper-2);
}
.cb-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.22) saturate(1.04);
}
.cb-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  height:100%;
}
.cb-num{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.1em;
  color:var(--accent);
}
.cb-card h3{
  font-size:13.9px;
  font-weight:600;
  line-height:1.48;
  margin:0;
  color:var(--ink);
  letter-spacing:.002em;
}
.cb-desc{
  font-size:11.9px;
  line-height:1.66;
  color:var(--ink-3);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cb-go{
  margin-top:auto;
  padding-top:5px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.1em;
  color:var(--accent-deep);
  opacity:.75;
}

/* ---------- 高频案例 ---------- */

.cb-featured{
  margin:0 0 46px;
  padding:26px 0 0;
  border-top:2px solid var(--ink);
}
.cb-feat-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.cb-feat-head h2{
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  letter-spacing:-.012em;
  margin:0;
  padding:0;
  border:0;
  display:block;
}
.cb-feat-head h2::before{ display:none; }
.cb-feat-head span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--ink-3);
}
.cb-feat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.cb-feat-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  border-radius:5px;
  overflow:hidden;
  background:var(--paper);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.cb-feat-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 18px 34px -26px rgba(15,18,24,.55);
}
.cb-feat-shot{
  display:block;
  aspect-ratio:4/3;
  border-bottom:1px solid var(--rule);
  background:var(--paper-2);
  overflow:hidden;
}
.cb-feat-shot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(1.12);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.cb-feat-card:hover .cb-feat-shot img{ transform:scale(1.03); }
.cb-feat-no{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.12em;
  color:var(--accent);
  padding:11px 14px 0;
}
.cb-feat-card h3{
  font-size:14.5px;
  font-weight:600;
  line-height:1.5;
  margin:0;
  padding:4px 14px 0;
}
.cb-feat-card p{
  font-size:12px;
  line-height:1.7;
  color:var(--ink-3);
  margin:0;
  padding:6px 14px 14px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- 相关技术栈 ---------- */

.cb-related{
  margin:6px 0 48px;
  padding:26px 0 0;
  border-top:1px solid var(--rule);
}
.cb-related h2{
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  letter-spacing:-.012em;
  margin:0 0 8px;
  padding:0;
  border:0;
  display:block;
}
.cb-related h2::before{ display:none; }
.cb-related p{
  font-size:13.5px;
  line-height:1.75;
  color:var(--ink-3);
  margin:0 0 14px;
}
.cb-rel-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cb-rel-links a{
  padding:7px 13px;
  border:1px solid var(--rule);
  border-radius:4px;
  font-size:12.5px;
  color:var(--ink-2);
}
.cb-rel-links a:hover{
  border-color:var(--accent-line);
  color:var(--accent-deep);
  background:var(--accent-soft);
}

.cb-faq{ margin-top:10px; }

@media (max-width:1080px){
  .cb-hero{ grid-template-columns:1fr; gap:34px; padding-top:24px; }
  .cb-sheet{ max-width:540px; transform:none; }
  .cb-hero h1{ font-size:40px; }
  .cb-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:720px){
  .cb-hero h1{ font-size:34px; }
  .cb-hero .lede{ font-size:15.5px; }
  .cb-grid{ grid-template-columns:1fr; }
  .cb-card{ grid-template-columns:106px minmax(0,1fr); gap:11px; padding:9px; }
  .cb-thumb{ width:106px; }
  .cb-feat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .cb-guide{ grid-template-columns:1fr; gap:22px; margin:26px 0 38px; }
  .cb-cat{ margin-bottom:34px; }
}

@media (max-width:480px){
  .cb-feat-grid{ grid-template-columns:1fr; }
}
/* ============================================================
   资源下载页
   ============================================================ */

.res-card{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  margin:26px 0 38px;
  padding:20px 22px;
  border:1px solid var(--rule-2);
  border-radius:6px;
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
}
.res-kind{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--accent-deep);text-align:center;
  padding:14px 0;border:1px solid var(--accent-line);border-radius:3px;
  background:var(--accent-soft);
}
.res-body h2{ counter-increment:none;
  font-family:var(--sans);font-size:18px;font-weight:600;
  margin:0 0 6px;padding:0;border:0;display:block;
}
.res-body h2::before{ display:none; }
.res-body p{font-size:13.5px;line-height:1.75;color:var(--ink-2);margin:0 0 9px;max-width:56ch;}
.res-meta{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);}
.res-act{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.res-act .btn{white-space:nowrap;}
.res-alt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3);border:0;}
.res-alt:hover{color:var(--accent-deep);background:transparent;}

@media (max-width:720px){
  .res-card{grid-template-columns:1fr;gap:14px;padding:16px;}
  .res-kind{width:58px;padding:10px 0;}
  .res-act{flex-direction:row;align-items:center;gap:14px;}
}
/* ---------- 语言切换 ---------- */
.lang-switch{
  flex:0 0 auto;
  margin-left:8px;
  padding:5px 7px;
  border:1px solid var(--rule);
  border-radius:3px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
  line-height:1;
  transition:color .14s ease,border-color .14s ease,background-color .14s ease;
}
.lang-switch:hover{
  color:var(--accent-deep);
  border-color:var(--accent-line);
  background:var(--accent-soft);
}
@media (max-width:760px){
  .lang-switch{ margin-left:4px; padding:4px 6px; }
}
/* AI answer + citation */
.quick-answer{background:var(--paper-2);border-left:3px solid var(--accent);padding:16px 20px 14px;margin:0 0 26px;border-radius:0 4px 4px 0;}
.qa-label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.quick-answer p{margin:0;font-size:15px;line-height:1.78;color:var(--ink-2);}
.qa-meta{margin-top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--ink-3);}
.qa-meta a{border:0;color:var(--accent-deep);}
.cite-box{margin:34px 0 0;padding:16px 20px 15px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);}
.cite-box b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;}
.cite-box p{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-2);word-break:break-word;}

/* ============================================================
   Mobile navigation (<=900px)
   ============================================================ */
.mnav{position:fixed;top:0;bottom:0;left:0;width:min(88vw,360px);z-index:80;display:none;flex-direction:column;background:var(--paper);border-right:1px solid var(--rule);box-shadow:24px 0 60px -30px rgba(15,18,24,.45);transform:translateX(-102%);transition:transform .24s cubic-bezier(.2,.7,.2,1);padding-bottom:env(safe-area-inset-bottom,0);}
.mnav.is-open{transform:translateX(0);}
.mnav-mask{position:fixed;inset:0;z-index:79;background:rgba(10,12,15,.42);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;}
.mnav-mask.is-open{opacity:1;visibility:visible;}
.mnav-head{flex:0 0 auto;height:60px;display:flex;align-items:center;gap:10px;padding:0 14px 0 18px;border-bottom:1px solid var(--rule);}
.mnav-title{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.01em;}
.mnav-close{margin-left:auto;width:34px;height:34px;border:1px solid var(--rule-2);border-radius:var(--radius);background:var(--paper);color:var(--ink-2);font-size:14px;line-height:1;cursor:pointer;}
.mnav-close:hover{color:var(--accent-deep);border-color:var(--accent);}
.mnav-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 0 28px;}
.mnav-label{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:16px 18px 7px;}
.mnav-label-2{border-top:1px solid var(--rule);margin-top:14px;padding-top:16px;}
.mnav-l1 a{display:flex;align-items:baseline;gap:10px;padding:11px 18px;border:0;font-size:14.5px;line-height:1.4;color:var(--ink-2);border-left:2px solid transparent;}
.mnav-l1 a:hover{background:var(--paper-2);}
.mnav-l1 a.is-active{color:var(--accent-deep);background:var(--accent-soft);border-left-color:var(--accent);font-weight:600;}
.mnav-idx{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.04em;}
.mnav-l1 a.is-active .mnav-idx{color:var(--accent);}
.mnav-l2 .nav-sec-head{padding-left:18px;}
.mnav-l2 .nav-items a{padding-left:34px;font-size:13.5px;padding-top:6px;padding-bottom:6px;}
.mnav-l2 .nav-items a.is-active{background:var(--accent-soft);}
.mnav-foot{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:18px;padding:16px 18px 0;border-top:1px solid var(--rule);}
.mnav-foot a{border:0;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-3);}
.mnav-foot a:hover{color:var(--accent-deep);}
body.mnav-open{overflow:hidden;}

@media (min-width:901px){
  .mnav, .mnav-mask{display:none !important;}
}

@media (max-width:900px){
  .topbar .site-menu{display:none !important;}
  .topbar .en-nav{display:none !important;}
  .topbar-inner{padding:0 12px;gap:10px;}
  .menu-btn{display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .mnav{display:flex;}
  .mnav-mask{display:block;}
  .doc table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .rf-doc .name, .rf-doc .signature, .rf-doc .type-signature{white-space:normal;overflow-wrap:anywhere;word-break:break-word;max-width:100%;}
  .rf-doc pre, .doc pre, .rf-doc table{max-width:100%;}
  .rf-wrap{padding-left:18px;padding-right:18px;}
  .qa-wrap,.dt-wrap{padding-left:20px;padding-right:20px;}
}

@media (max-width:420px){
  .brand{font-size:17px;gap:8px;}
  .brand-mark{width:22px;height:22px;}
}
.mnav-big{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 18px 8px 34px;border:0;font-size:13.5px;color:var(--ink-2);}
.mnav-big:hover{background:var(--paper-2);}
.mnav-count{font-family:var(--mono);font-size:10px;color:var(--ink-3);}@media (max-width:900px){
  .doc p, .doc li, .rf-doc p, .rf-doc li, .qa-item p, .dt-note{ overflow-wrap:anywhere; }
  .doc p code, .doc li code, .rf-doc p code, .qa-item p code{ white-space:normal; }
  .doc table, .rf-doc table{ display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:12.6px; }
  .doc table th, .doc table td, .rf-doc table th, .rf-doc table td{ white-space:nowrap; padding-right:14px; }
}@media (max-width:900px){
  .rf-wrap, .doc, .doc-wide, .qa-wrap, .dt-wrap, .landing{ overflow-x:hidden; }
}@media (max-width:900px){
  .menu-btn{width:38px;height:38px;font-size:16px;}
  .mnav-close{width:38px;height:38px;}
}
/* iOS / mobile platform fixes */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.topbar{ -webkit-backdrop-filter:saturate(160%) blur(10px); }