/*
 * ui.css — 两站（fyrolab.com、fyroworks.com）和收银台共用的基础样式，正本在 shared_ui/assets/（2026-10-24 三站统一时由驭火LAB 的 fyro.css 拆出）。
 * 10-26 起是「质感」版：Leon「我想把界面风格全部改成 hitk.ai的质感，但保留目前的配色体系」，看过样稿后「按这个风格把全栈都改掉」。
 *   基准是样稿 ~/claude-workbench/outputs/2026-10-26-皮肤样稿.html，下面的值和写法照它搬，注释里「样稿」指它。
 *   像素风（10-24 到 10-26 的正式版，pixel.css、pixel.js、像素字）收进 site/drafts/retired/pixel/，那里的 README 写了怎么恢复。
 * 分三段，同样稿：
 *   1 颜色：只放色值，一个不调，照搬像素风时的那两套（昼 :root，夜 :root[data-theme="dark"]）；昼的纸色 10-27 换成 C 素白（Leon 定，同样稿）。墨色通栏 .band-ink 不管昼夜都照夜。
 *     各页样式、fig.css 还在用的旧名字（--cinnabar、--band、--night……）在本段末尾指到新名字上。
 *   2 样式：圆角、阴影、面、字体、按键材质、焦点、动效；只引用颜色变量，光和影用白、黑的半透明。夜里要换的材质参数在本段末尾。
 *   3 部件：按钮（朱、墨、纸、幽灵四种按键，五层材质）、页头（凹槽导航 + 纸键滑块、下拉、手机菜单、往下渐隐的毛玻璃）、表单、页脚。
 * 页面版式（首屏、章节、卡片、窗口、选项卡……）在 site/src/static/fyro.css（两站的 marketing.css），各页自己的在 p-*.css。
 * 夜里给写死浅色的组件补色、印章、页脚底色、昼夜开关和整页淡入在 theme.css（最后加载）、theme.js。
 * 不要整份搬 hitk.css：它有一条 body { user-select: none }，价格、密钥都选不中。
 */
@font-face {
  font-family: "FyroSerif";
  src: url("./fonts/fyro-serif-600.woff2?v=de459939dd0f4962") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FyroMono";
  src: url("./fonts/fyro-mono-500.woff2?v=de459939dd0f4962") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* =====================================================================================================
 * 1 · 颜色（样稿第 1 段；出处缩写同样稿：P = 像素风 pixel.css，现存 site/drafts/retired/pixel/）
 * ===================================================================================================== */
:root {
  /* 纸 */
  --paper: #f6f4ef;               /* 页面底。10-27 Leon 定 C 素白（原来 #fdf6ec 偏桃红）：P --px-bg（昼） */
  --paper-rgb: 246 244 239;
  --paper-2: #edeae2;             /* 隔开的一节、表头（原来 #f6ead6）：P --px-bg-2 */
  --paper-tint: #e4e0d5;          /* 页脚、浅填色（原来 #f1e3cc）：P --paper-tint */
  --sheet: #fcfbf8;               /* 卡片、窗口（原来 #fffaf1）：P --px-card */
  --sheet-hi: #ffffff;            /* 卡片亮面：P --sheet-hi */
  --field: #fcfbf8;               /* 输入框（原来 #fffaf1）：P --field */
  /* 墨 */
  --ink: #12161f;
  --ink-rgb: 18 22 31;
  --ink-2: #1c212d;
  --ink-soft: #3c4250;
  --muted: #5e626c;               /* 10-27 随 C 素白加深一档（原 #676c78 在新纸上 4.35–4.5:1）：纸 5.55、--paper-2 5.08、--paper-tint 4.63（同样稿） */
  --line: rgb(18 22 31 / 0.16);
  --line-2: rgb(18 22 31 / 0.3);
  --line-3: rgb(18 22 31 / 0.5);
  --dash: rgb(18 22 31 / 0.55);   /* 流动虚线：P --dash */
  --wash: rgb(18 22 31 / 0.05);
  --current: rgb(18 22 31 / 0.08);
  /* 朱 */
  --accent: #b63a2b;              /* 驭火朱，成块的底：P --px-accent */
  --accent-rgb: 182 58 43;
  --accent-hi: #c2412f;           /* P --cinnabar-hi（昼） */
  --accent-deep: #7e241a;         /* 按钮底下那道深边：P --px-accent-deep */
  --accent-text: #a8342a;         /* 浅底上的朱字朱线：P --px-accent-text */
  --accent-text-sm: #a8342a;      /* 小号朱字（编号、序号、必填星号、章节号、小印、标签里的朱字）：昼同 --accent-text（10-27，同样稿） */
  --on-accent: #fdf6ec;           /* 朱底上的字：P --on-cinnabar */
  --accent-shadow-rgb: 120 30 18; /* 朱按钮的影 */
  /* 状态 */
  --pine: #4f7a54;
  --rouge: #a3283a;
  --ochre: #a8741f;
  /* 影：暖黑 */
  --shadow-rgb: 30 29 26;
  /* 获取档、产品线的小标（.acc）：Solo 赭、Concerto 青绿、Symphony 靛蓝、Étude 胭脂、Invention 紫（P） */
  --solo: #8a5526;
  --concerto: #2f6b55;
  --symphony: #2d5a84;
  --school: #962a5a;
  --invention: #66468f;
  /* 墨色通栏、代码块、终端：不管昼夜都是深色（P --night、--code-bg；样稿 --term-*） */
  --night: #0a0d14;
  --night-text: #eee8dc;
  --night-soft: #c8c6c1;
  --night-muted: #9c9a95;
  --night-line: rgb(255 255 255 / 0.1);
  --code-bg: #12161f;
  --term-bg: #0a0d14;
  --term-bar: #141a26;
  --term-ink: #eee8dc;
  --term-dim: #8e96a7;
  --term-line: rgb(238 232 220 / 0.16);
  --term-accent: #e05a43;
  --term-url: #e2a46a;
  --term-str: #86b38a;
  /* 应用页（侧栏、表头）：P */
  --side: #edeae2;                /* 同昼的 --paper-2（10-27 纸色换 C 素白前是 #f6ead6） */
  --th: #edeae2;
  /* 付款方式的品牌色（收银台） */
  --brand-wechat: #07c160;
  --brand-alipay: #1677ff;
  /* 文章插图（fig.css 的变量，图里的字、线、底都走它们）：P */
  --fig-paper: #fcfbf8; --fig-paper-2: #edeae2; --fig-paper-3: #dfdcd1;   /* 前两个同昼的 --sheet、--paper-2，第三个比 --paper-tint 深一档、差值同换色前（原来 #ecdfc8）（10-27 纸色换 C 素白） */
  --fig-ink: #12161f; --fig-ink-2: #3c4250; --fig-muted: #5e626c;
  --fig-line: rgb(18 22 31 / 0.32); --fig-hair: rgb(18 22 31 / 0.14);
  --fig-accent: #b63a2b; --fig-accent-soft: rgb(182 58 43 / 0.09); --fig-gold: #a8946a;
  color-scheme: light;
}
:root[data-theme="dark"], .band-ink {
  --paper: #11151e;
  --paper-rgb: 17 21 30;
  --paper-2: #171d2a;
  --paper-tint: #1f2738;
  --sheet: #182031;
  --sheet-hi: #202a3e;
  --field: #0d1118;
  --ink: #eee8dc;                 /* 骨白 */
  --ink-rgb: 238 232 220;
  --ink-2: #e2dbcd;
  --ink-soft: #c2bbad;
  --muted: #8e96a7;
  --line: rgb(238 232 220 / 0.13);
  --line-2: rgb(238 232 220 / 0.24);
  --line-3: rgb(238 232 220 / 0.4);
  --dash: rgb(238 232 220 / 0.5);
  --wash: rgb(238 232 220 / 0.05);
  --current: rgb(238 232 220 / 0.09);
  --accent: #c2412f;              /* 骨白字在上面 4.8:1 */
  --accent-rgb: 224 90 67;
  --accent-hi: #cf4a36;
  --accent-deep: #7e2419;
  --accent-text: #e05a43;         /* 深底上的朱字朱线 */
  --accent-text-sm: #e4715d;      /* 夜里小号朱字提亮一档（10-27 Leon 定）：纸 5.9、卡片 5.3、卡片亮面 4.66:1；#e05a43 在卡片亮面只有 3.9 */
  --on-accent: #fdf6ec;
  --accent-shadow-rgb: 0 0 0;     /* 夜里的影一律用黑 */
  --pine: #86b38a;
  --rouge: #e0707e;
  --ochre: #d6b265;
  --shadow-rgb: 0 0 0;
  --solo: #e2a46a;
  --concerto: #6cc3a0;
  --symphony: #7fb2e6;
  --school: #e58ab4;
  --invention: #b39ae6;
  --code-bg: #0a0d14;
  --side: #0e121a;
  --th: #141a26;
  --fig-paper: #182031; --fig-paper-2: #141b29; --fig-paper-3: #222c40;
  --fig-ink: #eee8dc; --fig-ink-2: #c2bbad; --fig-muted: #8e96a7;
  --fig-line: rgb(238 232 220 / 0.32); --fig-hair: rgb(238 232 220 / 0.14);
  --fig-accent: #e05a43; --fig-accent-soft: rgb(224 90 67 / 0.14); --fig-gold: #d6b265;
  color-scheme: dark;
}
/* 旧名字：各页样式、fig.css、收银台都还在用，指到上面的色上（写在 .band-ink 上，通栏里按夜的色重新算） */
:root, .band-ink {
  --band: var(--paper-2);         /* 隔开的一节（.sec-tint）的底 */
  --cinnabar: var(--accent);
  --cinnabar-hi: var(--accent-hi);
  --cinnabar-edge: var(--accent-deep);
  --cinnabar-text: var(--accent-text);
  --on-cinnabar: var(--on-accent);
}

/* =====================================================================================================
 * 2 · 样式（质感；样稿第 2 段）
 * ===================================================================================================== */
:root {
  /* 字：标题、正文都用系统黑体；等宽 FyroMono（JetBrains Mono 500 子集）；数字用黑体的等宽数字。品牌字以前用宋体（FyroSerif），质感版照样稿用黑体 */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", Roboto, sans-serif;
  --font-head: var(--font-sans);
  --font-mono: "FyroMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-num: var(--font-sans);
  --num-figures: tabular-nums;
  --w-display: 700;               /* 首屏大标题 */
  --w-title: 650;                 /* 节标题、卡片标题 */
  --w-strong: 600;                /* 按钮、加粗的价 */
  --w-label: 500;                 /* 小标、导航 */
  --track-display: -0.035em;
  --track-title: -0.02em;
  --track-tight: -0.01em;
  --track-eyebrow: 0.16em;
  --track-label: 0.04em;
  /* 旧名字 */
  --sans: var(--font-sans);
  --head: var(--font-head);
  --mono: var(--font-mono);
  --serif: "FyroSerif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;

  /* 形 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;                   /* 按钮（14px 字时）、小格 */
  --r-lg: 12px;                   /* 输入框、图标方块、分段切换外框 */
  --r-xl: 16px;                   /* 卡片 */
  --r-2xl: 20px;                  /* 窗口、收银台 */
  --r-3xl: 24px;                  /* 大面板 */
  --r-pill: 999px;

  /* 动 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* 滑块、面板 */
  --ease-key: cubic-bezier(0.2, 0, 0, 1);        /* 按键 */
  --ease: var(--ease-out);
  --t-press: 120ms;
  --t-base: 160ms;
  --t-slide: 240ms;

  /* 版心 */
  --shell: 1180px;
  --gutter: clamp(18px, 4vw, 32px);   /* 样稿是 16px 起；站里有版式按 18px 写了负边距（资料包预览 .kit-peek-img），照旧 18 */
  --header-h: 64px;
  --header-fade: 28px;            /* 页头下沿渐隐的那一段 */
  --blur-header: blur(18px) saturate(1.1);
}
@media (max-width: 639px) { :root { --header-h: 56px; } }

/* 跟着颜色走的材质（写在 .band-ink 上，通栏里按夜的色重新算） */
:root, .band-ink {
  --edge-soft: color-mix(in srgb, var(--line) 70%, transparent);   /* 卡片细边 */
  /* 浅黄、浅褐的底（页脚、.sec-tint 那一节）上的灰字：--muted 压在上面只有 4.2–4.4:1，往墨里收两成，到 5.5:1 以上（10-26 W2）；色板本身不动。10-27 昼的 --muted 加深成 #5e626c 后它跟着深（#4d515b），压在 --paper-tint 上 6.0:1 */
  --muted-strong: color-mix(in srgb, var(--muted) 78%, var(--ink));
  --edge: var(--line);
  --edge-strong: var(--line-2);   /* 浮起的选中格、贴纸 */

  /* 影：都很淡；窗口一层贴近的、一层大而软的 */
  --shadow-card: 0 1px 2px rgb(var(--shadow-rgb) / 0.04);
  --shadow-card-hover: 0 1px 2px rgb(var(--shadow-rgb) / 0.04), 0 6px 18px rgb(var(--shadow-rgb) / 0.07);
  --shadow-window: 0 1px 2px rgb(var(--shadow-rgb) / 0.05), 0 24px 60px -30px rgb(var(--shadow-rgb) / 0.42);
  --shadow-pop: 0 2px 8px rgb(var(--shadow-rgb) / 0.05), 0 30px 80px rgb(var(--shadow-rgb) / 0.12);
  --shadow-raise: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 2px rgb(var(--shadow-rgb) / 0.08), 0 3px 8px rgb(var(--shadow-rgb) / 0.08);
  --shadow-well: inset 0 1px 2px rgb(var(--shadow-rgb) / 0.05);
  /* 旧名字：各页的卡片、窗口还在用 */
  --sheet-shadow: var(--shadow-card);
  --sheet-shadow-lift: var(--shadow-card-hover);
  --window-shadow: var(--shadow-window);
  --win-shadow: var(--shadow-window);
  --card-shadow: var(--shadow-card);
  --card-shadow-lift: var(--shadow-card-hover);
  --pop-shadow: var(--shadow-pop);
  --btn-shadow: 0 1px 2px rgb(var(--shadow-rgb) / 0.08);
  --sheet-edge: 0 0 0 0 transparent;
  --paper-edge: color-mix(in srgb, var(--line) 40%, transparent);
  --paper-edge-2: var(--line);

  /* 面：都是 145° 的极淡渐变 */
  --surface-card: linear-gradient(145deg, var(--sheet-hi) 0%, var(--sheet) 100%);
  --surface-panel: linear-gradient(145deg, color-mix(in srgb, var(--sheet-hi) 72%, transparent), color-mix(in srgb, var(--sheet) 66%, transparent));
  --surface-well: linear-gradient(145deg, var(--paper) 0%, color-mix(in srgb, var(--paper-2) 38%, var(--paper)) 100%);
  --surface-well-flat: color-mix(in srgb, var(--paper-2) 34%, var(--sheet));   /* 表头一类：整行一个色 */
  --surface-chrome: linear-gradient(145deg, var(--sheet) 0%, color-mix(in srgb, var(--paper-2) 38%, var(--sheet)) 100%);
  --surface-raised: linear-gradient(145deg, var(--sheet-hi) 0%, var(--sheet) 48%, color-mix(in srgb, var(--paper-2) 75%, var(--sheet)) 100%);
  --surface-ink: linear-gradient(145deg, var(--ink-soft) 0%, var(--ink-2) 50%, var(--ink) 100%);   /* 墨色方块 */
  --on-ink: var(--paper);
  --ink-sheen: inset 0 1px 0 rgb(255 255 255 / 0.15);
  --header-alpha: 80%;

  /* 键：拟物实体按键的五层材质：1 面上亮下暗 2 一道比面深的边 3 顶部内高光 4 底部内阴影 5 贴地 + 抬起两层投影；
     按下去：沉 1u、渐变翻过来、顶高光变内阴影、外投影收拢。u = 字号 / 14 */
  /* 朱键：主按钮（.btn-cinnabar） */
  --key-accent-top: var(--accent-hi);
  --key-accent-bottom: var(--accent);
  --key-accent-hover-top: color-mix(in srgb, var(--accent-hi) 90%, #fff);
  --key-accent-hover-bottom: var(--accent-hi);
  --key-accent-down-top: color-mix(in srgb, var(--accent) 78%, var(--accent-deep));
  --key-accent-down-bottom: var(--accent);
  --key-accent-edge: var(--accent-deep);
  --key-accent-text: var(--on-accent);
  --key-accent-hi: rgb(255 255 255 / 0.22);
  --key-accent-shade: rgb(0 0 0 / 0.18);
  --key-accent-press: rgb(0 0 0 / 0.32);
  --key-accent-contact: rgb(var(--accent-shadow-rgb) / 0.2);
  --key-accent-lift: rgb(var(--accent-shadow-rgb) / 0.3);
  --key-accent-emboss: rgb(0 0 0 / 0.22);
  --key-accent-paper: transparent;
  /* 墨键（.btn-ink；夜里换成骨白的珍珠键） */
  --key-ink-top: color-mix(in srgb, var(--ink-soft) 72%, var(--ink));
  --key-ink-bottom: var(--ink-2);
  --key-ink-hover-top: var(--ink-soft);
  --key-ink-hover-bottom: color-mix(in srgb, var(--ink-soft) 30%, var(--ink-2));
  --key-ink-down-top: var(--ink);
  --key-ink-down-bottom: color-mix(in srgb, var(--ink-soft) 45%, var(--ink-2));
  --key-ink-edge: var(--ink);
  --key-ink-text: var(--paper);
  --key-ink-hi: rgb(255 255 255 / 0.18);
  --key-ink-shade: rgb(0 0 0 / 0.22);
  --key-ink-press: rgb(0 0 0 / 0.4);
  --key-ink-contact: rgb(var(--shadow-rgb) / 0.18);
  --key-ink-lift: rgb(var(--shadow-rgb) / 0.28);
  --key-ink-emboss: rgb(0 0 0 / 0.28);
  --key-ink-paper: transparent;
  /* 纸键：次按钮（.btn-paper），也是导航滑块 */
  --key-paper-top: var(--sheet-hi);
  --key-paper-bottom: color-mix(in srgb, var(--paper-2) 32%, var(--sheet));
  --key-paper-hover-top: var(--sheet-hi);
  --key-paper-hover-bottom: var(--sheet);
  --key-paper-down-top: color-mix(in srgb, var(--paper-2) 55%, var(--sheet));
  --key-paper-down-bottom: var(--sheet);
  --key-paper-edge: var(--line);
  --key-paper-text: var(--ink);
  --key-paper-hi: #fff;
  --key-paper-shade: rgb(var(--shadow-rgb) / 0.06);
  --key-paper-press: rgb(var(--shadow-rgb) / 0.14);
  --key-paper-contact: rgb(var(--shadow-rgb) / 0.07);
  --key-paper-lift: rgb(var(--shadow-rgb) / 0.1);
  --key-paper-emboss: transparent;
  --key-paper-paper: rgb(255 255 255 / 0.9);
  /* 幽灵键（.btn-ghost、.btn-icon）：静止没有面，悬停淡底，按下是个凹槽 */
  --key-ghost-well: rgb(var(--shadow-rgb) / 0.06);
  --key-ghost-press: rgb(var(--shadow-rgb) / 0.12);

  /* 首屏字符粒子、字符聚成的模型 logo：脚本读画布的 color 和 --glyph-dim（fyro.css 的 .hero-glyphs） */
  --glyph: #b63a2b;
  --glyph-opacity: 1;
  --glyph-dim: 1;

  /* 印章：原版朱印，夜里提亮一档。昼里不再正片叠底：页面里只要有一处 mix-blend-mode，Chrome 系浏览器里页头的毛玻璃就不模糊了（样稿里查出来的） */
  --seal-blend: normal;
  --seal-filter: none;
  --brand-blend: normal;

  /* 焦点：键盘焦点 2px 描边，离开 3px */
  --focus-ring: var(--ink-soft);
  --focus-w: 2px;
  --focus-off: 3px;
  --field-ring: 0 0 0 3px rgb(var(--ink-rgb) / 0.08);
}
/* 夜里要换的材质参数（只这些；颜色本身已在第 1 段换好） */
:root[data-theme="dark"], .band-ink {
  --edge-soft: var(--line);
  --shadow-card: 0 1px 2px rgb(var(--shadow-rgb) / 0.25);
  --shadow-card-hover: 0 1px 2px rgb(var(--shadow-rgb) / 0.25), 0 8px 22px rgb(var(--shadow-rgb) / 0.3);
  --shadow-window: 0 1px 2px rgb(var(--shadow-rgb) / 0.3), 0 28px 64px -26px rgb(var(--shadow-rgb) / 0.75);
  --shadow-pop: 0 2px 8px rgb(var(--shadow-rgb) / 0.3), 0 30px 80px rgb(var(--shadow-rgb) / 0.5);
  --shadow-raise: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 1px 2px rgb(var(--shadow-rgb) / 0.3), 0 3px 8px rgb(var(--shadow-rgb) / 0.32);
  --shadow-well: inset 0 1px 2px rgb(var(--shadow-rgb) / 0.3);
  --surface-panel: linear-gradient(145deg, color-mix(in srgb, var(--sheet) 82%, transparent), color-mix(in srgb, var(--paper-2) 78%, transparent));
  --surface-well: linear-gradient(145deg, var(--paper-2) 0%, var(--paper) 100%);
  --surface-well-flat: color-mix(in srgb, var(--paper-2) 55%, var(--sheet));
  --surface-chrome: linear-gradient(145deg, var(--sheet-hi) 0%, var(--sheet) 100%);
  --surface-raised: linear-gradient(145deg, color-mix(in srgb, var(--sheet-hi) 84%, var(--ink-soft)) 0%, var(--sheet-hi) 55%, var(--sheet) 100%);
  --surface-ink: linear-gradient(145deg, var(--ink) 0%, var(--ink-2) 50%, var(--ink-soft) 100%);   /* 夜里墨色方块换成骨白的珍珠方块 */
  --ink-sheen: inset 0 1px 0 rgb(255 255 255 / 0.6);
  --header-alpha: 82%;

  --key-accent-text: #fff;         /* 骨白字压在夜里的朱面中段只有 4.44:1，纯白 4.76:1，看不出差别（10-26 W2） */
  --key-accent-hi: rgb(255 255 255 / 0.18);
  --key-accent-shade: rgb(0 0 0 / 0.26);
  --key-accent-press: rgb(0 0 0 / 0.45);
  --key-accent-contact: rgb(0 0 0 / 0.45);
  --key-accent-lift: rgb(0 0 0 / 0.5);
  --key-accent-paper: rgb(255 255 255 / 0.06);

  --key-ink-top: var(--ink);
  --key-ink-bottom: color-mix(in srgb, var(--ink-2) 72%, var(--ink-soft));
  --key-ink-hover-top: color-mix(in srgb, var(--ink) 70%, #fff);
  --key-ink-hover-bottom: var(--ink-2);
  --key-ink-down-top: color-mix(in srgb, var(--ink-soft) 70%, var(--ink-2));
  --key-ink-down-bottom: var(--ink-2);
  --key-ink-edge: rgb(0 0 0 / 0.3);
  --key-ink-hi: rgb(255 255 255 / 0.85);
  --key-ink-shade: rgb(0 0 0 / 0.1);
  --key-ink-press: rgb(0 0 0 / 0.2);
  --key-ink-contact: rgb(0 0 0 / 0.5);
  --key-ink-lift: rgb(0 0 0 / 0.6);
  --key-ink-emboss: transparent;
  --key-ink-paper: rgb(255 255 255 / 0.08);

  --key-paper-top: color-mix(in srgb, var(--sheet-hi) 86%, var(--ink-soft));
  --key-paper-bottom: var(--sheet-hi);
  --key-paper-hover-top: color-mix(in srgb, var(--sheet-hi) 80%, var(--ink-soft));
  --key-paper-hover-bottom: color-mix(in srgb, var(--sheet-hi) 92%, var(--ink-soft));
  --key-paper-down-top: var(--sheet);
  --key-paper-down-bottom: var(--sheet-hi);
  --key-paper-edge: rgb(0 0 0 / 0.5);
  --key-paper-hi: rgb(255 255 255 / 0.1);
  --key-paper-shade: rgb(0 0 0 / 0.25);
  --key-paper-press: rgb(0 0 0 / 0.45);
  --key-paper-contact: rgb(0 0 0 / 0.45);
  --key-paper-lift: rgb(0 0 0 / 0.5);
  --key-paper-emboss: rgb(0 0 0 / 0.3);
  --key-paper-paper: rgb(255 255 255 / 0.06);
  --key-ghost-well: rgb(0 0 0 / 0.3);
  --key-ghost-press: rgb(0 0 0 / 0.5);

  --glyph: #e05a43;               /* 提亮的朱 */
  --glyph-opacity: 0.8;
  --glyph-dim: 2;                 /* 浓淡照宣纸调的，深底上再乘 2 才看得出 */
  --seal-blend: normal;
  --seal-filter: brightness(1.12) saturate(1.05);
}

/* 老 WebView（旧版微信内核一类）不认 color-mix()：上面用它算出来的变量整条失效，用到它们的边、底、按键面会变成透明——
   卡片没了细边、纸键没了面、页头滑下去以后没有底（字压字）。这里给这些变量换成色板里最接近的一档，样子略平一点，字和底照样分得清、按钮看得出来。
   夜里那几条在下面单独再写一遍（:root[data-theme="dark"] 的权重比 :root 高，不重写就还是用上面那条失效的）。验证见 site/README.md「老 WebView」。 */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root, .band-ink {
    --edge-soft: var(--line);
    --muted-strong: var(--ink-soft);
    --paper-edge: var(--line);
    --surface-panel: linear-gradient(145deg, var(--sheet-hi), var(--sheet));
    --surface-well: linear-gradient(145deg, var(--paper), var(--paper-2));
    --surface-well-flat: var(--paper-2);
    --surface-chrome: linear-gradient(145deg, var(--sheet), var(--paper-2));
    --surface-raised: linear-gradient(145deg, var(--sheet-hi), var(--sheet));
    --key-accent-hover-top: var(--accent-hi);
    --key-accent-down-top: var(--accent);
    --key-ink-top: var(--ink-soft);
    --key-ink-hover-bottom: var(--ink-2);
    --key-ink-down-bottom: var(--ink-2);
    --key-paper-bottom: var(--sheet);
    --key-paper-down-top: var(--paper-2);
  }
  :root[data-theme="dark"], .band-ink {
    --surface-panel: linear-gradient(145deg, var(--sheet), var(--paper-2));
    --surface-well-flat: var(--paper-2);
    --surface-raised: linear-gradient(145deg, var(--sheet-hi), var(--sheet));
    --key-ink-bottom: var(--ink-2);
    --key-ink-hover-top: var(--ink);
    --key-ink-down-top: var(--ink-soft);
    --key-paper-top: var(--sheet-hi);
    --key-paper-hover-top: var(--sheet-hi);
    --key-paper-hover-bottom: var(--sheet-hi);
  }
}

/* =====================================================================================================
 * 3 · 部件（只用上面两段的变量）
 * ===================================================================================================== */
@property --key-top { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --key-bottom { syntax: "<color>"; inherits: false; initial-value: transparent; }

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; background: var(--paper); }
/* 滚动条（10-29 Leon「右侧的滚动条也要专门设计一下，昼夜适配」，看样稿后「选丙」）：轨道透明，一根墨色细条，悬停转朱、拖动时朱色实一点；
   页面和页面里能滚的小块一套样子，颜色跟昼夜变量走。样稿 ~/claude-workbench/outputs/2026-10-28-首页头版样稿/滚动条样稿.html。
   Chrome、Safari 用 ::-webkit-scrollbar；Firefox 只认 scrollbar-color / scrollbar-width，单独写在 @supports (-moz-appearance: none) 里。
   别在 Chrome 能读到的地方写 scrollbar-color：Chrome 121 起元素上（或从祖先继承来）有它就不认 ::-webkit-scrollbar；
   写了 scrollbar-width: none / ::-webkit-scrollbar { display: none } 的横滑条照旧藏着（类选择器比这里的优先） */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3.5px solid transparent; border-radius: 999px; background: rgb(var(--ink-rgb) / 0.2) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--accent-rgb) / 0.75); }
::-webkit-scrollbar-thumb:active { background-color: rgb(var(--accent-rgb)); }
@supports (-moz-appearance: none) {
  :root { scrollbar-width: thin; scrollbar-color: rgb(var(--ink-rgb) / 0.28) transparent; }   /* scrollbar-color 会继承，页面里的小块跟着 */
}
/* 纸纹（10-27，照样稿）：细颗粒 + 很淡的云状斑驳（宣纸厚薄不匀的样子），铺在页面底上；卡片、窗口自己有底色，盖住纸纹，看着像更光的纸放在宣纸上。
   两张 SVG 噪声图只画一次再平铺；不用混合模式（会让页头毛玻璃失效）。夜里只留很淡的颗粒。
   <filter> 写明 x=0 y=0 宽高 100%：默认区域比图块大一成，stitchTiles 对到大一圈的区域上，平铺时在 600px（斑驳）、220px（颗粒）处接出直边 */
:root {
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.31 0 0 0 0 0.24 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.39 0 0 0 0 0.29 0.16 0 0 0 -0.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] { --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.91 0 0 0 0 0.86 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --paper-fiber: none; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--paper-grain), var(--paper-fiber);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: var(--w-strong); }
[hidden] { display: none !important; }
::selection { background: rgb(var(--accent-rgb) / 0.18); color: var(--ink); }
:where(a[href], button, [role="tab"], [role="radio"], [role="switch"], summary, [tabindex], input, select, textarea):focus-visible { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-off); }
html.pointer-input :where(a, button, [role="tab"], summary, [tabindex]):focus { outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.nobr { white-space: nowrap; }
.serif { font-family: var(--serif); }
.mono { font-family: var(--font-mono); }
.num { font-family: var(--font-num); font-variant-numeric: var(--num-figures); }
.mobile-break { display: none; }
@media (max-width: 767px) { .mobile-break { display: inline; } .desk-break { display: none; } }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 8px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 14px; }
.skip-link:focus { top: 12px; }

.i { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: 100%; max-width: calc(var(--shell) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { width: 100%; max-width: calc(760px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 按键（样稿 .key）：朱 .btn-cinnabar、墨 .btn-ink、纸 .btn-paper（没写哪种时也是纸）、幽灵 .btn-ghost / .btn-icon ---------- */
.btn {
  --u: calc(1em / 14);
  --k-top: var(--key-paper-top); --k-bottom: var(--key-paper-bottom);
  --k-hover-top: var(--key-paper-hover-top); --k-hover-bottom: var(--key-paper-hover-bottom);
  --k-down-top: var(--key-paper-down-top); --k-down-bottom: var(--key-paper-down-bottom);
  --k-edge: var(--key-paper-edge); --k-text: var(--key-paper-text);
  --k-hi: var(--key-paper-hi); --k-shade: var(--key-paper-shade); --k-press: var(--key-paper-press);
  --k-contact: var(--key-paper-contact); --k-lift: var(--key-paper-lift); --k-emboss: var(--key-paper-emboss); --k-paper: var(--key-paper-paper);
  --key-top: var(--k-top);
  --key-bottom: var(--k-bottom);
  --key-l1: inset 0 var(--u) 0 var(--k-hi);
  --key-l2: inset 0 calc(-1 * var(--u)) 0 var(--k-shade);
  --key-l3: 0 var(--u) calc(2 * var(--u)) var(--k-contact);
  --key-l4: 0 calc(4 * var(--u)) calc(10 * var(--u)) calc(-3 * var(--u)) var(--k-lift);
  position: relative;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.62em 1.3em;
  border: max(1px, var(--u)) solid var(--k-edge);
  border-radius: calc(10 * var(--u));
  background-color: var(--k-bottom);
  background-image: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  background-origin: border-box;
  box-shadow: var(--key-l1), var(--key-l2), var(--key-l3), var(--key-l4);
  color: var(--k-text);
  font-size: 14px;
  font-weight: var(--w-strong);
  letter-spacing: var(--track-tight);
  line-height: 1.2;
  text-shadow: 0 calc(-1 * var(--u)) 0 var(--k-emboss);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition-property: translate, box-shadow, --key-top, --key-bottom, color, border-color, background-color;
  transition-duration: var(--t-press), 140ms, var(--t-base), var(--t-base), var(--t-base), var(--t-base), var(--t-base);
  transition-timing-function: var(--ease-key);
}
.btn .i { width: 1.15em; height: 1.15em; stroke-width: 2; }
.btn-cinnabar { --k-top: var(--key-accent-top); --k-bottom: var(--key-accent-bottom); --k-hover-top: var(--key-accent-hover-top); --k-hover-bottom: var(--key-accent-hover-bottom); --k-down-top: var(--key-accent-down-top); --k-down-bottom: var(--key-accent-down-bottom); --k-edge: var(--key-accent-edge); --k-text: var(--key-accent-text); --k-hi: var(--key-accent-hi); --k-shade: var(--key-accent-shade); --k-press: var(--key-accent-press); --k-contact: var(--key-accent-contact); --k-lift: var(--key-accent-lift); --k-emboss: var(--key-accent-emboss); --k-paper: var(--key-accent-paper); }
.btn-ink { --k-top: var(--key-ink-top); --k-bottom: var(--key-ink-bottom); --k-hover-top: var(--key-ink-hover-top); --k-hover-bottom: var(--key-ink-hover-bottom); --k-down-top: var(--key-ink-down-top); --k-down-bottom: var(--key-ink-down-bottom); --k-edge: var(--key-ink-edge); --k-text: var(--key-ink-text); --k-hi: var(--key-ink-hi); --k-shade: var(--key-ink-shade); --k-press: var(--key-ink-press); --k-contact: var(--key-ink-contact); --k-lift: var(--key-ink-lift); --k-emboss: var(--key-ink-emboss); --k-paper: var(--key-ink-paper); }
.btn-lg { min-height: 48px; padding: 0.7em 1.6em; font-size: 16px; }
.btn-sm { min-height: 32px; padding: 0.45em 1em; font-size: 13px; }
.btn-pill { border-radius: var(--r-pill); }
.btn-block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn-ghost):not(.btn-icon):not(:disabled):not(.is-soon):hover {
    --key-top: var(--k-hover-top);
    --key-bottom: var(--k-hover-bottom);
    --key-l4: 0 calc(8 * var(--u)) calc(16 * var(--u)) calc(-5 * var(--u)) var(--k-lift);
  }
  :is(.btn-ghost, .btn-icon):not(:disabled):hover { background-color: var(--wash); color: var(--ink); }
}
.btn:not(:disabled):not(.is-soon):active { translate: 0 var(--u); }
.btn:not(.btn-ghost):not(.btn-icon):not(:disabled):not(.is-soon):active {
  --key-top: var(--k-down-top);
  --key-bottom: var(--k-down-bottom);
  --key-l1: inset 0 var(--u) calc(2 * var(--u)) var(--k-press);
  --key-l2: inset 0 0 0 transparent;
  --key-l3: 0 var(--u) 0 var(--k-paper);
  --key-l4: 0 var(--u) var(--u) var(--k-contact);
}
.btn-ghost, .btn-icon { border-color: transparent; background: none; box-shadow: none; text-shadow: none; color: var(--ink-soft); }
:is(.btn-ghost, .btn-icon):not(:disabled):active { background-color: var(--key-ghost-well); box-shadow: inset 0 var(--u) calc(2 * var(--u)) var(--key-ghost-press); }
.btn-icon { width: 36px; min-height: 36px; padding: 0; border-radius: var(--r-md); }
.btn-danger { --k-text: var(--rouge); color: var(--rouge); }
.btn-danger:is(.btn-ghost, .btn-icon):not(:disabled):hover { color: var(--rouge); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* 敬请期待、不能点的按钮（首页和超级个体页的「开通 Solo」）：写 aria-disabled="true"，读屏照样读得到；样子同 :disabled */
.btn.is-soon { opacity: 0.5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* 文字链接：墨字，悬停变朱、箭头挪一点（样稿 .text-link）；保留原来那道细下划线，各页靠它认出「可以点」 */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--w-strong);
  transition: color var(--t-base) ease-out, border-color var(--t-base) ease-out;
}
.text-link .arrow, .text-link .i { transition: translate var(--t-slide) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { color: var(--accent-text); border-color: currentColor; }
  .text-link:hover .arrow { translate: 2px -2px; }
  .text-link:hover .i { translate: 2px 0; }
}
/* 正文里的普通链接 */
.inline-link, .prose a, .note a, .faq-a a, .fine a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--t-base) ease-out, color var(--t-base) ease-out; }
@media (hover: hover) and (pointer: fine) {
  .inline-link:hover, .prose a:hover, .note a:hover, .faq-a a:hover, .fine a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
}

/* ---------- 图标按钮（样稿 .icon-btn：页头搜索、页脚昼夜） ---------- */
.icon-btn { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: var(--r-md); color: var(--muted); transition: color var(--t-base) ease-out, background-color var(--t-base) ease-out; }
.icon-btn .i { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { color: var(--ink); background: var(--wash); } }
.icon-btn:active { background: var(--current); }

/* ---------- 页头 ---------- */
.site-header { position: sticky; top: 0; z-index: 40; }
/* 滑下去以后：页头底下铺一层纸色加模糊，往下多伸出 --header-fade，下沿用遮罩渐隐，滑上来的内容慢慢淡进页头里，没有硬边、不画线（Leon 10-26）。
   在顶上时不铺（页头下面本来就是宣纸）；手机菜单打开时铺满、不透（ui.js 给页头加 .is-menu-open） */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * var(--header-fade));
  z-index: -1;
  background: rgb(var(--paper-rgb) / 0.92);   /* 不认 color-mix 的老 WebView 用这条 */
  background: color-mix(in srgb, var(--paper) var(--header-alpha), transparent);
  -webkit-backdrop-filter: var(--blur-header);
  backdrop-filter: var(--blur-header);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--header-fade)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--header-fade)), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.site-header.is-scrolled::before, .site-header.is-menu-open::before { opacity: 1; }
.site-header.is-menu-open::before { background: var(--paper); }
.header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: var(--header-h); }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 11px; justify-self: start; }
/* 印章图（fyro-ui/seal.png，192×192）四周留着近两成的透明边：图放大到 54px、四边 -9px 收回去，占位 36px，看得见的印面约 35px，
   同样稿里裁过边的 36px 朱印（10-24 Leon「驭火 的logo可以大一点，现在看不太清」：原来 40px 的图，印面只有 26px） */
.brand-seal { width: 54px; height: 54px; margin: -9px; flex-shrink: 0; mix-blend-mode: var(--seal-blend); filter: var(--seal-filter); }
.brand-name { display: grid; min-width: 0; line-height: 1.1; }
.brand-word { color: var(--ink); font-size: 17px; font-weight: var(--w-title); letter-spacing: var(--track-tight); }
.brand-cn { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: var(--w-label); letter-spacing: var(--track-label); white-space: nowrap; }
@media (max-width: 639px) { .brand { gap: 9px; } .brand-seal { width: 48px; height: 48px; margin: -8px; } }

/* 导航：一条凹下去的槽，当前栏目上浮一枚纸键（.pill-ind，材质同 .btn-paper 的五层），字加粗。
   点了别的栏目，键先滑过去再打开那一页（ui.js）；指针移上去只出淡底，键不跟着跑，一直标着「在哪」。
   第一帧由当前那一格自己画这枚键（没有脚本时也是它）；各站 layout-slots/nav.html 导航后面的内联脚本在第一帧之前量好位置、放好滑块，
   给导航加 .is-live，之后由 ui.js 接管，切换前后看不出差别。滑块底下那一格标 .is-under（ui.js），字加粗跟着滑块走。
   栏目有两种：直接的链接（.nav-pill > a），和下拉 .nav-dd（超级个体、企业定制、教育合作，栏目名 .dd-top 是链接）。 */
.nav-pill { position: relative; isolation: isolate; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--edge-soft); border-radius: var(--r-pill); background: var(--surface-well); box-shadow: var(--shadow-well); }
.nav-pill > a, .nav-dd > .dd-top {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: var(--w-label);
  line-height: 22px;
  white-space: nowrap;
  transition: color var(--t-base) ease-out, background-color var(--t-base) ease-out;
}
.nav-dd > .dd-top { padding-right: 10px; }
.nav-dd > .dd-top .i { width: 14px; height: 14px; stroke-width: 2; color: var(--muted); transition: rotate 200ms var(--ease-out); }
.nav-dd > .dd-top[aria-expanded="true"] .i { rotate: 180deg; }
.nav-pill .ext { margin-left: 2px; color: var(--muted); font-size: 11px; }
/* 当前栏目：有脚本时是滑块底下那一格（.is-under），没有脚本时是 aria-current（链接 "page"；下拉写在 .nav-dd 上，脚本挪到 .dd-top 上） */
.nav-pill > a.is-under, .nav-pill > .nav-dd.is-under > .dd-top,
.nav-pill:not(.is-live) > a[aria-current="page"], .nav-pill:not(.is-live) > .nav-dd[aria-current] > .dd-top, .nav-pill:not(.is-live) > .nav-dd > .dd-top[aria-current] {
  color: var(--key-paper-text);
  font-weight: var(--w-strong);
}
.nav-dd > .dd-top[aria-expanded="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .nav-pill > a:not(.is-under):not([aria-current]):hover, .nav-dd:not(.is-under):not(.is-current):not([aria-current]) > .dd-top:hover { color: var(--ink); background-color: var(--wash); }
}
.nav-pill > a:not(.is-under):not([aria-current]):active, .nav-dd:not(.is-under):not(.is-current) > .dd-top:active { background-color: var(--key-ghost-well); box-shadow: inset 0 1px 2px var(--key-ghost-press); }
/* 纸键：滑块，和第一帧（没有脚本）时当前那一格自己画的那枚 */
.pill-ind,
.nav-pill:not(.is-live) > a[aria-current="page"], .nav-pill:not(.is-live) > .nav-dd[aria-current] > .dd-top, .nav-pill:not(.is-live) > .nav-dd > .dd-top[aria-current] {
  border: 1px solid var(--key-paper-edge);
  background-color: var(--key-paper-bottom);
  background-image: linear-gradient(180deg, var(--key-paper-top), var(--key-paper-bottom));
  background-origin: border-box;
  box-shadow: inset 0 1px 0 var(--key-paper-hi), inset 0 -1px 0 var(--key-paper-shade), 0 1px 2px var(--key-paper-contact), 0 4px 10px -3px var(--key-paper-lift);
}
.pill-ind { position: absolute; z-index: 0; top: 4px; left: 0; width: 0; height: calc(100% - 8px); border-radius: var(--r-pill); opacity: 0; pointer-events: none; transition: translate var(--t-slide) var(--ease-out), width var(--t-slide) var(--ease-out), opacity var(--t-base) ease; }
.nav-pill:not(.is-live) .pill-ind { opacity: 0 !important; }
/* 1024–1179 宽：七项加三个下拉箭头放不下宽松的间距，收一点（左边 logo、右边按钮不挤） */
@media (min-width: 1024px) and (max-width: 1179px) {
  .nav-pill > a, .nav-dd > .dd-top { padding-inline: 10px; }
  .nav-dd > .dd-top { padding-right: 7px; }
}
.header-actions { display: flex; align-items: center; gap: 6px; justify-self: end; }
/* 10-29 Leon「这里两个按钮不一样」：页头按钮原来单独改成胶囊，和全站的圆角方块按钮不一样，改回按钮本来的圆角 */
.header-actions > .btn { margin-left: 4px; }
/* 「在线咨询」左边的「登录 / 我的」，字跟导航一样，不进滑块；手机上收进菜单的最后一项 */
.nav-account { padding: 5px 10px; color: var(--ink-soft); font-size: 14px; font-weight: var(--w-label); line-height: 22px; white-space: nowrap; transition: color var(--t-base) ease-out; }
.nav-account:hover, .nav-account[aria-current="page"] { color: var(--ink); }
@media (max-width: 1023px) { .nav-account { display: none; } }

/* 下拉面板：按钮下方居中，窗口的样子（细边、大圆角、浮起的影）；ui.js 加 .is-open 打开，超出窗口时挪回来（左右各留 16px）。
   面板上沿到按钮之间的空当由 ::before 接上，指针往下移不会关掉。没有脚本时 :hover、:focus-within 打开（html 没有 .js） */
.nav-dd { position: relative; }
.dd-panel {
  position: absolute;
  top: calc(100% + 13px);
  left: 50%;
  z-index: 50;
  translate: -50% 0;
  padding: 10px;
  border: 1px solid var(--edge-soft);
  border-radius: var(--r-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 200ms var(--ease-out), visibility 0s linear 160ms;
}
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.dd-panel.is-open,
html:not(.js) .nav-dd:hover > .dd-panel, html:not(.js) .nav-dd:focus-within > .dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.dd-solo, .dd-ent { width: 600px; }
.dd-edu { width: 520px; }
.dd-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
/* 有脚本时三个面板挪进一块共用的 .dd-pop（ui.js）：在下拉之间移动时，面板的位置、宽、高滑过去，里面的内容左右滑 32px、淡入淡出；
   底、细边和影由 .dd-pop 画（边用 box-shadow 画，不占宽高，ui.js 量的面板大小就是它的大小），面板自己不画。 */
.dd-pop {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 50;
  border-radius: var(--r-xl);
  background: var(--surface-card);
  box-shadow: 0 0 0 1px var(--edge-soft), var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms,
    left 200ms cubic-bezier(.23, 1, .32, 1), width 200ms cubic-bezier(.23, 1, .32, 1), height 200ms cubic-bezier(.23, 1, .32, 1);
}
.dd-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease,
    left 200ms cubic-bezier(.23, 1, .32, 1), width 200ms cubic-bezier(.23, 1, .32, 1), height 200ms cubic-bezier(.23, 1, .32, 1);
}
.dd-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* 和导航之间的过桥，指针移下来不断 */
.dd-viewport { position: relative; height: 100%; overflow: hidden; border-radius: inherit; }
.dd-viewport .dd-panel {
  top: 0;
  left: 0;
  translate: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  transition: opacity 200ms cubic-bezier(.32, .72, 0, 1), transform 200ms cubic-bezier(.32, .72, 0, 1), visibility 0s linear 200ms;
}
.dd-viewport .dd-panel.is-open { transition: opacity 200ms cubic-bezier(.32, .72, 0, 1), transform 200ms cubic-bezier(.32, .72, 0, 1); }
.dd-viewport .dd-panel.out-l, .dd-viewport .dd-panel.pre-l { transform: translateX(-32px); }
.dd-viewport .dd-panel.out-r, .dd-viewport .dd-panel.pre-r { transform: translateX(32px); }
.dd-viewport .dd-panel.pre-l, .dd-viewport .dd-panel.pre-r { transition: none; }
@media (prefers-reduced-motion: reduce) { .dd-pop, .dd-viewport .dd-panel { transition: none; } }
.dd-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px; color: var(--muted); font-size: 12px; font-weight: var(--w-label); line-height: 1.5; letter-spacing: var(--track-label); }
.dd-link { display: block; padding: 8px 12px; border-radius: var(--r-md); color: var(--ink); font-size: 14px; font-weight: var(--w-label); line-height: 1.5; transition: background-color 140ms ease-out; }
.dd-link small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; text-wrap: pretty; }
.dd-link:hover, .dd-link:focus-visible { background: var(--wash); }
.dd-link[aria-current="page"] { background: var(--current); font-weight: var(--w-strong); }
/* Solo 下拉：和企业定制下拉同宽，里面一张产品卡（左边两块，上下排、隔一条细线；右边价格和两个按钮）。
   直接铺在下拉的底上，同另外两个下拉（10-28 Leon「超级个体的hover卡片不要有下凹的效果」：原来是一块凹下去的浅格） */
.dd-prod { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; padding: 14px 16px; }
.dd-prod-name { color: var(--ink); font-size: 16px; font-weight: var(--w-title); letter-spacing: var(--track-tight); line-height: 1.4; }
.dd-prod-line { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.dd-halves { display: grid; align-content: center; gap: 12px; }
.dd-halves > div + div { padding-top: 12px; border-top: 1px solid var(--edge-soft); }
.dd-prod-side { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; border-left: 1px solid var(--edge-soft); }
.dd-price { color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.dd-price b { color: var(--ink); font-family: var(--font-head); font-size: 18px; font-weight: var(--w-title); }
.dd-prod-side .btn { width: 100%; }
.dd-prod-side .btn:first-of-type { margin-top: auto; }

/* 手机菜单的开关：两条线挤在正中、相隔 4px，打开时各移 2.8px、转 45° 合成 ×；样子同图标按钮 */
.menu-toggle { display: none; width: 36px; height: 36px; border-radius: var(--r-md); place-items: center; place-content: center; gap: 4px; color: var(--ink); transition: background-color var(--t-base) ease-out; }
.menu-toggle span { display: block; width: 18px; height: 1.6px; margin: 0; border-radius: 1px; background: currentColor; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .menu-toggle:hover { background: var(--wash); } }
.menu-toggle:active, .menu-toggle[aria-expanded="true"] { background: var(--current); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.8px) rotate(-45deg); }
/* 手机菜单：菜单比一屏长时在菜单里滚动。当前那一项是一枚浮起的纸键（同导航滑块），字加粗；驭火LAB 的分块卡片在 fyro.css */
.mobile-nav { display: grid; gap: 2px; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 16px; }
.mobile-nav a:not(.btn) { border: 1px solid transparent; border-radius: var(--r-md); }
.mobile-nav > a, .mnav-group > p { padding: 11px 14px; font-size: 15px; }
.mobile-nav a[aria-current="page"]:not(.btn) {
  border-color: var(--key-paper-edge);
  background-color: var(--key-paper-bottom);
  background-image: linear-gradient(180deg, var(--key-paper-top), var(--key-paper-bottom));
  box-shadow: inset 0 1px 0 var(--key-paper-hi), inset 0 -1px 0 var(--key-paper-shade), 0 1px 2px var(--key-paper-contact), 0 4px 10px -3px var(--key-paper-lift);
  color: var(--ink);
  font-weight: var(--w-strong);
}
.mobile-nav a:not([aria-current]):not(.btn):active { background: var(--key-ghost-well); }
.mnav-group { display: grid; padding: 4px 0; border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); }
.mnav-group + .mnav-group { border-top: 0; }
.mnav-group > p { padding-bottom: 4px; color: var(--muted); font-size: 13px; }
.mnav-group > .mnav-sub { display: flex; align-items: center; gap: 6px; padding: 8px 14px 2px 26px; font-size: 12px; }
.mnav-group a { padding: 8px 14px 8px 26px; color: var(--ink-2); font-size: 14.5px; }
.mnav-group a .fine { font-size: 12.5px; }
@media (min-width: 1024px) { .mobile-nav { display: none; } }
@media (max-width: 1023px) {
  .header-row { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-pill { display: none; }
  .menu-toggle { display: grid; }
}
@media (max-width: 639px) { .header-actions { gap: 2px; } }
@media (max-width: 380px) { .brand-cn { display: none; } }
/* 320 宽：FyroLAB 字标贴到搜索图标上；右边几个收紧一点 */
@media (max-width: 340px) { .header-actions .icon-btn { width: 32px; } }

/* ---------- 表单（样稿 .input：凹下去的格，细边，聚焦时深一档加一圈淡光） ---------- */
.field { display: grid; gap: 7px; }
.field > label, .field-label { color: var(--ink-2); font-size: 13.5px; font-weight: var(--w-strong); }
:where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select, textarea), .input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--field);
  box-shadow: var(--shadow-well);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--t-base) ease-out, box-shadow var(--t-base) ease-out;
}
:where(input, textarea)::placeholder { color: var(--muted); color: color-mix(in srgb, var(--muted) 80%, transparent); }
:where(input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select, textarea, .input):hover { border-color: var(--line-2); }
:where(input, select, textarea):focus { outline: none; border-color: var(--ink-soft); box-shadow: var(--shadow-well), var(--field-ring); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
/* 单行的输入框、下拉和 .btn 一样高，横排的表单里对得齐；多行的 textarea 不管 */
input.input, select.input { height: 44px; padding-block: 0; line-height: 42px; }
.field-hint { color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* ---------- 页脚（驭火LAB 是大页脚；火力坊、收银台用紧凑页脚 .is-compact）。底色是页脚色（昼浅黄、夜见 theme.css），上沿一道细线 ---------- */
.site-foot { --muted: var(--muted-strong); padding-block: 56px 28px; border-top: 1px solid var(--edge-soft); background: var(--paper-tint); color: var(--ink-soft); }   /* 浅黄底上的灰字收深一点（--muted-strong，见第 2 段） */
/* 品牌栏加五栏（配方、超级个体和课程、产品与服务、教育合作、关于）；1199 以下品牌栏单占一行 */
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 28px; }
.foot-brand .brand { margin-bottom: 16px; }
/* 10-27 口号、简介都删了（同一句话全站只出现一次）：印章下面直接是「在线咨询」，间距同下面「关注驭火LAB」那组（印章下 16 + 4） */
.foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; color: var(--ink-soft); font-size: 13px; }
.foot-heading { margin-bottom: 12px; color: var(--muted); font-size: 12.5px; font-weight: var(--w-label); letter-spacing: var(--track-label); }
.foot-col li + li { margin-top: 7px; }
.foot-col li { line-height: 1.6; }
.foot-col li.foot-group { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--muted); font-size: 12px; }
.foot-col li.foot-group:first-child { margin-top: 0; }
.foot-col li.foot-gap { margin-top: 18px; }
.foot-col a .acc { margin-right: 6px; }
.foot-col a { color: var(--ink-soft); font-size: 13px; transition: color var(--t-base) ease-out; }
.foot-col a:hover, .foot-contact a:not(.btn):hover, .foot-follow-more a:hover { color: var(--ink); }
/* 页脚社交图标（{{social:lab}}）：小方块，没开通的半透明、不能点；开通了的有悬停 */
.foot-social { margin-top: 26px; }
.social-list { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  transition: border-color var(--t-base) ease-out, color var(--t-base) ease-out, box-shadow var(--t-base) ease-out;
}
.social-icon { width: 18px; height: 18px; fill: currentColor; }
.social-item[data-platform$="xiaohongshu"] .social-icon { width: 26px; height: 26px; }  /* 小红书的标志是一行字，放大才认得出 */
.social-item.is-off .social-link { opacity: 0.36; background: transparent; box-shadow: none; pointer-events: none; cursor: default; -webkit-user-select: none; user-select: none; }
@media (hover: hover) and (pointer: fine) {
  a.social-link:hover { border-color: var(--line-2); color: var(--accent-text); box-shadow: var(--shadow-card-hover); }
}
.foot-heading-next { margin-top: 20px; }
.foot-heading-note { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: var(--track-label); }
.foot-follow { margin-top: 24px; }
.follow-list { display: flex; flex-wrap: wrap; gap: 8px; }
.follow-link { display: inline-flex; gap: 6px; padding: 3px 12px; border: 1px solid var(--edge); border-radius: var(--r-pill); background: var(--surface-card); font-size: 13px; }
.follow-name { color: var(--muted); }
.foot-follow-more { margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--edge-soft); color: var(--muted); font-size: 12px; }
.foot-legal a:hover { color: var(--ink); }
.foot-legal .back-top { margin-left: auto; }
@media (max-width: 1199px) {
  .foot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 899px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } }
@media (max-width: 479px) { .foot-legal .back-top { margin-left: 0; } }
/* 紧凑页脚（火力坊、收银台）：一行品牌和链接，一行公司和备案号，紧跟着、不加横线 */
.site-foot.is-compact { padding-block: 28px 32px; color: var(--muted); font-size: 13px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.foot-copy { color: var(--ink-soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a:hover { color: var(--ink); }
.site-foot.is-compact .foot-legal { gap: 4px 20px; margin-top: 8px; padding-top: 0; border-top: 0; }
@media (max-width: 639px) { .site-foot.is-compact .foot-legal { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 14px; } }
@media (max-width: 767px) { .site-foot.is-compact .foot-row { align-items: flex-start; flex-direction: column; gap: 8px; } }