@charset "UTF-8";
/* ============================================================================
   HUSHFUSION · 唯一设计系统(令牌 + 全部组件)
   纪律:圆角 ≤3px · 无装饰性渐变 · 无卡片阴影 · 层级靠背景面 + 1px 发丝线
   改本文件后必须同步提升所有页面 <link>/<script> 的 ?v=N
   ========================================================================== */

:root {
  /* ── 底与面(来自设计板深色底 #080F1A,面按一档亮度递进) ─────────────── */
  --bg:            #080F1A;
  --bg-2:          #0C1626;
  --bg-3:          #111E33;
  --bg-hover:      #16263F;

  /* ── 文字三级(近白 → 设计板灰 → 弱) ───────────────────────────────── */
  --ink:           #F8FAFC;   /* 设计板 #F8FAFC */
  --ink-2:         #9CA3AF;   /* 设计板 #9CA3AF */
  --ink-3:         #7C8CA3;   /* 次级元数据:对 #080F1A 对比度 5.6:1(过 WCAG AA) */

  /* ── 唯一强调色:品牌蓝(设计板 #3B82F6;实测色卡圆心 #276DFD) ─────── */
  --accent:        #3B82F6;
  --accent-hover:  #60A5FA;
  --accent-deep:   #1D4ED8;
  --accent-glow:   rgba(59, 130, 246, .25);

  /* ── 单点语义色:琥珀。只允许出现在「状态点」一处,不做第二强调色 ──── */
  --amber:         #F59E0B;
  --amber-glow:    rgba(245, 158, 11, .22);

  /* ── 海报纸色(实测 #F8EADA),只用于极小面积的反白块 ─────────────── */
  --paper:         #F8EADA;

  /* ── 发丝线 ──────────────────────────────────────────────────────── */
  --hairline:        rgba(248, 250, 252, .12);
  --hairline-strong: rgba(248, 250, 252, .26);

  /* ── 字体三件套:展示/正文用无衬线(品牌是几何无衬线 + 手绘,衬线会打架;
       手绘笔迹的角色由**真实品牌图**承担,不交给字体) ────────────────── */
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC",
          "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --maxw: 1200px;
  --r: 3px;
}

/* ── 可访问性工具类 ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 基础 ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
code { font-family: var(--mono); }
::selection { background: var(--accent); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 只在有 JS 时启用滚动揭示(渐进增强:无 JS 时内容直接可见) */
.reveal { opacity: 1; }
.js .reveal { opacity: 0; transform: translateY(14px);
              transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 版心与区块 ──────────────────────────────────────────────────────── */
section.band {
  padding: clamp(60px, 10vh, 130px) clamp(24px, 6vw, 80px);
  max-width: var(--maxw);
  margin: 0 auto;
}
section.band + section.band { border-top: 1px solid var(--hairline); }
/* 海报置顶:它下面是序厅,两块要读成一个开篇 —— 收紧下边距,别让图与文之间空出一大段 */
#poster { padding-bottom: clamp(28px, 3.5vh, 44px); }
/* ── 通用文字件 ──────────────────────────────────────────────────────── */
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 26px;
}
.kicker--muted { color: var(--ink-3); }
.display {
  font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 300; line-height: 1.08;
}
.lede {
  color: var(--ink-2); font-size: 1.05rem; max-width: 42em; margin-top: 18px;
}
.lede strong, .hl { color: var(--accent); font-weight: 500; }
.mono { font-family: var(--mono); }

.section-head { margin-bottom: clamp(36px, 5vw, 56px); }
.section-head .kicker { margin-bottom: 18px; }
.section-title { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 300; }
.section-lede { color: var(--ink-2); margin-top: 14px; font-size: 1rem; max-width: 42em; }

/* ── 顶栏:三段均布 + 悬浮下拉 ───────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  padding: 16px clamp(24px, 5vw, 64px);
  max-width: 1400px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 26px; height: 26px; }
/* 字标用**文字**渲染,不用图 —— 源图里的字标只有 102×19,
   在 2× 屏上被拉伸过就糊;用本地字体 + 字距能实打实锐利,也顺手省一张素材。 */
.brand-word {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  margin-right: -.3em;          /* 抵消尾字符的字距,视觉左对齐 */
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}

.lang-toggle { display: flex; border: 1px solid var(--hairline); border-radius: 2px; }
.lang-toggle button {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  padding: 5px 9px; color: var(--ink-3); transition: color .18s, background .18s;
}
.lang-toggle button.is-active { color: var(--bg); background: var(--accent); }
/* ── 序厅(替代 hero) ────────────────────────────────────────────────── */
.intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(24px, 3.5vh, 44px) clamp(24px, 6vw, 80px) clamp(28px, 4vh, 52px);
  max-width: 1400px; margin: 0 auto;
}
.intro-inner { position: relative; z-index: 2; max-width: 640px; }
.intro-h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 300;
             letter-spacing: .04em; line-height: 1.05; margin-bottom: 8px; }
.intro-cn { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 300; letter-spacing: .08em; }
.intro-en {
  font-family: var(--mono); font-size: clamp(.72rem, 1.4vw, .86rem);
  letter-spacing: 2px; color: var(--ink-2); margin-top: 12px; text-transform: uppercase;
}
.intro-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.intro-phase {
  font-family: var(--mono); font-size: .42em; letter-spacing: 2px; color: var(--accent);
  border: 1px solid var(--hairline-strong); border-radius: 2px;
  padding: 2px 7px; margin-left: 12px; vertical-align: middle; white-space: nowrap;
}
.intro-path {
  font-family: var(--mono); font-size: clamp(.72rem, 1.3vw, .84rem);
  letter-spacing: 1px; color: var(--ink-3); margin-top: 18px; line-height: 1.9;
}

.quiet-cta {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--hairline-strong); border-radius: var(--r);
  padding: 11px 18px; font-size: .9rem; color: var(--ink);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.quiet-cta:hover { border-color: var(--accent); color: var(--accent);
                   background: color-mix(in srgb, var(--accent) 7%, transparent); }
.quiet-cta--solid {
  background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 400;
}
.quiet-cta--solid:hover { background: var(--accent-hover); border-color: var(--accent-hover);
                          color: var(--bg); }
.quiet-cta span[aria-hidden] { transition: transform .18s ease; }
.quiet-cta:hover span[aria-hidden] { transform: translateX(3px); }

/* ── 滚动展示栏(无缝 marquee) ───────────────────────────────────────── */
.cap-marquee {
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(12px, 2vw, 18px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cap-marquee-track { display: flex; width: max-content; animation: cap-marquee 34s linear infinite; }
.cap-marquee:hover .cap-marquee-track { animation-play-state: paused; }
.cap-marquee-group { display: flex; align-items: center; }
.cap-marquee-item {
  font-size: clamp(1rem, 2.2vw, 1.5rem); color: var(--ink-2); white-space: nowrap;
  padding: 0 clamp(14px, 2vw, 26px);
}
.cap-marquee-item b { font-family: var(--mono); font-size: .7em; color: var(--accent);
                      font-weight: 500; letter-spacing: 2px; margin-right: 10px; }
.cap-marquee-sep { color: var(--ink-3); }
@keyframes cap-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cap-marquee-track { animation: none; }
  .cap-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ── 编辑式序号列表(替代卡片栅格) ──────────────────────────────────── */
.cap-list li {
  display: flex; gap: clamp(20px, 4vw, 48px); align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--hairline);
}
.cap-list li:first-child { border-top: 1px solid var(--hairline); }
.cap-no {
  font-family: var(--mono); font-size: 13px; letter-spacing: 2px;
  color: var(--accent); flex-shrink: 0; width: 2.5em;
}
.cap-body h3 { font-size: clamp(1.15rem, 2.4vw, 1.7rem); margin-bottom: 8px; }
.cap-body p { color: var(--ink-2); max-width: 38em; font-size: .96rem; }
.cap-body .cap-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
  color: var(--ink-3); text-transform: uppercase; display: block; margin-top: 10px;
}

/* ── 双栏图文(主素材在右,文案在左) ───────────────────────────────── */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.split figure { margin: 0; }
.split figure img { width: 100%; height: auto; border: 1px solid var(--hairline);
                    border-radius: var(--r); }
.split figure figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--ink-3);
  margin-top: 10px;
}
.split--flip > figure { order: -1; }

.see-all {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  color: var(--accent); text-transform: uppercase;
}
.see-all:hover { color: var(--accent-hover); }

/* ── 命令板(可复制) ────────────────────────────────────────────────── */
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: clamp(16px, 2.4vw, 26px); }
.cmd-plate {
  border: 1px solid var(--hairline); border-radius: var(--r);
  padding: 22px 24px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cmd-plate:hover { border-color: var(--hairline-strong);
                   box-shadow: 0 0 0 1px var(--accent-glow); }
.cmd-meta { margin-bottom: 16px; }
.cmd-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--hairline-strong); border-radius: 2px;
  padding: 3px 7px; display: inline-block; margin-bottom: 12px;
}
.cmd-title { font-size: 1.05rem; margin-bottom: 6px; }
.cmd-desc { color: var(--ink-2); font-size: .9rem; }
.cmd-line { display: flex; align-items: stretch; gap: 10px; margin-top: 16px; }
.prompt { font-family: var(--mono); color: var(--accent); font-weight: 600; align-self: center; }
.cmd {
  flex: 1 1 auto; min-width: 0; background: rgba(0, 0, 0, .3);
  border: 1px solid var(--hairline); border-radius: 2px; padding: 11px 14px;
  font-size: .86rem; word-break: break-all; color: var(--ink);
}
.copy {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  border: 1px solid var(--hairline-strong); border-radius: 2px; padding: 0 12px;
  color: var(--ink-2); white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s;
}
.copy:hover { color: var(--accent); border-color: var(--accent); }
.copy.is-copied { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }

/* ── 标签框(平台/栏目切换) ─────────────────────────────────────────── */
.tabs-box {
  border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
}
.tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); }
.tab {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0; white-space: nowrap;
  padding: 15px 18px; font-size: 15px; color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.tab-no { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--ink-3); }
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.tab.is-active .tab-no { color: var(--accent); }
.pane { display: none; padding: 24px 26px; }
.pane.is-active { display: block; }

/* 面板里的规格表:dt/dd 两列 —— 让「关心什么 / 难点」可扫读,而不是挤成一坨 prose */
.pane-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.spec-list > div {
  display: grid; grid-template-columns: 148px minmax(0, 1fr);
  gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid var(--hairline);
}
.spec-list > div:first-child { border-top: 1px solid var(--hairline); }
.spec-list dt { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--ink-3); }
.spec-list dd { margin: 0; color: var(--ink-2); font-size: .96rem; max-width: 38em; }
.spec-list dd strong { color: var(--ink); font-weight: 500; }

/* ── 文档表格 ───────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r); }
table.doc { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.doc th {
  text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
  padding: 12px 16px; border-bottom: 1px solid var(--hairline-strong); white-space: nowrap;
}
table.doc td {
  padding: 13px 16px; border-bottom: 1px solid var(--hairline); color: var(--ink-2);
  vertical-align: top;
}
table.doc tr:last-child td { border-bottom: 0; }
table.doc tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
table.doc td:first-child { color: var(--ink); }

/* ── 状态标记(琥珀只出现在这里) ───────────────────────────────────── */
.status { display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px;
          text-transform: uppercase; color: var(--amber); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                  background: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); }

/* ── 海报「展品」块(纸色反白,小块使用) ──────────────────────────── */
.exhibit { border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; }
.exhibit img { width: 100%; height: auto; }
.exhibit figcaption {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--hairline);
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--ink-3);
}
.paper-chip {
  background: var(--paper); color: #1B2434; border-radius: 2px;
  padding: 14px 18px; display: inline-block; max-width: 100%;
}
.paper-chip img { width: auto; max-height: 92px; }

/* ── 占位块(无素材来源的内容,显式标注而不是编造) ───────────────── */
.placeholder {
  border: 1px dashed var(--hairline-strong); border-radius: var(--r);
  padding: 20px 22px; color: var(--ink-3); font-family: var(--mono);
  font-size: 12px; letter-spacing: .5px; line-height: 1.9;
}
.placeholder b { color: var(--ink-2); font-weight: 400; }



/* ── 页脚 ───────────────────────────────────────────────────────────── */
.foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 28px clamp(24px, 6vw, 80px);
  border-top: 1px solid var(--hairline);
  color: var(--ink-3); font-family: var(--mono); font-size: 12px;
  max-width: var(--maxw); margin: 0 auto;
}

/* ── 响应式:断点只改布局方向 ──────────────────────────────────────── */
@media (max-width: 980px) {
  .intro { grid-template-columns: 1fr; padding-top: clamp(20px, 3vh, 36px); }
  .split { grid-template-columns: 1fr; }
  .split--flip > figure { order: 0; }
}

@media (max-width: 820px) {
  .cap-list li { flex-direction: column; gap: 8px; padding: 22px 0; }
  .cap-no { width: auto; }
}
@media (max-width: 560px) {
  .tab { padding: 12px 10px; font-size: 13px; }
  .cmd-line { flex-wrap: wrap; }
  .copy { padding: 8px 12px; }
}

/* ── 顶栏导航(全宽居中;窄屏折叠为汉堡) ─────────────────────────── */
.mast-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.mast-links { display: flex; justify-content: center; gap: clamp(18px, 3vw, 44px); flex: 1; }
.mast-links a { color: var(--ink-2); font-size: 15px; transition: color .18s ease; }
.mast-links a:hover, .mast-links a.is-active { color: var(--accent); }
.nav-toggle { display: none; }

/* 导航比源稿多一个中文项,中段收一收间距与字号 */
@media (max-width: 1180px) {
  .mast-links { gap: clamp(14px, 2.4vw, 30px); }
  .mast-links a { font-size: 14px; }
}

/* 导航折叠:比内容断点早一档,否则四项 + 中文项在 820–900 之间会横向溢出 */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .mast-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 8px 0 14px;
    background: var(--bg-2); border-bottom: 1px solid var(--hairline);
  }
  .topnav.is-open .mast-links { display: flex; }
  .mast-links a { padding: 12px clamp(24px, 5vw, 64px); font-size: 15px; }
}