/* ============================================================
   a2e.com.cn 落地页 —— 组件层

   来源：Claude Design 项目「A2E Landing页面重构」的定稿设计稿
   A2E Nav.dc.html（950 行）+ design_handoff_a2e_landing/README.md。
   设计稿是原型，用一套模板运行时写成，本文件是它在 WordPress +
   Gutenberg 环境里的重建，不是搬运。

   落地契约（design/CONSTRAINTS.md 第 8 节）：
   - 命名 .a2e-块__元素--变体，元素只允许一级 __
   - 状态用原生属性（aria-expanded / aria-current / :focus-visible），
     不发明 .is-*
   - 0 个 !important
   - 0 处内联 style 声明；页面里只注入自定义属性（--a2e-ratio / --a2e-media
     / --a2e-rv-i 三个口子），传数据不传声明
   - 0 个裸色值，颜色一律来自 tokens.css

   ------------------------------------------------------------
   两处必须记住的实测结论（退回去就会复现原来的 bug）

   1. 图块 hover 缩放的是 ::before 内容层，不是容器。父级带 mask-image
      时，容器一 transform 就被提升为独立合成层，border-radius 和
      clip-path 的裁剪同时失效，圆角在 hover 瞬间变直角。

   2. 带圆角子块的网格入场只做 fade，不做位移。理由同上：translateY
      也是 transform。瀑布流三列、横屏网格、竖屏网格都因此只淡入。

   ------------------------------------------------------------
   字号补偿：.a2e-display / .a2e-num 两个工具类**带 font-size**
   （1.03em / .96em），且位于 a2e-utilities 层、排在本层之后。组件
   自己规定了字号时复合这两个类，字号会被它们覆盖。所以本文件一律
   直接写 font-family + calc(... * 1.03 / .96)，不复合这两个类。
   ============================================================ */


/* 环形辉光要靠角度做动画，角度必须先注册成 <angle> 类型，
   否则 conic-gradient 的 from 值只能整数跳变。注册是文档级的，
   分层对它没有意义，所以放在层外。 */
@property --a2e-ang {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}


@layer a2e-components {

  /* ==========================================================
     0 · 页面根：局部 token 与动效降级开关
     ========================================================== */

  /* token 里没有的版式值补在这里。命名前缀 --a2e- 与设计系统的
     token 区分开：这些是落地页局部量，不进 tokens.css 的注册表。 */
  .a2e-lp {
    /* 动效四开关。reduce 时整体改写，不逐条覆盖 —— 逐条覆盖要么
       用 !important（禁），要么写在别的层里（会反转层序）。 */
    --a2e-motion:   running;
    --a2e-lift:     1.06;
    --a2e-dur:      .28s;

    /* 版式 */
    --a2e-gutter:   var(--s-6);   /* 页面左右留白 32px */
    --a2e-nav-h:    72px;
    --a2e-gap:      14px;         /* 横滚卡与六宫格的栏距 */
    --a2e-gap-tile: var(--s-2);   /* 作品图块的栏距 8px */
    --a2e-card-w:   300px;        /* 横滚卡宽，断点里改 */

    /* 缓动。设计稿里出现 27 次，抽出来免得写歪一处。 */
    --a2e-ease:     cubic-bezier(.2, .7, .3, 1);
    --a2e-ease-ind: cubic-bezier(.4, 0, .2, 1);

    position: relative;
    min-height: 100vh;
    /* !! 必须是 clip 不是 hidden。overflow-x:hidden 会把这里变成滚动容器，
       里面所有 position:sticky 都改为相对它吸附 —— 实测 /news/ 的控制条和
       月份头直接失效（滚到 top:-40 还在跑）。clip 只裁不滚，sticky 照常。
       另外 hidden 会把 overflow-y 从 visible 提成 auto，clip 不会。 */
    overflow-x: clip;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  /* 落地页第一个区块是 .a2e-sec--first，自带 96px 给 fixed 导航让位。
     别的页面第一个元素可能是公告条这类通栏元素，用这个修饰类让位。 */
  .a2e-lp--offset { padding-top: var(--a2e-nav-h); }

  .a2e-lp *,
  .a2e-lp *::before,
  .a2e-lp *::after { box-sizing: border-box; }

  /* !! 必须用 :where() 把作用域降权到 0。写成 .a2e-lp a 的话特异性是
     (0,1,1)，会压过所有 (0,1,0) 的按钮类 —— 实测后果是 .a2e-btn--solid-text
     的文字被改回 --text，白底上 #EBEBEB 对 #EBEBEB，对比度 1.0，整个
     按钮消失；mint / amber 底的 CTA 与整个 mint 页脚也一起掉到不可读。
     这就是「变体换底色必须同时换 --*-on」那条约束的反面：底色对了，
     文字色被一条通则悄悄抢走。 */
  :where(.a2e-lp) a { color: var(--text); text-decoration: none; }
  :where(.a2e-lp) a:hover { color: var(--accent); }

  .a2e-lp :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .a2e-lp {
      --a2e-motion:   paused;
      --a2e-lift:     1;
      --a2e-dur:      .01s;
    }
  }


  /* ==========================================================
     1 · keyframes
     设计稿的 @keyframes a2eReel 没有任何调用点，未移植。
     ========================================================== */

  @keyframes a2eRing { to { --a2e-ang: 360deg; } }

  @keyframes a2eLogoGlow {
    0%, 100% { filter: drop-shadow(0 0 12px color-mix(in srgb, transparent, var(--accent) 22%)); }
    50%      { filter: drop-shadow(0 0 22px color-mix(in srgb, transparent, var(--accent) 52%)); }
  }

  @keyframes a2eRec {
    0%, 100% { opacity: 1;   box-shadow: 0 0 8px color-mix(in srgb, transparent, var(--danger) 70%); }
    50%      { opacity: .38; box-shadow: 0 0 0  color-mix(in srgb, transparent, var(--danger) 0%); }
  }

  @keyframes a2eBreathe {
    0%, 100% { opacity: .62; }
    50%      { opacity: 1; }
  }

  @keyframes a2eGridDrift { to { background-position: 88px 88px, 88px 88px; } }

  @keyframes a2eDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes a2eDotFill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }


  /* ==========================================================
     2 · 进入视口错峰入场
     初始隐藏写在 CSS 里而不是由 JS 注入行内样式：一来契约禁止行内
     声明，二来 JS 是 defer 的，等它跑起来元素已经画过一次了，会闪。
     ========================================================== */

  .a2e-lp [data-reveal] {
    opacity: 0;
    transition:
      opacity   .52s var(--a2e-ease),
      transform .52s var(--a2e-ease);
    /* 同组兄弟递增 70ms，最多 7 档；序号由 JS 注入自定义属性。 */
    transition-delay: calc(var(--a2e-rv-i, 0) * 70ms);
  }

  .a2e-lp [data-reveal="rise"] { transform: translateY(14px); }

  .a2e-lp [data-reveal][data-reveal-shown] {
    opacity: 1;
    transform: none;
  }

  /* 两条兜底：关掉动效的人、以及 JS 没跑起来的场合，都必须直接可见。 */
  @media (prefers-reduced-motion: reduce) {
    .a2e-lp [data-reveal] { opacity: 1; transform: none; transition: none; }
  }
  @media (scripting: none) {
    .a2e-lp [data-reveal] { opacity: 1; transform: none; transition: none; }
  }


  /* ==========================================================
     3 · 按钮三档（设计稿共 27 处）

     实心 CTA  亮度 .18s + 同色 30% 柔光 .28s + 上浮 1px
     描边/幽灵  描边转 --glass-border、底升 --surface-2、字与图标转 accent
     文字/标签  只转文字色（chips 同时底升一级）

     柔光颜色跟随按钮本色：mint 30% / amber 30% / 白 24%。
     居中定位的按钮上浮必须保留 translateX(-50%)，否则会跳回左边。
     ========================================================== */

  .a2e-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    border: 0;
    border-radius: var(--r-sm);
  }

  /* --- 实心 --- */
  .a2e-btn--solid {
    padding: 12px 22px;
    background: var(--accent);
    color: var(--accent-on);
    font-size: var(--fs-sm);
    letter-spacing: .02em;
    transition:
      filter     .18s ease,
      box-shadow .28s ease,
      transform  .28s var(--a2e-ease);
  }
  .a2e-btn--solid:hover {
    color: var(--accent-on);
    filter: brightness(1.06);
    box-shadow: 0 0 30px color-mix(in srgb, transparent, var(--accent) 30%);
    transform: translateY(-1px);
  }

  /* amber 变体：换底色必须同时换 --*-on 文字色。 */
  .a2e-btn--solid-warn {
    /* !! warn 与 danger 是功能色，只报告产品状态（表单错误、破坏性确认、
       额度告警、失败任务）。禁止上营销页当强调色或分类色 —— 这条拦不住
       浏览器，只能靠人。见 design/CONSTRAINTS.md 第 1 节。 */
    background: var(--warn);
    color: var(--warn-on);
  }
  .a2e-btn--solid-warn:hover {
    color: var(--warn-on);
    box-shadow: 0 0 30px color-mix(in srgb, transparent, var(--c-amber) 30%);
  }

  /* 白底：亮度往下压而不是往上提，否则纯白提不动。 */
  .a2e-btn--solid-text {
    padding: 13px 26px;
    background: var(--c-text);
    color: var(--c-ink);
    font-size: 15px;
    letter-spacing: .01em;
  }
  .a2e-btn--solid-text:hover {
    color: var(--c-ink);
    filter: brightness(.96);
    box-shadow: 0 0 30px color-mix(in srgb, transparent, var(--c-text) 24%);
  }

  /* --- 描边 / 幽灵 --- */
  .a2e-btn--ghost {
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-size: var(--fs-sm);
    transition:
      border-color .18s ease,
      background   .18s ease,
      color        .18s ease;
  }
  .a2e-btn--ghost:hover {
    border-color: var(--glass-border);
    background: var(--surface-2);
    color: var(--accent);
  }

  /* 图标按钮：正方形，点击目标不小于 38px，移动端 42px。 */
  .a2e-btn--icon {
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    padding: 0;
  }

  /* info 变体，Seedance 2.5 那块在用。warn 版保留给真正的警告语义。 */
  .a2e-btn--solid-info {
    background: var(--info);
    color: var(--info-on);
  }
  .a2e-btn--solid-info:hover {
    color: var(--info-on);
    box-shadow: 0 0 30px color-mix(in srgb, transparent, var(--c-blue) 30%);
  }

  .a2e-btn--edge-info {
    padding: 11px 20px;
    border: 1px solid color-mix(in srgb, transparent, var(--c-blue) 55%);
    background: color-mix(in srgb, var(--c-void), var(--c-blue) 16%);
    color: var(--c-blue);
    font-size: var(--fs-sm);
    transition:
      border-color .18s ease,
      background   .18s ease,
      transform    .28s var(--a2e-ease);
  }
  .a2e-btn--edge-info:hover {
    color: var(--c-blue);
    background: color-mix(in srgb, var(--c-void), var(--c-blue) 26%);
    border-color: color-mix(in srgb, transparent, var(--c-blue) 80%);
  }

  /* amber 描边：留给警告语义的场合。 */
  .a2e-btn--edge-warn {
    padding: 11px 20px;
    border: 1px solid color-mix(in srgb, transparent, var(--c-amber) 55%);
    background: color-mix(in srgb, var(--c-void), var(--c-amber) 16%);
    color: var(--c-amber);
    font-size: var(--fs-sm);
    transition:
      border-color .18s ease,
      background   .18s ease,
      transform    .28s var(--a2e-ease);
  }
  .a2e-btn--edge-warn:hover {
    color: var(--c-amber);
    background: color-mix(in srgb, var(--c-void), var(--c-amber) 26%);
    border-color: color-mix(in srgb, transparent, var(--c-amber) 80%);
  }

  /* --- 文字 / 标签 --- */
  .a2e-btn--label {
    padding: 9px 16px;
    background: var(--surface);
    color: var(--text-mute);
    font-size: 15px;
    transition: background .18s ease, color .18s ease;
  }
  .a2e-btn--label:hover {
    background: var(--surface-2);
    color: var(--accent);
  }

  /* --- 居中悬浮定位 --- */
  .a2e-btn--center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .a2e-btn--center:hover { transform: translateX(-50%) translateY(-1px); }

  .a2e-btn__icon { flex: none; }


  /* ==========================================================
     4 · 导航
     ========================================================== */

  .a2e-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-pop);
    height: var(--a2e-nav-h);
  }

  /* 玻璃底单独一层：滚过 12px 才淡入，透明度由 JS 注入 --a2e-frost。

     !! 这里**故意不复合 .a2e-glass**。那个工具类在 a2e-utilities 层、
        排在本层之后，它的 border 简写、border-radius 和 box-shadow 会
        把组件层的覆盖压掉 —— 导航条只要一条下边框，四边描边和圆角都
        不要，压不掉就得动 !important。所以直接读同一批 glass token 自己
        画，连带把工具类里那两个必需的降级也一起搬过来。 */
  .a2e-nav__glass {
    position: absolute;
    inset: 0;
    background: var(--g-bg, var(--glass-bg));
    -webkit-backdrop-filter: var(--g-filter, blur(var(--glass-blur)) saturate(var(--glass-sat)));
            backdrop-filter: var(--g-filter, blur(var(--glass-blur)) saturate(var(--glass-sat)));
    border-bottom: 1px solid var(--line);
    opacity: var(--a2e-frost, 0);
    transition: opacity .32s ease;
  }
  /* 无障碍要求的降级，同时也是老浏览器的兜底：没有这两条，
     不支持 backdrop-filter 的浏览器会得到一块透明不可读的面板。 */
  @media (prefers-reduced-transparency: reduce) {
    .a2e-nav__glass { --g-bg: var(--surface); --g-filter: none; }
  }
  @supports not (backdrop-filter: blur(1px)) {
    .a2e-nav__glass { --g-bg: var(--surface); --g-filter: none; }
  }

  .a2e-nav__inner {
    position: relative;
    height: 100%;
    padding: 0 var(--a2e-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
  }

  /* --- 品牌 --- */
  .a2e-nav__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    color: var(--accent);
  }
  .a2e-nav__brand:hover { color: var(--accent); }

  /* 2026-08-06 换标：v2 的漩涡图形 → 旧标 A²E（1.622 : 1）。
     导航 logo 只有常驻微光，**没有 hover 动效，这是定稿不是待办**。

     !! 别再给它加回旋转。原来那个梗是「漩涡转半圈后字母 a 变成 e」，
        靠的是 v2 图形的旋转对称性 —— A²E 没有，转过去就是倒着的。
        随之删掉的三个变量（--a2e-logo-rot / --a2e-logo-dur /
        --a2e-ease-flip）也一并清了，别看到 --a2e-ease-ind 就以为还有个
        flip 缓动可用。

     !! 尺寸参数是高度不是宽度 —— 水平导航条里高度才是受约束的那一维。
        宽度按 1.622 : 1 跟随（旧标 A²E 的宽高比）。

        规范第 3 页的下限是按**宽度**定的（最窄结构缝 = 宽度的 5.40%，
        留住一条缝要 1.5 设备像素 → 1× 下绝对下限 32px 宽）。
        这里高 32px 折合宽 51.9px，缝 2.80px，**余量充足**。

        对照上一版的 A2E 字标：缝只有宽度的 2.44%、下限 64px 宽，
        当时高 32px 折合宽 66.4px 只比下限高 2.4px，一点余量都没有。
        换回旧标之后这一格从「贴着线」变成「不用惦记」。 */
  .a2e-nav__logo {
    height: 32px;
    width: calc(32px * 1.622);
    flex: none;
    display: block;
    filter: drop-shadow(0 0 16px color-mix(in srgb, transparent, var(--accent) 40%));
    animation: a2eLogoGlow 5s ease-in-out infinite;
    animation-play-state: var(--a2e-motion, running);
  }

  .a2e-nav__brand-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .a2e-nav__brand-name {
    font-size: var(--fs-base);
    line-height: 1;
    letter-spacing: .01em;
    color: var(--text);
  }
  .a2e-nav__brand-tag {
    font-size: 11px;
    line-height: 1;
    letter-spacing: .14em;
    color: var(--text-mute);
  }

  /* --- 主项与指示器 --- */
  .a2e-nav__links {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
  }

  /* 位置由 JS 注入两个自定义属性；离开导航区滑回当前页那一项。
     预览态（hover 到非当前项）透明度 .72，用来和当前页区分。 */
  .a2e-nav__indicator {
    position: absolute;
    bottom: -6px;
    left: var(--a2e-ind-x, 0);
    width: var(--a2e-ind-w, 0);
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow:
      0 0 10px color-mix(in srgb, transparent, var(--accent) 55%),
      0 0 22px color-mix(in srgb, transparent, var(--accent) 30%);
    opacity: var(--a2e-ind-o, 0);
    pointer-events: none;
    transition:
      left    .34s var(--a2e-ease-ind),
      width   .34s var(--a2e-ease-ind),
      opacity .2s ease;
  }

  .a2e-nav__group { position: relative; }

  .a2e-nav__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    border-radius: var(--r-sm);
    font-size: 15px;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--text);
    opacity: .84;
    transition: opacity .18s ease;
  }
  .a2e-nav__item:hover,
  .a2e-nav__item[aria-current="page"] { opacity: 1; color: var(--text); }

  .a2e-nav__caret { opacity: .6; flex: none; }

  /* --- 下拉 --- */
  .a2e-menu {
    position: absolute;
    top: calc(100% + var(--s-3));
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
  }
  .a2e-menu--wide { min-width: 270px; }
  .a2e-menu--narrow { min-width: 210px; }

  /* 开合用原生 :hover / :focus-within，不发明状态类，键盘也能打开。 */
  .a2e-nav__group:hover > .a2e-menu,
  .a2e-nav__group:focus-within > .a2e-menu {
    opacity: 1;
    visibility: visible;
    animation: a2eDrop .22s ease both;
    animation-play-state: var(--a2e-motion, running);
  }

  .a2e-menu__item {
    display: block;
    padding: 9px var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--text);
  }
  .a2e-menu__item:hover { background: var(--surface-2); color: var(--text); }

  .a2e-menu__desc {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    color: var(--text-mute);
  }

  /* --- 产品 mega 菜单 ---
     结构照搬 /app 左侧菜单：5 个分组 + 底部快速链接。

     用 position: fixed 而不是 absolute —— 面板要按视口居中、宽到接近版心，
     而它的定位祖先 .a2e-nav__group 只有一个导航项那么宽。导航条本身也是
     fixed，所以两者对齐关系稳定。DOM 上它仍是 group 的子节点，
     :hover / :focus-within 照常生效。 */
  .a2e-mega {
    position: fixed;
    top: var(--a2e-nav-h);
    /* !! 居中不能用 left:50% + translateX(-50%)。开合时套的 a2eDrop
       关键帧里有 transform: translateY()，`animation-fill-mode: both`
       会让它在结束帧把整个 transform 覆盖掉，translateX(-50%) 随之作废，
       面板直接从「产品」那一项开始往右铺、冲出视口。
       改成 left/right 归零 + margin-inline:auto，居中不占用 transform。
       （同一个坑在 .a2e-btn--center 上出现过一次，那里是靠在 hover 规则里
       重述 translateX(-50%) 解决的。） */
    /* !! 2026-08-06 改：原来是 left/right 归零 + margin-inline:auto，也就是
       **按视口居中**。但导航项是靠右排的（.a2e-nav__inner 是 space-between，
       品牌在左、链接在右），所以视口一变宽，菜单项往右走、面板留在中间，
       两者就分开了 —— 实测 1508px 视口下面板中心比「产品」中心偏左 335px。

       面板 1280px 宽（6 列 × 195px 是内容实撑的），而「产品」那一项只有
       76px 宽且靠右，**没法居中对齐到它**：居中会往右冲出视口 221px。
       所以改成把面板右边界钉到导航内容的右边界上 —— 同一个 --a2e-gutter，
       于是两者在任何宽度下一起移动，偏移恒为 0。

       同组的 .a2e-menu（教程、语言）本来就是 absolute 定位在各自的
       .a2e-nav__group 里，偏差为 0，不用动。只有这个 fixed 的面板有问题。 */
    left: auto;
    right: var(--a2e-gutter);
    width: min(1280px, calc(100vw - var(--a2e-gutter) * 2));
    max-height: calc(100vh - var(--a2e-nav-h) - var(--s-5));
    overflow-y: auto;
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
  }
  .a2e-nav__group:hover > .a2e-mega,
  .a2e-nav__group:focus-within > .a2e-mega {
    opacity: 1;
    visibility: visible;
    animation: a2eDrop .22s ease both;
    animation-play-state: var(--a2e-motion, running);
  }

  /* 悬停桥。导航项底边到面板顶边之间有一段空隙，鼠标穿过时会同时离开
     两者，菜单闪一下就关。用一条透明的 ::after 把这段接上。
     常规下拉的空隙是 12px，mega 的到 72px 导航条底边约 22px，取 24px 够用。 */
  .a2e-nav__group::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--s-5);
  }

  .a2e-mega__cols {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-5) var(--s-3);
  }

  /* 列本身不需要样式，但要在 CSS 里有定义 —— 自查脚本会把「HTML 用了、
     CSS 没定义」的类名报出来，那通常意味着写错了类名。 */
  .a2e-mega__col { min-width: 0; }

  .a2e-mega__title {
    display: block;
    margin-bottom: var(--s-2);
    padding-inline: var(--s-2);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    color: var(--text-mute);
  }

  .a2e-mega__item {
    display: block;
    padding: 7px var(--s-2);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--text);
  }
  .a2e-mega__item:hover { background: var(--surface-2); color: var(--text); }

  /* 线上那两种角标：🔥 是热门、NEW 是新上。用 accent 描边的小胶囊，
     不占一行、不抢标题。 */
  .a2e-mega__flag {
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, transparent, var(--accent) 14%);
    color: var(--accent);
    font-size: 10px;
    letter-spacing: .04em;
    vertical-align: 1px;
  }

  /* 分组条目多的（视频 24 项、图片 22 项）在菜单里只列前 8 个，
     其余收进这一条。导航不该是站点地图。 */
  .a2e-mega__all {
    display: block;
    margin-top: var(--s-1);
    padding: 7px var(--s-2);
    font-size: var(--fs-xs);
    color: var(--text-mute);
  }
  .a2e-mega__all:hover { color: var(--accent); }

  .a2e-mega__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line-soft);
  }

  /* --- 语言切换 --- */
  .a2e-lang {
    position: relative;
    margin-left: 10px;
    padding-left: var(--s-3);
    border-left: 1px solid var(--line-soft);
  }
  .a2e-lang__btn { opacity: .86; gap: 7px; }
  .a2e-lang__btn:hover { opacity: 1; }
  .a2e-lang__menu {
    left: auto;
    right: 0;
    transform: none;
    min-width: 150px;
    padding: var(--s-2);
  }
  /* --- 汉堡与移动面板 --- */
  .a2e-nav__burger { display: none; width: 42px; height: 42px; }

  .a2e-mobile {
    position: fixed;
    top: var(--a2e-nav-h);
    left: var(--s-3);
    right: var(--s-3);
    z-index: calc(var(--z-pop) - 1);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
    display: none;
  }
  /* 开合状态挂在触发按钮的 aria-expanded 上，不发明 .is-open。 */
  .a2e-nav__burger[aria-expanded="true"] ~ .a2e-mobile {
    display: block;
    animation: a2eDrop .22s ease both;
    animation-play-state: var(--a2e-motion, running);
  }

  .a2e-mobile__link {
    display: block;
    padding: var(--s-3) var(--s-1);
    font-size: 17px;
    color: var(--text);
    transition: color .18s ease;
  }
  .a2e-mobile__link:hover { color: var(--accent); }

  .a2e-mobile__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: 0 var(--s-1) var(--s-3);
  }
  .a2e-mobile__chip {
    padding: 7px var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--text-mute);
    transition: border-color .18s ease, background .18s ease, color .18s ease;
  }
  .a2e-mobile__chip:hover {
    border-color: var(--glass-border);
    background: var(--surface-2);
    color: var(--accent);
  }

  .a2e-mobile__rule { height: 1px; background: var(--line-soft); }
  .a2e-mobile__rule--last { margin-bottom: var(--s-3); }

  .a2e-mobile__langs { display: flex; gap: var(--s-2); }
  .a2e-mobile__langs .a2e-btn { flex: 1; justify-content: center; padding: 10px; }


  /* ==========================================================
     5 · 版式基元
     ========================================================== */

  /* 区块间距统一 32px。原来有 --tail(32) / --gap(64) / --end(120) 三档，
     每个区块挑一档，结果是节奏全靠手感、两个页面还对不齐。现在一个值，
     三个修饰类已删除。--first（给 fixed 导航让位）与 --flush（去左右留白）
     不是间距档位，保留。 */
  .a2e-sec { padding: 0 var(--a2e-gutter) var(--s-6); }
  .a2e-sec--first { padding-top: 96px; }
  .a2e-sec--flush { padding-left: 0; padding-right: 0; }

  /* 标题组与内容之间同样给 32px。之前是 18px，标题几乎贴着下面的网格。 */
  .a2e-sec__head { margin-bottom: var(--s-6); }

  /* Quicksand 比 Lexend Deca 小 ~3%，补偿直接乘进字号 —— 不复合
     .a2e-display，那个工具类会把这里的 font-size 覆盖掉。 */
  .a2e-sec__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: calc(var(--fs-xl) * 1.03);
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    color: var(--accent);
  }
  /* 章节标题的第二色。v2 这里有 sky / rose / amber 三个分类色，
     色板收成两个色相后分类色整个不存在了 —— 三个合并成一个 --alt。
     !! 不要再加第三个。要区分章节请用位置、序号、图标，不是色相。 */
  .a2e-sec__title--alt { color: var(--c-blue); }

  .a2e-sec__sub {
    margin: 7px 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-mute);
  }

  .a2e-frame { position: relative; }



  /* ==========================================================
     6 · 功能横向滚动卡
     ========================================================== */

  .a2e-rail {
    display: flex;
    gap: var(--a2e-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* 锚住起点。线上旧版加载时 scrollLeft=25、首卡 x=-11，标题左边
       被裁掉约 1.5 个汉字；加上这条之后实测 x=16、scrollLeft=0。 */
    scroll-padding-inline-start: var(--a2e-gutter);
    padding: var(--s-1) var(--a2e-gutter) var(--s-2);
    scrollbar-width: none;
  }
  .a2e-rail::-webkit-scrollbar { display: none; }

  .a2e-rail__card {
    flex: 0 0 auto;
    width: var(--a2e-card-w);
    aspect-ratio: 16 / 9;
    scroll-snap-align: start;
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: pointer;
  }

  /* 单色底走 .a2e-tone / .a2e-tone--dk 两个工具类，颜色由页面注入
     --tone。跨色渐变没有对应工具类（方向不能做成参数），所以写成
     组件变体；全站只有三处需要，不值得再造一个工具类。 */
  .a2e-rail__card--fresh { background: var(--grad-fresh); }

  /* 横滚卡的真实媒体。卡片本身不动，只有这层随 hover 轻微放大。 */
  .a2e-rail__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(var(--a2e-media-z, 1));
    transition: transform var(--a2e-dur, .28s) var(--a2e-ease);
  }
  .a2e-rail__card:hover { --a2e-media-z: var(--a2e-lift, 1.06); }

  /* 底部压暗，让白字压在任何底色上都读得出来。 */
  /* !! 这层 scrim 顶不住亮色底。实测：文案块落在卡片 75% 高处，
        scrim 在该点的 alpha 只有 0.54，合成后正文色的对比度是

          mint 4.21 ✗   amber 4.44 ✗   blue 6.37 ✓   blue-deep 11.14 ✓   rose 7.40 ✓

        mint 差 0.29、amber 差 0.06，**都不达 AA**。而且它对位置极敏感：
        同一个 mint 在 70% 处只有 3.33，到 85% 处就有 6.98 —— 文案块
        一改 padding 结论就变。

        所以 rail 卡的底**只放真实媒体，不刷品牌色**（生成的页面正是这么做的，
        卡上没有 --tone）。要刷色只能刷 blue / blue-deep。

        !! 上面那行 amber 是色板 v2 时代量的，现在只当参考数据看 ——
           v3 把 amber / rose 划成功能色，**营销页一律不许出现**，
           所以它根本不是这里的候选，别照着这行去权衡。 */
  .a2e-rail__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, transparent, var(--c-void) 92%));
  }

  .a2e-rail__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 20px;
    /* 可点区是铺满整卡的 scrim <a>，文案层不能把它挡住。 */
    pointer-events: none;
  }
  .a2e-rail__title {
    margin: 0;
    font-size: var(--fs-base);
    letter-spacing: .01em;
    color: var(--c-text);
  }
  .a2e-rail__desc {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in srgb, transparent, var(--c-text) 74%);
  }

  .a2e-rail__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    margin-top: 26px;
  }

  .a2e-rail__dots {
    display: flex;
    align-items: center;
    gap: var(--s-2);
  }

  .a2e-rail__dot-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  .a2e-rail__dot {
    width: 7px;
    height: 7px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--r-xs);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: color-mix(in srgb, transparent, var(--c-text) 26%);
    transition: width .32s var(--a2e-ease-ind), background .2s ease;
  }
  .a2e-rail__dot[aria-current="true"] {
    width: 34px;
    background: color-mix(in srgb, transparent, var(--c-text) 18%);
  }

  /* 停留进度：横向填充。时长由 JS 注入，非当前点不画。 */
  .a2e-rail__fill { display: none; }
  .a2e-rail__dot[aria-current="true"] .a2e-rail__fill {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: left;
    transform: scaleX(0);
    animation: a2eDotFill var(--a2e-dwell, 5000ms) linear forwards;
    animation-play-state: var(--a2e-motion, running);
  }
  /* 自动轮播关掉时没有进度可言，直接铺满。 */
  .a2e-rail__dots[data-autoplay="off"] .a2e-rail__fill {
    animation: none;
    transform: scaleX(1);
  }

  .a2e-rail__tip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 6px 10px;
    font-size: var(--fs-xs);
    line-height: 1.2;
    border-radius: var(--r-sm);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-pop);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s ease;
  }
  .a2e-rail__dot:hover + .a2e-rail__tip,
  .a2e-rail__dot:focus-visible + .a2e-rail__tip {
    opacity: 1;
    visibility: visible;
  }


  /* ==========================================================
     7 · 推广大卡 + 六宫格功能卡
     ========================================================== */

  .a2e-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a2e-gap);
    align-items: stretch;
  }

  .a2e-quick__grid {
    flex: 1 1 300px;
    min-width: 0;
    display: grid;
    align-content: start;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(98px, auto);
    gap: var(--a2e-gap);
  }

  /* --- 推广大卡（blue-deep，唯一能挨着另一个品牌色的隔断色）--- */
  .a2e-promo {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 210px;
    position: relative;
    border-radius: var(--r-md);
    overflow: hidden;
    /* !! 2026-08-06 从 blue-deep 换成 blue，**渐变方向必须跟着翻**。
       原来是「原色 → 掺黑」（.a2e-tone--dk 那套，为浅字设计）；blue 是亮色，
       沿用掺黑会把暗端拉到亮度 0.142，navy 字掉到 3.39 —— 正好落进
       「浅字太亮、深字太暗」的死区（0.146–0.206，两种文字色都不达标）。
       改成「掺白 → 原色」（.a2e-tone 那套），最差点锚在 blue 上，全程 7.06。 */
    background: linear-gradient(160deg,
      color-mix(in srgb, var(--c-blue), white var(--tone-amt)), var(--c-blue));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px;
    cursor: pointer;
  }
  .a2e-promo__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: var(--r-sm);
    /* !! 亮底上不能再用「正文色低透明度」当 chip 底 —— 那是深底的做法，
       叠在 blue 上只有 3.63。换成 navy 实底：对卡底 7.06、其上正文色 15.51。 */
    background: var(--c-navy);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    color: var(--c-text);
  }
  .a2e-promo__title {
    margin: 20px 0 0;
    font-family: var(--font-display);
    font-size: calc(var(--fs-2xl) * 1.03);
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--c-navy);
    text-wrap: balance;
  }

  /* CTA 反过来：navy 底 + mint 字。mint 实底压在 blue 卡上只有 2.00
     （色板里唯一的非法组合），但反过来 navy 底对卡底 7.06、其上 mint 14.14
     —— **主色仍然在 CTA 上，只是底与字换了位**。 */
  .a2e-promo__cta {
    align-self: flex-start;
    background: var(--c-navy);
    color: var(--c-mint);
  }
  .a2e-promo__cta:hover { background: var(--c-navy); color: var(--c-mint); }

  /* --- 功能卡 --- */

  /* !! background-origin 必须显式写成 border-box。这条是修 bug 修出来的：
        「视频创建」那张渐变卡底边一直有一条 1px 的薄荷绿细线，瀑布流图块
        当年也出过同样的线（当时是把 --tone 删掉绕过去的，没查根因）。

        根因是三个默认值凑一起：
          background-origin  padding-box  ← 渐变的**定位区**只有 padding box
          background-clip    border-box   ← 但**绘制区**是 border box
          background-repeat  repeat       ← 差出来的 1px 边框环靠平铺补
        于是那 1px 环补上的是渐变**起点色**。mint→blue 起点是 mint，
        所以底边冒出一条绿线；blue-deep→更深那张也在重复，只是暗→暗看不出来。

        受控复现过：给测试块加 1px transparent 边框，绿线立刻出现；
        改 background-origin: border-box 后消失。**没有边框就不会有这条线**
        —— 这也是为什么它只在有边框的卡上出现。

        不要改用 background-repeat: no-repeat「绕过去」：那只是把绿线换成
        透出页面底的暗线，卡片视觉上仍然缺 1px。origin 与 clip 对齐才是解。 */
  .a2e-feat {
    position: relative;
    padding: var(--s-3) 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    row-gap: 10px;
    transition:
      border-color .2s ease,
      background   .2s ease,
      box-shadow   .3s ease;
  }

  /* 流动 border 辉光：conic-gradient 铺满 + mask-composite 挖空中心，
     剩下 1px 的环。角度靠 @property 注册过的 --a2e-ang 做动画。
     非 hover 时 paused —— 六张卡各转一圈的合成开销不该常驻。 */
  .a2e-feat::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--r-md) + 1px);
    padding: 1px;
    background: conic-gradient(from var(--a2e-ang, 0deg),
      transparent 0deg 195deg,
      color-mix(in srgb, transparent, var(--accent) 92%) 300deg,
      transparent 352deg);
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
    opacity: var(--a2e-ring, 0);
    transition: opacity .22s ease;
    animation: a2eRing 2.4s linear infinite;
    animation-play-state: var(--a2e-ring-play, paused);
    pointer-events: none;
  }
  .a2e-feat:hover,
  .a2e-feat:focus-visible {
    border-color: var(--glass-border);
    background: var(--surface-2);
    box-shadow: var(--glow-tight);
    --a2e-ring: 1;
    --a2e-ring-play: var(--a2e-motion, running);
  }

  /* 渐变底的两张卡：渐变不能用 color-mix() 提亮（只接受 <color>，
     对 gradient 静默失效），改用 filter。 */
  .a2e-feat--grad {
    border-color: transparent;
    background: var(--grad-fresh);
    transition: filter .2s ease, box-shadow .3s ease;
  }
  .a2e-feat--grad:hover {
    border-color: transparent;
    background: var(--grad-fresh);
    filter: brightness(1.06);
  }

  .a2e-feat--alt {
    border-color: color-mix(in srgb, transparent, var(--c-text) 14%);
    /* 与 .a2e-promo 同一个决定：底从 blue-deep 换成 blue，渐变从「掺黑」
       翻成「掺白 → 原色」。理由见那里的注释。 */
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--c-blue), white var(--tone-amt)), var(--c-blue));
    transition: filter .2s ease, box-shadow .3s ease;
  }
  .a2e-feat--alt:hover {
    border-color: color-mix(in srgb, transparent, var(--c-text) 14%);
    /* 与 .a2e-promo 同一个决定：底从 blue-deep 换成 blue，渐变从「掺黑」
       翻成「掺白 → 原色」。理由见那里的注释。 */
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--c-blue), white var(--tone-amt)), var(--c-blue));
    filter: brightness(1.1);
  }

  .a2e-feat__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .a2e-feat__icon { flex: none; stroke: var(--text); }
  .a2e-feat--grad .a2e-feat__icon { stroke: var(--c-navy); }
  .a2e-feat--alt  .a2e-feat__icon { stroke: var(--c-navy); }

  .a2e-feat__tag {
    flex: none;
    padding: var(--s-1) 9px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, transparent, var(--c-text) 12%);
    color: var(--text);
    font-size: 11px;
    letter-spacing: .04em;
  }
  /* 亮底上的标签换成 navy 底 + text 字，跟着变体走。 */
  .a2e-feat--grad .a2e-feat__tag { background: var(--c-navy); color: var(--c-text); }
  /* 亮底了，与 --grad 变体同做法：navy 实底 + 正文色字。
     原来那个「正文色 18%」是深底的做法，叠在 blue 上只有 3.50。 */
  .a2e-feat--alt  .a2e-feat__tag { background: var(--c-navy); color: var(--c-text); }
  .a2e-feat__tag--alt { background: var(--alt); color: var(--alt-on); }

  .a2e-feat__title {
    margin: 0;
    font-size: var(--fs-base);
    letter-spacing: .01em;
    color: var(--text);
  }
  .a2e-feat__desc {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-mute);
  }
  /* !! 这条必须放在**所有 background 简写之后**。
        `background` 简写会把 background-origin 重置回初始值 padding-box，
        写在 .a2e-feat 里（简写之前）会被 --grad / --alt / :hover 的简写清掉 ——
        第一次就是这么修错的，线上量出来仍是 padding-box。

        为什么要 border-box：卡有 1px 边框，而渐变的定位区默认只有 padding box、
        绘制区却是 border box，差出来的 1px 环靠 background-repeat 平铺补，
        补上的是渐变**起点色**。mint→blue 起点是 mint，于是底边冒出一条绿线；
        blue-deep 那张也在重复，只是暗→暗看不出来。受控复现过：给测试块加
        1px transparent 边框绿线立刻出现，改 border-box 后消失。

        不要改用 background-repeat: no-repeat「绕过去」——那只是把绿线换成
        透出页面底的暗线，卡片视觉上仍然缺 1px。origin 与 clip 对齐才是解。 */
  .a2e-feat,
  .a2e-feat:hover,
  .a2e-feat--grad,
  .a2e-feat--grad:hover,
  .a2e-feat--alt,
  /* 导航条同病：底边 1px 铺渐变起点（mint 8%），叠 12% 白边框后是
     rgb(41,56,56)，本该 rgb(40,40,41)——1px 上偏青 16/255。全站扫过，
     「渐变底 + 边框 + origin 非 border-box + 平铺」只剩这两处。 */
  .a2e-nav__glass { background-origin: border-box; }

  /* 亮底（mint/blue）：文字色一律 --c-navy；blue-deep 底：--c-text。分界在亮度 0.2。 */
  .a2e-feat--grad .a2e-feat__title { color: var(--c-navy); }
  .a2e-feat--grad .a2e-feat__desc  { color: color-mix(in srgb, transparent, var(--c-navy) 76%); }
  .a2e-feat--alt  .a2e-feat__title { color: var(--c-navy); }
  /* 80% 而不是 --grad 那档的 76%：blue 比 mint 暗，navy 在它上面本来就少
     一截余量，76% 只有 4.68、80% 是 5.09。次要感照样在。 */
  .a2e-feat--alt  .a2e-feat__desc  { color: color-mix(in srgb, transparent, var(--c-navy) 80%); }


  /* ==========================================================
     8 · 实时数字人 2.0 面板
     ========================================================== */

  .a2e-model {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-ink);
  }

  /* 背景网格漂移：走一个格距（88px）再无缝接回。
     background-position 的起始值必须显式写出来，两层渐变各一份，
     否则动画起点是 auto，第一帧会跳。 */
  .a2e-model__grid {
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(90deg,  var(--line-soft) 0 1px, transparent 1px 88px),
      repeating-linear-gradient(180deg, var(--line-soft) 0 1px, transparent 1px 88px);
    background-position: 0 0, 0 0;
    opacity: .55;
    pointer-events: none;
    animation: a2eGridDrift 14s linear infinite;
    animation-play-state: var(--a2e-motion, running);
  }

  /* 边框辉光呼吸：整层透明度 .62 ↔ 1。辉光单独一层是为了能只对它做
     动画 —— 画在 .a2e-model 身上的话呼吸会把整块内容一起淡掉。
     !! 圆角必须跟着写一遍。inset 阴影是按**这一层自己**的边框盒画的，
     这层没圆角就按直角画，父级的 overflow:hidden 再把四个角上那截切掉，
     那条 2px 亮边在圆角处就断开了。绿色的 .a2e-agent 没这个问题是因为
     它的 inset 阴影直接画在带圆角的元素上。 */
  .a2e-model__glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
    animation: a2eBreathe 4.2s ease-in-out infinite;
    animation-play-state: var(--a2e-motion, running);
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb, var(--c-blue), white 30%),
      inset 0 0 26px 6px var(--c-blue),
      inset 0 0 70px 6px color-mix(in srgb, transparent, var(--c-blue) 72%),
      inset 0 0 130px 10px color-mix(in srgb, transparent, var(--c-blue) 30%),
      inset 0 0 190px 16px color-mix(in srgb, transparent, var(--c-blue) 12%);
  }

  .a2e-model__body {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-6);
    padding: var(--s-6);
  }
  .a2e-model__col {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: var(--s-2) 0;
  }
  /* 主色从 amber 换成 --info(blue)。语义上也更对：这块是「即将上线」的
     预告，不是警告 —— 而 v3 之后 amber 已经是功能色，本来就不许上营销页。
     blue 与 amber 一样配 --c-navy（7.06 AAA），所以换底色不用改文字色
     —— 但这条只在这个模块成立，别推广。 */
  .a2e-model__badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    padding: 6px var(--s-3);
    border-radius: var(--r-sm);
    background: var(--info);
    color: var(--info-on);
    font-size: var(--fs-xs);
    letter-spacing: .12em;
  }
  .a2e-model__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: calc(var(--fs-3xl) * 1.03);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--text);
  }
  .a2e-model__desc {
    margin: 0;
    max-width: 330px;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-mute);
  }
  .a2e-model__cta { align-self: flex-start; margin-top: 6px; }

  .a2e-model__wall {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    align-items: flex-start;
  }
  .a2e-model__stage {
    position: relative;
    width: 100%;
    height: 380px;
  }
  .a2e-model__tiles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-content: start;
    gap: clamp(8px, 1.1vw, 16px);
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 96%);
            mask-image: linear-gradient(180deg, #000 58%, transparent 96%);
  }
  /* 换成真实 <img>/<video> 之后必须补宽高约束：它们有固有尺寸，不写
     width 就会按 1280×720 把网格撑破（占位 <div> 时代没有这个问题）。 */
  .a2e-model__tile {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: var(--r-md);
  }
  .a2e-model__tile--fresh { background: var(--grad-fresh); }
  /* v2 这里是 --grad-cool（peri→sky）。跨色渐变收成一组之后，
     第二种图块底改用单向明度渐变的 blue —— 同族两级不是跨色渐变。 */
  .a2e-model__tile--cool  { background: linear-gradient(180deg,
      color-mix(in srgb, var(--c-blue), white var(--tone-amt)), var(--c-blue)); }
  .a2e-model__more { bottom: var(--s-2); }


  /* ==========================================================
     9 · SHOWREEL 取景框
     ========================================================== */

  .a2e-reel {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 300px;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--c-blue-deep), color-mix(in srgb, var(--c-blue-deep), black 45%));
  }
  .a2e-reel:hover { --a2e-reel-on: 1; }

  /* 边框辉光呼吸 —— 与实时数字人 2.0 面板（.a2e-model__glow）同一套做法，
     只换颜色：那边是 --c-blue，这里跟取景框自己的 blue-deep 底呼应，用 --c-blue-deep。

     !! 圆角必须 inherit 一遍。inset 阴影按**这一层自己**的边框盒画，
        这层没圆角就按直角画，父级的 overflow:hidden 再把四角那截切掉，
        2px 亮边在圆角处就断开了 —— 与 .a2e-model__glow 注释里记的是同一个坑。

     !! 提亮幅度比 blue 那版大（描边 white 34% vs 30%，第二层也补了一次提亮）。
        blue-deep 相对亮度 0.074，blue 是 0.351；同样的配方压在这块
        blue-deep → blue-deep+black45% 的底上会糊成一团，边缘辨不出来。
        换 v3 后底更暗了（violet 0.121 → blue-deep 0.074），这条只会更成立。 */
  .a2e-reel__glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
    animation: a2eBreathe 4.2s ease-in-out infinite;
    animation-play-state: var(--a2e-motion, running);
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb, var(--c-blue-deep), white 34%),
      inset 0 0 26px 6px color-mix(in srgb, var(--c-blue-deep), white 12%),
      inset 0 0 70px 6px color-mix(in srgb, transparent, var(--c-blue-deep) 72%),
      inset 0 0 130px 10px color-mix(in srgb, transparent, var(--c-blue-deep) 30%),
      inset 0 0 190px 16px color-mix(in srgb, transparent, var(--c-blue-deep) 12%);
  }

  /* SHOWREEL 的真实片子。铺满取景框，四角标记与文案压在它上面。 */
  .a2e-reel__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .a2e-reel__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(108% 82% at 50% 50%,
      transparent 52%,
      color-mix(in srgb, transparent, var(--c-void) 46%) 80%,
      color-mix(in srgb, transparent, var(--c-void) 80%) 100%);
    box-shadow: inset 0 0 70px 18px color-mix(in srgb, transparent, var(--c-void) 55%);
  }

  /* 四角取景标记：hover 整个取景框各自向外顶 4px。符号按角位，
     所以四个方向各写一条，只差正负号。 */
  .a2e-reel__corner {
    position: absolute;
    width: 34px;
    height: 34px;
    opacity: calc(.85 + var(--a2e-reel-on, 0) * .15);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s var(--a2e-ease);
  }
  .a2e-reel__corner--tl {
    top: 22px; left: 22px;
    border-left: 2px solid var(--accent);
    border-top: 2px solid var(--accent);
    transform: translate(calc(var(--a2e-reel-on, 0) * -4px), calc(var(--a2e-reel-on, 0) * -4px));
  }
  .a2e-reel__corner--tr {
    top: 22px; right: 22px;
    border-right: 2px solid var(--accent);
    border-top: 2px solid var(--accent);
    transform: translate(calc(var(--a2e-reel-on, 0) * 4px), calc(var(--a2e-reel-on, 0) * -4px));
  }
  .a2e-reel__corner--bl {
    bottom: 22px; left: 22px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: translate(calc(var(--a2e-reel-on, 0) * -4px), calc(var(--a2e-reel-on, 0) * 4px));
  }
  .a2e-reel__corner--br {
    bottom: 22px; right: 22px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: translate(calc(var(--a2e-reel-on, 0) * 4px), calc(var(--a2e-reel-on, 0) * 4px));
  }

  .a2e-reel__slug,
  .a2e-reel__spec {
    position: absolute;
    top: 24px;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    font-family: var(--font-num);
    font-size: calc(var(--fs-xs) * .96);
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
  }
  .a2e-reel__slug {
    left: var(--a2e-reel-inset, 20px);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    background: color-mix(in srgb, transparent, var(--c-void) 55%);
    color: var(--c-text);
  }
  .a2e-reel__spec {
    right: var(--a2e-reel-inset, 20px);
    background: var(--accent);
    color: var(--accent-on);
  }

  .a2e-reel__rec {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: var(--r-full);
    /* 功能色出现在营销页上的**唯一豁免**：录制红点。红色 REC 点是拍摄
       设备的通用约定，换成品牌色只会读成「有个绿点在闪」。规范第 1 节
       的功能色清单里显式列了它。不要拿这条去豁免别的装饰。 */
    background: var(--danger);
    animation: a2eRec 1.6s ease-in-out infinite;
    animation-play-state: var(--a2e-motion, running);
  }

  .a2e-reel__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    text-align: center;
    padding: 0 40px;
    pointer-events: none;
  }
  .a2e-reel__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(calc(var(--fs-xl) * 1.03), 4.2vw, calc(var(--fs-4xl) * 1.03));
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--c-text);
    text-wrap: balance;
  }
  .a2e-reel__desc {
    margin: 0;
    max-width: 520px;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: color-mix(in srgb, transparent, var(--c-text) 78%);
  }


  /* ==========================================================
     10 · 作品图块（瀑布流 / 横屏网格 / 竖屏网格 共用）

     !! 缩放的是 ::before 内容层。容器保持不动，overflow:hidden +
        圆角始终有效，内容溢出被裁掉 —— 换成真实图片或视频时这也
        正是该有的行为。不要改回容器缩放。
     ========================================================== */

  .a2e-work {
    position: relative;
    margin: 0;
    /* 每件作品的画幅由页面注入 --a2e-ratio（16/9、9/16、3/4、1/1、4/5），
       这是传数据不是传声明。两个等比网格在下面按整组统一改写。 */
    aspect-ratio: var(--a2e-ratio, 16 / 9);
    border-radius: var(--r-xs);
    overflow: hidden;
    cursor: pointer;
  }

  /* 垫在媒体下面的一层。

     !! 这里曾经是「单向明度渐变 + 页面注入 --tone」，是占位色块时代的产物，
        意思是海报解码前底下是品牌色而不是黑洞。全组换成真素材之后它变成了
        纯粹的害处：图块高度是分数（实测 183.23px），视频纹理和背景的亚像素
        snapping 对不齐，每块底边就透出一条薄荷绿细线。唇形同步那面看不见，
        只是因为最后一排正好被渐隐吃掉了 —— 不是没有。

        中性底之后同一条缝仍然存在，但和画面同色系，看不出来。
        --tone / --a2e-work--dk / --fresh / --cool 一并删掉，
        生成的 HTML 里已经一个都不用了。 */
  .a2e-work::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--a2e-media, var(--surface-2));
    transform: scale(var(--a2e-media-z, 1));
    filter: brightness(var(--a2e-media-b, 1));
    transition:
      transform var(--a2e-dur, .28s) var(--a2e-ease),
      filter    var(--a2e-dur, .28s) ease;
  }

  .a2e-work:hover {
    --a2e-media-z: var(--a2e-lift, 1.06);
    --a2e-media-b: 1.08;
  }

  /* 真实素材层。渐变占位在 ::before，媒体盖在它上面 —— poster 还没解码
     出来的那一瞬间底下是品牌色而不是黑洞。

     !! 缩放的是这一层，不是 .a2e-work 容器。理由和占位那版完全一样：
        父级带 mask-image 时容器一 transform 就被提升为独立合成层，
        border-radius 的裁剪当场失效。换成真视频之后这条更要紧，
        因为裁不住的是一整帧画面。 */
  .a2e-work__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(var(--a2e-media-z, 1));
    filter: brightness(var(--a2e-media-b, 1));
    transition:
      transform var(--a2e-dur, .28s) var(--a2e-ease),
      filter    var(--a2e-dur, .28s) ease;
  }

  /* 整块可点，铺在媒体之上。可访问名由它自己的 aria-label 提供 ——
     图注（.a2e-work__cap，带彩点的「XX演示」小标签）已整体移除，
     那是纯装饰，遮住画面下缘、每块都重复同一句话。 */
  .a2e-work__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  /* --- 瀑布流 ---
     !! 试过 CSS 多列（columns: 2/3/4），不行：定高容器里多列是**逐列
        填满**，不是按最矮列填。12 件作品高矮差三倍，第一列放完一张
        16:9 就塞不下下一张 9:16，直接留出半列空洞。设计稿用的是
        「每次投给当前最矮的列」，那个必须知道各件的高度，只能用 JS。

     所以 HTML 里是一份扁平列表（没 JS 也能看，只是变成单列），
     列数写成 --a2e-gallery-n 交给断点，JS 读它来分列。 */
  /* 取景框和它下面的瀑布流是同一个区块的两层，中间给一个标准间距。
     区块之间的 32px 由 .a2e-sec 管，这条只管区块内部。 */
  .a2e-reel + .a2e-frame { margin-top: var(--s-6); }

  .a2e-gallery__cols {
    --a2e-gallery-n: 2;
    display: flex;
    align-items: flex-start;
    gap: var(--a2e-gap-tile);
    height: 620px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 180px), transparent calc(100% - 8px));
            mask-image: linear-gradient(180deg, #000 calc(100% - 180px), transparent calc(100% - 8px));
  }
  .a2e-gallery__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--a2e-gap-tile);
  }
  .a2e-gallery__cta { bottom: 34px; }

  /* --- 横屏 / 竖屏网格 --- */
  .a2e-works {
    display: grid;
    gap: var(--a2e-gap-tile);
    grid-auto-rows: min-content;
    align-content: start;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, color-mix(in srgb, #000, transparent 45%) 82%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 58%, color-mix(in srgb, #000, transparent 45%) 82%, transparent 100%);
  }
  .a2e-works--wide { grid-template-columns: 1fr; aspect-ratio: 1 / 2.05; }
  .a2e-works--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: 1 / 1.36; }
  .a2e-works--wide .a2e-work { aspect-ratio: 16 / 9; }
  .a2e-works--tall .a2e-work { aspect-ratio: 9 / 16; }
  .a2e-works__cta { bottom: var(--s-3); }


  /* ==========================================================
     11 · A2E 智能体
     ========================================================== */

  .a2e-agent {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    min-height: 340px;
    aspect-ratio: 4 / 5;
    background: var(--c-ink);
    box-shadow:
      inset 0 0 0 2px color-mix(in srgb, var(--c-mint), white 30%),
      inset 0 0 26px 6px var(--c-mint),
      inset 0 0 70px 6px color-mix(in srgb, transparent, var(--c-mint) 72%),
      inset 0 0 130px 10px color-mix(in srgb, transparent, var(--c-mint) 30%),
      inset 0 0 190px 16px color-mix(in srgb, transparent, var(--c-mint) 12%);
  }

  /* 上下两片透视网格，往中间收。 */
  .a2e-agent__plane {
    position: absolute;
    left: -30%;
    right: -30%;
    height: 56%;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(90deg,  color-mix(in srgb, transparent, var(--c-mint) 30%) 0 1px, transparent 1px 84px),
      repeating-linear-gradient(180deg, color-mix(in srgb, transparent, var(--c-mint) 30%) 0 1px, transparent 1px 62px);
  }
  .a2e-agent__plane--floor {
    bottom: 0;
    transform: perspective(460px) rotateX(64deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
            mask-image: linear-gradient(180deg, transparent, #000 60%);
  }
  .a2e-agent__plane--ceil {
    top: 0;
    transform: perspective(460px) rotateX(-64deg);
    transform-origin: top center;
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 60%);
            mask-image: linear-gradient(0deg, transparent, #000 60%);
  }

  .a2e-agent__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    text-align: center;
    padding: 0 40px;
  }
  /* ---- 线上 banner 搬过来的装饰图 ----
     位置沿用线上那套百分比（.a2e-supercomputer__* 的取值），因为两边
     画幅几乎一样：线上 banner 是 1408/429 ≈ 3.28，这块面板 16/5 = 3.2。

     !! 这几张是为**紫色**banner 切的图，卡片本身带紫灰底。放在 mint
        面板上不会破，但色调是原来那套。要完全贴合 mint 得让设计重新导出。

     没有搬过来的是 bg-bg.webp —— 线上那张紫色透视网格背景。这块面板
     已经有自己的 mint 网格（.a2e-agent__plane），再叠一层紫的就冲突了。 */
  .a2e-agent__logo {
    display: block;
    width: min(37%, 560px);
    max-width: 560px;
    height: auto;
    aspect-ratio: 527 / 108;
    object-fit: contain;
    margin-bottom: var(--s-2);
  }

  .a2e-agent__deco {
    position: absolute;
    z-index: 1;
    display: none;          /* 1024 以下不出现，和原来那三张卡一致 */
    height: auto;
    max-width: none;
    pointer-events: none;
    user-select: none;
  }
  .a2e-agent__deco--creative    { top: 30%;    left: 7.24%;  width: 13%; }
  .a2e-agent__deco--visualizing { top: 15.85%; left: 67.9%;  width: 8.17%; }
  .a2e-agent__deco--marketing   { top: 14%;    right: 6%;    width: 10%; }
  .a2e-agent__deco--production  { bottom: 0;   left: 74%;    width: 13%; }

  /* 宽屏走单行，窄了自己折。不设 max-width —— 换行交给可用宽度决定，
     由 .a2e-agent__body 的 padding-inline 划出中间安全区（见断点一节）。
     真折行时 balance 让两行长度接近。 */
  .a2e-agent__title {
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: clamp(calc(var(--fs-xl) * 1.03), 3.6vw, calc(var(--fs-4xl) * 1.03));
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--c-text);
    text-wrap: balance;
  }
  .a2e-agent__desc {
    margin: 0 auto;
    max-width: 46ch;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: color-mix(in srgb, transparent, var(--c-text) 80%);
    text-wrap: balance;
  }
  .a2e-agent__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    margin-top: 10px;
  }
  /* 深底上的描边按钮：这块面板底色是 --c-ink，比 --surface 还深，
     幽灵按钮默认的 --line 描边在这里几乎看不见，提到 glass-border。 */
  .a2e-agent__alt {
    padding: 13px 22px;
    border-color: var(--glass-border);
    font-size: 15px;
  }

  /* ==========================================================
     12 · 探索更多
     ========================================================== */

  .a2e-more { text-align: center; }
  .a2e-more__title {
    margin: 0 0 var(--s-6);
    font-family: var(--font-display);
    font-size: clamp(calc(var(--fs-xl) * 1.03), 3.4vw, calc(var(--fs-3xl) * 1.03));
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--c-text);
  }
  .a2e-more__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 1080px;
    margin: 0 auto;
  }


  /* ==========================================================
     13 · 页脚（mint 底，文字一律 --accent-on）
     ========================================================== */

  .a2e-foot {
    background: var(--accent);
    color: var(--accent-on);
    padding: 64px var(--a2e-gutter) 28px;
  }
  /* 页脚是站点地图：8 列产品分组，条目数从 3 到 24 不等，
     所以列高必然参差，align-items: start 让它们顶部对齐。 */
  /* 手机单列：每一列都是可折叠的一段。768 起摊开成多列，
     1280 起回到设计稿那种「标题占左列 + 内容列在右」的排法。 */
  .a2e-foot__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4) var(--s-5);
    align-items: start;
  }
  .a2e-foot__head {
    grid-column: 1 / -1;
    margin: 0;
    max-width: 340px;
    text-wrap: balance;
    font-family: var(--font-display);
    font-size: clamp(calc(28px * 1.03), 3.2vw, calc(46px * 1.03));
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--accent-on);
  }
  .a2e-foot__nav {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  /* 折叠状态挂在原生 checkbox 上，不发明 .is-open。
     !! 不用 <details>：它关闭时内容盒子宽度是 0，桌面端没法用 CSS 强制
        展开，而我们正需要「手机折叠、桌面常开」。 */
  .a2e-foot__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .a2e-foot__toggle:focus-visible + .a2e-foot__title {
    outline: 2px solid var(--accent-on);
    outline-offset: 2px;
  }

  .a2e-foot__links {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .a2e-foot__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-sm);
    line-height: 1;
    letter-spacing: .04em;
    color: color-mix(in srgb, transparent, var(--accent-on) 66%);
  }
  /* 折叠指示箭头。只在手机出现，展开时转 180°。 */
  .a2e-foot__title::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: var(--s-2);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s ease;
  }
  .a2e-foot__toggle:checked + .a2e-foot__title::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  .a2e-foot__link {
    font-size: 15px;
    line-height: 1.15;
    color: var(--accent-on);
  }
  .a2e-foot__link:hover { color: var(--accent-on); text-decoration: underline; }

  .a2e-foot__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) 28px;
    margin-top: 72px;
  }
  .a2e-foot__meta {
    font-size: var(--fs-sm);
    color: color-mix(in srgb, transparent, var(--accent-on) 78%);
  }
  .a2e-foot__social { display: flex; flex-wrap: wrap; gap: 26px; }
  .a2e-foot__social .a2e-foot__link { font-size: var(--fs-sm); }


  /* ==========================================================
     14 · 断点

     设计稿实际用了三个阈值：768、1024、1280。交接 README 只写了
     768 / 1280 两个 —— 1024 处理的是六宫格 2→3 列、智能体浮层卡
     的显隐、以及推广大卡的基准宽度。以源文件为准，已在 NOTES 里
     标出这处出入待设计确认。
     ========================================================== */

  /* ==========================================================
     12 · 列表页（/case/）
     ========================================================== */

  /* 面包屑不在这一节 —— 它是四套模板共用的，规则统一在「页内容器与面包屑」
     一节。这里原有一份重复定义，2026-08-05 已删，见那一节的说明。 */

  .a2e-count { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--text-mute); }
  .a2e-count__n { color: var(--accent); }

  /* 控制条吸顶在导航下方。
     !! z-index 必须低于导航（--z-pop: 20）。「产品」大菜单是导航的子节点、
        在导航那个层叠上下文里，控制条一旦 >= 20 就会盖住展开的面板一角。 */
  .a2e-ctrl-sec {
    position: sticky;
    top: var(--a2e-nav-h);
    z-index: calc(var(--z-pop) - 2);
  }
  .a2e-ctrl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    padding: 14px 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
  }
  /* tab 横向可滚，窄屏放不下 4 个中文作者名。滚动条藏掉。 */
  .a2e-ctrl__tabs {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    overflow-x: auto;
    max-width: 100%;
    padding: 2px;
    scrollbar-width: none;
  }
  .a2e-ctrl__tabs::-webkit-scrollbar { display: none; }

  .a2e-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-mute);
    font-family: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
  }
  .a2e-tab:hover { border-color: var(--glass-border); background: var(--surface-2); color: var(--text); }
  /* 状态走原生属性，不发明 .is-active。 */
  .a2e-tab[aria-current="true"] {
    border-color: transparent;
    background: var(--accent);
    color: var(--accent-on);
  }
  .a2e-tab__n { font-size: 11px; opacity: .72; }

  .a2e-case__empty { margin: var(--s-6) 0 0; text-align: center; color: var(--text-mute); }

  /* 案例格的作者名。落地页那批图注删掉了（每块重复同一句话），
     这里保留是因为**每块的作者不一样**，是真信息不是装饰。 */
  .a2e-case__cap {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 34px var(--s-3) 11px;
    font-size: var(--fs-xs);
    color: var(--c-text);
    background: linear-gradient(180deg,
      transparent,
      color-mix(in srgb, transparent, var(--c-void) 62%) 46%,
      color-mix(in srgb, transparent, var(--c-void) 92%));
    pointer-events: none;
  }
  /* 整块可点这次是 button 不是 a（不跳页，开浮层），所以要清掉按钮默认样式。 */
  .a2e-case__open {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }

  /* --- 浮层预览 --- */
  .a2e-preview {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
  }
  .a2e-preview[hidden] { display: none; }
  .a2e-preview__scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, transparent, var(--c-void) 78%);
  }
  .a2e-preview__card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    animation: a2eDrop .22s ease both;
  }
  .a2e-preview__media { background: var(--c-void); }
  /* 案例全是 9:16。给个视口上限，不然竖视频在矮屏上会顶出卡片。 */
  .a2e-preview__video {
    display: block;
    width: 100%;
    max-height: 56vh;
    aspect-ratio: 9 / 16;
    object-fit: contain;
  }
  .a2e-preview__side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
    overflow-y: auto;
  }
  .a2e-preview__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
  .a2e-preview__author {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
    color: var(--text);
  }
  .a2e-preview__meta { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--text-mute); }
  .a2e-preview__caption { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-mute); }
  /* 原平台链接。用 accent 而不是正文色 —— 它是这一层里唯一的外跳动作，
     要和「上一条 / 下一条」那两个站内按钮区分开。 */
  .a2e-preview__origin {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    align-self: flex-start;
    font-size: var(--fs-sm);
    color: var(--accent);
  }
  .a2e-preview__origin:hover { text-decoration: underline; }
  .a2e-preview__origin[hidden] { display: none; }

  .a2e-preview__nav { display: flex; gap: var(--s-2); margin-top: auto; }
  .a2e-preview__x {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
  }
  .a2e-preview__x:hover { border-color: var(--glass-border); color: var(--accent); }

  /* 浮层开着时锁滚动。属性挂在 <html> 上，由 JS 写原生属性。 */
  :root[data-a2e-lock] { overflow: hidden; }


  @media (min-width: 768px) {
    .a2e-lp { --a2e-card-w: 360px; }

    .a2e-nav__burger { display: none; }
    .a2e-nav__links  { display: flex; }
    .a2e-mobile,
    .a2e-nav__burger[aria-expanded="true"] ~ .a2e-mobile { display: none; }

    .a2e-promo       { flex: 0 0 300px; }
    .a2e-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .a2e-model__col   { flex: 0 0 340px; }
    .a2e-model__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .a2e-model__stage { height: 460px; }

    .a2e-reel { aspect-ratio: 16 / 9; --a2e-reel-inset: 74px; }
    .a2e-reel__corner { display: block; }

    .a2e-gallery__cols { --a2e-gallery-n: 3; height: 760px; }

    .a2e-works--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: 1 / .93; }
    .a2e-works--tall { grid-template-columns: repeat(3, minmax(0, 1fr)); aspect-ratio: 1 / .9; }

    .a2e-agent { aspect-ratio: 5 / 2; }

    .a2e-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 摊开之后标题不再是折叠头：箭头收掉，鼠标也别变成手型。 */
    .a2e-foot__title::after { display: none; }
    .a2e-foot__title { cursor: default; justify-content: flex-start; }
  }

  @media (min-width: 768px) {
    /* 浮层两栏：竖视频左、文案右。420px 单栏在宽屏上太窄。 */
    .a2e-preview__card { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); max-width: 760px; }
    .a2e-preview__video { max-height: 76vh; }
    .a2e-cta { padding: 56px 40px; }
  }

  @media (min-width: 1024px) {
    .a2e-promo       { flex: 0 0 340px; }
    .a2e-quick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* 装饰图从这个断点开始出现。实测中间安全区是面板宽的 63.8%
       （左图占到 20.2%、右图从 84% 开始），文字区取 60% 留出余量。
       用百分比而不是固定 px：装饰图本身也是按百分比定位的，会一起缩。 */
    /* 页脚 3 列时高到 1600px（视频 24 条和图片 22 条各占一行的高度），
       4 列能让它们并排到同一行，整体矮下来约 600px。 */
    .a2e-foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .a2e-agent__deco { display: block; }
    .a2e-agent__body { padding-inline: 20%; }
  }

  @media (min-width: 1280px) {
    .a2e-lp { --a2e-card-w: 512px; }

    .a2e-promo { flex: 0 0 512px; }

    .a2e-model__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .a2e-reel { aspect-ratio: 21 / 9; }

    .a2e-gallery__cols { --a2e-gallery-n: 4; }

    .a2e-works--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); aspect-ratio: 1 / .46; }
    .a2e-works--tall { grid-template-columns: repeat(5, minmax(0, 1fr)); aspect-ratio: 1 / .54; }

    .a2e-agent { aspect-ratio: 16 / 5; }

    /* 回到设计稿的排法：标题占左边一列，内容列在右边。
       设计稿当时是 4 个内容列，现在按分组是 5 个。 */
    .a2e-foot__grid { grid-template-columns: minmax(200px, 1fr) repeat(5, minmax(0, 1fr)); }
    .a2e-foot__head { grid-column: auto; }
  }

  /* 移动端点击目标不小于 44px。 */
  @media (max-width: 767px) {
    /* 页脚每列折叠。全量 5 列在手机上摊开有 70 多条，光「视频」就 24 条。 */
    .a2e-foot__links { display: none; }
    .a2e-foot__toggle:checked ~ .a2e-foot__links { display: flex; }
    .a2e-foot__nav {
      padding-bottom: var(--s-3);
      border-bottom: 1px solid color-mix(in srgb, transparent, var(--accent-on) 16%);
    }
    .a2e-foot__title {
      padding-block: var(--s-3);   /* 点击目标凑够 44px */
      cursor: pointer;
    }

    .a2e-nav__burger { display: flex; width: 44px; height: 44px; }
    .a2e-nav__links  { display: none; }
    .a2e-lp { --a2e-card-w: calc(100vw - 64px); }
    .a2e-mobile__link { padding-block: var(--s-3); }
  }
}

/* ============================================================
   模型详情页（预告形态）
   来源：Claude Design「A2E 模型详情页.dc.html」

   这一批组件不属于落地页，但共用同一个 @layer a2e-components ——
   它们是 a2e 的组件层，不是某一个页面的样式表。文件名叫 landing.css
   是历史原因。
   ============================================================ */

@layer a2e-components {

  @keyframes a2eMarquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  /* ---- 公告跑马灯 ---- */
  .a2e-ticker {
    display: block;
    padding: 11px 0;
    overflow: hidden;
    background: linear-gradient(90deg, var(--c-blue-deep), color-mix(in srgb, var(--c-blue-deep), black 30%));
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  .a2e-ticker:hover { --a2e-mq-play: paused; }

  /* 跑马灯轨道必须含两份完全相同的内容：关键帧走 -50%，正好是一份的宽度，
     所以第二份接上第一份的位置，循环看不出接缝。第二份对辅助技术隐藏。 */
  .a2e-marquee__track {
    display: flex;
    width: max-content;
    animation-name: a2eMarquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--a2e-mq-dur, 60s);
    animation-direction: var(--a2e-mq-dir, normal);
    /* 两级兜底：hover 暂停 → 全局动效开关 → running */
    animation-play-state: var(--a2e-mq-play, var(--a2e-motion, running));
  }
  .a2e-ticker__group {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-right: 40px;
  }
  .a2e-ticker__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--c-text);
  }
  .a2e-ticker__dot {
    width: 5px;
    height: 5px;
    border-radius: var(--r-full);
    background: var(--accent);
  }

  /* ---- 页内容器与面包屑 ---- */
  .a2e-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding-inline: var(--a2e-gutter);
  }

  /* !! 这套规则原先在「12 · 列表页」章节还有一份完全重复的副本，且那份是
        **退化**的：`margin: 26px 0 0` 的简写把下边距归零（原意只是加上边距），
        font-size 写成裸值 13px，`a` 的 transition 也丢了。同层后写的胜出，
        于是面包屑与其下方 chip 的实测间距为 0 —— 两个盒子 y 坐标完全重合。
        2026-08-05 合并成这一份，列表页那份已删。改之前先确认没有第二处定义。 */
  .a2e-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin: 26px 0 22px;
    font-size: var(--fs-xs);
    line-height: 1;
    color: var(--text-mute);
  }
  .a2e-crumb a { color: var(--text-mute); transition: color .18s ease; }
  .a2e-crumb a:hover { color: var(--accent); }
  .a2e-crumb__sep { opacity: .5; }
  .a2e-crumb__here { color: var(--text); }

  /* ---- 模型 Hero：通栏背景视频 ----
     参考 dreamina 的 Seedance 2.5 首屏：一条全幅循环视频铺底，文案压在上面。

     !! 文字压在任意视频帧上，对比度不能靠运气。所以中间必有一层
        --c-ink 的径向 scrim（中心 88%），底边再渐变到 --bg 与页面接上。
        实测封面在文案区的平均亮度 → 见 NOTES；换素材后要重测。 */
  .a2e-mhero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .a2e-mhero__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* !! 这层的密度直接决定文字读不读得出来，改之前先看这两个数：

       对**本条素材**（标题区实测均值 119）：
         55% ink → 合成色 57 → 亮度 .0409 → --text 对它 9.69  ✔ AAA
       对**纯白帧**这个理论最坏情况：
         55% ink → 合成色 118 → 亮度 .1812 → --text 对它 3.81  ✗ 不达 AA

       也就是说：**这个亮度是为当前素材调的，不再是对任意素材都成立的
       上界。** 换视频素材必须重测标题区的平均亮度（做法见 NOTES）。
       上一版 68% 是按纯白帧取的，安全但画面发闷。

       另外：这里能放到 55%，前提是 hero 里的文字全部是不透明的
       --c-text。之前那版用 88% 透明度，同样亮度下会再掉一档。 */
    background:
      linear-gradient(180deg, transparent 0, transparent 64%, var(--bg) 100%),
      radial-gradient(92% 86% at 50% 46%,
        color-mix(in srgb, transparent, var(--c-ink) 55%) 0 42%,
        color-mix(in srgb, transparent, var(--c-ink) 62%) 76%,
        color-mix(in srgb, transparent, var(--c-ink) 72%) 100%);
  }

  /* 视频底上不用 --text-mute（对 55% ink 只有 1.9），也不用半透明 ——
     全部走不透明的 --c-text，把对比度的余量留给 scrim。 */
  .a2e-mhero--full .a2e-mhero__sub,
  .a2e-mhero--full .a2e-mhero__others-title,
  .a2e-mhero--full .a2e-pill {
    color: var(--c-text);
  }
  .a2e-mhero--full .a2e-pill { border-color: color-mix(in srgb, transparent, var(--c-text) 30%); }
  .a2e-mhero--full .a2e-pill:hover { color: var(--accent); border-color: var(--glass-border); }
  /* 通栏形态下辉光只留一圈内边，不再画描边（没有卡片边界了）。 */
  .a2e-mhero--full .a2e-mhero__glow {
    box-shadow: inset 0 0 160px 20px color-mix(in srgb, transparent, var(--accent) 10%);
  }
  /* hero 铺到屏幕最顶，导航条浮在它上面（顶部时导航是透明的，
     正好透出视频）。所以文案要自己让开导航那 72px。 */
  .a2e-mhero--full .a2e-mhero__body {
    padding: calc(var(--a2e-nav-h) + 48px) var(--a2e-gutter) 72px;
  }

  /* ---- 模型 Hero ---- */
  .a2e-mhero {
    position: relative;
    padding: 40px 22px 44px;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--c-ink);
    box-shadow: inset 0 0 0 1px var(--line);
  }

  /* !! 必须排在 .a2e-mhero 之后。两者特异性都是 (0,1,0)，同分时靠文档
     顺序定胜负 —— 放在前面的话，基类的 border-radius / padding /
     box-shadow 会把这里的覆盖压掉，页面上就是「通栏 hero 带圆角」。 */
  .a2e-mhero--full {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    /* 满屏。用 100svh 而不是 100vh —— 移动端浏览器的地址栏会伸缩，
       100vh 在收起状态下会把底部内容顶出屏幕。 */
    min-height: 100svh;
    display: grid;
    place-items: center;
  }
  /* 呼吸辉光：整层透明度 .62 ↔ 1，与实时数字人面板同一条 keyframe。 */
  .a2e-mhero__glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    animation: a2eBreathe 4.2s ease-in-out infinite;
    animation-play-state: var(--a2e-motion, running);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, transparent, var(--accent) 40%),
      inset 0 0 90px 10px color-mix(in srgb, transparent, var(--accent) 12%);
  }
  .a2e-mhero__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
  }
  .a2e-mhero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 13px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, transparent, var(--accent) 14%);
    box-shadow: inset 0 0 0 1px var(--glass-border);
    font-size: var(--fs-xs);
    line-height: 1;
    letter-spacing: .1em;
    color: var(--accent);
  }
  .a2e-mhero__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--r-full);
    background: var(--accent);
  }
  .a2e-mhero__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(calc(var(--fs-3xl) * 1.03), 5.4vw, calc(var(--fs-5xl) * 1.03));
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--text);
    text-wrap: balance;
  }
  .a2e-mhero__sub {
    margin: 0;
    max-width: 56ch;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--text-mute);
    text-wrap: pretty;
  }
  .a2e-mhero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-1);
  }
  .a2e-mhero__others {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-3);
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
  }
  .a2e-mhero__others-title {
    width: 100%;
    margin-bottom: var(--s-1);
    font-family: var(--font-num);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--text-mute);
  }

  /* 胶囊形的次级入口。与 .a2e-btn--ghost 的区别只有圆角与内边距，
     但它成排出现且不承担主行动，所以单独一个类而不是加变体。 */
  .a2e-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: var(--s-2) 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    font-size: 13px;
    color: var(--text-mute);
    white-space: nowrap;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
  }
  .a2e-pill:hover {
    border-color: var(--glass-border);
    background: var(--surface-2);
    color: var(--accent);
  }

  /* ---- 作品墙：两行反向跑马灯 ---- */
  .a2e-showcase { position: relative; }
  .a2e-showcase__row {
    display: flex;
    overflow: hidden;
    padding: 6px 0;
  }
  .a2e-showcase__row:hover { --a2e-mq-play: paused; }
  .a2e-showcase__group {
    display: flex;
    gap: var(--s-3);
    padding-right: var(--s-3);
  }
  .a2e-showcase__tile {
    flex: none;
    width: 220px;
  }
  /* 边缘渐隐用一层 --bg 渐变盖上去，**不用 mask-image** ——
     轨道本身是 transform，父级一带 mask 就会把子级提升为独立合成层，
     圆角裁剪当场失效（落地页图块上踩过这个坑）。 */
  .a2e-showcase__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    pointer-events: none;
  }
  .a2e-showcase__fade--l { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
  .a2e-showcase__fade--r { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

  /* ---- 核心能力：图文交替 ---- */
  .a2e-caps {
    display: flex;
    flex-direction: column;
    gap: 44px;
  }
  .a2e-cap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: center;
  }
  .a2e-cap__text { min-width: 0; order: 2; }
  .a2e-cap__media {
    position: relative;
    margin: 0;
    min-width: 0;
    order: 1;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .a2e-cap__idx {
    font-family: var(--font-num);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .1em;
    color: var(--accent);
  }
  .a2e-cap__title {
    margin: var(--s-3) 0 0;
    font-family: var(--font-display);
    font-size: calc(var(--fs-xl) * 1.03);
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    color: var(--text);
    text-wrap: balance;
  }
  .a2e-cap__desc {
    margin: var(--s-3) 0 0;
    max-width: 46ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-mute);
    text-wrap: pretty;
  }
  .a2e-cap__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
  }
  .a2e-cap__tag {
    padding: 6px 11px;
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--fs-xs);
    color: var(--text-mute);
  }

  /* ---- 更多模型 ---- */
  .a2e-models {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 22px;
  }
  .a2e-mcard {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    transition: border-color .18s ease, background .18s ease;
  }
  .a2e-mcard:hover {
    border-color: var(--glass-border);
    background: var(--surface-2);
    color: var(--text);
  }
  /* 缩略图自身不给圆角，靠父级 overflow:hidden 裁 —— 上下都贴边，
     自己带圆角会在卡片角上露出一线底色。 */
  .a2e-mcard__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .a2e-mcard__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4);
  }
  .a2e-mcard__name { font-size: var(--fs-md); color: var(--text); }
  .a2e-mcard__desc {
    font-size: 13px;
    line-height: var(--lh-body);
    color: var(--text-mute);
  }

  /* --- 时间流（/news/）--- */
  .a2e-stream[hidden] { display: none; }

  /* 月份头吸顶在控制条下方。控制条自己是 sticky top:var(--a2e-nav-h)，
     所以这里要再加上它的高度，否则两条会叠在一起。

     !! z-index 必须低于控制条（--z-pop - 2 = 18），更要低于导航（--z-pop = 20）。
        原先这里硬编码了 20，与导航同级 —— 同 z-index 时由文档顺序定胜负，
        而正文排在导航之后，于是月份头**盖住了展开的「产品」大菜单**
        （2026-08-06 用户目测发现，截图里「2026 年 2 月」压在菜单上）。
        上面 .a2e-ctrl-sec 那条注释早就写明了这个约束，这里当时没跟上。
        改用 token 相对值，以后调 --z-pop 时整组一起动。 */
  .a2e-stream__month {
    position: sticky;
    top: calc(var(--a2e-nav-h) + 66px);
    z-index: calc(var(--z-pop) - 3);
    margin: var(--s-6) 0 var(--s-4);
    padding: 7px 0;
    background: var(--bg);
    font-size: var(--fs-sm);
    letter-spacing: .06em;
    color: var(--text-mute);
  }
  .a2e-stream__list { margin: 0; padding: 0; list-style: none; }

  .a2e-stream__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: 0 0 var(--s-5) var(--s-5);
  }
  /* 轴线。画在每条的左侧，最后一条截断在圆点处 —— 不截的话线会拖到
     底部空白里，看着像还有一条没加载出来。 */
  .a2e-stream__item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
  }
  .a2e-stream__item:last-child::before { bottom: auto; height: 14px; }
  .a2e-stream__dot {
    position: absolute;
    left: 0;
    top: 7px;
    width: 11px;
    height: 11px;
    border-radius: var(--r-full);
    background: var(--accent);
    /* 描边用页面底色，让圆点把轴线"咬断" */
    box-shadow: 0 0 0 3px var(--bg);
  }
  .a2e-stream__date { font-size: var(--fs-xs); color: var(--text-mute); }
  .a2e-stream__body { min-width: 0; }
  .a2e-stream__title {
    margin: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-tight);
    color: var(--text);
  }
  .a2e-stream__title a { transition: color .18s ease; }
  .a2e-stream__title a:hover { color: var(--accent); }
  .a2e-stream__desc {
    margin: 7px 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--text-mute);
  }
  /* 缩略图窄屏隐藏 —— 220px 的图挤进 375px 视口只会把标题压成两三个字一行。 */
  .a2e-stream__thumb { display: none; }


  /* ==========================================================
     13 · 文章详情页
     ========================================================== */

  /* 文章页整体收窄。落地页版心是 1320，但长文页不该用满 ——
     标题、封面、正文三者要左对齐成一条边，否则正文限在 760px、
     上面的标题却铺到 1320，右边会空出三百多像素的"缺口"。
     200(目录) + 56(gap) + 760(正文) = 1016，取 1040 留一点余量。 */
  .a2e-article { max-width: 1040px; }
  .a2e-lp--article .a2e-sec { max-width: calc(1040px + var(--a2e-gutter) * 2); margin-inline: auto; }

  .a2e-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: var(--fs-xs);
    color: var(--text-mute);
  }

  .a2e-article__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .a2e-article__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--text);
    text-wrap: balance;
  }
  .a2e-article__lede {
    margin: 0;
    max-width: 62ch;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--text-mute);
  }
  .a2e-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--text-mute);
  }
  .a2e-article__dot { opacity: .5; }
  .a2e-copy {
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-mute);
    font-family: inherit;
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
  }
  .a2e-copy:hover { border-color: var(--glass-border); color: var(--accent); }
  /* 复制成功的反馈走原生属性，文案在 CSS 里 —— JS 只翻属性不写文字。 */
  .a2e-copy[data-copied] { color: var(--accent); border-color: var(--accent); }
  .a2e-copy[data-copied]::after { content: " ✓"; }

  .a2e-article__cover {
    margin: var(--s-6) 0 0;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--surface-2);
  }
  .a2e-article__cover img { width: 100%; height: auto; display: block; }

  .a2e-article__body { display: grid; grid-template-columns: 1fr; gap: var(--s-6); margin-top: var(--s-6); }

  /* --- 侧边目录 --- */
  /* 28 篇里 16 篇正文完全没有小标题，那些页面这一块整个不渲染，
     正文用 --wide 占满。所以别把两列写死在 .a2e-article__body 上。 */
  .a2e-toc__toggle {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
  }
  .a2e-toc__list {
    display: none;
    margin: var(--s-2) 0 0;
    padding: 0 0 0 var(--s-3);
    list-style: none;
    border-left: 1px solid var(--line);
  }
  .a2e-toc__toggle[aria-expanded="true"] + .a2e-toc__list { display: block; }
  .a2e-toc__item a {
    display: block;
    padding: 7px 0 7px var(--s-3);
    margin-left: calc(var(--s-3) * -1 - 1px);
    border-left: 2px solid transparent;
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    color: var(--text-mute);
    transition: color .18s ease, border-color .18s ease;
  }
  .a2e-toc__item a:hover { color: var(--text); }
  .a2e-toc__item[aria-current="true"] a { border-left-color: var(--accent); color: var(--accent); }

  /* --- 正文元素全集 ---
     作用域收在 .a2e-prose 里。WP 输出的是 Gutenberg 的类名，
     这里只按标签选，不依赖 wp-block-* —— 那批类名会随编辑器版本变。 */
  .a2e-prose { min-width: 0; color: var(--text); font-size: var(--fs-md); line-height: var(--lh-body); }
  .a2e-prose > * { margin: 0 0 var(--s-4); }
  .a2e-prose > :last-child { margin-bottom: 0; }
  .a2e-prose h2, .a2e-prose h3, .a2e-prose h4 {
    margin: var(--s-6) 0 var(--s-3);
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    letter-spacing: -.01em;
    color: var(--text);
    /* 锚点跳转要留出吸顶导航的高度，否则标题会被导航压住。 */
    scroll-margin-top: calc(var(--a2e-nav-h) + 38px);
  }
  .a2e-prose h2 { font-size: var(--fs-xl); }
  .a2e-prose h3 { font-size: var(--fs-lg); }
  .a2e-prose h4 { font-size: var(--fs-md); color: var(--text-mute); }
  .a2e-prose p { margin: 0 0 var(--s-4); }
  .a2e-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .a2e-prose strong { color: var(--text); }
  .a2e-prose ul, .a2e-prose ol { margin: 0 0 var(--s-4); padding-left: 1.4em; }
  .a2e-prose li { margin: 0 0 var(--s-2); }
  .a2e-prose li::marker { color: var(--text-mute); }
  .a2e-prose blockquote {
    margin: var(--s-5) 0;
    padding: var(--s-2) 0 var(--s-2) var(--s-4);
    border-left: 2px solid var(--accent);
    color: var(--text-mute);
  }
  .a2e-prose code {
    padding: 2px 6px;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-family: var(--font-num);
    font-size: .92em;
  }
  /* 代码块横向滚动 —— 窄屏下不换行，让它自己滚，别把版心撑破。 */
  .a2e-prose pre {
    overflow-x: auto;
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-family: var(--font-num);
    font-size: var(--fs-sm);
    line-height: 1.6;
  }
  .a2e-prose pre code { padding: 0; background: none; }
  /* 表格同理，套一层滚动容器由 JS 加不了（正文是 WP 出的），
     所以直接给 table 一个 display:block + overflow。 */
  .a2e-prose table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
  }
  .a2e-prose th, .a2e-prose td {
    padding: 10px var(--s-3);
    border: 1px solid var(--line-soft);
    text-align: left;
  }
  .a2e-prose th { background: var(--surface-2); color: var(--text); }
  .a2e-prose img { max-width: 100%; height: auto; border-radius: var(--r-sm); display: block; }
  .a2e-prose figure { margin: var(--s-5) 0; }
  .a2e-prose figcaption { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--text-mute); }
  /* WP 会给块级元素塞内联 style（对齐、字号、颜色）。契约禁的是**我们**
     写内联，编辑器出的那些管不了，但可以把最伤的两类压回来。 */
  .a2e-prose [style*="max-width"] { max-width: 100% !important; }

  /* --- 提示框（三档）---
     设计稿「正文元素全集」里列了三档提示框，此前一直没落地。信息页
     （用户协议 / 隐私政策）各有一个「【提示条款】/【特别提示】」的强调段，
     原先只是个 h4，与普通小标题无异，读者扫不到。

     色位沿用时间流变更类型那套，不新造：
       note  --info(blue)    一般说明
       warn  --warn(amber)   需要注意
       key   --accent(mint)  必读条款
     左边一条 3px 竖线 + 同色 8% 的底，亮色只出现在竖线上，
     不铺满整块 —— 大面积亮底配深字在长文里刺眼。 */
  .a2e-note {
    margin: var(--s-5) 0;
    padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
    border-left: 3px solid var(--info);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: color-mix(in srgb, var(--info) 8%, transparent);
  }
  .a2e-note > :first-child { margin-top: 0; }
  .a2e-note > :last-child { margin-bottom: 0; }
  .a2e-note__t {
    margin: 0 0 var(--s-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--info);
  }
  .a2e-note--warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
  .a2e-note--warn .a2e-note__t { color: var(--warn); }
  .a2e-note--key  { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .a2e-note--key .a2e-note__t { color: var(--accent); }

  /* --- 视觉隐藏（工具类）---
     给屏幕阅读器与搜索引擎留语义，但不占视觉空间。原先隐私政策页是把这
     一整套写成内联 style，光 !important 就 9 个（position/width/height/
     padding/margin/clip/white-space/border）—— 内联样式压不过任何选择器，
     只能靠 !important 自保。收成类之后一个都不需要。

     !! 用 clip-path 而不是老的 clip:rect()，且保留 1px 尺寸而非
        display:none —— 后者会让屏幕阅读器一起跳过，语义就白留了。 */
  .a2e-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* --- 上一篇 / 下一篇 --- */
  .a2e-pn-row { display: grid; grid-template-columns: 1fr; gap: var(--s-3); margin-top: var(--s-7); }
  .a2e-pn {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .18s ease, background .18s ease;
  }
  .a2e-pn:hover { border-color: var(--glass-border); background: var(--surface); }
  .a2e-pn__k { font-size: var(--fs-xs); color: var(--text-mute); }
  .a2e-pn__t { font-size: var(--fs-sm); line-height: var(--lh-tight); color: var(--text); }
  .a2e-pn--next { text-align: right; }

  /* --- 相关文章 / 教程列表卡片 --- */
  .a2e-rel-row { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
  /* !! 卡片内部用 subgrid，让「媒体 / 日期 / 标题」三行跨卡片对齐。
        封面画幅不统一时这是必须的：学习教程那 8 张里 MCP 那张是 3.76:1、
        其余是 2.38:1，媒体高度差 58px，用 flex 排的话后两行整体上移
        58px，一眼就看出没对齐。subgrid 让每一行取同排最高的那个，
        图片仍按自己的比例渲染、不裁切。
        降级：不支持 subgrid 的浏览器回退成普通 grid，即当前这种未对齐
        的样子 —— 不会坏，只是不齐。Chrome 117+ / Safari 16+ / FF 71+。 */
  .a2e-rel {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: var(--s-2);
    min-width: 0;
  }
  /* 画幅同 .a2e-work 一样由页面注入，默认 16/9。相关文章那三张是 16:9，
     学习教程列表的封面实测全是 760×320（2.38:1）与 768×204（3.76:1）——
     塞进 16:9 会把横条上下各裁掉约三成。这已是第三次撞上「设计稿的画幅
     假设与真实素材不符」（落地页瀑布流、/case/ 都栽过），所以不写死。 */
  .a2e-rel__media {
    display: block;
    aspect-ratio: var(--a2e-ratio, 16 / 9);
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--surface-2);
  }
  .a2e-rel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--a2e-dur, .28s) var(--a2e-ease);
  }
  .a2e-rel:hover .a2e-rel__media img { transform: scale(var(--a2e-lift, 1.06)); }
  .a2e-rel__cat { font-size: var(--fs-xs); color: var(--text-mute); }
  .a2e-rel__title {
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    color: var(--text);
    transition: color .18s ease;
  }
  .a2e-rel:hover .a2e-rel__title { color: var(--accent); }


  /* ---- 底部 CTA，四套模板共用 ----
     两种排布：列表页是「标题在左、按钮在右」一行摊开；模型详情页是居中一柱。
     !! 一度写成两条同名 .a2e-cta（一条在列表页那节、一条在这里），
        特异性相同、靠文档顺序决胜，结果列表页那版被这版整个盖掉。
        合成基类 + --center 变体。 */
  .a2e-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 34px 22px;
    border-radius: var(--r-lg);
    /* 与 .a2e-promo 同一个决定：底从 blue-deep 换成 blue，渐变从「掺黑」
       翻成「掺白 → 原色」。理由见那里的注释。 */
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--c-blue), white var(--tone-amt)), var(--c-blue));
  }
  .a2e-cta--center {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 18px;
  }
  .a2e-cta__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(var(--fs-xl), 3.2vw, var(--fs-3xl));
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--c-text);
    text-wrap: balance;
  }
  .a2e-cta--center .a2e-cta__title {
    max-width: 22ch;
    font-size: clamp(calc(var(--fs-xl) * 1.03), 4vw, calc(var(--fs-4xl) * 1.03));
    line-height: 1.1;
  }
  .a2e-cta__go { white-space: nowrap; }
  .a2e-cta__desc {
    margin: 0;
    max-width: 48ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: color-mix(in srgb, transparent, var(--c-text) 78%);
  }

  /* ---- 次级区块标题 ----
     比主区块的 h2 小一档，用裸 token 而不是 clamp。设计稿刻意这么分的。 */
  .a2e-sec__title--sub {
    display: block;
    margin-bottom: var(--s-6);
    font-size: calc(var(--fs-xl) * 1.03);
    color: var(--text);
  }

  /* ---- 模型详情页的断点 ----
     只有一档 768（设计稿把 1024/1280 的差异改用 flex 换行表达）。 */
  /* 内容装得下的那一面（图生视频 12 块，内容 566px）。
     唇形同步是 16 块、内容 1801px，被固定高 760px 裁掉大半，底部渐隐是
     「下面还有」的提示；这一面没得裁，直接套 760px 会在底下空出 194px，
     渐隐落在空气里、按钮浮在空气上。

     所以高度改成跟内容走，遮罩照旧。渐隐会吃掉最后一排的下缘 ——
     这是**要的**，唇形同步那面就是这个样子。
     !! 别再往下加 padding 当「渐隐跑道」。试过 48px 和 104px：盒底被推到
        所有内容之下，渐隐落在空气里，按钮也从图块上掉下去、和上面完全分开。
        按钮是 bottom:34px 的绝对定位，盒底在哪它就在哪。 */
  .a2e-gallery__cols--fit {
    height: auto;
  }

  /* 文生图只有 6 块。断点在 1280 以上给的是 4 列，6 块分成 2/2/1/1，
     底边参差得离谱；压到 3 列正好每列 2 块。
     !! 必须裹在 min-width:1280 里 —— 1024–1279 本来就是 3 列，
        写在外面会把移动端的 2 列也顶成 3 列。 */
  @media (min-width: 1280px) {
    .a2e-gallery__cols--trio { --a2e-gallery-n: 3; }
  }

  /* ==========================================================
     14 · 品牌资源页（/media-assets/）

     两个新组件，都只在这一页用。加它们而不是拿功能卡凑，是因为
     色卡和下载件要的是「精确展示一个取值」，功能卡要的是「讲一件事」，
     硬套会得到一堆没有内容的卡片壳。

     组件四字段
       Gutenberg 实现  wp:html（整页一块，与其余页面一致）
       CSS 类名        见下
       所属 layer      a2e-components
       消费的 token    --surface --line --r-md --r-sm --s-* --fs-* --font-num
                       --c-mint --c-blue --c-blue-deep --c-navy --c-text
     ========================================================== */

  /* --- 色卡 ---
     底走单向明度渐变（复合 .a2e-tone / .a2e-tone--dk 两个工具类），
     不是平涂 —— 规范第 1 页说的就是这个形态，展示它自己时更不该走样。
     !! 变体只设 --tone 与 --sw-on，渐变方向由工具类决定。
        blue-deep 那张必须同时带 .a2e-tone--dk 和 --sw-on: var(--c-text)，
        少一个就是规范里反复警告的那个错。 */
  .a2e-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-3);
  }
  .a2e-swatch {
    display: grid;
    gap: var(--s-1);
    align-content: space-between;
    min-height: 150px;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    color: var(--sw-on, var(--c-navy));
  }
  .a2e-swatch--mint { --tone: var(--c-mint); }
  .a2e-swatch--blue { --tone: var(--c-blue); }
  .a2e-swatch--deep { --tone: var(--c-blue-deep); --sw-on: var(--c-text); }
  /* 功能色多一道内环，提示它不属于品牌色。用 inset 阴影不用 border：
     border 会被 .a2e-tone 的 background-image 之外的简写规则影响，
     而且改盒模型；这里只要一道视觉环。 */
  .a2e-swatch--fn { box-shadow: inset 0 0 0 3px var(--surface); }
  .a2e-swatch--amber { --tone: var(--c-amber); }
  .a2e-swatch--rose  { --tone: var(--c-rose); }

  .a2e-swatch__n { font-size: var(--fs-sm); font-weight: 500; }
  .a2e-swatch__h,
  .a2e-swatch__m { font-family: var(--font-num); font-size: var(--fs-xs); opacity: .84; }
  .a2e-swatch__c { font-family: var(--font-num); font-size: var(--fs-xs); font-weight: 500; }

  /* --- 下载件 ---
     一张预览 + 一行元数据 + 一个下载按钮。预览底色由 --dl-bg 给，
     因为透明底的 PNG 需要一个能看出「它是透明的」的底。 */
  .a2e-dls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
  }
  .a2e-dl {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  /* !! --dl-fg 必须跟 --dl-bg 成对设。内联的 SVG 预览走 currentColor，
     不给它就继承卡片的 --text —— 于是浅底那张变成浅底浅字，实测对比度
     **1.00，完全看不见**；深底那张也只是「碰巧可见」，颜色其实是正文色
     不是 mint，**预览和下载下来的文件不是一个颜色**。
     这是第 1 节那条「变体换色必须同时换 --*-on」的又一个实例。 */
  .a2e-dl__media {
    display: grid;
    place-items: center;
    margin: 0;
    padding: var(--s-5) var(--s-4);
    border-radius: var(--r-sm);
    background: var(--dl-bg, var(--c-void));
    color: var(--dl-fg, var(--c-mint));
  }
  .a2e-dl__media img,
  .a2e-dl__media svg { width: 100%; max-width: 190px; height: auto; display: block; }
  .a2e-dl--light { --dl-bg: var(--c-text); --dl-fg: var(--c-navy); }
  .a2e-dl--ink   { --dl-bg: var(--bg);     --dl-fg: var(--c-mint); }

  .a2e-dl__name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
  .a2e-dl__meta {
    margin: 0;
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
    color: var(--text-mute);
  }
  .a2e-dl__go { margin-top: auto; align-self: flex-start; }

  @media (min-width: 768px) {
    /* 文章页：目录左栏 200px + 正文。没有目录的那 16 篇走 --wide 单列。 */
    .a2e-article__body { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-7); }
    .a2e-article__body--wide { grid-template-columns: minmax(0, 1fr); }
    /* !! 目录必须自己能滚。文章页那 12 篇最多 8 条小标题，一屏放得下；
          信息页不一样 —— 用户协议 23 条、隐私政策 18 条，按每条约 30px 算
          就是 690px / 540px，笔记本上直接超出视口，sticky 会把末尾几条
          永久推到屏幕外点不到。留 76px 给上下留白。 */
    .a2e-toc {
      position: sticky;
      top: calc(var(--a2e-nav-h) + 38px);
      align-self: start;
      max-height: calc(100vh - var(--a2e-nav-h) - 76px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .a2e-toc__toggle { display: none; }
    .a2e-toc__list { display: block; }
    /* 中文一行约 40 字。再宽扫读时回行会找错位置。 */
    .a2e-prose { max-width: 760px; }

    .a2e-pn-row { grid-template-columns: 1fr 1fr; }
    .a2e-rel-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* 时间流三列：日期 128px / 轴 22px / 内容。缩略图在最右侧。 */
    .a2e-stream__item {
      grid-template-columns: 128px 1fr auto;
      align-items: start;
      gap: 0 var(--s-4);
      padding-left: 0;
    }
    .a2e-stream__item::before { left: 139px; }
    .a2e-stream__dot { left: 134px; top: 6px; }
    .a2e-stream__date { padding-top: 2px; text-align: right; }
    .a2e-stream__thumb {
      display: block;
      width: 220px;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: var(--r-xs);
      background: var(--surface-2);
    }
    /* 特色图原始比例很杂（2.38 x17 / 1.78 x6 / 1.33 / 3.76 / 1.0），
       统一裁进 16:9 盒。 */
    .a2e-stream__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform var(--a2e-dur, .28s) var(--a2e-ease);
    }
    .a2e-stream__thumb:hover img { transform: scale(var(--a2e-lift, 1.06)); }

    .a2e-mhero { padding: 76px 64px; }
    /* 断点里的这条排在 --full 之后，同样会把它的 padding:0 压掉，
       所以要在这里再声明一次。同一个坑的第二处。 */
    .a2e-mhero--full { padding: 0; }
    .a2e-showcase__tile { width: 300px; }

    .a2e-caps { gap: 72px; }
    .a2e-cap {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 48px;
    }
    .a2e-cap__text  { order: 1; }
    .a2e-cap__media { order: 2; }
    /* 奇偶行左右互换 */
    .a2e-cap:nth-child(even) .a2e-cap__text  { order: 2; }
    .a2e-cap:nth-child(even) .a2e-cap__media { order: 1; }

    .a2e-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .a2e-cta { padding: 64px 40px; }
  }
}