/* generated by scripts/build_css_bundle.py — edit the source files */

/* ---- styles/layer01.css ---- */
/* generated by scripts/split_css_layer.py — edit the source file */
/* ── layer01.css · L1-L390
   职责：通用工具类 + 设计变量 + 布局与导航
   主要内容：通用工具类 20 条、设计变量 14 条、布局与导航 12 条
   层叠是承重的（1255 条顶层规则里 74 处后条覆盖前条），本块只能整体移动，
   不要单独抽规则到别处 —— 需要调整请改 style.css 后重新切分。
   来源：static/style.css，索引：static/style.layers.tsv */

:root{
  /* 层级阶梯（单一真源）。新层级一律从这里取，不要再写魔法数字。
     两次真实故障决定了这个顺序：
     1. 彩带/星火曾写死 99998/99999，盖住了 AICHAT 的斜杠菜单和弹窗
        （「粒子叠在菜单上面、好丑好乱」）→ 爆裂层必须低于输入区与弹层。
     2. 改成 10 之后又掉到顶栏（1000）下面，品牌标一点，粒子全糊在毛玻璃
        后面看不见（「爆炸粒子层在顶栏下面看不清楚」）→ 爆裂层必须高于顶栏。
     两个约束的交集就是 --z-burst：顶栏之上、输入区之下。 */
  --z-fx:10;            /* 内容层之上的局部特效（页面内装饰，不盖任何 UI） */
  --z-chrome:1000;      /* 顶栏 */
  --z-burst:1100;       /* 点击爆裂 / 彩带 / 星火：盖过顶栏，但不盖输入区与弹层 */
  --z-composer:1200;    /* AICHAT 输入区（斜杠菜单 30 在其内部） */
  --z-float:1600;       /* 悬浮按钮 */
  --z-modal:2000;       /* 模态框 */
  --z-popover:3000;     /* 下拉菜单 / toast */
  --z-cursor:100000;    /* 光标跟随 */

  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Segoe UI Emoji","Noto Color Emoji","Apple Color Emoji",sans-serif;
  --font-mono:"JetBrains Mono","Fira Code",Consolas,monospace;

  --bg-primary:#fbfbfd;
  --bg-secondary:#ffffff;
  --bg-tertiary:#f5f5f7;
  --bg-code:#f5f5f7;

  --text-primary:#1d1d1f;
  --text-secondary:#5f5f66;
  --text-muted:#6e6e73;

  /* 文档侧栏的玻璃底。各皮肤只换这一个令牌，不要再给 .sidebar 叠背景。 */
  --sidebar-surface:rgba(255,255,255,.48);


  --accent:#e7fbb0;
  --accent-hover:#f4ffd2;
  --accent-light:rgba(231,251,176,0.10);
  --accent-glow:rgba(231,251,176,0.35);

  --purple:#8b5cf6;
  /* --pink 曾被写成非法属性名 --rgba(229,249,168,.5)，从没生效过；
     admin-panel.js 有 10 处 var(--pink) 无兜底，一直静默失效。 */
  --pink:#ec4899;
  --blue:#3b82f6;
  --cyan:#06b6d4;
  --green:#10b981;
  --orange:#f59e0b;
  --red:#ef4444;
  /* --red 是**面**色（按钮底、边框、圆点），白字压在上面要求它够深；
     红**字**的需求正好相反：浅底要够深、深底要够亮。一个值同时满足两边
     是不可能的（#ef4444 在白底 3.76:1、在 vice 深底只有 2.92:1），
     所以拆成两个 token，谁也不去迁就谁。 */
  --red-text:#dc2626;

  --gradient-text:linear-gradient(90deg,#e7fbb0 0%,#ffd27f 38%,#ff8f9f 58%,#ffd27f 78%,#e7fbb0 100%);
  --gradient-strong:var(--gradient-text);
  --gradient-button:var(--accent);

  --border:rgba(0,0,0,0.06);
  --shadow:0 8px 30px rgba(0,0,0,0.04);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.06);

  --radius:18px;
  --radius-lg:26px;
  --radius-full:9999px;
  --radius-bubble:20px;
  --radius-bubble-tail:6px;
  --radius-control:8px;

  --transition:0.4s cubic-bezier(0.32,0.72,0,1);

  --safe-top:env(safe-area-inset-top,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);

  --nav-height:calc(64px + var(--safe-top));
  /* 胶囊顶栏的实际占位高度。
     胶囊是 position:fixed，top 与 height 都写死在 _site-navbar-capsule.css 里：
       桌面 top:12px height:60px  → 实占 72px
       ≤768px top:8px  height:54px → 实占 62px
     而 --nav-height 一直是 64px。凡是拿 --nav-height 让位的元素，
     在桌面上会少让 8px、在手机上会多让 2px —— 标题贴到胶囊下面就是这么来的。
     这里把真实占位单独做成 token，让位逻辑改用它，不动 --nav-height
     （它还被大量 100vh - ... 的布局算式引用，语义是「导航区带」不是「胶囊底边」）。 */
  --capsule-top:12px;
  --capsule-height:60px;
  --capsule-gutter:10px;
  --capsule-occupied:calc(var(--capsule-top) + var(--capsule-height) + var(--safe-top));
  --capsule-clearance:calc(var(--capsule-occupied) + var(--capsule-gutter));
  --sidebar-width:280px;
  --toc-width:240px;

  --glass-bg:rgba(255,255,255,0.75);
  --glass-border:rgba(0,0,0,0.06);
  /* 输入控件（input / textarea）描边真源。默认不画整圈，只留填充底 + 一道极淡下缘。 */
  --field-rule:rgba(0,0,0,0.10);
  --field-ring:rgba(0,0,0,0.14);
  --field-fill:rgba(0,0,0,0.04);
  --field-fill-focus:rgba(0,0,0,0.06);
  --glass-blur:blur(30px);
  --glass-shadow:0 10px 30px rgba(0,0,0,0.03);
  /* ---- Apple pill（毛玻璃胶囊）----
     数值取自 apple.com/apple-homeview 的实测计算样式，不是照源码猜的：
       .all-access-pass__background → backdrop-filter: blur(7px)，
         background: rgba(232,232,237,.72)，56px 高，border-radius: 28px
         （= 高度的一半），border: 0，box-shadow: none；
       .tabnav-platter → blur(20px) + border-radius: 999px 的导航变体。
     本站是深色 hero，浅色 scrim 直接照搬会发白，所以只把 alpha 降到 .14
     并补一条低对比发丝线；模糊半径、饱和度与「半径 = 高度一半」的比例照抄。
     铁律：胶囊的圆角永远是高度的一半，不写死 px（写死会在换高度时露方角）。 */
  --pill-blur:7px;
  --pill-blur-nav:20px;
  --pill-saturate:180%;
  --pill-scrim:rgba(255,255,255,.14);
  /* Apple 的浅色 scrim：rgba(232,232,237,.72)。首页实验室现在整屏是浅纸，
     深色画布用的 .14 白在这里会发灰，所以单独给一条浅底令牌。 */
  --pill-scrim-light:rgba(232,232,237,.72);
  --pill-scrim-raised:rgba(255,255,255,.22);
  --pill-hairline:rgba(255,255,255,.16);
  --pill-hairline-strong:rgba(255,255,255,.26);
  --pill-height:56px;
  --pill-height-sm:44px;
  --pill-radius:calc(var(--pill-height) / 2);
  --pill-radius-sm:calc(var(--pill-height-sm) / 2);
  /* 浮层（菜单/下拉/对话框）的底色与描边真源。
     放在这里的原因：主站与 AICHAT 都加载 style.css，而 AICHAT 不加载
     _glass-unified.css —— 只写在后者会让 AICHAT 整页取不到变量、退回硬编码兜底，
     浅色主题下就会串成深色。_glass-unified.css 只保留「Vice 画布上更实一点」的
     场景覆盖，不再重复定义基准值。 */
  --srb-popover-bg: rgba(255,255,255,.97);
  --srb-popover-border: rgba(35,30,55,.14);

  --overlay-bg: rgba(0,0,0,0.15);


  --srb-hr-line: rgba(0,0,0,0.18);

  --srb-strong-color: var(--srbill-bold-color, var(--theme-solid, rgb(231, 251, 176)));


  --srb-confetti-1:#e7fbb0; /* 冰镇杨桃绿 */
  --srb-confetti-2:#c9f06a; /* 青柠 */
  --srb-confetti-3:#fdf7c3; /* 柠檬冰 */
  --srb-confetti-4:#ffd27f; /* 杏金 */
  --srb-confetti-5:#ff9f5a; /* 暮橙 */
  --srb-confetti-6:#ff9fc9; /* 樱粉 */
  --srb-confetti-7:#ff5f9e; /* 霓虹玫红 */
  --srb-confetti-8:#ff2e63; /* Vice 撞色珊瑚红 */
}

/* --accent 是历史别名，真源是 --theme-solid（皮肤强调色）。
   它曾长期停在 hero 的杨桃绿：评论排序「最热」、光标等组件在 paper/minimal
   等皮肤下都不跟随强调色（截图里纸面主题的选中项仍是浅绿）。
   只在皮肤已确定后做别名，首帧（无 data-bold-color）仍用默认色，避免闪色。 */
:root[data-bold-color]:not([data-bold-color="vice"]) {
  --accent: var(--theme-solid);
  --accent-hover: color-mix(in srgb, var(--theme-solid) 88%, #fff);
  --accent-light: color-mix(in srgb, var(--theme-solid) 10%, transparent);
  --accent-glow: color-mix(in srgb, var(--theme-solid) 35%, transparent);
}

/* 关闭「加粗使用强调色」→ 加粗跟随正文颜色。
   必须写在 :root[attr] 上：特异性(0,2,0) 高于皮肤层的 html[data-aichat-skin](0,1,1)。 */
:root[data-bold-accent="0"] { --srb-strong-color: currentColor; }

/* 正文内链接：默认跟随强调色；浅色画布上跟随「压深后的强调色」，
   极简黑白例外——它的强调色是近黑，链接仍要能看出来是链接，走蓝。 */
:root { --srb-link-color: var(--srbill-bold-color, var(--theme-solid, var(--accent))); }
:root[data-theme="light"]:not([data-bold-color="paper"]) { --srb-link-color: var(--srb-strong-color, var(--theme-solid)); }
:root[data-theme="light"][data-bold-color="minimal"] { --srb-link-color: var(--theme-solid); }

/* 浅色画布上的「强调色文字」：同一个色相当按钮底色没问题，当文字就偏浅。
   杨桃绿 #7CB342 压在 #fbfbfd 上只有 2.42:1，加粗几乎读不出来。
   这里按皮肤把强调色压深到 ≥4.5:1，色相不变；深色画布完全不动。
   混合比例是逐皮肤算过的（不是拍脑袋），改色号时请同步重算。 */
:root[data-theme="light"]:not([data-bold-color="paper"]) {
  --srb-strong-color: color-mix(in srgb, var(--srbill-bold-color, var(--theme-solid, #111111)) var(--srb-strong-mix, 100%), #000000);
}
:root[data-theme="light"][data-bold-color="lime"]    { --srb-strong-mix: 65%; }
:root[data-theme="light"][data-bold-color="yellow"]  { --srb-strong-mix: 60%; }
:root[data-theme="light"][data-bold-color="purple"]  { --srb-strong-mix: 85%; }
:root[data-theme="light"][data-bold-color="blue"]    { --srb-strong-mix: 85%; }
:root[data-theme="light"][data-bold-color="pink"]    { --srb-strong-mix: 85%; }
:root[data-theme="light"][data-bold-color="custom"]  { --srb-strong-mix: 55%; }

[data-theme="dark"]{
  --field-rule:rgba(255,255,255,0.14);
  --field-ring:rgba(255,255,255,0.20);
  --field-fill:rgba(255,255,255,0.06);
  --field-fill-focus:rgba(255,255,255,0.09);
  --bg-primary:#000000;
  --bg-secondary:#000000;
  --bg-tertiary:#191923;
  --bg-code:#16161d;

  --text-primary:#eaeaff;
  --text-secondary:#a5a5c0;

  --text-muted:#9ca3af;
  --red-text:#f87171;

  --border:rgba(255,255,255,0.10);
  --shadow:0 8px 24px rgba(0,0,0,0.30);
  --shadow-lg:0 18px 48px rgba(0,0,0,0.42);

  --glass-bg:rgba(18,18,24,0.34);
  --glass-border:rgba(255,255,255,0.10);
  --glass-shadow:0 10px 28px rgba(0,0,0,0.34);
  --sidebar-surface:rgba(28,28,30,0.38);
  --srb-popover-bg: rgba(24,24,30,.95);
  --srb-popover-border: rgba(229,249,168,.22);

  --overlay-bg: rgba(0,0,0,0.62);

  --srb-hr-line: rgba(255,255,255,0.26);
}

.nav-title-text .brand-main{
  background:var(--gradient-text);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:color-flow 6s linear infinite;
}
.nav-title-text .brand-hub{
  margin-left:2px;
  padding:2px 8px;
  border-radius:8px;
  font-weight:900;
  background:rgba(231,251,176,0.18);
  color:var(--text-primary);
  border:1px solid var(--glass-border);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color:var(--bg-primary);
  min-height:100%;
  -webkit-overflow-scrolling:touch;
}

body{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--text-primary);
  background:var(--bg-primary);
  overflow-x:hidden;
  min-height:100vh;
}

#app{min-height:100vh}

a{color:var(--accent);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--accent-hover)}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-full);opacity:0.5}

.lucide{stroke:currentColor;vertical-align:middle;stroke-width:2px}
.icon-sm{width:16px;height:16px}
.icon-xs{width:14px;height:14px}

.navbar{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav-height);
  z-index:1000;
  background:rgba(255,255,255,.35);
  border:none;
  border-bottom:none;
  -webkit-backdrop-filter: blur(34px) saturate(205%);
  backdrop-filter:blur(34px) saturate(205%);
  -webkit-backdrop-filter:blur(34px) saturate(205%);
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  outline:none;
  padding-top:var(--safe-top);
  padding-left:24px;
  padding-right:24px;
  color:var(--text-secondary);
}
.navbar::before{
  content:"";
  position:absolute;left:0;right:0;top:0;bottom:0;
  background:transparent;
  border-bottom:none;
  -webkit-backdrop-filter: none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  z-index:-1;
  pointer-events:none;
}
[data-theme="dark"] .navbar{
  background:rgba(28,30,40,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}
[data-theme="dark"] .navbar::before{
  background:transparent;
  border-bottom:none;
  box-shadow:none;
  -webkit-backdrop-filter: none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.nav-container{
  max-width:1400px;height:100%;
  margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:1;
}

#read-progress{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:2px;
  background:transparent;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
#read-progress.show{opacity:1}
#read-progress > div{
  height:100%;
  width:0%;
  background:var(--gradient-button);
  transition:width .08s linear;
}
@media (min-width:769px){
  body[data-page-kind="doc"] #read-progress{display:none}
}

.nav-brand{
  display:flex;align-items:center;gap:12px;
  flex-wrap:nowrap;cursor:default;
  animation:float-y 5s ease-in-out infinite
}
.my-custom-icon{
  width:52px;height:52px;margin-right:8px;
  cursor:pointer;pointer-events:auto;
  background:var(--gradient-text);
  background-size:200% auto;
  /* 这里原本指向 /static/my-heart.png（2048x2048、1.86MB 的纯装饰图）。
     那个引用从来没生效过：AI 端由 ai-chat-unified.css 改成 brand-mask-128
     （后加载覆盖），agent-lab 用行内 style 属性直接压过样式表，
     主站在同名规则后面也被 brand-mask-128 接管。
     实测五个壳（home/doc/aichat/debate/agent-lab）都不再请求该文件。
     一并删掉，免得哪天 CSS 顺序一变，1.86MB 忽然回到首屏路径上。 */
  animation:color-flow 6s linear infinite;
  transition:transform .3s;
}
.nav-brand:hover .my-custom-icon{transform:scale(1.15) rotate(-12deg)}
.nav-title-text{
  font-size:26px;font-weight:800;
  cursor:pointer;pointer-events:auto;
  letter-spacing:-0.5px;
  background:var(--gradient-text);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:color-flow 6s linear infinite;
  white-space:nowrap;
}

.nav-menu{display:flex;align-items:center;gap:8px}
.nav-link{
  display:flex;align-items:center;gap:6px;
  padding:8px 16px;
  color:inherit;
  font-size:15px;font-weight:600;
  border-radius:8px;
  transition:var(--transition);
  border:1px solid transparent;
  white-space:nowrap;
}
.nav-link:hover{
  background:rgba(255,255,255,0.22);
  border-color:var(--glass-border);
}
[data-theme="dark"] .nav-link:hover{ background:rgba(255,255,255,0.07); }

.nav-right{display:flex;align-items:center;gap:12px;margin-left:24px}

/* ---- styles/layer02.css ---- */
/* generated by scripts/split_css_layer.py — edit the source file */
/* ── layer02.css · L391-L1545
   职责：通用工具类 + 文档目录 + 正文排版
   主要内容：通用工具类 181 条、文档目录 50 条、正文排版 29 条
   层叠是承重的（1255 条顶层规则里 74 处后条覆盖前条），本块只能整体移动，
   不要单独抽规则到别处 —— 需要调整请改 style.css 后重新切分。
   来源：static/style.css，索引：static/style.layers.tsv */

.search-box{position:relative}
.search-box input{
  width:200px;
  padding:8px 12px 8px 36px;
  background:var(--field-fill);
  border:0;
  border-bottom:1px solid var(--field-rule);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  border-radius:var(--radius-full);
  color:var(--text-primary);
  font-size:14px;
  outline:none;
  transition:var(--transition);
}
.search-box input:focus {
  width: 260px;
  border-bottom-color: transparent;
  box-shadow: 0 0 0 2px var(--field-ring);
}
.search-box .search-icon{
  position:absolute;left:12px;top:50%;
  transform:translateY(-50%);
  color:var(--text-muted);
  pointer-events:none
}

.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;background:none;border:none;cursor:pointer;z-index:1001}
.nav-toggle span{width:22px;height:2px;border-radius:2px;transition:var(--transition);background:var(--gradient-text);background-size:200% auto;animation:color-flow 6s linear infinite}

.theme-group{
  display:flex;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  border-radius:8px;
  padding:4px;
}
.theme-btn{
  padding:6px 10px;
  background:none;border:none;border-radius:6px;
  cursor:pointer;font-size:14px;
  opacity:.6;color:var(--text-primary);
  transition:var(--transition);
  display:flex;align-items:center;justify-content:center;
}
.theme-btn:hover{opacity:1;background:rgba(0,0,0,0.06)}
[data-theme="dark"] .theme-btn:hover{background:rgba(255,255,255,0.08)}
.theme-btn.active{
  background:var(--bg-primary);
  box-shadow:0 1px 3px rgba(0,0,0,0.12);
  opacity:1;color:var(--accent);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 20px;font-size:14px;font-weight:700;
  border-radius:10px;
  border:1px solid var(--glass-border);
  cursor:pointer;
  transition:var(--transition);
  font-family:var(--font-sans);
  background:var(--glass-bg);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  box-shadow:var(--glass-shadow);
  white-space:nowrap;
}
.btn-primary{
  color:#fff !important;
  border-color:rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(135deg,rgba(231,251,176,0.45) 0%,rgba(231,251,176,0.18) 100%),
    var(--glass-bg) !important;
}

.btn-primary:hover{box-shadow:0 2px 6px rgba(0,0,0,.18), var(--glass-shadow)}
.btn-secondary,.btn-outline{color:var(--text-primary) !important}
.btn-secondary:hover,.btn-outline:hover{border-color:var(--accent)}
.btn-sm{padding:6px 12px;font-size:13px}
.btn-block{width:100%}
.btn-danger{background:var(--red);border-color:transparent;color:#fff}

.btn-icon{
  width:32px;height:32px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;color:var(--text-secondary);
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
}
.btn-icon:hover{background:rgba(0,0,0,0.06);border-color:var(--glass-border);color:var(--text-primary)}
[data-theme="dark"] .btn-icon:hover{background:rgba(255,255,255,0.08)}

.hero{
  min-height:100vh;
  width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:0 24px;
  padding-bottom:calc(80px + var(--safe-bottom));
  position:relative;overflow:hidden;z-index:1;
}
.hero-content{
  position:relative;z-index:10;
  max-width:1000px;width:100%;
  display:flex;flex-direction:column;align-items:center
}
.hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none}

.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 22px;
  background:var(--accent-light);
  border:1px solid var(--accent);
  border-radius:50px;
  font-size:15px;font-weight:700;color:var(--accent);
  margin-bottom:32px;
  cursor:pointer;
  transition:var(--transition);
  user-select:none;
}
.hero-badge:hover{background:var(--accent);color:var(--theme-fg,#fff);transform:scale(1.05)}
.hero-badge-dot{width:10px;height:10px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}

.hero-title{
  font-size:clamp(3.0rem,10vw,6.2rem);
  font-weight:900;
  line-height:1.1;
  margin-bottom:18px;
  letter-spacing:-0.03em;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.hero-title .gradient{
  background:var(--gradient-text);
  background-size:200% auto;
  cursor:pointer;
  user-select:none;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:color-flow 6s linear infinite;
}
.hero-desc{
  font-size:clamp(1.1rem,3vw,1.45rem);
  color:var(--text-secondary);
  margin-bottom:44px;
  max-width:760px;
  line-height:1.7
}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}
.hero-actions .btn{padding:14px 26px;font-size:16px}

.features{padding:100px 24px;background:var(--bg-secondary);position:relative;z-index:10}
.section-inner{max-width:1200px;margin:0 auto}
.section-title{text-align:center;font-size:2.4rem;font-weight:900;margin-bottom:14px}
.section-desc{text-align:center;color:var(--text-secondary);font-size:1.12rem;margin-bottom:56px}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.feature-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  box-shadow:var(--glass-shadow);
  padding:34px;
  border-radius:var(--radius-lg);
  transition:var(--transition);
  cursor:pointer;
}
.feature-card:hover{transform:scale(.985);border-color:rgba(255,255,255,.18)}
.feature-icon{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;
  background:var(--accent-light);
  border-radius:16px;
  color:var(--accent);
  margin-bottom:18px
}
.feature-icon svg{width:32px;height:32px}
.feature-title{font-size:20px;font-weight:900;margin-bottom:10px}
.feature-desc{color:var(--text-secondary);font-size:15px;line-height:1.75}

/* 实验室（展览 + 横向滑动）的几何/材质/圆点胶囊归 static/styles/_lab-showcase.css
   独占（含 .app-card / .apps-grid）；这里只留展位文案的排版基线。 */
.app-info h3{font-size:18px;font-weight:900;margin-bottom:6px;color:var(--text-primary)}
.app-info p{font-size:14px;color:var(--text-secondary);line-height:1.55;margin:0}

.docs-catalog{padding:100px 24px;position:relative;z-index:10}
.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.doc-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  box-shadow:var(--glass-shadow);
  border-radius:var(--radius);
  padding:26px;
  cursor:pointer;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.doc-card::before{
  content:"";
  position:absolute;top:0;left:0;
  width:100%;height:4px;
  background:var(--gradient-button);
  transform:scaleX(0);
  transition:transform var(--transition)
}
.doc-card:hover{border-color:rgba(255,255,255,.18);transform:scale(.985)}
.doc-card:hover::before{transform:scaleX(1)}
.doc-card-title{font-weight:900;margin-bottom:6px;font-size:20px}
.doc-card-count{font-size:14px;color:var(--text-muted)}

.continue-section{padding:30px 0 10px}
.continue-title{font-size:1.35rem;font-weight:900;margin-bottom:14px}
.continue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.continue-item{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  border-radius:14px;
  padding:14px 16px;
  cursor:pointer;
  transition:var(--transition);
}
.continue-item:hover{border-color:rgba(255,255,255,.18);transform:scale(.985)}
.continue-name{font-weight:900;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.continue-path{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.docs-layout { flex-direction: row !important;
  display:flex;
  min-height:100vh;
  position:relative;
  z-index:10;
  padding-top:var(--nav-height);
  background:var(--bg-primary)
}
.sidebar{
  position:fixed;top:var(--nav-height);left:0;
  width:var(--sidebar-width);
  height:calc(100vh - var(--nav-height));
  background:var(--glass-bg);
  border-right:1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  overflow-y:auto;
  z-index:100;
  transition:transform var(--transition);
  display:flex;flex-direction:column;
  padding-bottom:20px;
}
.sidebar-header{
  padding:16px;
  border-bottom:1px solid var(--glass-border);
  position:sticky;top:0;
  background:var(--glass-bg);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  z-index:10
}
.sidebar-actions{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  border-bottom:1px solid var(--glass-border);
  overflow-x:auto
}
.sidebar-actions::-webkit-scrollbar{display:none}
.sidebar-nav{padding:16px;flex:1;overflow-y:auto}

.nav-folder{margin-bottom:4px}
.folder-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  border-radius:9999px;
  cursor:pointer;
  font-size:14px;font-weight:900;
  color:var(--text-secondary);
  transition:var(--transition);
  user-select:none;
}
.folder-header:hover{background:rgba(0,0,0,0.06);color:var(--text-primary)}
[data-theme="dark"] .folder-header:hover{background:rgba(255,255,255,0.08)}
.folder-icon{font-size:10px;transition:transform .2s;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Symbol","Segoe UI",system-ui,sans-serif;font-variant-emoji:text;-webkit-font-feature-settings:normal;color:var(--text-secondary);line-height:1;width:12px;text-align:center;outline:none}
.nav-folder.open .folder-icon{transform:rotate(90deg)}
.folder-children{
  display:none;
  margin-left:12px;
  padding-left:12px;
  border-left:1px solid var(--glass-border)
}
.nav-folder.open>.folder-children{display:block}

.nav-file i, .folder-header i{ flex-shrink:0; }
.nav-file span, .folder-header span{ min-width:0; }

.nav-file{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  border-radius:9999px;
  cursor:pointer;
  font-size:14px;
  color:var(--text-secondary);
  transition:var(--transition);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-file:hover{background:rgba(0,0,0,0.06);color:var(--text-primary)}
[data-theme="dark"] .nav-file:hover{background:rgba(255,255,255,0.08)}
.nav-file.active{
  background:rgba(236,72,153,0.12);
  color:var(--rgba(229,249,168,.5));
  font-weight:900;
  border:1px solid rgba(236,72,153,0.25);
  border-radius:9999px;
}

.doc-main{flex:1;display:flex;margin-left:var(--sidebar-width);min-height:calc(100vh - var(--nav-height))}
.doc-content{
  flex:1;
  max-width:900px;
  padding:40px;

  --doc-gutter-left:40px;
  --doc-gutter-right:40px;
  padding-bottom:calc(56px + env(safe-area-inset-bottom)) !important;
  margin:0 auto;
  background:transparent
}

.doc-header{margin-bottom:32px;padding-bottom:22px;border-bottom:1px solid var(--glass-border)}
.doc-title{font-size:2.4rem;font-weight:900;margin-bottom:12px}
.doc-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:var(--text-muted);font-size:14px}
.doc-actions{display:flex;gap:8px;margin-left:auto}

.doc-toc{
  width:var(--toc-width);
  padding:40px 20px;
  position:fixed;right:0;top:var(--nav-height);
  height:calc(100vh - var(--nav-height));
  overflow-y:auto;
  border-left:1px solid var(--glass-border);
}
.toc-title{
  font-size:12px;font-weight:900;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:16px
}
.toc-list{list-style:none}
.toc-item{margin-bottom:8px}
.toc-link{
  display:block;
  padding:6px 12px;
  font-size:13px;
  color:var(--text-muted);
  border-left:2px solid transparent;
  transition:var(--transition);
  border-radius:var(--radius-full, 9999px)
}
.toc-link:hover{color:var(--text-primary);background:rgba(0,0,0,0.04)}
[data-theme="dark"] .toc-link:hover{background:rgba(255,255,255,0.06)}
.toc-link.active{color:var(--accent);border-left-color:var(--accent);font-weight:900}
.toc-link.level-2{padding-left:12px}
.toc-link.level-3{padding-left:24px;font-size:12px}

.sidebar-toggle{
  display:none;
  position:fixed;
  bottom:calc(24px + var(--safe-bottom));
  left:calc(24px + var(--safe-left));
  width:56px;height:56px;
  background:var(--gradient-text);background-size:200% auto;animation:color-flow 6s linear infinite;
  color:#fff;border:none;
  border-radius:50%;
  cursor:pointer;
  box-shadow:var(--shadow-lg);
  z-index:1000;
  align-items:center;justify-content:center
}
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:var(--overlay-bg);
  z-index:90
}

.markdown-body{
  font-size:16px;

  line-height:1.7;
  color:var(--text-primary);
  overflow-wrap:break-word;
  word-break:break-word;
  background:transparent
}
.markdown-body p{margin:1em 0}
.markdown-body h1,.markdown-body h2,.markdown-body h3{
  margin-top:1.8em;
  margin-bottom:0.85em;
  font-weight:900
}
.markdown-body h1{font-size:2em}
.markdown-body h2{
  font-size:1.5em;
  border-bottom:1px solid var(--glass-border);
  padding-bottom:.35em
}
.markdown-body h3{font-size:1.25em}

.markdown-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.markdown-body code{
  background:rgba(0,0,0,0.06);
  padding:.2em .4em;
  border-radius:6px;
  font-family:var(--font-mono);
  font-size:.92em;
  color:var(--rgba(229,249,168,.5))
}
[data-theme="dark"] .markdown-body code{background:rgba(255,255,255,0.08)}

.markdown-body pre{
  position:relative;
  background:var(--bg-code);
  border-radius:var(--radius);
  padding:16px;
  padding-top:40px;
  overflow-x:auto;
  margin:1.5em 0;
  border:1px solid var(--glass-border)
}
.markdown-body pre code{background:none;padding:0;color:inherit;font-size:14px}

.code-copy-btn{
  position:absolute;top:8px;right:8px;
  padding:4px 10px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:8px;
  color:var(--text-secondary);
  font-size:12px;
  cursor:pointer;
  transition:var(--transition)
}
.code-copy-btn:hover{background:rgba(255,255,255,0.18);color:var(--text-primary)}
.code-copy-btn.copied{background:var(--green);color:#fff;border-color:transparent}

.markdown-body ul,
.markdown-body ol{
  padding-left:1.25em;
  margin:0.8em 0 1.1em
}
.markdown-body li{margin:0.35em 0}
.markdown-body li > ul,
.markdown-body li > ol{margin-top:0.35em}


.markdown-body hr{
  border:none !important;
  height:1px !important;
  background:var(--srb-hr-line) !important;
  border-radius:1px !important;
  margin:28px 0 !important;
}
/* 文档阅读列里的 --- 通栏：负外边距抵消 .doc-content 的左右内边距，
   再靠等量补回内边距把内容留在原位。左右内边距的唯一来源是
   .doc-content 上的 --doc-gutter-left/right，所以不会各写一套数字。
   只作用于文档语境，AICHAT 气泡内的 hr 不受影响。 */
.doc-content .markdown-body hr{
  margin-left:calc(-1 * var(--doc-gutter-left,0px)) !important;
  margin-right:calc(-1 * var(--doc-gutter-right,0px)) !important;
}

.markdown-body img{
  max-width:100%;
  height:auto;
  display:block;
  margin:14px auto;
  border-radius:12px;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  cursor:zoom-in
}


.srb-img-missing{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:14px auto;
  padding:6px 12px;
  border-radius:12px;
  border:1px dashed var(--glass-border);
  background:color-mix(in srgb,var(--text-primary) 4%,transparent);
  color:var(--text-muted);
  font-size:13px;
  line-height:1.5;
}

.markdown-body table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--glass-border);
  margin:16px 0;
  background:var(--glass-bg);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
}
.markdown-body th,
.markdown-body td{
  padding:10px 12px;
  border-bottom:1px solid var(--glass-border);
  border-right:1px solid var(--glass-border);
  text-align:left;
  vertical-align:top;
  font-size:14px
}
.markdown-body th{
  font-weight:900;
  color:var(--text-primary);
  background:rgba(231,251,176,0.10)
}

.markdown-body tr:last-child td{border-bottom:none}
.markdown-body td:last-child,
.markdown-body th:last-child{border-right:none}
.markdown-body .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.markdown-body strong{
  font-weight: 900 !important;
  color: var(--srb-strong-color, var(--theme-solid, var(--text-primary))) !important;
  -webkit-text-fill-color: var(--srb-strong-color, var(--theme-solid, var(--text-primary))) !important;
}
mark{background-color:rgba(255,235,59,0.25);color:inherit;padding:0 2px;border-radius:2px}

.wikilink{
  color:var(--purple);
  cursor:pointer;
  font-weight:900;
  border-bottom:2px solid var(--purple);
  transition:var(--transition)
}
.wikilink:hover{color:var(--rgba(229,249,168,.5));border-bottom-color:var(--rgba(229,249,168,.5))}


.callout{font-size:1rem}
.callout-tip{background:rgba(16,185,129,0.10);border-color:var(--green)}
.callout-note{background:rgba(59,130,246,0.10);border-color:var(--blue)}
.callout-warning{background:rgba(245,158,11,0.10);border-color:var(--orange)}
.callout-danger{background:rgba(239,68,68,0.10);border-color:var(--red)}


.doc-timestamps,
#comments-section,
.backlinks-section{
  margin-left:calc(-1 * var(--doc-gutter-left,0px));
  margin-right:calc(-1 * var(--doc-gutter-right,0px));
  padding-left:var(--doc-gutter-left,0px);
  padding-right:var(--doc-gutter-right,0px);
  border-top:1px solid var(--glass-border);
}
.doc-timestamps{
  margin-top:40px;padding-top:14px;
  display:flex;gap:20px;flex-wrap:wrap;
  font-size:12px;color:var(--text-muted);
}
#comments-section{margin-top:20px;padding-top:20px}
.backlinks-section{margin-top:60px;padding-top:30px}
.backlinks-title{font-size:16px;font-weight:900;margin-bottom:16px;color:var(--text-secondary)}
.backlinks-list{display:flex;flex-wrap:wrap;gap:10px}
.backlink-item{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  border-radius:var(--radius-full);
  font-size:13px;
  color:var(--text-secondary);
  cursor:pointer;
  transition:var(--transition)
}
.backlink-item:hover{border-color:rgba(231,251,176,0.35);color:var(--accent)}

.modal{
  position:fixed;inset:0;
  z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  opacity:0;visibility:hidden;
  transition:var(--transition)
}
.modal.show{opacity:1;visibility:visible}
.modal-overlay{
  position:absolute;inset:0;
  background:var(--overlay-bg);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.modal-box{
  position:relative;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  transform:scale(.95) translateY(10px);
  transition:transform var(--transition)
}
.modal.show .modal-box{transform:scale(1) translateY(0)}
.modal-lg .modal-box{max-width:1000px;height:85vh;display:flex;flex-direction:column}

.modal-search-box{
  max-width:600px;
  height:70vh;
  max-height:70vh;
  display:flex;
  flex-direction:column;
}
.modal-header{
  padding:20px 24px;
  border-bottom:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:space-between
}
.modal-header h2{font-size:18px;font-weight:900;display:flex;align-items:center;gap:8px}
.modal-close{
  width:32px;height:32px;
  background:rgba(0,0,0,0.06);
  border:1px solid var(--glass-border);
  border-radius:50%;
  cursor:pointer;
  color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center
}
[data-theme="dark"] .modal-close{background:rgba(255,255,255,0.08)}

.modal-body{
  padding:24px;
  overflow-y:auto;
  flex:1;
  min-height:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.modal-footer{
  padding:16px 24px;
  border-top:1px solid var(--glass-border);
  display:flex;justify-content:flex-end;gap:12px
}

.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:14px;font-weight:900;margin-bottom:8px;color:var(--text-secondary)}
.form-group input,.form-group textarea{
  width:100%;
  padding:11px 18px;
  background:var(--field-fill);
  border:0;
  border-bottom:1px solid var(--field-rule);
  border-radius:9999px;
  color:var(--text-primary);
  font-size:14px;
  outline:none;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.form-group textarea{
  border-radius:18px;
  padding:13px 18px;
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea{background:rgba(255,255,255,0.06)}
.form-group input:focus,.form-group textarea:focus{
  border-bottom-color:transparent;
  background:var(--field-fill-focus);
  box-shadow:0 0 0 2px var(--field-ring);
  outline:none;
}
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus{
  border-bottom-color:transparent;
  background:var(--field-fill-focus);
  box-shadow:0 0 0 2px var(--field-ring);
  outline:none;
}

#search-results{display:block}
.search-result-item{
  padding:16px;
  background:rgba(0,0,0,0.03);
  border:1px solid var(--glass-border);
  border-radius:12px;
  cursor:pointer;
  transition:var(--transition);
  margin-bottom:12px
}
[data-theme="dark"] .search-result-item{background:rgba(255,255,255,0.05)}
.search-result-item:hover{border-color:rgba(231,251,176,0.35)}
.search-result-title{font-weight:900;margin-bottom:4px}
.search-result-path{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.search-result-snippet{font-size:13px;color:var(--text-secondary)}
.search-result-snippet mark{background:rgba(231,251,176,0.25);color:var(--accent);padding:0 2px;border-radius:2px}

.editor-body{display:flex;flex-direction:column;height:100%;padding:0!important}
.editor-toolbar{
  display:flex;gap:12px;
  padding:12px 16px;
  background:rgba(0,0,0,0.04);
  border-bottom:1px solid var(--glass-border);
  flex-wrap:wrap
}
[data-theme="dark"] .editor-toolbar{background:rgba(255,255,255,0.06)}
.editor-toolbar input{
  flex:1;min-width:200px;
  padding:8px 12px;
  background:var(--field-fill);
  border:0;
  border-bottom:1px solid var(--field-rule);
  border-radius:10px;
  color:var(--text-primary);
  font-size:14px
}
.toolbar-btns{display:flex;gap:4px;flex-wrap:wrap}
.toolbar-btns button{
  padding:6px 10px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:10px;
  cursor:pointer;
  color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center
}
.toolbar-btns button:hover{border-color:rgba(231,251,176,0.35);color:var(--accent)}

.editor-container{flex:1;display:flex;overflow:hidden}
.editor-pane{flex:1;display:flex;flex-direction:column;overflow:hidden}
.editor-pane textarea{
  flex:1;
  padding:20px;
  background:transparent;
  border:none;
  border-right:1px solid var(--glass-border);
  color:var(--text-primary);
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.6;
  resize:none;
  outline:none
}
.preview-pane{
  background:rgba(0,0,0,0.03);
  overflow-y:auto;
  padding:20px;
  -webkit-overflow-scrolling:touch
}
[data-theme="dark"] .preview-pane{background:rgba(255,255,255,0.05)}

.admin-tabs{display:flex;gap:8px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--glass-border)}
.admin-tab{padding:8px 16px;background:none;border:1px solid var(--glass-border);border-radius:12px;cursor:pointer;font-size:14px;color:var(--text-secondary);transition:var(--transition)}
.admin-tab.active{background:var(--gradient-button);border-color:transparent;color:#fff}
.admin-list{display:flex;flex-direction:column;gap:8px}
.admin-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(0,0,0,0.03);border:1px solid var(--glass-border);border-radius:12px;gap:12px}
[data-theme="dark"] .admin-item{background:rgba(255,255,255,0.05)}
.admin-item-actions{display:flex;gap:8px}

.toast-container{
  position:fixed;
  top:calc(80px + var(--safe-top));
  right:calc(24px + var(--safe-right));
  z-index:3000;
  display:flex;flex-direction:column;gap:12px;
  pointer-events:none
}
.toast{
  padding:14px 20px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  border-radius:12px;
  box-shadow:var(--glass-shadow);
  border-left:4px solid var(--accent);
  animation:slideIn .3s ease;
  pointer-events:auto;
  color:var(--text-primary)
}
.toast.success{border-left-color:var(--green)}
.toast.error{border-left-color:var(--red)}
.toast.info{border-left-color:var(--blue)}

.float-menu{
  position:fixed;
  right:16px !important;
  bottom:calc(16px + env(safe-area-inset-bottom)) !important;
  z-index:2000
}
.float-menu-items{
  position:absolute;bottom:70px;right:0;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;visibility:hidden;
  transform:translateY(20px);
  transition:var(--transition)
}
.float-menu.open .float-menu-items{opacity:1;visibility:visible;transform:translateY(0)}
/* 菜单项材质 = 全站浮层唯一 token（--srb-popover-bg / --srb-popover-border）。
   不能用 var(--glass-bg)：文档页在 Vice 画布上把 --glass-bg 覆盖成
   rgba(20,18,30,.42) 的暗纱，菜单项就成了「半透明遮罩」——
   底色随背后内容变色，这正是反复被报的「奇怪的遮罩颜色」。
   浮层表面和阅读卡片不是同一种材质，别再共用同一个变量。 */
.float-menu-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:var(--srb-popover-bg, rgba(24,24,30,.95));
  border:1px solid var(--srb-popover-border, rgba(229,249,168,.22));
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  backdrop-filter: blur(28px) saturate(145%);
  box-shadow: var(--glass-shadow, 0 10px 28px rgba(0,0,0,.28));
  border-radius:12px;
  cursor:pointer;
  white-space:nowrap;
  transition:var(--transition);
  font-size:14px;
  color:var(--text-primary)
}
.float-menu-item:hover{border-color:var(--accent, #e7fbb0);transform:translateX(-4px)}
.float-menu-item svg,.float-menu-toggle svg{width:20px;height:20px}

.footer{padding:60px 24px;text-align:center;position:relative;z-index:10;padding-bottom:120px}
.footer-brand{
  font-size:22px;font-weight:900;margin-bottom:12px;
  background:var(--gradient-text);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:color-flow 6s linear infinite;
  display:inline-block
}
.footer-desc{color:var(--text-muted);margin-bottom:24px}
.footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.footer-links a{color:var(--text-secondary);font-size:14px}
.footer-links a:hover{color:var(--accent)}
.footer-copy{font-size:13px;color:var(--text-muted)}

.graph-controls{display:flex;gap:8px;margin-right:auto;margin-left:16px;align-items:center}
.modal-graph-box{max-width:82vw;width:900px;height:76vh}
.modal-graph-box .modal-header{display:flex;align-items:center}
.graph-body{padding:0!important;height:calc(100% - 60px)}
#graph-canvas{width:100%;height:100%;display:block;background:var(--bg-secondary);touch-action:none}
.zoom-slider{
  width:120px;margin-left:12px;cursor:pointer;
  -webkit-appearance:none;height:4px;
  background:rgba(0,0,0,0.12);
  border-radius:2px;outline:none
}
[data-theme="dark"] .zoom-slider{background:rgba(255,255,255,0.18)}
.zoom-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);
  cursor:pointer;
  box-shadow:0 0 10px var(--accent-glow)
}

.nav-apps-wrap{position:relative;display:flex;align-items:center}
.nav-apps-dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:260px;
  background:rgba(18,18,30,0.55);
  border:1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter:blur(28px) saturate(1.6);
  -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.35);
  padding:8px;
  display:none;
  z-index:1200
}
.nav-apps-wrap.open .nav-apps-dropdown{display:block}
.nav-app-item{
  display:flex;gap:12px;align-items:center;
  padding:10px 12px;border-radius:12px;
  cursor:pointer;transition:var(--transition);
  color:var(--text-primary)
}
.nav-app-item:hover{background:rgba(0,0,0,0.05)}
[data-theme="dark"] .nav-app-item:hover{background:rgba(255,255,255,0.08)}
.nav-app-item .app-emoji{
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-light);
  flex-shrink:0;font-size:18px
}
.nav-app-item .app-meta{display:flex;flex-direction:column;min-width:0}
.nav-app-item .app-title{font-weight:900;font-size:14px;line-height:1.2}
.nav-app-item .app-desc{font-size:12px;color:var(--text-muted);line-height:1.2;margin-top:3px}

#confetti-canvas{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:var(--z-burst);display:none}
#sparks-container{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:var(--z-burst);overflow:hidden;display:none}
.spark{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity}

.cursor,.cursor-follower{position:fixed;pointer-events:none;z-index:100000;border-radius:50%;opacity:0;transition:opacity .3s}
body.cursor-ready .cursor,body.cursor-ready .cursor-follower{opacity:1}
.cursor{width:8px;height:8px;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 10px var(--accent-glow)}
.cursor-follower{width:36px;height:36px;border:2px solid var(--accent);transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s}
.cursor-follower.hover{width:50px;height:50px;background:var(--accent-light)}
.cursor-follower.clicking{width:28px;height:28px}
@media (hover:none),(pointer:coarse){.cursor,.cursor-follower{display:none!important}}

.modal-image{z-index:4000}
.modal-image .modal-overlay{background:rgba(0,0,0,0.78)}
[data-theme="dark"] .modal-image .modal-overlay{background:rgba(0,0,0,0.82)}
.modal-image-inner{
  position:relative;
  max-width:96vw;
  max-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px
}
#modal-image-img{
  max-width:96vw;
  max-height:86vh;
  width:auto;height:auto;
  border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.2)
}
#modal-image-tip{
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translate(-50%,100%);
  font-size:12px;
  color:rgba(255,255,255,0.75);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.12)
}

@keyframes color-flow{0%{background-position:0% center}100%{background-position:200% center}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes slideIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}

@media (prefers-reduced-motion: reduce){
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .cursor,.cursor-follower{ display:none !important; }
  #confetti-canvas,#sparks-container{ display:none !important; }
}

:root{
  --fab-gap: 16px;
  --fab-bottom: calc(var(--fab-gap) + env(safe-area-inset-bottom, 0px));
}

.sidebar-header, .doc-header {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

:root[data-theme="light"] { --overlay-bg: rgba(0,0,0,0.12) !important; }
:root[data-theme="light"] .theme-group .theme-btn { color: rgba(26,26,46,0.88) !important; opacity: .78 !important; }
:root[data-theme="light"] .theme-group .theme-btn.active { color: var(--accent) !important; opacity: 1 !important; }
.hero-title { font-size: clamp(3.8rem, 13vw, 8.0rem) !important; letter-spacing: -0.04em !important; }
.hero { position: relative; }
.scroll-indicator { position: absolute !important; left: 50% !important; bottom: max(28px, calc(16px + env(safe-area-inset-bottom))) !important; transform: translateX(-50%) !important; z-index: 20; padding: 10px; cursor: pointer; }
.scroll-indicator i, .scroll-indicator svg { display: inline-block; color: var(--text-muted); opacity: .55; animation: arrow-float 2.4s ease-in-out infinite; transition: color .25s ease, opacity .25s ease; }
.scroll-indicator:hover i, .scroll-indicator:hover svg { color: var(--accent); opacity: 1; }
@keyframes arrow-float { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(10px); opacity: 1; } }
.hero-desc { min-height: 1.6em; }
.typewriter-cursor { display:inline-block; width:2px; height:1.1em; background-color: var(--accent); vertical-align:text-bottom; margin-left:4px; animation: blink-cursor .8s step-end infinite; }
@keyframes blink-cursor { 50% { opacity:0; } }
.spotlight-card { position: relative; overflow: hidden; }
.spotlight-card::before { content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; opacity:0; transition: opacity .3s ease; background: radial-gradient(600px circle at var(--mouse-x,0) var(--mouse-y,0), rgba(231,251,176,0.06), transparent 40%); z-index:1; }
[data-theme="dark"] .spotlight-card::before { background: radial-gradient(600px circle at var(--mouse-x,0) var(--mouse-y,0), rgba(255,255,255,0.06), transparent 40%); }
.spotlight-card:hover::before { opacity:1; }
.spotlight-card > * { position: relative; z-index:2; }
.apple-reveal { opacity:0; transform: translateY(40px); transition: opacity .8s cubic-bezier(.25,.1,.25,1), transform .8s cubic-bezier(.25,.1,.25,1); will-change: opacity, transform; }
.apple-reveal.visible { opacity:1; transform: translateY(0); }
.doc-toc ul, .doc-toc .toc-tree { position: relative !important; }
#toc-jelly { position: absolute; left: 0; width: 100%; border-left: 3px solid var(--accent); border-radius: var(--radius-full, 9999px); background: rgba(231,251,176,0.10); pointer-events: none; z-index: 0; opacity: 0; transition: top .35s cubic-bezier(.34,1.56,.64,1), height .25s cubic-bezier(.25,1,.5,1), opacity .2s ease; }
[data-theme="dark"] #toc-jelly { background: rgba(231,251,176,0.18); }
.toc-link.active { background: transparent !important; color: var(--accent) !important; font-weight: 700; }
.code-block { margin: 1.4em 0; border-radius: 14px; border: 1px solid var(--glass-border); overflow: hidden; box-shadow: var(--shadow); }
.code-titlebar { height: 38px; display:flex; align-items:center; gap:8px; padding:0 14px; border-bottom: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: saturate(190%) var(--glass-blur); -webkit-backdrop-filter: saturate(190%) var(--glass-blur); }
.code-titlebar .dot { width: 11px; height: 11px; border-radius: 50%; display:inline-block; }
.code-titlebar .dot.red { background:#ff5f57; }
.code-titlebar .dot.yellow { background:#febc2e; }
.code-titlebar .dot.green { background:#28c840; }
.code-lang { margin-left: 6px; font-size: 13px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.code-body { display:grid; grid-template-columns: auto 1fr; position: relative; overflow: hidden; transition: max-height .5s ease; }
.code-body.collapsed { max-height: 320px; }
.code-gutter { padding: 14px 10px 14px 12px; border-right: 1px solid var(--glass-border); user-select:none; text-align:right; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: rgba(120,120,140,0.85); background: rgba(0,0,0,0.02); }
[data-theme="dark"] .code-gutter { color: rgba(160,160,190,0.60); background: rgba(255,255,255,0.04); }
.code-gutter span { display:block; height:1.6em; }
/* gutter 的 1.6em 必须与 .code-block pre 的 line-height:1.6 保持一致，改一处需同步另一处 */
.code-block pre { margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; padding: 14px 16px !important; overflow-x: auto; font-size: 13px; line-height: 1.6; }
:root[data-theme="light"] .code-block { background:#f6f8fa; }
:root[data-theme="dark"] .code-block { background:#0f111a; }
.code-collapse-overlay { position:absolute; left:0; right:0; bottom:0; height: 140px; display:flex; align-items:flex-end; justify-content:center; padding-bottom: 16px; z-index:10; cursor:pointer; transition: opacity .3s ease; }
:root[data-theme="light"] .code-collapse-overlay { background: linear-gradient(to bottom, transparent, #f6f8fa 80%); }
:root[data-theme="dark"] .code-collapse-overlay { background: linear-gradient(to bottom, transparent, #0f111a 80%); }
.code-collapse-btn { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 20px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-primary); box-shadow: 0 4px 15px rgba(0,0,0,0.10); display:flex; align-items:center; gap:6px; }
.code-collapse-overlay:hover .code-collapse-btn { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231,251,176,0.18); }

[data-theme="dark"] .mathplot-block text { fill: rgba(255,255,255,0.8) !important; }
[data-theme="dark"] .mathplot-block .domain,
[data-theme="dark"] .mathplot-block .tick line { stroke: rgba(255,255,255,0.2) !important; }
[data-theme="dark"] .mathplot-block .origin { stroke: rgba(255,255,255,0.4) !important; }
.echarts-block { transition: var(--transition); }
.echarts-block:hover { border-color: rgba(231,251,176,0.4) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important; }

body.hide-toc { --toc-width: 0px; }
body.hide-toc .doc-toc { transform: translateX(100%); opacity: 0; pointer-events: none; }

.doc-toc { position: fixed !important; }
.doc-toc ul, .doc-toc .toc-tree { position: relative !important; }

#toc-jelly { font-size: 12px !important;
    margin-bottom: 8px !important; }

.toc-link {
    position: relative;
    z-index: 1;
}

.toc-link::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    border-left: 3px solid transparent;
    border-radius: var(--radius-full, 9999px);
    z-index: -1;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0;
}

.toc-link.active {
    background: transparent !important;
    border-left-color: transparent !important;
}
.toc-link.active::before {
    background: rgba(99, 102, 241, 0.10);
    border-left-color: var(--accent);
    opacity: 1;
}

[data-theme="dark"] .toc-link.active::before {
    background: rgba(99, 102, 241, 0.18);
}

.panel-toggle-btn {
    position: fixed; z-index: 900;
    width: 44px; height: 44px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-secondary); box-shadow: var(--shadow);

    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.panel-toggle-btn svg { transition: transform 0.4s ease; }
.panel-toggle-btn:hover { color: var(--accent); background: var(--bg-primary); }

#toggle-sidebar-btn::before {
    content: ""; position: absolute;
    top: -50vh; bottom: -50vh; left: -20px; right: -20px;
}
#toggle-sidebar-btn {
    bottom: 40px;
    left: calc(var(--sidebar-width) - 22px);
    border-radius: 50%;
    transform: translateX(-10px);
}

#toggle-sidebar-btn:hover {
    opacity: 1;
    transform: translateX(0);
}

body.hide-sidebar #toggle-sidebar-btn {
    left: -22px; border-radius: 0 22px 22px 0; padding-left: 20px;
}
body.hide-sidebar #toggle-sidebar-btn:hover { left: 0; }
body.hide-sidebar #toggle-sidebar-btn svg { transform: rotate(180deg); }

#toggle-toc-btn::before {
    content: ""; position: absolute;
    top: -50vh; bottom: -50vh; left: -20px; right: -20px;
}
#toggle-toc-btn {
    bottom: 40px;
    right: calc(var(--toc-width) - 22px);
    border-radius: 50%;
    transform: translateX(10px);
}

#toggle-toc-btn:hover {
    opacity: 1;
    transform: translateX(0);
}

body.hide-toc #toggle-toc-btn {
    right: -22px; border-radius: 22px 0 0 22px; padding-right: 20px;
}
body.hide-toc #toggle-toc-btn:hover { right: 0; }
body.hide-toc #toggle-toc-btn svg { transform: rotate(180deg); }

@media (max-width: 1150px) {
    #toggle-sidebar-btn, #toggle-toc-btn { font-size: 12px !important;
    margin-bottom: 8px !important; }
}

/* ---- styles/layer03.css ---- */
/* generated by scripts/split_css_layer.py — edit the source file */
/* ── layer03.css · L1546-L2018
   职责：通用工具类 + 布局与导航 + 正文排版
   主要内容：通用工具类 27 条、布局与导航 19 条、正文排版 19 条
   层叠是承重的（1255 条顶层规则里 74 处后条覆盖前条），本块只能整体移动，
   不要单独抽规则到别处 —— 需要调整请改 style.css 后重新切分。
   来源：static/style.css，索引：static/style.layers.tsv */
.doc-main, .sidebar, .doc-toc, .doc-content, .panel-toggle-btn {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.3, 1), padding 0.5s cubic-bezier(0.25, 1, 0.3, 1), margin 0.5s cubic-bezier(0.25, 1, 0.3, 1), max-width 0.5s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.4s ease !important;
}

body.hide-sidebar { --sidebar-width: 0px; }
body.hide-toc { --toc-width: 0px; }

.doc-content {
    margin: 0 !important;
    width: 100%;
    max-width: 900px;
}

body.hide-sidebar.hide-toc .doc-content {
    max-width: 1000px;
}

.doc-toc {
    transform: translateX(0);
}
body.hide-toc .doc-toc {
    transform: translateX(100%);
    opacity: 0;
}

@media (max-width: 1150px) {
    .doc-main { padding-right: 0 !important; }
    .doc-toc { font-size: 12px !important;
    margin-bottom: 8px !important; }
    #toggle-toc-btn, #toggle-sidebar-btn { font-size: 12px !important;
    margin-bottom: 8px !important; }
}

:root {
    --text-primary: #1d1d1f !important;
    --text-secondary: #86868b !important;
}
[data-theme="dark"] {
    --text-primary: #f5f5f7 !important;
    --text-secondary: #a1a1a6 !important;
}

/* 标题字重是"默认 800"，不是"谁都不许改"：这里不加权重压制标记，
   皮肤（如书纸 / 转录助手）要按自己的字阶接管时，靠更具体的选择器即可。
   .doc-title / .hero-title 自己的字重仍在下面单独声明。 */
h1, h2, h3, h4, h5, h6,
.doc-title, .hero-title, .section-title {
    letter-spacing: -0.035em !important;
    font-weight: 800;
}
/* 文档标题跟正文 h1 同为 700。英文在 800 的合成字重下会明显比中文粗一档，
   书纸主题曾因此看起来像“另写了一套标题字阶”。这里是唯一真源，皮肤不再覆盖。 */
.doc-title {
    font-weight: 700 !important;
}
.hero-title {
    letter-spacing: -0.045em !important;
    font-weight: 900 !important;
}

.markdown-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.markdown-body a {
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1px !important;
}

.doc-meta, .footer-copy, .continue-path, .search-result-path {
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
}

@media (min-width: 769px) {
    .sidebar { transform: translateX(0); opacity: 1; }
    body.hide-sidebar .sidebar { transform: translateX(-100%); opacity: 0; pointer-events: none; }
}

:root {
    --text-primary: #111111 !important;
    --text-secondary: #55555e !important;
    --glass-border: rgba(0,0,0,0.15) !important;
}

[data-theme="dark"] {
    --text-primary: #e5e5ea !important;
    --text-secondary: #98989d !important;
    --bg-code: #16161e !important;
    --glass-border: rgba(255,255,255,0.12) !important;
}

.nav-file.active {
    background: rgba(99, 102, 241, 0.15) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
}
.toc-link.active {
    color: var(--accent) !important;
    font-weight: 800 !important;
}

.markdown-body pre {
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}

.markdown-body pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.markdown-body pre::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.markdown-body pre::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
.markdown-body pre::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .markdown-body pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .markdown-body pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

:root[data-theme="light"] .markdown-body pre code { color: #24292f !important; }

:root[data-theme="light"] .hljs-keyword,
:root[data-theme="light"] .hljs-built_in { color: #cf222e !important; font-weight: 600 !important; }

:root[data-theme="light"] .hljs-string,
:root[data-theme="light"] .hljs-meta .hljs-string { color: #116329 !important; }

:root[data-theme="light"] .hljs-title,
:root[data-theme="light"] .hljs-title.class_,
:root[data-theme="light"] .hljs-title.function_,
:root[data-theme="light"] .hljs-name { color: #8250df !important; font-weight: 600 !important; }

:root[data-theme="light"] .hljs-variable,
:root[data-theme="light"] .hljs-attr,
:root[data-theme="light"] .hljs-property,
:root[data-theme="light"] .hljs-params { color: #0550ae !important; }

:root[data-theme="light"] .hljs-number,
:root[data-theme="light"] .hljs-literal { color: #e36209 !important; }

:root[data-theme="light"] .hljs-comment { color: #6e7781 !important; font-style: italic !important; }

:root[data-theme="dark"] .markdown-body pre code { color: #e6edf3 !important; }

:root[data-theme="dark"] .hljs-keyword,
:root[data-theme="dark"] .hljs-built_in { color: #ff7b72 !important; font-weight: 600 !important; }

:root[data-theme="dark"] .hljs-string,
:root[data-theme="dark"] .hljs-meta .hljs-string { color: #7ee787 !important; }

:root[data-theme="dark"] .hljs-title,
:root[data-theme="dark"] .hljs-title.class_,
:root[data-theme="dark"] .hljs-title.function_,
:root[data-theme="dark"] .hljs-name { color: #d2a8ff !important; font-weight: 600 !important; }

:root[data-theme="dark"] .hljs-variable,
:root[data-theme="dark"] .hljs-attr,
:root[data-theme="dark"] .hljs-property,
:root[data-theme="dark"] .hljs-params { color: #79c0ff !important; }

:root[data-theme="dark"] .hljs-number,
:root[data-theme="dark"] .hljs-literal { color: #ffa657 !important; }

:root[data-theme="dark"] .hljs-comment { color: #8b949e !important; font-style: italic !important; }

@keyframes shake-energetic{
  0%{ transform: rotate(0deg) scale(1); }
  20%{ transform: rotate(-12deg) scale(1.15); }
  40%{ transform: rotate(12deg) scale(1.15); }
  60%{ transform: rotate(-8deg) scale(1.12); }
  80%{ transform: rotate(8deg) scale(1.12); }
  100%{ transform: rotate(0deg) scale(1); }
}
@keyframes charge-up{
  0%{ transform: scale(1); filter: brightness(1); }
  60%{ transform: scale(0.85) rotate(4deg); filter: brightness(1.35); }
  100%{ transform: scale(0.85) rotate(4deg); filter: brightness(1.35); }
}
@keyframes explode-release{
  0%{ transform: scale(0.85); }
  45%{ transform: scale(1.45); }
  100%{ transform: scale(1); }
}
.anim-shake{ animation: shake-energetic 0.22s cubic-bezier(0.36,0.07,0.19,0.97) !important; }
.anim-charge{ animation: charge-up 0.42s cubic-bezier(0.68,-0.55,0.265,1.55) forwards !important; }
.anim-explode{ animation: explode-release 0.45s cubic-bezier(0.175,0.885,0.32,1.275) !important; }

.katex {
    color: var(--text-primary) !important;
}
.katex * {
    border-color: currentColor !important;
}

.markdown-body .katex,
.markdown-body .katex *{
  color: var(--text-primary) !important;
  border-color: currentColor !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-fill-color: currentColor !important;
}
.markdown-body strong .katex,
.markdown-body strong .katex *,
.markdown-body em .katex,
.markdown-body em .katex *,
.markdown-body mark .katex,
.markdown-body mark .katex *,
.markdown-body a .katex,
.markdown-body a .katex *{
  color: var(--text-primary) !important;
  border-color: currentColor !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-fill-color: currentColor !important;
}

.markdown-body .task-list-item{
  list-style: none !important;
}
.markdown-body li:has(> input[type="checkbox"]),
.markdown-body li:has(input[type="checkbox"]){
  list-style: none !important;
}
/* 任务清单复选框：几何/外观的唯一 owner。配色一律走 --theme-* 令牌，
   不再写死粉色 —— 之前 :checked 上的粉色光环既和主题打架，也是典型的
   「四周发光」AI 味。投影只用中性色。 */
.markdown-body input[type="checkbox"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 1.25em !important;
  height: 1.25em !important;
  margin-right: .6em !important;
  margin-left: -1.45em !important;
  border-radius: 7px !important;
  border: 1.8px solid var(--theme-border, rgba(255,255,255,.28)) !important;
  background: var(--theme-light, rgba(255,255,255,.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(0,0,0,.10) !important;
  transform: translateY(1px) !important;
  filter: none !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: border-color .18s ease, background-color .18s ease !important;
}
[data-theme="dark"] .markdown-body input[type="checkbox"]{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.24) !important;
}
.markdown-body input[type="checkbox"]:checked{
  border-color: var(--theme-solid) !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M3.2 8.2l3 3 6.4-6.4'/%3E%3C/svg%3E") center/72% 72% no-repeat,
    var(--theme-solid) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.14) !important;
  transform: translateY(1px) !important;
}
.markdown-body input[type="checkbox"]:disabled{
  opacity: 1 !important;
}

.graph-controls { display: flex; gap: 8px; margin-right: auto; margin-left: 16px; align-items: center; }
.modal-graph-box { max-width: 82vw; width: 900px; height: 76vh; }
.modal-graph-box .modal-header { display: flex; align-items: center; }
.graph-body { padding: 0 !important; height: calc(100% - 60px); }
#graph-canvas { width: 100%; height: 100%; display: block; background: var(--bg-secondary); touch-action: none; }
.zoom-slider { width: 120px; margin-left: 12px; cursor: pointer; -webkit-appearance: none; height: 4px; background: rgba(0,0,0,0.12); border-radius: 2px; outline: none; }
[data-theme="dark"] .zoom-slider { background: rgba(255,255,255,0.18); }
.zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 10px var(--accent-glow); }

[data-theme="dark"] .function-plot .grid line,
[data-theme="dark"] .mathplot-block .grid line { stroke: transparent !important; opacity: 0 !important; }

[data-theme="dark"] .function-plot .axis path.domain,
[data-theme="dark"] .mathplot-block .axis path.domain {
  stroke: rgba(255,255,255,0.18) !important;
  stroke-width: 1px !important;
}

[data-theme="dark"] .function-plot text,
[data-theme="dark"] .mathplot-block text {
  fill: rgba(255,255,255,0.72) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

[data-theme="dark"] .function-plot .origin,
[data-theme="dark"] .mathplot-block .origin {
  stroke: #ffffff !important;
  stroke-width: 2px !important;
  opacity: 1 !important;
}

[data-theme="dark"] .function-plot .grid line,
[data-theme="dark"] .mathplot-block .grid line {
  stroke: transparent !important;
  opacity: 0 !important;
}

[data-theme="dark"] .function-plot .axis path.domain,
[data-theme="dark"] .mathplot-block .axis path.domain {
  stroke: rgba(255,255,255,0.08) !important;
  stroke-width: 1px !important;
}

[data-theme="dark"] .function-plot text,
[data-theme="dark"] .mathplot-block text {
  fill: rgba(255,255,255,0.52) !important;
  font-weight: 400 !important;
  font-size: 11px !important;
}

[data-theme="dark"] .function-plot .origin,
[data-theme="dark"] .mathplot-block .origin {
  stroke: rgba(255,255,255,0.92) !important;
  stroke-width: 2px !important;
  opacity: 1 !important;
}

.dash24-wrap,
.dash24-card,
.dash24-panel,
#hardcore-user-chart-box,
#admin-beautiful-board {
  background: transparent !important;
  box-shadow: none !important;
}

.js-plotly-plot,
.plot-container,
.svg-container,
.gl-container,
.main-svg {
  background: transparent !important;
}

body.ai-page-mode #float-menu,
body.ai-page-mode #sakana-widget,
body.ai-page-mode #cursor,
body.ai-page-mode #cursor-follower,
body.ai-page-mode #confetti-canvas,
body.ai-page-mode #sparks-container{
  display:none !important;
}

#ai-page-shell{
  background: var(--bg-primary);
}
.ai-page-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 20px 10px;
  border-bottom:1px solid var(--glass-border);
  background:transparent;
}
.ai-page-topbar-left,
.ai-page-topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.ai-page-tip{
  font-size:12px;
  color:var(--text-muted);
}
#ai-page-root{
  height:calc(100vh - var(--nav-height) - 58px);
  min-height:700px;
}

.ai-page-layout{
  display:flex;
  height:100%;
  min-height:100%;
  overflow:hidden;
  background:var(--bg-primary);
}
.ai-page-sidebar{
  width:260px;
  border-right:1px solid var(--glass-border);
  background:rgba(12,14,24,0.58);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
.ai-page-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--bg-primary);
}
.ai-page-main .chat-container{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  -webkit-overflow-scrolling:touch;
}
.ai-page-main .chat-input-area{
  border-top:1px solid var(--glass-border);
  background:rgba(12,14,24,0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  padding:12px 16px calc(18px + env(safe-area-inset-bottom));
}
.ai-page-main .input-box{
  display:flex;
  gap:8px;
  align-items:flex-end;
  background:var(--bg-primary);
  border:0;
  border-radius:16px;
  padding:6px 10px;
}
.ai-page-main textarea{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text-primary);
  font-size:14px;
  resize:none;
  min-height:24px;
  max-height:120px;
  padding:6px 4px;
  font-family:inherit;
}
.ai-page-main .send-btn,
.ai-page-main .upload-btn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
  flex-shrink:0;
}
.ai-page-main .send-btn{
  background:var(--gradient-button);
  color:#fff;
}
.ai-page-main .send-btn.stop{
  background:var(--red);
}
.ai-page-main .upload-btn{
  background:transparent;
  color:var(--text-secondary);
}
.ai-page-main .upload-btn:hover{
  background:rgba(0,0,0,.05);
}

/* ---- styles/layer04.css ---- */
/* generated by scripts/split_css_layer.py — edit the source file */
/* ── layer04.css · L2019-L4000
   职责：通用工具类 + 布局与导航 + 正文排版
   主要内容：通用工具类 219 条、布局与导航 40 条、正文排版 25 条
   层叠是承重的（1255 条顶层规则里 74 处后条覆盖前条），本块只能整体移动，
   不要单独抽规则到别处 —— 需要调整请改 style.css 后重新切分。
   来源：static/style.css，索引：static/style.layers.tsv */
.ai-page-main .model-selector-wrap{
  margin-top:8px;
}
.ai-page-main .model-selector{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  background:var(--field-fill);
  border:0;border-bottom:1px solid var(--field-rule);
  color:var(--text-secondary);
  font-size:13px;
}
.ai-page-main .message{
  display:flex;
  flex-direction:column;
  max-width:90%;
}
.ai-page-main .message.user{ align-self:flex-end; }
.ai-page-main .message.assistant{ align-self:flex-start; max-width:100%; width:100%; }
.ai-page-main .msg-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  overflow:hidden;
}
.ai-page-main .user .msg-avatar{ background:var(--accent); align-self:flex-end; }
.ai-page-main .assistant .msg-avatar{ background:var(--rgba(229,249,168,.5)); align-self:flex-start; }
.ai-page-main .msg-bubble{
  padding:12px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.7;
  box-shadow:var(--shadow);
}
.ai-page-main .user .msg-bubble{
  background:var(--accent-light);
  border:1px solid var(--accent);
  border-bottom-right-radius:4px;
}
.ai-page-main .assistant .msg-bubble{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}
.ai-page-main .assistant .markdown-body{
  padding:2px 0 8px 0;
}
.ai-page-main .conv-list{
  flex:1;
  overflow-y:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ai-page-main .new-chat-btn,
.ai-page-sidebar .new-chat-btn{
  margin:16px;
  padding:12px;
  background:var(--accent-light);
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:12px;
  cursor:pointer;
  font-weight:bold;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.ai-page-sidebar .sidebar-header{
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--glass-border);
}

body.ai-page-mode #float-menu,
body.ai-page-mode #sakana-widget,
body.ai-page-mode #cursor,
body.ai-page-mode #cursor-follower,
body.ai-page-mode #confetti-canvas,
body.ai-page-mode #sparks-container{
  display:none !important;
}

#ai-page-shell{
  background:
    radial-gradient(circle at top left, rgba(231,251,176,.10), transparent 30%),
    radial-gradient(circle at top right, rgba(236,72,153,.08), transparent 28%),
    var(--bg-primary);
}

.ai-page-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 20px 10px;
  border-bottom:1px solid var(--glass-border);
  background:var(--glass-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.ai-page-topbar-left,
.ai-page-topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.ai-page-tip{
  font-size:12px;
  color:var(--text-muted);
}
#ai-page-root{
  height:calc(100vh - var(--nav-height) - 58px);
  min-height:700px;
}

.ai-page-layout{
  display:flex;
  height:100%;
  overflow:hidden;
}
.ai-page-sidebar{
  width:270px;
  border-right:1px solid var(--glass-border);
  background:rgba(12,14,24,0.62);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
}
.ai-page-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.ai-page-main .chat-container{
  flex:1;
  overflow-y:auto;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:18px;
  -webkit-overflow-scrolling:touch;
}
.ai-page-main .chat-input-area{
  border-top:1px solid var(--glass-border);
  background:rgba(10,10,18,0.62);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding:14px 18px calc(18px + env(safe-area-inset-bottom));
}
.ai-page-main .input-box{
  display:flex;
  gap:8px;
  align-items:flex-end;
  background:rgba(255,255,255,0.03);
  border:0;
  border-radius:18px;
  padding:8px 10px;
}
.ai-page-main textarea{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text-primary);
  font-size:15px;
  resize:none;
  min-height:26px;
  max-height:140px;
  padding:6px 4px;
  font-family:inherit;
}
.ai-page-main .send-btn,
.ai-page-main .upload-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ai-page-main .send-btn{
  background:var(--gradient-button);
  color:#fff;
}
.ai-page-main .send-btn.stop{
  background:var(--red);
}
.ai-page-main .upload-btn{
  background:transparent;
  color:var(--text-secondary);
}
.ai-page-main .upload-btn:hover{
  background:rgba(255,255,255,.06);
}

.ai-page-sidebar .sidebar-header{
  padding:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--glass-border);
}
.ai-page-sidebar .conv-list{
  flex:1;
  overflow-y:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ai-page-sidebar .new-chat-btn{
  margin:16px;
  padding:12px;
  background:var(--accent-light);
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:12px;
  cursor:pointer;
  font-weight:bold;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.ai-embed-tip{
  font-size:12px;
  color:var(--text-muted);
}

.home-product-section{
  padding: 92px 24px 68px;
  position: relative;
  z-index: 10;
}
.home-product-inner{
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 38px;
  align-items: center;
}
.home-product-left{
  min-width: 0;
}
.home-product-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:var(--accent-light);
  border:1px solid rgba(231,251,176,.26);
  color:var(--accent);
  font-size:13px;
  font-weight:800;
  margin-bottom:20px;
}
.home-product-title{
  font-size: clamp(2.35rem, 5vw, 4.2rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  font-weight: 900;
  margin-bottom: 18px;
}
.home-product-title .gradient{
  background:var(--gradient-text);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:color-flow 6s linear infinite;
}
.home-product-desc{
  font-size: 1.05rem;
  line-height: 1.92;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 26px;
}
.home-product-points{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.home-product-point{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  box-shadow:var(--glass-shadow);
}
.home-product-point-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--accent-light);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.home-product-point-icon svg{
  width:20px;
  height:20px;
}
.home-product-point-title{
  font-size:16px;
  font-weight:900;
  margin-bottom:4px;
}
.home-product-point-desc{
  font-size:13px;
  line-height:1.78;
  color:var(--text-secondary);
}

.home-product-right{
  min-width: 0;
  position: relative;
}
.home-demo-shell{
  position:relative;
  border-radius:26px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.22);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation: homeDemoFloatFinal 6.5s ease-in-out infinite;
}
[data-theme="dark"] .home-demo-shell{
  background:rgba(18,18,31,0.30);
}
.home-demo-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--glass-border);
  background:rgba(255,255,255,.04);
}
.home-demo-topbar-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.home-demo-dot{
  width:10px;
  height:10px;
  border-radius:50%;
}
.home-demo-dot.red{ background:#ff5f57; }
.home-demo-dot.yellow{ background:#febc2e; }
.home-demo-dot.green{ background:#28c840; }

.home-demo-title{
  font-size:13px;
  color:var(--text-muted);
  font-weight:800;
  letter-spacing:.05em;
}
.home-demo-body{
  padding:18px;
}
.home-demo-frame{
  position:relative;
  border-radius:18px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.36);
  overflow:hidden;
  min-height:560px;
}
[data-theme="dark"] .home-demo-frame{
  background:rgba(255,255,255,0.03);
}

.home-demo-image-panel{
  position:relative;
  padding:18px 18px 12px;
}
.home-demo-image-wrap{
  position:relative;
  border-radius:18px;
  background:rgba(255,255,255,0.42);
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 10px 28px rgba(0,0,0,0.08);
  height:320px;
  overflow:hidden;
}
[data-theme="dark"] .home-demo-image-wrap{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
}
.home-demo-image-scroll{
  width:100%;
  height:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.home-demo-image-scroll img{
  display:block;
  width:100%;
  height:auto;
  min-height:100%;
  object-fit:contain;
}
.home-demo-empty{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  color:var(--text-muted);
  padding:18px;
}
.home-demo-empty svg,
.home-demo-empty i{
  width:34px;
  height:34px;
  color:var(--accent);
}
.home-demo-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:var(--bg-primary);
  border:1px solid var(--glass-border);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:4;
}
.home-demo-nav.prev{
  left:12px;
  animation: homeArrowBounceLeftFinal 1.9s ease-in-out infinite;
}
.home-demo-nav.next{
  right:12px;
  animation: homeArrowBounceRightFinal 1.9s ease-in-out infinite;
}
.home-demo-nav:hover{
  color:var(--accent);
  border-color:rgba(231,251,176,.28);
}
.home-demo-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:10px 0 4px;
}
.home-demo-dot-btn{
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  background:rgba(120,120,140,.35);
  cursor:pointer;
  transition:var(--transition);
}
.home-demo-dot-btn.active{
  width:24px;
  border-radius:999px;
  background:var(--accent);
}

.home-demo-chat-area{
  padding:10px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.home-demo-msg{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.home-demo-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent-light);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:12px;
  font-weight:900;
}
.home-demo-bubble{
  flex:1;
  min-width:0;
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,0.52);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
[data-theme="dark"] .home-demo-bubble{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
}
.home-demo-bubble.user{
  background:rgba(231,251,176,.12);
  border-color:rgba(231,251,176,.16);
}
.home-demo-bubble-title{
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:6px;
  font-weight:700;
}
.home-demo-bubble-text{
  font-size:14px;
  color:var(--text-primary);
  line-height:1.85;
}
.home-demo-more{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:12px 16px;
  border-radius:999px;
  width:max-content;
  max-width:100%;
  align-self:center;
  background:rgba(255,255,255,0.56);
  border:1px solid var(--glass-border);
  color:var(--text-secondary);
  font-size:13px;
  box-shadow:var(--glass-shadow);
  animation: homeMoreBounceFinal 2.2s ease-in-out infinite;
}
[data-theme="dark"] .home-demo-more{
  background:rgba(255,255,255,0.04);
}

.home-demo-fade{
  animation: homeDemoFadeFinal .28s ease;
}

@keyframes homeDemoFloatFinal{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-8px); }
}
@keyframes homeArrowBounceLeftFinal{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%{ transform:translateY(-50%) translateX(-4px); }
}
@keyframes homeArrowBounceRightFinal{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%{ transform:translateY(-50%) translateX(4px); }
}
@keyframes homeMoreBounceFinal{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(4px); }
}
@keyframes homeDemoFadeFinal{
  from{ opacity:.55; transform:scale(.988); }
  to{ opacity:1; transform:scale(1); }
}

@media (max-width: 1100px){
  .home-product-inner{
    grid-template-columns:1fr;
    gap:24px;
  }
}

.home-showcase-section,
.home-ai-demo-section{
  padding: 88px 24px 64px;
  position: relative;
  z-index: 10;
}
.home-showcase-inner,
.home-ai-demo-inner{
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 34px;
  align-items: center;
}
.home-showcase-left,
.home-ai-demo-left,
.home-showcase-right,
.home-ai-demo-right{
  min-width:0;
}

.home-section-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:var(--accent-light);
  border:1px solid rgba(231,251,176,.26);
  color:var(--accent);
  font-size:13px;
  font-weight:800;
  margin-bottom:20px;
}
.home-section-title{
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height:1.12;
  letter-spacing:-0.045em;
  font-weight:900;
  margin-bottom:18px;
}
.home-section-title .gradient{
  background:var(--gradient-text);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:color-flow 6s linear infinite;
}
.home-section-desc{
  font-size:1.05rem;
  line-height:1.9;
  color:var(--text-secondary);
  max-width:700px;
  margin-bottom:24px;
}
.home-section-points{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.home-section-point{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  box-shadow:var(--glass-shadow);
}
.home-section-point-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--accent-light);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.home-section-point-title{
  font-size:16px;
  font-weight:900;
  margin-bottom:4px;
}
.home-section-point-desc{
  font-size:13px;
  line-height:1.76;
  color:var(--text-secondary);
}

.home-showcase-shell{
  position:relative;
  border-radius:24px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation: homeShowcaseFloat 6.3s ease-in-out infinite;
}
.home-showcase-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--glass-border);
  background:rgba(255,255,255,.04);
}
.home-showcase-topbar-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.home-mini-dot{
  width:10px;
  height:10px;
  border-radius:50%;
}
.home-mini-dot.red{ background:#ff5f57; }
.home-mini-dot.yellow{ background:#febc2e; }
.home-mini-dot.green{ background:#28c840; }

.home-showcase-title{
  font-size:13px;
  color:var(--text-muted);
  font-weight:800;
  letter-spacing:.05em;
}
.home-showcase-body{
  padding:18px;
}
.home-showcase-frame{
  border-radius:18px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.26);
  min-height:780px;
  overflow:hidden;
}
[data-theme="dark"] .home-showcase-frame{
  background:rgba(255,255,255,0.03);
}
.home-showcase-image-panel{
  position:relative;
  padding:18px 18px 10px;
}
.home-showcase-image-wrap{
  position:relative;
  border-radius:18px;
  background:rgba(255,255,255,0.48);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  height:360px;
  overflow:hidden;
}
[data-theme="dark"] .home-showcase-image-wrap{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
}
.home-showcase-image-scroll{
  width:100%;
  height:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.home-showcase-image-scroll img{
  display:block;
  width:100%;
  height:auto;
}
.home-showcase-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:var(--bg-primary);
  border:1px solid var(--glass-border);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:4;
}
.home-showcase-nav.prev{
  left:12px;
  animation: homeArrowBounceLeftShowcase 1.9s ease-in-out infinite;
}
.home-showcase-nav.next{
  right:12px;
  animation: homeArrowBounceRightShowcase 1.9s ease-in-out infinite;
}
.home-showcase-nav:hover{
  color:var(--accent);
}
.home-showcase-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:10px 0 6px;
}
.home-showcase-dot-btn{
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  background:rgba(120,120,140,.35);
  cursor:pointer;
  transition:var(--transition);
}
.home-showcase-dot-btn.active{
  width:24px;
  border-radius:999px;
  background:var(--accent);
}
.home-showcase-cards{
  padding:8px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.home-showcase-card{
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,0.52);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}
[data-theme="dark"] .home-showcase-card{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
}
.home-showcase-card-title{
  font-size:12px;
  color:var(--text-muted);
  font-weight:800;
  margin-bottom:6px;
}
.home-showcase-card-text{
  font-size:14px;
  line-height:1.82;
  color:var(--text-primary);
}
.home-showcase-more{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:10px 12px 16px;
  color:var(--text-muted);
  font-size:13px;
  animation: homeScrollMoreShowcase 2.2s ease-in-out infinite;
}

.home-ai-chat-shell{
  position:relative;
  border-radius:24px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation: homeAiShellFloat2 6.4s ease-in-out infinite;
  display:flex;
  flex-direction:column;
}
.home-ai-chat-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--glass-border);
  background:rgba(255,255,255,.04);
}
.home-ai-chat-topbar-left{
  display:flex;
  align-items:center;
  gap:8px;
}
.home-ai-demo-title{
  font-size:13px;
  color:var(--text-muted);
  font-weight:800;
  letter-spacing:.05em;
}
.home-ai-chat-panel{
  border-radius:18px;
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.26);
  min-height:780px;
  overflow:hidden;
}
[data-theme="dark"] .home-ai-chat-panel{
  background:rgba(255,255,255,0.03);
}
.home-ai-chat-messages{
  padding:20px;
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.home-ai-msg{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.home-ai-msg.user{
  justify-content:flex-end;
}
.home-ai-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--accent-light);
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:12px;
  font-weight:900;
  overflow:hidden;
}
.home-ai-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.home-ai-bubble{
  max-width:78%;
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,0.52);
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  font-size:14px;
  line-height:1.8;
  color:var(--text-primary);
}
[data-theme="dark"] .home-ai-bubble{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
}
.home-ai-bubble.user{
  background:var(--theme-active, rgba(231,251,176,.22));
  border-color:var(--theme-border, rgba(231,251,176,.36));
}
.home-ai-thinking{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  width:max-content;
  font-size:12px;
  color:var(--text-secondary);
}
.home-ai-thinking-dots{
  display:flex;
  align-items:center;
  gap:4px;
}
.home-ai-thinking-dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  animation:homeAiThinkingPulse2 1.2s infinite ease-in-out;
}
.home-ai-thinking-dots span:nth-child(2){ animation-delay:.15s; }
.home-ai-thinking-dots span:nth-child(3){ animation-delay:.3s; }

.home-ai-graph-card{
  margin-top:2px;
  border-radius:14px;
  border:none;
  background:rgba(255,255,255,0.55);
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
[data-theme="dark"] .home-ai-graph-card{
  background:rgba(255,255,255,0.04);
}
/* 场景标签条：取代原 .home-ai-graph-head 顶栏（顶栏在手机上会压住生图上沿）。
   默认自动轮播，点击标签切到对应场景后仍继续轮播。 */
.home-ai-demo-tabs{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  padding:14px 18px 0;
  flex-shrink:0;
}
.home-ai-demo-tabs::-webkit-scrollbar{ display:none; }

/* 生图容器：固定高度让各场景等高，contain 保证整幅图都在画面内不被裁切 */
.home-ai-graph-media{
  width:100%;
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(0,0,0,.18);
}
.home-ai-graph-media img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:8px;
}
.home-ai-demo-tab{
  flex-shrink:0;
  padding:5px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#c9c9de;
  font-size:12.5px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:.18s ease;
  white-space:nowrap;
}
.home-ai-demo-tab:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
}
.home-ai-demo-tab.active{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.20);
  color:#fff;
}

#home-ai-function-canvas{
  display:block;
  width:100%;
  height:100%;
  border-radius:14px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(0,0,0,.05);
}
[data-theme="dark"] #home-ai-function-canvas{
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.08);
}
.home-ai-scroll-more{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:12px 18px 16px;
  color:var(--text-muted);
  font-size:13px;
  animation: homeAiScrollHint2 2.1s ease-in-out infinite;
}

@keyframes homeShowcaseFloat{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-8px); }
}
@keyframes homeAiShellFloat2{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-8px); }
}
@keyframes homeArrowBounceLeftShowcase{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%{ transform:translateY(-50%) translateX(-4px); }
}
@keyframes homeArrowBounceRightShowcase{
  0%,100%{ transform:translateY(-50%) translateX(0); }
  50%{ transform:translateY(-50%) translateX(4px); }
}
@keyframes homeScrollMoreShowcase{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(4px); }
}
@keyframes homeAiThinkingPulse2{
  0%,80%,100%{ transform:scale(.8); opacity:.45; }
  40%{ transform:scale(1); opacity:1; }
}
@keyframes homeAiScrollHint2{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(4px); }
}

@media (max-width:1100px){
  .home-showcase-inner,
  .home-ai-demo-inner{
    grid-template-columns:1fr;
    gap:24px;
  }
}

.home-showcase-frame{
  min-height: 620px !important;
}
.home-showcase-body{
  padding: 14px !important;
}
.home-showcase-image-panel{
  padding: 14px !important;
}
.home-showcase-image-wrap{
  height: 540px !important;
  border-radius: 20px !important;
}
.home-showcase-image-scroll img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.home-showcase-cards,
.home-showcase-more{
  font-size: 12px !important;
    margin-bottom: 8px !important;
}

main#app { display: block; width: 100%; }
body[data-page-kind="doc"] main#app.docs-layout { display: flex !important; }
body[data-page-kind="home"] main#app,
body[data-page-kind="search"] main#app { display: block; }

.home-ai-chat-body {
  height: clamp(520px, 62vh, 820px) !important;
  min-height: 520px !important;
  max-height: 780px !important;
  overflow: hidden !important;
}

.home-ai-chat-messages {
  height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.home-ai-demo-section,
.home-showcase-section {
  padding: clamp(40px, 8vw, 100px) 0;
}

.home-ai-demo-inner,
.home-showcase-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

.home-ai-chat-shell,
.home-showcase-shell {
  width: 100%;
  border-radius: clamp(12px, 2vw, 20px);
  overflow: hidden;
}

.home-ai-graph-canvas-wrap canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 240px;
}

.home-showcase-body {
  min-height: clamp(200px, 35vh, 400px);
}

.home-showcase-image-scroll img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .home-ai-demo-inner,
  .home-showcase-inner {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .home-ai-demo-left,
  .home-ai-demo-right,
  .home-showcase-left,
  .home-showcase-right {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .home-ai-chat-body {
    height: clamp(300px, 45vh, 480px) !important;
    min-height: 300px !important;
    max-height: 480px !important;
  }

  .home-section-title {
    font-size: clamp(22px, 5vw, 36px) !important;
  }

  .home-section-desc {
    font-size: clamp(13px, 2.5vw, 16px) !important;
  }
}

@media (max-width: 480px) {
  .home-ai-chat-body {
    height: clamp(220px, 38vh, 340px) !important;
    min-height: 220px !important;
    max-height: 340px !important;
  }

  .home-ai-bubble {
    font-size: 12px !important;
    padding: 8px 12px !important;
    max-width: 85% !important;
  }

  .home-ai-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }

  .home-ai-graph-canvas-wrap canvas {
    max-height: 130px;
  }

  .home-section-title {
    font-size: clamp(18px, 5vw, 26px) !important;
    line-height: 1.3 !important;
  }
}

@media (min-width: 1400px) {
  .home-ai-chat-body {
    height: clamp(480px, 45vh, 600px) !important;
    max-height: 600px !important;
  }

}

.msg-bubble {
    min-height: 28px;
    contain: layout style;
    transform: translateZ(0);
}

.markdown-body pre {
    min-height: 40px;
}

[data-theme="light"] .nav-apps-dropdown {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
}

.hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at center, black 10%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 80%);
    z-index: 1; pointer-events: none;
}
[data-theme="light"] .hero-bg::after {
    background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
}



.markdown-body h2{
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.msg-bubble.markdown-body p{
  margin: 0.55em 0 !important;
}

.msg-bubble.markdown-body li{
  margin: 0.22em 0 !important;
}

.msg-bubble.markdown-body h1,
.msg-bubble.markdown-body h2,
.msg-bubble.markdown-body h3{
  line-height: 1.32 !important;
}
.msg-bubble.markdown-body{
  font-weight: 500 !important;
}

.markdown-body{
  font-weight: 500;
}

html[data-theme="dark"], body[data-theme="dark"] { background: var(--bg-primary) !important; }

.comments-section .comment-input-row,
#comments-section > div:has(#comment-input) {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
#comment-input {
  flex: 1;
  min-height: 42px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 0;
  border-bottom: 1px solid var(--field-rule);
  background: var(--field-fill);
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: 0.2s;
  resize: none;
}
[data-theme="dark"] #comment-input {
  background: rgba(255,255,255,0.04);
}
#comment-input:focus {
  border-bottom-color: transparent;
  background: var(--field-fill-focus);
  box-shadow: 0 0 0 2px var(--field-ring);
}

body.ai-embed-mode,
body.ai-page-mode {
  overscroll-behavior-y: none;
}

.float-menu { display:none !important; }
body[data-page-kind="doc"] .float-menu { display:flex !important; }

 #srbill-dock{ display:none !important; }

.search-page-wrap{
  padding-top:calc(var(--nav-height) + 16px);
  min-height:100vh;
  min-height:100dvh;
  max-width:860px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
  padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));
}
.search-page-header{ margin-bottom:26px; }
.search-page-header h1{
  font-size:clamp(2rem,5vw,3rem);
  font-weight:900;
  letter-spacing:-0.04em;
  margin-bottom:8px;
}
.search-page-header p{
  color:var(--text-secondary);
  font-size:15px;
}
.search-page-input-wrap{
  position:relative;
  margin-bottom:20px;
}
.search-page-input-wrap input{
  width:100%;
  padding:14px 22px 14px 46px;
  border-radius:9999px;
  border:0;
  border-bottom:1px solid var(--field-rule);
  background:var(--field-fill);
  color:var(--text-primary);
  font-size:15px;
  outline:none;
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
  backdrop-filter:saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter:saturate(190%) var(--glass-blur);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.search-page-input-wrap input:focus{
  border-bottom-color:transparent;
  background:var(--field-fill-focus);
  box-shadow:0 0 0 2px var(--field-ring);
}
.search-result-card{
  padding:18px 20px;
  border:1px solid var(--glass-border);
  border-radius:16px;
  background:var(--glass-bg);
  cursor:pointer;
  transition:.2s ease;
  margin-bottom:12px;
}
.search-result-card:hover{
  transform:translateY(-2px);
  border-color:rgba(231,251,176,.25);
  box-shadow:0 8px 24px rgba(231,251,176,.06);
}
.search-result-card h3{
  font-size:16px;
  font-weight:900;
  margin-bottom:4px;
}
.search-result-card .path{
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:8px;
}
.search-result-card .snippet{
  font-size:14px;
  line-height:1.8;
  color:var(--text-secondary);
}
.search-result-card .snippet mark{
  background:rgba(231,251,176,.15);
  color:var(--accent);
  padding:0 2px;
  border-radius:3px;
}
.search-result-card .score{
  padding:2px 10px;
  border-radius:999px;
  background:var(--accent-light);
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}

body[data-page-kind="doc"] .float-menu{ display:flex !important; }
body:not([data-page-kind="doc"]) .float-menu{ display:none !important; }
body:not([data-page-kind="doc"]) .sidebar-toggle{ display:none !important; }

body.ai-embed-mode {
  overflow: hidden !important;
}
body.ai-embed-mode #app {
  font-size: 12px !important;
    margin-bottom: 8px !important;
}
body.ai-embed-mode .float-menu,
body.ai-embed-mode #sakana-widget,
body.ai-embed-mode #cursor,
body.ai-embed-mode #cursor-follower,
body.ai-embed-mode #confetti-canvas,
body.ai-embed-mode #sparks-container {
  font-size: 12px !important;
    margin-bottom: 8px !important;
}

#ai-embed-wrap {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: var(--bg-primary);
}

.ai-embed-topbar {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: saturate(190%) var(--glass-blur);
  -webkit-backdrop-filter: saturate(190%) var(--glass-blur);
}

.ai-embed-topbar-left,
.ai-embed-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

#ai-embed-iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  height: calc(100% - 48px);
  border: none;
  background: var(--bg-primary);
}

body.ai-embed-mode{
  overflow:hidden !important;
}
body.ai-embed-mode #app{
  display:none !important;
}
body.ai-embed-mode #ai-embed-wrap{
  display:flex !important;
  position:fixed !important;
  top:var(--nav-height) !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:var(--bg-primary) !important;
  z-index:1200 !important;
}
body.ai-embed-mode #ai-embed-wrap .ai-embed-topbar{
  flex:0 0 44px !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
body.ai-embed-mode #ai-embed-iframe{
  flex:1 1 auto !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  border:none !important;
  display:block !important;
}

.nav-apps-dropdown{
  max-height:min(70vh, 420px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

body.ai-embed-mode #ai-embed-iframe {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
}

[data-theme="dark"] {
  --text-secondary: #c0c0d0 !important;
}

.toast-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
  pointer-events: none !important;
  z-index: 99999 !important;
}
.toast {
  position: relative !important;
  margin: 0 !important;
  width: max-content !important;
  max-width: 90vw !important;
}


.nav-apps-dropdown, .user-dropdown {
  max-width: calc(100vw - 32px) !important;
  right: 0 !important;
  left: auto !important;
  transform-origin: top right !important;
}

[data-theme="dark"]:not([data-bold-color="paper"]) .katex,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex *,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .mord,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .mrel,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .mbin,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .mopen,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .mclose,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .mpunct,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .mop,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .minner,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .delimsizing,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .sqrt,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .vlist,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .frac-line,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .overline-line,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .underline-line,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .rule,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .accent,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .stretchy,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex .arrow-pad,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex svg,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex svg path,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex svg line,
[data-theme="dark"]:not([data-bold-color="paper"]) .katex svg rect {
  color: #f5f5f7 !important;
  fill: #f5f5f7 !important;
  stroke: #f5f5f7 !important;
  border-color: #f5f5f7 !important;
  -webkit-text-fill-color: #f5f5f7 !important;
}

[data-theme="dark"] .katex .frac-line,
[data-theme="dark"] .katex .sqrt-line,
[data-theme="dark"] .katex .overline .overline-line,
[data-theme="dark"] .katex .rule {
  border-color: var(--text-primary) !important;
  background: var(--text-primary) !important;
}

[data-theme="dark"] .katex .katex-html svg {
  fill: var(--text-primary) !important;
}
[data-theme="dark"] .katex .katex-html svg path {
  stroke: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}

[data-theme="light"] .katex,
[data-theme="light"] .katex * {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

html, body {
  overflow-x: hidden !important;
}

.doc-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.markdown-body .math-block {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 0 !important;
}

.markdown-body .katex-display {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}

.markdown-body .math-inline {
  overflow-x: auto !important;
  max-width: 100% !important;
}

.editor-focus-highlight {
  outline: 2px solid rgba(236,72,153,.35) !important;
  outline-offset: 4px !important;
  border-radius: 8px !important;
  background: rgba(236,72,153,.04) !important;
  transition: outline-color .2s, background .2s !important;
}
[data-theme="light"] .editor-focus-highlight {
  outline-color: rgba(236,72,153,.25) !important;
  background: rgba(236,72,153,.03) !important;
}

#cm6-editor-mount {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#cm6-editor-mount .cm-editor {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#cm6-editor-mount .cm-scroller {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-mono) !important;
}

#editor-pane-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#cm6-editor-mount .cm-line:has(.tok-heading1) { font-size: 1.5em; }
#cm6-editor-mount .cm-line:has(.tok-heading2) { font-size: 1.3em; }
#cm6-editor-mount .cm-line:has(.tok-heading3) { font-size: 1.15em; }

.editor-mode-btn {
  padding: 6px 8px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all .2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.editor-mode-btn:hover {
  color: var(--text-primary) !important;
  background: rgba(236,72,153,.08) !important;
  border-color: rgba(236,72,153,.2) !important;
}
.editor-mode-btn.active {
  color: #ec4899 !important;
  background: rgba(236,72,153,.12) !important;
  border-color: rgba(236,72,153,.3) !important;
}

.cm-live-rendered {
  padding: 2px 0 !important;
  line-height: 1.7 !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
}
.cm-live-rendered p {
  margin: 0.4em 0 !important;
}
.cm-live-rendered strong {
  font-weight: 900 !important;
  background: var(--gradient-strong) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.cm-live-rendered em {
  font-style: italic !important;
  color: var(--text-secondary) !important;
}
.cm-live-rendered h1 { font-size: 1.8em !important; font-weight: 900 !important; margin: 0.6em 0 0.3em !important; }
.cm-live-rendered h2 { font-size: 1.5em !important; font-weight: 800 !important; margin: 0.5em 0 0.2em !important; }
.cm-live-rendered h3 { font-size: 1.25em !important; font-weight: 700 !important; margin: 0.4em 0 0.2em !important; }
.cm-live-rendered a { color: var(--accent) !important; text-decoration: underline !important; }
.cm-live-rendered code {
  background: rgba(0,0,0,0.06) !important;
  padding: 0.15em 0.35em !important;
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.9em !important;
  color: var(--rgba(229,249,168,.5)) !important;
}
[data-theme="dark"] .cm-live-rendered code {
  background: rgba(255,255,255,0.08) !important;
}
.cm-live-rendered blockquote {
  margin: 0.3em 0 !important;
  padding: 0 0 0 14px !important;
  border-left: 2px solid #ec4899 !important;
  color: var(--text-secondary) !important;
}
.cm-live-rendered ul, .cm-live-rendered ol {
  padding-left: 1.4em !important;
  margin: 0.3em 0 !important;
}
.cm-live-rendered li {
  margin: 0.15em 0 !important;
}
.cm-live-rendered .katex-display {
  margin: 0.3em 0 !important;
  overflow-x: auto !important;
}
.cm-live-rendered .katex {
  font-size: 1.1em !important;
}

[data-theme="dark"] .cm-live-rendered .katex,
[data-theme="dark"] .cm-live-rendered .katex * {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

.cm-live-rendered {
  transition: opacity 0.15s ease !important;
}

.cm6-live-overlay {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}
.cm6-live-block {
  margin-bottom: 12px;
  border-radius: 10px;
  transition: all 0.15s ease;
  position: relative;
}
.cm6-live-rendered {
  padding: 8px 12px;
  cursor: text;
  border: 1px solid transparent;
  border-radius: 10px;
}
.cm6-live-rendered:hover {
  border-color: rgba(236,72,153,.15);
  background: rgba(236,72,153,.02);
}
.cm6-live-editing {
  padding: 0;
}
.cm6-live-source {
  width: 100%;
  min-height: 40px;
  padding: 12px 14px;
  border: 2px solid rgba(236,72,153,.3);
  border-radius: 10px;
  background: rgba(236,72,153,.04);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  outline: none;
  box-sizing: border-box;
}
[data-theme="dark"] .cm6-live-source {
  background: rgba(236,72,153,.06);
  border-color: rgba(236,72,153,.35);
}
.cm6-live-source:focus {
  border-color: rgba(236,72,153,.5);
  box-shadow: none;
  outline: none;
}

.lazy-section {
  content-visibility: auto;
  /* auto：跳过渲染时沿用上次真实高度，避免长文目录跳转按 400px 估算落偏 */
  contain-intrinsic-size: auto 400px;
}


@media (min-width: 769px) {
  .docs-layout .sidebar {
    top: var(--nav-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--sidebar-width) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.hide-sidebar .docs-layout .sidebar {
    transform: translateX(-100%) !important;
    -webkit-transform: translateX(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .docs-layout .doc-main {
    margin-left: var(--sidebar-width) !important;
  }

  body.hide-sidebar .docs-layout .doc-main {
    margin-left: 0 !important;
  }
}



@media (max-width: 1150px) {
  .doc-toc {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
  }
}

:root{
  --site-font-scale: 1;
}
html[data-font-size="small"]{
  --site-font-scale: 0.93;
}
html[data-font-size="medium"]{
  --site-font-scale: 1;
}
html[data-font-size="large"]{
  --site-font-scale: 1.08;
}
html[data-font-size="x-large"]{
  --site-font-scale: 1.16;
}

.doc-content .markdown-body{
  font-size: calc(18px * var(--site-font-scale));
}


.markdown-body blockquote{
  position:relative !important;
  margin:.8em 0 !important;
  padding:0 0 0 14px !important;
  border:0 !important;
  border-left:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:var(--text-secondary) !important;
}
.markdown-body blockquote::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:var(--srb-quote-bar-inset, .375em) !important;
  bottom:var(--srb-quote-bar-inset, .375em) !important;
  width:3.2px !important;
  border-radius:1.6px !important;
  background-color:var(--srb-quote-bar, var(--theme-solid, var(--accent, var(--text-secondary)))) !important;
  box-shadow:none !important;
}
.markdown-body blockquote > *:first-child{margin-top:0 !important;}
.markdown-body blockquote > *:last-child{margin-bottom:0 !important;}

.markdown-body .callout{
  margin:1.15em 0 !important;
  padding:0 !important;
  border-radius:10px !important;
  border:1px solid rgba(0,0,0,0.03) !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

/* ---- styles/layer05.css ---- */
/* generated by scripts/split_css_layer.py — edit the source file */
/* ── layer05.css · L4001-L4875
   职责：正文排版 + 通用工具类 + 布局与导航
   主要内容：正文排版 38 条、通用工具类 19 条、布局与导航 13 条
   层叠是承重的（1255 条顶层规则里 74 处后条覆盖前条），本块只能整体移动，
   不要单独抽规则到别处 —— 需要调整请改 style.css 后重新切分。
   来源：static/style.css，索引：static/style.layers.tsv */
[data-theme="dark"] .markdown-body .callout{
  border:1px solid rgba(255,255,255,0.06) !important;
}
.markdown-body .callout-header{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:14px 18px 0 18px !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}
.markdown-body .callout-content{
  padding:12px 18px 16px 18px !important;
  color:var(--text-primary) !important;
}
.markdown-body .callout-content > *:first-child{margin-top:0 !important;}
.markdown-body .callout-content > *:last-child{margin-bottom:0 !important;}

.markdown-body .callout-info{background:#eaf2ff !important;}
.markdown-body .callout-info .callout-header{color:#1980ff !important;}
.markdown-body .callout-tip{background:#eaf8ef !important;}
.markdown-body .callout-tip .callout-header{color:#1f9d57 !important;}
.markdown-body .callout-warning{background:#fff5e8 !important;}
.markdown-body .callout-warning .callout-header{color:#e08a00 !important;}
.markdown-body .callout-danger{background:#fff1f2 !important;}
.markdown-body .callout-danger .callout-header{color:#e5484d !important;}
.markdown-body .callout-note{background:#edf4fc !important;}
.markdown-body .callout-note .callout-header{color:#1980ff !important;}

[data-theme="dark"] .markdown-body .callout-info{background:#1f2937 !important;}
[data-theme="dark"] .markdown-body .callout-tip{background:#182820 !important;}
[data-theme="dark"] .markdown-body .callout-warning{background:#2a2418 !important;}
[data-theme="dark"] .markdown-body .callout-danger{background:#2a1d22 !important;}
[data-theme="dark"] .markdown-body .callout-note{background:#1f2937 !important;}

.markdown-body .callout-success{background:#ebfaf0 !important;}
.markdown-body .callout-success .callout-header{color:#16a34a !important;}
.markdown-body .callout-question{background:#f0efff !important;}
.markdown-body .callout-question .callout-header{color:#6658f5 !important;}
.markdown-body .callout-quote{background:#f6f7f8 !important;}
.markdown-body .callout-quote .callout-header{color:#7b8596 !important;}
.markdown-body .callout-important{background:#fff0f8 !important;}
.markdown-body .callout-important .callout-header{color:#d946ef !important;}

[data-theme="dark"] .markdown-body .callout-success{background:#16261d !important;}
[data-theme="dark"] .markdown-body .callout-question{background:#1d2235 !important;}
[data-theme="dark"] .markdown-body .callout-quote{background:#23262d !important;}
[data-theme="dark"] .markdown-body .callout-important{background:#2c2130 !important;}

.hero{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:100vh !important;
  min-height:100dvh !important;
}
.hero-content{
  width:100% !important;
  max-width:860px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  flex:1 !important;
}
.hero-title{
  width:min(100%, 1000px) !important;
  text-align:center !important;
  margin:0 !important;
  position:absolute !important;
  left:50% !important;
  top:50dvh !important;
  transform:translate(-50%,-50%) !important;
  z-index:2 !important;
}
.hero-support{
  position:absolute !important;
  left:50% !important;
  top:calc(50dvh + clamp(70px, 8vw, 112px)) !important;
  transform:translateX(-50%) !important;
  width:min(100%, 760px) !important;
  padding:0 16px !important;
  z-index:2 !important;
}
.hero-badge{
  margin-bottom:20px !important;
}
.hero-desc{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  min-height:2em !important;
  margin-bottom:28px !important;
}

.hero-actions{
  width:100% !important;
  max-width:480px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}
.hero-actions .hero-quick-btn{
  min-height:56px !important;
  width:100% !important;
  padding:14px 20px !important;
  border-radius:calc(var(--visual-ctaRadius, 9999) * 1px) !important;
  font-size:15px !important;
  font-weight:800 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  letter-spacing:-0.01em !important;
}
.hero-actions .hero-quick-btn .icon-sm{
  width:20px !important;
  height:20px !important;
}



@media (max-width:400px){
  .hero-actions{
    max-width:280px !important;
    gap:8px !important;
  }
  .hero-actions .hero-quick-btn{
    min-height:46px !important;
    font-size:13px !important;
    border-radius:calc(var(--visual-ctaRadius, 9999) * 1px) !important;
  }
}

[data-theme="light"] .hero{
  background:
    radial-gradient(ellipse 60% 50% at 20% 40%, rgba(231,251,176,.06), transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(236,72,153,.05), transparent 50%),
    var(--bg-primary) !important;
}
[data-theme="light"] .hero-bg::after{
  opacity:.4 !important;
}

.home-ai-chat-shell {
  min-height: 720px;
}
.home-ai-chat-messages {
  min-height: 640px;
}
@media (max-width: 480px) {
  .home-ai-chat-shell {
    min-height: 560px;
  }
  .home-ai-chat-messages {
    min-height: 480px;
  }
}

body[data-page-kind="home"],
body[data-page-kind="doc"],
body[data-page-kind="search"]{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  touch-action: manipulation !important;
  -ms-touch-action: manipulation !important;
  -webkit-overflow-scrolling: touch !important;
}

body[data-page-kind="home"] #app,
body[data-page-kind="search"] #app{
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  position: static !important;
  touch-action: manipulation !important;
}
body[data-page-kind="doc"] #app{
  height: auto !important;
  overflow: visible !important;
  touch-action: manipulation !important;
}

body[data-page-kind="home"] .hero,
body[data-page-kind="home"] .hero-content,
body[data-page-kind="home"] .hero-actions{
  touch-action: manipulation !important;
}
body[data-page-kind="home"] .hero-bg,
body[data-page-kind="home"] .hero-bg::after{
  pointer-events: none !important;
  touch-action: none !important;
}

body[data-page-kind="home"] .home-ai-demo-section,
body[data-page-kind="home"] .home-ai-demo-section *,
body[data-page-kind="home"] .home-showcase-section,
body[data-page-kind="home"] .home-showcase-section *{
  touch-action: manipulation !important;
}

.spotlight-card::before{
  pointer-events: none !important;
  touch-action: none !important;
}

#confetti-canvas,
#sparks-container,
.cursor,
.cursor-follower{
  pointer-events: none !important;
  touch-action: none !important;
}

#graph-canvas{
  touch-action: none;
}
.modal:not(.show) #graph-canvas{
  pointer-events: none !important;
  touch-action: auto !important;
}

body.ai-page-mode,
body.ai-embed-mode{
  overflow: hidden !important;
  touch-action: none !important;
}

.sidebar-overlay.show{
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  z-index: 1999 !important;
  touch-action: manipulation !important;
}

.nav-apps-dropdown,
.site-theme-dropdown,
.user-dropdown {
  background: rgba(28,28,30,.38) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
[data-theme="light"] .nav-apps-dropdown,
[data-theme="light"] .site-theme-dropdown,
[data-theme="light"] .user-dropdown {
  background: rgba(255,255,255,.42) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.nav-app-item:hover,
.style-option:hover {
  background: rgba(255,255,255,.08) !important;
}
[data-theme="light"] .nav-app-item:hover,
[data-theme="light"] .style-option:hover {
  background: rgba(0,0,0,.04) !important;
}

.toast {
  background: rgba(28,28,30,.42) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
[data-theme="light"] .toast {
  background: rgba(255,255,255,.52) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.modal-box {
  background: rgba(28,28,30,.52) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
[data-theme="light"] .modal-box {
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* 纯色皮肤没有自己的画布玻璃：侧栏直接取画布色，不再叠第二层。
   书纸皮肤由 _paper-theme.css 覆盖成纸面次级色。 */
html[data-bold-color="minimal"] body[data-page-kind="doc"] { --sidebar-surface: var(--bg-primary); }

.sidebar {
  background: var(--sidebar-surface, rgba(28,28,30,.38)) !important;
  backdrop-filter: blur(32px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(190%) !important;
}

@media (max-width: 768px) {

  .markdown-body img{max-height:62vh;object-fit:contain}

  .nav-toggle{display:flex}
  .nav-menu{
    position:fixed;top:var(--nav-height);left:0;right:0;
    background:transparent;
    border-bottom:0;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    flex-direction:column;padding:16px;gap:8px;
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:var(--transition)
  }
  /* 展开态：抽屉自己限高可滚，外观弹窗独立挂在 body 下。 */
  .nav-menu.show{
    transform:none;opacity:1;pointer-events:auto;
    max-height:calc(100dvh - var(--nav-height));overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav-right{
    flex-direction:column;
    width:100%;
    margin-left:0;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--glass-border)
  }
  .search-box,.search-box input{width:100%!important}

  .sidebar{
    transform:translateZ(0) translateX(-100%);
    -webkit-transform:translateZ(0) translateX(-100%);
    padding-bottom:180px!important;
    max-width:100%!important
  }

  .hero{padding:100px 20px 60px}
  .hero-actions{flex-direction:column;width:100%;gap:12px;align-items:center}
  .hero-actions .btn{width:min(190px,66vw);padding:12px 18px;font-size:15px}

  .float-menu{
    bottom: var(--fab-bottom) !important;
    right: 16px !important;
  }

  .sidebar-toggle{
    bottom: var(--fab-bottom) !important;
    left: 16px !important;
  }

  .float-menu-toggle,
  .sidebar-toggle{
    width: 56px !important;
    height: 56px !important;
  }

  #sakana-widget { left: calc(16px + 56px + 12px) !important; bottom: var(--fab-bottom, calc(16px + env(safe-area-inset-bottom, 0px))) !important; }

    .doc-main { padding-left: 0 !important; }

  .ai-page-topbar{
    padding:10px 12px 8px;
    flex-wrap:wrap;
  }
  #ai-page-root{
    height:calc(100vh - var(--nav-height) - 74px);
  }
  .ai-page-layout{
    position:relative;
  }
  .ai-page-sidebar{
    position:absolute;
    left:-260px;
    top:0;
    bottom:0;
    z-index:20;
    transition:.25s;
    box-shadow:var(--shadow-lg);
  }
  .ai-page-sidebar.show{
    left:0;
  }
  .ai-page-main .chat-container{
    padding:12px;
  }
  .ai-page-main .chat-input-area{
    padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .ai-page-main .message{
    max-width:100%;
  }

  .ai-page-topbar{
    padding:10px 12px 8px;
    flex-wrap:wrap;
  }
  #ai-page-root{
    height:calc(100vh - var(--nav-height) - 74px);
  }
  .ai-page-layout{
    position:relative;
  }
  .ai-page-sidebar{
    position:absolute;
    left:-270px;
    top:0;
    bottom:0;
    z-index:20;
    transition:.25s;
    box-shadow:var(--shadow-lg);
  }
  .ai-page-sidebar.show{
    left:0;
  }
  .ai-page-main .chat-container{
    padding:14px 12px;
  }
  .ai-page-main .chat-input-area{
    padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .ai-page-main .message{
    max-width:100%;
  }

  .home-product-section{
    padding:72px 18px 56px;
  }
  .home-product-points{
    grid-template-columns:1fr;
  }
  .home-demo-frame{
    min-height:520px;
  }
  .home-demo-image-wrap{
    height:260px;
  }
  .home-demo-nav{
    width:38px;
    height:38px;
  }
  .home-demo-chat-area{
    padding:8px 14px 18px;
  }

  .home-showcase-section,
  .home-ai-demo-section{
    padding:72px 18px 56px;
  }
  .home-showcase-image-wrap{
    height:280px;
  }
  .home-ai-chat-panel{
    min-height:700px;
  }
  #home-ai-function-canvas{
    height:100%;
  }
  .home-ai-bubble{
    max-width:100%;
  }

  .home-showcase-frame{
    min-height: 430px !important;
  }
  .home-showcase-image-wrap{
    height: 360px !important;
  }

  .home-ai-demo-section,
  .home-showcase-section {
    padding: clamp(24px, 6vw, 60px) 0;
  }

  .home-ai-chat-body {
    height: clamp(260px, 42vh, 400px) !important;
    min-height: 260px !important;
    max-height: 400px !important;
  }

  .home-ai-chat-topbar {
    padding: 8px 12px !important;
  }

  .home-ai-demo-title,
  .home-showcase-title {
    font-size: 13px !important;
  }

  .home-mini-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .home-ai-bubble {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

  .home-ai-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .home-ai-graph-card {
    border-radius: 10px !important;
  }

  .home-ai-graph-canvas-wrap canvas {
    max-height: 160px;
  }

  .home-section-points {
    gap: 12px !important;
  }

  .home-section-point {
    padding: 14px !important;
    gap: 12px !important;
  }

  .home-section-point-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .home-section-point-icon i,
  .home-section-point-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .home-section-point-title {
    font-size: 14px !important;
  }

  .home-section-point-desc {
    font-size: 12px !important;
  }

  .home-section-badge {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }

  .home-showcase-body {
    min-height: clamp(180px, 30vh, 300px);
  }

  .home-showcase-nav {
    width: 32px !important;
    height: 32px !important;
  }

  .home-showcase-nav i,
  .home-showcase-nav svg {
    width: 16px !important;
    height: 16px !important;
  }

  .home-ai-scroll-more {
    font-size: 12px !important;
    padding: 10px 0 !important;
  }

  #comment-input {
    font-size: 14px;
    padding: 10px 14px;
    min-height: 38px;
  }

  body[data-page-kind="doc"] .scroll-indicator,
  body[data-page-kind="home"] .scroll-indicator{
    bottom:calc(98px + env(safe-area-inset-bottom,0px)) !important;
  }

  .ai-embed-topbar {
    height: 44px;
    padding: 0 10px;
    flex-wrap: nowrap;
  }
  #ai-embed-iframe {
    height: calc(100% - 44px);
  }

  /* 首页卡片不在这里：它们由 body[data-page-kind="home"] 的单一
     surface 规则统一关闭 backdrop-filter（逐卡模糊在 iOS 上堆合成层）。 */
  .navbar,
  .sidebar,
  .doc-toc,
  .modal-box,
  .chat-sidebar,
  .user-dropdown,
  .admin-sidebar,
  .provider-card {
    backdrop-filter: blur(12px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  }

  .nav-apps-dropdown{
    left:8px !important;
    right:8px !important;
    min-width:auto !important;
    width:auto !important;
    max-height:min(65vh, 380px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .modal{
    align-items:center !important;
    padding:12px !important;
    padding-bottom:max(12px, env(safe-area-inset-bottom, 12px)) !important;
  }

  .modal-box{
    max-height:86vh !important;
    overflow:hidden !important;
  }

  .modal-body{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }

  .modal{
    align-items:center !important;
    overflow:hidden !important;
  }
  .modal-box{
    max-height:86vh !important;
    overflow:hidden !important;
  }
  .modal-body{
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }
  .user-dropdown,
  .conv-more-menu,
  .nav-apps-dropdown{
    max-height:min(68vh, 420px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .user-dropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    max-height: min(65vh, 420px) !important;
    overflow-y: auto !important;
  }

  .search-page-wrap {
    padding-top: calc(var(--nav-height) + 10px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .search-page-header {
    margin-bottom: 14px !important;
  }
  .search-page-header h1 {
    font-size: 1.6rem !important;
    margin-bottom: 4px !important;
  }
  .search-page-header p {
    font-size: 13px !important;
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  .search-page-input-wrap input {
    padding: 13px 16px 13px 40px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }
  .search-result-card {
    padding: 14px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }
  .search-result-card h3 {
    font-size: 15px !important;
  }
  .search-result-card .snippet {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .sidebar {
    position: fixed !important;
    top: var(--nav-height) !important;
    left: -100% !important;
    width: 82% !important;
    max-width: 320px !important;
    height: calc(100dvh - var(--nav-height)) !important;
    max-height: calc(100dvh - var(--nav-height)) !important;
    z-index: 2000 !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: left 0.3s ease !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .sidebar.show {
    left: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
  .sidebar-overlay {
    top: 0 !important;
    height: 100dvh !important;
  }

  .search-page-header p {
    display: block !important;
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  .docs-layout .sidebar {
    position: fixed !important;
    top: var(--nav-height) !important;
    bottom: 0 !important;
    left: -100% !important;
    width: 82% !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transition: left .28s ease !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .docs-layout .sidebar.show {
    left: 0 !important;
  }

  .docs-layout .sidebar-overlay {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
  }

  .docs-layout .doc-main {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: calc(100dvh - var(--nav-height)) !important;
  }

  .docs-layout .doc-content {
    min-height: calc(100dvh - var(--nav-height)) !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .hero-badge{
    margin-bottom:16px !important;
    font-size:13px !important;
    padding:8px 16px !important;
  }
  .hero-title{
    font-size:clamp(2.6rem, 12vw, 4rem) !important;
    margin-bottom:12px !important;
  }
  .hero-desc{
    font-size:1rem !important;
    margin-bottom:20px !important;
  }
  .hero-actions{
    max-width:320px !important;
    gap:10px !important;
  }
  .hero-actions .hero-quick-btn{
    min-height:50px !important;
    padding:12px 16px !important;
    font-size:14px !important;
    border-radius:calc(var(--visual-ctaRadius, 9999) * 1px) !important;
  }
  .hero-actions .hero-quick-btn .icon-sm{
    width:18px !important;
    height:18px !important;
  }

  .sidebar-toggle {
    display: flex !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 1000 !important;
  }

  .home-ai-chat-shell {
    min-height: 620px;
  }
  .home-ai-chat-messages {
    min-height: 540px;
  }

}

@media (max-width: 768px) {
  .nav-apps-dropdown {
    left: 12px !important;
    right: 12px !important;
    min-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  .nav-apps-dropdown .nav-app-item {
    flex-direction: row !important;
    gap: 12px !important;
  }
  .nav-apps-dropdown .app-desc {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

.markdown-body table {
  display: table !important;
  width: auto !important;
  min-width: 50% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
}
.markdown-body .table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}
.markdown-body th,
.markdown-body td {
  white-space: normal !important;
  word-break: break-word !important;
}

.markdown-body ol {
  list-style-position: outside !important;
  padding-left: 2em !important;
}
.markdown-body ul {
  list-style-position: outside !important;
  padding-left: 1.6em !important;
}
.markdown-body li {
  overflow: visible !important;
}

/* ---- styles/layer06.css ---- */
/* generated by scripts/split_css_layer.py — edit the source file */
/* ── layer06.css · L4876-L5330
   职责：正文排版 + 通用工具类
   主要内容：正文排版 47 条、通用工具类 40 条
   层叠是承重的（1255 条顶层规则里 74 处后条覆盖前条），本块只能整体移动，
   不要单独抽规则到别处 —— 需要调整请改 style.css 后重新切分。
   来源：static/style.css，索引：static/style.layers.tsv */

.markdown-body .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 16px auto;
  display: flex;
  justify-content: center;
}
.markdown-body table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  margin: 0 auto;
  min-width: 280px;
}
.markdown-body th,
.markdown-body td {
  white-space: normal;
  word-break: break-word;
  padding: 10px 14px;
}

.markdown-body .callout-summary{background:#f0f4ff !important;}
.markdown-body .callout-summary .callout-header{color:#4b6bfb !important;}
.markdown-body .callout-example{background:#f0f7ff !important;}
.markdown-body .callout-example .callout-header{color:#3b82f6 !important;}
.markdown-body .callout-bug{background:#fff1f2 !important;}
.markdown-body .callout-bug .callout-header{color:#e11d48 !important;}
.markdown-body .callout-todo{background:#f0f4ff !important;}
.markdown-body .callout-todo .callout-header{color:#6366f1 !important;}
.markdown-body .callout-abstract{background:#eef6ff !important;}
.markdown-body .callout-abstract .callout-header{color:#0284c7 !important;}
.markdown-body .callout-failure{background:#fff1f2 !important;}
.markdown-body .callout-failure .callout-header{color:#dc2626 !important;}
.markdown-body .callout-caution{background:#fff7ed !important;}
.markdown-body .callout-caution .callout-header{color:#ea580c !important;}
.markdown-body .callout-faq{background:#f5f3ff !important;}
.markdown-body .callout-faq .callout-header{color:#7c3aed !important;}
.markdown-body .callout-check{background:#ecfdf5 !important;}
.markdown-body .callout-check .callout-header{color:#059669 !important;}

[data-theme="dark"] .markdown-body .callout-summary{background:#1e2235 !important;}
[data-theme="dark"] .markdown-body .callout-example{background:#1a2332 !important;}
[data-theme="dark"] .markdown-body .callout-bug{background:#2d1b22 !important;}
[data-theme="dark"] .markdown-body .callout-todo{background:#1e1e35 !important;}
[data-theme="dark"] .markdown-body .callout-abstract{background:#172230 !important;}
[data-theme="dark"] .markdown-body .callout-failure{background:#2a1a1a !important;}
[data-theme="dark"] .markdown-body .callout-caution{background:#2a2215 !important;}
[data-theme="dark"] .markdown-body .callout-faq{background:#211e32 !important;}
[data-theme="dark"] .markdown-body .callout-check{background:#152a20 !important;}

.math-inline {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.math-inline::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
  .math-inline .katex {
    display: inline-block;
    max-width: calc(100vw - 48px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    vertical-align: baseline;
  }
}

.math-block {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 768px) {
  .math-inline {
    max-width: calc(100vw - 60px);
  }
  .math-inline .katex {
    font-size: 0.92em;
  }
  .math-block {
    max-width: calc(100vw - 40px);
    padding: 4px 0;
  }
  .math-block .katex {
    font-size: 0.95em;
  }

  td .math-inline .katex,
  th .math-inline .katex {
    font-size: 0.85em;
  }
}

.mathplot-block,
.mathplot-container {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 480px !important;
  padding: 0 !important;
  margin: 16px 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}
.mathplot-block .function-plot,
.mathplot-container .function-plot,
.aid-mathplot .function-plot {
  width: 100% !important;
}
.mathplot-block svg,
.mathplot-container svg,
.aid-mathplot svg,
.function-plot svg {
  display: block !important;
  max-width: 100% !important;
}
.echarts-block {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 520px !important;
}

.function-plot svg,
.mathplot-block svg,
.mathplot-container svg,
.mathplot-block .function-plot,
.mathplot-container .function-plot,
.doc-content .markdown-body .function-plot svg,
.doc-content .markdown-body .mathplot-block svg {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
}

.function-plot,
.mathplot-block .function-plot,
.mathplot-container .function-plot {
  width: 100% !important;
  max-width: 100% !important;
}

.function-plot .content {
  clip-path: none !important;
}



[data-theme="light"] .btn-primary,
[data-theme="light"] .send-btn,
[data-theme="light"] .new-chat-btn,
[data-theme="light"] .admin-tab.active {
  background: var(--theme-solid) !important;
  color: var(--theme-fg, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--theme-solid) 50%, transparent) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.18) !important;
  background-image: none !important;
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .send-btn,
[data-theme="dark"] .new-chat-btn,
[data-theme="dark"] .admin-tab.active {
  background: var(--theme-solid) !important;
  color: var(--theme-fg, #fff) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
  background-image: none !important;
}
.btn-primary:hover,
.send-btn:hover,
.new-chat-btn:hover,
.admin-tab.active:hover {
  background: color-mix(in srgb, var(--theme-solid, #e7fbb0) 90%, #fff) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.btn-primary:active,
.send-btn:active,
.new-chat-btn:active {
  transform: translateY(0) !important;
  background: color-mix(in srgb, var(--theme-solid, #e7fbb0) 84%, #000) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-solid, #e7fbb0) 25%, transparent) !important;
}

/* 兜底头像（没有头像图时的首字母圆）：曾写死 #6366f1 靛蓝，
   在 Vice 主题下和站点强调色对不上。 */
#shared-uc-avatar,
#site-uc-avatar,
.user-avatar-large {
  background: var(--theme-solid, #e7fbb0) !important;
  background-image: none !important;
}

.cursor, .cursor-follower {
  display: none !important;
}
.spotlight-card::before {
  display: none !important;
}

.code-fold-mask {
  background: linear-gradient(transparent, #f6f8fa) !important;
}
[data-theme="dark"] .code-fold-mask {
  background: linear-gradient(transparent, #0f111a) !important;
}

html.bold-gradient-active .markdown-body strong{
  background-image: linear-gradient(90deg,var(--visual-title1, #ff9fc9) 0%,var(--visual-title2, #ffc3cf) 25%,var(--visual-title3, #fff0d5) 50%,var(--visual-title2, #ffc3cf) 75%,var(--visual-title1, #ff9fc9) 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: color-flow 6s linear infinite !important;
}

.srb-fm-wrap {
  margin: 4px 0 22px;
}
.srb-fm-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(120,120,140,0.04);
  border: 1px solid rgba(120,120,140,0.08);
}
[data-theme="dark"] .srb-fm-card {
  background: rgba(255,255,255,0.025);
  border-color: rgba(255,255,255,0.05);
}
.srb-fm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 4px;
  font-size: 13px;
  line-height: 1.5;
  min-height: 28px;
}
.srb-fm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: 0.6;
}
.srb-fm-icon svg {
  width: 14px;
  height: 14px;
}
.srb-fm-label {
  flex-shrink: 0;
  width: 44px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.srb-fm-value {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  color: var(--text-primary);
}
.srb-fm-text {
  font-size: 13px;
  color: var(--text-secondary);
  word-break: break-word;
}
.srb-fm-desc {
  font-style: normal;
  line-height: 1.6;
}
.srb-fm-chip {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(231,251,176,0.06);
  border: 1px solid rgba(231,251,176,0.14);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: 0;
}
.srb-fm-chip:hover {
  background: rgba(231,251,176,0.14);
}

.srb-fm-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 3px;
  border-radius: 999px;
  background: rgba(120,120,140,0.06);
  border: 1px solid rgba(120,120,140,0.10);
  cursor: pointer;
  transition: all .15s;
}
.srb-fm-author:hover {
  background: rgba(231,251,176,0.10);
  border-color: rgba(231,251,176,0.22);
  transform: translateY(-1px);
}
.srb-fm-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .srb-fm-author-avatar {
    width: 30px;
    height: 30px;
  }
}
.srb-fm-author-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.srb-fm-author-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.srb-fm-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 评论区不做 hover 效果，头像的 scale 放大一并去掉；
   保留 cursor:pointer 让可点性依然可感知。 */
.comment-avatar,
.comment-avatar-placeholder {
  cursor: pointer;
}

@media (max-width: 768px) {
  .srb-fm-card { padding: 8px 12px; }
  .srb-fm-label { width: 38px; font-size: 11.5px; }
  .srb-fm-row { font-size: 12.5px; min-height: 26px; }
}

.markdown-body .md-thr-root {
  margin: 0.4em 0 0.6em;
}
.markdown-body .md-thr-group {
  border-left: 2px solid var(--glass-border, rgba(120,120,140,0.22));
  margin-left: 0.3em;
  padding-left: 0;
}
[data-theme="dark"] .markdown-body .md-thr-group {
  border-left-color: rgba(255,255,255,0.10);
}
.markdown-body .md-thr-group:hover {
  border-left-color: var(--accent, #e7fbb0);
}
.markdown-body .md-thr-line {
  position: relative;
  padding: 0.18em 0 0.18em 1.4em;
  line-height: 1.7;
}
.markdown-body .md-thr-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.9em;
  border-top: 1px solid var(--glass-border, rgba(120,120,140,0.22));
}
[data-theme="dark"] .markdown-body .md-thr-line::before {
  border-top-color: rgba(255,255,255,0.08);
}
.markdown-body .md-thr-group:hover > .md-thr-line::before {
  border-top-color: var(--accent, #e7fbb0);
  opacity: 0.5;
}
.markdown-body .md-thr-txt {
  display: inline;
}
.markdown-body .md-thr-key {
  font-weight: 700;
  color: var(--text-primary);
}
.markdown-body .md-thr-txt code {
  font-size: 0.88em;
  padding: 0.1em 0.3em;
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
}
[data-theme="dark"] .markdown-body .md-thr-txt code {
  background: rgba(255,255,255,0.07);
}
.markdown-body .md-thr-kids {
  margin: 0;
  padding: 0;
}
.markdown-body .md-thr-btn {
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--glass-border, rgba(120,120,140,0.22));
  background: var(--bg-primary, #fff);
  cursor: pointer;
  padding: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.markdown-body .md-thr-line:hover > .md-thr-btn {
  opacity: 1;
}
.markdown-body .md-thr-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid var(--text-muted, #888);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: transform 0.15s;
  transform: rotate(90deg);
}

/* ---- styles/layer07.css ---- */
/* generated by scripts/split_css_layer.py — edit the source file */
/* ── layer07.css · L5331-L5983
   职责：正文排版 + 通用工具类 + 设计变量
   主要内容：正文排版 70 条、通用工具类 25 条、设计变量 24 条
   层叠是承重的（1255 条顶层规则里 74 处后条覆盖前条），本块只能整体移动，
   不要单独抽规则到别处 —— 需要调整请改 style.css 后重新切分。
   来源：static/style.css，索引：static/style.layers.tsv */
.markdown-body .md-thr-line.collapsed > .md-thr-btn::after {
  transform: rotate(0deg);
}
.markdown-body .md-thr-btn:hover {
  border-color: var(--accent, #e7fbb0);
  background: var(--accent-light, rgba(231,251,176,0.08));
}
.markdown-body .md-thr-btn:hover::after {
  border-left-color: var(--accent, #e7fbb0);
}
.markdown-body .md-thr-line.collapsed > .md-thr-kids {
  display: none;
}
.markdown-body .md-thr-line.collapsed > .md-thr-txt::after {
  content: " \2026";
  color: var(--text-muted, #888);
  font-style: italic;
}

.markdown-body .md-thr-root { margin: 0.5em 0; }
.markdown-body .md-thr-group {
  border-left: 2px solid var(--glass-border, rgba(120,120,140,0.25));
  margin-left: 0.2em;
  padding-left: 0.8em;
}
[data-theme="dark"] .markdown-body .md-thr-group {
  border-left-color: rgba(255,255,255,0.12);
}
.markdown-body .md-thr-line {
  position: relative;
  margin: 0.2em 0;
  line-height: 1.7;
}
.markdown-body .md-thr-txt { display: block; }
.markdown-body .md-thr-key { font-weight: 700; color: var(--text-primary); }
.markdown-body .md-thr-txt code {
  font-size: 0.88em; padding: 0.1em 0.35em; border-radius: 4px; background: rgba(0,0,0,0.05);
}
[data-theme="dark"] .markdown-body .md-thr-txt code { background: rgba(255,255,255,0.07); }
.markdown-body .md-thr-kids { margin: 0; padding: 0; }
.markdown-body .md-thr-btn {
  position: absolute;
  left: -1.35em;
  top: 0.2em;
  width: 1.2em; height: 1.2em;
  background: var(--bg-primary, #fff);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted, #888);
  padding: 0; z-index: 2;
}
[data-theme="dark"] .markdown-body .md-thr-btn { background: var(--bg-primary, #000); }
.markdown-body .md-thr-btn svg {
  width: 14px; height: 14px; transition: transform 0.2s; transform: rotate(90deg);
}
.markdown-body .md-thr-line.collapsed > .md-thr-btn svg { transform: rotate(0deg); }
.markdown-body .md-thr-line.collapsed > .md-thr-kids { display: none; }
.markdown-body .md-thr-line.collapsed > .md-thr-txt::after {
  content: " \2026"; color: var(--text-muted, #888);
}

.markdown-body .md-thr-root { margin: 0.5em 0; }
.markdown-body .md-thr-group {
  border-left: 2px solid var(--glass-border, rgba(120,120,140,0.25));
  margin-left: 0.2em;
  padding-left: 0.8em;
}
[data-theme="dark"] .markdown-body .md-thr-group {
  border-left-color: rgba(255,255,255,0.12);
}
.markdown-body .md-thr-line {
  position: relative;
  margin: 0.2em 0;
  line-height: 1.7;
}
.markdown-body .md-thr-txt { display: block; }
.markdown-body .md-thr-key { font-weight: 700; color: var(--text-primary); }
.markdown-body .md-thr-txt code {
  font-size: 0.88em; padding: 0.1em 0.35em; border-radius: 4px; background: rgba(0,0,0,0.05);
}
[data-theme="dark"] .markdown-body .md-thr-txt code { background: rgba(255,255,255,0.07); }
.markdown-body .md-thr-kids { margin: 0; padding: 0; }
.markdown-body .md-thr-btn {
  position: absolute;
  left: -1.35em;
  top: 0.2em;
  width: 1.2em; height: 1.2em;
  background: var(--bg-primary, #fff);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted, #888);
  padding: 0; z-index: 2;
}
[data-theme="dark"] .markdown-body .md-thr-btn { background: var(--bg-primary, #000); }
.markdown-body .md-thr-btn svg {
  width: 14px; height: 14px; transition: transform 0.2s; transform: rotate(90deg);
}
.markdown-body .md-thr-line.collapsed > .md-thr-btn svg { transform: rotate(0deg); }
.markdown-body .md-thr-line.collapsed > .md-thr-kids { display: none; }
.markdown-body .md-thr-line.collapsed > .md-thr-txt::after {
  content: " \2026"; color: var(--text-muted, #888);
}

@font-face {
  font-family: "Quicksand";
  src: url("/static/fonts/Quicksand-Variable.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
/* 数码管：辩论计时器与首页实验室展位共用同一份字形。 */
@font-face {
  font-family: "DSDigit";
  src: url("/static/fonts/DS-DIGIT.TTF") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LXGW WenKai";
  src: url("/static/fonts/LXGWWenKai-Regular.woff2") format("woff2"),
       url("/static/fonts/LXGWWenKai-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+2E80-2EFF,U+3000-303F,U+3040-30FF,U+3100-312F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF,U+20000-2A6DF,U+2A700-2EBEF;
}
@font-face {
  font-family: "LXGW WenKai";
  src: url("/static/fonts/LXGWWenKai-Regular.woff2") format("woff2"),
       url("/static/fonts/LXGWWenKai-Regular.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+2E80-2EFF,U+3000-303F,U+3040-30FF,U+3100-312F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF,U+20000-2A6DF,U+2A700-2EBEF;
}

html[data-en-font="quicksand"]  { --srb-en-font: "Quicksand"; }
html[data-en-font="sf-rounded"] { --srb-en-font: "SF Pro Rounded", ui-rounded; }

html[data-cn-font="lxgw"] { --srb-cn-font: "LXGW WenKai", "SimSun", "PingFang SC"; }
html[data-cn-font="anthropic"], html[data-cn-font="fwanthserifmstd"] { --srb-cn-font: "FWAnthSerifMStd", "FZFW", "Noto Serif CJK SC", serif; }

.markdown-body,
.markdown-body p,
.markdown-body li,
.markdown-body td,
.markdown-body th,
.markdown-body blockquote,
.markdown-body strong,
.markdown-body em,
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6,
.doc-content .markdown-body,
.doc-content .markdown-body p,
.doc-content .markdown-body li,
.doc-content .markdown-body blockquote,
.doc-content .markdown-body strong,
.doc-content .markdown-body h1,
.doc-content .markdown-body h2,
.doc-content .markdown-body h3,
.msg-bubble,
.msg-bubble.markdown-body,
.msg-bubble p,
.msg-bubble li,
.msg-bubble strong {
  font-family:
    var(--srb-en-font, "Inter"),
    var(--srb-cn-font, "PingFang SC"),
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
    "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif !important;
}

html[data-cn-font="lxgw"] .markdown-body,
html[data-cn-font="lxgw"] .doc-content .markdown-body,
html[data-cn-font="lxgw"] .msg-bubble {
  line-height: 1.85 !important;
}

.markdown-body strong,
.doc-content .markdown-body strong,
.msg-bubble strong {
  font-weight: 700 !important;
}
html[data-cn-font] .navbar,
html[data-cn-font] .sidebar,
html[data-cn-font] .doc-toc,
html[data-cn-font] .nav-link,
html[data-cn-font] .btn {
  font-family: var(--font-sans) !important;
}


html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .markdown-body,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .markdown-body p,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .markdown-body li,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .markdown-body strong,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .markdown-body h1,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .markdown-body h2,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .markdown-body h3,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .doc-content .markdown-body,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .doc-content .markdown-body p,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .msg-bubble,
html[data-en-font="sf-rounded"][data-cn-font="lxgw"] .msg-bubble p {
  font-family: "LXGW WenKai", "SimSun", "SF Pro Rounded", ui-rounded, -apple-system, "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
}

html[data-cn-font="lxgw"] .markdown-body,
html[data-cn-font="lxgw"] .markdown-body p,
html[data-cn-font="lxgw"] .markdown-body li,
html[data-cn-font="lxgw"] .doc-content .markdown-body,
html[data-cn-font="lxgw"] .doc-content .markdown-body p,
html[data-cn-font="lxgw"] .msg-bubble,
html[data-cn-font="lxgw"] .msg-bubble p {
  -webkit-text-stroke: 0.32px currentColor !important;
  font-weight: 500 !important;
}
html[data-cn-font="lxgw"] .markdown-body strong,
html[data-cn-font="lxgw"] .doc-content .markdown-body strong,
html[data-cn-font="lxgw"] .msg-bubble strong {
  -webkit-text-stroke: 0.6px currentColor !important;
  font-weight: 700 !important;
}
html[data-cn-font="lxgw"] .markdown-body h1,
html[data-cn-font="lxgw"] .markdown-body h2,
html[data-cn-font="lxgw"] .markdown-body h3,
html[data-cn-font="lxgw"] .doc-content .markdown-body h1,
html[data-cn-font="lxgw"] .doc-content .markdown-body h2,
html[data-cn-font="lxgw"] .doc-content .markdown-body h3 {
  -webkit-text-stroke: 0.55px currentColor !important;
  font-weight: 700 !important;
}

:root {
  --theme-solid: var(--text-primary);
  --theme-light: rgba(0,0,0,0.04);
  --theme-border: var(--text-secondary);
  --theme-mark-bg: rgba(0,0,0,0.06);
  --theme-mark-fg: var(--text-primary);
  --code-bg-neutral: rgba(0,0,0,0.06);
  --theme-fg: #ffffff;
  --theme-glow: var(--theme-light);
}
[data-theme="dark"] {
  --theme-solid: var(--text-primary);
  --theme-light: rgba(255,255,255,0.06);
  --theme-border: var(--text-secondary);
  --theme-mark-bg: rgba(255,255,255,0.10);
  --theme-mark-fg: var(--text-primary);
  --code-bg-neutral: rgba(255,255,255,0.10);
  --theme-fg: #ffffff;
  --theme-glow: var(--theme-light);
}

/* 正文里的链接与加粗共用同一套「浅底压深」结果：两者都是正文级文字，
   强调色原色在浅画布上达不到 4.5:1（lime 只有 2.42:1）。 */
.markdown-body a,
.msg-bubble.markdown-body a,
.doc-content .markdown-body a {
  color: var(--srb-link-color, var(--theme-solid)) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.markdown-body a:hover,
.msg-bubble.markdown-body a:hover {
  opacity: .82 !important;
}



.markdown-body mark,
.doc-content .markdown-body mark,
.msg-bubble.markdown-body mark,
mark {
  background-color: var(--theme-mark-bg) !important;
  color: var(--theme-mark-fg) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

.markdown-body code:not(pre code),
.doc-content .markdown-body code:not(pre code),
.msg-bubble.markdown-body code:not(pre code) {
  background: var(--code-bg-neutral) !important;
  color: var(--theme-solid) !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  font-size: .9em !important;
  font-family: var(--font-mono) !important;
}

.markdown-body del,
.markdown-body s,
.doc-content .markdown-body del,
.doc-content .markdown-body s,
.msg-bubble.markdown-body del,
.msg-bubble.markdown-body s {
  color: var(--text-primary) !important;
  text-decoration: line-through !important;
  text-decoration-color: var(--text-primary) !important;
  text-decoration-thickness: 2px !important;
  opacity: .85 !important;
}

.markdown-body table thead th,
.markdown-body table th,
.doc-content .markdown-body th,
.msg-bubble.markdown-body th {
  background: var(--theme-light) !important;
  color: var(--text-primary) !important;
}

.toc-link.active {
  color: var(--theme-solid) !important;
  border-left-color: var(--theme-solid) !important;
}
#toc-jelly {
  border-left-color: var(--theme-solid) !important;
  background: var(--theme-light) !important;
}

.markdown-body strong,
.doc-content .markdown-body strong,
.msg-bubble.markdown-body strong,
.msg-bubble strong {
  color: var(--srb-strong-color, var(--theme-solid, var(--text-primary))) !important;
  -webkit-text-fill-color: var(--srb-strong-color, var(--theme-solid, var(--text-primary))) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .markdown-body strong,
[data-theme="dark"] .doc-content .markdown-body strong,
[data-theme="dark"] .msg-bubble.markdown-body strong,
[data-theme="dark"] .msg-bubble strong {
  color: var(--srb-strong-color, var(--theme-solid, var(--text-primary))) !important;
  -webkit-text-fill-color: var(--srb-strong-color, var(--theme-solid, var(--text-primary))) !important;
}

.markdown-body .callout-info,    .markdown-body .callout-note    { background: rgba(74,144,226,.08) !important;  border-left: none !important; }
.markdown-body .callout-tip,     .markdown-body .callout-success { background: rgba(43,170,103,.08) !important;  border-left: none !important; }
.markdown-body .callout-warning                                  { background: rgba(219,139,46,.08) !important;  border-left: none !important; }
.markdown-body .callout-danger                                   { background: rgba(220,69,73,.08) !important;   border-left: none !important; }
.markdown-body .callout-question                                 { background: rgba(102,88,245,.08) !important;  border-left: none !important; }
.markdown-body .callout-quote                                    { background: rgba(110,118,129,.08) !important; border-left: none !important; }

.markdown-body .callout-info .callout-header,
.markdown-body .callout-note .callout-header                     { color: #4A90E2 !important; }
.markdown-body .callout-tip .callout-header,
.markdown-body .callout-success .callout-header                  { color: #2BAA67 !important; }
.markdown-body .callout-warning .callout-header                  { color: #DB8B2E !important; }
.markdown-body .callout-danger .callout-header                   { color: #DC4549 !important; }
.markdown-body .callout-question .callout-header                 { color: #6658F5 !important; }
.markdown-body .callout-quote .callout-header                    { color: #6E7681 !important; }

[data-theme="dark"] .markdown-body .callout-info,
[data-theme="dark"] .markdown-body .callout-note                 { background: rgba(107,177,255,.10) !important;  border-left: none !important; }
[data-theme="dark"] .markdown-body .callout-tip,
[data-theme="dark"] .markdown-body .callout-success              { background: rgba(74,222,128,.10) !important;   border-left: none !important; }
[data-theme="dark"] .markdown-body .callout-warning              { background: rgba(255,184,77,.10) !important;   border-left: none !important; }
[data-theme="dark"] .markdown-body .callout-danger               { background: rgba(255,107,112,.10) !important;  border-left: none !important; }
[data-theme="dark"] .markdown-body .callout-question             { background: rgba(167,139,250,.10) !important;  border-left: none !important; }
[data-theme="dark"] .markdown-body .callout-quote                { background: rgba(161,166,173,.10) !important;  border-left: none !important; }

[data-theme="dark"] .markdown-body .callout-info .callout-header,
[data-theme="dark"] .markdown-body .callout-note .callout-header             { color: #6BB1FF !important; }
[data-theme="dark"] .markdown-body .callout-tip .callout-header,
[data-theme="dark"] .markdown-body .callout-success .callout-header          { color: #4ADE80 !important; }
[data-theme="dark"] .markdown-body .callout-warning .callout-header          { color: #FFB84D !important; }
[data-theme="dark"] .markdown-body .callout-danger .callout-header           { color: #FF6B70 !important; }
[data-theme="dark"] .markdown-body .callout-question .callout-header         { color: #A78BFA !important; }
[data-theme="dark"] .markdown-body .callout-quote .callout-header            { color: #A1A6AD !important; }

.markdown-body .srbill-tag,
.doc-content .markdown-body .srbill-tag,
.msg-bubble.markdown-body .srbill-tag {
  color: var(--theme-solid) !important;
  background: var(--theme-light) !important;
  border: 1px solid var(--theme-mark-bg) !important;
}
.markdown-body .srbill-tag:hover,
.doc-content .markdown-body .srbill-tag:hover,
.msg-bubble.markdown-body .srbill-tag:hover {
  background: var(--theme-mark-bg) !important;
  border-color: var(--theme-solid) !important;
}

.markdown-body input[type="checkbox"],
.doc-content .markdown-body input[type="checkbox"],
.msg-bubble.markdown-body input[type="checkbox"] {
  accent-color: var(--theme-solid) !important;
  border-color: var(--theme-border) !important;
}
.markdown-body input[type="checkbox"]:checked,
.doc-content .markdown-body input[type="checkbox"]:checked,
.msg-bubble.markdown-body input[type="checkbox"]:checked {
  background: var(--theme-solid) !important;
  border-color: var(--theme-solid) !important;
}

.markdown-body .wikilink,
.doc-content .markdown-body .wikilink {
  color: var(--theme-solid) !important;
  border-bottom: 1px dashed var(--theme-border) !important;
}
.markdown-body .wikilink:hover,
.doc-content .markdown-body .wikilink:hover {
  background: var(--theme-light) !important;
}

.backlink-item {
  border-color: var(--theme-mark-bg) !important;
  color: var(--theme-solid) !important;
}
.backlink-item:hover {
  background: var(--theme-light) !important;
  border-color: var(--theme-solid) !important;
}

.alias-tag {
  color: var(--theme-solid) !important;
}
.alias-tag:hover {
  border-color: var(--theme-border) !important;
  color: var(--theme-solid) !important;
}


.sidebar-toggle,
.float-menu-toggle {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: none !important;
  color: #fff !important;
  background: rgba(120,120,128,0.28) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  animation: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22) !important;
  will-change: transform !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  contain: layout style !important;
}
/* 布局三件套（flex 居中 + 手型）从旧规则搬过来，只作用于闪电按钮：
   绝不能挂在 .sidebar-toggle 上 —— 它默认 display:none，只有手机断点才显形。 */
.float-menu-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-toggle svg, .sidebar-toggle i,
.float-menu-toggle svg, .float-menu-toggle i {
  color: #fff !important;
  stroke: #fff !important;
}
/* 浅色主题下按钮压在浅色画面上，白色 icon 会看不见；这是同一套材质的浅色取值，不是第二套外观。 */
[data-theme="light"] .sidebar-toggle,
[data-theme="light"] .float-menu-toggle {
  background: rgba(120,120,128,0.22) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .sidebar-toggle svg, [data-theme="light"] .sidebar-toggle i,
[data-theme="light"] .float-menu-toggle svg, [data-theme="light"] .float-menu-toggle i {
  color: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}
.sidebar-toggle:hover,
.float-menu-toggle:hover {
  filter: brightness(1.12) !important;
  transform: translateZ(0) translateY(-1px) !important;
}
.sidebar-toggle:active,
.float-menu-toggle:active {
  transform: translateZ(0) scale(0.96) !important;
}

.comment-avatar-placeholder,
.user .msg-avatar,
.top-user-avatar,
.user-avatar-large,
.user-dropdown-avatar,
.prompt-card-avatar,
.msg-avatar.user,
#shared-uc-avatar,
#site-uc-avatar,
#uc-avatar {
  color: var(--theme-fg, #fff) !important;
}
.btn-primary,
.send-btn:not(.stop),
.new-chat-btn,
.admin-tab.active {
  color: var(--theme-fg, #fff) !important;
}
.btn-primary svg, .btn-primary i,
.send-btn:not(.stop) svg, .send-btn:not(.stop) i,
.new-chat-btn svg, .new-chat-btn i {
  color: var(--theme-fg, #fff) !important;
  stroke: var(--theme-fg, #fff) !important;
}
#main-comment-submit-btn,
#inline-reply-submit-btn {
  color: var(--theme-fg, #fff) !important;
}

.navbar {
  transition: top 0.5s cubic-bezier(0.16,1,0.3,1),
              left 0.5s cubic-bezier(0.16,1,0.3,1),
              right 0.5s cubic-bezier(0.16,1,0.3,1),
              border-radius 0.5s cubic-bezier(0.16,1,0.3,1),
              padding 0.5s cubic-bezier(0.16,1,0.3,1),
              height 0.5s cubic-bezier(0.16,1,0.3,1),
              background 0.45s ease, box-shadow 0.45s ease !important;
}
.navbar::before {
  transition: opacity 0.45s ease, border-radius 0.5s cubic-bezier(0.16,1,0.3,1) !important;
}
html[data-navbar-style="capsule"] .nav-brand { animation: none !important; }

html[data-navbar-style="capsule"] body[data-page-kind="home"]:not(.navbar-scrolled):not(.navbar-menu-open) .navbar,
html[data-navbar-style="capsule"] body[data-page-kind="doc"]:not(.navbar-scrolled):not(.navbar-menu-open) .navbar {
  background: transparent !important; box-shadow: none !important;
  border: none !important; border-bottom: 1px solid transparent !important;
  -webkit-backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-navbar-style="capsule"] body[data-page-kind="home"]:not(.navbar-scrolled):not(.navbar-menu-open) .navbar::before,
html[data-navbar-style="capsule"] body[data-page-kind="doc"]:not(.navbar-scrolled):not(.navbar-menu-open) .navbar::before {
  opacity: 0 !important;
}

html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .navbar {
  top: calc(12px + var(--safe-top)) !important;
  left: max(16px, calc(50vw - 540px)) !important;
  right: max(16px, calc(50vw - 540px)) !important;
  border-radius: 999px !important;
  padding-top: 0 !important; height: 60px !important;
  border: 1px solid var(--glass-border) !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .navbar::before {
  border-radius: 999px !important; opacity: 1 !important;
}
html[data-navbar-style="capsule"][data-theme="dark"] body.navbar-scrolled:not(.navbar-menu-open) .navbar {
  box-shadow: none !important;
}

html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .search-box input {
  width: 38px !important; height: 38px !important; padding: 0 !important;
  color: transparent !important; background: transparent !important;
  border-color: transparent !important; box-shadow: none !important;
  cursor: pointer !important; border-radius: 50% !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .search-box input::placeholder { color: transparent !important; }
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .search-box .search-icon {
  left: 50% !important; transform: translate(-50%,-50%) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

body[data-page-kind="doc"] .sidebar,
body[data-page-kind="doc"] .doc-toc {
  top: 0 !important; height: 100vh !important;
  padding-top: var(--nav-height) !important;
  transition: padding-top 0.5s cubic-bezier(0.16,1,0.3,1) !important;
}
body[data-page-kind="doc"] .doc-content {
  padding-top: calc(var(--nav-height) + 16px) !important;
  transition: padding-top 0.5s cubic-bezier(0.16,1,0.3,1) !important;
}

@media (min-width: 769px) {
  html[data-navbar-style="capsule"] body[data-page-kind="doc"].navbar-scrolled .sidebar,
  html[data-navbar-style="capsule"] body[data-page-kind="doc"].navbar-scrolled .doc-toc {
    padding-top: 14px !important;
  }
  html[data-navbar-style="capsule"] body[data-page-kind="doc"].navbar-scrolled .sidebar-header {
    top: 0 !important;
  }
  html[data-navbar-style="capsule"] body[data-page-kind="doc"].navbar-scrolled .doc-content {
    padding-top: 96px !important;
  }
}

@media (max-width: 768px) {
  html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .navbar {
    top: calc(8px + var(--safe-top)) !important;
    left: 12px !important; right: 12px !important; height: 54px !important;
  }
  body[data-page-kind="doc"] .doc-content { padding-top: 12px !important; }
  html[data-navbar-style="capsule"] body[data-page-kind="doc"].navbar-scrolled .doc-content { padding-top: 12px !important; }
  body[data-page-kind="doc"] .sidebar,
  body[data-page-kind="doc"] .doc-toc { padding-top: var(--nav-height) !important; }
  html[data-navbar-style="capsule"] body[data-page-kind="doc"].navbar-scrolled .sidebar,
  html[data-navbar-style="capsule"] body[data-page-kind="doc"].navbar-scrolled .doc-toc { padding-top: var(--nav-height) !important; }
  html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) #read-progress {
    left: 22px !important; right: 22px !important; bottom: 3px !important;
    height: 3px !important; border-radius: 999px !important; overflow: hidden !important;
    transition: left 0.5s cubic-bezier(0.16,1,0.3,1), right 0.5s cubic-bezier(0.16,1,0.3,1), bottom 0.5s cubic-bezier(0.16,1,0.3,1) !important;
  }
  html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) #read-progress > div {
    border-radius: 999px !important;
  }
}

.nav-file.active {
  background: var(--theme-light, rgba(231,251,176,0.12)) !important;
  color: var(--srbill-bold-color, var(--theme-solid, var(--accent))) !important;
  border: 1px solid var(--theme-border, rgba(231,251,176,0.25)) !important;
}
.toc-link.active {
  color: var(--srbill-bold-color, var(--theme-solid, var(--accent))) !important;
  border-left-color: var(--srbill-bold-color, var(--theme-solid, var(--accent))) !important;
}
.toc-link.active::before {
  background: var(--theme-light, rgba(231,251,176,0.10)) !important;
  border-left-color: var(--srbill-bold-color, var(--theme-solid, var(--accent))) !important;
}

@media (min-width: 769px) {
  html[data-navbar-style="capsule"] body[data-page-kind="doc"].navbar-scrolled .doc-toc {
    padding-top: 84px !important;
  }
}

.navbar::before {
  transition: opacity .45s ease, background-color .45s ease, border-radius .5s cubic-bezier(.16,1,.3,1) !important;
}
html[data-navbar-style="capsule"] body[data-page-kind="home"]:not(.navbar-scrolled):not(.navbar-menu-open) .navbar::before,
html[data-navbar-style="capsule"] body[data-page-kind="doc"]:not(.navbar-scrolled):not(.navbar-menu-open) .navbar::before {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0 !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .navbar::before {
  background-color: rgba(255,255,255,.62) !important;
  background-image: none !important;
  opacity: 1 !important;
}
html[data-navbar-style="capsule"][data-theme="dark"] body.navbar-scrolled:not(.navbar-menu-open) .navbar::before {
  background-color: rgba(28,30,40,.15) !important;
  background-image: none !important;
  opacity: 1 !important;
}

.search-box input:focus { width: 260px; }
.theme-group .theme-btn.active,
:root[data-theme="light"] .theme-group .theme-btn.active {
  color: var(--theme-solid, var(--accent)) !important;
}

/* ---- styles/layer08.css ---- */
/* generated by scripts/split_css_layer.py — edit the source file */
/* ── layer08.css · L5984-L7109
   职责：通用工具类 + 设计变量 + 布局与导航
   主要内容：通用工具类 74 条、设计变量 61 条、布局与导航 21 条
   层叠是承重的（1255 条顶层规则里 74 处后条覆盖前条），本块只能整体移动，
   不要单独抽规则到别处 —— 需要调整请改 style.css 后重新切分。
   来源：static/style.css，索引：static/style.layers.tsv */
#btn-site-theme:hover { color: var(--theme-solid, var(--accent)) !important; }

@media (max-width: 768px) {
  .sidebar-toggle, .float-menu {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.nav-file.active {
  background: rgba(120,120,140,.16) !important;
  color: var(--text-primary) !important;
  border: 1px solid transparent !important;
  font-weight: 700 !important;
}
[data-theme="dark"] .nav-file.active { background: rgba(255,255,255,.10) !important; }
.toc-link.active {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-left-color: transparent !important;
  font-weight: 700 !important;
}
.toc-link.active::before {
  background: rgba(120,120,140,.14) !important;
  border-left-color: transparent !important;
}
[data-theme="dark"] .toc-link.active::before { background: rgba(255,255,255,.08) !important; }
#toc-jelly { background: rgba(120,120,140,.14) !important; border-left-color: transparent !important; }
[data-theme="dark"] #toc-jelly { background: rgba(255,255,255,.08) !important; }

html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .navbar {
  border: 1px solid rgba(0,0,0,0.10) !important;
  transition: top 0.5s cubic-bezier(0.16,1,0.3,1),
              left 0.5s cubic-bezier(0.16,1,0.3,1),
              right 0.5s cubic-bezier(0.16,1,0.3,1),
              border-radius 0.5s cubic-bezier(0.16,1,0.3,1),
              padding 0.5s cubic-bezier(0.16,1,0.3,1),
              height 0.5s cubic-bezier(0.16,1,0.3,1),
              background 0.45s ease, box-shadow 0.45s ease !important;
}
html[data-navbar-style="capsule"][data-theme="dark"] body.navbar-scrolled:not(.navbar-menu-open) .navbar {
  border: 1px solid rgba(255,255,255,0.06) !important;
}

.theme-group .theme-btn.active,
:root[data-theme="light"] .theme-group .theme-btn.active,
:root[data-theme="dark"] .theme-group .theme-btn.active {
  color: var(--text-primary) !important;
  background: rgba(120,120,140,.16) !important;
}
:root[data-theme="dark"] .theme-group .theme-btn.active {
  background: rgba(255,255,255,.12) !important;
}

html[data-lang="en"] .nav-title-text,
html[data-lang="en"] .nav-title-text .brand-main,
html[data-lang="en"] .nav-title-text .brand-hub,
html[data-lang="en"] .footer-brand,
html[data-lang="en"] .drawer-brand-title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  -webkit-text-stroke: 0 !important;
}

html[data-lang="en"] body,
html[data-lang="en"] .markdown-body,
html[data-lang="en"] .markdown-body p,
html[data-lang="en"] .markdown-body li,
html[data-lang="en"] .markdown-body h1,
html[data-lang="en"] .markdown-body h2,
html[data-lang="en"] .markdown-body h3,
html[data-lang="en"] .hero-desc,
html[data-lang="en"] .section-title,
html[data-lang="en"] .section-desc {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  -webkit-text-stroke: 0 !important;
  letter-spacing: -0.01em !important;
}

:root{
  /* Pre-paint fallback only. visual-runtime.js owns the live values (server
     config -> cached copy -> these). They now mirror SrbillVisualConfig
     DEFAULTS so a first visit paints the twilight palette instead of the
     legacy hot-pink canvas that used to flash before the API answered. */
  --vice-dark-bg: #43355f;
  --vice-mesh-1: rgba(155,120,170,0.52);
  --vice-mesh-2: rgba(237,154,163,0.32);
  --vice-mesh-3: rgba(255,208,173,0.12);
  --vice-r1: 220vw 130vh;
  --vice-r2: 205vw 130vh;
  --vice-r3: 180vw 120vh;
}

html:has(body[data-page-kind="home"]) {
  background:
    radial-gradient(var(--vice-r1) at var(--vice-p1, 0% 0%), var(--vice-mesh-1), transparent var(--vice-stop-1, 62%)),
    radial-gradient(var(--vice-r2) at var(--vice-p2, 100% 100%), var(--vice-mesh-2), transparent var(--vice-stop-2, 62%)),
    radial-gradient(var(--vice-r3) at var(--vice-p3, 50% 50%), var(--vice-mesh-3), transparent var(--vice-stop-3, 60%)),
    var(--vice-dark-bg) !important;
  background-attachment: fixed !important;
}
body[data-page-kind="home"]{
  background:
    radial-gradient(var(--vice-r1) at var(--vice-p1, 0% 0%), var(--vice-mesh-1), transparent var(--vice-stop-1, 62%)),
    radial-gradient(var(--vice-r2) at var(--vice-p2, 100% 100%), var(--vice-mesh-2), transparent var(--vice-stop-2, 62%)),
    radial-gradient(var(--vice-r3) at var(--vice-p3, 50% 50%), var(--vice-mesh-3), transparent var(--vice-stop-3, 60%)),
    var(--vice-dark-bg) !important;
  background-attachment: fixed !important;
  min-height:100vh !important;
  --text-primary:#eaeaff !important;
  --text-secondary:#a5a5c0 !important;
  /* 同上：首页画布也是 #43355f + 网格。原来的 #6b6b8a 在实测底色
     rgb(109,86,103) 上只有 1.28:1，等于看不见，这正是“首页正文太淡”的来源。
     选择器 (0,1,1) 已高于 :root / [data-theme] 的 (0,1,0)，所以去掉 !important。 */
  --text-muted:#d5d1ea;
  --glass-bg: rgba(255,255,255,0.05) !important;
  --glass-border: rgba(255,255,255,0.10) !important;
  --srb-liquid-bg: rgba(28,30,40,.15) !important;
  --srb-liquid-fill-img: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  --srb-liquid-border-color: rgba(255,255,255,.11) !important;
}
#srb-scroll-bg{ display:none !important; }
body[data-page-kind="home"] .hero,
body[data-page-kind="home"] .features,
body[data-page-kind="home"] .apps-section,
body[data-page-kind="home"] .home-ai-demo-section,
body[data-page-kind="home"] .home-showcase-section,
body[data-page-kind="home"] .docs-catalog,
body[data-page-kind="home"] .footer{ background:transparent !important; border:none !important; }

body[data-page-kind="home"] .nav-title-text,
body[data-page-kind="home"] .nav-link{ color:#eaeaff !important; }
body[data-page-kind="home"] .nav-link{ -webkit-text-fill-color:initial !important; }
body[data-page-kind="home"] .search-box input{
  background: rgba(255,255,255,.06) !important;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  color:#eaeaff !important;
}
body[data-page-kind="home"] .theme-group{
  background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important;
}
body[data-page-kind="home"] #auth-btn{
  background: transparent !important; background-image: none !important; border-color: transparent !important; box-shadow: none !important; color:#eaeaff !important;
}
body[data-page-kind="home"] .hero-quick-btn:not(.hero-btn-primary-glow){
  background-color: rgba(28,30,40,.45) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border-color: rgba(255,255,255,.14) !important; color:#eaeaff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body[data-page-kind="home"] .hero-quick-btn:not(.hero-btn-primary-glow) i,
body[data-page-kind="home"] .hero-quick-btn:not(.hero-btn-primary-glow) svg{
  color:#eaeaff !important; stroke:#eaeaff !important;
}

body[data-page-kind="home"] .hero-title .gradient{
  background:none !important;
  background-image: var(--gradient-text) !important;
  background-size:200% auto !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation: color-flow 6s linear infinite !important;
}

/* 首页卡片 surface 的唯一拥有者：数值全部来自视觉实验室变量。
   未启用首页视觉配置时变量缺失，这里回落到与启用态完全相同的默认值，
   所以“实验室预览 == 线上”，也不再需要第二层覆盖。
   逐卡 backdrop-filter 一律关闭：每张卡一个合成层会在 iOS 上吃爆内存。 */
body[data-page-kind="home"] .feature-card,
body[data-page-kind="home"] .app-card,
body[data-page-kind="home"] .doc-card,
body[data-page-kind="home"] .continue-item,
body[data-page-kind="home"] .home-section-point{
  background: rgba(255,255,255,var(--visual-cardAlpha,.055)) !important;
  border: 1px solid rgba(255,255,255,var(--visual-cardBorder,.10)) !important;
  border-radius: calc(var(--visual-cardRadius,20) * 1px) !important;
  box-shadow: 0 10px 30px rgba(9,7,18,var(--visual-cardShadowAlpha,0)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page-kind="home"] .spotlight-card::before{ display:none !important; }

body[data-page-kind="home"] .home-ai-demo-section .home-section-point-icon{
  --section-icon-bg: rgb(229,249,168);
  --section-icon-fg: #303817;
  --section-icon-shadow: rgba(229,249,168,.24);
}
body[data-page-kind="home"] .home-ai-demo-section .home-section-point-icon svg,
body[data-page-kind="home"] .home-ai-demo-section .home-section-point-icon i{
  color:#3a3a1a !important; stroke:#3a3a1a !important;
}
body[data-page-kind="home"] .home-showcase-section .home-section-point-icon{
  --section-icon-bg: rgb(247,199,186);
  --section-icon-fg: #452720;
  --section-icon-shadow: rgba(247,199,186,.28);
}
body[data-page-kind="home"] .home-showcase-section .home-section-point-icon svg,
body[data-page-kind="home"] .home-showcase-section .home-section-point-icon i{
  color:#3a2420 !important; stroke:#3a2420 !important;
}

body[data-page-kind="home"] .gta-scroll-text{
  background:none !important;
  background-image: linear-gradient(180deg, var(--visual-title1, #ff9fc9) 0%, var(--visual-title2, #ffd27f) 48%, var(--visual-title3, #e7fbb0) 100%) !important;
  background-size:100% 300% !important;
  background-position:center var(--srbill-scroll-flow-y, 0%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  font-size:clamp(2.4rem,5vw,4.2rem) !important;
  line-height:1.12 !important; letter-spacing:-0.04em !important;
  font-weight:900 !important; margin-bottom:22px !important;
  transition: background-position .12s linear !important;
}
body[data-page-kind="home"] .gta-scroll-p{
  font-size:clamp(1.02rem,2vw,1.18rem) !important;
  line-height:1.75 !important; color:var(--text-secondary) !important;
  margin-bottom:28px !important;
}
body[data-page-kind="home"] .gta-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  background:rgba(236,72,153,.12); color:#ec4899;
  font-weight:800; font-size:13px; margin-bottom:20px;
}

.gta-layout-inner{
  max-width:1160px; margin:0 auto; padding:0 24px;
  display:flex !important; flex-direction:column !important; gap:36px;
}
.gta-text-side,.gta-media-side{ width:100% !important; }
@media (min-width:1024px){
  .gta-layout-inner{ flex-direction:row !important; align-items:center; gap:52px; }
  .gta-layout-inner.reverse{ flex-direction:row-reverse !important; }
  .gta-text-side{ width:46% !important; flex-shrink:0; }
  .gta-media-side{ width:54% !important; flex-shrink:0; }
}
.gta-center-inner{
  max-width:1000px; margin:0 auto; padding:0 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.gta-center-inner .gta-scroll-text{ text-align:center; }
.gta-center-inner .gta-scroll-p{ max-width:700px; text-align:center; }
.gta-center-inner .home-section-points{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;
  gap:18px !important; width:100%; text-align:left; margin-top:18px;
}

/* AI 实验室屏：行式能力卡 + 更有层次的媒体框；知识目录屏：玻璃卡片网格。
   卡片底色/边框仍由 _visual-runtime.css 单一拥有，这里只管布局与交互。 */
body[data-page-kind="home"] .home-lab-section .home-section-points{
  display:grid !important; grid-template-columns:1fr !important; gap:14px !important; margin-top:6px;
}
body[data-page-kind="home"] .home-lab-section .home-section-point{
  padding:16px 18px !important; align-items:flex-start; gap:14px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s ease;
}
body[data-page-kind="home"] .home-lab-section .home-section-point:hover{ transform:scale(.985); }
body[data-page-kind="home"] .home-lab-section .home-section-point-icon{ width:42px; height:42px; border-radius:14px; }
body[data-page-kind="home"] .home-lab-section .home-section-point-title{ font-size:1.06rem; }
body[data-page-kind="home"] .home-lab-section .gta-media-frame{
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 14px 38px rgba(9,7,18,.18);
}
body[data-page-kind="home"] .home-lab-section .home-ai-demo-tabs{ padding:14px 16px 0; gap:8px; }
body[data-page-kind="home"] .home-lab-section .home-ai-demo-tab{
  padding:6px 14px; font-size:12px;
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.10);
}
body[data-page-kind="home"] .home-lab-section .home-ai-demo-tab.active{
  background:rgba(255,255,255,.16); color:#eaeaff; border-color:rgba(255,255,255,.20);
}
body[data-page-kind="home"] .home-library-section .home-section-points{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important; gap:16px !important; margin-top:26px;
}
body[data-page-kind="home"] .home-library-card{
  flex-direction:column !important; align-items:flex-start !important; gap:14px;
  padding:22px 20px !important; text-align:left;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s ease;
}
body[data-page-kind="home"] .home-library-card:hover{ transform:scale(.985); }
body[data-page-kind="home"] .home-library-card .home-section-point-icon{ width:44px; height:44px; border-radius:15px; }
body[data-page-kind="home"] .home-library-card .home-section-point-title{ font-size:1.05rem; }
body[data-page-kind="home"] :is(.home-lab-section,.home-library-section) .gta-badge{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:var(--visual-title3, #e7fbb0);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}

.gta-media-frame{
  border-radius:22px !important; overflow:hidden;
  box-shadow:0 14px 38px rgba(9,7,18,.18); height:560px !important;
  background:rgba(20,18,30,.55) !important; border:1px solid rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
}
/* 媒体框内是「标签条 + 消息区」两层，消息区吃掉剩余高度并自行滚动，
   所以这里必须是 flex 纵向而不是让消息区强占 100% 高度。 */
.gta-media-frame{ display:flex; flex-direction:column; }
.gta-media-frame .home-ai-chat-messages{ padding:16px 24px 24px; flex:1 1 auto; min-height:0; height:auto !important; overflow-y:auto; }
body[data-page-kind="home"] .home-ai-bubble{
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important; color:#eaeaff !important;
}
body[data-page-kind="home"] .home-ai-bubble.user{
  background: rgba(255,255,255,.13) !important; border-color: rgba(255,255,255,.19) !important;
}
body[data-page-kind="home"] .home-ai-thinking{
  background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; color:#a5a5c0 !important;
}
body[data-page-kind="home"] #home-ai-function-canvas,
body[data-page-kind="home"] .home-ai-graph-card{
  background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important;
}

@media (max-width:768px){
  .home-ai-demo-section,.home-showcase-section{ padding:48px 0 !important; }
  .gta-scroll-text{ font-size:2.2rem !important; }
  .gta-media-frame{ height:440px !important; border-radius:18px !important; }
  .gta-media-frame .home-ai-chat-messages{ padding:10px 14px 16px !important; }
  .home-ai-demo-tabs{ padding:10px 14px 0; gap:5px; }
  .home-ai-demo-tab{ padding:4px 10px; font-size:11.5px; }
  /* 手机上头像和气泡都缩一档，把宽度留给生图本身 */
  .home-ai-msg{ gap:8px !important; }
  .home-ai-graph-card{ margin-top:0 !important; }
  /* 手机上把生图容器压矮，避免整卡超出可视区 */
  .home-ai-graph-media{ height:210px; }
}

body[data-page-kind="home"] .hero{ background: transparent !important; }
body[data-page-kind="home"] .hero-bg{ background: transparent !important; }
body[data-page-kind="home"] .hero-bg::after{
  content:"" !important; position:absolute !important; inset:0 !important;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  -webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 80%) !important;
  mask-image: radial-gradient(circle at center, black 10%, transparent 80%) !important;
  opacity:1 !important; z-index:1 !important; pointer-events:none !important;
  display:block !important;
}

@media (max-width:768px){
  body[data-page-kind="home"]{
    background:
      radial-gradient(var(--visual-mobileMeshWidth, 120vw) var(--visual-mobileMeshHeight, 60vh) at 50% calc(8vh + var(--visual-mobileMeshY, 0vh)), var(--vice-mesh-1), transparent var(--visual-mobileMeshFeather, 60%)),
      radial-gradient(var(--visual-mobileMeshWidth, 120vw) var(--visual-mobileMeshHeight, 60vh) at 100% calc(45vh + var(--visual-mobileMeshY, 0vh)), var(--vice-mesh-2), transparent var(--visual-mobileMeshFeather, 60%)),
      radial-gradient(var(--visual-mobileMeshWidth, 120vw) var(--visual-mobileMeshHeight, 60vh) at 0% calc(80vh + var(--visual-mobileMeshY, 0vh)), var(--vice-mesh-3), transparent var(--visual-mobileMeshFeather, 60%)),
      var(--vice-dark-bg) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }
}

@keyframes vice-hero-flow{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }
body[data-page-kind="home"] .hero-title .gradient{
  background: none !important;
  background-image: var(--gradient-text) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  will-change: background-position !important;
  animation: vice-hero-flow 6s linear infinite !important;
  -webkit-animation: vice-hero-flow 6s linear infinite !important;
}

html[data-vice-bg="1"] body[data-page-kind="doc"],
html[data-vice-bg="1"][data-theme="light"] body[data-page-kind="doc"],
html[data-vice-bg="1"][data-theme="dark"] body[data-page-kind="doc"]{
  background:
    radial-gradient(var(--vice-r1,220vw 130vh) at var(--vice-p1, 0% 0%), var(--vice-mesh-1,rgba(155,120,170,0.52)), transparent var(--vice-stop-1, 62%)),
    radial-gradient(var(--vice-r2,205vw 130vh) at var(--vice-p2, 100% 100%), var(--vice-mesh-2,rgba(237,154,163,0.32)), transparent var(--vice-stop-2, 62%)),
    radial-gradient(var(--vice-r3,180vw 120vh) at var(--vice-p3, 50% 50%), var(--vice-mesh-3,rgba(255,208,173,0.12)), transparent var(--vice-stop-3, 60%)),
    var(--vice-dark-bg,#43355f) !important;
  background-attachment: fixed !important;
  --text-primary:#eaeaff !important;
  --text-secondary:#a5a5c0 !important;
  /* 弱化色在这个作用域必须自己抬亮：底色不是纯黑，而是 #43355f + 网格 + 0.38 遮罩，
     实测约 rgb(109,86,103)。原来的 #7d7d9a 在这种底上只有 1.67:1，
     12px 的“最近修改”“字数”等就直接糊掉了。#d5d1ea 实测约 4.6:1。
     这里不再带 !important：本选择器(0,2,2)已经高于 :root / [data-theme] 的 (0,1,0)，
     再叠 !important 只会把 _hero-refine.css 里同一作用域的声明再次压死。 */
  --text-muted:#d5d1ea;
  --bg-primary: transparent !important;
  --bg-secondary: transparent !important;
  --bg-tertiary: rgba(255,255,255,0.04) !important;
  --bg-code: rgba(255,255,255,0.05) !important;
  --glass-bg: rgba(20,18,30,0.42) !important;
  --glass-border: rgba(255,255,255,0.12) !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .docs-layout,
html[data-vice-bg="1"] body[data-page-kind="doc"] .doc-main,
html[data-vice-bg="1"] body[data-page-kind="doc"] .doc-content,
html[data-vice-bg="1"] body[data-page-kind="doc"] .doc-header{
  background: transparent !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .sidebar,
html[data-vice-bg="1"] body[data-page-kind="doc"] .doc-toc{
  background: rgba(20,18,30,.48) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body,
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body p,
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body li,
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body td,
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body blockquote,
html[data-vice-bg="1"] body[data-page-kind="doc"] .doc-title,
html[data-vice-bg="1"] body[data-page-kind="doc"] .doc-meta,
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-file,
html[data-vice-bg="1"] body[data-page-kind="doc"] .folder-header,
html[data-vice-bg="1"] body[data-page-kind="doc"] .toc-link{
  color:#eaeaff !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body h1,
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body h2,
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body h3,
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body h4{
  color:#f5f5ff !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-file.active{
  background: rgba(236,72,153,.18) !important;
  color:#ffd6ea !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body code:not(pre code){
  background: rgba(229,249,168,0.14) !important;
  color:rgb(229,249,168) !important;
  -webkit-text-fill-color:rgb(229,249,168) !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body pre{
  background: rgba(10,10,18,0.55) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
@media (max-width:768px){
  html[data-vice-bg="1"] body[data-page-kind="doc"]{
    background:
      radial-gradient(120vw 60vh at 50% 8vh, var(--vice-mesh-1,rgba(155,120,170,0.52)), transparent 60%),
      radial-gradient(120vw 60vh at 100% 45vh, var(--vice-mesh-2,rgba(237,154,163,0.32)), transparent 60%),
      radial-gradient(120vw 60vh at 0% 80vh, var(--vice-mesh-3,rgba(255,208,173,0.12)), transparent 60%),
      var(--vice-dark-bg,#43355f) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }

}

body[data-page-kind="doc"] .markdown-body blockquote,
.doc-content .markdown-body blockquote{
  border-left-width: 2px !important;
}

html[data-vice-bg="1"] body[data-page-kind="doc"] .katex,
html[data-vice-bg="1"] body[data-page-kind="doc"] .katex *,
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body .katex,
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body .katex *{
  color:#eaeaff !important;
  -webkit-text-fill-color:#eaeaff !important;
  fill:#eaeaff !important;
  stroke:#eaeaff !important;
  border-color:#eaeaff !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .katex .frac-line,
html[data-vice-bg="1"] body[data-page-kind="doc"] .katex .sqrt-line,
html[data-vice-bg="1"] body[data-page-kind="doc"] .katex .rule{
  border-color:#eaeaff !important;
  background:#eaeaff !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .katex svg,
html[data-vice-bg="1"] body[data-page-kind="doc"] .katex svg path{
  fill:#eaeaff !important; stroke:#eaeaff !important;
}
/* 原来是这里的 #ff7eb3 粉色加粗：选择器与 _hero-refine.css 里的
   --srb-strong-color 规则完全同特异性，而后者后加载，所以这层从来没有生效过，
   只是每次改加粗色都要多看一处、多改一处。真源统一在
   _hero-refine.css + --srb-strong-color，这里删除。 */
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body code:not(pre code){
  background: rgba(229,249,168,0.14) !important;
  color:rgb(229,249,168) !important;
  -webkit-text-fill-color:rgb(229,249,168) !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body a{ color:#9ec3f0 !important; }
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body mark{
  background: rgba(236,72,153,0.22) !important; color:#ffd6ea !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body blockquote{
  color:#c5c5e0 !important;
  border-left-color:#ec4899 !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"]{
  --srb-liquid-bg: rgba(28,30,40,.15) !important;
  --srb-liquid-fill-img: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  --srb-liquid-border-color: rgba(255,255,255,.10) !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-title-text,
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-link{ color:#eaeaff !important; }
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body th{
  background: rgba(255,255,255,0.06) !important;
  color:#eaeaff !important;
}

html[data-vice-bg="1"] body[data-page-kind="doc"] .sidebar,
html[data-vice-bg="1"] body[data-page-kind="doc"] .doc-toc{
  background: rgba(20,18,30,.30) !important;
  backdrop-filter: blur(34px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(170%) !important;
}
html[data-vice-bg="1"] body[data-page-kind="doc"] .sidebar-header,
html[data-vice-bg="1"] body[data-page-kind="doc"] .sidebar-actions{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(255,255,255,.08) !important;
}

.btn-primary:active,
.send-btn:not(.stop):active,
.new-chat-btn:active,
.chat-input-area .send-btn:not(.stop):active,
.hero-actions .hero-btn-primary-glow:active{
  background: color-mix(in srgb, var(--theme-solid, #e7fbb0) 82%, #000) !important;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22) !important;
  transition: background .08s ease !important;
}
.btn:not(.btn-primary):not(.send-btn):not(.new-chat-btn):active,
.btn-outline:active,
.btn-secondary:active,
.hero-quick-btn:not(.hero-btn-primary-glow):active{
  background: color-mix(in srgb, var(--glass-bg, rgba(255,255,255,.06)) 70%, #000) !important;
  transform: scale(0.97) !important;
  transition: transform .08s ease, background .08s ease !important;
}
@media (max-width: 768px){

}

@media (max-width:768px){

  body[data-page-kind="home"]::after{
    content:none !important;
  }
  body[data-page-kind="home"] #app{ position:relative !important; z-index:1 !important; }
}

@media (max-width:768px){
  /* 手机文档的 Vice 画布与首页同源：同一组 --visual-mobileMesh* 变量、
     同一组 mesh 色。视觉实验室在手机上调的就是这里，不再各写一份。 */
  html[data-vice-bg="1"]:has(body[data-page-kind="doc"]),
  html[data-vice-bg="1"] body[data-page-kind="doc"]{
    background:
      radial-gradient(var(--visual-mobileMeshWidth, 120vw) var(--visual-mobileMeshHeight, 60vh) at 50% calc(8vh + var(--visual-mobileMeshY, 0vh)), var(--vice-mesh-1), transparent var(--visual-mobileMeshFeather, 60%)),
      radial-gradient(var(--visual-mobileMeshWidth, 120vw) var(--visual-mobileMeshHeight, 60vh) at 100% calc(45vh + var(--visual-mobileMeshY, 0vh)), var(--vice-mesh-2), transparent var(--visual-mobileMeshFeather, 60%)),
      radial-gradient(var(--visual-mobileMeshWidth, 120vw) var(--visual-mobileMeshHeight, 60vh) at 0% calc(80vh + var(--visual-mobileMeshY, 0vh)), var(--vice-mesh-3), transparent var(--visual-mobileMeshFeather, 60%)),
      var(--vice-dark-bg) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
  }
  /* 首页在手机端不叠 ::after 氛围层，文档同样不叠，保证两者观感一致。 */
  html[data-vice-bg="1"] body[data-page-kind="doc"]::after{
    content:none !important;
    display:none !important;
  }
  html[data-vice-bg="1"] body[data-page-kind="doc"] .docs-layout,
  html[data-vice-bg="1"] body[data-page-kind="doc"] .doc-main,
  html[data-vice-bg="1"] body[data-page-kind="doc"] .doc-content {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

html[data-lang="en"] .gta-scroll-text {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}
html[data-lang="en"] .home-section-point-title {
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
}
html[data-lang="en"] .home-section-point-desc {
  font-size: 14px !important;
  line-height: 1.45 !important;
}
html[data-lang="en"] .hero-desc {
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  line-height: 1.5 !important;
}
html[data-lang="en"] .home-section-point-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
}

body[data-page-kind="home"] .search-box .search-icon,
body[data-page-kind="home"] .search-box .search-icon svg,
body[data-page-kind="home"] .theme-group .theme-btn,
body[data-page-kind="home"] .theme-group .theme-btn svg,
body[data-page-kind="home"] #btn-site-theme,
body[data-page-kind="home"] #btn-site-theme svg,
body[data-page-kind="home"] #btn-site-theme i,
body[data-page-kind="home"] .nav-toggle span,
body[data-page-kind="home"] .btn-icon,
body[data-page-kind="home"] .btn-icon svg{
  color: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}
body[data-page-kind="home"] .theme-group{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
}
body[data-page-kind="home"] .theme-group .theme-btn{
  opacity: .7 !important;
}
body[data-page-kind="home"] .theme-group .theme-btn.active{
  opacity: 1 !important;
  background: rgba(255,255,255,.14) !important;
  color: #eaeaff !important;
}
body[data-page-kind="home"] #auth-btn{
  color: #eaeaff !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-navbar-style="capsule"] body[data-page-kind="home"].navbar-scrolled .search-box .search-icon,
html[data-navbar-style="capsule"] body[data-page-kind="home"].navbar-scrolled .theme-group .theme-btn,
html[data-navbar-style="capsule"] body[data-page-kind="home"].navbar-scrolled #btn-site-theme,
html[data-navbar-style="capsule"] body[data-page-kind="home"].navbar-scrolled .btn-icon{
  color: var(--text-primary) !important;
}

@media (min-width: 769px){
  /* 桌面文档画布：与首页 ::has(home) 同一套 mesh 变量；
     html 层也画一次，避免 iOS/macOS 过度滚动时露出默认底色。 */
  html[data-vice-bg="1"]:has(body[data-page-kind="doc"]),
  html[data-vice-bg="1"] body[data-page-kind="doc"]{
    background:
      radial-gradient(var(--vice-r1,200vw 130vh) at var(--vice-p1, 0% 0%), var(--vice-mesh-1), transparent var(--vice-stop-1, 62%)),
      radial-gradient(var(--vice-r2,155vw 130vh) at var(--vice-p2, 100% 100%), var(--vice-mesh-2), transparent var(--vice-stop-2, 62%)),
      radial-gradient(var(--vice-r3,200vw 120vh) at var(--vice-p3, 50% 50%), var(--vice-mesh-3), transparent var(--vice-stop-3, 60%)),
      var(--vice-dark-bg) !important;
    background-attachment: fixed !important;
  }
}

.doc-content ai-diagram,
.markdown-body ai-diagram,
.doc-content .figure-box,
.markdown-body .figure-box{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.2em auto !important;
}
.doc-content .aid-box,
.markdown-body .aid-box{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
.doc-content .aid-canvas,
.markdown-body .aid-canvas,
.doc-content .aid-mathplot,
.markdown-body .aid-mathplot{
  text-align: center !important;
}
.doc-content .figure-box svg,
.markdown-body .figure-box svg,
.doc-content .mermaid svg,
.markdown-body .mermaid svg,
.doc-content .aid-mathplot svg,
.markdown-body .aid-mathplot svg{
  display: inline-block !important;
  margin: 0 auto !important;
}

/* ===== 统一图表 runtime (ai-diagram) 居中 =====
   旧规则只覆盖 .mermaid / .aid-* 类名，未覆盖 SrbillDiagramRuntime
   实际产出的 <ai-diagram> 元素，导致图表整体偏左。 */
.doc-content ai-diagram,
.markdown-body ai-diagram,
.stream-md-live ai-diagram,
.stream-md-static ai-diagram{
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.doc-content ai-diagram > svg,
.markdown-body ai-diagram > svg,
.stream-md-live ai-diagram > svg,
.stream-md-static ai-diagram > svg,
.doc-content ai-diagram svg[id^="srbill-mermaid-"],
.markdown-body ai-diagram svg[id^="srbill-mermaid-"],
.stream-md-live ai-diagram svg[id^="srbill-mermaid-"],
.stream-md-static ai-diagram svg[id^="srbill-mermaid-"]{
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.doc-content ai-diagram .function-plot,
.markdown-body ai-diagram .function-plot,
.stream-md-live ai-diagram .function-plot,
.stream-md-static ai-diagram .function-plot{
  margin-left: auto !important;
  margin-right: auto !important;
}
.doc-content .aid-echarts,
.markdown-body .aid-echarts,
.doc-content .aid-canvas.aid-echarts,
.markdown-body .aid-canvas.aid-echarts{
  width: 100% !important;
  min-height: 380px !important;
}

.navbar::before {
  top: var(--safe-top, 0px) !important;
  bottom: 0 !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .navbar::before {
  top: 0 !important;
}

#lang-switch-btn{
  min-width: 34px !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .theme-group{
  position: relative !important;
  overflow: hidden !important;
  width: 38px !important;
  transition: width .3s cubic-bezier(.16,1,.3,1) !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .theme-group:hover{
  width: 110px !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .theme-group:not(:hover) .theme-btn:not(.active){
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .theme-group .theme-btn{
  transition: width .25s ease, opacity .25s ease, padding .25s ease !important;
}

html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .nav-right{
  gap: 8px !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) #auth-btn{
  max-width: 150px !important;
  overflow: hidden !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) #auth-btn .auth-name-span{
  max-width: 90px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .search-box input,
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .theme-group,
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) #lang-switch-btn,
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) #btn-site-theme{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .theme-group .theme-btn{
  background: transparent !important;
  box-shadow: none !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .theme-group:hover .theme-btn.active{
  background: rgba(255,255,255,.10) !important;
}
[data-theme="light"][data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .theme-group:hover .theme-btn.active{
  background: rgba(0,0,0,.06) !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) .search-box{
  background: transparent !important;
}

#auth-btn{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-navbar-style="capsule"] body.navbar-scrolled:not(.navbar-menu-open) #auth-btn{
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"][data-navbar-style="capsule"]:not([data-vice-bg="1"]) body[data-page-kind="doc"].navbar-scrolled:not(.navbar-menu-open) #auth-btn{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-en-font="default"]    { --srb-en-font: "Inter"; }
html[data-en-font="sf-rounded"] { --srb-en-font: "SF Pro Rounded", ui-rounded; }
html[data-en-font="quicksand"]  { --srb-en-font: "Quicksand"; }
html[data-en-font="system-sans"]{ --srb-en-font: -apple-system, "Segoe UI", "Helvetica Neue", Arial; }
html[data-en-font="georgia"]    { --srb-en-font: "Georgia", "Times New Roman"; }
html[data-en-font="serif"]      { --srb-en-font: "Charter", "Georgia", "Cambria", "Times New Roman"; }
html[data-en-font="merriweather"]{ --srb-en-font: "Merriweather", "Georgia", serif; }
html[data-en-font="garamond"]   { --srb-en-font: "EB Garamond", "Garamond", "Georgia", serif; }
html[data-en-font="mono"]       { --srb-en-font: "JetBrains Mono", "SF Mono", "Menlo", monospace; }

html[data-en-font] body[data-page-kind="doc"] .markdown-body,
html[data-en-font] body[data-page-kind="doc"] .markdown-body p,
html[data-en-font] body[data-page-kind="doc"] .markdown-body li,
html[data-en-font] body[data-page-kind="doc"] .markdown-body td,
html[data-en-font] body[data-page-kind="doc"] .markdown-body th,
html[data-en-font] body[data-page-kind="doc"] .markdown-body blockquote,
html[data-en-font] body[data-page-kind="doc"] .markdown-body h1,
html[data-en-font] body[data-page-kind="doc"] .markdown-body h2,
html[data-en-font] body[data-page-kind="doc"] .markdown-body h3,
html[data-en-font] body[data-page-kind="doc"] .markdown-body h4,
html[data-en-font] body[data-page-kind="doc"] .markdown-body strong,
html[data-en-font] body[data-page-kind="doc"] .markdown-body em,
html[data-en-font] body[data-page-kind="doc"] .markdown-body a{
  font-family:
    var(--srb-en-font, "Inter"),
    var(--srb-cn-font, "PingFang SC"),
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
    "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}








.nav-apps-dropdown,
.user-dropdown,
.site-theme-dropdown,
.dropdown-menu,
.popover,
.context-menu,
.select-menu,
[role="menu"],
[role="listbox"] {
  background: var(--srb-popover-bg, rgba(24, 24, 30, .95)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
  backdrop-filter: blur(28px) saturate(145%) !important;
  border-color: var(--srb-popover-border, rgba(229, 249, 168, .22)) !important;
  box-shadow: 0 18px 44px rgba(7, 5, 18, .42) !important;
  opacity: 1 !important;
}

/* ===== callout single-source refinement ===== */

/* 左侧色条回归（旧规则被 border-left:none 抹掉导致只剩大片底色） */
.markdown-body .callout{
  border-left-width: 3px !important;
  border-left-style: solid !important;
}
.markdown-body .callout-info,
.markdown-body .callout-note{ border-left-color:#1980ff !important; }
.markdown-body .callout-tip,
.markdown-body .callout-success{ border-left-color:#1f9d57 !important; }
.markdown-body .callout-warning{ border-left-color:#e08a00 !important; }
.markdown-body .callout-danger{ border-left-color:#e5484d !important; }

/* 无标题提示块：不再预留顶部空白条 */

/* header 为空时收捼（防御旧缓存 HTML） */

/* 图标尺寸约束，避免 svg 被拉成大块 */
.markdown-body .callout-header svg,
.markdown-body .callout-header i{
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.markdown-body .callout-icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  overflow: hidden !important;
}

/* ── 手机端只负责“下滑隐藏”这一个行为；材质与尺寸归上面的浮动按钮真源。
   滚动状态由滚动 owner 统一挂 body.scrolling-down，
   此前该 class 只有 vice 有消费者，等于三处都是死的，这里对所有主题统一实现。 */
@media (max-width: 768px){
  .float-menu-toggle,
  .sidebar-toggle{
    transition: opacity .26s ease, transform .26s ease, visibility .26s ease !important;
  }
  body.scrolling-down .float-menu-toggle,
  body.scrolling-down .sidebar-toggle{
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateZ(0) translateY(18px) !important;
    pointer-events: none !important;
  }
  body.scrolling-down .float-menu.open .float-menu-toggle{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0) !important;
    pointer-events: auto !important;
  }
}

/* CN-first prose rule
   显式选择中文字体时，让该字体优先解析 CJK：Safari 的 -apple-system
   会自行回退系统中文，导致排在后面的 --srb-cn-font 永远轮不到。
   两个可选中文字体已用 unicode-range 限定为 CJK-only，
   因此提前不会影响拉丁/数字（仍由 --srb-en-font 提供）。 */
html[data-cn-font]:not([data-cn-font="default"]) :is(.markdown-body,.doc-content .markdown-body),
html[data-cn-font]:not([data-cn-font="default"]) :is(.markdown-body,.doc-content .markdown-body) :is(p,li,td,th,blockquote,h1,h2,h3,h4,h5,h6,strong,em,a){
  font-family: var(--srb-cn-font), var(--srb-en-font,-apple-system), -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif !important;
}


html[data-cn-font="fwanthserifmstd"]{
  --srb-strong-weight: 600;
  --srb-prose-weight: 400;
}
html[data-cn-font="fwanthserifmstd"] :is(.markdown-body,.doc-content .markdown-body),
html[data-cn-font="fwanthserifmstd"] :is(.markdown-body,.doc-content .markdown-body) :is(p,li,td,th,blockquote,em,a){
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0 !important;
}
html[data-cn-font="fwanthserifmstd"] :is(.markdown-body,.doc-content .markdown-body) :is(strong,b),
html[data-cn-font="fwanthserifmstd"] :is(.markdown-body,.doc-content .markdown-body) :is(h1,h2,h3,h4,h5,h6){
  -webkit-text-stroke: 0 !important;
}

/* Shared chart fullscreen viewer CSS; source is ai-chat-unified.css. */
.chart-fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
  color: var(--text-secondary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  cursor: pointer;
}

.chart-fullscreen-btn svg,
.srbill-fs-action svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

#srbill-chart-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(9, 9, 15, 0.96);
  color: #f6f6f8;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

#srbill-chart-fs-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.srbill-fs-toolbar {
  position: relative;
  z-index: 2;
  min-height: 58px;
  padding: max(10px, env(safe-area-inset-top, 0px)) 14px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: rgba(18, 18, 28, 0.72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.srbill-fs-status {
  min-width: 48px;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.64);
  font: 600 12px/1 system-ui, sans-serif;
  text-align: center;
}

.srbill-fs-action {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.srbill-fs-action:hover,
.srbill-fs-action:focus-visible {
  background: rgba(255, 255, 255, 0.17);
  outline: none;
}

.srbill-fs-content {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.srbill-fs-content.dragging {
  cursor: grabbing;
}

.srbill-fs-wrap {
  position: relative;
  max-width: none;
  max-height: none;
  transform-origin: center;
  will-change: transform;
}

.srbill-fs-wrap[data-renderer="svg"] > svg {
  display: block;
  width: min(92vw, 1500px);
  height: min(82dvh, 1000px);
  max-width: none;
  max-height: none;
}

.srbill-fs-echarts {
  width: min(94vw, 1600px);
  height: min(82dvh, 980px);
}

.srbill-fs-wrap[data-renderer="raster"] canvas {
  display: block;
  max-width: none;
  image-rendering: auto;
}

.srbill-fs-raster-note {
  position: absolute;
  right: 0;
  bottom: -34px;
  left: 0;
  color: rgba(255, 255, 255, 0.58);
  font: 500 11px/1.4 system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
}
/* ===== 首屏 boot 占位（v3.156）：只占高度，不画任何东西 =====
   历史：v3.150 在这里用 .app-boot::after 画了一个 360x96、圆角 20px 的
   rgba(255,255,255,.05~.10) 微光方块。它不是任何真实内容的形状
   （首页 hero 是整屏、文档页是侧栏+正文），所以只会被读成"来历不明的占位框"；
   而且那层半透明白落在 Vice 紫画布上会自己调出一块灰紫，
   与主题无关，怎么调都是"另一个配色"。
   现在首屏就是页面自己的背景（背景由 <head> 的预启动脚本在 JS 之前就画好，
   不存在白闪），#app 只保留一屏高度，避免内容到达时页面高度跳变。
   品牌 logo、顶栏、内容各自由自己的模块渲染，这里不再伪造任何东西。 */
.app-boot {
  min-height: 100vh;
}

/* ---- styles/_premium-fonts.css ---- */
/* ==========================================================================
   Premium font loaders
   --------------------------------------------------------------------------
   FWAnthSerifMStd is a full CJK face, not a subset, so putting @font-face in
   the head stylesheet makes browsers reserve bandwidth before the paper zones
   are even visible.  The declarations stay available site-wide, but the actual
   network request starts only when a page explicitly calls the loader below.
   ========================================================================== */

@font-face {
  font-family: "FWAnthSerifMStd";
  src: url("/static/fonts/FWAnthSerifMStd-regular.woff2?v=20261105-v502") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FWAnthSerifMStd";
  src: url("/static/fonts/FWAnthSerifMStd-bold.woff2?v=20261105-v502") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FWAnthSerifMStd";
  src: url("/static/fonts/FWAnthSerifMStd-italic.woff2?v=20261105-v502") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "FWAnthSerifMStd";
  src: url("/static/fonts/FWAnthSerifMStd-bold-italic.woff2?v=20261105-v502") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* 600 maps to the real bold glyphs; Anthropic prose uses 600 for emphasis. */
@font-face {
  font-family: "FWAnthSerifMStd";
  src: url("/static/fonts/FWAnthSerifMStd-bold.woff2?v=20261105-v502") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FWAnthSerifMStd";
  src: url("/static/fonts/FWAnthSerifMStd-bold-italic.woff2?v=20261105-v502") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}

/* ---- styles/_site-runtime.css ---- */
#auth-btn .auth-name-span{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:100px;
      }
      @media (max-width: 768px){
        #auth-btn:not(.auth-inline-btn){
          width:38px;
          height:38px;
          min-width:38px;
          padding:6px;
          border-radius:50%;
          gap:0;
        }
        #auth-btn.auth-inline-btn{
          width:auto;
          height:32px;
          min-width:0;
          padding:0 10px;
          border-radius:999px;
          gap:6px;
        }
        #auth-btn .auth-name-span{
          display:none;
        }
        #auth-btn.auth-inline-btn .auth-name-span{
          display:inline;
        }
      }

.aliases-block{margin:16px 0 18px 0;padding:14px 14px;border:1px solid var(--glass-border, rgba(255,255,255,0.14));background:rgba(0,0,0,0.03);border-radius:8px;} [data-theme="dark"] .aliases-block{background:rgba(255,255,255,0.05);} .aliases-title{font-weight:900;font-size:13px;color:var(--text-muted, #8b8ba7);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;} .aliases-tags{display:flex;flex-wrap:wrap;gap:10px;} .alias-tag{display:inline-flex;align-items:center;padding:8px 10px;border-radius:6px;border:1px solid var(--glass-border, rgba(255,255,255,0.14));background:var(--glass-bg, rgba(255,255,255,0.2));color:var(--text-primary, #1a1a2e);font-size:13px;font-weight:800;cursor:pointer;user-select:none;} .alias-tag:hover{border-color:rgba(236,72,153,0.35);color:var(--pink, #ec4899);}

.toc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .toc-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: 0.5px; }
    .toc-action-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 6px; transition: all 0.2s; }
    .toc-action-btn:hover { background: var(--glass-bg); color: var(--text-primary); }
    .toc-tree { list-style: none; padding: 0; margin: 0; }
    .toc-tree ul { list-style: none; padding-left: 16px; margin: 4px 0 4px 8px; border-left: 1px solid var(--glass-border); }
    .toc-tree li { margin: 6px 0; }
    .toc-node { display: flex; align-items: flex-start; position: relative; }
    .toc-toggle { cursor: pointer; border-radius: 4px; color: var(--text-muted); display:flex; align-items:center; justify-content:center; width: 24px; height: 28px; flex-shrink:0; margin-right: 4px; }
    .toc-toggle:hover { color: var(--accent); background: rgba(231,251,176,0.1); }
    .toc-toggle.empty { visibility: hidden; }
    .toc-toggle svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
    .toc-item-container.collapsed > ul { display: none; }
    .toc-item-container.collapsed > .toc-node .toc-toggle svg { transform: rotate(-90deg); }
    .toc-link { flex: 1; display: block; padding: 6px 10px; border-radius: var(--radius-full, 9999px); color: var(--text-secondary); text-decoration: none; transition: all 0.2s; line-height: 1.5; border-left: 2px solid transparent; }
    .toc-link:hover { color: var(--accent); background: var(--glass-bg); }
    .toc-link.active { color: var(--accent); font-weight: 600; background: rgba(99, 102, 241, 0.08); border-left-color: var(--accent); }
    .toc-link.level-1 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-top: 8px; }
    .toc-link.level-2 { font-size: 14px; font-weight: 500; }
    .toc-link.level-3 { font-size: 13px; font-weight: 400; }
    .toc-link.level-4 { font-size: 13px; font-weight: 400; opacity: 0.8; }

.srbill-tag{display:inline-flex;align-items:center;padding:2px 10px;margin:0 2px;border-radius:8px;background:rgba(231,251,176,.10);border:1px solid rgba(231,251,176,.20);color:var(--accent);font-size:.9em;font-weight:700;cursor:pointer;transition:.2s;text-decoration:none;white-space:nowrap;}.srbill-tag:hover{background:rgba(231,251,176,.18);border-color:rgba(231,251,176,.35);transform:translateY(-1px);}.tag-modal-list{display:flex;flex-direction:column;gap:6px;max-height:65vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}.tag-modal-item{padding:12px 14px;border:1px solid var(--glass-border);border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer;transition:.2s;}.tag-modal-item:hover{border-color:rgba(231,251,176,.3);background:rgba(231,251,176,.06);transform:translateY(-1px);}.tag-item-doc{font-weight:800;font-size:13px;color:var(--text-primary);margin-bottom:2px;display:flex;align-items:center;gap:6px;}.tag-item-path{font-size:11px;color:var(--text-muted);margin-bottom:4px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}.tag-item-path .folder{opacity:.7;}.tag-item-path .sep{opacity:.4;font-size:10px;}.tag-item-path .current{color:var(--text-secondary);font-weight:600;}.tag-item-heading{font-size:12px;color:var(--accent);font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:4px;}.tag-item-ctx{font-size:12px;color:var(--text-secondary);line-height:1.6;}.tag-item-ctx mark{background:rgba(231,251,176,.15);color:var(--accent);padding:0 2px;border-radius:3px;}

/* ---- styles/_auth-runtime.css ---- */
.shared-uc-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        margin-top:16px;
      }

/* 个人中心弹窗：高度跟随视口，而不是写死 84vh。

   实测（2026-10-23）：Safari 窗口 900 → 760px 时，固定高度的弹窗把
   「登录」按钮推到 584px 之外，用户看到输入框却点不到提交，误以为登录坏了。
   这里只约束「最大高度」并让内容区自己滚动，键盘弹起（dvh 变小）时也不裁切。 */
#modal-unified-user-center .srb-auth-modal,
#modal-user-center .srb-auth-modal{
  max-height: min(84dvh, 720px);
  height: auto;
  overflow: hidden;
}
#modal-unified-user-center .srb-auth-modal > .modal-body,
#modal-user-center .srb-auth-modal > .modal-body{
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
}
      .shared-uc-card{
        background:rgba(255,255,255,.04);
        border:1px solid var(--glass-border);
        border-radius:12px;
        padding:14px;
      }
      .shared-uc-card .v{
        font-size:20px;
        font-weight:900;
        color:var(--accent);
        margin-top:4px;
      }
      .shared-uc-card .k{
        font-size:12px;
        color:var(--text-muted);
      }
#modal-unified-user-center .shared-auth-tabs,
#modal-user-center .shared-auth-tabs,
.shared-auth-tabs{
        display:flex;
        align-items:stretch;
        justify-content:center;
        gap:28px;
        margin-bottom:18px;
        border-bottom:1px solid var(--glass-border);
        padding-bottom:10px;
      }
#modal-unified-user-center .shared-auth-tab,
#modal-user-center .shared-auth-tab,
.shared-auth-tab{
        appearance:none;
        -webkit-appearance:none;
        flex:1 1 0;
        min-width:0;
        padding:10px 8px 9px;
        border:0;
        border-bottom:2px solid transparent;
        background:transparent;
        cursor:pointer;
        font-size:18px;
        font-family:inherit;
        font-weight:800;
        line-height:1.3;
        margin:0;
        color:var(--text-muted);
      }
#modal-unified-user-center .shared-auth-tab.active,
#modal-user-center .shared-auth-tab.active,
.shared-auth-tab.active{
        color:var(--accent);
        border-bottom-color:var(--accent);
      }
      @media (max-width:768px){
        #modal-unified-user-center .shared-auth-tabs,
        #modal-user-center .shared-auth-tabs,
        .shared-auth-tabs{
          gap:8px;
        }
        #modal-unified-user-center .shared-auth-tab,
        #modal-user-center .shared-auth-tab,
        .shared-auth-tab{
          font-size:16px;
          padding-inline:4px;
        }
        .shared-uc-grid{
          grid-template-columns:1fr 1fr;
        }
      }


#auth-btn-wrap{position:relative; display:flex; align-items:center; justify-content:center; gap:8px;}
.site-theme-wrap{position:relative; display:inline-flex; align-items:center;}


dialog.site-theme-dropdown{
  position:fixed; inset:64px 16px auto auto; margin:0;
  width:250px; max-width:calc(100vw - 32px);
  padding:14px 16px; border-radius:16px;
  background:var(--srb-popover-bg, rgba(24,24,30,.95));
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border, rgba(255,255,255,.22));
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  color:var(--text-primary);
  max-height:min(80dvh, 520px); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
dialog.site-theme-dropdown:not([open]){display:none}
/* 遮罩只压一层，面板本身够不透明，阅读不受背景干扰。 */
dialog.site-theme-dropdown::backdrop{background:rgba(8,6,16,.30)}


.site-theme-dropdown .site-theme-label{
  display:block; margin:0 0 5px; font-size:12px; line-height:1.3;
  color:var(--text-muted); font-weight:700; letter-spacing:.01em;
}
.site-theme-dropdown .site-theme-label:not(:first-child){ margin-top:12px; }

.site-theme-dropdown .site-theme-select{
  display:block; width:100%; box-sizing:border-box; margin:0;
  min-height:38px;
  padding:9px 32px 9px 12px; border-radius:10px;
  border:0; border-bottom:1px solid var(--field-rule);
  background-color:var(--field-fill);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23a1a1a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
  color:var(--text-primary);
  font:inherit; font-size:13.5px; line-height:1.3;
  appearance:none; -webkit-appearance:none;
  outline:none; cursor:pointer;
}
/* 自定义主题色取色器（auth-theme.js 按选中项切 display）。 */
.site-theme-dropdown input[type="color"]{
  display:none; box-sizing:border-box; width:100%; height:38px; margin:8px 0 0;
  cursor:pointer; border-radius:8px; border:1px solid var(--glass-border); background:transparent;
}
/* 文档 Vice 背景开关行（vice-theme.js 注入，视觉归这里） */
.site-theme-dropdown .vice-docbg-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; padding:10px 12px; border-radius:12px;
  background:var(--glass-bg, rgba(120,120,120,.1));
  border:1px solid var(--glass-border, var(--panel-border));
}
.site-theme-dropdown .vice-docbg-row .vice-docbg-label{
  font-size:13px; font-weight:600; line-height:1.3; color:var(--text-primary);
}
/* 复选框自绘：不用原生外观（headless/不同平台渲染差异大），
   选中态用强调色实心 + 自绘对勾，和站内其他开关一致。 */
.site-theme-dropdown .vice-docbg-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  position:relative; width:20px; height:20px; margin:0; flex:0 0 auto; cursor:pointer;
  border-radius:6px; border:1px solid var(--glass-border, rgba(255,255,255,.28));
  background:rgba(120,120,120,.14);
  transition:background .18s ease, border-color .18s ease;
}
.site-theme-dropdown .vice-docbg-row input[type="checkbox"]:checked{
  background:var(--accent); border-color:var(--accent);
}
.site-theme-dropdown .vice-docbg-row input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #10121a; border-width:0 2px 2px 0; transform:rotate(45deg);
}
/* 手机端：底部弹卡 + 两列（标签｜控件）。
   面板不再是抽屉里的静态卡片，所以不用再滚抽屉；两列让它整体更矮。 */
@media (max-width:768px){
  #auth-btn-wrap{width:100%;}
  dialog.site-theme-dropdown{
    inset:auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
    width:auto; max-width:none; padding:14px;
    border-radius:20px; max-height:min(76dvh, 560px);
    display:grid; grid-template-columns:auto minmax(0, 1fr);
    align-items:center; gap:8px 10px;
  }
  dialog.site-theme-dropdown .site-theme-label{margin:0; font-size:12px;}
  dialog.site-theme-dropdown .site-theme-select{min-height:36px; padding:8px 30px 8px 10px; font-size:13px;}
  dialog.site-theme-dropdown input[type="color"]{grid-column:1 / -1; margin-top:0;}
  dialog.site-theme-dropdown .vice-docbg-row{grid-column:1 / -1; margin-top:2px; padding:10px 12px;}
}
#modal-unified-user-center .form-group input{
  border:0;
  border-bottom:1px solid var(--field-rule);
  border-radius:9999px;
  padding:11px 18px;
  background:var(--field-fill);
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
#modal-unified-user-center .form-group input:focus{
  border-bottom-color:transparent;
  background:var(--field-fill-focus);
  box-shadow:0 0 0 2px var(--field-ring);
  outline:none;
}
#modal-unified-user-center .btn-primary,
#modal-unified-user-center .btn-outline{
  border-radius:9999px;
}
#modal-unified-user-center .shared-uc-card{
  border-radius:16px;
}
#modal-unified-user-center .modal-box{
  border-radius:26px;
}

/* 未登录顶栏双入口：显眼的注册 + 登录，替换单个登录按钮。 */
#auth-btn-wrap.auth-inline {
  display: inline-flex;
  gap: 8px;
}

#auth-btn-wrap .auth-inline-btn {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#auth-btn-wrap .auth-inline-btn .icon-sm {
  flex: 0 0 auto;
  display: block;
  margin: 0;
}

@media (max-width: 768px) {
  #auth-btn-wrap.auth-inline .auth-inline-btn {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
  }
}

#auth-btn-wrap .auth-inline-btn.btn-primary {
  background: var(--theme-solid, var(--accent));
  border-color: var(--theme-border, var(--accent));
  color: var(--theme-fg, var(--accent-contrast, #fff));
}

#auth-btn-wrap .auth-inline-btn.btn-outline {
  border: 1px solid var(--field-rule);
  background: var(--field-fill);
  color: var(--text);
}

/* ---- styles/_diagram-runtime.css ---- */
ai-diagram{
        display:block;
        width:100%;
        margin:1em 0;
      }
      .aid-box{
        border:1px solid var(--glass-border);
        border-radius:16px;
        overflow:hidden;
        background:var(--glass-bg);
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
        box-shadow:var(--shadow);
      }
      .aid-box .aid-head{display:none}
      .aid-body{
        padding:14px;
      }
      .aid-canvas{
        width:100%;
        min-height:0;
      }
      .aid-error{
        color:var(--red);
        font-size:12px;
        margin-top:10px;
        white-space:pre-wrap;
        word-break:break-word;
      }
      .aid-fallback{
        margin:0;
        padding:12px;
        overflow:auto;
        border-radius:12px;
        background:rgba(0,0,0,.08);
        font-family:var(--font-mono, monospace);
        font-size:12px;
        line-height:1.6;
      }

/* ---- styles/_components.css ---- */
/**
 * SrbillHub 统一组件库 (BEM 命名)
 * 提取重复的按钮/卡片/输入框样式,减少选择器复杂度
 */

/* ============ 按钮组件 ============ */
.srb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.srb-btn:active {
  opacity: 0.75;
}

.srb-btn--primary {
  background: var(--theme-solid, #e7fbb0);
  color: var(--theme-fg, #fff);
}
.srb-btn--primary:hover {
  opacity: 0.92;
}

.srb-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}
.srb-btn--ghost:hover {
  background: var(--glass-bg);
  color: var(--text-primary);
}

.srb-btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
}

/* ============ 卡片组件 ============ */
.srb-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.srb-card--hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
  border-color: var(--theme-solid, #e7fbb0);
}
.srb-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.srb-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}
.srb-card__body {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============ 输入框组件 ============ */
.srb-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--field-fill);
  border: 0;
  border-bottom: 1px solid var(--field-rule);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease;
}
.srb-input:focus {
  border-bottom-color: transparent;
  background: var(--field-fill-focus);
  box-shadow: 0 0 0 2px var(--field-ring);
}

/* ============ 标签/徽章组件 ============ */
.srb-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--theme-solid, #e7fbb0) 12%, transparent);
  color: var(--theme-solid, #e7fbb0);
}

/* ============ 骨架屏组件 ============ */
.srb-skeleton {
  background: linear-gradient(90deg,
    var(--skeleton-base, rgba(120,120,140,0.1)) 0%,
    var(--skeleton-shine, rgba(120,120,140,0.18)) 50%,
    var(--skeleton-base, rgba(120,120,140,0.1)) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: srb-shimmer 1.5s infinite;
}
[data-theme="dark"] {
  --skeleton-base: rgba(255,255,255,0.04);
  --skeleton-shine: rgba(255,255,255,0.09);
}
.srb-skeleton--line { height: 0.9rem; margin-bottom: 0.5rem; }
.srb-skeleton--title { height: 1.25rem; width: 70%; margin-bottom: 0.75rem; }
.srb-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
@keyframes srb-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============ 无障碍:减少动画 ============ */
@media (prefers-reduced-motion: reduce) {
  .srb-btn, .srb-card, .srb-skeleton {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- styles/_glass-unified.css ---- */

:root {
  --srb-liquid-blur: blur(34px) saturate(205%);
  --srb-liquid-blur-mobile: blur(28px) saturate(190%);
}

[data-theme="light"] {
  --srb-liquid-fill-img: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));
  --srb-liquid-bg: rgba(255,255,255,.55);
  --srb-liquid-border-color: rgba(255,255,255,.82);
  --srb-liquid-shadow: 0 4px 12px rgba(0,0,0,.04), 0 24px 48px rgba(0,0,0,.10);
}

.navbar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.navbar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: var(--srb-liquid-bg) !important;
  background-image: var(--srb-liquid-fill-img) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.05) !important;
  -webkit-backdrop-filter: var(--srb-liquid-blur) !important;
  backdrop-filter: var(--srb-liquid-blur) !important;
  -webkit-backdrop-filter: var(--srb-liquid-blur) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
[data-theme="dark"] .navbar::before {
  box-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
}
.navbar::after { display: none !important; }

#read-progress {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 2px !important;
  background: transparent !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
#read-progress > div {
  height: 100% !important;
  /* 强调色单一真源：跟 --accent（style.css :root）。曾写死 靛蓝→紫→粉。 */
  background: linear-gradient(90deg, var(--accent, #e7fbb0), color-mix(in srgb, var(--accent, #e7fbb0) 70%, #ffd27f), color-mix(in srgb, var(--accent, #e7fbb0) 58%, #ff9fc9)) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #e7fbb0) 45%, transparent) !important;
  transition: width .08s linear !important;
}

html body .modal-box,
html body .user-dropdown,
html body #user-nav-dropdown,
html body .nav-apps-dropdown,
html body #nav-apps-dropdown,
html body .site-theme-dropdown,
html body #site-theme-dropdown,
html body div.site-theme-dropdown,
html body div#site-theme-dropdown,
html body .conv-more-menu,
html body #conv-more-menu {
  background: none !important;
  background-color: var(--srb-popover-bg, rgba(24,24,30,.95)) !important;
  background-image: none !important;
  border: 1px solid var(--srb-liquid-border-color) !important;
  box-shadow: var(--srb-liquid-shadow) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
}

/* 基准值（--srb-popover-bg / --srb-popover-border）定义在 style.css 的
   :root 与 [data-theme="dark"] 里：主站和 AICHAT 都加载 style.css，
   但 AICHAT 不加载本文件。这里只负责「Vice 画布上要更实一点」的场景覆盖。 */

/* Vice 画布上的浮层底色：这里是所有菜单/浮层的不透明度唯一真源。
   历史值 0.65 → 面板里的正文直接透出来，读不动；毛玻璃要有模糊垫底，
   底色就得更实。0.93 仍然透出一点画布色，但文字对比度足够。 */
html body[data-page-kind="home"],
html[data-vice-bg="1"] body[data-page-kind="doc"] {
  --srb-popover-bg: rgba(26, 24, 38, 0.93) !important;
}

.chat-sidebar {
  background-color: var(--srb-liquid-bg) !important;
  background-image: var(--srb-liquid-fill-img) !important;
  border-right: 1px solid var(--srb-liquid-border-color) !important;
  -webkit-backdrop-filter: var(--srb-liquid-blur) !important;
  backdrop-filter: var(--srb-liquid-blur) !important;
  -webkit-backdrop-filter: var(--srb-liquid-blur) !important;
}

.feature-card, .doc-card, .continue-item,
.home-product-point, .home-section-point {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .feature-card,
[data-theme="light"] .doc-card,
[data-theme="light"] .continue-item {
  background: rgba(255,255,255,.82) !important;
}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .doc-card,
[data-theme="dark"] .continue-item {
  background: rgba(20,22,30,.62) !important;
}

@media (max-width: 768px) {
  .navbar::before, .chat-sidebar {
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }
}

@media (max-width: 768px) {
  /* 只负责手机端模糊强度。几何归 _auth-runtime.css（顶层 dialog 底部弹卡）：
     这里曾经用 !important 强制 280px 宽 + 右上角定位，和 JS 的定位对打，
     是“手机上面板又窄又乱”的主因；那段几何已删除。 */
  html body #site-theme-dropdown,
  html body div#site-theme-dropdown {
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }

  html body #nav-apps-dropdown,
  html body div#nav-apps-dropdown {
    position: fixed !important;
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: min(260px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }

  html body #user-nav-dropdown {
    position: fixed !important;
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: min(280px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }

  html body #conv-more-menu {
    width: min(240px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }
}

html[data-theme="dark"] {
  --srb-liquid-bg: rgba(28,30,40,.15) !important;
  --srb-liquid-fill-img: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  --srb-liquid-border-color: rgba(255,255,255,.11) !important;
}
html[data-theme="light"] {
  --srb-liquid-bg: rgba(255,255,255,0.75) !important;
  --srb-liquid-fill-img: none !important;
  --srb-liquid-border-color: rgba(0,0,0,0.06) !important;
}
.navbar::before {
  background-color: var(--srb-liquid-bg) !important;
  background-image: var(--srb-liquid-fill-img) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
  -webkit-backdrop-filter: blur(34px) saturate(205%) !important;
  backdrop-filter: blur(34px) saturate(205%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(205%) !important;
}
[data-theme="light"] .navbar::before {
  box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
}
@media (max-width: 768px) {
  .navbar::before {
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  }
}

html body[data-page-kind="home"] .nav-apps-dropdown,
html body[data-page-kind="home"] .site-theme-dropdown,
html body[data-page-kind="home"] #site-theme-dropdown,
html body[data-page-kind="home"] div#site-theme-dropdown,
html body[data-page-kind="home"] .user-dropdown,
html body[data-page-kind="home"] #user-nav-dropdown,
html body[data-page-kind="home"] .modal-box,
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-apps-dropdown,
html[data-vice-bg="1"] body[data-page-kind="doc"] .site-theme-dropdown,
html[data-vice-bg="1"] body[data-page-kind="doc"] #site-theme-dropdown,
html[data-vice-bg="1"] body[data-page-kind="doc"] div#site-theme-dropdown,
html[data-vice-bg="1"] body[data-page-kind="doc"] .user-dropdown,
html[data-vice-bg="1"] body[data-page-kind="doc"] #user-nav-dropdown,
html[data-vice-bg="1"] body[data-page-kind="doc"] .modal-box{
  background: none !important;
  /* 底色不透明度归 --srb-popover-bg 单一真源：这里曾经写死 .42，
     于是“提高浮层可读性”永远改不动，正文会从面板里透出来。 */
  background-color: var(--srb-popover-bg, rgba(26,24,38,.42)) !important;
  background-image: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  color: #eaeaff !important;
}
html body[data-page-kind="home"] .nav-app-item,
html body[data-page-kind="home"] .nav-app-item .app-title,
html body[data-page-kind="home"] .site-theme-label,
html body[data-page-kind="home"] .site-theme-dropdown span,
html body[data-page-kind="home"] .user-dropdown-item,
html body[data-page-kind="home"] .user-dropdown-name,
html body[data-page-kind="home"] .nav-menu.show .nav-link,
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-app-item,
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-app-item .app-title,
html[data-vice-bg="1"] body[data-page-kind="doc"] .site-theme-label,
html[data-vice-bg="1"] body[data-page-kind="doc"] .site-theme-dropdown span,
html[data-vice-bg="1"] body[data-page-kind="doc"] .user-dropdown-item,
html[data-vice-bg="1"] body[data-page-kind="doc"] .user-dropdown-name,
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-menu.show .nav-link{
  color: #eaeaff !important;
}
html body[data-page-kind="home"] .nav-app-item .app-desc,
html body[data-page-kind="home"] .user-dropdown-sub,
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-app-item .app-desc,
html[data-vice-bg="1"] body[data-page-kind="doc"] .user-dropdown-sub{
  color: #a5a5c0 !important;
}
html body[data-page-kind="home"] .site-theme-select,
html[data-vice-bg="1"] body[data-page-kind="doc"] .site-theme-select{
  background: rgba(255,255,255,.08) !important;
  color: #eaeaff !important;
  border-color: rgba(255,255,255,.16) !important;
}
html body[data-page-kind="home"] .nav-app-item:hover,
html body[data-page-kind="home"] .user-dropdown-item:hover,
html[data-vice-bg="1"] body[data-page-kind="doc"] .nav-app-item:hover,
html[data-vice-bg="1"] body[data-page-kind="doc"] .user-dropdown-item:hover{
  background: rgba(255,255,255,.08) !important;
}

html[data-vice-bg="1"] body[data-page-kind="doc"] .search-box .search-icon,
html[data-vice-bg="1"] body[data-page-kind="doc"] .theme-group .theme-btn,
html[data-vice-bg="1"] body[data-page-kind="doc"] #btn-site-theme,
html[data-vice-bg="1"] body[data-page-kind="doc"] .btn-icon,
body[data-page-kind="home"] .search-box .search-icon,
body[data-page-kind="home"] .search-box .search-icon svg,
body[data-page-kind="home"] .theme-group .theme-btn,
body[data-page-kind="home"] .theme-group .theme-btn svg,
body[data-page-kind="home"] .theme-group .theme-btn i,
body[data-page-kind="home"] #btn-site-theme,
body[data-page-kind="home"] #btn-site-theme svg,
body[data-page-kind="home"] #btn-site-theme i,
body[data-page-kind="home"] .nav-toggle span,
body[data-page-kind="home"] .btn-icon,
body[data-page-kind="home"] .btn-icon svg,
body[data-page-kind="home"] .btn-icon i{
  color: var(--text-primary) !important;
  stroke: var(--text-primary) !important;
}
body[data-page-kind="home"] .theme-group{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
}
body[data-page-kind="home"] .theme-group .theme-btn{
  opacity: .7 !important;
  color: var(--text-primary) !important;
}
body[data-page-kind="home"] .theme-group .theme-btn.active{
  opacity: 1 !important;
  background: rgba(255,255,255,.14) !important;
  color: var(--text-primary) !important;
}
body[data-page-kind="home"] #auth-btn{
  color: var(--text-primary) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
}

html[data-theme="light"] body[data-page-kind="home"] .nav-apps-dropdown,
html[data-theme="light"] body[data-page-kind="home"] .site-theme-dropdown,
html[data-theme="light"] body[data-page-kind="home"] #site-theme-dropdown,
html[data-theme="light"] body[data-page-kind="home"] div#site-theme-dropdown,
html[data-theme="light"] body[data-page-kind="home"] .user-dropdown{
  background: none !important;
  background-color: rgba(26,24,38,.45) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #eaeaff !important;
}
html[data-theme="light"] body[data-page-kind="home"] .nav-app-item .app-title,
html[data-theme="light"] body[data-page-kind="home"] .nav-app-item,
html[data-theme="light"] body[data-page-kind="home"] .site-theme-dropdown span,
html[data-theme="light"] body[data-page-kind="home"] .user-dropdown-item{
  color: #eaeaff !important;
}
html[data-theme="light"] body[data-page-kind="home"] .nav-app-item .app-desc{
  color: #a5a5c0 !important;
}

/* Main-site capsule material authority.
   Home is the visual baseline; documents use the exact same capsule regardless
   of document canvas mode (plain or Vice). data-vice-bg only owns the canvas. */
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) .navbar {
  border-color: rgba(255,255,255,.10) !important;
}
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) .navbar::before {
  top: 0 !important;
  background-color: rgba(28,30,40,.12) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.10) !important;
}
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]):not(.navbar-scrolled):not(.navbar-menu-open) .navbar::before {
  background-color: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Plain light documents keep readable controls over their light canvas while
   sharing the same capsule geometry and material after scrolling. */
html[data-theme="light"]:not([data-vice-bg="1"]) body[data-page-kind="doc"] .nav-link,
html[data-theme="light"]:not([data-vice-bg="1"]) body[data-page-kind="doc"] .nav-title-text,
html[data-theme="light"]:not([data-vice-bg="1"]) body[data-page-kind="doc"] .search-icon,
html[data-theme="light"]:not([data-vice-bg="1"]) body[data-page-kind="doc"] .theme-btn,
html[data-theme="light"]:not([data-vice-bg="1"]) body[data-page-kind="doc"] .btn-icon,
html[data-theme="light"]:not([data-vice-bg="1"]) body[data-page-kind="doc"] #btn-site-theme {
  color: #1d1d1f !important;
  stroke: #1d1d1f !important;
}

/* 亮色画布上的流动渐变：--gradient-text 是奶油/蜜桃色，压在白底上等于隐形。
   这里给浅色非 Vice 文档换一条同色系但更深的流动渐变（玫瑰粉），
   既保留「会流动」的品牌动作，也满足浅底可读性。深色画布继续用原渐变。 */
html[data-theme="light"]:not([data-vice-bg="1"]):not([data-bold-color="paper"]) body[data-page-kind="doc"] .nav-title-text,
html[data-theme="light"]:not([data-vice-bg="1"]):not([data-bold-color="paper"]) body[data-page-kind="doc"] .nav-title-text .brand-main {
  background-image: linear-gradient(90deg, #1d1d1f 0%, #e11d48 26%, #ff2d55 50%, #e11d48 74%, #1d1d1f 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: color-flow 6s linear infinite;
}

/* 书纸皮肤的顶栏品牌字是实心墨色。
   注意作用域只到 paper：Vice 与其它纯色强调色皮肤都要保留
   style.css 的 90deg 流动渐变，之前写成「所有非 Vice 文档」把它们一起压平了。 */
html[data-bold-color="paper"] body[data-page-kind="doc"] .nav-title-text,
html[data-bold-color="paper"] body[data-page-kind="doc"] .nav-title-text .brand-main {
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--text-primary);
  animation: none;
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .nav-title-text .brand-hub {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
  color: var(--text-primary);
}
/* 品牌标是 mask + 渐变背景，同样不是字色。 */
html[data-bold-color="paper"] body[data-page-kind="doc"] #brand-icon {
  background: var(--text-primary);
  background-image: none;
  animation: none;
}
html body[data-page-kind="doc"]:not([data-vice-bg="1"]) .nav-toggle span {
  background: var(--text-primary);
  background-image: none;
  animation: none;
}

/* ---- styles/_hero-refine.css ---- */
/* Meteor particles moved to _hero-refine-meteor.css */


.hero-actions .btn-secondary,
.hero-actions .hero-quick-btn:not(.hero-btn-primary-glow) {
  background: none !important;
  background-color: var(--srb-liquid-bg, rgba(255,255,255,.55)) !important;
  background-image: var(--srb-liquid-fill-img, linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55))) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--srb-liquid-border-color, rgba(255,255,255,.82)) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.4) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  text-shadow: none !important;
  animation: none !important;
  transition: all .25s cubic-bezier(0.34,1.56,0.64,1) !important;
  font-weight: 700 !important;
}
[data-theme="dark"] .hero-actions .btn-secondary,
[data-theme="dark"] .hero-actions .hero-quick-btn:not(.hero-btn-primary-glow) {
  background-color: rgba(28,30,40,.45) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.hero-actions .btn-secondary:hover,
.hero-actions .hero-quick-btn:not(.hero-btn-primary-glow):hover {
  border-color: color-mix(in srgb, var(--visual-ctaBase, #e7fbb0) 38%, transparent) !important;
  box-shadow: 0 2px 10px rgba(18, 14, 32, .16), inset 0 1px 0 rgba(255,255,255,.45) !important;
}


.hero-badge { cursor: default !important; }

@media (prefers-reduced-motion: reduce) {
  .hero-actions .hero-btn-primary-glow,
  .hero-actions .hero-btn-ai-glow {
    animation: none !important;
  }
}


/* ============================================================
   文档 Vice 画布 / 浮层控件（单一真源）
   画布背景与氛围只由 style.css + visual-config 变量拥有：
     html[data-vice-bg="1"] body[data-page-kind="doc"] { mesh 渐变 }
   本节只保留“项目色”覆盖（加粗 / 行内代码 / 评论按钮 / 引用条），
   不再重复定义背景与按钮材质。

   历史背景：这里曾叠了 V4 FINAL、VICE FINAL FIX、MAXSPEC 三套互相
   覆盖的“手机纯黑背景 + 灰色模糊按钮”。它们加载在 style.css 之后、
   特异性相同，因此稳定盖掉 Vice 渐变，让文档勾选“使用 Vice 背景”后
   仍然是纯黑，并让汉堡/闪电按钮退回旧视觉。三套块已整体删除。
   ============================================================ */

/* 主站加粗：颜色来自 --srb-strong-color 单一真源（默认嫩绿；
   关闭「加粗使用强调色」后跟随正文，主站文档与 AICHAT 同一个开关）。 */
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body strong {
  color: var(--srb-strong-color) !important;
  -webkit-text-fill-color: var(--srb-strong-color) !important;
  background: none !important;
  font-weight: 900 !important;
}

/* 行内代码: 嫩绿 */
html[data-vice-bg="1"] body[data-page-kind="doc"] .markdown-body code:not(pre code) {
  background: rgba(229,249,168,.14) !important;
  color: rgb(229,249,168) !important;
}

/* 发布评论: 嫩绿 */
html[data-vice-bg="1"] body[data-page-kind="doc"] #main-comment-submit-btn,
html[data-vice-bg="1"] body[data-page-kind="doc"] #inline-reply-submit-btn {
  background: rgb(229,249,168) !important;
  color: #1a2000 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(229,249,168,.24) !important;
}

/* 引用块左条在 Vice 画布上跟随项目嫩绿；高度与底色由 style.css 单一真源负责 */
html[data-vice-bg="1"] body[data-page-kind="doc"] {
  --srb-quote-bar: rgb(229,249,168);
}

/* ============================================================
   Hero: two-column layout (text left, circular avatar right)
   ------------------------------------------------------------
   Overrides required from _site-skins.css (later source order + html prefix):
     :14 .hero-content        flex column / align-items:center
     :28 .hero-title,.support position:static / width:100%
     :36 .hero-title          transform: scale()  <- do not reuse transform
     :49 .hero-support        flex column / align-items:center
   The four .hero-actions buttons keep their own size, radius and grid; only
   the column they sit in becomes left-aligned.
   --hero-halo-* are placeholder tokens for the future adaptive colour source.
   ============================================================ */
:root {
  --hero-avatar-size: clamp(150px, 18vw, 264px);
  --hero-col-gap: clamp(28px, 5vw, 84px);
  /* --hero-halo-sampled-* are written at runtime by sampleAvatarHalo()
     in static/mod/home.js from the avatar's own pixels. Theme accents are
     only the fallback for a failed/CORS-blocked sample. */
  /* Precedence: visual lab override -> pixel sample -> theme accent. */
  --hero-halo-inner: var(--visual-haloInner, var(--hero-halo-sampled-inner, #ffc4b0));
  --hero-halo-outer: var(--visual-haloOuter, var(--hero-halo-sampled-outer, #9b6fae));
  --hero-halo-spread: var(--visual-haloSpread, 72px);
  --hero-halo-alpha: var(--visual-haloAlpha, 0.28);
}

/* ============================================================
   Hero 首帧回退值（pre-paint fallback）—— 骨架必须与终态同形
   ------------------------------------------------------------
   为什么需要这一段：hero 的结构由服务端直出（hero_render_service.py），
   但它的**配色与几何**过去只由 visual-runtime.js 写进 <html> 的行内样式。
   脚本没跑到之前，每条规则都会落到各自 var() 里的兜底值，而各处的兜底
   是历年各写各的 —— 于是首帧与终态不同色、不同大小：

     变量                        旧兜底      终态（本站默认配置）  首帧差
     --visual-haloInner          #ff8c42    #ffc4b0               暖橙 vs 蜜桃
     --visual-haloSpread         57px       72px                  光圈小一圈
     --visual-haloAlpha          .33        .28
     --visual-palmVisibility     0          .58                   椰树整棵不见
     --visual-palmLeftScale      1          1.18                  剪影小一號
     --visual-palmRightScale     .92        1.02
     --visual-heroDescSize       23.2       19.5
     --visual-heroDescOpacity    .82        .9
     --visual-title1/2/3         无         #ff9fc9/#ffd27f/#e7fbb0
     --hero-palm-*-image         无         mask 图               剪影不出

   这里把「本站默认配置」的值集中写一遍，让首帧就是终态的形与色；运行时
   一旦落地（visual-runtime.js 写 <html> 行内样式），行内样式优先级高于
   本块，真实配置照常接管 —— 本块只是**在运行时到达之前**先站好位。

   单一真源：这些值与 server/routes/site_docs.py 的 VISUAL_DEFAULTS
   （即 /api/home-visual 公开的默认配置）必须一致，由
   tests/test_hero_prepaint.py 逐键钉住 —— 改默认值只改那一处，测试会
   把两边拉齐。运行时行内样式永远优先，所以本块不会与实验室滑杆打架。
   ============================================================ */
:root {
  /* 标题渐变三色：终态 .gradient 的 linear-gradient 只吃这三个变量、没有
     兜底，缺一个整条 background-image 就作废、标题会变成全透明。所以首帧
     必须先把它们站住。 */
  --visual-title1: #ff9fc9;
  --visual-title2: #ffd27f;
  --visual-title3: #e7fbb0;
  --visual-titleSpeed: 8;
  --visual-titleFlow: running;
  --visual-titleContrast: 1.06;
  --visual-titleShadow: rgba(23, 20, 38, .42);

  /* 主按钮（奶绿）：--visual-ctaBase 同时被按钮、打字机光标、下滑箭头
     的强调色引用。 */
  --visual-ctaBase: #e7fbb0;
  --visual-ctaHighlight: #f4ffd2;
  --visual-ctaCycle: 4.8s;
  --visual-ctaPlayState: running;
  /* 主按钮圆角：消费点是 calc(var(--visual-ctaRadius, 9999) * 1px)，
     兜底 9999 与默认 999 不同 —— 首帧是「更圆一点」的胶囊，落地后才收
     到 999px（首帧 vs 终态实测半径 3855.96px → 999px）。 */
  --visual-ctaRadius: 999;

  /* 头像光圈。 */
  --visual-haloScale: 1.34;
  --visual-haloCycle: 11;

  /* 文案与栏宽（被 data-visual-home-enabled 门控的规则引用）。 */
  --visual-heroDescSize: 19.5;
  --visual-heroDescOpacity: .9;
  --visual-heroTitleTracking: -.045;
  --visual-heroTitleScale: 1;
  --visual-heroMinHeight: 100;
  --visual-homeSectionSpacing: 96;

  /* 椰树剪影。--visual-palmVisibility=0 曾让首帧整棵不见，等脚本到达才
     淡入 —— 那是首屏最大的一次布局跳动。这里先给默认透明度。
     不需要单独写「关闭」态：visual-runtime.js 无论开关都会**显式**写入
     这个变量（关闭时写 0），行内样式一律压过本块。 */
  --visual-palmVisibility: .58;
  --visual-palmColor: #302448;
  --visual-palmSway: 22;
  --visual-palmLeafSway: 2.4deg;
  --visual-palmLeafCycle: 8;
  --visual-palmBreathe: running;
  --visual-palmBreathAmount: .16;
  --visual-palmLeftScale: 1.18;
  --visual-palmRightScale: 1.02;
  --visual-palmLeftAngle: 0deg;
  --visual-palmRightAngle: 0deg;
  --visual-palmLeftX: 0vw;
  --visual-palmRightX: 0vw;
  --visual-palmLeftY: 0vh;
  --visual-palmRightY: 0vh;
  --visual-palmMobileLeftScale: 1.17;
  --visual-palmMobileRightScale: .97;
  --visual-palmMobileLeftAngle: -1deg;
  --visual-palmMobileRightAngle: -10deg;
  --visual-palmMobileLeftX: 8vw;
  --visual-palmMobileRightX: -3.5vw;
  --visual-palmMobileLeftY: 15.5vh;
  --visual-palmMobileRightY: -1vh;
  /* 剪影本体：浏览器不对 mask 做预扫描，等 JS 写变量会让椰树晚两三秒才
     出现（preload 只解决下载、不解决「谁来写下这个 url」）。 */
  --hero-palm-left-image: url("/static/img/hero-palm-left.webp?v=20261105-v502");
  --hero-palm-right-image: url("/static/img/hero-palm-right.webp?v=20261105-v502");
}

/* --- two-column shell --- */
html body[data-page-kind="home"] .hero-content {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--hero-col-gap) !important;
  width: min(1180px, 92vw) !important;
  margin-inline: auto !important;
  text-align: left !important;
}

/* Left column wrapper: title + support stack, left aligned. */
html body[data-page-kind="home"] .hero-text-col {
  /* Container for the title: sizing the title off the viewport (vw)
     while it must fit *this* column is what caused both the Windows
     two-line wrap and the 1920px overflow -- the column does not grow
     proportionally with the viewport because the avatar holds a fixed
     share of the row. */
  container-type: inline-size !important;
  container-name: herocol !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: clamp(16px, 2.2vh, 28px) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

/* Title: one step smaller, left aligned, transform channel preserved.

   几何真源：标题盒 = 文字自身的宽度（max-content），靠 align-self: center
   在列内保持居中（不再依赖 width:100% + text-align:center 的居中方式）。

   为什么不能用 width:100%：
   .hero-title .gradient 用 background-clip:text + 透明字填充（-webkit-text-
   fill-color:transparent），背景的绘制区就是标题盒。只要字号让 "SrbillHub"
   比盒子宽一点点，溢出盒子的那部分字形就没有背景可画 —— 在 Safari 上表现为
   首尾字母被"切平"（用户看到的 b 右边是直的）。
   实测复现：视口 ≥1680 且浏览器走 7.6vw 回退分支时，字号顶到 8rem=128px，
   而列宽只有 512px，文字 519.7px 比盒子宽 7.7px；换更宽的字形（如 SF Pro
   Rounded）会宽到 23.5px，两端各被削掉近 12px。
   盒子贴住文字后，这种切割在几何上不可能发生（列宽不足时文字只是轻微
   越过列边界，两端对称溢出，字形完整）。 */
html body[data-page-kind="home"] .hero-text-col > .hero-title {
  width: max-content !important;
  max-width: none !important;
  align-self: center !important;
  margin: 0 !important;
  text-align: center !important;
  /* 13vw resolved to ~200px on Windows at 1536px logical width, clamped
     to 8rem=128px -- but the left column is too narrow for "SrbillHub"
     at 128px, so it wrapped to two lines there and stayed one line on
     macOS at 1440px. Cap the viewport term at the column width and
     forbid wrapping outright. */
  font-size: clamp(3.4rem, 7.6vw, 8rem) !important;
  line-height: 1.06 !important;
  white-space: nowrap !important;
  transform-origin: center !important;
}

/* Size the title off the column width, not the viewport. 21cqw 在容器查询
   可用的浏览器上把 "SrbillHub"（9 字形）稳定收在列内；容器解析失败时
   （部分 Safari 会走视口回退）会退到上面的 7.6vw 分支，此时靠
   width: max-content 保证字形不被 background-clip:text 切掉。 */
@media (min-width: 901px) {
  @supports (font-size: 1cqw) {
    html body[data-page-kind="home"] .hero-text-col > .hero-title {
      font-size: clamp(3.2rem, 21cqw, 8rem) !important;
    }
  }
}

/* 字形描边余量：文字最后一字的右侧边距（RSB）可能小于 letter-spacing 的
   负值，使墨迹比盒子右缘多出零点几像素；给渐变容器的绘制区左右各加
   0.06em 内边距、再用等量负外边距抵消，布局位置完全不变。 */
html body[data-page-kind="home"] .hero-text-col > .hero-title > .gradient {
  padding-inline: .06em;
  margin-inline: -.06em;
}

/* Support column (typewriter desc + buttons): left aligned. */
html body[data-page-kind="home"] .hero-text-col > .hero-support {
  width: 100% !important;
  margin: 0 !important;
  align-items: center !important;
  text-align: center !important;
}

/* Typewriter description: one step smaller. */
/* Centred on the button block's axis, not the text column's: the desc shares
   the 660px cap used by .hero-actions, so both share one centre line. Only
   .hero-desc is targeted -- changing .hero-support would move the buttons. */
html body[data-page-kind="home"] .hero-text-col .hero-desc {
  width: 100% !important;
  /* The grid declares max-width:660px but resolves to 480px
     (2 x 234 + 12 gap). Matching the declared cap left the desc 8px
     off-axis, so match the resolved width instead. */
  max-width: 480px !important;
  text-align: center !important;
  margin-inline: auto !important;
  font-size: clamp(1rem, 2.6vw, 1.23rem) !important;
  line-height: 1.55 !important;
}

/* Buttons keep their own metrics; only the grid stops being centred. */
html body[data-page-kind="home"] .hero-text-col .hero-actions {
  margin-inline: auto !important;
  justify-content: center !important;
  justify-items: start !important;
}

/* --- right column: circular avatar + adaptive halo --- */
html body[data-page-kind="home"] .hero-content > .hero-avatar {
  position: relative !important;
  display: block !important;
  width: var(--hero-avatar-size) !important;
  height: var(--hero-avatar-size) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  /* 纯装饰：头像不接收指针事件，命中区交给标题与按钮。
     子元素（光圈 / 粒子 / 图片）同样保持 none。 */
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Optional Vice City silhouettes. They live in the hero background plane so
   they frame the scene without changing layout or competing with the title. */
html body[data-page-kind="home"] .hero-palms {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--visual-palmVisibility, 0);
  color: var(--visual-palmColor, #34264f);
  isolation: isolate;
  transition: opacity .55s cubic-bezier(.22, .8, .24, 1);
}

html body[data-page-kind="home"] .hero-palms::after {
  content: none;
}

html body[data-page-kind="home"] .hero-palm {
  position: absolute;
  bottom: -27%;
  width: clamp(260px, 31vw, 470px);
  height: clamp(440px, 92vh, 900px);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 22px color-mix(in srgb, currentColor 14%, transparent));
  /* 整树摆动走独立 rotate 属性：定位用的 transform（rotate + scaleX + scale）
     继续由 .hero-palm-left/right 独占，两者互不覆盖。
     左右相位由 --palm-tree-delay 错开，两棵树不同步。 */
  animation: hero-palm-tree calc(var(--visual-palmSway, 22) * 1s) ease-in-out infinite;
  animation-delay: var(--palm-tree-delay, 0s);
}

html body[data-page-kind="home"] .hero-palm-left {
  left: calc(clamp(-180px, -4vw, -48px) + var(--visual-palmLeftX, 0vw));
  bottom: calc(-27% + var(--visual-palmLeftY, 0vh));
  transform: rotate(var(--visual-palmLeftAngle, 0deg)) scale(var(--visual-palmLeftScale, 1));
  /* 左树相位 0、右树相位错开：两棵树的摆动永远不同步。 */
  --palm-tree-delay: 0s;
  --palm-leaf-delay: 0s;
}

html body[data-page-kind="home"] .hero-palm-right {
  right: calc(clamp(-180px, -4vw, -48px) + var(--visual-palmRightX, 0vw));
  bottom: calc(-27% + var(--visual-palmRightY, 0vh));
  transform: rotate(var(--visual-palmRightAngle, 0deg)) scaleX(-1) scale(var(--visual-palmRightScale, .92));
  /* 相位错开半周期附近但不取整：左右叶簇不会同时到顶/到底。 */
  --palm-tree-delay: -6.4s;
  --palm-leaf-delay: -2.7s;
}

html body[data-page-kind="home"] .palm-art {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--visual-palmColor, #34264f);
  opacity: 0;
  transform-origin: 50% 100%;
  /* 叶簇摆动（transform）与颜色呼吸（background-color）两条动画：
     周期取 --visual-palmLeafCycle、幅度取 --visual-palmLeafSway，
     与整树的 --visual-palmSway 是两个频率，合成相位不重合，
     观感即「叶片各自不规律地摆」。 */
  animation:
    hero-palm-leaf calc(var(--visual-palmLeafCycle, 8) * 1s) ease-in-out infinite,
    hero-palm-breathe calc(var(--visual-palmLeafCycle, 8) * 1.9s) ease-in-out infinite;
  animation-play-state: running, var(--visual-palmBreathe, running);
  animation-delay: var(--palm-leaf-delay, 0s), 0s;
  transition: opacity .45s ease;
}

html body[data-page-kind="home"] .hero-palm-left .palm-art {
  -webkit-mask: var(--hero-palm-left-image, none) center / contain no-repeat;
  mask: var(--hero-palm-left-image, none) center / contain no-repeat;
}

html body[data-page-kind="home"] .hero-palm-right .palm-art {
  -webkit-mask: var(--hero-palm-right-image, none) center / contain no-repeat;
  mask: var(--hero-palm-right-image, none) center / contain no-repeat;
}

html body[data-page-kind="home"] .palm-art[data-palm-loaded="true"] {
  opacity: .96;
}

/* 整树：绕树根缓慢摆动。幅度刻意小于叶簇，避免整棵树在画面里晃。 */
@keyframes hero-palm-tree {
  0%, 100% { rotate: -.7deg; }
  50% { rotate: .7deg; }
}

/* 叶簇：幅度由 --visual-palmLeafSway 单一真源驱动。 */
@keyframes hero-palm-leaf {
  0%, 100% { transform: rotate(calc(var(--visual-palmLeafSway, 2.4deg) * -1)) translateY(1px); }
  50% { transform: rotate(var(--visual-palmLeafSway, 2.4deg)) translateY(-2px); }
}

/* 颜色呼吸：在椰树底色与「呼吸近似色」之间往复，强度由 --visual-palmBreathAmount 决定。 */
@keyframes hero-palm-breathe {
  0%, 100% { background-color: var(--visual-palmColor, #34264f); }
  50% {
    background-color: color-mix(in srgb,
      var(--visual-palmBreathColor, #48345d) calc(var(--visual-palmBreathAmount, .16) * 100%),
      var(--visual-palmColor, #34264f));
  }
}

html body[data-page-kind="home"] .hero-avatar-halo {
  position: absolute !important;
  /* Box is padded by spread * 1.65 so the blur has room to feather out
     instead of being clipped by the element edge. */
  inset: calc(var(--hero-halo-spread) * -1.65) !important;
  border-radius: 50% !important;
  /* Legacy fallback for Windows WebView/older Chromium builds without
     color-mix. The following color-mix gradient supersedes it when supported. */
  background: radial-gradient(circle at 50% 50%,
    rgba(255,140,66,.27) 0%,
    rgba(255,140,66,.22) 20%,
    rgba(255,94,58,.14) 42%,
    rgba(255,94,58,.07) 62%,
    rgba(255,94,58,.025) 82%,
    rgba(255,94,58,0) 100%) !important;
  /* Fade to the halo's own colour at 0 alpha, never to `transparent`:
     `transparent` computes to rgba(0,0,0,0) and oklab interpolation toward
     it passes through grey/black, which drew a dirty ring at the rim.
     Extra mid stops + a 100% terminus remove the hard cut that made the
     halo read as a flat disc on Windows. */
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in oklab, var(--hero-halo-inner) 82%, transparent) 0%,
      color-mix(in oklab, var(--hero-halo-inner) 66%, transparent) 22%,
      color-mix(in oklab, var(--hero-halo-outer) 44%, transparent) 42%,
      color-mix(in oklab, var(--hero-halo-outer) 20%, transparent) 60%,
      color-mix(in oklab, var(--hero-halo-outer) 7%, transparent) 76%,
      color-mix(in oklab, var(--hero-halo-outer) 2%, transparent) 88%,
      color-mix(in oklab, var(--hero-halo-outer) 0%, transparent) 100%) !important;
  /* No !important on opacity: an important author declaration outranks
     @keyframes in the cascade, which previously froze the breathing at a
     constant value while scale still animated. */
  opacity: var(--hero-halo-alpha);
  filter: blur(calc(var(--hero-halo-spread) * .44)) !important;
  animation: hero-halo-breathe calc(var(--visual-haloCycle, 9) * 1s) ease-in-out infinite !important;
}

html body[data-page-kind="home"] .hero-avatar-img {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 1px solid rgba(255,140,66,.35) !important;
  border-color: color-mix(in oklab, var(--hero-halo-inner) 35%, transparent) !important;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

html body[data-page-kind="home"] .hero-avatar-particles {
  position: absolute;
  inset: -28%;
  z-index: 3;
  pointer-events: none;
  opacity: var(--visual-avatarParticlesEnabled, 1);
  transform: translateZ(0);
  /* No `contain: paint` here. It clipped the streaks to this 156% box, which is
     exactly the square edge that was visible around the avatar. The particles
     are 0x0 anchors with two pseudo-elements each, so removing the clip does
     not add composited layers - only the paint area they already had. */
  overflow: visible;
}

/* JS fallback 里的粒子必须等同步函数落到 data-ready 后才显示。
   SSR 轨迹自带 data-ready，因此首帧仍然可见；没有 inline 轨迹的空锚点
   绝不能再落到默认 0% 中心。 */
html body[data-page-kind="home"] .hero-avatar-particles:not([data-ready="true"]) i {
  display: none;
}


/* 手机光圈的「水平/垂直偏移」由 --hero-halo-x / -y 承载（桌面默认 0）。
   写成 translate 而不是改 inset：inset 由 --hero-halo-spread 的 padding
   计算决定，直接改会把羽化盒子一起推歪。 */
html body[data-page-kind="home"] .hero-avatar-halo {
  translate: var(--hero-halo-x, 0) var(--hero-halo-y, 0);
}

@keyframes hero-halo-breathe {
  0%, 100% {
    transform: scale(calc(var(--hero-halo-scale, 1.28) * .96));
    opacity: calc(var(--hero-halo-alpha, .33) * .76);
  }
  50% {
    transform: scale(calc(var(--hero-halo-scale, 1.28) * 1.04));
    opacity: calc(var(--hero-halo-alpha, .33) * 1.08);
  }
}

/* --- narrow viewports: fall back to stacked + centred --- */
@media (max-width: 900px) {
  html body[data-page-kind="home"] .hero-content {
    flex-direction: column !important;
    text-align: center !important;
  }
  html body[data-page-kind="home"] .hero-text-col,
  html body[data-page-kind="home"] .hero-text-col > .hero-support {
    align-items: center !important;
    text-align: center !important;
    /* Without an explicit width these shrink-to-fit to 0 on the column
       cross axis (measured: col 0px, support 32px at 390px), because the
       nowrap title contributes no intrinsic cross-axis width while the
       desktop `min-width: 0` allows a full collapse. */
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
  }
  html body[data-page-kind="home"] .hero-text-col > .hero-title,
  html body[data-page-kind="home"] .hero-text-col .hero-desc {
    text-align: center !important;
  }
  html body[data-page-kind="home"] .hero-text-col > .hero-title {
    /* Never inherit the desktop container-query size here: at 390px it
       resolved to ~75px inside a ~358px column and, combined with
       `white-space: normal`, wrapped one glyph per line. */
    font-size: clamp(2.5rem, 12.4vw, 4.2rem) !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    transform-origin: center !important;
    /* max-content 由桌面分支继承；这里不能再夹一个 max-width:100%，
       否则手机端又会出现"盒比文字窄 → 首尾被 background-clip:text 切平"。 */
    max-width: none !important;
  }
  html body[data-page-kind="home"] .hero-text-col .hero-desc {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    /* Share the action grid's width basis, not the viewport's: at 375px a
       92vw cap gave the desc 345px against the grid's fixed 320px, which
       put the two centre lines 3.5px apart. */
    width: min(92vw, 320px) !important;
    max-width: min(92vw, 320px) !important;
    margin-inline: auto !important;
    font-size: clamp(.98rem, 3.7vw, 1.18rem) !important;
  }
  html body[data-page-kind="home"] .hero-text-col .hero-actions {
    justify-content: center !important;
    justify-items: stretch !important;
    width: min(92vw, 320px) !important;
    max-width: min(92vw, 320px) !important;
    margin-inline: auto !important;
  }
  html body[data-page-kind="home"] .hero-content > .hero-avatar {
    order: -1 !important;
  }
  html body[data-page-kind="home"] .hero-palms {
    opacity: var(--visual-palmVisibility, 0);
  }
  html body[data-page-kind="home"] .hero-palm {
    width: clamp(180px, 47vw, 290px);
    height: clamp(300px, 65vh, 520px);
    bottom: calc(-20% + var(--visual-palmMobileLeftY, 0vh));
  }
  html body[data-page-kind="home"] .hero-palm-left {
    left: calc(clamp(-110px, -18vw, -52px) + var(--visual-palmMobileLeftX, 0vw));
    transform: rotate(var(--visual-palmMobileLeftAngle, -8deg)) scale(calc(var(--visual-palmLeftScale, 1.18) * var(--visual-palmMobileLeftScale, 1)));
    --palm-tree-delay: 0s;
    --palm-leaf-delay: 0s;
  }
  html body[data-page-kind="home"] .hero-palm-right {
    right: calc(clamp(-110px, -18vw, -52px) + var(--visual-palmMobileRightX, 0vw));
    bottom: calc(-20% + var(--visual-palmMobileRightY, 0vh));
    transform: rotate(var(--visual-palmMobileRightAngle, 8deg)) scaleX(-1) scale(calc(var(--visual-palmRightScale, 1.02) * var(--visual-palmMobileRightScale, 1)));
    --palm-tree-delay: -6.4s;
    --palm-leaf-delay: -2.7s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-page-kind="home"] .hero-avatar-halo { animation: none !important; }
  html body[data-page-kind="home"] .hero-avatar-particles { display: none; }
  html body[data-page-kind="home"] .palm-art,
  html body[data-page-kind="home"] .hero-palm { animation: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  html body[data-page-kind="home"] .hero-avatar-halo {
    filter: none !important;
    opacity: calc(var(--hero-halo-alpha) * .62) !important;
  }
}

/* ================= Hero 头像流星（单一真源，v3.149）=================
   i        0×0 定位锚点：只负责位移 + 整体旋转
   ::before 尾迹：沿本地 -x，严格与飞行方向反向
   ::after  头部光点
   方向固定 -45°，全部流星严格平行 —— 杜绝水平条与角度打架。 */
html body[data-page-kind="home"] .hero-avatar-particles i {
  position: absolute;
  left: calc(50% + var(--particle-x, 0%));
  top: calc(50% + var(--particle-y, 0%));
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
  will-change: transform, opacity;
  /* A gentler curve per segment: the streak leaves fast and settles, instead of
     sliding at a constant speed like a line on a conveyor belt. */
  animation: hero-meteor-flight var(--meteor-duration, 3.2s) cubic-bezier(.3, .7, .4, 1) infinite;
  animation-delay: var(--meteor-delay, 0s);
}

html body[data-page-kind="home"] .hero-avatar-particles i::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--meteor-tail, 26px);
  height: var(--meteor-thickness, 2.4px);
  border-radius: 999px;
  transform: translate(-100%, -50%);
  /* 五段渐变：尾部先淡入、中段有厚度、头端收成亮核。 */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 0%, transparent) 0%,
    color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 18%, transparent) 22%,
    color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 52%, transparent) 52%,
    color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 88%, transparent) 86%,
    color-mix(in srgb, #fff8e2 96%, #fff) 100%);
  box-shadow:
    0 0 5px color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 34%, transparent),
    0 0 14px color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 22%, transparent);
}

html body[data-page-kind="home"] .hero-avatar-particles i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--meteor-thickness, 2.4px) * 2.4);
  height: calc(var(--meteor-thickness, 2.4px) * 2.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    #ffffff 0%,
    color-mix(in srgb, #ffffff 84%, var(--avatar-particle-color-1, #ffd166)) 32%,
    color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 58%, transparent) 68%,
    color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 0%, transparent) 100%);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 78%, transparent),
    0 0 15px color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 44%, transparent),
    0 0 30px color-mix(in srgb, var(--avatar-particle-color-1, #ffd166) 18%, transparent);
}

html body[data-page-kind="home"] .hero-avatar-particles i:nth-child(2n)::before {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 0%, transparent) 0%,
    color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 12%, transparent) 24%,
    color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 42%, transparent) 54%,
    color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 86%, transparent) 84%,
    color-mix(in srgb, #fff0f8 94%, #fff) 100%);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 40%, transparent),
    0 0 16px color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 18%, transparent);
}

html body[data-page-kind="home"] .hero-avatar-particles i:nth-child(2n)::after {
  background: radial-gradient(circle,
    #ffffff 0%,
    color-mix(in srgb, #ffffff 84%, var(--avatar-particle-color-2, #ff7eb6)) 32%,
    color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 58%, transparent) 68%,
    color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 0%, transparent) 100%);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 78%, transparent),
    0 0 15px color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 44%, transparent),
    0 0 30px color-mix(in srgb, var(--avatar-particle-color-2, #ff7eb6) 18%, transparent);
}

@keyframes hero-meteor-flight {
  0% {
    opacity: 0;
    transform: translate3d(var(--meteor-start-x, 0px), var(--meteor-start-y, 0px), 0) rotate(var(--meteor-angle, -45deg));
  }
  9% { opacity: calc(var(--meteor-peak, 1) * .58); }
  26% { opacity: var(--meteor-peak, 1); }
  44% { opacity: var(--meteor-peak, 1); }
  62% {
    opacity: 0;
    transform: translate3d(var(--meteor-end-x, 0px), var(--meteor-end-y, 0px), 0) rotate(var(--meteor-angle, -45deg));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--meteor-end-x, 0px), var(--meteor-end-y, 0px), 0) rotate(var(--meteor-angle, -45deg));
  }
}

/* ---- mod/doc-list-mobile.css ---- */


@media (max-width: 768px) {
  .doc-content {
    padding-left: 18px !important;
    padding-right: 16px !important;
    /* 与上面两行同源：通栏元素靠这两个变量算负外边距，
       所以手机端阅读列的分隔线能贴到屏幕边缘。改内边距必须同时改这里。 */
    --doc-gutter-left: 18px;
    --doc-gutter-right: 16px;
  }

  .doc-content .markdown-body {
    padding-left: 0 !important;
    overflow: visible !important;
  }


  .doc-content .markdown-body ol,
  .doc-content .markdown-body blockquote ol,
  .doc-content .markdown-body li ol {
    list-style: none !important;
    margin: 0.75em 0 1em 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    counter-reset: srb-doc-ol !important;
  }

  .doc-content .markdown-body ol > li,
  .doc-content .markdown-body blockquote ol > li,
  .doc-content .markdown-body li ol > li {
    list-style: none !important;
    display: block !important;
    position: relative !important;
    margin: 0.42em 0 !important;
    padding-left: 2.4em !important;
    text-indent: 0 !important;
    counter-increment: srb-doc-ol !important;
    overflow: visible !important;
  }

  .doc-content .markdown-body ol > li::marker,
  .doc-content .markdown-body blockquote ol > li::marker,
  .doc-content .markdown-body li ol > li::marker {
    content: "" !important;
    font-size: 0 !important;
  }

  .doc-content .markdown-body ol > li::before,
  .doc-content .markdown-body blockquote ol > li::before,
  .doc-content .markdown-body li ol > li::before {
    content: counter(srb-doc-ol) "." !important;
    position: absolute !important;
    left: 0.18em !important;
    top: 0.02em !important;
    width: 1.85em !important;
    min-width: 1.85em !important;
    text-align: left !important;
    font-size: 1em !important;
    line-height: 1.6 !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-fill-color: currentColor !important;
    font-variant-numeric: tabular-nums !important;
    pointer-events: none !important;
  }

  .doc-content .markdown-body ol > li > p:first-child,
  .doc-content .markdown-body blockquote ol > li > p:first-child,
  .doc-content .markdown-body li ol > li > p:first-child {
    margin-top: 0 !important;
  }

  .doc-content .markdown-body ol > li > p:last-child,
  .doc-content .markdown-body blockquote ol > li > p:last-child,
  .doc-content .markdown-body li ol > li > p:last-child {
    margin-bottom: 0 !important;
  }


  .doc-content .markdown-body ul,
  .doc-content .markdown-body blockquote ul,
  .doc-content .markdown-body li ul {
    list-style: disc !important;
    list-style-position: outside !important;
    padding-left: 1.35em !important;
    margin-left: 0 !important;
  }

  .doc-content .markdown-body ul > li,
  .doc-content .markdown-body blockquote ul > li {
    padding-left: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }


  .doc-content .markdown-body,
  .doc-content .markdown-body li,
  .doc-content .markdown-body ol,
  .doc-content .markdown-body ul,
  .doc-content .markdown-body blockquote {
    overflow: visible !important;
  }
}

/* ---- mod/doc-reading-enhance.css ---- */

.doc-content .markdown-body {
  font-size: calc(18px * var(--site-font-scale, 1));
  line-height: 1.75;
  letter-spacing: 0;
  word-spacing: 0;
  color: var(--text-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
}

.doc-content .markdown-body p {
  margin: 0.48em 0 0.68em;
  line-height: 1.72;
}

.doc-content .markdown-body > *:first-child {
  margin-top: 0 !important;
}

.doc-content .markdown-body > *:last-child {
  margin-bottom: 0 !important;
}

.doc-content .markdown-body h1,
.doc-content .markdown-body h2,
.doc-content .markdown-body h3,
.doc-content .markdown-body h4,
.doc-content .markdown-body h5,
.doc-content .markdown-body h6 {
  line-height: 1.38;
  letter-spacing: 0;
  color: var(--text-primary);
  scroll-margin-top: 88px;
}

.doc-content .markdown-body h1 {
  font-size: 2rem;
  margin: 1.3em 0 0.72em;
}

.doc-content .markdown-body h2 {
  font-size: 1.65rem;
  margin: 1.2em 0 0.65em;
}

.doc-content .markdown-body h3 {
  font-size: 1.34rem;
  margin: 1.05em 0 0.58em;
}

.doc-content .markdown-body h4 {
  font-size: 1.16rem;
  margin: 0.95em 0 0.52em;
}

.doc-content .markdown-body h5,
.doc-content .markdown-body h6 {
  margin: 0.9em 0 0.48em;
}

.doc-content .markdown-body ul,
.doc-content .markdown-body ol {
  margin-top: 0.72em;
  margin-bottom: 1.02em;
}

.doc-content .markdown-body li {
  line-height: 1.62;
  margin: 0.32em 0;
}

.doc-content .markdown-body li > p {
  margin: 0.32em 0;
}

.doc-content .markdown-body li + li {
  margin-top: 0.34em;
}

/* 引用块底色 / 左条 / 圆角统一由 style.css 单一真源负责；
   文档语境只补充上下间距，不再叠一层灰色底。 */
.doc-content .markdown-body blockquote {
  margin: 0.85em 0;
}

.doc-content .markdown-body blockquote > *:first-child {
  margin-top: 0 !important;
}

.doc-content .markdown-body blockquote > *:last-child {
  margin-bottom: 0 !important;
}

.doc-content .markdown-body code:not(pre code) {
  font-size: 0.92em;
  padding: 0.14em 0.38em;
  border-radius: 8px;
  background: rgba(127,127,127,.12);
  word-break: break-word;
}

.doc-content .markdown-body pre {
  margin: 1.15em 0 1.28em;
  padding: 0.95em 1em;
  border-radius: 14px;
  overflow: auto;
  line-height: 1.72;
}

.doc-content .markdown-body pre code {
  font-size: 0.92em;
  line-height: 1.72;
  white-space: pre;
}

/* 亮度统一由 style.css 的 --srb-hr-line 决定；旧的 opacity:.5 二次降亮已移除。 */
.doc-content .markdown-body hr {
  margin: 0.85em 0;
  opacity: 1;
}

.doc-content .markdown-body img {
  margin: 1.1em auto 1.2em;
  border-radius: 14px;
}

.doc-content .markdown-body table {
  margin: 1.15em 0 1.35em;
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

.doc-content .markdown-body th,
.doc-content .markdown-body td {
  padding: 0.66em 0.82em;
  line-height: 1.7;
  white-space: nowrap;
}

.doc-content .markdown-body .katex {
  font-size: 1.04em;
  line-height: 1.72;
}

.doc-content .markdown-body .katex-display {
  margin: 0.42em 0 0.48em !important;
  padding: 0.18em 0.1em;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

.doc-content .markdown-body .katex-display > .katex {
  font-size: 1.12em !important;
  line-height: 1.85;
}

.doc-content .markdown-body .katex-display::-webkit-scrollbar {
  height: 6px;
}

.doc-content .markdown-body .katex-display::-webkit-scrollbar-thumb {
  background: rgba(127,127,127,.28);
  border-radius: 999px;
}

.doc-content .markdown-body .mermaid,
.doc-content .markdown-body .echarts-wrap,
.doc-content .markdown-body .function-plot-wrap {
  margin: 1.2em 0 1.3em;
}

.doc-content {
  max-width: 920px;
}

.doc-content .markdown-body > h1:first-child,
.doc-content .markdown-body > h2:first-child,
.doc-content .markdown-body > h3:first-child {
  margin-top: 0 !important;
}

@media (min-width: 1280px) {
  .doc-content .markdown-body {
    font-size: calc(18.5px * var(--site-font-scale, 1));
    line-height: 1.78;
  }

  .doc-content .markdown-body .katex-display > .katex {
    font-size: 1.16em !important;
  }

  .doc-content {
    max-width: 980px;
  }
}

@media (max-width: 1024px) {
  .doc-content .markdown-body {
    font-size: calc(16.5px * var(--site-font-scale, 1));
    line-height: 1.66;
  }

  .doc-content .markdown-body h1 {
    font-size: 1.82rem;
  }

  .doc-content .markdown-body h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .doc-content {
    max-width: 100%;
  }

  .doc-content .markdown-body {
    font-size: calc(17px * var(--site-font-scale, 1));
    line-height: 1.62;
  }

  .doc-content .markdown-body p {
    margin: 0.44em 0 0.62em;
  }

  .doc-content .markdown-body h1 {
    font-size: 1.62rem;
    margin: 1.02em 0 0.62em;
  }

  .doc-content .markdown-body h2 {
    font-size: 1.4rem;
    margin: 0.98em 0 0.56em;
  }

  .doc-content .markdown-body h3 {
    font-size: 1.22rem;
    margin: 0.9em 0 0.52em;
  }

  .doc-content .markdown-body li {
    line-height: 1.62;
  }

  .doc-content .markdown-body pre {
    padding: 0.88em 0.9em;
    border-radius: 12px;
  }

  .doc-content .markdown-body code:not(pre code) {
    font-size: 0.9em;
  }

  .doc-content .markdown-body .katex {
    font-size: 1em;
  }

  .doc-content .markdown-body .katex-display {
    margin: 0.38em 0 0.44em !important;
    padding: 0.12em 0.02em;
  }

  .doc-content .markdown-body .katex-display > .katex {
    font-size: 1.06em !important;
    line-height: 1.66;
  }

  .doc-content .markdown-body table {
    margin: 1em 0 1.2em;
  }
}

.bili-embed-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 1.5em auto;
  padding-bottom: 0;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  border: 1px solid var(--glass-border, rgba(0,0,0,0.06));
}
.bili-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}
@supports not (aspect-ratio: 16 / 9) {
  .bili-embed-wrap {
    aspect-ratio: auto;
    padding-bottom: 56.25%;
    height: 0;
  }
}
[data-theme="dark"] .bili-embed-wrap {
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .bili-embed-wrap {
    margin: 1.2em auto;
    border-radius: 12px;
  }
}


/* ===== 行间距 5 档（2026-08-13 新增）===== */
/* 档位: loose 宽松 / normal 标准(默认) / compact 紧凑 / x-compact X手机版密度 / tight 最紧凑 */
.doc-content .markdown-body {
  --doc-line-height: 1.5;
}
html[data-line-height="loose"] .doc-content .markdown-body { --doc-line-height: 2.0; }
html[data-line-height="normal"] .doc-content .markdown-body { --doc-line-height: 1.75; }
html[data-line-height="compact"] .doc-content .markdown-body { --doc-line-height: 1.5; }
html[data-line-height="x-compact"] .doc-content .markdown-body { --doc-line-height: 1.32; }
html[data-line-height="tight"] .doc-content .markdown-body { --doc-line-height: 1.15; }

/* AICHAT 行间距由 ai-chat-unified.css 的 data-aichat-line-height 真源负责。 */

/* 正文行距应用变量（标题/代码块保持自身行高，不跟随） */
html[data-line-height] .doc-content .markdown-body,
html[data-line-height] .doc-content .markdown-body p,
html[data-line-height] .doc-content .markdown-body li,
html[data-line-height] .doc-content .markdown-body blockquote,
html[data-line-height] .doc-content .markdown-body td,
html[data-line-height] .doc-content .markdown-body th {
  line-height: var(--doc-line-height) !important;
}

/* 媒体查询断点基准也跟随变量（先清掉硬编码，再应用变量） */
@media (min-width: 1280px) {
  html[data-line-height] .doc-content .markdown-body { line-height: var(--doc-line-height) !important; }
}
@media (max-width: 1024px) {
  html[data-line-height] .doc-content .markdown-body { line-height: var(--doc-line-height) !important; }
}
@media (max-width: 768px) {
  html[data-line-height] .doc-content .markdown-body { line-height: var(--doc-line-height) !important; }
}

/* ---- mod/comments.css ---- */


.comment-thread-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--glass-border);
}
.comment-thread-item:last-child {
  border-bottom: none;
}
/* 整条评论不做 hover 高光：鼠标扫过时整块变色很吵，
   只有点赞/回复/删除三个按钮各自有独立的 hover 反馈。 */



.comment-avatar-placeholder {
  background: var(--theme-solid, var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-fg, #fff);
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
}
/* ID / 时间的字号、颜色、间距（含手机端）一律由文件末尾 X 风格真源段定义，
   这里只留与排版无关的换行约束，避免同一属性在四处各写一遍。 */
.comment-time {
  white-space: nowrap;
  flex-shrink: 0;
}

.comment-role-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.comment-role-badge.owner {
  background: linear-gradient(135deg, var(--srb-strong-color, #ec4899), color-mix(in srgb, var(--srb-strong-color, #ec4899) 72%, #ffffff));
  color: var(--theme-fg, var(--on-accent, #fff));
  box-shadow: 0 1px 6px color-mix(in srgb, var(--srb-strong-color, #ec4899) 25%, transparent);
}
.comment-role-badge.admin {
  background: linear-gradient(135deg, var(--theme-solid, #e7fbb0), color-mix(in srgb, var(--theme-solid, #e7fbb0) 72%, #ffffff));
  color: var(--theme-fg, var(--on-accent, #1c2115));
  box-shadow: 0 1px 6px color-mix(in srgb, var(--theme-solid, #e7fbb0) 25%, transparent);
}
.comment-role-badge.pending {
  background: rgba(245,158,11,0.12);
  color: var(--orange);
  border: 1px solid rgba(245,158,11,0.2);
}

/* .comment-content 的排版（字号/行高/间距）统一由文件末尾 X 风格真源段定义，
   这里只保留与排版无关的基础语义属性，避免同一属性在两处各写一遍。 */
.comment-content {
  color: var(--comment-fg);
  /* 正文走 Markdown 渲染，块级标签之间的换行符在 pre-wrap 下会被当成
     真实空行渲染出来，正文与操作行之间因此凭空多出一行。换行交给
     渲染器产出的 <br>/<p>，这里不再保留 pre-wrap。 */
  white-space: normal;
  word-break: break-word;
}

/* 操作行的尺寸（gap / padding / height / font-size / margin-top）统一由文件末尾
   X 风格真源段定义。这里只留下不涉及尺寸的结构与配色，交互态见下方 :hover / .liked。 */
.comment-actions {
  display: flex;
  align-items: center;
}
.comment-action-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--comment-fg-action);
  cursor: pointer;
  transition: 0.15s ease;
  font-family: inherit;
}
/* 三个按钮的 hover 各用一种颜色，靠 icon 外围的圆形底色提示可点，
   不再给整行加背景。点赞=粉、回复=蓝、删除=红。 */
.comment-action-btn:hover{
  color:#1d9bf0;
}
.comment-action-btn:hover .icon-xs{
  background:rgba(29,155,240,.12);
}
.comment-like-btn:hover{
  color:#f91880;
}
.comment-like-btn:hover .icon-xs{
  background:rgba(249,24,128,.12);
}
.comment-action-btn.liked{
  color:#f91880;
}
.comment-action-btn.delete-btn:hover{
  color:#f4212e;
}
.comment-action-btn.delete-btn:hover .icon-xs{
  background:rgba(244,33,46,.12);
}

.comment-sort-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}
.comment-sort-bar .count {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}
.comment-sort-group {
  display: flex;
  gap: 4px;
}
.comment-sort-btn {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  transition: 0.15s ease;
  border: none;
  background: transparent;
  font-family: inherit;
}
.comment-sort-btn:hover {
  background: color-mix(in srgb, var(--theme-solid, #e7fbb0) 6%, transparent);
}
/* --accent 只是历史别名；真源是 --theme-solid。直接用别名时，若皮肤层
   还没把别名接上，选中项会停在杨桃绿/白字不可见的旧值。 */
.comment-sort-btn.active {
  color: var(--theme-solid, var(--accent));
  background: color-mix(in srgb, var(--theme-solid, #e7fbb0) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-solid, #e7fbb0) 24%, transparent);
}

.comment-reply-indicator {
  display: none;
  margin: -4px 0 12px 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-solid, #e7fbb0) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-solid, #e7fbb0) 12%, transparent);
  font-size: 13px;
  color: var(--text-secondary);
}
.comment-reply-indicator.show {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.comment-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 14px;
}

@media (min-width: 769px) {
  .comment-thread-item {
    padding: 16px 0;
  }
  /* 桌面端的正文字号、用户名、操作行、头像尺寸、楼中楼缩进都由文件末尾
     X 风格真源段统一定义（末尾规则在后、同特异性下生效），此处曾经的一份
     重复定义已删除，避免改了上面不生效、改了下面又被怀疑的双头问题。 */
  .comment-sort-bar .count {
    font-size: 14px;
  }
  .comment-sort-btn {
    font-size: 13px;
    padding: 4px 10px;
  }
  .comment-role-badge {
    padding: 1px 8px;
    font-size: 10px;
  }
  .comment-empty {
    padding: 32px 16px;
    font-size: 14px;
  }
}

.comment-skeleton {
  display: flex;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--glass-border);
  animation: comment-skeleton-pulse 1.5s ease-in-out infinite;
}
.comment-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(120,120,140,0.12);
  flex-shrink: 0;
}
.comment-skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comment-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: rgba(120,120,140,0.10);
}
.comment-skeleton-line.short { width: 40%; }
.comment-skeleton-line.medium { width: 70%; }
.comment-skeleton-line.long { width: 90%; }
@keyframes comment-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (max-width: 768px) {
  .comment-skeleton-avatar { width: 30px; height: 30px; }
  .comment-skeleton-line { height: 10px; }
}

.comment-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 0;
}
.comment-page-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.comment-page-btn:hover:not(.disabled) {

  color: var(--accent);
  transform: translateY(-1px);
}
.comment-page-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.comment-page-info {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.comment-thread-children.comment-folded > .comment-thread-item {
  display: none !important;
}
.comment-thread-children.comment-folded > .comment-fold-btn {
  display: block !important;
}
.comment-fold-btn {
  display: none;
  width: 100%;
  padding: 8px 12px;
  margin: 4px 0;
  border: 1px dashed var(--glass-border);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
}
.comment-fold-btn:hover {
  background: var(--accent-light);

}

.comment-like-btn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.comment-like-btn:active {
  transform: scale(0.85) !important;
  transition-duration: 0.08s !important;
}
.comment-like-btn.liked {
  color: var(--srb-strong-color, #ec4899) !important;
}
.comment-like-btn.liked i,
.comment-like-btn.liked svg {
  color: var(--srb-strong-color, #ec4899) !important;
}

@keyframes comment-like-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.comment-like-btn.just-liked {
  animation: comment-like-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.comment-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 2;
}



.comment-reply-indicator {
  display: none;
  padding: 8px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--theme-solid, #e7fbb0) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--theme-solid, #e7fbb0) 15%, transparent);
  font-size: 13px;
  color: var(--text-secondary);
  justify-content: space-between;
  align-items: center;
}
.comment-reply-indicator.show {
  display: flex;
}

.comment-char-count {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 4px;
}
.comment-char-count.warn {
  color: var(--orange);
}
.comment-char-count.over {
  color: var(--red);
}



/* 评论图片上传 */
.comment-img-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.comment-img-upload-btn:hover {
  color: var(--accent);

}
.comment-img-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.comment-img-chip {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.comment-img-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-img-chip button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comment-content img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 10px;
  margin: 8px 0;
  cursor: zoom-in;
}


/* === 评论区紧凑化：旧 !important 定义已删除，统一到末尾 X 风格单一真源 === */

/* ============================================================
   SRBILL COMMENT BOX SINGLE SOURCE V2 (唯一真源·无描边)
   ============================================================ */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
#comment-input-container {
  margin-bottom: 24px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.inline-reply-box-wrap {
  flex: 1;
  min-width: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
[data-theme="dark"] .inline-reply-box-wrap {
  background: rgba(255,255,255,0.04);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.inline-reply-box-wrap:focus-within {
  border-color: var(--glass-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
[data-theme="dark"] .inline-reply-box-wrap:focus-within {
  box-shadow: 0 4px 18px rgba(0,0,0,0.32);
}
.inline-reply-box-wrap textarea,
#comment-input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  resize: none;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  padding: 0 !important;
}
#comment-input-container .inline-reply-box-wrap textarea,
#comment-input-container #comment-input {
  min-height: 72px;
  max-height: 160px;
}
/* 占位符颜色单一真源：浏览器默认 placeholder 在深色画布上过淡，
   看起来像“没渲染完”。这里显式等于弱化色并关掉默认再降亮。 */
#comment-input::placeholder,
.inline-reply-box-wrap textarea::placeholder,
.inline-reply-container textarea::placeholder {
  color: var(--comment-fg-muted);
  opacity: 1;
}
.inline-reply-container textarea {
  min-height: 24px;
  max-height: 120px;
}
.inline-reply-container {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  animation: slideDown 0.15s ease-out;
}
.inline-reply-tools {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px;
}
.inline-reply-tools-left {
  display: flex;
  gap: 8px;
  margin-right: auto;
}
.inline-reply-tools-right {
  display: flex;
  gap: 8px;
}
/* === END SRBILL COMMENT BOX SINGLE SOURCE V2 === */

/* ===== X (Twitter) style thread layout ===== */

/* 穿针回复：头像列作为 gutter，子回复与父级同列 */
.comment-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  position:relative;
}
.comment-gutter{
  display:flex;
  flex-direction:column;
  align-items:center;
  align-self:stretch;
  flex-shrink:0;
  /* 与头像同宽，改头像必须同步改这里，否则正文列会错位 */
  width:44px;
}
.comment-body{
  flex:1;
  min-width:0;
  padding-bottom:2px;
}

/* 头像 44px。注意本文件 :27/:34/:416 还有三组历史重复定义，
   生效的是这一组（最靠后）。改尺寸必须同步下方 .comment-gutter。 */
.comment-avatar,
.comment-avatar-placeholder{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  font-size:16px;
  font-weight:800;
}

/* 竖线：从头像下沿直穿到下一条头像 */
.comment-thread-line{
  flex:1 1 auto;
  width:2px;
  min-height:0;
  margin-top:4px;
  border-radius:2px;
  background:var(--glass-border,rgba(255,255,255,.16));
  opacity:0;
}
.comment-thread-item:has(> .comment-thread-children) > .comment-row > .comment-gutter > .comment-thread-line{
  opacity:1;
}

/* 子级完全同列，不缩进、不加边线 */
.comment-thread-children{
  margin:0;
  padding:0;
  border-left:none;
  background:none;
}
.comment-thread-children > .comment-thread-item{
  padding:0;
  border-bottom:none;
  background:none;
}

/* 紧凑信息密度 */
.comment-thread-item{
  padding:0;
  background:none;
}
.comment-thread-item > .comment-row{
  padding:10px 0 2px;
}
.comment-header{
  gap:6px;
  margin-bottom:0;
  line-height:1.35;
  align-items:center;
}
/* ID、正文、操作按钮同为 13px：三者视觉权重一致，只靠字重和颜色区分层级 */
.comment-username{
  font-size:15.5px;
  font-weight:700;
  color:var(--comment-fg);
}
.comment-time{
  font-size:15.5px;
  font-weight:400;
  margin-left:0;
  /* 不再叠 opacity：颜色本身已经是弱化色，二次降亮会糊。 */
  opacity:1;
  color:var(--comment-fg-muted);
}

/* 正文：字号跟上截图，与操作行贴近 */
/* ID → 正文 → 操作行三段间距一致（均为 3px），靠 margin 显式对齐，
   不依赖 line-height 的半行距，否则每段看起来都不一样宽。 */
.comment-content{
  margin:3px 0 0;
  font-size:15.5px;
  line-height:1.45;
}
/* style.css 里有 .markdown-body p{margin-bottom:1.4em !important} 与
   line-height:1.7 !important（评论正文同时带 markdown-body 类），
   不带 !important 的规则完全压不住，正文下方会多出约 1.4em 死高
   ——这就是"操作栏离正文一大片"的真正来源。
   这里用 .comment-content.markdown-body 提升特异度并同级 !important 收口。 */
html[data-theme="light"] .comment-content.markdown-body{ color:#33322f !important; }
.comment-content.markdown-body{
  font-size:15.5px !important;
  line-height:1.45 !important;
  letter-spacing:0 !important;
}
.comment-content.markdown-body > p,
.comment-content > p{
  margin:0 !important;
}
.comment-content.markdown-body > p + p,
.comment-content > p + p{
  margin-top:6px !important;
}
/* 正文最后一个块级元素（列表/引用/代码块等）一律不再贴下外边距 */
.comment-content.markdown-body > *:last-child,
.comment-content > *:last-child{
  margin-bottom:0 !important;
}
.comment-content.markdown-body > li,
.comment-content.markdown-body > ul,
.comment-content.markdown-body > ol{
  margin-bottom:0 !important;
}

/* 操作行真源：时间与三个操作统一在同一行，四列等距分布。
   时间占第一列，点赞/回复/删除各占一个等宽列；按钮内容在自己的列内居中，
   不再用固定按钮槽位叠加 gap，避免看起来挤在中间或整体偏移。 */
.comment-actions{
  display:grid;
  grid-template-columns:minmax(120px,1.5fr) repeat(2,minmax(44px,1fr));
  align-items:center;
  width:100%;
  max-width:none;
  margin:3px 0 0;
  padding:0;
  box-sizing:border-box;
}
.comment-actions.has-delete{
  grid-template-columns:minmax(120px,1.5fr) repeat(3,minmax(44px,1fr));
}
.comment-time{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13.5px;
  font-weight:400;
  margin:0;
  opacity:1;
  color:var(--comment-fg-muted);
}
.comment-action-btn{
  width:100%;
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 0;
  font-size:15.5px;
  font-weight:400;
  gap:8px;
  background:none;
  border:none;
  line-height:1.45;
  height:auto;
}
.comment-action-btn .icon-xs{
  width:18px;
  height:18px;
  flex-shrink:0;
  stroke-width:1.9;
  /* 圆形底色只包住 icon，hover 时提示可点，不铺满整个按钮 */
  border-radius:50%;
  padding:5px;
  margin:-5px;
  box-sizing:content-box;
  transition:background .15s ease;
}

@media (max-width:768px){
  .comment-row{gap:10px;}
  #comments-list { margin-left:-6px; }
  .comment-row { gap:9px; }
  .comment-avatar,
  .comment-avatar-placeholder{width:46px;height:46px;font-size:16px;}
  .comment-gutter{width:46px;}
  /* 手机端保持时间+操作四列等距，只缩小按钮图标。 */
  .comment-actions,
  .comment-actions.has-delete{
    grid-template-columns:minmax(112px,1.5fr) repeat(2,minmax(42px,1fr));
  }
  .comment-actions.has-delete{
    grid-template-columns:minmax(112px,1.5fr) repeat(3,minmax(42px,1fr));
  }
  .comment-action-btn{padding:4px 0;}
  .comment-action-btn .icon-xs{width:17px;height:17px;}
  .comment-thread-children{margin:0;padding:0;}
}

/* ===== 评论区前景色单一真源 =====
   ID 与正文共用 --comment-fg：二者必须同色，各自写死 hex 会再次跑偏，
   所以这里只留一个变量，改色只改这三行。
   基调是接近纯白的冷白，让正文在深色画布上足够实、足够好读；
   正文比 ID 更白是刻意的层级差，不是漏改。 */
:root{
  --comment-fg:#fbfbfd;
  --comment-fg-muted:#a2a2a6;
  --comment-fg-action:#a2a2a6;
}
html[data-theme="light"]{
  --comment-fg:#2b2a28;
  --comment-fg-muted:#7c7c80;
  --comment-fg-action:#7c7c80;
}

/* ===== 评论区列表分隔线通栏（与文档区块分隔线同一套做法）=====
   顶部区块线由 style.css 的文档区块真源负责；这里只管列表内部的两条：
   排序栏下边线、每条一级评论的下边线。
   负外边距抵消 .doc-content 的左右内边距 → 线贴到屏幕边缘；
   等量补回内边距 → 头像和正文位置不变。
   只对一级评论生效：楼中楼（.comment-thread-children 内）本来就没有下边线。 */
.comment-sort-bar,
#comments-list > .comment-thread-item{
  margin-left:calc(-1 * var(--doc-gutter-left,0px));
  margin-right:calc(-1 * var(--doc-gutter-right,0px));
  padding-left:var(--doc-gutter-left,0px);
  padding-right:var(--doc-gutter-right,0px);
}

/* ---- styles/_english-fonts.css ---- */
@font-face{font-family:"Manrope";src:url("/static/fonts/english/manrope-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/static/fonts/english/manrope-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/static/fonts/english/source-sans-3-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/static/fonts/english/source-sans-3-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/static/fonts/english/space-grotesk-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("/static/fonts/english/space-grotesk-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/static/fonts/english/newsreader-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/static/fonts/english/newsreader-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("/static/fonts/english/libre-baskerville-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("/static/fonts/english/libre-baskerville-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/static/fonts/english/source-serif-4-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/static/fonts/english/source-serif-4-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Crimson Pro";src:url("/static/fonts/english/crimson-pro-variable.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{--srb-en-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial;--srb-cn-font:"PingFang SC"}
html[data-en-font="default"],html[data-aichat-en-font="default"],html[data-en-font="system-sans"],html[data-aichat-en-font="system-sans"]{--srb-en-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial}
html[data-en-font="sf-rounded"],html[data-aichat-en-font="sf-rounded"]{--srb-en-font:"SF Pro Rounded",ui-rounded}
html[data-en-font="quicksand"],html[data-aichat-en-font="quicksand"]{--srb-en-font:"Quicksand"}
html[data-en-font="manrope"],html[data-aichat-en-font="manrope"]{--srb-en-font:"Manrope"}
html[data-en-font="source-sans"],html[data-aichat-en-font="source-sans"]{--srb-en-font:"Source Sans 3"}
html[data-en-font="space-grotesk"],html[data-aichat-en-font="space-grotesk"]{--srb-en-font:"Space Grotesk"}
html[data-en-font="serif"],html[data-aichat-en-font="serif"]{--srb-en-font:"Charter","Georgia","Cambria","Times New Roman"}
html[data-en-font="georgia"],html[data-aichat-en-font="georgia"]{--srb-en-font:"Georgia","Times New Roman"}
html[data-en-font="newsreader"],html[data-aichat-en-font="newsreader"]{--srb-en-font:"Newsreader"}
html[data-en-font="libre-baskerville"],html[data-aichat-en-font="libre-baskerville"]{--srb-en-font:"Libre Baskerville"}
html[data-en-font="source-serif"],html[data-aichat-en-font="source-serif"]{--srb-en-font:"Source Serif 4"}
html[data-en-font="crimson-pro"],html[data-aichat-en-font="crimson-pro"]{--srb-en-font:"Crimson Pro"}
html[data-en-font="tinos"],html[data-aichat-en-font="tinos"]{--srb-en-font:"Tinos","Times New Roman"}
html[data-en-font="mono"],html[data-aichat-en-font="mono"]{--srb-en-font:"SF Mono",Menlo,Consolas,monospace}
html[data-en-font="fwanthserif"],html[data-aichat-en-font="fwanthserif"]{--srb-en-font:"FWAnthSerifMStd","Georgia","Charter",serif}
html[data-cn-font="default"],html[data-aichat-cn-font="default"]{--srb-cn-font:"PingFang SC","Microsoft YaHei",sans-serif}
html[data-cn-font="lxgw"],html[data-aichat-cn-font="lxgw"]{--srb-cn-font:"LXGW WenKai","PingFang SC","Microsoft YaHei",sans-serif}
html[data-cn-font="anthropic"],html[data-aichat-cn-font="anthropic"],html[data-cn-font="fwanthserifmstd"],html[data-aichat-cn-font="fwanthserifmstd"]{--srb-cn-font:"FWAnthSerifMStd","FZFW","Noto Serif CJK SC",serif}

:root{
  /* Selecting a typeface must not change paragraph geometry. */
  --srb-prose-line:1.68;
  --srb-prose-track:0;
  --srb-ui-track:0;
  --srb-prose-weight:400;
  --srb-strong-weight:700;
}

html[data-en-font] body,
html[data-cn-font] body,
html[data-aichat-en-font] body,
html[data-aichat-cn-font] body,
html[data-en-font] :where(.navbar,.nav-link,.nav-brand,.hero-title,.hero-desc,.btn,button,input,textarea,select),
html[data-cn-font] :where(.navbar,.nav-link,.nav-brand,.hero-title,.hero-desc,.btn,button,input,textarea,select),
html[data-aichat-en-font] :where(.navbar,.chat-sidebar,.conv-list,.conv-item,.chat-main,.chat-input-area,button,input,textarea,select),
html[data-aichat-cn-font] :where(.navbar,.chat-sidebar,.conv-list,.conv-item,.chat-main,.chat-input-area,button,input,textarea,select){
  font-family:var(--srb-en-font,-apple-system),var(--srb-cn-font,"PingFang SC"),-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif!important;
}

html[data-en-font] :where(.markdown-body,.doc-content .markdown-body),
html[data-cn-font] :where(.markdown-body,.doc-content .markdown-body),
html[data-en-font] :where(.markdown-body,.doc-content .markdown-body) :where(p,li,td,th,blockquote,h1,h2,h3,h4,h5,h6,strong,em,a),
html[data-cn-font] :where(.markdown-body,.doc-content .markdown-body) :where(p,li,td,th,blockquote,h1,h2,h3,h4,h5,h6,strong,em,a),
html[data-aichat-en-font] :where(.message,.msg-bubble,.msg-bubble.markdown-body,.stream-md-live,.stream-md-static,.stream-block),
html[data-aichat-cn-font] :where(.message,.msg-bubble,.msg-bubble.markdown-body,.stream-md-live,.stream-md-static,.stream-block),
html[data-aichat-en-font] :where(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :where(p,li,td,th,blockquote,h1,h2,h3,h4,h5,h6,strong,em,a),
html[data-aichat-cn-font] :where(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :where(p,li,td,th,blockquote,h1,h2,h3,h4,h5,h6,strong,em,a),
html[data-aichat-en-font] :where(.stream-md-live,.stream-md-static,.stream-block)>span,
html[data-aichat-cn-font] :where(.stream-md-live,.stream-md-static,.stream-block)>span,
html[data-aichat-en-font] :where(.msg-meta,.message-status,.thinking-text),
html[data-aichat-cn-font] :where(.msg-meta,.message-status,.thinking-text){
  font-family:var(--srb-en-font,-apple-system),var(--srb-cn-font,"PingFang SC"),-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif!important;
}

html[data-en-font] :where(.markdown-body,.doc-content .markdown-body) :where(p,li,td,th,blockquote),
html[data-cn-font] :where(.markdown-body,.doc-content .markdown-body) :where(p,li,td,th,blockquote),
html[data-aichat-en-font] :where(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :where(p,li,td,th,blockquote),
html[data-aichat-cn-font] :where(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :where(p,li,td,th,blockquote){
  line-height:var(--srb-prose-line,1.68)!important;
  letter-spacing:var(--srb-prose-track,0)!important;
  font-weight:var(--srb-prose-weight,400)!important;
  font-kerning:normal!important;
  font-optical-sizing:auto!important;
  font-feature-settings:"kern" 1,"liga" 1,"clig" 1!important;
  text-rendering:optimizeLegibility;
}
html[data-en-font] :where(.markdown-body,.doc-content .markdown-body) :where(strong,b),
html[data-cn-font] :where(.markdown-body,.doc-content .markdown-body) :where(strong,b),
html[data-aichat-en-font] :where(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :where(strong,b),
html[data-aichat-cn-font] :where(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :where(strong,b),
html[data-en-font] body :is(.markdown-body,.doc-content .markdown-body) :is(strong,b),
html[data-cn-font] body :is(.markdown-body,.doc-content .markdown-body) :is(strong,b),
html[data-aichat-en-font] body :is(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :is(strong,b),
html[data-aichat-cn-font] body :is(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :is(strong,b){font-weight:var(--srb-strong-weight,700)!important;font-synthesis:none!important}
html[data-en-font] :where(.navbar,.nav-link,.btn,button,input,textarea,select),
html[data-aichat-en-font] :where(.navbar,.conv-item,.btn,button,input,textarea,select){letter-spacing:var(--srb-ui-track,-.01em)!important;font-weight:600}
html[data-en-font] :where(.markdown-body,.doc-content .markdown-body) :where(h1,h2,h3,h4,h5,h6),
html[data-aichat-en-font] :where(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :where(h1,h2,h3,h4,h5,h6){letter-spacing:-.025em!important;line-height:1.2!important;font-weight:var(--srb-strong-weight,700)!important}

html[data-en-font] :where(pre,code,kbd,samp,.hljs),
html[data-cn-font] :where(pre,code,kbd,samp,.hljs),
html[data-aichat-en-font] :where(pre,code,kbd,samp,.hljs),
html[data-aichat-cn-font] :where(pre,code,kbd,samp,.hljs){
  font-family:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace!important;
}

/* CN-first AICHAT rule
   同上：显式选择中文字体时让中文字体优先解析 CJK。 */
html[data-aichat-cn-font]:not([data-aichat-cn-font="default"]) :is(.message,.msg-bubble,.msg-bubble.markdown-body,.stream-md-live,.stream-md-static,.stream-block),
html[data-aichat-cn-font]:not([data-aichat-cn-font="default"]) :is(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :is(p,li,td,th,blockquote,h1,h2,h3,h4,h5,h6,strong,em,a),
html[data-aichat-cn-font]:not([data-aichat-cn-font="default"]) :is(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) > span{
  font-family: var(--srb-cn-font), var(--srb-en-font,-apple-system), -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif !important;
}

/* FWAnthSerifMStd 排版（对齐 anthropic.com：正文 400 / 强调 600 / 无描边）
   强调字重通过单一真源变量 --srb-strong-weight 下发，
   避免与既有 strong 规则的 !important 优先级对打。 */
html[data-aichat-cn-font="fwanthserifmstd"]{
  --srb-strong-weight: 600;
  --srb-prose-weight: 400;
}
html[data-aichat-cn-font="fwanthserifmstd"] :is(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block),
html[data-aichat-cn-font="fwanthserifmstd"] :is(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :is(p,li,td,th,blockquote,em,a),
html[data-aichat-cn-font="fwanthserifmstd"] :is(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) > span{
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  -webkit-text-stroke: 0 !important;
}
html[data-aichat-cn-font="fwanthserifmstd"] :is(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :is(strong,b),
html[data-aichat-cn-font="fwanthserifmstd"] :is(.msg-bubble,.stream-md-live,.stream-md-static,.stream-block) :is(h1,h2,h3,h4,h5,h6){
  -webkit-text-stroke: 0 !important;
}

/* ---- styles/_home-topbar.css ---- */
/* Home top bar controls: transparent at rest, visible focus without framed chrome. */
body[data-page-kind="home"] #nav-search,
body[data-page-kind="home"] .theme-group,
body[data-page-kind="home"] #lang-switch-select,
body[data-page-kind="home"] #btn-site-theme,
body[data-page-kind="home"] #auth-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 语言下拉不是「图标按钮」，不能跟着顶栏一起变全透明：
   它是输入控件，按 DESIGN-SYSTEM「输入控件」规范走 填充 + 下缘线。
   /docs、/search 落的是非 home 页面，原先没有这条，四边描边原样露出来。 */
body:not([data-page-kind="home"]) #lang-switch-select {
  border: 0;
  border-bottom: 1px solid var(--field-rule);
  background: var(--field-fill);
  outline: none;
}
body:not([data-page-kind="home"]) #lang-switch-select:focus-visible {
  border-bottom-color: transparent;
  box-shadow: 0 0 0 2px var(--field-ring);
}

body[data-page-kind="home"] .theme-group .theme-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-page-kind="home"] #nav-search:hover,
body[data-page-kind="home"] #nav-search:focus-visible,
body[data-page-kind="home"] .theme-group:hover,
body[data-page-kind="home"] #lang-switch-select:hover,
body[data-page-kind="home"] #lang-switch-select:focus-visible,
body[data-page-kind="home"] #btn-site-theme:hover,
body[data-page-kind="home"] #btn-site-theme:focus-visible,
body[data-page-kind="home"] #auth-btn:hover,
body[data-page-kind="home"] #auth-btn:focus-visible {
  background: rgba(255,255,255,.08) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-page-kind="home"] .theme-group .theme-btn.active {
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

body[data-page-kind="home"] .theme-group .theme-btn:hover,
body[data-page-kind="home"] .theme-group .theme-btn:focus-visible {
  background: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

[data-theme="light"] body[data-page-kind="home"] #nav-search:hover,
[data-theme="light"] body[data-page-kind="home"] #nav-search:focus-visible,
[data-theme="light"] body[data-page-kind="home"] .theme-group:hover,
[data-theme="light"] body[data-page-kind="home"] #lang-switch-select:hover,
[data-theme="light"] body[data-page-kind="home"] #lang-switch-select:focus-visible,
[data-theme="light"] body[data-page-kind="home"] #btn-site-theme:hover,
[data-theme="light"] body[data-page-kind="home"] #btn-site-theme:focus-visible,
[data-theme="light"] body[data-page-kind="home"] #auth-btn:hover,
[data-theme="light"] body[data-page-kind="home"] #auth-btn:focus-visible {
  background: rgba(20,22,32,.07) !important;
}

@media (max-width: 900px) {
  body[data-page-kind="home"] #nav-search,
  body[data-page-kind="home"] .theme-group,
  body[data-page-kind="home"] #lang-switch-select,
  body[data-page-kind="home"] #btn-site-theme,
  body[data-page-kind="home"] #auth-btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

/* ---- styles/_lab-showcase.css ---- */
/* ==========================================================================
   实验室：展览 + 横向滑动（单一 owner）
   --------------------------------------------------------------------------
   这一屏由三段组成，全部从这里取样式，别处不再出现第二套：

     1. .lab-rail          横向展览轨道（scroll-snap，可滑动/可键盘）
     2. .app-card.lab-exhibit  单个展位（预览演示 + 文案）
     3. .lab-pill           Apple 同款毛玻璃胶囊（进度条 + 圆点 + 播放键）

   胶囊的模糊/底色/圆角全部走 static/style.css :root 里的 --pill-* 令牌，
   数值来自 apple.com/apple-homeview 的实测（见令牌处注释）。
   本文件不新增 !important：需要压过旧规则的场合靠「删掉旧 owner」解决。
   ========================================================================== */

/* ---------------------------------------------------------------- 轨道 */
/* Apple HomeView 的编排：整段是一个「长行程」，画幅在视口里钉住，
   竖向滚动驱动横向展位前进；行程走完，画幅连同胶囊一起被带走。
   之前用 padding 撑 sticky 的写法会在下面留一大片死白。 */
/* 分段照 Apple：标题在文档流里随页面滚走，只有画幅（gallery）被钉住。
   标题必须占真实高度：之前把标题和画幅都绝对定位在 section 顶部，
   画幅一钉住就直接压在标题上（截图里 "Get the highlights." 与卡片重叠）。
   section 的 padding-bottom 提供钉住后的滚动行程。 */
body[data-page-kind="home"] .apps-section {
  position: relative;
  /* 画幅 100svh + 标题，其余是钉住后的滚动行程（Apple 的 gallery 行程）。
     行程长度 = 250vh - 标题 - 100svh，约一屏多。 */
  height: 250vh;
  padding: 0;
}

/* 标题在钉住之前就滚出视口，不再和画幅一起被钉。 */
body[data-page-kind="home"] .apps-section .lab-head {
  position: relative;
  top: auto;
  /* 纸面分区自己已有 5vw 顶距，这里只补一点呼吸位，避免标题离上一屏太远。 */
  padding-top: clamp(8px, 1.2vw, 20px);
  padding-bottom: clamp(18px, 2.2vw, 32px);
  z-index: 2;
}

/* body 自己就是滚动容器（overflow: hidden auto），sticky 在里面没有行程，
   所以画幅的「钉住」由 JS 切 position: fixed 完成（.is-pinned）。
   未钉住时它就在文档流里，紧跟在标题后面。 */
.lab-stage {
  position: relative;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 贴顶而不是居中：画幅在文档流里时卡片紧跟标题；钉住后卡片顶边
     与 fixed 首帧一致，切换那一帧不会上下跳。 */
  justify-content: flex-start;
  gap: 18px;
  height: 100svh;
  /* 画幅下方给胶囊让位；上方不再需要给标题让位（标题已经在流里）。 */
  padding-top: clamp(12px, 2vw, 28px);
  padding-bottom: 116px;
}

/* 钉住时画幅要盖住标题：给它一层与纸面同色的底，
   否则滚到一半会看到标题从卡片上方露出来（Apple 里标题已经滚走）。 */
body[data-page-kind="home"] .lab-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper-canvas, #faf9f5);
  z-index: -1;
}

/* 钉住时从胶囊导航的下沿开始，画幅不再钻到顶栏下面。
   高度同步扣掉导航，保证「画幅 + 胶囊」仍是一屏，不会多出一条缝。 */
.apps-section .lab-stage.is-pinned {
  position: fixed;
  top: var(--nav-height, 64px);
  left: 0;
  right: 0;
  height: calc(100svh - var(--nav-height, 64px));
  z-index: 5;
}
/* 行程结束：停在 section 底部，随后随它一起滚走（位置与 fixed 末帧一致）。 */
.apps-section .lab-stage.is-parked {
  position: absolute;
  top: calc(100% - (100svh - var(--nav-height, 64px)));
  left: 0;
  right: 0;
  height: calc(100svh - var(--nav-height, 64px));
}

/* 纵向滚动的 sticky 画幅已有自己的编排，不能再叠旧的全站入场动画。 */
.lab-stage .apple-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.lab-stage .lab-viewport {
  width: 100%;
}

.lab-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-left: clamp(24px, 5.5vw, 90px);
  width: min(1280px, 100%);
  margin-inline: auto;
}

.lab-head .section-title,
.lab-head .section-desc {
  text-align: left;
}

.lab-head .section-title {
  margin-bottom: 4px;
}

.lab-head .section-desc {
  margin-bottom: 24px;
}

.lab-title {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.1;
}

.lab-title i {
  display: none;
}

.lab-highlights {
  max-width: none;
  font-family: "FWAnthSerifMStd", "FZFW", "Noto Serif CJK SC", serif;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 700;
  text-align: left;
  opacity: .94;
}

.lab-stage .lab-rail {
  flex: 0 0 auto;
  max-width: 100%;
}


@media (prefers-reduced-motion: reduce) {
  body[data-page-kind="home"] .apps-section {
    padding: 88px 0 72px;
  }
}

.lab-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  /* 横向滑动归用户：默认不吸附、不强制横向。只有用户自己开始横向拖动时
     JS 才加 .is-user-scrolling 临时打开吸附，松手后收回。 */
  scroll-snap-type: none;
  /* 必须 auto：CSS 的 smooth 会接管 JS 逐帧写入的 scrollLeft，
     把 Apple 的 easeInOutQuad 再套一层浏览器贝塞尔（实测 1s 变 1.8s）。 */
  scroll-behavior: auto;
  /* 左右各留一屏边距，让首尾展位也能滚到正中（Apple 的展台也是这个逻辑）。 */
  padding: 6px max(24px, calc((100% - 1080px) / 2)) 18px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* 竖向手势先交给页面；横向意图判定成立后由 JS 手动驱动 scrollLeft。
     默认 auto 会让浏览器在 8px 判定前就抢走横向，手机上表现为“强制横滑”。 */
  touch-action: pan-y;
}
.lab-rail::-webkit-scrollbar { display: none; }
.lab-rail.is-user-scrolling { scroll-snap-type: x proximity; }
.lab-rail.is-user-scrolling .lab-exhibit { scroll-snap-align: center; }

/* ---------------------------------------------------------------- 展位 */
body[data-page-kind="home"] .app-card.lab-exhibit {
  position: relative;
  flex: 0 0 auto;
  width: min(1360px, calc(100vw - 120px));
  scroll-snap-align: center;
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  box-shadow: none;
  transition: border-color .2s ease, transform .2s cubic-bezier(.32,.72,0,1);
}
body[data-page-kind="home"] .app-card.lab-exhibit:hover {
  transform: scale(.985);
  border-color: rgba(255,255,255,.16);
}
body[data-page-kind="home"] .app-card.lab-exhibit:focus-visible {
  outline: 2px solid rgba(255,255,255,.42);
  outline-offset: 3px;
}
/* 当前展位保持安静；进度和圆点已足够表达状态。 */
body[data-page-kind="home"] .app-card.lab-exhibit.is-active {
  border-color: rgba(255,255,255,.12);
}

/* ---------------------------------------------------------------- 预览屏 */
.lab-preview {
  position: relative;
  height: clamp(440px, 60vh, 640px);
  overflow: hidden;
  background: rgba(0,0,0,.20);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* 预览屏里的小 UI 统一用这套缩放：内容按 100% 宽排，窄展位自动等比缩。 */
.lab-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 34px 42px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255,255,255,.78);
}

/* 出场动画：非当前展位**保持可见的静态画面**（滑过去是「停住的截图」），
   只有当前展位重播一次级联出场。曾经把静止态写成 opacity:0，结果没轮到
   的展位就是一块空白 —— 看起来像坏了。

   2026-10-23 修：选择器原先是 `.lab-screen [data-lab-step]`，但 `.lab-screen`
   只在 `home-lab.js` 的兜底空屏里出现，真实展位的节点是 `.lab-ui` 的直接
   子元素 —— 于是这组动画从上线起就没匹配过任何元素。 */
.lab-exhibit.is-active [data-lab-step] {
  animation: lab-step-in .5s cubic-bezier(.32,.72,0,1) both;
  animation-delay: calc(var(--lab-i, 0) * .16s);
}
@keyframes lab-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- 通用零件 --- */
.lab-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lab-row i { width: 22px; height: 22px; }

.lab-media span { font-weight: 650; }
.lab-media em {
  margin-left: auto;
  font-style: normal;
  font-size: 12.5px;
  color: rgba(255,255,255,.56);
  white-space: nowrap;
}
.lab-bubble {
  max-width: 82%;
  padding: 11px 16px;
  border-radius: 18px;
  font-size: 15px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.05);
}
.lab-bubble.is-me {
  align-self: flex-end;
  background: rgba(231,251,176,.16);
  border-color: rgba(231,251,176,.26);
}
.lab-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.86);
  border: 0;
}
.lab-chip.is-quiet { background: rgba(255,255,255,.06); color: rgba(255,255,255,.68); }
/* 录音文件条：波形上方的元信息行 */
.lab-meta {
  font-size: 11.5px;
  letter-spacing: .2px;
  opacity: .68;
}
/* AI 回复里的三条要点 */
.lab-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 13px;
  font-size: 15px;
  opacity: .86;
}
.lab-list span { position: relative; }
.lab-list span::before {
  content: "";
  position: absolute;
  left: -12px;
  top: .52em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(231,251,176,.72);
}
.lab-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  vertical-align: -2px;
  background: currentColor;
  border-radius: 2px;
}
.lab-exhibit.is-active .lab-caret { animation: lab-caret 1s steps(2, start) infinite; }
@keyframes lab-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* --- 1. 转录助手：波形 + 逐行转写 + 导出 --- */
.lab-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 46px;
  padding: 0 2px;
}
.lab-wave i {
  flex: 1 1 auto;
  min-width: 2px;
  height: 100%;
  border-radius: 2px;
  background: rgba(255,255,255,.58);
  transform: scaleY(.22);
  transform-origin: 50% 100%;
}
.lab-exhibit.is-active .lab-wave i {
  animation: lab-wave 1.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--lab-i, 0) * -.07s);
}
@keyframes lab-wave {
  from { transform: scaleY(.22); }
  to   { transform: scaleY(1); }
}
.lab-transcript {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  align-items: center;
}
.lab-transcript b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(231,251,176,.78);
}
.lab-transcript span {
  display: block;
  height: auto;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1.5;
}
.lab-transcript span { height: auto; border-radius: 0; background: transparent; }
.lab-transcript span:nth-child(2) { width: auto; }
.lab-transcript span:nth-child(4) { width: auto; }
.lab-transcript span:nth-child(6) { width: auto; }
.lab-exhibit.is-active .lab-transcript span {
  color: rgba(255,255,255,.90);
}
@keyframes lab-stream {
  from { background-position: 120% 0; }
  to   { background-position: -60% 0; }
}

/* --- 2. 喵酱 AI：对话 + 流式出字 --- */
.lab-chat { display: flex; flex-direction: column; gap: 14px; }
.lab-typing { display: inline-flex; gap: 4px; align-items: center; }
.lab-typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.55);
}
.lab-exhibit.is-active .lab-typing i { animation: lab-dot 1.05s ease-in-out infinite; }
.lab-exhibit.is-active .lab-typing i:nth-child(2) { animation-delay: .16s; }
.lab-exhibit.is-active .lab-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes lab-dot {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* --- 3. AI 辩论：正反双方 + 述票 --- */
.lab-debate { display: flex; flex-direction: column; gap: 14px; }
.lab-side {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.lab-side-tag {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,.24);
}
.lab-side.is-against .lab-side-tag { background: rgba(255,255,255,.14); }
.lab-side-body { flex: 1 1 auto; min-width: 0; }
.lab-side-name { font-size: 11.5px; font-weight: 700; opacity: .78; margin-bottom: 3px; }
.lab-side-name { font-size: 12.5px; }
.lab-side-text { font-size: 15px; opacity: .92; line-height: 1.5; }
.lab-verdict {
  margin-top: 2px;
  padding: 7px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 0;
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 14px;
}

/* --- 4. AI 中转站：密钥 + 用量条 --- */
.lab-key {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .4px;
}
.lab-key span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-key { flex-wrap: nowrap; }
.lab-key em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: rgba(231,251,176,.88);
}
/* 用量柱：柱身比间距窄，靠底部基线收齐，读起来才像图表而不是色块。 */
.lab-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  height: 130px;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.lab-bars i {
  flex: 0 0 auto;
  width: 18px;
  height: var(--lab-h, 40%);
  border-radius: 3px;
  background: rgba(255,255,255,.58);
  /* 静止态必须是「已长好的柱」，否则没轮到这一格时看起来像几条坏掉的横线；
     只有当前展位从 .08 长起来。 */
  transform: scaleY(1);
  transform-origin: 50% 100%;
}
.lab-exhibit.is-active .lab-bars i {
  animation: lab-grow .7s cubic-bezier(.32,.72,0,1) forwards;
  animation-delay: calc(var(--lab-i, 0) * .1s + .2s);
}
@keyframes lab-grow {
  from { transform: scaleY(.08); }
  to   { transform: scaleY(1); }
}
.lab-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: .6;
}
/* 计时器展位：阶段标签跟着表盘居中，而不是被 flex 推到角落。 */
.lab-timer + .lab-row { justify-content: center; }

/* --- 5. 辩论计时器：大字计时 + 赛制阶段 --- */
.lab-timer {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lab-timer-clock {
  /* 数码管字体与站内辩论计时器同源（static/fonts/DS-DIGIT.TTF，见 debate.html 的 DSDigit）。 */
  font-family: "DSDigit", var(--font-mono);
  font-size: clamp(58px, 7vw, 82px);
  font-weight: 700;
  letter-spacing: .04em;
  color: #e7fbb0;
  font-variant-numeric: tabular-nums;
}
.lab-timer-phase { font-size: 13px; opacity: .82; }
.lab-timer-phase { font-size: 15px; }
.lab-timer-track {
  width: min(300px, 70%);
  margin-top: 4px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.lab-timer-track i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  transform-origin: 0 50%;
  transform: scaleX(1);
}
.lab-exhibit.is-active .lab-timer-track i { animation: lab-count 6s linear infinite; }
@keyframes lab-count {
  from { transform: scaleX(1); }
  to   { transform: scaleX(.1); }
}

/* ---------------------------------------------------------------- 展位文案 */
body[data-page-kind="home"] .app-card.lab-exhibit .app-info {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  /* 展位文案区必须有底：预览改成自适应高度后，卡片高度由内容撑开，
     没有底色的部分会露出纸面，看起来像卡片被切了一半。 */
  background: #fff;
}
body[data-page-kind="home"] .app-card.lab-exhibit .app-info > .app-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
}
body[data-page-kind="home"] .app-card.lab-exhibit .app-icon {
  align-self: center;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body[data-page-kind="home"] .app-card.lab-exhibit .app-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  --section-icon-bg: rgb(229,249,168);
  --section-icon-fg: #303817;
  --section-icon-shadow: rgba(229,249,168,.24);
  background: var(--section-icon-bg);
  color: var(--section-icon-fg);
  box-shadow: 0 8px 20px var(--section-icon-shadow);
}
body[data-page-kind="home"] .app-card.lab-exhibit .app-info h3 { font-size: 17px; }
body[data-page-kind="home"] .app-card.lab-exhibit .app-info h3 { font-size: 19px; }
body[data-page-kind="home"] .app-card.lab-exhibit .app-info p { font-size: 14.5px; }
body[data-page-kind="home"] .app-card.lab-exhibit .app-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  color: #fff;
  background: rgba(255,255,255,.12);
}
body[data-page-kind="home"] .app-card.lab-exhibit .lab-index {
  position: absolute;
  top: 20px;
  right: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,.62);
}

/* ---------------------------------------------------------------- 胶囊 */
/* 胶囊挂在钉住的画幅底部：画幅被钉住时它贴底，行程结束后随画幅一起滚走。
   这里不再用 padding 撑行程，避免下方出现空白。 */
.lab-viewport {
  position: relative;
  padding-bottom: 0;
}

.lab-pillbar {
  /* Apple 的两块是分开的：圆点胶囊 + 独立的播放键，间距 16px。
     --lab-pill-h 是当前断点的气泡高度：桌面 56，手机 44。 */
  --lab-pill-h: var(--pill-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

/* 整组在画幅钉住的瞬间出现（.is-lab-live 由 labPlayIntro 写入）。
   Apple 的 AAP 是 sticky 在视口底（bottom: 32px），不是画幅内部：
   所以进场后改成 fixed 贴视口底；画幅滚完再切回 absolute，随它一起走。 */
/* 胶囊挂在 .lab-stage 内部：画幅 fixed 时它跟着贴视口底，
   画幅回到文档流时它跟着卡片一起走（不再脱离父级浮在视口底部）。
   可见性跟「画幅是否在视口里」走，而不是「是否已钉住」——
   否则往上滑解除钉住时胶囊会突然消失，只剩一片空白。 */
.apps-section.is-lab-active .lab-pillbar,
.apps-section.is-lab-floating .lab-pillbar {
  opacity: 1;
  pointer-events: auto;
}
.apps-section.is-lab-live .lab-pillbar,
.apps-section.is-lab-live .lab-pill-surface,
.apps-section.is-lab-live .lab-pill-play .lab-pill-surface,
.apps-section.is-lab-live .lab-pill-dots,
.apps-section.is-lab-live .lab-pill-play-glyph { transform-origin: center; }
.apps-section.is-lab-live .lab-pillbar,
.apps-section.is-lab-live .lab-pill-surface,
.apps-section.is-lab-live .lab-pill-dots,
.apps-section.is-lab-live .lab-pill-play { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.apps-section.is-lab-parked .lab-pillbar {
  bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 20px));
}

/* 圆点气泡：透明容器 + 自己的背景层。背景层单独存在，才能在进场时
   从 40×36 的球体长成整块胶囊；直接给容器上色会把内容一起缩放。
   数值取自 apple.com/apple-homeview 的 .all-access-pass：
     height 56 · radius 28 · rgb(232 232 237)
     --alpha 0 → 1：底色 100% → 72%，模糊 14px → 7px（Apple 的公式） */
.lab-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: var(--lab-pill-h);
  width: auto;
  padding: 0 16px;
  border-radius: calc(var(--lab-pill-h) / 2);
  background: transparent;
  border: 0;
  overflow: visible;
}
.lab-pill-surface {
  --lab-w: 100%;
  --lab-h: var(--lab-pill-h);
  --lab-x: 0px;
  --lab-scale: 0;
  --lab-alpha: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--lab-w);
  height: var(--lab-h);
  border-radius: calc(var(--lab-pill-h) / 2);
  background-color: rgba(232, 232, 237, calc(1 - var(--lab-alpha) * .28));
  border: 0;
  box-shadow: none;
  opacity: 1;
  transform: translate(-50%, -50%) translateX(var(--lab-x)) scale(var(--lab-scale));
  -webkit-backdrop-filter: blur(calc(var(--pill-blur) * (2 - var(--lab-alpha))));
  backdrop-filter: blur(calc(var(--pill-blur) * (2 - var(--lab-alpha))));
  pointer-events: none;
  z-index: 0;
  transition: background-color .25s linear, -webkit-backdrop-filter .25s linear, backdrop-filter .25s linear;
}

.lab-pill-dots {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: calc((var(--lab-dot-count, 5) - 1) * 24px + 48px);
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity .1s ease-in;
}
.apps-section.is-lab-dots-in .lab-pill-dots { opacity: 1; }
.apps-section.is-lab-dots-in .lab-dot { --lab-dot-x: 0px; }

/* 直接落到最终态（reduced-motion / 手机 / 动画结束）时，背景层不再依赖
   JS 写入的 inline 变量，由这两个类提供和 Apple 静止态一致的尺寸。 */
.apps-section.is-lab-intro-done .lab-dot {
  --lab-dot-x: 0px;
  /* 长条「长出来」的进度（进场动画用），和下面的播放进度是两回事。 */
  --lab-dot-grow: 1;
}
.apps-section.is-lab-intro-done .lab-pill-surface {
  --lab-w: 100%;
  --lab-h: var(--lab-pill-h);
  --lab-scale: 1;
  --lab-alpha: 1;
}
.apps-section.is-lab-intro-done .lab-pill-play .lab-pill-surface {
  --lab-play-w: var(--lab-pill-h);
  --lab-play-h: var(--lab-pill-h);
  --lab-play-scale: 1;
  --lab-play-alpha: 1;
}

/* Apple 的 dotnav：8px 圆点，间距 16px；当前项是 48×8 的圆角长条。
   轨道 rgba(0,0,0,.42)，进度 #29292a。圆点进场时从右侧 36px 处逐颗滑入。 */
.lab-dot {
  --lab-dot-x: 0px;
  /* 播放进度：0 → 1 由 JS 每帧写入（暂停时冻住）。 */
  --lab-dot-progress: 0;
  /* 长条成形：0 → 1 由进场弹簧写入。 */
  --lab-dot-grow: 1;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, .42);
  cursor: pointer;
  transform: translateX(var(--lab-dot-x, 0px));
  transition: background-color .12s linear, width .38s cubic-bezier(.32,.72,0,1), transform .38s cubic-bezier(.32,.72,0,1);
}
.lab-dot:hover { background: rgba(0, 0, 0, .54); }
.lab-dot.is-active {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(0, 0, 0, .42);
  width: calc(8px + (var(--lab-active-w, 48px) - 8px) * var(--lab-dot-grow));
  transform: none;
}
/* 填充 = 当前展位的停留进度（Apple 的 --autoplay-progress）。
   由 JS 的 rAF 计时器每帧写入，暂停 / 用户上手 / 切后台都冻在原地。 */
.lab-dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--lab-dot-progress, 0) * 100%);
  border-radius: 10px;
  background: #29292a;
}
.lab-dot:focus-visible,
.lab-pill-play:focus-visible {
  outline: 2px solid rgba(41, 41, 42, .72);
  outline-offset: 3px;
}

/* 播放/暂停键：与圆点气泡同材质的**胶囊**（两头纯圆，圆角 = 高度一半）。
   进场时它和圆点气泡一样从视口中心弹回原位：scale 0 → 1（540ms），
   宽度 80 → 56、高度 36 → 56（700ms），图标 940ms 才出现。 */
.lab-pill-play {
  position: relative;
  flex: 0 0 auto;
  width: var(--lab-pill-h);
  height: var(--lab-pill-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--pill-radius);
  border: 0;
  background: transparent;
  color: #1d1d1f;
  cursor: pointer;
  pointer-events: none;
  overflow: visible;
}
.lab-pill-play .lab-pill-surface {
  --lab-play-w: var(--lab-pill-h);
  --lab-play-h: var(--lab-pill-h);
  --lab-play-x: 0px;
  --lab-play-scale: 0;
  --lab-play-alpha: 1;
  width: var(--lab-play-w);
  height: var(--lab-play-h);
  transform: translate(-50%, -50%) translateX(var(--lab-play-x)) scale(var(--lab-play-scale));
  transition: background-color .25s linear, -webkit-backdrop-filter .25s linear, backdrop-filter .25s linear;
}
.apps-section.is-lab-live .lab-pill-play:hover .lab-pill-surface { background-color: rgba(223, 223, 227, calc(1 - var(--lab-play-alpha) * .28)); }
.lab-pill-play:active .lab-pill-surface { background-color: rgba(193, 193, 198, calc(1 - var(--lab-play-alpha) * .28)); }
.lab-pill-play-glyph {
  position: relative;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .1s ease-in, transform .2s ease-out;
}
.apps-section.is-lab-play-in .lab-pill-play-glyph { opacity: 1; transform: none; }
.apps-section.is-lab-play-in .lab-pill-play { pointer-events: auto; }
.lab-glyph-pause,
.lab-glyph-play { position: absolute; inset: 0; }
.lab-glyph-pause i {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
}
.lab-glyph-pause i:first-child { left: 5px; }
.lab-glyph-pause i:last-child { right: 5px; }
.lab-glyph-play {
  width: 0;
  height: 0;
  top: 3px;
  left: 6px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
}
.lab-pill-play[data-state="pause"] .lab-glyph-play { display: none; }
.lab-pill-play[data-state="play"] .lab-glyph-pause { display: none; }

/* 进场球：Apple 的 .all-access-pass__intro-element。
   30×80 的圆头球，锚在胶囊条的 **顶部**（Apple 是 top:0，不是 bottom:0），
   随整条一起从视口下方 180px 弹上来；落位后变成 56×56。
   border-radius 用胶囊半径（= 高度一半），不是 999px —— Apple 的球是
   28px 圆角，缩到 30 宽时两腰正好是半圆，看起来才像一颗球。 */
.lab-pill-intro {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 80px;
  border-radius: calc(var(--lab-pill-h) / 2);
  background-color: rgb(232, 232, 237);
  box-sizing: border-box;
  transform: translateX(calc(-50% - 15px)) scale(1.3);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  will-change: width, height, transform, opacity;
  transition: opacity .12s linear;
}
.apps-section.is-lab-intro-done .lab-pill-intro { display: none; }
.apps-section.is-lab-intro-running .lab-pill,
.apps-section.is-lab-intro-running .lab-pill-play { will-change: transform; }
.apps-section.is-lab-intro-running .lab-pill-surface,
.apps-section.is-lab-intro-running .lab-pill-play .lab-pill-surface,
.apps-section.is-lab-intro-running .lab-dot { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .lab-pillbar { transition: opacity .2s ease; }
  .lab-pill-dots, .lab-pill-play-glyph { transition: none; opacity: 1; transform: none; }
  .lab-pill-surface {
    --lab-scale: 1;
    --lab-alpha: 1;
    transition: none;
  }
  .lab-pill-play .lab-pill-surface {
    --lab-play-scale: 1;
    --lab-play-alpha: 1;
    transition: none;
  }
  .lab-pill-intro { display: none; }
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 900px) {
  /* 手机不钉屏：竖向滚动驱动横向展位在触屏上会和页面滚动打架。
     高度交给内容自己撑，胶囊回到文档流、跟在卡片下面。 */
  body[data-page-kind="home"] .apps-section {
    height: auto;
    padding-bottom: 24px;
  }
  /* 手机上导航是浮层，标题必须自己让开它 —— 但只能让**一份**。

     两处踩过的坑（2026-10-21 实测 390×844）：
       1. 早先只留 18px，标题「实验室」被胶囊整个盖住（截图只剩大标）；
       2. 改成 `--capsule-clearance` 之后又空太多：那个 token 含
          `--capsule-gutter`（额外的呼吸位），而且这里同时还有
          `scroll-margin-top: --capsule-occupied`。标题落点 = 胶囊底边
          62px + gutter 10px = 72px，比真实需要多 10px，看着像一段死白。
     让位的语义就是「别被盖住」，所以只用**胶囊真实底边**
     （`--capsule-occupied`：窄屏 62px / 桌面 72px），不再叠 gutter。
     实测各视口（390 / 768 / 769 / 800 / 900）：`--capsule-occupied` 与
     顶栏真实底边逐档相等，所以这一条不需要再分断点。

     2026-10-23：这份让位只能做**锚点落位**（scroll-margin），不能常驻
     padding —— 顶栏是浮层、不占文档流，常驻 62px 会在纸面开头多出一条
     死白（390×844 实测纸面顶到标题 = 32 + 62 = 94px）。落位已由
     `_paper-theme.css` 的 `scroll-margin-top` 负责，这里归零。 */
  body[data-page-kind="home"] .apps-section .lab-head {
    position: static;
    padding-top: 0;
    padding-bottom: 8px;
  }
  .lab-stage {
    position: static;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }
  .lab-pillbar {
    position: static;
    margin-top: 6px;
    bottom: auto;
  }
  .lab-rail { padding-bottom: 8px; }
  /* 胶囊在手机上回到文档流：轨道不再为它预留 76px，胶囊与展位间距 18px。 */
  .lab-rail { padding: 4px 20px 4px; gap: 16px; }
  .lab-pillbar { margin-top: 18px; }
  /* 手机胶囊贴视口底（Apple 移动端的 all-access-pass 是 sticky bottom:20px）。
     但本站 body 是滚动容器且高度等于内容，sticky 在里面没有行程 —— 实测滚到
     400px 胶囊仍停在文档位置。所以由 JS 切 .is-lab-floating，这里只负责 fixed。
     判定与开关都在 home-lab.js 的 mRectForPill()，本文件不猜滚动位置。 */
  .apps-section.is-lab-floating .lab-pillbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    margin-top: 0;
    z-index: 60;
  }
  /* 胶囊浮起时要盖住下方展位，给它和桌面同一层纸底，避免字从玻璃里透出来。 */
  .apps-section.is-lab-floating .lab-pill-surface,
  .apps-section.is-lab-floating .lab-pill-play .lab-pill-surface {
    background-color: rgba(250, 249, 245, calc(1 - var(--lab-alpha, 1) * .18));
  }
  /* 展位卡在手机上占满可用宽度，内部预览按容器缩放：
     之前固定 87vw + 预览内部 min-width 会把卡片撑出屏幕（截图右侧被切）。 */
  body[data-page-kind="home"] .app-card.lab-exhibit { width: calc(100vw - 40px); max-width: 620px; }
  /* 手机预览不再用固定 52vh：真实界面在窄屏会长高，固定高度会把
     「高级选项 / 提交」裁掉。卡片改成纵向 flex，预览按内容撑高；
     同一轨道里的展位由外层 flex 拉到等高，矮的展位由预览补足，
     不会出现「卡片被切一半」或「卡片底部一块空白」。 */
  body[data-page-kind="home"] .app-card.lab-exhibit { display: flex; flex-direction: column; }
  body[data-page-kind="home"] .app-card.lab-exhibit .lab-preview {
    display: flex;
    height: auto;
    min-height: 420px;
    overflow: hidden;
  }
  .lab-ui-split :is(.lab-ui-input, .lab-ui-field, .lab-ui-card) { min-width: 0; }
  .lab-ui :is(.lab-ui-cta, .lab-ui-side-item) { padding: 7px 8px; font-size: 11.5px; }
  .lab-screen { padding: 16px 14px; }
  .lab-highlights { font-size: clamp(30px, 8.6vw, 44px); }
  .lab-screen { padding: 22px 24px; font-size: 13px; gap: 12px; }
  .lab-transcript span { font-size: 13px; }
  .lab-bubble { font-size: 13px; padding: 9px 13px; }
  .lab-list { font-size: 13px; }
  .lab-side-text { font-size: 13px; }
  .lab-key { font-size: 12.5px; padding: 9px 13px; }
  .lab-bar-labels { font-size: 11px; }
  .lab-timer-clock { font-size: clamp(42px, 9vw, 56px); }
  .lab-timer-phase { font-size: 13px; }
  .lab-row i { width: 18px; height: 18px; }
  /* 手机 390px：图标 46 + 文案 + 进入按钮 挤在一行时，描述会被压到
     「语音转录 · AI 整理 ·」换行、把后半句甩到下一行，看着像断句错误。
     这里收窄间距、让文案列可伸缩并允许两行均衡换行；按钮只留箭头，
     不再占「进入」两个字的宽度。 */
  body[data-page-kind="home"] .app-card.lab-exhibit .app-info {
    padding: 14px 16px 16px;
    gap: 12px;
  }
  body[data-page-kind="home"] .app-card.lab-exhibit .app-icon { width: 42px; height: 42px; border-radius: 13px; }
  body[data-page-kind="home"] .app-card.lab-exhibit .app-info > .app-copy { min-width: 0; flex: 1 1 auto; }
  body[data-page-kind="home"] .app-card.lab-exhibit .app-info h3 { font-size: 16px; }
  body[data-page-kind="home"] .app-card.lab-exhibit .app-info p {
    font-size: 13px;
    line-height: 1.35;
    text-wrap: pretty;
  }
  body[data-page-kind="home"] .app-card.lab-exhibit .app-go {
    padding: 8px;
    gap: 0;
    width: 32px;
    height: 32px;
    justify-content: center;
    font-size: 0;
  }
  body[data-page-kind="home"] .app-card.lab-exhibit .app-go i { width: 15px; height: 15px; }
  .lab-highlights { font-size: clamp(34px, 10vw, 58px); }
  .lab-title { font-size: clamp(22px, 5.5vw, 30px); }
  .lab-head .section-desc { margin-bottom: 18px; }
  .lab-head { padding-left: 20px; padding-right: 20px; }
  .lab-pillbar { --lab-pill-h: var(--pill-height-sm); }
  .lab-pill {
    padding: 0 12px;
    gap: 0;
  }
  .lab-pill-dots { gap: 8px; }
  .lab-dot.is-active { --lab-active-w: 32px; }
  .lab-pill-dots { min-width: calc((var(--lab-dot-count, 5) - 1) * 16px + 32px); }
  .lab-pill-play { padding: 0; }
  .lab-pill-play-glyph { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-rail { scroll-behavior: auto; }
  [data-lab-step] { animation: none; }
  .lab-exhibit.is-active .lab-preview * { animation: none; }
  .lab-dot.is-active::after { width: 100%; }
}

/* ---- styles/_lab-ui.css ---- */
/* 展位内「真实界面」骨架 —— 从 _lab-showcase.css 拆出（2026-10-23）。
   原文件 1512 行越过 architecture_guard 的 1500 行阈值，按职责切开：
   本文件只负责展位里五个应用首屏的缩略 UI（左侧栏 / 主区 / 计时器 /
   7 阶段时间线 / 手机端重排），轮播、胶囊、轨道与动画仍留在
   _lab-showcase.css。两层必须按此顺序加载：骨架在前，响应式覆盖在后。
*/
/* ---------------------------------------------------------------- 展位内真实界面骨架
   每个展位照真实应用的首屏结构画：左侧栏 + 主区（转录 / AI Chat / AI 辩论 /
   中转站），计时器则是黑底大表盘。全部用站内令牌，不引第三方页面。 */
.lab-ui {
  position: absolute;
  inset: 0;
  display: flex;
  font-size: 13px;
  color: rgba(255,255,255,.84);
  background: rgba(18,16,30,.30);
}
.lab-ui-split > .lab-ui-side,
.lab-ui-chat > .lab-ui-side {
  flex: 0 0 22%;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 14px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.lab-ui-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lab-ui-brand i { width: 18px; height: 18px; color: #e7fbb0; }
.lab-ui-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 12px;
  font-weight: 700;
  color: #303817;
  background: #e7fbb0;
}
.lab-ui-cta i { width: 14px; height: 14px; }
.lab-ui-cta.is-bottom { margin-top: auto; }
.lab-ui-side-label { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.55); }
.lab-ui-side-item { padding: 8px 10px; border-radius: 10px; font-size: 12.5px; }
.lab-ui-side-item.is-current { background: rgba(255,255,255,.10); }
.lab-ui-side-note { font-size: 12px; color: rgba(255,255,255,.42); text-align: center; }
/* 转录助手左栏 #job-history-list 的真实空态：收件箱图标 + 两行说明，
   对应 agent-lab-v2.css 的 .drawer-empty-tip。 */
.lab-ui-empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 18px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  text-align: center;
}
.lab-ui-empty-tip i { width: 22px; height: 22px; color: rgba(255,255,255,.30); }
.lab-ui-empty-tip b { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.62); }
.lab-ui-empty-tip span { font-size: 11px; color: rgba(255,255,255,.38); }
.lab-ui-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 28px;
}
.lab-ui-main.is-chat { justify-content: flex-end; padding-bottom: 20px; }
.lab-ui-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08);
}
.lab-ui-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,.62); }
.lab-ui-label i { width: 14px; height: 14px; }
.lab-ui-field {
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.46);
  font-size: 13px;
}
.lab-ui-field.is-tall { min-height: 74px; line-height: 1.5; }
.lab-ui-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(0,0,0,.12);
  font-size: 12px;
  text-align: center;
}
.lab-ui-drop i { width: 22px; height: 22px; color: #e7fbb0; }
.lab-ui-drop em { font-style: normal; font-size: 11px; color: rgba(255,255,255,.44); }
.lab-ui-or { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.38); font-size: 11.5px; }
.lab-ui-or::before, .lab-ui-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.10); }
.lab-ui-bar {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  font-size: 12.5px;
  color: rgba(255,255,255,.62);
}
.lab-ui-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  font-weight: 700;
  color: rgba(255,255,255,.70);
}
.lab-ui-submit i { width: 15px; height: 15px; }
.lab-ui-hint { font-size: 11.5px; color: rgba(255,255,255,.44); text-align: center; }
.lab-ui-greet { display: flex; flex-direction: column; gap: 4px; margin-bottom: auto; padding-top: 8px; }
.lab-ui-greet b { font-size: 26px; font-weight: 800; color: #fff; }
.lab-ui-greet span { font-size: 15px; color: rgba(255,255,255,.56); }
.lab-ui-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.lab-ui-composer > i { width: 17px; height: 17px; color: rgba(255,255,255,.56); }
.lab-ui-composer > span { flex: 1; color: rgba(255,255,255,.44); }
.lab-ui-composer > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #e7fbb0;
}
.lab-ui-composer > b i { width: 17px; height: 17px; color: #303817; }
/* AI Chat 展位：照 ai-chat.html 的真实首屏。
   顶栏 + .user-info-bar + 单条 assistant 气泡 + 输入胶囊（回形针/画图/发送）。
   真站没有「晚上好，喵。」这句欢迎语，空会话只有一条气泡文案。 */
.lab-ui-chat.has-topbar > .lab-ui-main.is-chat {
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 14px;
}
/* 真站 AICHAT 的输入胶囊贴底：消息区吃掉剩余高度，输入区和额度行
   作为一条 dock 钉在主区底部，而不是紧跟最后一条消息。 */
.lab-ui-chat.has-topbar .lab-ui-thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lab-ui-chat.has-topbar .lab-ui-dock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.lab-ui-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lab-ui-topbar b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 750;
  color: #fff;
}
.lab-ui-topbar b i { width: 15px; height: 15px; color: #e7fbb0; }
.lab-ui-topbar-actions { display: inline-flex; align-items: center; gap: 8px; }
.lab-ui-topbar-actions em {
  font-style: normal;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  color: #303817;
  background: #e7fbb0;
}
.lab-ui-topbar-actions i { width: 13px; height: 13px; color: rgba(255,255,255,.45); }
/* 真站顶栏的模型选择器：玻璃胶囊 + 下拉箭头，不是只有箭头。 */
.lab-ui-model-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 120px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 10.5px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
}
.lab-ui-model-pill i { width: 11px; height: 11px; flex: 0 0 auto; color: rgba(255,255,255,.42); }
/* 额度提示是输入框下方的一行灰字，不是工具条。 */
.lab-ui-quota {
  font-size: 10.5px;
  color: rgba(255,255,255,.42);
  text-align: center;
}
.lab-msg { display: flex; align-items: flex-start; gap: 9px; }
.lab-msg-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 9px;
  background: rgba(231,251,176,.16);
}
.lab-msg-avatar i { width: 14px; height: 14px; color: #e7fbb0; }
.lab-msg-bubble {
  padding: 9px 12px;
  border-radius: 4px 13px 13px 13px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.085);
}
.lab-ui-composer > i + i { margin-left: -3px; }

.lab-ui-stage-head {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}
.lab-ui-stage-head b { font-size: 22px; font-weight: 800; color: #fff; }
.lab-ui-stage-head em {
  margin-left: auto;
  font-style: normal;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: #303817;
  background: #e7fbb0;
}
.lab-ui-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-ui-tabs span {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.56);
}
.lab-ui-tabs span.is-on { background: rgba(255,255,255,.16); color: #fff; }
/* 辩论展位的 7 阶段时间线（真站 #stage-timeline 的缩略）。
   用 7 等分 grid：在 390px 视口的窄展位里每列约 41–43px，标签 9.5px
   可以放下；换成左右 11px padding 的 pill 会换行或溢出。 */
.lab-ui-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding-top: 2px;
}
.lab-tl-node { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.lab-tl-node i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
}
.lab-tl-node.is-done i { background: #e7fbb0; box-shadow: 0 0 0 3px rgba(231,251,176,.14); }
.lab-tl-node.is-current i { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.lab-tl-node span {
  font-size: 9.5px;
  line-height: 1.3;
  color: rgba(255,255,255,.38);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.lab-tl-node.is-done span { color: rgba(255,255,255,.58); }
.lab-tl-node.is-current span { color: #fff; font-weight: 700; }
/* 真实的 <select> 在真站里是玻璃表面、38px 高、12px 圆角（ai-debate.css:302）。 */
.lab-ui-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
}
.lab-ui-select span { overflow: hidden; text-overflow: ellipsis; }
.lab-ui-select i { width: 13px; height: 13px; flex: 0 0 auto; color: rgba(255,255,255,.40); }
.lab-ui-fieldset { display: flex; flex-direction: column; gap: 5px; }
.lab-ui-fieldset > label { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.45); }
.lab-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.lab-chip-row .lab-chip { padding: 4px 9px; font-size: 10.5px; }
.lab-ui-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.lab-ui-empty b { font-size: 18px; color: #fff; }
.lab-ui-empty span { font-size: 12.5px; color: rgba(255,255,255,.48); max-width: 52%; }
.lab-ui-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lab-ui-two span { padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 12px; }
/* 辩论展位：真站 #setup-panel 是一个可滚动的长配置面板，底部固定「保存配置，继续」。
   缩略图必须保留这个结构（标题 + 步骤点、可滚动表单、底部主按钮），
   而不是把它压成几行摘要。 */
.lab-ui-side.is-setup { padding: 14px 12px 0; gap: 10px; }
.lab-ui-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lab-ui-side-head b { font-size: 13px; color: rgba(255,255,255,.88); }
.lab-db-steps { display: inline-flex; align-items: center; gap: 6px; }
.lab-db-steps em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  font-style: normal;
  font-size: 9.5px;
  color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.18);
}
.lab-db-steps em.is-on { background: #e7fbb0; border-color: #e7fbb0; color: #303817; font-weight: 700; }
.lab-ui-side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  /* 真站这里是可滚动面板；缩略图只露出首屏能看到的字段，不做假滚动条。 */
  overflow: hidden;
  mask-image: linear-gradient(#000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(#000 82%, transparent 100%);
}
.lab-ui-setup .lab-ui-field { padding: 8px 10px; font-size: 11.5px; }
.lab-ui-setup .lab-ui-field.is-tall { min-height: 52px; }
.lab-ui-setup .lab-ui-cta.is-bottom { margin: 0 -12px; border-radius: 0; }
.lab-ui-setup .lab-ui-main { justify-content: flex-start; padding-top: 24px; }
/* 辩论计时器展位：照 static/apps/debate.html 的真实首屏。
   上方两列持方大框（框内 = 持方，框下小字 = 队伍名）；「自由辩论」
   走双数码管（真站没有进度条）；底部是圆形玻璃 dock。
   2026-10-23 前这里是「正方 · 正方代表队」拼一行 + 单表盘 + 进度条 +
   三颗文字胶囊，与真站结构完全不同。 */
.lab-ui-timer {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 14px 16px 0;
  background: linear-gradient(180deg, #0d0b14 0%, #08070c 60%);
}
.lab-tm-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.lab-tm-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lab-tm-col.is-b { align-items: flex-end; }
.lab-tm-zone {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 750;
  color: #fff;
  text-align: center;
  background: rgba(255,255,255,.06);
}
.lab-tm-zone.is-a { box-shadow: inset 0 0 0 1px rgba(236,72,153,.22); }
.lab-tm-zone.is-b { box-shadow: inset 0 0 0 1px rgba(124,108,255,.22); }
.lab-tm-name {
  font-size: 10.5px;
  color: rgba(255,255,255,.42);
  padding: 0 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.lab-tm-stage {
  margin-top: auto;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
}
.lab-tm-dual {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(14px, 4vw, 40px);
  margin: 6px 0 auto;
}
.lab-tm-clock {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: clamp(44px, 6vw, 74px);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.30);
  transition: color .2s, transform .2s;
}
.lab-tm-clock.is-on { color: #fff; transform: scale(1.05); }
.lab-tm-dock {
  /* 定位基准是 .lab-ui（position:absolute; inset:0），不是 .lab-preview。
     这里用 margin auto + left/right 0，避开 transform 与 podium 动画冲突。 */
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  max-width: calc(100% - 20px);
}
.lab-tm-dock i {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(18px, 2.1vw, 24px);
  height: clamp(18px, 2.1vw, 24px);
  border-radius: 50%;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.05);
}
.lab-tm-dock i svg, .lab-tm-dock i { position: relative; }
.lab-tm-dock em {
  flex: 0 0 auto;
  width: 1px;
  height: 12px;
  margin: 0 2px;
  background: rgba(255,255,255,.12);
}
/* ---------------------------------------------------------------- 手机展位布局
   必须放在「展位内真实界面骨架」之后：那里的 `.lab-ui-split > .lab-ui-side`
   与本段同特异度，靠顺序决定归属。桌面双栏在 350px 卡宽里会把侧栏压到
   150px、主栏 198px，「视频链接 / 音频文件」被挤成逐字换行；这里改成
   上下结构，侧栏收成顶部一条横向工具带，主区占满整宽。 */
@media (max-width: 900px) {
  /* 手机展位：桌面双栏在 350px 卡宽里会把侧栏压到 150px、主栏 198px，
     「视频链接 / 音频文件」被挤成逐字换行。这里改成上下结构：
     侧栏收成顶部一条横向工具带，主区占满整宽。 */
  /* 展位内部是真实界面，内容高度随字号/语言变化。手机上改成文档流布局，
     让预览高度跟着内容长，避免「提交按钮 / 额度提示」被裁在画幅外；
     同一轨道里的展位由 flex 拉伸成等高。 */
  .lab-ui {
    position: static;
    inset: auto;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 420px;
    height: auto;
  }
  .lab-ui-split,
  .lab-ui-chat { flex-direction: column; font-size: 12px; }
  .lab-ui-split > .lab-ui-side,
  .lab-ui-chat > .lab-ui-side {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
  }
  .lab-ui-split > .lab-ui-side .lab-ui-side-label,
  .lab-ui-split > .lab-ui-side .lab-ui-side-note,
  .lab-ui-split > .lab-ui-side .lab-ui-two,
  .lab-ui-split > .lab-ui-side .lab-ui-bar { display: none; }
  /* 手机真站的侧栏是抽屉，空态只属于展开后的抽屉；缩略展位里它会把
     品牌 + 新建任务挤成两行（390px 实测「转录整理助手」逐字断行）。
     手机上只保留品牌与主按钮，结构仍然对应真实 App。 */
  .lab-ui-split > .lab-ui-side .lab-ui-empty-tip { display: none; }
  .lab-ui-split > .lab-ui-side .lab-ui-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lab-ui-split > .lab-ui-side .lab-ui-field.is-tall { min-height: 0; }
  .lab-ui-split > .lab-ui-side .lab-ui-cta { flex: 0 0 auto; margin-left: auto; padding: 7px 12px; }
  .lab-ui-split > .lab-ui-side .lab-key { flex: 1 1 auto; min-width: 0; }
  .lab-ui-split > .lab-ui-side .lab-key span { overflow: hidden; text-overflow: ellipsis; }
  .lab-ui-chat > .lab-ui-side .lab-ui-side-label { display: none; }
  /* 辩论展位：侧栏在手机上收成一条工具带，5 个 fieldset 叠着放会横向溢出把
     预设下拉裁掉。只保留辩题输入，其余配置由真站抽屉承担。 */
  .lab-ui-split > .lab-ui-side.is-setup .lab-ui-fieldset { display: none; }
  .lab-ui-split > .lab-ui-side.is-setup .lab-ui-field.is-tall {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* 7 段中文标签在 350px 卡里每列只有约 43px，逐列折行会变成「赛前情 / 报检索」
     这种断词。手机上把 7 个节点排成一行圆点，标签由 data 属性给出横向短句，
     不删阶段、不改顺序。 */
  .lab-ui-timeline { gap: 2px; padding-top: 0; }
  .lab-tl-node span { display: none; }
  .lab-ui-timeline {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 2px;
  }
  .lab-ui-timeline::after {
    content: "赛前情报检索 › 立论与质询 › 攻防与自由辩 › 评委交叉质询 › 决胜与总结 › 观众提问 › 独立述票";
    grid-column: 1 / -1;
    margin-top: 4px;
    font-size: 8px;
    line-height: 1.3;
    color: rgba(255,255,255,.42);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lab-ui-chat > .lab-ui-side .lab-ui-side-item { white-space: nowrap; }
  .lab-ui-chat > .lab-ui-side .lab-ui-cta { margin: 0 0 0 auto; }
  .lab-ui-main { padding: 12px; gap: 8px; }
  /* 计时器展位：三列队名在 350px 里会互相压住，dock 的按钮也会被挤成竖排。 */
  .lab-ui-timer { min-height: 420px; height: 420px; padding: 12px 12px 0; }
  .lab-tm-teams { gap: 7px; }
  .lab-tm-zone { padding: 8px 10px; font-size: 12px; border-radius: 9px; }
  .lab-tm-name { font-size: 10px; }
  .lab-tm-clock { font-size: clamp(38px, 13vw, 54px); }
  .lab-tm-dual { gap: 14px; }
  .lab-tm-dock { gap: 2px; padding: 5px 6px; }
  .lab-tm-dock i { width: 19px; height: 19px; }
  .lab-tm-dock em { margin: 0 1px; }
  /* 手机预览 420px 高：转录展位的「高级选项 / 提交 / 额度」会被裁掉一半。
     这里把内边距和行距压一档，让真实结构完整落在画幅里，而不是删掉内容。 */
  .lab-ui-card { padding: 10px 12px; gap: 7px; }
  .lab-ui-drop { padding: 12px; }
  .lab-ui-field { padding: 8px 10px; }
  .lab-ui-bar { padding: 8px 10px; }
  .lab-ui-submit { padding: 9px; }
  .lab-ui-main { gap: 7px; }
}

/* ---------------------------------------------------------------- 纸面展位
   首页实验室固定在纸面分区（#faf9f5），所以这里的作用域是 `.paper-zone`，
   不是 `html[data-bold-color="paper"]`：Vice 皮肤下同样要能读。
   只换颜色，不改圆角 / 内边距 / 边框宽度 —— 展位的排版和真站保持一套。 */
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui {
  background: #faf9f5;
  color: #141413;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-side {
  background: #f0eee6;
  border-right-color: #e3ded1;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-brand i {
  color: #e11d48;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-cta {
  background: #141413;
  color: #faf9f5;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-side-label {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-empty-tip {
  background: rgba(20, 20, 19, .035);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-empty-tip i {
  color: rgba(20, 20, 19, .32);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-empty-tip b {
  color: rgba(20, 20, 19, .72);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-empty-tip span {
  color: rgba(20, 20, 19, .48);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-card {
  background: transparent;
  border-color: rgba(20, 20, 19, .12);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-label {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-field {
  background: transparent;
  border-color: rgba(20, 20, 19, .12);
  color: rgba(94, 93, 89, .72);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-drop {
  background: rgba(20, 20, 19, .025);
  border-color: rgba(20, 20, 19, .12);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-drop i {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-drop em {
  color: rgba(20, 20, 19, .46);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-or {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-or::before,
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-or::after {
  background: rgba(20, 20, 19, .12);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-bar {
  background: transparent;
  border-top-color: rgba(20, 20, 19, .12);
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-submit {
  background: #e6e3da;
  color: rgba(20, 20, 19, .46);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit[data-lab-app="agent-lab"] .lab-ui-hint {
  color: rgba(20, 20, 19, .48);
}

/* ---------------------------------------------------------------- 纸面通用层
   实验室永远铺在 `.paper-zone` 上（首页白纸分区），与用户选的是不是
   书纸皮肤无关。因此这里的作用域必须是「纸面分区」，不能写
   `html[data-bold-color="paper"]` —— 那样只有书纸皮肤才生效，Vice 皮肤下
   白字落在 #faf9f5 上只剩 3:1，整屏像蒙了一层灰雾。
   色值统一取令牌；强调只用 #ff2d55 一处（当前项 / CTA）。 */
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui {
  color: #141413;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-side {
  background: rgba(20, 20, 19, .035);
  border-right-color: rgba(20, 20, 19, .10);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-side-label,
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-side-note,
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-hint {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-card {
  background: rgba(20, 20, 19, .035);
  border-color: rgba(20, 20, 19, .10);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-field {
  background: rgba(20, 20, 19, .045);
  border-color: rgba(20, 20, 19, .10);
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-label {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-bar {
  background: rgba(20, 20, 19, .045);
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-or {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-or::before,
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-or::after {
  background: rgba(20, 20, 19, .12);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-topbar {
  border-bottom-color: rgba(20, 20, 19, .10);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-topbar b {
  color: #141413;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-topbar-actions i {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-userbar {
  background: rgba(20, 20, 19, .04);
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-userbar em {
  color: #141413;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-msg-bubble {
  background: rgba(20, 20, 19, .055);
  color: #141413;
}
/* 纸面下这两块原来沿用了 vice 的白字：额度行几乎看不见、保存按钮白字压梅粉。
   与真站在书纸皮肤下的取值一致：次级字用 --paper-ink-muted，主按钮白字。 */
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-quota {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-model-pill {
  border-color: rgba(20, 20, 19, .12);
  background: rgba(20, 20, 19, .04);
  color: #3d3d3a;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-model-pill i { color: #5e5d59; }
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-side-head b { color: #141413; }
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-db-steps em { border-color: rgba(20, 20, 19, .18); color: #5e5d59; }
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-db-steps em.is-on {
  background: #ff2d55;
  border-color: #ff2d55;
  color: #fff;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-setup .lab-ui-cta.is-bottom {
  background: #ff2d55;
  color: #fff;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-setup .lab-ui-select {
  border-color: rgba(20, 20, 19, .12);
  background: rgba(20, 20, 19, .04);
  color: #3d3d3a;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-setup .lab-ui-select i { color: #5e5d59; }
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-composer {
  background: #fff;
  border-color: rgba(20, 20, 19, .10);
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-composer > span,
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-composer > i {
  color: #5e5d59;
}
body[data-page-kind="home"] .paper-zone .lab-exhibit .lab-ui-submit {
  background: rgba(20, 20, 19, .09);
  color: #5e5d59;
}

/* ---- styles/_site-skins.css ---- */
/* The homepage always uses the Vice presentation. Content skin selection only
   affects AICHAT and documents. */
@property --srbill-hero-flow-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes srbill-hero-title-flow {
  from { --srbill-hero-flow-x: 0%; }
  to { --srbill-hero-flow-x: 200%; }
}

body[data-page-kind="home"] .hero-content {
  position: absolute !important;
  top: 46dvh !important;
  left: 50% !important;
  width: min(92vw, 760px) !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(20px, 3vh, 34px) !important;
  margin: 0 !important;
}

body[data-page-kind="home"] .hero-title,
body[data-page-kind="home"] .hero-support {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
}

body[data-page-kind="home"] .hero-title {
  transform: scale(var(--visual-heroTitleScale, 1)) !important;
  transform-origin: center !important;
}

body[data-page-kind="home"] .hero-title .gradient {
  background-image: linear-gradient(90deg, var(--visual-title1, #ff9fc9), var(--visual-title2, #ffd27f), var(--visual-title3, #e7fbb0), var(--visual-title2, #ffd27f), var(--visual-title1, #ff9fc9)) !important;
  background-size: 200% auto !important;
  background-position: var(--srbill-hero-flow-x, 0%) 50% !important;
  animation: srbill-hero-title-flow calc(var(--visual-titleSpeed, 6) * 1s) linear infinite !important;
  animation-play-state: var(--visual-titleFlow, running) !important;
}

body[data-page-kind="home"] .hero-support {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  transform: none !important;
}

@media (max-width: 768px) {
  body[data-page-kind="home"] .hero-content {
    top: 50dvh !important;
    gap: 20px !important;
  }
  body[data-page-kind="home"] .hero-support { gap: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page-kind="home"] .hero-title .gradient { animation: none !important; }
}

/* ---- styles/_paper-theme.css ---- */
/* ==========================================================================
   书纸主题 / 首页纸面分区（单一 owner）
   --------------------------------------------------------------------------
   数值逆向自 anthropic.com 的计算样式：

     --swatch--ivory-light   #faf9f5   页面底色
     --swatch--ivory-medium  #f0eee6   次级块
     --swatch--ivory-dark    #e8e6dc   分隔 / 内衬
     --swatch--slate-dark    #141413   正文与标题
     --swatch--slate-medium  #3d3d3a   次级正文
     --swatch--slate-light   #5e5d59   弱化文字
     --swatch--clay          #ff2d55   强调色（本站覆盖）
     --container--main       89.5rem   版心
     --radius--main          .5rem     卡片
     --radius--large         1rem      大卡
     字体：标题 Anthropic Sans，正文 Anthropic Serif，等宽 Anthropic Mono。

   本文件负责两件事：
     1. 首页「实验室」以下的 .paper-zone —— 底色 / 排版 / 入场展开
     2. 文档书纸皮肤 html[data-bold-color="paper"]
   AICHAT 的书纸皮肤在 _aichat-paper-skin.css（AICHAT 不加载本文件）。
   ========================================================================== */

@font-face {
  font-family: "Anthropic Sans";
  src: url("/static/fonts/anthropic/anthropic-sans.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Serif";
  src: url("/static/fonts/anthropic/anthropic-serif.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anthropic Mono";
  src: url("/static/fonts/anthropic/anthropic-mono.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper-canvas: #faf9f5;
  --paper-canvas-alt: #f0eee6;
  --paper-canvas-deep: #e8e6dc;
  --paper-ink: #141413;
  --paper-ink-soft: #3d3d3a;
  --paper-ink-muted: #5e5d59;
  --paper-rule: rgba(20, 20, 19, .1);
  /* 纸面强调色：与站内梅粉同族，比 Anthropic 的陶土色更贴合 Vice 的日落海霞。 */
  --paper-clay: #ff2d55;
  /* 默认链里不放 FWAnthSerifMStd：它 2.3MB/字重，放进首屏字体链会让
     浏览器立刻拉两个文件（中文字形命中它，而不是 Anthropic 字体）。
     滚到纸面分区前一屏时 home.js 加 .is-fwa 再切过去，见下方覆盖。 */
  --paper-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --paper-serif: Georgia, "PingFang SC", serif;
  --paper-mono: "Anthropic Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --paper-gutter: 64px;
  --paper-width: 1180px;
}


/* ------------------------------------------------------------ FWA 延迟启用
   .is-fwa 由 home.js 在纸面分区进入视口前一屏时加上（同时 document.fonts.load）。
   在此之前纸面用 Anthropic Sans/Serif + 系统中文字体，首屏就不会为 4.7MB
   的 CJK 字体付带宽；切换后字形与原来完全一致（未做任何子集化）。 */
body[data-page-kind="home"] .paper-zone.is-fwa {
  --paper-sans: "FWAnthSerifMStd", "Anthropic Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --paper-serif: "FWAnthSerifMStd", "Anthropic Serif", Georgia, "PingFang SC", serif;
}
/* ------------------------------------------------------------ 纸面分区 */
body[data-page-kind="home"] .paper-zone {
  position: relative;
  z-index: 10;
  margin-top: 0;
  padding-top: clamp(48px, 6vw, 96px);
  background: var(--paper-canvas);
  color: var(--paper-ink);
  font-family: var(--paper-sans);
  /* 入场：先用 clip-path 收成一张居中的大纸卡（见 home.js 的 --paper-inset），
     滚过约半屏后展开到满宽。clip 不改变布局，所以内容不会在展开时重排。 */
  clip-path: inset(0 var(--paper-inset, 0px) 0 var(--paper-inset, 0px) round var(--paper-radius, 0px) var(--paper-radius, 0px) 0 0);
  border-top: 1px solid var(--paper-rule);
}

body[data-page-kind="home"] .paper-zone :is(.section-title, .section-desc, .lab-title, .lab-highlights) {
  color: var(--paper-ink) !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}
/* 目录屏英文大标自己就是 .section-desc 的 <p>，父级已把它排除在通用规则外，
   所以这里不需要再叠高优先级标记 —— 直接给值即可。 */
/* .lab-highlights 的元素上同时挂着 section-desc（home.js 这么渲染的），
   所以这条会把大标的字重压成 400 —— 与下面 .lab-highlights 的 600 同特异性，
   又排在后面，正好把「更实」吃掉。这里显式排除它，让字重归大标自己管。 */
body[data-page-kind="home"] .paper-zone :is(.section-desc, .app-info p, .doc-info p, .continue-path, .doc-card-count):not(.lab-highlights):not(.catalog-highlights-en) {
  color: var(--paper-ink-muted) !important;
  text-shadow: none !important;
  font-weight: 400;
}

body[data-page-kind="home"] .paper-zone .paper-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: var(--paper-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-ink-muted);
}

/* ------------------------------------------------------------ 实验室 */
body[data-page-kind="home"] .paper-zone .apps-section {
  padding: clamp(40px, 5vw, 80px) 0 clamp(28px, 3vw, 48px);
}
body[data-page-kind="home"] .paper-zone .lab-stage .section-inner {
  width: 100%;
  max-width: none;
}
body[data-page-kind="home"] .paper-zone .lab-viewport {
  width: 100%;
}
body[data-page-kind="home"] .paper-zone .lab-head {
  width: min(var(--paper-width), 100% - var(--paper-gutter) * 2);
  margin-inline: auto;
  padding-left: 0;
}
/* 英文 eyebrow：Anthropic 的分区眉标（小号、字距放开、灰度）。
   实验室与知识目录各一条，给中文标题一个英文注脚。 */
body[data-page-kind="home"] .paper-zone .lab-head .paper-eyebrow {
  margin-bottom: 10px;
  color: var(--paper-ink-muted);
  letter-spacing: .16em;
}
body[data-page-kind="home"] .paper-zone .docs-catalog .paper-eyebrow {
  margin-bottom: 10px;
  letter-spacing: .16em;
}

/* 目录屏的英文大标：实验室「Get the highlights.」的下调一档版本。
   同一套三段式（mono 小标 → 中文标题 → FWA 英文大标），字号取实验室的
   ~62%，因为目录屏的主角是下面那张清单，不是这行字。
   字体用 var(--paper-serif)：`.paper-zone.is-fwa` 一生效就自动变
   FWAnthSerifMStd，不额外写切换分支。 */
body[data-page-kind="home"] .paper-zone .docs-catalog .catalog-highlights {
  margin: 0 0 clamp(22px, 2.6vw, 34px);
}
body[data-page-kind="home"] .paper-zone .docs-catalog .catalog-highlights-en {
  display: block;
  font-family: var(--paper-serif);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--paper-ink);
}
/* 文件夹的英文名：中文名下面的第二行，衬线斜体小字。
   中文仍走站内规范字体，只有这一行英文换 FWA —— 与站长「只给英文串换字体」
   的要求一致（中文标题的字体不动）。 */
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-alias {
  display: block;
  font-family: var(--paper-serif);
  font-size: 12.5px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--paper-ink-muted);
  margin-top: 1px;
}

/* 字阶：主标题收、英文大标放。英文大标是这一屏的视觉锚点，
   之前被纸面样式压到 21px，和标题几乎一样大，整屏没有重点。 */
body[data-page-kind="home"] .paper-zone .lab-title {
  font-family: var(--paper-sans);
  font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--paper-ink-muted);
  margin-bottom: 6px;
}
/* 大标默认用已加载的 Anthropic Serif（175KB）。FWAnthSerifMStd 是 2.3MB/字重，
   首屏直接引用会让它和 hero 图片抢带宽（弱网下右椰树因此迟迟不出现）。
   滚到实验室前一屏时由 home.js 调 document.fonts.load() 再切到 FWA，
   字形本身不做任何裁剪。 */
body[data-page-kind="home"] .paper-zone .lab-highlights {
  font-family: Georgia, "PingFang SC", serif;
  /* 站长两轮反馈：① 比之前小一个字号 ② 「更实」。
     Anthropic Serif 只有 400/600 两档；400 在小字号下发灰发虚，
     换成 600 就有实体感，再收一点字距让词群更紧。
     尺寸从 clamp(40,6vw,72) 收到 clamp(32,4.4vw,54)，上限降了 25%。 */
  font-size: clamp(32px, 4.4vw, 54px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--paper-ink);
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
  margin-bottom: clamp(24px, 2.8vw, 36px);
}
body[data-page-kind="home"] .paper-zone .lab-highlights.is-fwa {
  font-family: "FWAnthSerifMStd", "Anthropic Serif", Georgia, serif;
}

@media (max-width: 900px) {
  body[data-page-kind="home"] .paper-zone .lab-title {
    font-size: 22px;
  }
  body[data-page-kind="home"] .paper-zone .lab-highlights {
    font-size: clamp(28px, 8.4vw, 40px);
    line-height: 1.08;
    margin-bottom: 20px;
  }
  body[data-page-kind="home"] .paper-zone .docs-catalog .catalog-highlights-en {
    font-size: clamp(20px, 6.4vw, 28px);
  }
}

/* 轨道左右各留一个栏距；首尾展位能滑到正中。 */
body[data-page-kind="home"] .paper-zone .lab-rail {
  padding: 4px max(var(--paper-gutter), calc((100% - var(--paper-width)) / 2)) 84px;
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit {
  width: min(var(--paper-width), calc(100vw - var(--paper-gutter) * 2));
  /* style.css 的首页卡片所有者用了 !important；这条规则只负责纸面
     展位的白纸材质，必须胜过通用玻璃卡，所以这三个属性保留 !important。
     其余（圆角、投影、backdrop）通用规则已一致，不再重复声明。 */
  background: #fff !important;
  border: 1px solid var(--paper-rule) !important;
  border-radius: 20px;
  transition: border-color .2s ease, box-shadow .24s ease, transform .24s cubic-bezier(.32, .72, 0, 1);
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 20, 19, .18) !important;
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit.is-active {
  border-color: rgba(20, 20, 19, .16) !important;
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit .app-info {
  background: #fff;
  padding: 16px 22px;
  gap: 16px;
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit .app-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit .app-info h3 {
  color: var(--paper-ink);
  font-family: var(--paper-sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit .app-info p {
  color: var(--paper-ink-muted);
  font-size: 13.5px;
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit .app-icon {
  --section-icon-bg: var(--paper-clay);
  --section-icon-fg: #fffaf6;
  --section-icon-shadow: rgba(255, 45, 85, .2);
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit .app-go {
  color: var(--paper-ink);
  background: transparent;
  border: 1px solid rgba(20, 20, 19, .14);
}
body[data-page-kind="home"] .paper-zone .app-card.lab-exhibit .lab-index {
  color: var(--paper-ink-muted);
}

/* 胶囊：纸面上的瓷片。模糊参数仍取 --pill-* 真源。
   背景由 .lab-pill-surface 承担（进场时会从球体展开），这里不再给容器上色。 */
/* Apple 的 dotnav 本体只有两级灰：轨道 rgba(0,0,0,.42)，进度 #29292a。
   纸面不再把它染成梅粉 —— 这一屏要的是「和 Apple 一模一样」。 */
body[data-page-kind="home"] .paper-zone .lab-dot { background: rgba(0, 0, 0, .42); }
body[data-page-kind="home"] .paper-zone .lab-dot:hover { background: rgba(0, 0, 0, .54); }
body[data-page-kind="home"] .paper-zone .lab-dot.is-active { background: rgba(0, 0, 0, .42); }
body[data-page-kind="home"] .paper-zone .lab-dot.is-active::after { background: #29292a; opacity: 1; }
body[data-page-kind="home"] .paper-zone .lab-pill-play {
  color: var(--paper-ink);
}
body[data-page-kind="home"] .paper-zone .lab-pill-play:hover .lab-pill-surface { background-color: rgba(223, 223, 227, .85); }

/* ---------------------------------------------- 展位里的应用界面（浅色版）
   展位演示的是真实产品；纸面上它们也必须是浅色 UI，否则会出现
   "白卡里贴一块黑屏"的割裂。深色只保留在 Vice 画布下的原版。 */
body[data-page-kind="home"] .paper-zone .lab-preview {
  background: var(--paper-canvas-alt);
  border-bottom: 1px solid rgba(20, 20, 19, .07);
}
body[data-page-kind="home"] .paper-zone .lab-ui,
body[data-page-kind="home"] .paper-zone .lab-screen {
  color: var(--paper-ink);
}
/* .lab-ui 在深色画布上是一层 30% 墨色蒙版；纸面上它会整块压灰，
   这里让它透明，由 .lab-preview 的纸色承担底色。 */
body[data-page-kind="home"] .paper-zone .lab-ui {
  background: transparent;
}
body[data-page-kind="home"] .paper-zone .lab-ui-split > .lab-ui-side {
  background: rgba(20, 20, 19, .025);
  border-right: 1px solid rgba(20, 20, 19, .08);
}
body[data-page-kind="home"] .paper-zone .lab-ui-side-label { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-side-item.is-current { background: rgba(20, 20, 19, .06); }
body[data-page-kind="home"] .paper-zone .lab-ui-side-note { color: var(--paper-ink-muted); }
/* 历史任务空态（2026-10-23 新增类）。深色画布是半透明白，纸面上必须换墨色，
   否则落在浅底上几乎看不见 —— 首次加类时漏了这一段。 */
body[data-page-kind="home"] .paper-zone .lab-ui-empty-tip { background: rgba(20, 20, 19, .025); }
body[data-page-kind="home"] .paper-zone .lab-ui-empty-tip i { color: rgba(20, 20, 19, .28); }
body[data-page-kind="home"] .paper-zone .lab-ui-empty-tip b { color: var(--paper-ink-soft); }
body[data-page-kind="home"] .paper-zone .lab-ui-empty-tip span { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-brand i { color: var(--paper-clay); }
body[data-page-kind="home"] .paper-zone .lab-ui-cta {
  color: #fffaf6;
  background: var(--paper-clay);
}
body[data-page-kind="home"] .paper-zone .lab-ui-card {
  background: #fff;
  border-color: rgba(20, 20, 19, .09);
}
body[data-page-kind="home"] .paper-zone .lab-ui-label { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-field {
  background: #fff;
  border-color: rgba(20, 20, 19, .1);
  color: var(--paper-ink-muted);
}
body[data-page-kind="home"] .paper-zone .lab-ui-drop {
  background: #fff;
  border-color: rgba(20, 20, 19, .18);
}
body[data-page-kind="home"] .paper-zone .lab-ui-drop i { color: var(--paper-clay); }
body[data-page-kind="home"] .paper-zone .lab-ui-drop em { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-or { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-or::before,
body[data-page-kind="home"] .paper-zone .lab-ui-or::after { background: rgba(20, 20, 19, .1); }
body[data-page-kind="home"] .paper-zone .lab-ui-bar {
  background: rgba(20, 20, 19, .04);
  color: var(--paper-ink-muted);
}
body[data-page-kind="home"] .paper-zone .lab-ui-submit {
  background: rgba(20, 20, 19, .06);
  color: var(--paper-ink-soft);
}
body[data-page-kind="home"] .paper-zone .lab-ui-hint { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-greet b { color: var(--paper-ink); }
body[data-page-kind="home"] .paper-zone .lab-ui-greet span { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-composer {
  background: #fff;
  border-color: rgba(20, 20, 19, .1);
}
body[data-page-kind="home"] .paper-zone .lab-ui-composer > i { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-composer > span { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-composer > b { background: var(--paper-clay); }
body[data-page-kind="home"] .paper-zone .lab-ui-composer > b i { color: #fffaf6; }
body[data-page-kind="home"] .paper-zone .lab-ui-stage-head { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-stage-head b { color: var(--paper-ink); }
body[data-page-kind="home"] .paper-zone .lab-ui-stage-head em {
  color: #fffaf6;
  background: var(--paper-clay);
}
body[data-page-kind="home"] .paper-zone .lab-ui-tabs span {
  background: rgba(20, 20, 19, .05);
  color: var(--paper-ink-muted);
}
body[data-page-kind="home"] .paper-zone .lab-ui-tabs span.is-on {
  background: rgba(20, 20, 19, .1);
  color: var(--paper-ink);
}
body[data-page-kind="home"] .paper-zone .lab-ui-empty b { color: var(--paper-ink); }
body[data-page-kind="home"] .paper-zone .lab-ui-empty span { color: var(--paper-ink-muted); }
/* 辩论展位新增：7 阶段时间线 + 玻璃 select + 小标签组（2026-10-23）。
   深色画布用半透明白，纸面上必须换墨色阶梯，否则浅底上看不见。 */
body[data-page-kind="home"] .paper-zone .lab-tl-node i {
  background: rgba(20, 20, 19, .18);
  box-shadow: 0 0 0 3px rgba(20, 20, 19, .04);
}
body[data-page-kind="home"] .paper-zone .lab-tl-node.is-done i {
  background: var(--paper-clay);
  box-shadow: 0 0 0 3px rgba(214, 51, 108, .12);
}
body[data-page-kind="home"] .paper-zone .lab-tl-node.is-current i {
  background: var(--paper-ink);
  box-shadow: 0 0 0 3px rgba(20, 20, 19, .10);
}
body[data-page-kind="home"] .paper-zone .lab-tl-node span { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-tl-node.is-done span { color: var(--paper-ink-soft); }
body[data-page-kind="home"] .paper-zone .lab-tl-node.is-current span { color: var(--paper-ink); }
body[data-page-kind="home"] .paper-zone .lab-ui-timeline::after { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-select {
  background: #fff;
  border-color: rgba(20, 20, 19, .10);
  color: var(--paper-ink-soft);
}
body[data-page-kind="home"] .paper-zone .lab-ui-select i { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-fieldset > label { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-two span { background: rgba(20, 20, 19, .05); }
body[data-page-kind="home"] .paper-zone .lab-key {
  background: #fff;
  border-color: rgba(20, 20, 19, .1);
}
body[data-page-kind="home"] .paper-zone .lab-key em { color: var(--paper-clay); }
body[data-page-kind="home"] .paper-zone .lab-bars { border-bottom-color: rgba(20, 20, 19, .16); }
body[data-page-kind="home"] .paper-zone .lab-bars i { background: rgba(20, 20, 19, .5); }
body[data-page-kind="home"] .paper-zone .lab-bar-labels { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-transcript b { color: var(--paper-clay); }
body[data-page-kind="home"] .paper-zone .lab-exhibit.is-active .lab-transcript span { color: var(--paper-ink); }
body[data-page-kind="home"] .paper-zone .lab-list span::before { background: var(--paper-clay); }
body[data-page-kind="home"] .paper-zone .lab-wave i { background: rgba(20, 20, 19, .45); }
body[data-page-kind="home"] .paper-zone .lab-bubble {
  background: #fff;
  border-color: rgba(20, 20, 19, .08);
  color: var(--paper-ink);
}
body[data-page-kind="home"] .paper-zone .lab-bubble.is-me {
  background: var(--paper-ink);
  border-color: transparent;
  color: var(--paper-canvas);
}
body[data-page-kind="home"] .paper-zone .lab-chip {
  background: rgba(20, 20, 19, .06);
  color: var(--paper-ink-soft);
}
body[data-page-kind="home"] .paper-zone .lab-chip.is-quiet {
  background: rgba(20, 20, 19, .04);
  color: var(--paper-ink-muted);
}
body[data-page-kind="home"] .paper-zone .lab-side-tag {
  background: rgba(20, 20, 19, .72);
  color: var(--paper-canvas);
}
body[data-page-kind="home"] .paper-zone .lab-side.is-against .lab-side-tag {
  background: rgba(20, 20, 19, .1);
  color: var(--paper-ink);
}
body[data-page-kind="home"] .paper-zone .lab-side-text,
body[data-page-kind="home"] .paper-zone .lab-side-name { color: var(--paper-ink); }
body[data-page-kind="home"] .paper-zone .lab-verdict {
  background: rgba(20, 20, 19, .04);
  color: var(--paper-ink-soft);
}
/* 辩论计时器展位（2026-10-23 改成真站结构后的类名）。
   深色画布上是纯黑底 + 白字；纸面上换成纸色底 + 墨色字，否则整块黑屏
   贴在白卡里，和白卡其它展位不是一套。 */
body[data-page-kind="home"] .paper-zone .lab-ui-timer { background: var(--paper-canvas-alt); }
body[data-page-kind="home"] .paper-zone .lab-tm-zone {
  color: var(--paper-ink);
  background: rgba(20, 20, 19, .04);
}
body[data-page-kind="home"] .paper-zone .lab-tm-zone.is-a { box-shadow: inset 0 0 0 1px rgba(214, 51, 108, .22); }
body[data-page-kind="home"] .paper-zone .lab-tm-zone.is-b { box-shadow: inset 0 0 0 1px rgba(90, 74, 176, .22); }
body[data-page-kind="home"] .paper-zone .lab-tm-name { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-tm-stage { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-tm-clock { color: rgba(20, 20, 19, .26); }
body[data-page-kind="home"] .paper-zone .lab-tm-clock.is-on { color: var(--paper-ink); }
body[data-page-kind="home"] .paper-zone .lab-tm-dock {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(20, 20, 19, .1);
}
body[data-page-kind="home"] .paper-zone .lab-tm-dock i {
  color: var(--paper-ink-soft);
  background: rgba(20, 20, 19, .05);
}
body[data-page-kind="home"] .paper-zone .lab-tm-dock em { background: rgba(20, 20, 19, .12); }

/* AI Chat 展位（2026-10-23 补顶栏与单条气泡后的类名）。
   深色用白色系；纸面上必须是墨色系，否则「游客模式」「默认预设」这些
   10.5px 小字在白底上直接消失（实测截图确认过）。 */
body[data-page-kind="home"] .paper-zone .lab-ui-topbar {
  border-bottom-color: rgba(20, 20, 19, .08);
}
body[data-page-kind="home"] .paper-zone .lab-ui-topbar b { color: var(--paper-ink); }
body[data-page-kind="home"] .paper-zone .lab-ui-topbar b i { color: var(--paper-clay); }
body[data-page-kind="home"] .paper-zone .lab-ui-topbar-actions em {
  color: #fffaf6;
  background: var(--paper-clay);
}
body[data-page-kind="home"] .paper-zone .lab-ui-topbar-actions i { color: var(--paper-ink-muted); }
body[data-page-kind="home"] .paper-zone .lab-ui-userbar {
  color: var(--paper-ink-muted);
  background: rgba(20, 20, 19, .035);
}
body[data-page-kind="home"] .paper-zone .lab-ui-userbar em { color: var(--paper-ink-soft); }
body[data-page-kind="home"] .paper-zone .lab-msg-avatar { background: rgba(214, 51, 108, .1); }
body[data-page-kind="home"] .paper-zone .lab-msg-avatar i { color: var(--paper-clay); }
body[data-page-kind="home"] .paper-zone .lab-msg-bubble {
  color: var(--paper-ink);
  background: #fff;
  border: 1px solid rgba(20, 20, 19, .07);
}

/* 旧的单表盘 + 进度条 + 文字胶囊 dock 已随展位重画下线，这几条一并删掉。 */

/* 固定胶囊会盖住滚动落点：任何被 scrollIntoView / 锚点带进视野的纸面区块，
   都会停在胶囊底下。--capsule-occupied 是胶囊真实底边（桌面 72px / 窄屏 62px），
   用它做 scroll-margin 才能正好停在胶囊下方而不是被压住。 */
body[data-page-kind="home"] .paper-zone :is(
  .apps-section, .docs-catalog, .lab-head, .continue-section
) {
  scroll-margin-top: var(--capsule-occupied, 72px);
}

/* ------------------------------------------------------------ 文档目录 */
body[data-page-kind="home"] .paper-zone .docs-catalog {
  width: min(var(--paper-width), 100% - var(--paper-gutter) * 2);
  margin-inline: auto;
  /* 站长：整屏更紧凑、一屏能看到更多内容。上下留白从 96px 收到 64px。 */
  padding: clamp(40px, 4.4vw, 64px) 0;
  border-top: 1px solid var(--paper-rule);
}
body[data-page-kind="home"] .paper-zone .docs-catalog .section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-family: var(--paper-sans);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
}
/* 行内 <i> 默认按基线对齐，字号变大后图标会压在「知识目录」上。
   统一成一个 flex 子项，尺寸跟字高走，手机上也不会再叠字。 */
body[data-page-kind="home"] .paper-zone .docs-catalog .section-title-icon {
  flex: 0 0 auto;
  width: .82em;
  height: .82em;
  color: var(--paper-clay);
  stroke-width: 1.8px;
}
body[data-page-kind="home"] .paper-zone .docs-catalog .section-desc {
  text-align: left;
  font-family: var(--paper-serif);
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 28px;
}
body[data-page-kind="home"] .paper-zone .continue-title {
  font-family: var(--paper-sans);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--paper-ink);
}
/* 目录区里的图标与空状态原本跟着 vice 强调色走，落到纸面上会冒出
   嫩绿 / 淡紫。纸面只有墨色与陶土色两种强调。 */
body[data-page-kind="home"] .paper-zone .docs-catalog .section-title :is(i, svg) {
  color: var(--paper-clay) !important;
  stroke: var(--paper-clay);
  -webkit-text-fill-color: currentColor;
}
body[data-page-kind="home"] .paper-zone :is(.continue-empty, .docs-empty, .empty-state, .empty-hint) {
  color: var(--paper-ink-muted) !important;
}
/* 空状态不再借用画布主题的淡紫 --text-muted：纸面上只剩墨色/梅粉两档。 */
body[data-page-kind="home"] .paper-zone .docs-empty-note {
  margin: 4px 0 0;
  font-family: var(--paper-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-ink-muted);
}
body[data-page-kind="home"] .paper-zone .continue-empty-note {
  padding: 8px 0 2px;
  font-family: var(--paper-serif);
  font-size: 14.5px;
  color: var(--paper-ink-muted);
}
/* 没有阅读记录时，这一块只保留一行小字：标题收成同排的弱化标签，
   上下留白压到最小。有记录时（标记被移除）恢复正常网格。 */
body[data-page-kind="home"] .paper-zone .continue-section[data-continue-empty] {
  padding: 0 0 4px;
}
body[data-page-kind="home"] .paper-zone .continue-section[data-continue-empty] .continue-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--paper-ink-muted);
  margin-bottom: 2px;
}
body[data-page-kind="home"] .paper-zone .continue-section[data-continue-empty] .continue-grid {
  display: block;
}
body[data-page-kind="home"] .paper-zone .continue-section[data-continue-empty] .continue-empty-note {
  padding: 0;
  font-size: 13.5px;
}
body[data-page-kind="home"] .paper-zone :is(.doc-card, .continue-item) {
  background: transparent;
  border: 1px solid transparent;
  border-bottom-color: var(--paper-rule);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 卡面材质在 style.css 的「首页卡片 surface 唯一拥有者」里用了 !important。
   paper-zone 的条目仍然要覆盖它，但只在这一个选择器上补，不再逐条加 !important。 */
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card,
body[data-page-kind="home"] .paper-zone .continue-grid .continue-item {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-bottom-color: var(--paper-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body[data-page-kind="home"] .paper-zone :is(.doc-card, .continue-item):hover {
  background: rgba(20, 20, 19, .035);
  border-bottom-color: rgba(20, 20, 19, .2);
  transform: none;
}
body[data-page-kind="home"] .paper-zone .doc-card::before { display: none; }
body[data-page-kind="home"] .paper-zone :is(.doc-card-title, .continue-name) {
  color: var(--paper-ink);
  font-family: var(--paper-sans);
  font-weight: 600;
}

/* 知识目录条目：书页目录而不是玻璃卡片。
   一行一个文件夹，编号 / 图标 / 名称 / 文档数 / 箭头各占固定位置，
   靠留白和细分隔线分组；不使用投影、描边或悬浮发光。 */
body[data-page-kind="home"] .paper-zone .docs-catalog .docs-grid {
  display: grid;
  /* 窗口够宽就排三列：同样一屏能多看到约一半的条目。
     768px 以下仍是两列（见下方窄屏覆盖）。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(28px, 3.2vw, 48px);
  border-top: 1px solid var(--paper-rule);
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 14px 4px;
  cursor: pointer;
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-index {
  font-family: var(--paper-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--paper-ink-muted);
  font-variant-numeric: tabular-nums;
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  color: var(--paper-clay);
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-icon :is(i, svg) {
  color: var(--paper-clay) !important;
  stroke: var(--paper-clay) !important;
  fill: none !important;
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-title {
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--paper-ink);
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-count {
  font-family: var(--paper-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--paper-ink-muted);
}
/* 条目预览：这一格里真正装着什么。
   数据来自 /api/files 的真树（子文件夹优先，再用文件名补足），
   不是装饰文案。只在有内容时渲染，空文件夹不会留一排空壳。
   刻意不用高优先级标记：纸面条目本来就是透明底，
   没有别处的高优先级规则要压。 */
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-preview {
  display: flex;
  /* 只占一行：换行会让同一排卡片的行高参差（实测 105px vs 128px），
     目录读起来就不齐了。宁可省略号收尾，也要保持行高一致。 */
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 6px;
  overflow: hidden;
  min-width: 0;
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-chip {
  display: inline-block;
  /* flex-shrink 允许收缩，配 min-width:0 才会真的出现省略号；
     否则最后一个 chip 是被父级 overflow 直接切掉半个字。 */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--paper-sans);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: var(--paper-ink-muted);
}
/* 子文件夹是这一格里的「下一层」，比文件名重一档；文件名退成注解。
   用字重与颜色分层，不加边框和底色 —— 书页目录不该长成标签云。 */
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-chip.is-dir {
  color: var(--paper-ink-soft);
  font-weight: 600;
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card:hover .doc-card-chip {
  color: var(--paper-ink-soft);
}

body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-arrow {
  display: inline-flex;
  color: var(--paper-ink-muted);
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card:hover .doc-card-arrow,
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card:focus-visible .doc-card-arrow {
  opacity: 1;
  transform: translate(1px, -1px);
}
body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card:focus-visible {
  outline: 2px solid var(--paper-clay);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ 顶栏过纸面 */
/* 顶栏在首页默认是深色画布上的浅字。压到纸面上时不逐条改文字颜色，
   而是把顶栏自己的 --text-primary 换成墨色：胶囊样式读的就是这个变量，
   这样文字、图标、按钮会一起切换，不会再出现某几个元素漏改。 */
body[data-page-kind="home"].paper-nav-light .navbar {
  --text-primary: var(--paper-ink);
  --text-secondary: var(--paper-ink-soft);
  --text-muted: var(--paper-ink-muted);
}
/* 首页品牌字是 .nav-title-text 自身的渐变文字；文档页才拆成 .brand-main。
   两种结构都要落在纸面上变成实心墨色，否则白底上会出现奶油色渐变。 */
/* 品牌字在首页是渐变文字。纸面上只把字本身变成墨色；背景交给顶栏胶囊，
   不要给它铺一层实底，否则胶囊左侧会多出一块粉色方块。 */
body[data-page-kind="home"].paper-nav-light .nav-title-text,
body[data-page-kind="home"].paper-nav-light .nav-title-text .brand-main {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--paper-ink) !important;
  animation: none !important;
  box-shadow: none !important;
}
body[data-page-kind="home"].paper-nav-light .nav-title-text .brand-hub {
  background: rgba(20, 20, 19, .06) !important;
  border-color: rgba(20, 20, 19, .1) !important;
  color: var(--paper-ink) !important;
}
body[data-page-kind="home"].paper-nav-light .navbar-scrolled .nav-link :is(svg, i) {
  color: var(--paper-ink) !important;
  stroke: var(--paper-ink) !important;
}
body[data-page-kind="home"].paper-nav-light .search-box input {
  background: rgba(20, 20, 19, .05) !important;
  border: 0;
  border-bottom: 1px solid rgba(20, 20, 19, .16);
  color: var(--paper-ink) !important;
}
body[data-page-kind="home"].paper-nav-light .theme-group {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--paper-ink) !important;
}
/* 主题切换组在胶囊里有自己的白色图标色，不跟 --text-primary 走，
   这里按同一档墨色补齐；未选中的降到 62% 表达非激活。 */
/* 注意：胶囊收缩时 .theme-btn 的 opacity 是 0，此时 matches() 会为假，
   所以选择器不能写 html[data-navbar-style="capsule"] 前缀，否则永远不命中。
   这一段只给透出字色的按钮用；收缩动画归 _site-navbar-capsule.css 所有。 */
html[data-navbar-style="capsule"] body[data-page-kind="home"].paper-nav-light .navbar .theme-btn {
  color: rgba(20, 20, 19, .62) !important;
  stroke: currentColor !important;
}
html[data-navbar-style="capsule"] body[data-page-kind="home"].paper-nav-light .navbar .theme-btn.active {
  color: var(--paper-ink) !important;
  background: rgba(20, 20, 19, .06) !important;
}
/* 顶栏里还有一批自带白色 icon 色的部件（搜索、调色盘、语言、右侧按钮），
   它们不在 .nav-link / .theme-btn 白名单里，统一在这里压成墨色。 */
body[data-page-kind="home"].paper-nav-light :is(
  .navbar .search-box .search-icon,
  .navbar .search-box .search-icon svg,
  .navbar #btn-site-theme,
  .navbar #btn-site-theme svg,
  .navbar #lang-switch-btn,
  .navbar #lang-switch-btn svg,
  .navbar #lang-switch-select,
  .navbar .nav-right .btn-icon,
  .navbar .nav-right .btn-icon svg,
  .navbar #auth-btn,
  .navbar #auth-btn svg,
  .navbar .theme-group .theme-btn,
  .navbar .theme-group .theme-btn svg,
  .navbar .theme-group .theme-btn i
) {
  color: var(--paper-ink) !important;
  stroke: currentColor !important;
}
/* 品牌标是 mask + 渐变背景（不是字色），纸面上同样收成实心墨色。 */
body[data-page-kind="home"].paper-nav-light .navbar #brand-icon {
  background: var(--paper-ink) !important;
  background-image: none !important;
  animation: none !important;
}
/* 汉堡按钮的线是渐变背景而不是字色，纸面上单独换成墨色实线。 */
body[data-page-kind="home"].paper-nav-light .navbar .nav-toggle span {
  background: var(--paper-ink) !important;
  background-image: none !important;
  animation: none !important;
}
body[data-page-kind="home"].paper-nav-light :is(.navbar .search-box, .navbar .nav-right .btn-icon) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 纸面上的胶囊是浅色玻璃，不再沿用深色画布那一档。 */
html[data-navbar-style="capsule"] body[data-page-kind="home"].paper-nav-light .navbar::before {
  --srb-navbar-glass-bg: rgba(250, 249, 245, .78);
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(20, 20, 19, .08) !important;
}

/* ------------------------------------------------------------ 页脚 */
body[data-page-kind="home"] .footer.paper-zone-footer {
  background: var(--paper-canvas);
  color: var(--paper-ink-muted);
  border-top: 1px solid var(--paper-rule);
  padding: 56px var(--paper-gutter) 88px;
}
body[data-page-kind="home"] .footer.paper-zone-footer .footer-brand {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--paper-ink);
  font-family: var(--paper-sans);
  font-weight: 600;
  letter-spacing: -.02em;
  animation: none;
}
body[data-page-kind="home"] .footer.paper-zone-footer :is(.footer-desc, .footer-copy) {
  color: var(--paper-ink-muted);
}
body[data-page-kind="home"] .footer.paper-zone-footer .footer-links a {
  color: var(--paper-ink-soft);
}
body[data-page-kind="home"] .footer.paper-zone-footer .footer-links a:hover {
  color: var(--paper-ink);
}

/* 三列在 1100px 以下会把「名称 + 文档数」挤成两行，退回两列。 */
@media (max-width: 1100px) {
  body[data-page-kind="home"] .paper-zone .docs-catalog .docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root { --paper-gutter: 20px; --paper-width: 100%; }
  body[data-page-kind="home"] .paper-zone .docs-catalog .section-desc { font-size: 15px; }
  body[data-page-kind="home"] .paper-zone .docs-catalog .section-title {
    font-size: clamp(24px, 6.6vw, 30px);
    gap: 10px;
  }
  body[data-page-kind="home"] .paper-zone .docs-catalog .docs-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card {
    padding: 13px 4px;
    gap: 10px;
  }
  body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-title { font-size: 16px; }
  body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px 2px;
  }
  body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-title { font-size: 17px; }
  body[data-page-kind="home"] .paper-zone .docs-catalog .doc-card-chip { max-width: 18ch; }
  body[data-page-kind="home"] .paper-zone .lab-rail { padding-bottom: 4px; }
  /* 手机纸面无钉屏行程，胶囊就是卡片下方的一行控件。 */
  body[data-page-kind="home"] .paper-zone .apps-section { padding-bottom: 4px; }
}

/* ==========================================================================
   文档书纸皮肤（主站文档）
   ========================================================================== */
html[data-bold-color="paper"] {
  --srbill-bold-color: #ff2d55;
  --theme-solid: #ff2d55;
  --theme-light: rgba(255, 45, 85, .1);
  --theme-border: rgba(255, 45, 85, .3);
  --theme-mark-bg: rgba(255, 45, 85, .14);
  --theme-mark-fg: #e11d48;
  --theme-fg: #fff;
  --on-accent: #fff;
}

html[data-bold-color="paper"] body[data-page-kind="doc"] {
  background: var(--paper-canvas);
  color: var(--paper-ink);
  --text-primary: var(--paper-ink);
  --text-secondary: var(--paper-ink-soft);
  --text-muted: var(--paper-ink-muted);
  --bg-primary: var(--paper-canvas);
  --bg-secondary: #fff;
  --bg-tertiary: var(--paper-canvas-alt);
  --bg-code: var(--paper-canvas-alt);
  --glass-bg: rgba(255, 255, 255, .86);
  --glass-border: rgba(20, 20, 19, .1);
  --glass-shadow: none;
  --border: rgba(20, 20, 19, .1);
  --srb-popover-bg: #fff;
  --srb-popover-border: rgba(20, 20, 19, .12);
  /* 正文里的加粗仍是粉色，但压深一档保证在纸面上的可读性（≈4.6:1）。 */
  --srb-strong-color: #e11d48;
  --srb-quote-bar: rgba(20, 20, 19, .22);
}
html[data-bold-color="paper"][data-vice-bg="1"] body[data-page-kind="doc"] {
  background: var(--paper-canvas);
  background-image: none;
}
html[data-bold-color="paper"] body[data-page-kind="doc"] :is(.doc-content, .doc-main, .docs-layout, .doc-header) {
  background: var(--paper-canvas);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .markdown-body,
html[data-bold-color="paper"] body[data-page-kind="doc"] .markdown-body :is(p, li, td, th, blockquote) {
  color: var(--paper-ink);
  font-family: var(--paper-serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  letter-spacing: 0;
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .markdown-body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--paper-sans);
  color: var(--paper-ink);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}
/* 文档标题不另立字阶：字体 / 字重 / 字距全部继承站内标题真源
   （style.css 的 h1 组），皮肤只负责把ink 换成纸面黑。
   之前这里写了一套 Anthropic Sans 600，被站内 800 压掉后变成
   “英文特别粗”的合成字重，且中文标题不受影响，看起来两套。 */
html[data-bold-color="paper"] body[data-page-kind="doc"] .doc-title {
  color: var(--paper-ink);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .markdown-body :is(strong, b) {
  color: #e11d48;
  -webkit-text-fill-color: #e11d48;
  font-weight: 600;
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .markdown-body blockquote {
  border-left: 2px solid rgba(20, 20, 19, .22);
  background: var(--paper-canvas-alt);
  color: var(--paper-ink-soft);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .markdown-body code:not(pre code) {
  background: var(--paper-canvas-deep);
  color: #9f1239;
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .markdown-body pre {
  background: #f6f4ee;
  border: 1px solid var(--paper-rule);
}
/* 侧栏底色的 owner 是 style.css 的 --sidebar-surface，皮肤只换令牌。
   直接给 .sidebar 写 background 会被那一条压掉 —— 之前深色模式下
   纸面文档左侧一直是一块 rgba(28,28,30,.38) 的灰黑玻璃。 */
html[data-bold-color="paper"] body[data-page-kind="doc"] {
  --sidebar-surface: var(--paper-canvas-alt);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] :is(.sidebar, .doc-toc) {
  background: var(--paper-canvas-alt);
  border-color: var(--paper-rule);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-bold-color="paper"] body[data-page-kind="doc"] :is(.nav-file, .folder-header, .toc-link, .doc-meta) {
  color: var(--paper-ink-soft);
}


/* ------------------------------------------------------------ 右侧栏（书纸）
   右栏（本地图谱 + On This Page）过去只写了 --text-muted，深色模式那一档
   的 [data-theme="dark"] 规则会把图谱块刷成 rgba(255,255,255,.02)、
   按钮刷成半透明白 —— 书纸画布是浅色，这些"夜间接管"会直接消失。
   这里把右栏的底色 / 描边 / 文字一次性钉回纸面令牌，不再看 data-theme。 */
html[data-bold-color="paper"] body[data-page-kind="doc"] .doc-toc {
  background: var(--paper-canvas-alt);
  border-color: var(--paper-rule);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .local-graph-section {
  background: color-mix(in srgb, var(--paper-canvas-alt) 72%, #fff);
  border-color: var(--paper-rule);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .local-graph-btn {
  background: color-mix(in srgb, var(--paper-canvas-deep) 82%, transparent);
  color: var(--paper-ink-soft);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .local-graph-btn:hover {
  background: var(--paper-clay);
  color: #fffaf6;
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .toc-v2-header {
  color: var(--paper-ink-muted);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .toc-v2-link {
  color: var(--paper-ink-muted);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .toc-v2-link:hover {
  background: rgba(20, 20, 19, .05);
  color: var(--paper-ink);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .toc-v2-link.active {
  background: rgba(20, 20, 19, .07);
  color: var(--paper-ink);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .toc-v2-link.level-1 {
  color: var(--paper-ink);
}
html[data-bold-color="paper"] body[data-page-kind="doc"] .toc-v2-tree ul {
  border-left-color: var(--paper-rule);
}

/* ------------------------------------------------------------ 手机纸面（覆盖式统一入口）
   手机没有 Apple 的钉屏行程，纸面就是一条竖排长页：
   收紧各屏距离，去掉空记录撑出的整段空白。放在文件末尾，
   确保压过前面按桌面写的 padding/margin。 */
@media (max-width: 900px) {
    body[data-page-kind="home"] .paper-zone {
    --paper-gutter: 20px;
    padding-top: 32px;
  }
  body[data-page-kind="home"] .paper-zone .apps-section {
    padding: 8px 0 12px;
  }
  body[data-page-kind="home"] .paper-zone .docs-catalog {
    width: 100%;
    /* 顶距已在 .lab-pillbar 下方留过，这里只补一小段分隔。 */
    /* 顶栏是固定胶囊；手机上从实验室滑到这一屏时标题会贴到导航下面，
       留出导航高度 + 一段呼吸位。 */
    padding: calc(var(--capsule-occupied, 64px) + 28px) var(--paper-gutter) 24px;
  }
  body[data-page-kind="home"] .paper-zone .docs-catalog .section-desc {
    margin-bottom: 24px;
  }
  body[data-page-kind="home"] .paper-zone .continue-section {
    padding: 12px 0 4px;
  }
  body[data-page-kind="home"] .paper-zone .continue-title {
    font-size: 1.05rem;
    margin-bottom: 10px;
  }
  body[data-page-kind="home"] .paper-zone .continue-grid:empty {
    display: none;
  }
  body[data-page-kind="home"] .paper-zone .footer {
    padding: 28px 20px 34px;
  }
  body[data-page-kind="home"] .paper-zone .footer-desc {
    margin-bottom: 14px;
  }
}

/* ---- styles/_doc-right-panel.css ---- */
/* Document right panel: local graph and v2 TOC visual authority. */
.doc-toc {
  padding: 14px 10px;
}

.local-graph-section {
  position: relative;
  margin-bottom: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .local-graph-section {
  background: rgba(255, 255, 255, 0.02);
}

.local-graph-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.local-graph-section:hover .local-graph-actions {
  opacity: 1;
}

.local-graph-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.2s, color 0.2s;
}

[data-theme="light"] .local-graph-btn {
  background: rgba(255, 255, 255, 0.6);
  color: rgba(0, 0, 0, 0.5);
}

.local-graph-btn:hover {
  background: rgba(99, 102, 241, 0.6);
  color: #fff;
}

#doc-local-graph-canvas {
  display: block;
  width: 100%;
  height: 200px;
  cursor: grab;
}

.toc-v2-header {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.toc-v2-tree,
.toc-v2-tree ul {
  list-style: none;
}

.toc-v2-tree {
  margin: 0;
  padding: 0;
}

.toc-v2-tree ul {
  margin: 1px 0 1px 6px;
  padding-left: 14px;
  border-left: 1px solid var(--glass-border);
}

.toc-v2-tree li {
  margin: 0;
}

.toc-v2-link {
  display: block;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-full, 9999px);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}

.toc-v2-link:hover {
  background: var(--theme-light, rgba(99, 102, 241, 0.05));
  color: var(--text-primary);
}

.toc-v2-link.active {
  border-color: transparent;
  background: rgba(120, 120, 140, 0.16);
  color: var(--text-primary);
  font-weight: 700;
}

[data-theme="dark"] .toc-v2-link.active {
  background: rgba(255, 255, 255, 0.1);
}

.toc-v2-link.level-1 {
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
}

.toc-v2-link.level-2 {
  font-size: 12px;
}

.toc-v2-link.level-3 {
  font-size: 11.5px;
}

.toc-v2-link.level-4 {
  font-size: 11px;
  opacity: 0.8;
}

/* ---- styles/_site-navbar-capsule.css ---- */
/* Site navbar capsule authority.
   The home scrolled capsule is the visual baseline for both home and docs.
   data-vice-bg remains a document-canvas switch only; it never changes nav glass. */

html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) .navbar {
  top: calc(12px + var(--safe-top, 0px)) !important;
  left: max(16px, calc(50vw - 540px)) !important;
  right: max(16px, calc(50vw - 540px)) !important;
  width: auto !important;
  height: 60px !important;
  padding-top: 0 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 顶栏玻璃底色：深浅两档只差一个自定义属性。两条声明只写自定义属性、
   不加权重标记（浅色选择器多一个 [data-theme="light"]，特异性天然更高），
   真正落地 background-color 的只有下面那一条。
   透明度由视觉实验室的 --srb-navbar-glass-background-color 单一驱动
   （默认 .12 与历史兜底一致）。 */
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) .navbar::before {
  --srb-navbar-glass-bg: var(--srb-navbar-glass-background-color, rgba(28,30,40,.12));
}

html[data-theme="light"][data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) .navbar::before {
  --srb-navbar-glass-bg: var(--srb-navbar-glass-background-color-light, rgba(255,255,255,.42));
}

html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) .navbar::before {
  top: 0 !important;
  bottom: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background-color: var(--srb-navbar-glass-bg) !important;
  background-image: var(--srb-navbar-glass-background-image, linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015))) !important;
  opacity: 1 !important;
  box-shadow: var(--srb-navbar-glass-shadow, 0 10px 26px rgba(0,0,0,.10)) !important;
  -webkit-backdrop-filter: var(--srb-navbar-glass-filter, blur(40px) saturate(200%)) !important;
  backdrop-filter: var(--srb-navbar-glass-filter, blur(40px) saturate(200%)) !important;
}

html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]):not(.navbar-scrolled):not(.navbar-menu-open) .navbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]):not(.navbar-scrolled):not(.navbar-menu-open) .navbar::before {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-navbar-style="capsule"] body.navbar-menu-open .navbar {
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  padding-top: var(--safe-top);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-navbar-style="capsule"] body.navbar-menu-open .navbar::before {
  background: transparent;
  background-image: none;
  opacity: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Controls share the home capsule treatment on both routes. */
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) .nav-link,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) .nav-title-text,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) .search-icon,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) .theme-btn,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) .btn-icon,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) #btn-site-theme {
  color: var(--text-primary) !important;
  stroke: currentColor !important;
}

html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) .search-box,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) .theme-group,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) #lang-switch-btn,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) #btn-site-theme,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) #auth-btn {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The document light-mode auth override used to leave a framed button before
   scrolling. Keep it aligned with the home navbar's transparent rest state. */
html[data-navbar-style="capsule"][data-theme="light"]:not([data-vice-bg="1"]) body[data-page-kind="doc"] #auth-btn {
  background: transparent !important;
  background-image: none !important;
  border: transparent !important;
  box-shadow: none !important;
}

html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) #auth-btn {
  /* 胶囊本身就是一层玻璃；登录块再垫一块底就成了双层。
     这里保持透明，只靠文字与图标表达层级。 */
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) .search-box input,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) .theme-group,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) #lang-switch-btn,
html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) #btn-site-theme {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 768px) {
  html body .nav-menu {
    background-color: rgba(250, 249, 255, .86);
    background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border-bottom: 1px solid rgba(35, 30, 55, .12);
    box-shadow: 0 18px 46px rgba(35, 30, 55, .16);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
  }

  html[data-theme="dark"] body .nav-menu {
    background-color: rgba(20, 20, 28, .84);
    border-bottom-color: rgba(255, 255, 255, .11);
    box-shadow: 0 20px 54px rgba(0, 0, 0, .38);
  }

  html[data-navbar-style="capsule"] {
    --srb-mobile-menu-background: rgba(250, 249, 255, .94);
    --srb-mobile-menu-border: rgba(35, 30, 55, .12);
    --srb-mobile-menu-shadow: 0 18px 46px rgba(35, 30, 55, .16);
  }

  html[data-navbar-style="capsule"][data-theme="dark"] {
    --srb-mobile-menu-background: rgba(20, 20, 28, .92);
    --srb-mobile-menu-border: rgba(255, 255, 255, .11);
    --srb-mobile-menu-shadow: 0 20px 54px rgba(0, 0, 0, .38);
  }

  html[data-navbar-style="capsule"] body[data-page-kind="home"],
  html[data-navbar-style="capsule"][data-vice-bg="1"] body[data-page-kind="doc"] {
    /* 抽屉里的正文/列表要能被读：玻璃底必须够不透明。
       0.66 时文档正文会直接穿过导航文字，这是手机菜单“糊成一片”的根因。 */
    --srb-mobile-menu-background: rgba(25, 23, 35, .92);
    --srb-mobile-menu-border: rgba(255, 255, 255, .12);
    --srb-mobile-menu-shadow: 0 20px 54px rgba(0, 0, 0, .34);
  }

  html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) .nav-menu {
    background-color: var(--srb-mobile-menu-background);
    background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
    border-bottom: 1px solid var(--srb-mobile-menu-border);
    box-shadow: var(--srb-mobile-menu-shadow);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
  }

  html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]) .nav-menu:not(.show) {
    box-shadow: none;
  }

  html[data-navbar-style="capsule"] body:is([data-page-kind="home"], [data-page-kind="doc"]).navbar-scrolled:not(.navbar-menu-open) .navbar {
    top: calc(8px + var(--safe-top, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    height: 54px !important;
  }

  /* 窄屏几何变了，token 必须跟着变。
     桌面实占 = 12 + 60 = 72px，窄屏实占 = 8 + 54 = 62px。
     不覆盖的话，所有用 --capsule-clearance 让位的元素在手机上会
     按桌面的 82px 去让，比实际需要的 72px 多空出 10px。 */
  :root {
    --capsule-top: 8px;
    --capsule-height: 54px;
  }
}