/* 由 scripts/build-static.mjs 从 fonts.css、tokens.css、base.css、theme.css、type.css、effects.css 生成，别手改。

   静态页用法：把本文件与 fonts/ 目录一起拷到站点里（相对路径 ./fonts/ 不变），<link rel="stylesheet" href="…/static.css">。

   中文标题字体 DE Title CN 由各站自己裁子集、另写 @font-face（见 README）。 */

/* 西文字体：Mona Sans（正文）与 Hubot Sans（标题），GitHub 出品，SIL OFL 1.1（github.com/github/mona-sans、hubot-sans），可变字重。
   文件在本目录 fonts/，由各工程的 Vite 打内容哈希（/assets/* 一年不可变缓存，换字必须换名，哈希自动做到）。
   中文标题字体 DE Title CN（寒蝉圆黑体 Bold 子集）按各工程页面用字裁，不在这里声明：见 README 的“中文标题字体”。 */
@font-face {
  font-family: "Mona Sans";
  src: url("/assets/mona-sans-vf-D1zn5yWR.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Hubot Sans";
  src: url("/assets/hubot-sans-vf-DLGyhQVu.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
/* 西文回退度量：字体到之前先用本机 Arial，按平均字宽与上下沿缩放到和 Hubot 700/108、Mona 400/600 一样大，
   换字时不跳行。数值由 fontTools 按常用英文样句实测（Hubot 700/108 比 Arial Bold 宽 7.3%） */
@font-face {
  font-family: "Hubot Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 500 900;
  size-adjust: 107.3%;
  ascent-override: 89.9%;
  descent-override: 21.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Mona Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 200 500;
  size-adjust: 100.4%;
  ascent-override: 108.6%;
  descent-override: 31.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Mona Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 900;
  size-adjust: 96.6%;
  ascent-override: 112.8%;
  descent-override: 33.1%;
  line-gap-override: 0%;
}

/* ---------- 语义 token：三个作用域 ----------
   :root 亮色；[data-theme=dark] 暗色（页面 head 里的同步脚本在首帧前写到 <html>，见 README“亮暗主题”）；
   .stage 永远深色的舞台段与舞台小岛。组件只用 bg-page、text-fg 这类语义类（静态页用 var(--page) 这些变量）。 */
:root, [data-theme=light] {
  color-scheme: light;
  --page: #f7f6f2; --page-2: #efede6;          /* 页面底色：.stage 不覆盖，接缝用它 */
  --bg: var(--page); --bg-2: var(--page-2);
  --surface: #ffffff; --surface-2: #f3f2ee;
  --fg: #1e2127; --fg-2: #4a4f59; --fg-3: #6b707a;
  --line: #e2dfd6; --grid: rgb(30 33 39 / .05);
  --accent: #05768a; --accent-2: #8a6508;      /* 做字用的青与黄：浅底上压暗到 4.9:1 */
  --tint-cyan: #d9f6fb; --tint-sun: #fdf3cf;
  --inverse: #1e2127; --on-inverse: #ffffff;   /* 反相小块：原则条、终端按钮 */
  --shadow: rgb(30 33 39 / .35); --ribbon-shadow: rgb(30 33 39 / .22); --ribbon-contact: rgb(30 33 39 / .18);
  --stage: #0d0f13; --stage-deep: #08090c;
  --lh-body: 1.9;
}
[data-theme=dark] {
  color-scheme: dark;
  --page: #111317; --page-2: #15181d;
  --surface: #1a1d23; --surface-2: #20242b;
  --fg: #f2f1ec; --fg-2: #b4b8c0; --fg-3: #8a8f99;
  --line: #2a2e37; --grid: rgb(255 255 255 / .04);
  --accent: #0acde7; --accent-2: #f3b81b;
  --tint-cyan: rgb(10 205 231 / .14); --tint-sun: rgb(243 184 27 / .14);
  --inverse: #262a32; --on-inverse: #f2f1ec;   /* 暗色下反相块不做成刺眼的白块 */
  --shadow: rgb(0 0 0 / .6); --ribbon-shadow: rgb(0 0 0 / .55); --ribbon-contact: transparent;
}
.stage {
  color-scheme: dark;
  --bg: var(--stage); --bg-2: #15181e;
  --surface: rgb(255 255 255 / .03); --surface-2: rgb(255 255 255 / .06);
  --fg: #ffffff; --fg-2: rgb(255 255 255 / .7); --fg-3: rgb(255 255 255 / .5);
  --line: rgb(255 255 255 / .1); --grid: rgb(255 255 255 / .045);
  --accent: #0acde7; --accent-2: #f3b81b;
  --tint-cyan: rgb(10 205 231 / .14); --tint-sun: rgb(243 184 27 / .14);
  --inverse: #ffffff; --on-inverse: #1e2127;
  --shadow: rgb(0 0 0 / .6);
}
:lang(en) { --lh-body: 1.62; }

/* ---------- 字号档位：手机 390、桌面 1440 两个锚点之间线性过渡（排版类见 type.css） ---------- */
:root {
  --fs-d1: clamp(2.5rem, 1.35rem + 4.6vw, 5rem);
  --fs-d2: clamp(1.875rem, 1.1rem + 3.2vw, 3.5rem);
  --fs-d3: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-small: clamp(0.9375rem, 0.9rem + 0.12vw, 1rem);
  --fs-eyebrow: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
  --fs-stat: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  /* 中西文之间自动留 1/8 字宽（文案里手打的空格照旧，不会叠加） */
  text-autospace: normal;
}
/* 英文句子长一倍，标题整体小一档：D1 36/72、D2 28/50 */
:lang(en) {
  --fs-d1: clamp(2.25rem, 1.2rem + 4.1vw, 4.5rem);
  --fs-d2: clamp(1.75rem, 1.05rem + 2.85vw, 3.125rem);
}

/* 品牌常量、字体栈、缓动（与 Tailwind 主题同名） */
:root {
  --color-paper: #f7f6f2;
  --color-paper-2: #efede6;
  --color-ink: #1e2127;
  --color-ink-2: #4a4f59;
  --color-ink-3: #6b707a;
  --color-stage: #0d0f13;
  --color-stage-2: #15181e;
  --color-stage-deep: #08090c;
  --color-stage-line: #262a32;
  --color-cyan: #0acde7;
  --color-cyan-deep: #05768a;
  --color-cyan-satin: #03b1d3;
  --color-cyan-ink: #07b3d2;
  --color-cyan-soft: #d9f6fb;
  --color-sun: #eec421;
  --color-sun-deep: #b3860b;
  --color-sun-satin: #f3b81b;
  --color-sun-ink: #e6af12;
  --color-sun-soft: #fdf3cf;
  --font-sans: "Mona Sans", "Mona Fallback", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: "Hubot Sans", "Hubot Fallback", "DE Title CN", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-eyebrow: "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes aurora {
    from { background-position: 50% 50%, 50% 50%; }
    to { background-position: 350% 50%, 350% 50%; }
  }
@keyframes scroll {
    to { transform: translate(calc(-50% - 0.5rem)); }
  }
@keyframes shine {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
@keyframes pulse-ring {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
  }

/* ---------- 基础：页面底色、正文字体、选中色、减弱动效 ---------- */
html {
  background: var(--page);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  /* 兜底：一行放不下的长串（没有断点的短语、网址）在边上折行，不顶出去。只在溢出时生效，不改变正常断行和元素宽度 */
  overflow-wrap: break-word;
  /* 预留滚动条槽位：换肤或弹层锁滚动时 html overflow:hidden，Windows 上页面不横跳 */
  scrollbar-gutter: stable;
}
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: #eec421; color: #1e2127; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:where(a, button, summary, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* ---------- 排版体系：字号档位 × 字体 ----------
   用法：大标题字体用 .display（中文寒蝉圆黑 Bold + 西文 Hubot 700 / wdth 108），字号档位另加一个 t-* 类：
     display t-d1  首屏标题 40/80      display t-d2  段落标题 30/56     t-d3  长金句 24.6/44（系统黑体 600，不用 .display）
     display t-h3  卡片标题 20/28      t-lead  导语 17.3/22             t-body  正文 16.2/18       t-small  卡片正文 15/16
     t-eyebrow  眉标 13/15（西文等宽）  display t-stat  数字 40/72（wdth 112，等宽数字；中文单位包 .t-unit，0.45 倍）
   Tailwind 工程经 theme.css 把本文件放进 components 层：同一元素上的工具类（text-[…]、leading-*、en:…）总能覆盖它们。
   字号变量在 tokens.css；字体栈变量 --font-display 等在 theme.css（Tailwind）或 static.css（静态页）。 */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 108%;
  font-feature-settings: "palt";
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-spacing-trim: trim-start;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.t-d1 { font-size: var(--fs-d1); letter-spacing: -0.01em; line-height: 1.15; }
.t-d2 { font-size: var(--fs-d2); letter-spacing: -0.005em; line-height: 1.22; }
.t-d3 {
  font-family: var(--font-sans);
  font-size: var(--fs-d3);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  text-spacing-trim: trim-start;
  text-wrap: pretty;
}
.t-h3 { font-size: var(--fs-h3); letter-spacing: 0; line-height: 1.35; }
.t-lead { font-size: var(--fs-lead); letter-spacing: 0.01em; line-height: 1.7; }
.t-body { font-size: var(--fs-body); letter-spacing: 0.01em; line-height: 1.8; }
.t-small { font-size: var(--fs-small); letter-spacing: 0.01em; line-height: 1.75; }
.t-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
}
.t-stat {
  font-size: var(--fs-stat);
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.t-unit { font-size: 0.45em; letter-spacing: 0; }
@media (min-width: 1024px) {
  .t-d1 { letter-spacing: -0.02em; line-height: 1.12; }
  .t-d2 { letter-spacing: -0.016em; line-height: 1.18; }
  .t-d3 { letter-spacing: -0.01em; line-height: 1.35; }
  .t-lead { line-height: 1.65; }
  .t-body { line-height: 1.75; }
}

/* 英文页：D1 Hubot 640 / wdth 110，D2 620；正文行高 1.62（每行上限 65 个字符由各段的 max-w 控制） */
:lang(en) .display { letter-spacing: -0.02em; line-height: 1.08; }
:lang(en) .t-d1 { font-weight: 640; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1.02; }
:lang(en) .t-d2 { font-weight: 620; letter-spacing: -0.025em; line-height: 1.05; }
:lang(en) .t-d3 { letter-spacing: -0.01em; line-height: 1.25; }
:lang(en) .t-h3 { letter-spacing: -0.01em; line-height: 1.25; }
:lang(en) .t-stat { letter-spacing: -0.03em; line-height: 1; }
:lang(en) .t-lead, :lang(en) .t-body, :lang(en) .t-small { letter-spacing: 0; line-height: 1.62; }
:lang(en) .t-eyebrow { letter-spacing: 0.04em; }

/* 双色标题：文案里 ‖ 之后的半句 55% 透明（React 工程用 website-next 的 Typo 组件解析标记） */
.tone-dim { color: color-mix(in oklab, currentColor 55%, transparent); }
/* ｜ 断点：桌面显示逗号不换行；手机换行并藏掉逗号 */
.bp-br { display: none; }
@media (max-width: 767px) {
  .bp-br { display: inline; }
  .bp-comma { display: none; }
}

/* ---------- 品牌效果：缎面渐变字、细网格 ----------
   动画用 theme.css / static.css 里的 @keyframes shine。只动 background-position，不用滤镜。 */

/* 缎面渐变字：青、黄两条缎带的光泽，慢慢扫过 */
.satin-cyan {
  background: linear-gradient(100deg, #05768a 0%, #03b1d3 22%, #7fe6f4 38%, #0acde7 50%, #03b1d3 66%, #05768a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}
.satin-sun {
  background: linear-gradient(100deg, #b3860b 0%, #f3b81b 22%, #ffe89a 38%, #eec421 50%, #f3b81b 66%, #b3860b 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}
/* 翻转词：浅底用深金缎面（原缎面黄在纸白上只有 1.7:1），深底用原缎面 */
.satin-sun-adaptive {
  background: linear-gradient(100deg, #8a6508 0%, #b3860b 30%, #d99e0c 55%, #b3860b 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 6s linear infinite;
}
:where([data-theme=dark], .stage) .satin-sun-adaptive {
  background-image: linear-gradient(100deg, #b3860b 0%, #f3b81b 22%, #ffe89a 38%, #eec421 50%, #f3b81b 66%, #b3860b 100%);
}
.satin-duo {
  background: linear-gradient(100deg, #05768a 0%, #0acde7 25%, #7fe6f4 40%, #eec421 58%, #ffe89a 70%, #f3b81b 85%, #b3860b 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 7s linear infinite;
}

/* 细网格：线色读 --grid，亮、暗、舞台三处各自成立 */
.grid-bg {
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px;
}