@charset "utf-8";

/* ============================================================
   Anima — mtknpu.zh.kg
   深底 + 细线 + 等宽数字。界面保持无彩，让出图本身是唯一的颜色。
   ============================================================ */

:root {
  --bg:        #0b0b0c;
  --bg-elev:   #101012;
  --bg-soft:   #141417;
  --line:      rgba(255, 255, 255, .085);
  --line-2:    rgba(255, 255, 255, .16);
  --fg:        #f2f1ee;
  --fg-2:      #a3a29a;
  --fg-3:      #6e6e67;
  --accent:    #e0a84e;
  --accent-dim:rgba(224, 168, 78, .16);
  --ok:        #74c69d;
  --warn:      #d9a441;
  --no:        #b56b6b;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
          Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --gut: clamp(16px, 3.2vw, 25.6px);
  --max: 912px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 12.8px;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 顶部一道极缓的暖光，避免纯黑显得廉价 */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 56vh;
  background:
    radial-gradient(72rem 32rem at 68% -12%, rgba(224, 168, 78, .07), transparent 62%),
    radial-gradient(48rem 27.2rem at 8% -6%, rgba(255, 255, 255, .045), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(224, 168, 78, .28); color: #fff; }

/* ---------------------------------------------------------- 布局 */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); position: relative; z-index: 1; }
.sec  { padding-block: clamp(54.4px, 7.2vw, 105.6px); position: relative; z-index: 1; }
.sec + .sec { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------- 排版 */
h1, h2, h3, h4 { margin: 0; font-weight: 620; letter-spacing: -.015em; line-height: 1.22; }

.h-display {
  font-size: clamp(2.08rem, 5.12vw, 3.48rem);
  font-weight: 680;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.h-sec { font-size: clamp(1.32rem, 2.56vw, 1.88rem); letter-spacing: -.028em; }
.h-sub { font-size: clamp(0.84rem, 1.44vw, 0.96rem); font-weight: 600; letter-spacing: -.012em; }

p { margin: 0 0 1.05em; }
.lede { font-size: clamp(0.816rem, 1.36vw, 0.928rem); color: var(--fg-2); line-height: 1.82; max-width: 62ch; }
.dim  { color: var(--fg-2); }
.dim-2{ color: var(--fg-3); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* 章节眉标：序号 + 标签 */
.eyebrow {
  display: flex; align-items: center; gap: 9.6px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3);
  margin-bottom: 17.6px;
}
.eyebrow::before {
  content: ""; width: 20.8px; height: 1px; background: var(--accent); opacity: .85;
}
.eyebrow .n { color: var(--accent); }

.sec-head { max-width: 66ch; margin-bottom: clamp(30.4px, 4vw, 49.6px); }
.sec-head .h-sec + p { margin-top: 14.4px; }

/* ---------------------------------------------------------- 头部 */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: 49.6px; display: flex; align-items: center;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(11, 11, 12, .78);
  backdrop-filter: blur(11.2px) saturate(1.4);
  -webkit-backdrop-filter: blur(11.2px) saturate(1.4);
  border-bottom-color: var(--line);
}
.hdr .wrap { display: flex; align-items: center; gap: 22.4px; }

.brand { display: flex; align-items: center; gap: 8px; font-weight: 640; letter-spacing: -.02em; font-size: 0.816rem; }
.brand .mark { width: 15.2px; height: 15.2px; flex: none; }
.brand .tag {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: .1em;
  color: var(--accent); border: 1px solid var(--accent-dim);
  background: rgba(224, 168, 78, .07);
  padding: 1.6px 4.8px; border-radius: 3.2px; text-transform: uppercase;
  transform: translateY(-0.8px);
}

.nav { display: flex; gap: 20.8px; margin-left: auto; align-items: center; }
.nav a { font-size: 0.712rem; color: var(--fg-2); position: relative; transition: color .25s var(--ease); }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .38s var(--ease);
}
.nav a:hover { color: var(--fg); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-here { color: var(--fg); }

.nav-toggle { display: none; }

/* ---------------------------------------------------------- 按钮 */
.btn {
  --pad: 10.4px 17.6px;
  display: inline-flex; align-items: center; gap: 7.2px;
  padding: var(--pad); border-radius: 999px;
  font-size: 0.744rem; font-weight: 560; letter-spacing: .005em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease), opacity .3s;
  will-change: transform;
}
.btn:active { transform: scale(.975); }
.btn-solid { background: var(--fg); color: #0a0a0b; }
.btn-solid:hover { background: #fff; transform: translateY(-1.6px); }
.btn-ghost { border-color: var(--line-2); color: var(--fg); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .04); transform: translateY(-1.6px); }
.btn-sm { --pad: 7.2px 12.8px; font-size: 0.672rem; }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(2.4px); }

/* ---------------------------------------------------------- 首屏 */
.hero { padding-top: clamp(89.6px, 12vw, 134.4px); padding-bottom: clamp(44.8px, 5.6vw, 76.8px); }
.hero-grid {
  display: grid; gap: clamp(30.4px, 4.8vw, 57.6px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.hero .pill {
  display: inline-flex; align-items: center; gap: 7.2px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: .06em;
  color: var(--fg-2); border: 1px solid var(--line);
  background: rgba(255, 255, 255, .028);
  padding: 4.8px 10.4px 4.8px 8px; border-radius: 999px; margin-bottom: 20.8px;
}
.pill .dot {
  width: 4.8px; height: 4.8px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 0 rgba(224, 168, 78, .5);
  animation: pulse 2.9s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 168, 78, .45); }
  70%  { box-shadow: 0 0 0 5.6px rgba(224, 168, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 168, 78, 0); }
}

.h-display .ln { display: block; overflow: hidden; }
.h-display .ln > span { display: block; }

.hero .lede { margin-top: 20.8px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 9.6px; margin-top: 27.2px; }
.hero-meta {
  margin-top: 20.8px; font-family: var(--mono); font-size: 0.64rem;
  color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 6.4px 11.2px;
}
.hero-meta span { white-space: nowrap; }
/* 分隔点跟在前一项后面，换行时不会有一行以「·」开头 */
.hero-meta span:not(:last-child)::after { content: "·"; margin-left: 11.2px; color: var(--line-2); }

/* 首屏出图框 */
.shot { position: relative; width: 100%; max-width: 323.2px; margin-inline: auto 0; }
@media (max-width: 900px) { .shot { margin-inline: auto; } }
.shot-frame {
  position: relative; border-radius: 12.8px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  box-shadow: 0 27.2px 72px -24px rgba(0, 0, 0, .9), 0 1.6px 0 rgba(255, 255, 255, .03) inset;
}
/* height:auto 是必须的 —— <img> 的 height 属性是表现型提示，
   不显式覆盖它，aspect-ratio 会被忽略，图会被竖向拉满、横向裁掉。 */
.shot-frame img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.shot-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 72px rgba(0, 0, 0, .34);
}
.shot-cap {
  display: flex; justify-content: space-between; gap: 11.2px; flex-wrap: wrap;
  margin-top: 11.2px; font-family: var(--mono); font-size: 0.64rem; color: var(--fg-3);
}
.shot-cap b { color: var(--fg-2); font-weight: 500; }

/* ---------------------------------------------------------- 数据条 */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { padding: 24px 20.8px 24px 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .v {
  font-family: var(--mono); font-size: clamp(1.28rem, 2.72vw, 1.72rem);
  font-weight: 500; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat .v .u { font-size: .5em; color: var(--fg-3); margin-left: 2.4px; letter-spacing: 0; }
.stat .k { margin-top: 7.2px; font-size: 0.656rem; color: var(--fg-3); line-height: 1.55; }
@media (max-width: 780px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 17.6px 14.4px 17.6px 0; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* ---------------------------------------------------------- 要点列 */
.cols { display: grid; gap: clamp(22.4px, 3.2vw, 43.2px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.col { padding-top: 19.2px; border-top: 1px solid var(--line); }
.col .idx { font-family: var(--mono); font-size: 0.64rem; color: var(--accent); letter-spacing: .1em; }
.col h3 { margin: 9.6px 0 9.6px; font-size: 0.864rem; }
.col p { color: var(--fg-2); font-size: 0.748rem; line-height: 1.78; margin: 0; }
.col p + p { margin-top: .8em; }
.col .note {
  margin-top: 11.2px; font-family: var(--mono); font-size: 0.64rem; color: var(--fg-3);
  padding-left: 8.8px; border-left: 1px solid var(--line-2); line-height: 1.7;
}

/* ---------------------------------------------------------- 表 */
.tbl-scroll { overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
.tbl-scroll::-webkit-scrollbar { height: 4px; }
.tbl-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2.4px; }

table.t { width: 100%; border-collapse: collapse; font-size: 0.72rem; min-width: 512px; }
table.t th, table.t td { text-align: left; padding: 12px 14.4px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 400; padding-bottom: 9.6px; white-space: nowrap;
}
table.t thead tr { border-bottom: 1px solid var(--line-2); }
table.t tbody tr { transition: background .28s var(--ease); }
table.t tbody tr:hover { background: rgba(255, 255, 255, .022); }
table.t td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; }
table.t td small { display: block; color: var(--fg-3); font-size: .8em; font-family: var(--sans); margin-top: 1.6px; }
table.t td:first-child { color: var(--fg); font-weight: 560; }

.badge {
  display: inline-flex; align-items: center; gap: 4.8px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: .04em;
  padding: 2.4px 7.2px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2);
  white-space: nowrap;
}
.badge::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.badge.ok   { color: var(--ok);   border-color: rgba(116, 198, 157, .3); background: rgba(116, 198, 157, .07); }
.badge.warn { color: var(--warn); border-color: rgba(217, 164, 65, .3);  background: rgba(217, 164, 65, .07); }
.badge.no   { color: var(--no);   border-color: rgba(181, 107, 107, .3); background: rgba(181, 107, 107, .07); }

.tbl-note { margin-top: 17.6px; font-size: 0.672rem; color: var(--fg-3); max-width: 76ch; line-height: 1.8; }

/* 窄屏上表格要横向滑，给一句提示，否则右侧几列没人知道存在 */
.scroll-hint { display: none; margin: 8px 0 0; font-family: var(--mono); font-size: 0.64rem; color: var(--fg-3); }
@media (max-width: 700px) { .scroll-hint { display: block; } }

/* ---------------------------------------------------------- 画廊 */
/* 四张 3:4 竖图排成一行；窄屏两列，手机一列。 */
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11.2px; align-items: start; }
.gal figure { margin: 0; }
@media (max-width: 1000px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12.8px; } }
@media (max-width: 480px) { .gal { grid-template-columns: minmax(0, 1fr); } }

.gal a {
  display: block; position: relative; overflow: hidden; border-radius: 9.6px;
  border: 1px solid var(--line); background: var(--bg-elev); cursor: zoom-in;
}
.gal img {
  width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 4;
  transition: transform 1.05s var(--ease), filter .5s var(--ease);
  filter: saturate(.96);
}
.gal a:hover img { transform: scale(1.045); filter: saturate(1.04); }
.gal a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .48), transparent 42%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.gal a:hover::after { opacity: 1; }
.gal figcaption {
  margin-top: 8px; font-family: var(--mono); font-size: 0.64rem;
  color: var(--fg-3); line-height: 1.6;
}
.gal figcaption b { color: var(--fg-2); font-weight: 500; }

/* 灯箱 */
.lb {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(6, 6, 7, .93); backdrop-filter: blur(6.4px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
  padding: 4vh 4vw; cursor: zoom-out;
}
.lb.on { opacity: 1; visibility: visible; }
.lb img {
  max-width: 100%; max-height: 72vh; border-radius: 8px;
  border: 1px solid var(--line-2); transform: scale(.965);
  transition: transform .45s var(--ease);
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 1);
}
.lb.on img { transform: scale(1); }

/* ---------------------------------------------------------- 卡片 / 下载 */
.card {
  min-width: 0;
  border: 1px solid var(--line); border-radius: 12.8px; background: var(--bg-elev);
  padding: clamp(19.2px, 2.72vw, 28.8px);
}
.dl-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(17.6px, 2.4vw, 32px); align-items: start; }
@media (max-width: 900px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }

.dl-head { display: flex; align-items: baseline; gap: 9.6px; flex-wrap: wrap; }
.dl-head .ver { font-family: var(--mono); font-size: 1.16rem; letter-spacing: -.02em; }
.dl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 19.2px 0; }
.dl-facts div { background: var(--bg-elev); padding: 11.2px 12.8px; }
.dl-facts dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin: 0; }
.dl-facts dd { margin: 4px 0 0; font-family: var(--mono); font-size: 0.696rem; }

.hashline {
  display: flex; align-items: center; gap: 8px; margin-top: 14.4px; min-width: 0;
  font-family: var(--mono); font-size: 0.64rem; color: var(--fg-3);
}
.hashline code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.copy {
  flex: none; border: 1px solid var(--line-2); background: transparent; color: var(--fg-2);
  font-family: var(--mono); font-size: 0.64rem; padding: 3.2px 8px; border-radius: 4.8px; cursor: pointer;
  transition: all .25s var(--ease);
}
.copy:hover { color: var(--fg); border-color: rgba(255, 255, 255, .35); }
.copy.done { color: var(--ok); border-color: rgba(116, 198, 157, .4); }

/* 步骤 */
.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 20.8px 36.8px; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 0.8px;
  font-family: var(--mono); font-size: 0.64rem; color: var(--accent);
  border: 1px solid var(--accent-dim); border-radius: 4.8px; padding: 1.6px 5.6px;
  background: rgba(224, 168, 78, .05);
}
.steps li::after {
  content: ""; position: absolute; left: 12px; top: 24px; bottom: 3.2px; width: 1px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h4 { font-size: 0.792rem; margin-bottom: 4.8px; }
.steps p { color: var(--fg-2); font-size: 0.728rem; margin: 0; line-height: 1.75; }

/* ---------------------------------------------------------- 更新日志 */
.log { border-top: 1px solid var(--line); }
.log-item {
  display: grid; grid-template-columns: 134.4px minmax(0, 1fr); gap: clamp(12.8px, 2.4vw, 32px);
  padding: 22.4px 0; border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) { .log-item { grid-template-columns: minmax(0, 1fr); gap: 9.6px; } }
.log-when { font-family: var(--mono); font-size: 0.64rem; color: var(--fg-3); line-height: 1.7; }
.log-when b { display: block; color: var(--fg); font-weight: 500; font-size: 0.76rem; letter-spacing: -.01em; }
.log-body h4 { font-size: 0.8rem; margin-bottom: 6.4px; }
.log-body p { color: var(--fg-2); font-size: 0.736rem; margin: 0; line-height: 1.8; }
.log-body p + p { margin-top: .7em; }
.log-body ul { margin: 8px 0 0; padding-left: 14.4px; color: var(--fg-2); font-size: 0.736rem; line-height: 1.8; }
.log-body li { margin-bottom: 4px; }
.log-body li::marker { color: var(--fg-3); }

/* ---------------------------------------------------------- 群 */
.qq {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(19.2px, 3.2vw, 38.4px);
  align-items: center;
}
@media (max-width: 760px) { .qq { grid-template-columns: minmax(0, 1fr); } }
.qq-num {
  font-family: var(--mono); font-size: clamp(1.52rem, 4.16vw, 2.32rem); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4.8px;
}

/* ---------------------------------------------------------- 页脚 */
.ftr { border-top: 1px solid var(--line); padding-block: 38.4px 48px; font-size: 0.68rem; color: var(--fg-3); position: relative; z-index: 1; }
.ftr-grid { display: flex; flex-wrap: wrap; gap: 20.8px 35.2px; align-items: flex-start; justify-content: space-between; }
.ftr a { color: var(--fg-2); transition: color .25s var(--ease); }
.ftr a:hover { color: var(--fg); }
.ftr-links { display: flex; flex-wrap: wrap; gap: 17.6px; }
.ftr .fine { margin-top: 20.8px; font-size: 0.64rem; line-height: 1.85; max-width: 74ch; color: var(--fg-3); }

/* ---------------------------------------------------------- 文档页 */
.doc-shell { display: grid; grid-template-columns: 171.2px minmax(0, 1fr); gap: clamp(22.4px, 4vw, 57.6px); align-items: start; }
@media (max-width: 940px) { .doc-shell { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }

.toc { position: sticky; top: 76.8px; }
.toc-t { font-family: var(--mono); font-size: 0.64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 11.2px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a {
  display: block; padding: 4.8px 0 4.8px 12px; margin-left: -1px;
  border-left: 1px solid transparent; font-size: 0.676rem; color: var(--fg-3);
  transition: color .28s var(--ease), border-color .28s var(--ease);
  line-height: 1.5;
}
.toc li a:hover { color: var(--fg-2); }
.toc li a.on { color: var(--fg); border-left-color: var(--accent); }

.doc { max-width: 74ch; }
.doc h2 {
  font-size: clamp(1.056rem, 1.92vw, 1.296rem); letter-spacing: -.025em;
  margin: 54.4px 0 14.4px; padding-top: 4.8px; scroll-margin-top: 73.6px;
}
.doc h2:first-of-type { margin-top: 0; }
.doc h2 .hn { font-family: var(--mono); font-size: .62em; color: var(--accent); margin-right: 9.6px; font-weight: 400; }
.doc h3 { font-size: 0.816rem; margin: 27.2px 0 8px; }
.doc p, .doc li { color: var(--fg-2); font-size: 0.764rem; line-height: 1.85; }
.doc strong { color: var(--fg); font-weight: 600; }
.doc ul, .doc ol { padding-left: 16px; margin: 0 0 1.05em; }
.doc li { margin-bottom: 5.6px; }
.doc li::marker { color: var(--fg-3); }
.doc code {
  font-family: var(--mono); font-size: .86em; background: rgba(255, 255, 255, .055);
  border: 1px solid var(--line); border-radius: 4px; padding: 0.8px 4.8px; color: var(--fg);
  word-break: break-all;
}
.doc pre {
  font-family: var(--mono); font-size: 0.656rem; background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: 8px; padding: 12.8px 14.4px;
  overflow-x: auto; line-height: 1.7; color: var(--fg-2); margin: 0 0 1.2em;
}
.doc pre code { background: none; border: 0; padding: 0; font-size: 1em; }
.doc a.lnk { color: var(--fg); border-bottom: 1px solid var(--line-2); transition: border-color .25s var(--ease); }
.doc a.lnk:hover { border-bottom-color: var(--accent); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 35.2px 0; }
.doc table.t { min-width: 0; }

.callout {
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0; background: rgba(224, 168, 78, .035);
  padding: 12.8px 16px; margin: 0 0 1.2em;
}
.callout p { margin: 0; font-size: 0.728rem; color: var(--fg-2); }
.callout p + p { margin-top: .7em; }
.callout .lbl { font-family: var(--mono); font-size: 0.64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 5.6px; }

.page-head { padding-top: clamp(83.2px, 10.4vw, 118.4px); padding-bottom: clamp(27.2px, 4vw, 46.4px); border-bottom: 1px solid var(--line); }
.page-head .h-sec + .lede { margin-top: 16px; }

/* ---------------------------------------------------------- 入场动画 */
[data-rv] {
  opacity: 0;
  transform: translateY(12.8px);
  transition: opacity .82s var(--ease), transform .82s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-rv].in { opacity: 1; transform: none; }

[data-rv="mask"] > span { display: block; transform: translateY(105%); transition: transform .96s var(--ease); transition-delay: var(--d, 0ms); }
[data-rv="mask"] { opacity: 1; transform: none; }
[data-rv="mask"].in > span { transform: none; }

[data-rv="art"] { opacity: 0; transform: translateY(17.6px) scale(.985); transition: opacity 1.05s var(--ease), transform 1.05s var(--ease); }
[data-rv="art"].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-rv], [data-rv="mask"] > span { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------- 移动端导航 */
@media (max-width: 820px) {
  .nav {
    position: fixed; inset: 49.6px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(11, 11, 12, .97);
    backdrop-filter: blur(12.8px); -webkit-backdrop-filter: blur(12.8px);
    border-bottom: 1px solid var(--line);
    padding: 4.8px var(--gut) 16px;
    transform: translateY(-6.4px); opacity: 0; visibility: hidden;
    transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  }
  .nav.open { opacity: 1; transform: none; visibility: visible; }
  .nav a { padding: 10.4px 0; border-bottom: 1px solid var(--line); font-size: 0.768rem; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 12.8px; justify-content: center; }
  .nav-toggle {
    display: flex; margin-left: auto; width: 27.2px; height: 27.2px;
    align-items: center; justify-content: center;
    background: none; border: 1px solid var(--line); border-radius: 6.4px; cursor: pointer;
  }
  .nav-toggle i { display: block; width: 12px; height: 1px; background: var(--fg); position: relative; transition: background .2s; }
  .nav-toggle i::before, .nav-toggle i::after {
    content: ""; position: absolute; left: 0; width: 12px; height: 1px; background: var(--fg);
    transition: transform .34s var(--ease);
  }
  .nav-toggle i::before { top: -4px; }
  .nav-toggle i::after  { top: 4px; }
  .nav-toggle.x i { background: transparent; }
  .nav-toggle.x i::before { transform: translateY(4px) rotate(45deg); }
  .nav-toggle.x i::after  { transform: translateY(-4px) rotate(-45deg); }
}
@media (min-width: 821px) { .nav .btn-nav { display: inline-flex; } }