/* ==========================================================================
   6688体育 · 全站共享样式 /assets/site.css
   设计语言：夜场轨迹 —— 炭黑底 + 电光蓝 + 荧光青 + 信号橙
   版式骨架：非对称 12 栏编辑部网格 / 编号章节 / 切角面板 / 等宽数据语法
   ========================================================================== */

/* ---------- 01 · reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd, dt { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
main { display: block; }
[hidden] { display: none !important; }

::selection { background: var(--cyan); color: #04120F; }

/* ---------- 02 · design tokens ---------- */
:root {
  /* 矿物与夜灯色板 */
  --ink: #0B0E13;
  --rock: #161B22;
  --line: #3A424E;
  --blue: #1557FF;
  --cyan: #2BF5D8;
  --orange: #FF6A1F;
  --moss: #6E8F5A;
  --clay: #C4703F;
  --paper: #F2EFE7;
  --mist: #9AA6B2;

  --bg: var(--ink);
  --panel: var(--rock);
  --text: var(--paper);
  --text-dim: var(--mist);
  --text-invert: #1B2028;

  --font-display: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-body: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "SimSun", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  --shell: 1360px;
  --gutter: clamp(18px, 4vw, 34px);
  --gap: clamp(20px, 2.2vw, 30px);
  --cut: 18px;
  --header-h: 66px;
  --ease: cubic-bezier(.2, .72, .2, 1);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.14;
  color: var(--paper);
}

/* ---------- 03 · 版面骨架 ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 920px; }
.shell--wide { max-width: 1560px; }

.section { padding-block: clamp(52px, 7.5vw, 108px); }
.section--tight { padding-block: clamp(30px, 4.5vw, 58px); }
.section--flush { padding-block: 0; }

.stack { display: grid; gap: 16px; align-content: start; }
.stack--lg { gap: clamp(24px, 3vw, 40px); }
.stack--sm { gap: 10px; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }

.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.lift-up { margin-top: -34px; }
.lift-down { margin-top: 38px; }

/* ---------- 04 · 文字与索引组件 ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--cyan);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--cyan);
  flex: 0 0 24px;
}

.lede {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.7;
  color: var(--paper);
  max-width: 46ch;
}

.prose {
  max-width: 72ch;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.78;
}
.prose + .prose { margin-top: 18px; }

.rule {
  position: relative;
  height: 1px;
  background: var(--line);
}
.rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: min(320px, 42%);
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), rgba(43, 245, 216, 0));
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 编号章节 */
.chapter {
  position: relative;
  padding-top: 30px;
}
.chapter__num {
  position: absolute;
  top: -14px;
  left: -.06em;
  z-index: 0;
  font-family: var(--font-serif);
  font-size: clamp(56px, 7.6vw, 100px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--blue);
  opacity: .24;
  pointer-events: none;
  user-select: none;
}
.chapter__title {
  position: relative;
  z-index: 1;
  font-size: clamp(28px, 3.4vw, 36px);
}
.chapter__lead {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--mist);
}
[data-chapter] { scroll-margin-top: 110px; }

/* 数据语法 */
.datum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  font-family: var(--font-mono);
}
.datum::before {
  content: "";
  flex: 0 0 24px;
  width: 24px;
  height: 2px;
  background: var(--cyan);
  transform: translateY(-.42em);
}
.datum__value {
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
}
.datum__unit { font-size: 15px; color: var(--cyan); }
.datum__label {
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--mist);
}

/* ---------- 05 · 切角面板 ---------- */
.cut,
.card {
  --cut: 18px;
  --cut-bg: var(--panel);
  position: relative;
  isolation: isolate;
  background: var(--line);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: transform .16s var(--ease), background-color .16s var(--ease);
}
.cut::before,
.card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background-image:
    repeating-linear-gradient(102deg, rgba(242, 239, 231, .03) 0 1px, transparent 1px 9px),
    var(--cut-bg);
  clip-path: polygon(0 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% 100%, 0 100%);
}
.cut--alt,
.card--alt {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cut--alt::before,
.card--alt::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px));
}
.cut--paper,
.card--paper {
  --cut-bg: var(--paper);
  color: var(--text-invert);
}
.cut--paper .chapter__title,
.card--paper .chapter__title { color: #0B0E13; }
.cut--blue,
.card--blue { --cut-bg: rgba(21, 87, 255, .16); }

.card {
  padding: 24px 26px;
}
.card:hover { transform: translateY(-3px); }

/* ---------- 06 · 按钮 ---------- */
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-line: var(--line);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--orange); --btn-fg: #0B0E13; --btn-line: var(--orange); }
.btn--primary:hover { --btn-bg: #FF8047; --btn-line: #FF8047; }
.btn--blue { --btn-bg: var(--blue); --btn-fg: #FFFFFF; --btn-line: var(--blue); }
.btn--blue:hover { --btn-bg: #3A73FF; --btn-line: #3A73FF; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); --btn-line: var(--line); }
.btn--ghost:hover { --btn-line: var(--cyan); --btn-fg: var(--cyan); }
.btn--sm {
  padding: 9px 15px;
  font-size: 13px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.btn--block { width: 100%; }

/* ---------- 07 · 标签与筛选 ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--mist);
}
.tag--moss { color: #B7CEA6; border-color: rgba(110, 143, 90, .7); background: rgba(110, 143, 90, .14); }
.tag--clay { color: #E8A57B; border-color: rgba(196, 112, 63, .7); background: rgba(196, 112, 63, .16); }
.tag--cyan { color: #04120F; background: var(--cyan); border-color: var(--cyan); }
.tag--orange { color: #0B0E13; background: var(--orange); border-color: var(--orange); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.chip:hover { color: var(--paper); border-color: var(--cyan); }
.chip[aria-pressed="true"] {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #04120F;
}

/* ---------- 08 · 可展开内容组 ---------- */
.acc { display: grid; gap: 2px; }
.acc__item {
  border: 1px solid var(--line);
  background: rgba(22, 27, 34, .62);
}
.acc__btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  text-align: left;
  border-left: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--paper);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.acc__btn:hover { background: rgba(242, 239, 231, .04); }
.acc__mark {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--cyan);
  transition: transform .16s var(--ease);
}
.acc__item[data-open] .acc__btn {
  border-left-color: var(--orange);
  background: rgba(255, 106, 31, .07);
}
.acc__item[data-open] .acc__mark { transform: rotate(45deg); }
.acc__panel {
  display: none;
  padding: 0 20px 20px;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--mist);
}
.acc__item[data-open] .acc__panel { display: block; }

/* ---------- 09 · 复制按钮 ---------- */
.copybtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.copybtn:hover { color: var(--paper); border-color: var(--cyan); }
.copybtn.is-done { background: var(--cyan); border-color: var(--cyan); color: #04120F; }
.copybtn.is-fail { background: var(--orange); border-color: var(--orange); color: #0B0E13; }

/* ---------- 10 · 面包屑 ---------- */
.crumbs { padding-top: 20px; }
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--mist);
}
.crumbs__link {
  color: var(--mist);
  border-bottom: 1px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.crumbs__link:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.crumbs__sep { color: var(--line); }
.crumbs__current { color: var(--paper); }

/* ---------- 11 · 右侧章节索引 ---------- */
.rail { display: none; }
@media (min-width: 1300px) {
  .rail {
    display: block;
    position: fixed;
    right: max(18px, calc((100vw - var(--shell)) / 2 - 62px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 52px;
  }
  .rail__list { display: grid; gap: 14px; justify-items: end; }
  .rail__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-right: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--line);
    transition: color .16s var(--ease);
  }
  .rail__link::before {
    content: "";
    width: 12px;
    height: 1px;
    background: currentColor;
    transition: width .2s var(--ease);
  }
  .rail__link:hover { color: var(--mist); }
  .rail__link[aria-current="true"] { color: var(--cyan); }
  .rail__link[aria-current="true"]::before { width: 26px; }
  .rail__track {
    position: absolute;
    right: 2px;
    top: -14px;
    bottom: -14px;
    width: 2px;
    background: rgba(58, 66, 78, .55);
  }
  .rail__fill {
    position: absolute;
    inset: 0;
    background: var(--cyan);
    transform: scaleY(0);
    transform-origin: top center;
  }
}

/* ---------- 12 · 图片容器基础规则 ---------- */
.ph {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-image:
    repeating-linear-gradient(102deg, rgba(43, 245, 216, .06) 0 1px, transparent 1px 12px),
    radial-gradient(120% 90% at 12% 8%, rgba(21, 87, 255, .30), rgba(21, 87, 255, 0) 62%),
    linear-gradient(160deg, #12171F, #0B0E13 72%);
  box-shadow: inset 0 0 0 1px rgba(43, 245, 216, .35);
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.06);
}
.ph::after {
  content: attr(data-cap);
  position: absolute;
  left: 16px;
  bottom: 14px;
  max-width: calc(100% - 32px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--cyan);
}
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x4 { aspect-ratio: 3 / 4; }
.ph--1x1 { aspect-ratio: 1 / 1; }
.ph--cut { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.ph--slant { clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); }
.ph--light {
  background-image:
    repeating-linear-gradient(102deg, rgba(58, 66, 78, .08) 0 1px, transparent 1px 12px),
    linear-gradient(160deg, #FFFFFF, var(--paper));
  box-shadow: inset 0 0 0 1px rgba(58, 66, 78, .35);
}
.ph--light::after { color: var(--clay); }

/* ---------- 13 · 进入动效 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(-24px, 5px, 0);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 14 · 跳转链接与命令栏头部 ---------- */
.skip-link {
  position: fixed;
  top: -72px;
  left: 16px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  background: var(--cyan);
  color: #04120F;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

.cmd {
  position: sticky;
  top: 0;
  z-index: 120;
  background-color: var(--ink);
  background-image: repeating-linear-gradient(102deg, rgba(242, 239, 231, .03) 0 1px, transparent 1px 9px);
  border-bottom: 1px solid var(--line);
}
.cmd::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0 18%, var(--cyan) 18% 30%, rgba(58, 66, 78, .9) 30% 100%);
}
.cmd__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* 品牌 */
.brand {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 6px 0;
}
.brand__glyph {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.04em;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 66% 100%, 0 100%);
  box-shadow: inset -1px -1px 0 rgba(43, 245, 216, .6);
}
.brand__text { display: grid; line-height: 1.1; }
.brand__mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--paper);
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  color: var(--mist);
}

/* 命令栏 */
.cmdnav { flex: 1 1 auto; min-width: 0; }
.cmdnav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.cmdnav__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--mist);
  transition: color .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease);
}
.cmdnav__idx {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--line);
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.cmdnav__label { white-space: nowrap; }
.cmdnav__link:hover { color: var(--paper); background-color: rgba(242, 239, 231, .05); }
.cmdnav__link:hover .cmdnav__idx { color: var(--cyan); }

.cmdnav__link--key {
  padding: 9px 13px;
  font-size: 15px;
  color: var(--paper);
  border-color: rgba(21, 87, 255, .78);
  background-color: rgba(21, 87, 255, .15);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.cmdnav__link--key .cmdnav__idx { color: var(--cyan); }
.cmdnav__link--key::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 1px;
  height: 2px;
  background: var(--cyan);
}

.cmdnav__link[aria-current="page"] {
  color: var(--paper);
  background-color: rgba(242, 239, 231, .07);
}
.cmdnav__link[aria-current="page"] .cmdnav__idx {
  padding: 1px 5px;
  background: var(--blue);
  color: #FFFFFF;
  letter-spacing: .08em;
}
.cmdnav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 2px;
  background: var(--cyan);
}

.cmdnav__aside { display: none; }

/* 状态与行动区 */
.cmd__meta {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.status {
  display: none;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--mist);
  white-space: nowrap;
}
.status__dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(43, 245, 216, .16);
  animation: trace-pulse 2.6s var(--ease) infinite;
}
@keyframes trace-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(43, 245, 216, .16); }
  50% { box-shadow: 0 0 0 8px rgba(43, 245, 216, 0); }
}
@media (min-width: 1280px) {
  .status { display: inline-flex; }
}

/* 移动端折叠按钮 */
.navtoggle {
  position: relative;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 9px 13px;
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.navtoggle:hover { border-color: var(--cyan); color: var(--cyan); }
.navtoggle__bars { display: grid; gap: 4px; width: 18px; }
.navtoggle__bars i {
  display: block;
  height: 2px;
  background: var(--cyan);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.navtoggle__bars i:nth-child(2) { width: 12px; justify-self: end; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(6px) rotate(12deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-12deg); }

/* ---------- 15 · 移动端命令栏抽屉 ---------- */
@media (max-width: 1080px) {
  .navtoggle { display: inline-flex; }
  .cmd__meta { display: none; }
  .cmdnav {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: block;
    padding: calc(var(--header-h) + 26px) var(--gutter) 40px;
    overflow-y: auto;
    background-color: rgba(11, 14, 19, .985);
    background-image: repeating-linear-gradient(102deg, rgba(242, 239, 231, .03) 0 1px, transparent 1px 9px);
    border-right: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s linear;
  }
  .cmdnav[data-open] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .cmdnav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .cmdnav__link {
    padding: 17px 6px;
    border-bottom: 1px solid rgba(58, 66, 78, .55);
    font-size: 18px;
    justify-content: flex-start;
  }
  .cmdnav__link--key {
    padding: 17px 14px;
    font-size: 19px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  }
  .cmdnav__idx { font-size: 12px; }
  .cmdnav__aside { display: grid; gap: 14px; margin-top: 30px; }
  .cmdnav__status {
    padding-left: 16px;
    border-left: 2px solid var(--cyan);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--mist);
  }
  .cmdnav__actions { display: grid; gap: 10px; }
}

/* ---------- 16 · 页脚（米白信息带） ---------- */
.foot {
  position: relative;
  margin-top: clamp(72px, 9vw, 140px);
  background-color: var(--paper);
  color: #39424E;
  background-image:
    repeating-linear-gradient(0deg, rgba(58, 66, 78, .11) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(58, 66, 78, .11) 0 1px, transparent 1px 38px);
  border-top: 1px solid var(--line);
}
.foot::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--orange) 0 10%, var(--blue) 10% 44%, var(--cyan) 44% 56%, rgba(58, 66, 78, .35) 56% 100%);
}
.foot__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(28px, 3.5vw, 44px);
  display: grid;
  gap: clamp(28px, 3.5vw, 44px);
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
  align-items: start;
}
.foot__lead { display: grid; gap: 14px; align-content: start; max-width: 34ch; }
.foot__brand {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -.02em;
  color: #0B0E13;
}
.foot__summary { font-size: 15px; line-height: 1.78; color: #3F4954; }
.foot__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: #5C6672;
}
.foot__badge-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}
.foot__col { display: grid; gap: 14px; align-content: start; }
.foot__coltitle {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #0B0E13;
}
.foot__colidx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--clay);
}
.foot__list { display: grid; gap: 10px; }
.foot__link {
  display: inline-block;
  font-size: 15px;
  color: #3F4954;
  border-bottom: 1px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.foot__link:hover { color: var(--blue); border-bottom-color: var(--blue); }
.foot__contact { display: grid; gap: 14px; align-content: start; }
.foot__list--contact { gap: 8px; }
.foot__list--contact li { display: flex; gap: 10px; align-items: baseline; }
.foot__key {
  flex: 0 0 34px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: #5C6672;
}
.foot__val {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: #39424E;
  word-break: break-word;
}
.foot__note {
  padding-left: 12px;
  border-left: 2px solid var(--clay);
  font-size: 12.5px;
  line-height: 1.72;
  color: #5C6672;
}
.foot__legal {
  border-top: 1px solid rgba(58, 66, 78, .28);
  background-color: rgba(242, 239, 231, .72);
}
.foot__legalinner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: #5C6672;
}
.foot__copy { color: #39424E; }

/* ---------- 17 · 响应式 ---------- */
@media (max-width: 1080px) {
  .g12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col-3, .col-4 { grid-column: span 3; }
  .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 { grid-column: span 6; }
  .start-2, .start-3, .start-4 { grid-column-start: auto; }
  .lift-up { margin-top: 0; }
  .lift-down { margin-top: 0; }
}
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 { grid-column: span 6; }
  .chapter__num { font-size: clamp(52px, 18vw, 76px); }
  .btn { width: 100%; }
  .btn--sm { width: auto; }
}
@media (max-width: 1080px) {
  .foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__lead { grid-column: span 2; max-width: none; }
  .foot__contact { grid-column: span 2; }
}
@media (max-width: 600px) {
  .foot__inner { grid-template-columns: minmax(0, 1fr); }
  .foot__lead, .foot__contact { grid-column: span 1; }
}

/* ---------- 18 · 无障碍与动效偏好 ---------- */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }
  .status__dot { animation: none; }
}