/* ============================================================
 * tdesign-aesthetic-remix · examples · _preset-airlight.css
 * 这是 examples/ 下所有 demo 共用的美学预设 CSS（airlight）
 * 真实工程请按 component-policy.md §2 拆为：
 *   30-preset-airlight.css   §1 + §2
 *   40-decoration-airlight.css  §3 + canvas 辅助
 * 此处合并仅为 demo 单文件方便引用。
 * ========================================================== */

/* §1 Token override（与 core/presets/airlight.md §1 保持一致） */
:root {
  --td-bg-color-page:        #fcfbf8;
  --td-bg-color-container:   #ffffff;
  --td-bg-color-secondarycontainer: #f7f7f4;
  --td-bg-color-component:   #f3f1ec;
  --td-text-color-primary:   #16181d;
  --td-text-color-secondary: #4a4d55;
  --td-text-color-placeholder: #8a8d95;
  --td-text-color-disabled:  #b8babf;
  --td-text-color-anti:      #ffffff;

  --td-brand-color:          #1f2228;
  --td-brand-color-hover:    #2c2f36;
  --td-brand-color-active:   #16181d;
  --td-brand-color-focus:    rgba(31,34,40,0.16);
  --td-brand-color-disabled: #c8cad0;
  --td-brand-color-light:    #efeee9;
  --td-brand-color-light-hover: #e7e6e1;

  --td-success-color: #3aa372;
  --td-warning-color: #d99a3a;
  --td-error-color:   #c2483a;

  --td-border-level-1-color: rgba(22,24,29,0.08);
  --td-border-level-2-color: rgba(22,24,29,0.14);
  --td-component-border:     rgba(22,24,29,0.16);
  --td-component-stroke:     rgba(22,24,29,0.12);

  --td-radius-small:     0px;
  --td-radius-default:   0px;
  --td-radius-medium:    0px;
  --td-radius-large:     0px;
  --td-radius-extraLarge:0px;
  --td-radius-round:     0px;
  --td-radius-circle:    50%;

  --td-shadow-1: 0 1px 2px rgba(22,24,29,0.04), 0 0 1px rgba(22,24,29,0.06);
  --td-shadow-2: 0 8px 24px rgba(22,24,29,0.06), 0 1px 2px rgba(22,24,29,0.04);
  --td-shadow-3: 0 24px 48px rgba(22,24,29,0.08), 0 4px 8px rgba(22,24,29,0.04);

  --ae-font-display: "Cormorant Garamond", "Source Han Serif SC", "Noto Serif SC",
                     "Songti SC", Georgia, "Times New Roman", serif;
  --ae-font-sans:    var(--td-font-family,
                     -apple-system, BlinkMacSystemFont, "PingFang SC",
                     "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif);

  --ae-orb-warm-1: rgba(255, 230, 172, 0.55);
  --ae-orb-warm-2: rgba(255, 181, 138, 0.50);
  --ae-orb-cool-1: rgba(141, 182, 255, 0.48);
  --ae-orb-cool-2: rgba(194, 168, 255, 0.22);
  --ae-orb-mint:   rgba(182, 226, 208, 0.18);
  --ae-grain-opacity: 0.030;
  --ae-hairline:   rgba(22,24,29,0.10);
  --ae-eyebrow-color: rgba(22,24,29,0.55);
}

/* §2 Typography */
.ae-hero, .ae-page-title, .ae-display {
  font-family: var(--ae-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--td-text-color-primary);
}
.ae-hero       { font-size: clamp(48px, 7.6vw, 112px); line-height: 1.02; }
.ae-page-title { font-size: clamp(28px, 3.2vw, 40px);  line-height: 1.15; }
.ae-display    { font-size: clamp(24px, 2.4vw, 32px);  line-height: 1.2;  }
.ae-eyebrow {
  font-family: var(--ae-font-sans);
  font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ae-eyebrow-color);
}
.ae-meta { font-family: var(--ae-font-sans); font-size: 13px; color: var(--td-text-color-secondary); line-height: 1.55; }
.ae-lead {
  font-family: var(--ae-font-sans); font-size: 16px; line-height: 1.7;
  color: var(--td-text-color-secondary); max-width: 60ch;
}
.ae-quote {
  font-family: var(--ae-font-display); font-style: italic;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.4;
  color: var(--td-text-color-primary); max-width: 32ch;
}

/* §3 Decoration Layer */
.ae-page-shell {
  position: relative; isolation: isolate; min-height: 100vh;
  background:
    radial-gradient(circle at 78% 22%, rgba(146,181,255,0.10), transparent 32%),
    radial-gradient(circle at 58% 60%, rgba(204,178,255,0.06), transparent 24%),
    radial-gradient(circle at 20% 82%, rgba(255,205,176,0.07), transparent 30%),
    var(--td-bg-color-page);
}
.ae-page-shell::before {
  content: ""; position: fixed;
  inset: 4vh -12vw auto auto;
  width: 58vw; height: 58vw;
  min-width: 620px; min-height: 620px;
  border-radius: 50%;
  pointer-events: none; z-index: 0;
  filter: blur(18px);
  background:
    radial-gradient(circle at 34% 32%, var(--ae-orb-warm-1) 0%, rgba(255,230,172,0.18) 24%, transparent 52%),
    radial-gradient(circle at 62% 40%, var(--ae-orb-warm-2) 0%, rgba(255,181,138,0.22) 26%, transparent 56%),
    radial-gradient(circle at 52% 62%, var(--ae-orb-cool-1) 0%, rgba(141,182,255,0.20) 28%, transparent 60%),
    radial-gradient(circle at 44% 54%, var(--ae-orb-cool-2) 0%, rgba(194,168,255,0.08) 20%, transparent 48%),
    radial-gradient(circle at 66% 58%, var(--ae-orb-mint) 0%, rgba(182,226,208,0.06) 18%, transparent 42%);
}
.ae-page-shell::after {
  content: ""; position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: var(--ae-grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}
.ae-page-shell > * { position: relative; z-index: 1; }

.ae-page-shell[data-mood="heavy"]  { --ae-grain-opacity: 0.045; }
.ae-page-shell[data-mood="medium"] { --ae-grain-opacity: 0.030; }
.ae-page-shell[data-mood="light"]  { --ae-grain-opacity: 0.020; }
.ae-page-shell[data-mood="light"]::before { opacity: .35; }
.ae-page-shell[data-mood="off"]::before,
.ae-page-shell[data-mood="off"]::after  { display: none; }

/* section 级 mood 切换：同一页内允许分段切档（story 页用） */
[data-mood-section="heavy"]  { --ae-grain-opacity: 0.045; }
[data-mood-section="light"]  { --ae-grain-opacity: 0.020; }
[data-mood-section="off"]    {
  background: var(--td-bg-color-container);
  position: relative; z-index: 2;
}

.ae-rule       { border: 0; border-top: 1px solid var(--ae-hairline); }
.ae-rule--vert { width: 1px; background: var(--ae-hairline); align-self: stretch; }
.ae-frame      { border: 1px solid var(--ae-hairline); }

/* dark variant 入口 */
:root[theme-mode="dark"] {
  --td-bg-color-page:        #0f1013;
  --td-bg-color-container:   #16181d;
  --td-text-color-primary:   #f1eee7;
  --td-text-color-secondary: #b8babf;
  --td-text-color-anti:      #16181d;
  --td-brand-color:          #f1eee7;
  --td-brand-color-hover:    #ffffff;
  --td-brand-color-active:   #d8d4cc;
  --ae-hairline:             rgba(241,238,231,0.12);
  --ae-eyebrow-color:        rgba(241,238,231,0.55);
}

/* ===== Canvas 辅助类（C 类自由排版的便利工具） ===== */
.ae-canvas {
  max-width: 1440px; margin: 0 auto;
  padding: clamp(40px, 8vh, 120px) clamp(24px, 6vw, 96px) 120px;
}
.ae-canvas--wide  { max-width: 1600px; }
.ae-canvas--read  { max-width: 880px; }
.ae-stack    { display: flex; flex-direction: column; }
.ae-stack > * + * { margin-top: var(--gap, 24px); }
.ae-row      { display: flex; flex-wrap: wrap; gap: var(--gap, 24px); align-items: var(--align, flex-start); }
.ae-cluster  { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.ae-spacer-sm { height: 16px; } .ae-spacer-md { height: 48px; } .ae-spacer-lg { height: 120px; }

/* loose 档位裸 CTA / 裸 tag（mapping=medium/strict 应替换成 t-button / t-tag） */
.ae-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  background: var(--td-brand-color); color: var(--td-text-color-anti);
  font-family: var(--ae-font-sans); font-size: 14px; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; border: 0;
  transition: background .2s ease;
}
.ae-cta:hover { background: var(--td-brand-color-hover); }
.ae-cta--ghost {
  background: transparent; color: var(--td-text-color-primary);
  border: 1px solid var(--td-text-color-primary);
}
.ae-cta--ghost:hover { background: var(--td-brand-color); color: var(--td-text-color-anti); }
.ae-tag {
  display: inline-block; padding: 4px 10px;
  font-family: var(--ae-font-sans); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ae-eyebrow-color);
  border: 1px solid var(--ae-hairline);
}

/* poster grid（画廊场景） */
.ae-poster-grid {
  display: grid; gap: 1px;
  background: var(--ae-hairline);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ae-poster-grid > * {
  background: var(--td-bg-color-container);
  padding: clamp(20px, 2.4vw, 32px);
  min-height: 240px;
  display: flex; flex-direction: column; justify-content: space-between;
}

/* example 间导航条（仅 demo 之间互跳，真实项目无需）
 * 桌面 + 移动统一行为：底部居中浮动，与 lang-switch 并排为一组。
 * 设计取舍：
 *   - 不放在顶部：避免与各 demo 自身的 header / 工具条争位
 *   - 不放在右上角：在 portfolio / story 这类长页里会"漂移"
 *   - 底部居中 + 半透明背板：始终可见但视觉权重低
 * 内置 max-width + 横向滚动：项目超过 6 个时也不会破版
 */
.ae-demo-nav {
  position: fixed; z-index: 9;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  background: rgba(252,251,248,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ae-hairline);
  padding: 6px;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ae-demo-nav::-webkit-scrollbar { display: none; }
.ae-demo-nav a {
  font-family: var(--ae-font-sans); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--td-text-color-secondary);
  text-decoration: none; padding: 6px 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}
.ae-demo-nav a[aria-current="page"] {
  color: var(--td-text-color-primary);
  border-color: var(--ae-hairline);
}
.ae-demo-nav a:hover { color: var(--td-text-color-primary); }

/* dark mode 下 nav 背板换成深色 */
:root[theme-mode="dark"] .ae-demo-nav {
  background: rgba(15,16,19,0.82);
}

/* ============================================================
 * §4 Responsive Rules（全局响应式补丁，所有 demo 自动生效）
 * 三档断点 + 两条黄金法则：
 *   1) 任何宽度都不允许横向滚动
 *   2) orb 在窄屏必须"移入帧内"，不只是缩小
 * 详细文档见 core/presets/airlight.md §3.4
 * ========================================================== */

:root {
  --bp-mobile:  720px;
  --bp-tablet:  1024px;
  --bp-desktop: 1280px;
}

/* 黄金法则 1：禁止横向滚动 */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, svg { max-width: 100%; height: auto; }

/* Tablet（≤ 1024px）：缩 canvas padding，demo nav 不变 */
@media (max-width: 1024px) {
  .ae-canvas { padding: clamp(32px, 6vh, 80px) clamp(20px, 4vw, 48px) 80px; }
  .ae-spacer-lg { height: 80px; }
  .ae-page-shell::before {
    width: 70vw; height: 70vw;
    min-width: 480px; min-height: 480px;
    inset: 6vh -18vw auto auto;
  }
}

/* Mobile（≤ 720px）：单列；orb 移入帧内；nav 移到底部 */
@media (max-width: 720px) {
  .ae-canvas { padding: clamp(24px, 4vh, 56px) 20px 64px; }
  .ae-spacer-lg { height: 56px; }
  .ae-spacer-md { height: 32px; }

  /* 黄金法则 2：orb 移入帧内（参照 airlight Glow Mobile Rules）
     不只是缩小，而是把 orb 中心点拉回视口 55%–72% 范围 */
  .ae-page-shell::before {
    width: 140vw; height: 140vw;
    min-width: 0; min-height: 0;
    inset: -20vw -20vw auto auto;
    /* 把中心点拉到屏内右上偏中：right=-20vw + width=140vw → 中心约在 50vw 处 */
    filter: blur(28px);
  }
  .ae-page-shell::after { background-size: 120px 120px; }

  /* grain 在窄屏稍微提一档保留质感 */
  .ae-page-shell[data-mood="heavy"]  { --ae-grain-opacity: 0.05; }

  /* poster grid 自动单列 */
  .ae-poster-grid { grid-template-columns: 1fr; }
  .ae-poster-grid > * { min-height: 200px; }

  /* demo nav 已是底部居中（见上方主样式）；窄屏只把它顶得更靠下一点点 */
  .ae-demo-nav {
    bottom: 12px;
    padding: 4px;
    max-width: calc(100vw - 16px);
  }
  .ae-demo-nav a {
    font-size: 10px;
    padding: 6px 8px;
    letter-spacing: 0.06em;
  }

  /* CTA / 按钮在窄屏给最小可点击高度 */
  .ae-cta { padding: 16px 22px; min-height: 48px; }

  /* hero 字号在窄屏额外降一档（已有的 clamp 上限不动，下限提一档可读性） */
  .ae-hero       { font-size: clamp(40px, 12vw, 64px); line-height: 1.05; }
  .ae-page-title { font-size: clamp(24px, 7vw, 32px); }
  .ae-display    { font-size: clamp(20px, 5.5vw, 26px); }
  .ae-quote      { font-size: clamp(18px, 5vw, 22px); }
  .ae-lead       { font-size: 15px; }
}

/* Mobile Small（≤ 380px）：最低限度的额外让步 */
@media (max-width: 380px) {
  .ae-canvas { padding: 24px 16px 48px; }
  .ae-hero { font-size: clamp(36px, 11vw, 52px); }
}

/* ============================================================
 * §5 Language Patches（zh 气质补丁，扩展自 airlight Language Default）
 * 详见 core/presets/airlight.md §2.5
 * 默认无补丁 = 英文气质；data-lang="zh" 触发补丁
 *
 * 配套 HTML 写法（强制）：
 *   <html lang="zh-CN" data-lang="zh">
 *   ...
 *   <span data-en>English copy</span>
 *   <span data-zh>中文文案</span>
 * ========================================================== */

/* §5.1 双 span 显隐：永远依赖 [data-lang] 上下文（一般是 <html> 或 <body>） */
[data-lang="en"] [data-zh] { display: none !important; }
[data-lang="zh"] [data-en] { display: none !important; }

/* §5.2 中文 serif 字体栈（不强加载远程字体；优先用户系统已装的字形）
       字重提一档：500 → 600（中文 serif 在 500 视觉偏弱） */
[data-lang="zh"] {
  --ae-font-display:
    "Songti SC", "Source Han Serif SC", "Noto Serif SC", "Noto Serif CJK SC",
    "STSongti-SC-Regular", "Source Han Serif CN", "Noto Serif TC",
    "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ae-font-sans:
    -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
    "Helvetica Neue", Arial, sans-serif;
}

/* §5.3 中文标点半角化（让逗号、句号视觉密度跟上 airlight 节奏） */
[data-lang="zh"] .ae-hero,
[data-lang="zh"] .ae-page-title,
[data-lang="zh"] .ae-display,
[data-lang="zh"] .ae-quote,
[data-lang="zh"] .ae-lead,
[data-lang="zh"] .doc h1,
[data-lang="zh"] .doc h2,
[data-lang="zh"] .doc p,
[data-lang="zh"] .doc blockquote {
  font-feature-settings: "halt", "kern";
}

/* §5.4 hero / display 字重提一档 + 行高放宽 */
[data-lang="zh"] .ae-hero,
[data-lang="zh"] .ae-page-title,
[data-lang="zh"] .ae-display {
  font-weight: 600;
  letter-spacing: 0;       /* 中文不需要负字距收紧 */
}
[data-lang="zh"] .ae-hero       { line-height: 1.15; }
[data-lang="zh"] .ae-page-title { line-height: 1.25; }
[data-lang="zh"] .ae-display    { line-height: 1.3; }

/* §5.5 eyebrow / metadata：去 letter-spacing 与 uppercase
       但仍保留"小字 + 灰色"的氛围 */
[data-lang="zh"] .ae-eyebrow {
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12px;
  font-weight: 400;
}
[data-lang="zh"] .ae-meta {
  letter-spacing: 0;
  line-height: 1.7;
}

/* §5.6 长文阅读宽度按"汉字数"重定 */
[data-lang="zh"] .ae-lead       { max-width: 32em; line-height: 1.85; }
[data-lang="zh"] .ae-quote      {
  max-width: 22em;
  font-style: normal;        /* 中文无真斜体 */
  letter-spacing: 0.02em;    /* 用字距代替斜体的"语气" */
}
[data-lang="zh"] .doc p,
[data-lang="zh"] .doc blockquote { max-width: 36em; line-height: 1.95; }

/* §5.7 切换器（语言切换组件，配合 _lang-switch.js）
 * 桌面 + 移动统一：固定在 .ae-demo-nav 上方，居中。
 * 设计取舍：
 *   - 不再用 :has() 让 nav 偏移（导致重叠风险）
 *   - lang-switch 与 nav 上下堆叠为"控制塔"
 */
.ae-lang-switch {
  position: fixed; z-index: 10;
  bottom: 60px;          /* 留出 nav 高度（约 36px）+ 间距 */
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  display: inline-flex; gap: 0;
  background: rgba(252,251,248,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ae-hairline);
  padding: 4px;
  font-family: var(--ae-font-sans);
}
.ae-lang-switch button {
  appearance: none; background: transparent; border: 0;
  font: 11px/1 inherit;
  letter-spacing: 0.04em;
  color: var(--td-text-color-secondary);
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.ae-lang-switch button:hover { color: var(--td-text-color-primary); }
.ae-lang-switch button[aria-pressed="true"] {
  color: var(--td-text-color-primary);
  border-color: var(--ae-hairline);
}

/* dark mode */
:root[theme-mode="dark"] .ae-lang-switch {
  background: rgba(15,16,19,0.82);
}

/* 窄屏：lang-switch 仍在 nav 上方，但需要为 nav 折叠态留出位置
 * （nav 折叠成单按钮时高度变小；lang-switch bottom 不变即可） */
@media (max-width: 720px) {
  .ae-lang-switch {
    bottom: 64px;
    padding: 3px;
  }
  .ae-lang-switch button {
    font-size: 10px;
    padding: 5px 10px;
  }
}

/* §5.8 让英文 kbd / code / 数字日期保持英文气质（不被中文字体接管） */
[data-lang="zh"] code,
[data-lang="zh"] kbd,
[data-lang="zh"] .ae-mono,
[data-lang="zh"] time {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

/* ============================================================
 * §6 移动端 nav 宫格化（配合 _demo-nav-grid.js）
 * 桌面：.ae-demo-nav-mobile 整体隐藏，原 .ae-demo-nav 保持
 * 移动：原 .ae-demo-nav 隐藏，.ae-demo-nav-mobile 显示折叠按钮 + 弹层
 * ========================================================== */

/* 桌面：彻底隐藏 mobile 容器 */
.ae-demo-nav-mobile { display: none; }

@media (max-width: 720px) {
  /* 隐藏原横向 nav */
  .ae-demo-nav { display: none; }

  /* mobile 容器 */
  .ae-demo-nav-mobile {
    display: block;
    position: fixed; z-index: 9;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 24px);
    font-family: var(--ae-font-sans);
  }

  /* 折叠按钮 */
  .ae-demo-nav-mobile__trigger {
    appearance: none; cursor: pointer;
    background: rgba(252,251,248,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--ae-hairline);
    color: var(--td-text-color-primary);
    padding: 10px 16px;
    font: 11px/1 var(--ae-font-sans);
    letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    transition: background .2s ease;
  }
  .ae-demo-nav-mobile__trigger:hover,
  .ae-demo-nav-mobile__trigger:focus-visible {
    background: rgba(252,251,248,1);
  }
  .ae-demo-nav-mobile__prefix {
    color: var(--td-text-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .ae-demo-nav-mobile__label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .ae-demo-nav-mobile__caret {
    margin-left: 4px;
    transition: transform .25s ease;
    color: var(--td-text-color-secondary);
  }
  .ae-demo-nav-mobile.is-open .ae-demo-nav-mobile__caret {
    transform: rotate(180deg);
  }

  /* 背景遮罩 */
  .ae-demo-nav-mobile__backdrop {
    position: fixed; inset: 0; z-index: 11;
    background: rgba(22,24,29,0.32);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .ae-demo-nav-mobile.is-open .ae-demo-nav-mobile__backdrop {
    opacity: 1; pointer-events: auto;
  }

  /* 弹层（从底部上拉） */
  .ae-demo-nav-mobile__sheet {
    position: fixed; z-index: 12;
    left: 0; right: 0; bottom: 0;
    max-height: 80vh;
    background: var(--td-bg-color-page);
    border-top: 1px solid var(--ae-hairline);
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
  }
  .ae-demo-nav-mobile.is-open .ae-demo-nav-mobile__sheet {
    transform: translateY(0);
  }

  /* 弹层标题 */
  .ae-demo-nav-mobile__head {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ae-hairline);
  }

  /* 宫格：3 列 */
  .ae-demo-nav-mobile__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ae-hairline);
    border: 1px solid var(--ae-hairline);
  }
  .ae-demo-nav-mobile__cell {
    background: var(--td-bg-color-container);
    color: var(--td-text-color-primary);
    text-decoration: none;
    padding: 20px 12px;
    min-height: 72px;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    font: 12px/1.3 var(--ae-font-sans);
    letter-spacing: 0.04em;
    transition: background .15s ease;
  }
  .ae-demo-nav-mobile__cell:hover,
  .ae-demo-nav-mobile__cell:focus-visible {
    background: var(--td-bg-color-secondarycontainer);
  }
  .ae-demo-nav-mobile__cell[aria-current="page"] {
    background: var(--td-text-color-primary);
    color: var(--td-text-color-anti);
  }

  /* 宫格不满 9 格时，最后一行的单元格仍保持 1fr 等宽（不足处空着）
     若你以后加到第 7 个 demo（已经 7 个了），就会有 7 + 2 空格。可接受。
     如果 demo 超过 9 个，可以把 grid 改成 repeat(3, 1fr) + 自动换行（已有）。 */

  /* 关闭按钮 */
  .ae-demo-nav-mobile__close {
    appearance: none; cursor: pointer;
    margin-top: 16px;
    width: 100%;
    background: transparent;
    border: 1px solid var(--ae-hairline);
    color: var(--td-text-color-secondary);
    padding: 12px;
    font: 11px/1 var(--ae-font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .ae-demo-nav-mobile__close:hover {
    color: var(--td-text-color-primary);
  }

  /* dark mode 变量切换 */
  :root[theme-mode="dark"] .ae-demo-nav-mobile__trigger {
    background: rgba(15,16,19,0.9);
  }
  :root[theme-mode="dark"] .ae-demo-nav-mobile__sheet {
    background: var(--td-bg-color-container);
  }
  :root[theme-mode="dark"] .ae-demo-nav-mobile__cell {
    background: var(--td-bg-color-secondarycontainer);
  }
}