/* ==========================================================================
   51扩列 · 设计系统 v1.0
   --------------------------------------------------------------------------
   这是全站唯一的设计 token 来源，也是所有页面共用的基础组件层。
   规则：
     1. 颜色/字号/间距/圆角/阴影/层级/动效，只在这里定义，页面里不要再写死数值
     2. 页面专属样式放 page.css（内容页）或页面内联（首页 / 分享页）
     3. 引入顺序：design-system.css → page.css → 页面内联
   改动任何 token 前，先看 docs/spec/设计规范系统.md 里的取舍说明。
   ========================================================================== */

:root {
  /* ---------- 品牌色（方向 A · 同好会刊）----------
     电光紫做主色，樱粉只做点缀。
     樱粉在纸白底上对比度 2.94，达不到 AA ——
     它不许做文字/链接/按钮底色，只能做填充块与装饰。 */
  --primary: #6C2BD9;        /* 电光紫：主按钮、链接、选中态 */
  --primary-2: #7C42E8;      /* 同色系浅一档，只用于 hover 微提亮 */
  --secondary: #0E9C8F;      /* 辅助青：公域版标识、成功态，小面积纯色 */
  --accent: #FF4D8D;         /* 樱粉：只做点缀底色（星号、角标、装饰块）*/
  --accent-ink: #C81E63;     /* 樱粉的深一档：必须用文字时用它（对比度 5.15）*/

  /* ---------- 文字与线 ---------- */
  --ink: #17141C;            /* 一级文字：标题、正文重点 */
  --ink-2: #6C6474;          /* 二级文字：说明、label */
  --ink-3: #94889F;          /* 三级文字：角标、占位、极弱提示（对比度 3.13）*/
  --line: rgba(23, 20, 28, 0.16);      /* 中性描边：输入框、标签 */
  --line-soft: rgba(23, 20, 28, 0.07); /* 中性分割线：区块之间 */
  --line-card: rgba(23, 20, 28, 0.14); /* 卡片实边：1.5px */

  /* ---------- 背景与面 ---------- */
  --bg: #FBF7F2;             /* 页面底色：纸白 */
  --surface: #FFFFFF;        /* 卡片面 */
  --tint: rgba(108, 43, 217, 0.06);  /* 品牌淡色托底：选中块、提示底 */
  --dot: rgba(23, 20, 28, 0.055);    /* 纸面点阵 */

  /* ---------- 暗色预览舱（只用于工作台画布与分享页）----------
     这两块面积小、无长文，暗底能让卡面颜色跳出来。
     内容页永远不要用这组。 */
  --pod-bg: #17121F;
  --pod-bg-2: #221B33;
  --pod-line: rgba(255, 255, 255, 0.10);
  --pod-ink: #E9ECF8;
  --pod-ink-2: #9AA3BE;

  /* ---------- 语义色（与品牌色分离，不要混用）---------- */
  --ok-bg: #EAF8F5;   --ok-fg: #0A6E64;
  --warn-bg: #FFF3EF; --warn-fg: #A6391D;
  --wait-bg: #FFFBEF; --wait-fg: #8A5A12;
  --risk-3-bg: #FFE9E4; --risk-3-fg: #B33A1E;
  --risk-2-bg: #FFF2DD; --risk-2-fg: #96601A;
  --risk-1-bg: #EAF8F5; --risk-1-fg: #0A6E64;
  --risk-0-bg: #EDF3FF; --risk-0-fg: #2B4C9B;

  /* ---------- 间距刻度（4 的倍数，只许用这几档）---------- */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 18px;
  --sp-7: 22px;
  --sp-8: 28px;
  --sp-9: 36px;

  /* ---------- 字号刻度 ---------- */
  --fs-cap: 11.5px;   /* 说明、角标 */
  --fs-xs: 12.5px;    /* 辅助文字 */
  --fs-sm: 13.5px;    /* 标签、小按钮 */
  --fs-md: 15px;      /* 正文、输入 */
  --fs-lg: 17px;      /* 主按钮 */
  --fs-xl: 20px;      /* 段落标题 */
  --fs-h1: 30px;      /* 页面主标题 */

  /* ---------- 行高 ---------- */
  --lh-tight: 1.2;
  --lh-body: 1.6;

  /* ---------- 圆角（差异化，不要一律 8px）---------- */
  --r-btn: 10px;
  --r-input: 12px;
  --r-card: 20px;
  --r-modal: 28px;
  --r-pill: 999px;
  --r-swatch: 10px;

  /* ---------- 阴影 ----------
     卡片走「偏离式硬投影」：边界清楚，像印刷品的贴纸层。
     柔光只留给图片、toast 这类需要浮起来的东西。 */
  --shadow-card: 0 6px 24px rgba(30, 27, 75, 0.07);
  --shadow-hover: 0 14px 40px rgba(30, 27, 75, 0.12);
  --shadow-btn: 0 6px 18px rgba(108, 43, 217, 0.26);
  --shadow-sm: 0 2px 8px rgba(30, 27, 75, 0.05);
  --shadow-hard: 4px 4px 0 rgba(23, 20, 28, 0.07);
  --shadow-hard-sm: 3px 3px 0 rgba(23, 20, 28, 0.06);
  --shadow-hard-btn: 3px 3px 0 rgba(23, 20, 28, 0.82);

  /* ---------- 层级 ---------- */
  --z-sticky: 20;
  --z-topbar: 50;
  --z-sheet: 200;
  --z-toast: 999;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.16s;
  --dur: 0.22s;

  /* ---------- 容器宽度（两种页面形态）---------- */
  --w-wide: 1180px;   /* 首页工作台 */
  --w-read: 860px;    /* 内容页阅读栏 */
  --w-bar: var(--w-wide); /* 顶部导航条宽度，内容页在 page.css 里覆盖成 var(--w-read) */

  /* ---------- 字体 ---------- */
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Segoe UI", "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  --font-display: Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif;
  --font-geo: "Futura", "Century Gothic", "Trebuchet MS", "PingFang SC", sans-serif;
}

/* ==========================================================================
   基础重置
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  /* 13px 点阵：纸面的颗粒感。极淡，只在空白处看得出 */
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 13px 13px;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

/* 键盘焦点统一：只在键盘操作时出现，鼠标点击不出现 */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--sp-1);
}

/* 滚动条：细、品牌色、悬停加深 */
* { scrollbar-width: thin; scrollbar-color: rgba(108, 43, 217, 0.22) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(108, 43, 217, 0.16);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(108, 43, 217, 0.32);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ==========================================================================
   顶部导航条（全站一致：sticky + 轻毛玻璃）
   ========================================================================== */
.site-topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  background: rgba(251, 247, 242, 0.9);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.site-topbar .inner {
  max-width: var(--w-bar); margin: 0 auto;
  padding: var(--sp-4) 20px;
  display: flex; align-items: center; gap: var(--sp-2);
}
.site-topbar .brand-logo {
  display: flex; align-items: center; gap: 9px; margin-right: auto;
  text-decoration: none;
}
.site-topbar .brand-logo .mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--primary); color: #fff;
  font-family: var(--font-geo); font-weight: 800; font-size: 15px; letter-spacing: 0.3px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 2px 2px 0 rgba(23, 20, 28, 0.8);
}
.site-topbar .brand-logo .word {
  font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.2px;
}
.site-topbar .navlinks { display: flex; gap: var(--sp-1); }
.site-topbar .navlinks a {
  color: var(--ink-2); text-decoration: none;
  font-size: 14px; font-weight: 600;
  padding: var(--sp-3) 13px; border-radius: var(--r-btn);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-topbar .navlinks a:hover,
.site-topbar .navlinks a.active { color: var(--primary); background: var(--tint); }

/* ==========================================================================
   页脚（全站一致：导航 / 备案 / 联系方式 / 小字）
   ========================================================================== */
.site-footer {
  position: relative; z-index: 1;
  text-align: center;
  padding: 30px 20px 44px;
  color: var(--ink-2); font-size: 13px;
  border-top: 1px solid var(--line-soft);
  margin-top: 20px;
}
.site-footer nav {
  margin-bottom: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) 20px; justify-content: center;
}
.site-footer nav a { color: var(--primary); text-decoration: none; font-weight: 600; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer .foot-note { margin-top: var(--sp-3); font-size: 12px; color: var(--ink-3); line-height: 1.7; }
.site-footer .icp { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-2); }
.site-footer .icp a { color: var(--ink-2); text-decoration: none; }
.site-footer .icp a:hover { color: var(--primary); text-decoration: underline; }
.site-footer .contact-line { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-2); }
.site-footer .contact-line a { color: var(--primary); text-decoration: none; font-weight: 600; }
.site-footer .contact-line a:hover { text-decoration: underline; }

/* ==========================================================================
   按钮契约
   类名历史上分成三种（cta-btn / btn-primary / btn-export），
   这里统一交互行为：高度、圆角、focus 环、按下反馈、禁用态。
   页面只负责给它们上色。
   ========================================================================== */
.cta-btn, .btn-primary, .btn-export, .sheet-foot button, .wgen-ctl button {
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--r-btn);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.cta-btn:active, .btn-primary:active, .btn-export:active { transform: translateY(0) scale(0.995); }
.cta-btn:focus-visible, .btn-primary:focus-visible, .btn-export:focus-visible,
.sheet-foot button:focus-visible, .wgen-ctl button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
button:disabled, .is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   阅读容器（内容页）—— 刊物页
   白卡 + 1.5px 实边 + 硬投影；H2 带自动章节号与左侧竖线。
   竖线用「负 margin + 等量 padding」推到正文左边界之外，
   正文的左右对齐完全不变，只是标题多了一根线。
   ========================================================================== */
.content {
  position: relative; z-index: 1;
  max-width: var(--w-read); margin: 0 auto;
  padding: 30px 20px 20px;
}
.doc-card {
  background: var(--surface);
  border: 1.5px solid var(--line-card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-hard);
  padding: var(--sp-9) 40px;
  counter-reset: sec;
}
.doc-card h1 {
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  margin-bottom: var(--sp-6); letter-spacing: -1.1px;
  font-weight: 800; color: var(--ink);
}
.doc-card h2 {
  font-size: 21px; color: var(--ink);
  margin: var(--sp-8) 0 var(--sp-4); font-weight: 800; letter-spacing: -0.3px;
  counter-increment: sec;
  margin-left: -16px; padding-left: 16px;
  border-left: 4px solid var(--primary);
  border-radius: 2px;
}
.doc-card h2::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--font-geo);
  font-size: 0.56em; font-weight: 800;
  color: var(--primary); letter-spacing: 0.08em;
  margin-right: 9px; vertical-align: 0.22em;
}
.doc-card h3 { font-size: 16px; color: var(--ink); margin: var(--sp-6) 0 var(--sp-3); }
.doc-card p { color: var(--ink-2); margin-bottom: var(--sp-4); font-size: 15.5px; }
.doc-card .lead { font-size: 16px; color: var(--ink); }
.doc-card ul, .doc-card ol {
  color: var(--ink-2); font-size: 15.5px;
  padding-left: 22px; margin-bottom: var(--sp-5);
}
.doc-card li { margin-bottom: var(--sp-3); }
.doc-card a { color: var(--primary); text-decoration: none; font-weight: 600; }
.doc-card a:hover { text-decoration: underline; }
.doc-card strong { color: var(--ink); }
.doc-card .crumb { font-size: 13px; color: var(--ink-2); margin-bottom: var(--sp-5); }
.doc-card .crumb a { color: var(--ink-2); }
.doc-card .crumb a:hover { color: var(--primary); text-decoration: none; }
.doc-card .crumb span { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed; left: 50%; bottom: 40px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff;
  padding: var(--sp-4) 24px; border-radius: var(--r-btn);
  font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(30, 27, 75, 0.18);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: var(--z-toast);
  max-width: calc(100vw - 40px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #D6303F; }

/* ==========================================================================
   单线图标集
   --------------------------------------------------------------------------
   替代原来散落在 21 个页面里的 emoji（69 次、27 种符号）。
   emoji 的字体由系统决定，风格不可控，也无法跟随文字色。
   这里用 mask + currentColor：图标颜色自动等于所在文字的颜色，
   暗色底上不用另写一套。

   用法：<i class="i i-copy" aria-hidden="true"></i>
   尺寸跟随 font-size（1em），用 vertical-align 与中文基线对齐。
   ========================================================================== */
.i {
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  font-style: normal;
  vertical-align: -0.13em;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
  flex: 0 0 auto;
}

.i-spark { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.9l2.4 6.2 6.2 2.4-6.2 2.4L12 20.1l-2.4-6.2L3.4 11.5l6.2-2.4z'/%3E%3C/svg%3E"); }
.i-palette { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 100 18h1.4a1.9 1.9 0 001.4-3.2 1.9 1.9 0 011.4-3.2H19a2 2 0 002-2A9 9 0 0012 3z'/%3E%3Cpath d='M8.2 9.6h.01M7.6 13.6h.01M11.4 6.8h.01'/%3E%3C/svg%3E"); }
.i-chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10.2H9.4L4 20V5.5z'/%3E%3C/svg%3E"); }
.i-copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 8.7h11v11.6h-11z'/%3E%3Cpath d='M5.3 16.2V3.7h11'/%3E%3C/svg%3E"); }
.i-edit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-4.4L16 4.8l3.2 3.2L8.4 18.8 4 20z'/%3E%3Cpath d='M14.4 6.4l3.2 3.2'/%3E%3C/svg%3E"); }
.i-download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11'/%3E%3Cpath d='M7.8 10.6L12 14.8l4.2-4.2'/%3E%3Cpath d='M4.5 20h15'/%3E%3C/svg%3E"); }
.i-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.2 13.8a3.6 3.6 0 005.1 0l3-3a3.6 3.6 0 00-5.1-5.1l-1 1'/%3E%3Cpath d='M13.8 10.2a3.6 3.6 0 00-5.1 0l-3 3a3.6 3.6 0 005.1 5.1l1-1'/%3E%3C/svg%3E"); }
.i-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.6 10.8h12.8v9.4H5.6z'/%3E%3Cpath d='M8.8 10.8V7.9a3.2 3.2 0 016.4 0v2.9'/%3E%3C/svg%3E"); }
.i-bolt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.6L5.2 13.4h5.6l-1.2 8 8.2-10.8h-5.6l1.2-8z'/%3E%3C/svg%3E"); }
.i-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.9'/%3E%3Cpath d='M4.6 20.2a7.4 7.4 0 0114.8 0'/%3E%3C/svg%3E"); }
.i-image { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14.2' rx='1.6'/%3E%3Cpath d='M4 16l4.8-4.8 3.6 3.6 2.8-2.8L20 17'/%3E%3Cpath d='M8.6 9.2h.01'/%3E%3C/svg%3E"); }
.i-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.4h4.2L9.6 6h4.8l1.8 2.4h4.2v11H3.6z'/%3E%3Ccircle cx='12' cy='13.6' r='3.2'/%3E%3C/svg%3E"); }
.i-book { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.4h8.6A3 3 0 0116.6 7.4V20H8a3 3 0 01-3-3V4.4z'/%3E%3Cpath d='M8 20a3 3 0 013-3h5.6'/%3E%3C/svg%3E"); }
.i-help { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M9.6 9.4a2.6 2.6 0 015 .9c0 1.8-2.6 2.1-2.6 3.8'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E"); }
.i-ruler { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 17.2L17.2 4.2l2.6 2.6L6.8 19.8z'/%3E%3Cpath d='M8 13.4l2 2M11 10.4l2 2'/%3E%3C/svg%3E"); }
.i-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.6' width='18' height='12.8' rx='1.6'/%3E%3Cpath d='M3.6 6.6L12 12.8l8.4-6.2'/%3E%3C/svg%3E"); }
.i-traffic { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.6' y='2.6' width='8.8' height='18.8' rx='3'/%3E%3Cpath d='M12 6.8h.01M12 12h.01M12 17.2h.01'/%3E%3C/svg%3E"); }
.i-stage { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2l9.2 15.6H2.8z'/%3E%3Cpath d='M12 4.2V19.8'/%3E%3C/svg%3E"); }
.i-cap { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 9.2L12 4.4l9.6 4.8L12 14z'/%3E%3Cpath d='M6.4 11.2v4.6c0 1.6 2.5 2.9 5.6 2.9s5.6-1.3 5.6-2.9v-4.6'/%3E%3C/svg%3E"); }
.i-game { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 8.2h9.2a4 4 0 014 4v2.6a2.8 2.8 0 01-4.7 2l-1.6-1.6H9.7l-1.6 1.6a2.8 2.8 0 01-4.7-2v-2.6a4 4 0 014-4z'/%3E%3Cpath d='M8.2 11.4v3M6.7 12.9h3M16 12.6h.01M18 14.4h.01'/%3E%3C/svg%3E"); }
.i-ghost { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 11.4a6.8 6.8 0 0113.6 0v8.6l-2.7-1.9-2.1 1.9-2-1.9-2 1.9-2.1-1.9L5.2 20v-8.6z'/%3E%3Cpath d='M9.6 10.4h.01M14.4 10.4h.01'/%3E%3C/svg%3E"); }
.i-at { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.9'/%3E%3Cpath d='M15.9 8.1v5.6a2.4 2.4 0 004.8 0V12a8.7 8.7 0 10-3.4 6.9'/%3E%3C/svg%3E"); }

/* ==========================================================================
   响应式与偏好
   ========================================================================== */
@media (max-width: 640px) {
  .site-topbar .inner { padding: 10px 14px; }
  .site-topbar .brand-logo .word { display: none; }
  .site-topbar .navlinks { gap: 2px; }
  .site-topbar .navlinks a { padding: var(--sp-3) 9px; font-size: var(--fs-sm); }
  .content { padding: 20px 14px 16px; }
  .doc-card { padding: 24px 20px; box-shadow: 3px 3px 0 rgba(23, 20, 28, 0.07); }
  .doc-card h1 { font-size: 24px; letter-spacing: -0.7px; }
  .doc-card h2 { font-size: 19px; margin-left: -12px; padding-left: 12px; }
  .doc-card p, .doc-card .lead, .doc-card ul, .doc-card ol { font-size: 15px; }
  .site-footer nav { gap: var(--sp-3) 14px; }
}

@media (hover: none) {
  .cta-btn:hover, .btn-primary:hover, .btn-export:hover { transform: none; }
}

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