/* ═══════════════════════════════════════════════════════════════
   Nuphus 官网 v2.3 · pages.css —— 内容模块层
   site.css 只承担共享设计系统（token/基础/顶栏/按钮/FAQ/页脚）；
   各页面用到的具体模块都在这里，按模块分区，页面对号入座：
     · hero 首屏（含视频位 video-slot）
     · 首页能力卡 cap-grid
     · 能力详情页 cap-hero / cap-main / cap-nav / cap-cta
     · 证据组件 steps / viz-table / cap-media / diagram
     · 墨色纸带 band-paper 内的 os-list 变体
     · 双端 duo / phone / latency
     · 下载页 page-head / dl-card / spec / tbl / mirror / update-flow
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════ 首屏 · Stage ═══════════ */

.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -26%;
  width: 72vw;
  height: 72vw;
  max-width: 940px;
  max-height: 940px;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.05), transparent 64%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  /* 三块布局：左（文案） / 右（视频） / 下（链路 + 能力，跨两列） */
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "copy visual"
    "bottom bottom"
    "hint hint";
  /* 列间距保持原尺度；行间距压紧，下版块与上排同属一个版面 */
  column-gap: var(--space-12);
  row-gap: clamp(40px, 6vh, 72px);
  align-content: start;
  min-height: calc(100svh - var(--hdr-h));
  padding-left: max(var(--space-6), calc((100vw - var(--maxw)) / 2 + var(--space-6)));
  padding-right: max(var(--space-6), calc((100vw - var(--maxw)) / 2 + var(--space-6)));
  padding-top: clamp(40px, 8vh, 80px);
  padding-bottom: var(--space-8);
}
.hero-copy {
  position: relative;
  z-index: 2;
  grid-area: copy;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
}
.eyebrow {
  display: block;
  margin-bottom: var(--space-6);
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.hero h1 {
  font-size: var(--fz-hero);
  line-height: 1.14;
  letter-spacing: normal;
  font-weight: 700;
}
.hero h1 .dim {
  color: var(--fg-4);
}
.hero h1 .ink {
  color: var(--fg-1);
}
.hero-sub {
  max-width: 30em;
  margin-top: var(--space-6);
  font-size: var(--fz-xl);
  line-height: 1.7;
  color: var(--fg-3);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.npm {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 6px 0 var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-3);
  background: var(--surface-1);
  font: 400 var(--fz-sm) / 1 var(--font-mono);
  color: var(--fg-3);
}
.npm code {
  font-family: inherit;
  color: var(--fg-2);
  white-space: nowrap;
}
.npm .icon-btn {
  width: 26px;
  height: 26px;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-6);
  font: 400 var(--fz-xs) / 1.7 var(--font-mono);
  color: var(--fg-meta);
}
.hero-meta span + span::before {
  content: "·";
  margin: 0 8px;
  color: var(--fg-5);
}
/* 版本号：与两侧元信息同字号，但用常规体区分（等宽数字对齐） */
.hero-ver {
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}

/* 下版块 · 执行链路 + 本机能力清单（跨满两列，两列等高对齐） */
.hero-bottom {
  grid-area: bottom;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  column-gap: var(--space-12);
  align-items: stretch;
}
.hero-spec {
  grid-column: 1;
}
/* 右列撑满行高，清单均分剩余空间——底边与左列执行链路天然对齐 */
.hero-facts {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  padding-top: 0;
}
.hero-facts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-2);
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.hero-facts-head span:last-child {
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg-4);
}
/* 能力清单行式排布：撑满右列高度，行均分——与左列执行链路底边对齐 */
.hero-facts-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-facts-list li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: 14px var(--space-3);
  border-bottom: 1px solid var(--line-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.hero-facts-list li:last-child {
  border-bottom: 0;
}
.hero-facts-list li:hover {
  background: var(--surface-1);
}
.hero-fact-n {
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--fg-5);
  font-variant-numeric: tabular-nums;
}
.hero-fact-l {
  font-size: var(--fz-lg);
  line-height: 1.4;
  color: var(--fg-2);
}
.hero-fact-note {
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--fg-4);
  white-space: nowrap;
}
/* 首屏收束句：独立第三行，跨满两列，位于 .hero-bottom 之外 */
.hero-hint {
  grid-area: hint;
  margin: 0;
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--fg-5);
}

/* 下版块 · 执行链路（与右侧能力清单同起一行） */
.hero-spec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-2);
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.hero-spec-head span:last-child {
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg-4);
}
.hero-spec-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.hero-spec-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: 10px var(--space-3);
  border-radius: var(--radius-2);
  transition: background var(--dur-fast) var(--ease-out);
}
.hero-spec-list li:hover {
  background: var(--surface-1);
}
.hero-spec-no {
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--fg-5);
  font-variant-numeric: tabular-nums;
}
.hero-spec-t {
  font-size: var(--fz-lg);
  line-height: 1.4;
  color: var(--fg-2);
}
.hero-spec-note {
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--fg-4);
  white-space: nowrap;
}

/* 右版块 · 视频位（只放视频：不裁切、不通栏、随容器自适应宽度） */
.hero-visual {
  position: relative;
  grid-area: visual;
  align-self: center;
  justify-self: stretch;
  margin: 0;
  z-index: 1;
  border: 1px solid var(--line-3);
  border-radius: var(--radius-5);
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
}
/* 图片/视频保持原生比例：contain 不裁切，容器高度由内容决定 */
.video-slot img,
.video-slot video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* 瑙嗛鏀惧ぇ鎸夐挳锛氳棰戝尯鍙充笅瑙掞紝hover 娴幇 */
.video-expand {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--fg-2);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.video-slot:hover .video-expand,
.video-expand:focus-visible {
  opacity: 1;
}
.video-expand:hover {
  color: var(--fg-1);
  transform: scale(1.06);
}
.video-expand svg {
  width: 16px;
  height: 16px;
}

/* 瑙嗛娴獥锛氬師濮嬪昂瀵稿眳涓紝閬僵鍏抽棴 */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.video-lightbox[hidden] {
  display: none;
}
.video-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 14, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-lightbox-panel {
  position: relative;
  margin: 0;
  max-width: min(1158px, 92vw);
  max-height: 88vh;
  border: 1px solid var(--line-3);
  border-radius: var(--radius-4);
  overflow: hidden;
  background: var(--surface-1);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
}
.video-lightbox-panel video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88vh;
}
.video-lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(20, 20, 26, 0.7);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.video-lightbox-close:hover {
  background: rgba(20, 20, 26, 0.95);
}

/* ═══════════ 首页 · 能力卡 ═══════════ */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.cap-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-4);
  background: var(--surface-0);
  transition: transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}
.cap-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
.cap-card h3 {
  font-size: var(--fz-h4);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--fg-1);
  line-height: 1.2;
}
.cap-no {
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--fg-5);
}
.cap-card > p {
  font-size: var(--fz-md);
  line-height: 1.65;
  color: var(--fg-3);
}
.cap-facts {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-1);
}
.cap-facts li {
  padding: 6px 0;
  font: 400 var(--fz-xs) / 1.6 var(--font-mono);
  color: var(--fg-meta);
}
.cap-facts li + li {
  border-top: 1px solid var(--line-1);
}
.cap-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fz-md);
  font-weight: 500;
  color: var(--fg-1);
}
.cap-go::after {
  content: "→";
  font: 400 var(--fz-md) / 1 var(--font-mono);
  color: var(--fg-meta);
  transition: transform var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.cap-card:hover .cap-go::after {
  transform: translateX(3px);
  color: var(--fg-1);
}

/* 进入视口一次性揭示（承载卡片分组，无循环、无视差） */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.js-anim [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
.cap-grid .cap-card:nth-child(2),
.cap-grid .cap-card:nth-child(3) {
  transition-delay: 0.06s;
}
.cap-grid .cap-card:nth-child(4),
.cap-grid .cap-card:nth-child(5) {
  transition-delay: 0.12s;
}
.cap-grid .cap-card:nth-child(6) {
  transition-delay: 0.18s;
}

/* ═══════════ 能力页 · hero ═══════════ */

.cap-hero {
  padding: clamp(64px, 10vh, 120px) 0 clamp(40px, 6vh, 72px);
  border-bottom: 1px solid var(--line-1);
}
.cap-hero .eyebrow {
  margin-bottom: var(--space-5);
}
.cap-hero h1 {
  font-size: var(--fz-display);
  line-height: 1.16;
  letter-spacing: normal;
}
.cap-lede {
  max-width: 34em;
  margin-top: var(--space-5);
  font-size: var(--fz-xl);
  line-height: 1.75;
  color: var(--fg-3);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.chips span {
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-1);
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  color: var(--fg-2);
  white-space: nowrap;
}

/* ═══════════ 能力页 · 正文 ═══════════ */

.cap-main {
  padding: clamp(48px, 7vh, 88px) 0 clamp(40px, 6vh, 64px);
}
.cap-grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.cap-blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 64px);
}
.cap-block h2 {
  font-size: var(--fz-h4);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--fg-1);
}
.cap-block > h2 + p {
  margin-top: var(--space-3);
  font-size: var(--fz-lg);
  color: var(--fg-3);
}
.cap-block ul:not(.steps) {
  margin-top: var(--space-4);
  border-top: 1px solid var(--line-1);
}
.cap-block ul:not(.steps) li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-1);
  font-size: var(--fz-lg);
  color: var(--fg-2);
}
.cap-block ul:not(.steps) li small {
  display: block;
  margin-top: 3px;
  font: 400 var(--fz-xs) / 1.6 var(--font-mono);
  color: var(--fg-meta);
}
.cap-side {
  position: sticky;
  top: calc(var(--hdr-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.cap-side-card {
  padding: var(--space-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-4);
  background: var(--surface-1);
}
.cap-side-card h3 {
  font-size: var(--fz-h4);
  font-weight: 700;
  letter-spacing: normal;
}
.cap-side-card > p {
  margin-top: var(--space-3);
  font-size: var(--fz-md);
  line-height: 1.7;
  color: var(--fg-3);
}
.cap-side-card ul:not(.steps) {
  margin-top: var(--space-3);
}
.cap-side-card ul:not(.steps) li {
  padding: 9px 0;
  border-top: 1px solid var(--line-1);
  font-size: var(--fz-md);
  color: var(--fg-2);
}
.cap-side-card .note {
  margin-top: var(--space-3);
  font: 400 var(--fz-xs) / 1.7 var(--font-mono);
  color: var(--fg-meta);
}

/* 能力内证据图 */
.cap-media {
  margin-top: var(--space-6);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-4);
  overflow: hidden;
  background: var(--surface-1);
}
.cap-media img,
.cap-media svg {
  display: block;
  width: 100%;
  height: auto;
}
.cap-media figcaption {
  padding: 10px 16px;
  border-top: 1px solid var(--line-1);
  font: 400 var(--fz-xs) / 1.6 var(--font-mono);
  color: var(--fg-meta);
}

/* 能力页导航 + CTA */
.cap-peer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: clamp(48px, 7vh, 88px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-1);
}
.cap-peer a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 42%;
}
.cap-peer .peer-k {
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--fg-meta);
}
.cap-peer .peer-t {
  font-size: var(--fz-lg);
  font-weight: 600;
  color: var(--fg-1);
  transition: color var(--dur-fast) var(--ease-out);
}
.cap-peer a:hover .peer-t {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cap-cta {
  margin-top: var(--space-10);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-4);
  background: var(--surface-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.cap-cta strong {
  display: block;
  font-size: var(--fz-h4);
  color: var(--fg-1);
}
.cap-cta p {
  margin-top: 4px;
  max-width: 36em;
  font-size: var(--fz-md);
  color: var(--fg-3);
}

/* ═══════════ 证据 · 执行列表 ═══════════ */

.steps {
  margin-top: var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line-1);
}
.steps li {
  display: grid;
  grid-template-columns: 40px 8px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 9px;
  padding: 6px var(--space-3);
  font: 400 var(--fz-sm) / 1.45 var(--font-mono);
  color: var(--fg-3);
}
.steps .t {
  color: var(--fg-meta);
  font-size: var(--fz-xs);
  text-align: right;
}
.steps .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-3);
  align-self: center;
}
.steps .n {
  color: var(--fg-2);
}
.steps .n em {
  font-style: normal;
  color: var(--fg-5);
}
.steps .v {
  font-size: var(--fz-xs);
  color: var(--fg-meta);
  white-space: nowrap;
}
.steps li.done .dot {
  background: var(--success);
}
.steps li.branch {
  padding-left: 17px;
  border-left: 1px solid var(--line-1);
  margin-left: 44px;
  grid-template-columns: 8px minmax(0, 1fr) auto;
}
.steps li.branch .t {
  display: none;
}
.js-anim .steps li {
  transition: none;
}

.exec-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding: 8px var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-2);
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  color: var(--fg-meta);
}
.exec-foot .ok {
  color: var(--success);
}

/* 对比表（工作流：探索 / 编译 / 执行） */
.viz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fz-lg);
  margin-top: var(--space-4);
}
.viz-table th {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line-2);
  font: 400 var(--fz-xs) / 1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-5);
  text-align: left;
}
.viz-table th:last-child,
.viz-table td:last-child {
  text-align: right;
}
.viz-table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-1);
  color: var(--fg-2);
  vertical-align: baseline;
}
.viz-table tr:last-child td {
  border-bottom: 0;
}
.viz-table .num {
  font-family: var(--font-mono);
  font-size: var(--fz-md);
  color: var(--fg-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.viz-table .zero {
  color: var(--success);
}

/* 因果链图（桌面执行 Leader / 双端链路） */
.diagram text {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--fg-meta);
}
.diagram .lane {
  stroke: var(--line-3);
  stroke-width: 1;
  fill: none;
}
.diagram .node {
  fill: var(--surface-1);
  stroke: var(--accent);
  stroke-width: 1.25;
}
.diagram .node-dim {
  fill: var(--surface-1);
  stroke: var(--line-3);
  stroke-width: 1;
}
.diagram .lbl {
  fill: var(--fg-2);
  font-size: 10.5px;
}
.diagram .box {
  fill: var(--surface-0);
  stroke: var(--line-3);
  stroke-width: 1;
}
.diagram .dash {
  stroke-dasharray: 3 4;
}
.relay-dot {
  fill: var(--accent);
}

/* ═══════════ 墨纸带 · home 下载区 ═══════════ */

.band-paper .os-row .name {
  color: var(--band-fg);
}
.band-paper .os-row .name small {
  color: var(--band-fg-2);
}
.band-paper .os-row {
  border-bottom-color: var(--band-line);
}
.band-paper .os-row:hover {
  background: color-mix(in srgb, var(--band-fg) 4%, var(--band-bg));
}
.band-paper .os-row .go {
  color: var(--band-fg);
}
.band-paper .install-note {
  color: var(--band-fg-2);
}
.band-paper .install-note code {
  color: var(--band-fg);
}
.band-paper .link-quiet {
  color: var(--band-fg);
  border-bottom-color: var(--band-line);
}
.band-paper .link-quiet:hover {
  border-bottom-color: var(--band-accent);
}
.band-paper .sec-head p {
  color: var(--band-fg-2);
}

/* ═══════════ 双端 ═══════════ */

.duo {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.phone {
  position: relative;
  border: 1px solid var(--line-3);
  border-radius: 30px;
  padding: 9px;
  background: var(--surface-1);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.16);
}
.phone img {
  border-radius: 22px;
  width: 100%;
  aspect-ratio: 9 / 16.5;
  object-fit: cover;
  object-position: top center;
}
.phone::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px var(--line-2);
  pointer-events: none;
}
.duo-list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line-1);
}
.duo-list li:first-child {
  border-top: 0;
  padding-top: 0;
}
.duo-list .k {
  font: 400 var(--fz-xs) / 1.8 var(--font-mono);
  color: var(--fg-meta);
  letter-spacing: 0.05em;
}
.duo-list strong {
  display: block;
  font-weight: 700;
  font-size: var(--fz-2xl);
  letter-spacing: normal;
  color: var(--fg-1);
  line-height: 1.2;
}
.duo-list p {
  margin-top: 6px;
  font-size: var(--fz-lg);
  color: var(--fg-3);
}
.latency {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-2);
  font: 400 var(--fz-sm) / 1.4 var(--font-mono);
  color: var(--fg-meta);
}
.latency b {
  font-weight: 400;
  color: var(--fg-1);
}

/* ═══════════ 下载页 ═══════════ */

.page-head {
  padding: clamp(56px, 9vh, 104px) 0 clamp(32px, 5vh, 56px);
}
.page-head h1 {
  font-size: var(--fz-display);
  letter-spacing: normal;
  line-height: 1.16;
}
.page-head p {
  max-width: 36em;
  margin-top: var(--space-5);
  font-size: var(--fz-xl);
  line-height: 1.7;
  color: var(--fg-3);
}
.dl-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
  gap: var(--space-10);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-5);
  background: var(--surface-1);
}
.dl-card h2 {
  margin-top: var(--space-3);
  font-size: var(--fz-h2);
  letter-spacing: normal;
}
.dl-os {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.dl-os .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}
.dl-card .dl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.dl-alt {
  margin-top: var(--space-4);
  font-size: var(--fz-md);
  color: var(--fg-3);
}
.dl-alt a {
  color: var(--fg-1);
  border-bottom: 1px solid var(--line-3);
}
.dl-alt a:hover {
  border-bottom-color: var(--accent);
}
.spec {
  margin: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0;
}
.spec dt {
  padding: 10px 0;
  border-top: 1px solid var(--line-1);
  font: 400 var(--fz-xs) / 1.5 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-5);
}
.spec dd {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line-1);
  font: 400 var(--fz-xs) / 1.5 var(--font-mono);
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.spec dt:first-of-type,
.spec dd:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.copy-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}
.copy-row .icon-btn {
  width: 22px;
  height: 22px;
  flex: none;
}
.section-block {
  padding: clamp(44px, 6vh, 72px) 0;
  border-top: 1px solid var(--line-1);
}
.section-block > h2 {
  font-size: var(--fz-3xl);
  letter-spacing: normal;
}
.section-block > .sub {
  max-width: 40em;
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--fz-lg);
  color: var(--fg-3);
}
.table-scroll {
  margin-inline: calc(-1 * var(--row-pad));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > table {
  min-width: 560px;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
}
.tbl th {
  padding: 0 var(--space-3) 12px;
  border-bottom: 1px solid var(--line-2);
  font: 400 var(--fz-xs) / 1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-5);
  text-align: left;
}
.tbl td {
  padding: 16px var(--space-3);
  border-bottom: 1px solid var(--line-1);
  vertical-align: top;
  color: var(--fg-3);
  font-size: var(--fz-md);
}
.tbl th:first-child,
.tbl td:first-child {
  width: 46px;
}
.tbl th:last-child,
.tbl td:last-child {
  width: 96px;
  text-align: right;
}
.tbl tbody tr {
  box-shadow: inset 2px 0 0 transparent;
  transition: background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.tbl tbody tr:hover {
  background: var(--surface-1);
  box-shadow: inset 2px 0 0 var(--accent);
}
.tbl .idx {
  font: 400 var(--fz-xs) / 1.8 var(--font-mono);
  color: var(--fg-5);
}
.tbl .cap {
  color: var(--fg-1);
  font-size: var(--fz-lg);
  font-weight: 500;
  white-space: nowrap;
}
.tbl td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fz-sm);
  color: var(--fg-meta);
  white-space: nowrap;
  text-align: right;
}
.tbl .os {
  color: var(--fg-1);
  font-size: var(--fz-lg);
  white-space: nowrap;
}
.tbl .os small {
  display: block;
  margin-top: 3px;
  font: 400 var(--fz-xs) / 1.4 var(--font-mono);
  color: var(--fg-meta);
}
/* 骞冲彴琛ㄥ唴姣忚鐨?SHA-256锛堟湰鍦板寲鍚庨殢鍖呭彂甯冿級 */
.tbl .sha-row {
  display: block;
  margin-top: 4px;
  font: 400 11px / 1.4 var(--font-mono);
  color: var(--fg-4);
  word-break: break-all;
}
.file-name {
  font: 400 var(--fz-sm) / 1.5 var(--font-mono);
  color: var(--fg-2);
}
.mirror-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.mirror {
  padding: var(--space-5);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-3);
  background: var(--surface-1);
}
.mirror h3 {
  font-size: var(--fz-lg);
  font-weight: 700;
  letter-spacing: normal;
}
.mirror p {
  margin-top: 6px;
  font-size: var(--fz-md);
  color: var(--fg-3);
}
.mirror .mono {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fz-xs);
  color: var(--fg-meta);
}
.mirror .tag {
  margin-top: var(--space-3);
}
.setup-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.setup-flow li {
  padding: clamp(18px, 2.2vw, 28px) clamp(16px, 2vw, 24px);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-4);
  background: var(--surface-0);
}
.setup-flow b {
  display: block;
  margin-bottom: 10px;
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  color: var(--fg-5);
}
.setup-flow strong {
  display: block;
  font-size: var(--fz-xl);
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: normal;
}
.setup-flow p {
  margin-top: 8px;
  font-size: var(--fz-md);
  color: var(--fg-3);
  line-height: 1.7;
}
.setup-flow .mono {
  font-size: var(--fz-xs);
}
.update-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.update-flow li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-2);
}
.update-flow b {
  display: block;
  margin-bottom: 8px;
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  color: var(--fg-5);
}
.update-flow strong {
  font-weight: 500;
  color: var(--fg-1);
  font-size: var(--fz-xl);
}
.update-flow p {
  margin-top: 5px;
  font-size: var(--fz-md);
  color: var(--fg-3);
}
.callout {
  margin-top: var(--space-8);
  padding: var(--space-5);
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-2);
  background: var(--surface-1);
}
.callout p {
  font-size: var(--fz-md);
  color: var(--fg-2);
}
.callout p + p {
  margin-top: 6px;
  color: var(--fg-3);
}

/* ═══════════ 展示级行高修正 ═══════════ */

.s-name,
.os-row .name,
.duo-list strong,
.cap-hero h1 {
  line-height: 1.2;
}

/* ═══════════ 授权 · 四道防线（能力页引用） ═══════════ */

.safety-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.safety-grid div {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-2);
}
.safety-grid b {
  display: block;
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  color: var(--fg-meta);
  margin-bottom: 10px;
}
.safety-grid strong {
  display: block;
  font-size: var(--fz-lg);
  font-weight: 600;
  color: var(--fg-1);
}
.safety-grid p {
  margin-top: 5px;
  font-size: var(--fz-md);
  color: var(--fg-3);
}

/* ═══════════ 原则卡片（00 · PRINCIPLES） ═══════════ */

.pr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.pr-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-2);
  background: #131417;
  transition: transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}
.pr-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.pr-no {
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.38);
}
.pr-card h3 {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}
.pr-card p {
  margin-top: auto;
  font-size: var(--fz-md);
  color: rgba(255, 255, 255, 0.58);
}
.js-anim .pr-grid .pr-card:nth-child(2) {
  transition-delay: 0.06s;
}
.js-anim .pr-grid .pr-card:nth-child(3) {
  transition-delay: 0.12s;
}

/* ═══════════ Support · 模型提供商左右滚动轮播 ═══════════ */

.support {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line-1);
}
.sup-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.sup-head b {
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-meta);
  flex: none;
}
.sup-head strong {
  font-size: var(--fz-lg);
  font-weight: 600;
  color: var(--fg-1);
  flex: none;
}
.sup-head span {
  font-size: var(--fz-sm);
  color: var(--fg-3);
}
.sup-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sup-track {
  display: flex;
  width: max-content;
}
.sup-group {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-right: 56px;
  animation: sup-scroll 30s linear infinite;
}
.sup-row:hover .sup-group {
  animation-play-state: paused;
}
@keyframes sup-scroll {
  to { transform: translateX(-50%); }
}
.sup-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  white-space: nowrap;
  color: var(--fg-4);
  transition: color var(--dur-fast) var(--ease-out);
}
.sup-item:hover {
  color: var(--sup-brand, var(--fg-1));
}
.sup-item svg {
  width: 26px;
  height: 26px;
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .sup-group {
    animation: none;
  }
  .sup-row {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sup-item svg {
    width: 22px;
    height: 22px;
  }
}

/* ═══════════ Contributors · 03 之下开发者贡献轮播 ═══════════ */

.contrib .sup-item {
  font-size: 14px;
}
.contrib .sup-item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-1);
  background: #dcdcdf;
  display: block;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.contrib .sup-item:hover img {
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .contrib .sup-item img {
    width: 22px;
    height: 22px;
  }
}

/* ═══════════ MCP 页 · 配置块 ═══════════ */

.cfg {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-2);
  background: var(--surface-1);
}
.cfg figcaption {
  font: 400 var(--fz-xs) / 1 var(--font-mono);
  color: var(--fg-meta);
  margin-bottom: var(--space-2);
}
.cfg pre {
  margin: 0;
  font: 400 12.5px / 1.7 var(--font-mono);
  color: var(--fg-2);
  overflow-x: auto;
}
.cfg pre code {
  font: inherit;
}

/* ═══════════ 响应式（页面模块断点） ═══════════ */

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "copy"
      "visual"
      "bottom"
      "hint";
    row-gap: var(--space-10);
    min-height: 0;
    padding-right: max(var(--space-6), calc((100vw - var(--maxw)) / 2 + var(--space-6)));
  }
  .hero-copy {
    padding-top: 0;
  }
  /* 单列时下版块自身回到一列 */
  .hero-bottom {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-8);
  }
  .hero-spec,
  .hero-facts {
    grid-column: 1;
  }
  .hero-spec-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-visual {
    margin: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  }
  .cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cap-grid-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .cap-side {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .cap-side-card {
    flex: 1 1 280px;
  }
}

@media (max-width: 900px) {
  .safety-grid,
  .setup-flow,
  .mirror-grid,
  .update-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pr-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .duo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }
  .phone {
    max-width: 300px;
  }
  .cap-peer a {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: var(--space-10);
  }
  .hero-actions > .btn,
  .hero-actions > .npm {
    width: 100%;
    justify-content: center;
  }
  .npm code {
    font-size: 11px;
  }
  .cap-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .steps li {
    grid-template-columns: 34px 8px minmax(0, 1fr);
  }
  .steps .v {
    display: none;
  }
  .safety-grid,
  .setup-flow,
  .mirror-grid,
  .update-flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .cap-cta {
    padding: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .relay-dot {
    display: none;
  }
  .js-anim [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}