:root{
    /* ============ 主题色: CodeTutor Blue (匹配 codetutor.cn 品牌色) ============
       基于网站 light-mode 色板,融入 dark-mode 品牌蓝为 accent
       oklch(270) 色相贯穿全部灰阶: 纸色/灰底/分割线均有蓝紫底调 */
    --paper:#f9fafd;          /* 主底色: 网站亮底 + 蓝底调 */
    --paper-rgb:249,250,253;
    --ink:#12161f;            /* 文字主色: 网站亮底前景 */
    --ink-rgb:18,22,31;
    --grey-1:#f0f2f6;         /* 浅灰底: 网站 muted */
    --grey-2:#dbdee6;         /* 中灰(分割线): 网站 border */
    --grey-3:#828690;         /* 暗灰(辅助文字): 冷灰蓝底调 */
    --accent:#4d69ff;         /* 高亮色: 网站亮底品牌蓝 */
    --accent-rgb:77,105,255;
    --accent-on:#ffffff;      /* accent 上的反色文字 */
    --accent-bright:#5c7bff;  /* 暗底高亮: 网站暗底品牌蓝 */

    /* ============ Carbon 文本角色 token (role-based,代替 opacity) ============
       亮底:  primary 主文 / secondary 次文 / helper 辅助 / placeholder 占位
       暗底:  inverse 自动反向 */
    --text-primary:#12161f;        /* = ink, 100% */
    --text-secondary:#6e717b;      /* 冷灰 55% L */
    --text-helper:#828690;         /* = grey-3 */
    --text-placeholder:#b5b7be;    /* 冷灰 78% L */
    --text-on-color:#ffffff;       /* accent/dark 反色 */
    --border-subtle:#e6e8ed;       /* 冷灰 93% L, 极细分隔 */
    --border-strong:#b5b7be;       /* 冷灰 78% L, 强分隔 */

    /* ============ 字体(跨主题固定) ============ */
    --sans:"Inter","Helvetica Neue","Helvetica","Arial","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
    --sans-zh:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei","微软雅黑",sans-serif;
    --mono:"JetBrains Mono","IBM Plex Mono","SF Mono","Cascadia Code","Consolas","Courier New",ui-monospace,monospace;

    /* ============ Carbon 2x Grid 间距模数 (基础 8px) ============
       参考: https://carbondesignsystem.com/elements/2x-grid/overview/
       任何 padding/gap/margin 优先用这套 token,确保 8px 基线对齐 */
    --sp-3:8px;     /* 02 token */
    --sp-4:12px;    /* 03 */
    --sp-5:16px;    /* 04 */
    --sp-6:24px;    /* 05 */
    --sp-7:32px;    /* 06 */
    --sp-8:40px;    /* 07 */
    --sp-9:48px;    /* 08 */
    --sp-10:64px;   /* 09 */
    --sp-11:80px;   /* 10 */
    --sp-12:96px;   /* 11 */
    --sp-13:160px;  /* 12 */

    /* ============ Carbon Motion tokens ============
       https://carbondesignsystem.com/guidelines/motion/overview/
       两套体系:productive (功能) 短 + 锐 / expressive (叙事) 长 + 软 */
    --ease-prod:cubic-bezier(.2,0,.38,.9);          /* productive standard */
    --ease-exp:cubic-bezier(.4,.14,.3,1);            /* expressive standard */
    --ease-entry-prod:cubic-bezier(0,0,.38,.9);     /* productive entrance */
    --ease-entry-exp:cubic-bezier(0,0,.3,1);         /* expressive entrance */
    --dur-fast-1:.07s;   /* 70ms */
    --dur-fast-2:.11s;   /* 110ms */
    --dur-mod-1:.15s;    /* 150ms */
    --dur-mod-2:.24s;    /* 240ms */
    --dur-slow-1:.4s;    /* 400ms */
    --dur-slow-2:.7s;    /* 700ms */

    /* 底部分页组件安全区: 主内容最低处不要进入这条区域 */
    --nav-safe-bottom:8vh;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    width:100%;height:100%;overflow:hidden;
    background:var(--paper);color:var(--ink);
    font-family:var(--sans),var(--sans-zh);
    font-feature-settings:"ss01","cv11";
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
  }

  /* ============ WebGL 网格背景 ============ */
  canvas.bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;opacity:.55;mix-blend-mode:multiply;pointer-events:none}
  body.dark-bg canvas.bg{mix-blend-mode:screen;opacity:.42}
  body.low-power canvas.bg,
  body.low-power canvas.ascii-bg{display:none!important}

  /* ============ Deck 容器 + 翻页 ============ */
  #deck{position:fixed;inset:0;width:10000vw;height:100vh;display:flex;flex-wrap:nowrap;transition:transform .9s cubic-bezier(.77,0,.175,1);z-index:10;will-change:transform}
  .slide{
    width:100vw;height:100vh;flex:0 0 100vw;
    position:relative;
    padding:5.5vh 5vw 7vh 5vw;
    display:flex;flex-direction:column;
    overflow:hidden;
    background:var(--paper);color:var(--ink);
  }
  .slide.grey{background:var(--grey-1)}
  .slide.dark{background:var(--ink);color:var(--paper)}
  .slide.dark .grey-only{display:none}
  .slide.accent{background:var(--accent);color:var(--accent-on)}
  .slide.accent .accent-block{background:var(--accent-on);color:var(--accent)}

  /* Hero 页透出网格背景多一点 */
  .slide.hero{background:transparent}
  .slide.hero.grey{background:rgba(var(--paper-rgb),.86);backdrop-filter:blur(1px)}
  .slide.hero.dark{background:rgba(var(--ink-rgb),.92);color:var(--paper)}

  /* ============ 装饰: 极细分隔线 + 点阵矩阵 ============ */
  .rule{width:100%;height:1px;background:currentColor;opacity:.18;margin:0}
  .rule.thick{height:2px;opacity:.85}
  .rule.accent{background:var(--accent);opacity:1;height:2px}
  .rule.v{width:1px;height:100%;margin:0}

  /* 点阵矩阵 (dot matrix) - 用 radial-gradient */
  .dots{
    background-image:radial-gradient(currentColor 1px, transparent 1px);
    background-size:12px 12px;
    background-position:0 0;
    opacity:.18;
  }
  .dots-fine{
    background-image:radial-gradient(currentColor 0.8px, transparent 0.8px);
    background-size:8px 8px;
    opacity:.14;
  }
  .dots-bold{
    background-image:radial-gradient(currentColor 1.4px, transparent 1.4px);
    background-size:18px 18px;
    opacity:.22;
  }

  /* ============ Chrome (顶部 meta) + Foot (底部) ============ */
  .chrome{
    display:flex;justify-content:space-between;align-items:flex-start;
    font-family:var(--mono);
    font-size:14px;letter-spacing:.16em;text-transform:uppercase;
    opacity:.7;margin-bottom:auto
  }
  .chrome .l,.chrome .r{display:flex;gap:1.6em;align-items:center}
  .chrome .sep{width:24px;height:1px;background:currentColor;opacity:.5}

  .foot{
    margin-top:auto;
    display:flex;justify-content:space-between;align-items:flex-end;
    font-family:var(--mono);
    font-size:14px;letter-spacing:.14em;text-transform:uppercase;
    opacity:.55;
    padding-top:2vh;
    border-top:1px solid currentColor;
    border-color:rgba(127,127,127,.25)
  }
  .foot .nb{font-family:var(--sans);font-weight:600;letter-spacing:.04em}

  /* ============ Tag / Kicker / Meta 标签 ============ */
  .kicker{
    font-family:var(--mono);
    font-size:14px;letter-spacing:.24em;text-transform:uppercase;
    opacity:.65;margin-bottom:2.4vh;
    display:inline-flex;align-items:center;gap:.8em
  }
  .kicker::before{
    content:"";width:24px;height:1px;background:currentColor;opacity:.6
  }
  .kicker.no-line::before{display:none}
  .kicker.accent{color:var(--accent);opacity:1;font-weight:600}

  .tag{
    display:inline-block;
    font-family:var(--mono);
    font-size:14px;letter-spacing:.18em;text-transform:uppercase;
    padding:5px 10px;border:1px solid currentColor;opacity:.85
  }
  .tag.solid{background:currentColor;color:var(--paper);border-color:transparent}
  .tag.accent{background:var(--accent);color:var(--accent-on);border-color:transparent;opacity:1}

  /* ============ 标题层级 (无衬线 · 极轻字重 · 极致字号对比) ============ */
  .h-hero{
    font-family:var(--sans),var(--sans-zh);
    font-weight:200;
    font-size:11vw;
    line-height:.92;
    letter-spacing:-.04em;
  }
  .h-hero-zh{
    font-family:var(--sans),var(--sans-zh);
    font-weight:200;
    font-size:8.4vw;
    line-height:.96;
    letter-spacing:-.025em;
  }
  .h-xl{
    font-family:var(--sans),var(--sans-zh);
    font-weight:200;
    font-size:6vw;
    line-height:1;
    letter-spacing:-.03em;
  }
  .h-xl-zh{
    font-family:var(--sans),var(--sans-zh);
    font-weight:200;
    font-size:5vw;
    line-height:1.05;
    letter-spacing:-.025em;
  }
  .h-md{
    font-family:var(--sans),var(--sans-zh);
    font-weight:300;
    font-size:2.6vw;
    line-height:1.18;
    letter-spacing:-.015em;
  }
  .h-sub{
    font-family:var(--sans),var(--sans-zh);
    font-weight:400;
    font-size:2.2vw;
    line-height:1.3;
    letter-spacing:-.01em;
    opacity:.7;
  }

  /* ============ 正文 / 引语 / 元数据 ============ */
  .lead{
    font-family:var(--sans),var(--sans-zh);
    font-weight:400;
    font-size:1.55vw;
    line-height:1.4;
    letter-spacing:-.005em;
    opacity:.86;
  }
  .body{
    font-family:var(--sans),var(--sans-zh);
    font-weight:400;
    font-size:max(18px,1.08vw);
    line-height:1.6;
    letter-spacing:0;
    opacity:.78;
  }
  .body-sm{
    font-family:var(--sans),var(--sans-zh);
    font-weight:400;
    font-size:max(16px,.92vw);
    line-height:1.55;
    opacity:.7;
  }
  .meta{
    font-family:var(--mono);
    font-size:max(14px,.82vw);
    letter-spacing:.18em;text-transform:uppercase;
    opacity:.6;
  }
  .meta-row{
    display:flex;gap:1.4em;align-items:baseline;flex-wrap:wrap;
    font-family:var(--mono);
    font-size:max(14px,.88vw);letter-spacing:.16em;text-transform:uppercase;
    opacity:.65;
  }
  .meta-row span:not(.dot){display:inline-block}
  .meta-row .dot{
    display:inline-block;width:4px;height:4px;border-radius:50%;
    background:currentColor;opacity:.5;vertical-align:middle
  }

  /* ============ KPI Hero (视觉英雄数据) ============ */
  .kpi-hero{
    font-family:var(--sans);
    font-weight:800;
    font-size:22vw;
    line-height:.82;
    letter-spacing:-.05em;
    font-feature-settings:"tnum","ss01";
  }
  .kpi-hero .unit{
    font-family:var(--sans),var(--sans-zh);
    font-weight:500;
    font-size:.18em;
    letter-spacing:0;
    opacity:.5;
    margin-left:.12em;
    vertical-align:.5em;
  }
  .kpi-hero.accent{color:var(--accent)}
  .kpi-big{
    font-family:var(--sans);
    font-weight:800;
    font-size:11vw;
    line-height:.85;
    letter-spacing:-.04em;
    font-feature-settings:"tnum"
  }
  .kpi-mid{
    font-family:var(--sans);
    font-weight:700;
    font-size:6vw;
    line-height:.88;
    letter-spacing:-.03em;
    font-feature-settings:"tnum"
  }

  /* ============ Stat Card (数据卡片 · 极简) ============ */
  .stat-card{
    display:flex;flex-direction:column;
    gap:.6vh;align-items:flex-start;
    padding-top:1.6vh;
    border-top:2px solid currentColor;
  }
  .stat-card.thin{border-top-width:1px;border-color:rgba(127,127,127,.4)}
  .stat-card.accent-top{border-top-color:var(--accent);border-top-width:3px}
  .stat-card .stat-label{
    font-family:var(--mono);
    font-size:max(14px,.82vw);
    letter-spacing:.24em;text-transform:uppercase;
    opacity:.6;
  }
  .stat-card .stat-nb{
    font-family:var(--sans);
    font-weight:800;
    font-size:5.6vw;
    line-height:.88;
    letter-spacing:-.035em;
    font-feature-settings:"tnum";
    margin-top:.4vh;
  }
  .stat-card .stat-nb .stat-unit{
    font-family:var(--sans),var(--sans-zh);
    font-weight:500;
    font-size:.32em;
    letter-spacing:0;
    opacity:.6;
    margin-left:.14em;
    vertical-align:.4em;
  }
  .stat-card .stat-note{
    font-family:var(--sans),var(--sans-zh);
    font-weight:400;
    font-size:max(16px,.98vw);
    line-height:1.5;
    opacity:.7;
    margin-top:.6vh;
  }
  .grid-4 .stat-card .stat-nb{font-size:4.6vw}
  .grid-3 .stat-card .stat-nb{font-size:6.4vw}
  .grid-6 .stat-card .stat-nb{font-size:4vw}

  /* ============ Accent Block (高亮色块包裹内容) ============ */
  .accent-block{
    background:var(--accent);color:var(--accent-on);
    padding:2.4vh 2vw;
  }
  .accent-block.tight{padding:1.4vh 1.4vw}
  .accent-block .h-md,.accent-block .h-xl,.accent-block .kpi-mid{color:var(--accent-on)}

  .ink-block{
    background:var(--ink);color:var(--paper);
    padding:2.4vh 2vw
  }
  .grey-block{
    background:var(--grey-1);
    padding:2.4vh 2vw
  }

  /* 高亮文字 (mark 风格) */
  .mark{
    background:var(--accent);color:var(--accent-on);
    padding:0 .2em;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }
  .mark.ink{background:var(--ink);color:var(--paper)}
  .underline-accent{
    background-image:linear-gradient(to bottom, transparent 70%, var(--accent) 70%, var(--accent) 96%, transparent 96%);
    padding:0 .05em
  }

  /* ============ Pipeline / Step ============ */
  .pipeline-section{margin-top:3.2vh;padding-top:2.2vh;border-top:1px solid rgba(127,127,127,.3)}
  .pipeline-section:first-of-type{border-top:0;padding-top:0;margin-top:2.4vh}
  .pipeline-label{
    font-family:var(--mono);
    font-size:max(14px,.84vw);
    letter-spacing:.24em;text-transform:uppercase;
    opacity:.6;margin-bottom:1.8vh;
  }
  .pipeline{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1vw;
  }
  .pipeline[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
  .pipeline[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
  .pipeline[data-cols="6"]{grid-template-columns:repeat(6,1fr)}
  .step{
    display:flex;flex-direction:column;gap:.6vh;
    padding-top:1.2vh;
    border-top:2px solid currentColor;
  }
  .step.accent-top{border-top-color:var(--accent);border-top-width:3px}
  .step-nb{
    font-family:var(--mono);
    font-weight:500;
    font-size:max(14px,1vw);
    opacity:.5;letter-spacing:.04em
  }
  .step-title{
    font-family:var(--sans),var(--sans-zh);
    font-weight:700;
    font-size:1.4vw;
    letter-spacing:-.01em;
    line-height:1.2;
  }
  .step-desc{
    font-family:var(--sans),var(--sans-zh);
    font-weight:400;
    font-size:max(16px,.94vw);
    line-height:1.45;
    opacity:.7;
  }

  /* ============ 网格系统 (模块化网格) ============ */
  .frame{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  .frame.grid-2-7-5,
  .frame.grid-2-6-6,
  .frame.grid-2-8-4,
  .frame.grid-2-4-8,
  .frame.grid-3-3,
  .frame.grid-12,
  .frame.grid-6,
  .frame.grid-4,
  .frame.grid-3{display:grid}

  /* 12 列模块化网格 (瑞士风核心) */
  .grid-12{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:2vh 1.2vw;
    align-items:start;
  }
  .span-2{grid-column:span 2}
  .span-3{grid-column:span 3}
  .span-4{grid-column:span 4}
  .span-5{grid-column:span 5}
  .span-6{grid-column:span 6}
  .span-7{grid-column:span 7}
  .span-8{grid-column:span 8}
  .span-9{grid-column:span 9}
  .span-12{grid-column:span 12}

  /* 经典分栏 */
  .grid-2-7-5{display:grid;grid-template-columns:7fr 5fr;gap:3vw 4vh;align-items:start}
  .grid-2-6-6{display:grid;grid-template-columns:1fr 1fr;gap:3vw 4vh;align-items:start}
  .grid-2-8-4{display:grid;grid-template-columns:8fr 4fr;gap:3vw 4vh;align-items:start}
  .grid-2-4-8{display:grid;grid-template-columns:4fr 8fr;gap:3vw 4vh;align-items:start}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw 4vh;align-items:start}
  .grid-3-3{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:2.4vh 2vw}
  .grid-4{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3vh 3vw;flex:1;align-content:center}
  .grid-6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3vh 2.4vw;flex:1;align-content:center}

  /* 工具类 */
  .col{display:flex;flex-direction:column;gap:2vh}
  .row{display:flex;align-items:center;gap:2vw}
  .fill{flex:1}
  .center{align-items:center;justify-content:center;text-align:center}
  .right{text-align:right;justify-self:end}
  .top{align-self:start}
  .bottom{align-self:end}
  .va-center{align-self:center}
  .nowrap{white-space:nowrap}

  /* 非对称定位 */
  .pos-absolute{position:absolute}
  .bottom-left{position:absolute;left:5vw;bottom:8vh;max-width:50vw}
  .bottom-right{position:absolute;right:5vw;bottom:8vh;max-width:50vw;text-align:right}
  .top-right{position:absolute;right:5vw;top:5.5vh;text-align:right}
  .top-left{position:absolute;left:5vw;top:5.5vh}

  /* ============ Callout (引用框 · 极简) ============ */
  .callout{
    padding:2vh 2vw;
    border-left:3px solid var(--accent);
    font-family:var(--sans),var(--sans-zh);
    font-size:max(14px,1vw);
    line-height:1.55;
    opacity:.9;
  }
  .callout.ink{border-left-color:currentColor}
  .callout .cite,.callout .callout-src{
    display:block;margin-top:1.2vh;
    font-family:var(--mono);
    font-size:14px;letter-spacing:.16em;text-transform:uppercase;
    opacity:.6;
  }

  /* ============ Icons (Lucide via CDN) ============ */
  .ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
  .ico-lg,.ico-md,.ico-sm{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
  .ico-lg{width:2.4vw;height:2.4vw;stroke-width:1.4;display:inline-block}
  .ico-md{width:1.6vw;height:1.6vw;stroke-width:1.6;display:inline-block;vertical-align:-.4em}
  .ico-sm{width:1vw;height:1vw;stroke-width:1.8;display:inline-block;vertical-align:-.15em;opacity:.7}

  /* ============ 几何小图标 (装饰) ============ */
  .geo-dot{width:.7vw;height:.7vw;border-radius:50%;background:var(--accent);display:inline-block;vertical-align:middle}
  .geo-square{width:.7vw;height:.7vw;background:var(--accent);display:inline-block;vertical-align:middle}
  .geo-line{width:2vw;height:2px;background:var(--accent);display:inline-block;vertical-align:middle}
  .geo-circle-o{width:.9vw;height:.9vw;border:2px solid currentColor;border-radius:50%;display:inline-block;vertical-align:middle}

  /* ============ 图片 frame-img ============ */
  .frame-img{overflow:hidden;position:relative;background:var(--paper);box-sizing:border-box;width:100%}
  .slide.dark .frame-img{background:rgba(255,255,255,.06)}
  .frame-img > img{width:auto;height:100%;object-fit:cover;object-position:center center;display:block;margin:0 auto;}
  .frame-img.fit-contain > img{object-fit:contain;object-position:center center}
  .frame-img.pos-top > img{object-position:top center}
  .frame-img.pos-face > img{object-position:center 35%}
  .frame-img.r-16x9{aspect-ratio:16/9;max-height:64vh}
  .frame-img.r-21x9{aspect-ratio:21/9;max-height:54vh}
  .frame-img.r-16x10{aspect-ratio:16/10;max-height:56vh}
  .frame-img.r-4x3{aspect-ratio:4/3;max-height:56vh}
  .frame-img.r-3x2{aspect-ratio:3/2;max-height:46vh}
  .frame-img.r-3x4{aspect-ratio:3/4;max-height:60vh}
  .frame-img.r-1x1{aspect-ratio:1/1;max-height:24vh}
  .frame-img.h-16{height:16vh}
  .frame-img.h-18{height:18vh}
  .frame-img.h-22{height:22vh}
  .frame-img.h-26{height:26vh}
  .frame-img.h-28{height:28vh}
  .frame-img.h-32{height:32vh}
  .frame-img.swiss-lined{border-top:2px solid var(--accent)}
  .frame-img.swiss-keyline{border:0}

  /* P22 Image Hero: 下半屏内容区必须和图片拉开距离,不要贴在图下沿 */
  .image-hero-body{
    display:grid;grid-template-columns:6fr 6fr;gap:3vw;
    padding:6.6vh 5vw 4.4vh;flex:1;align-content:start
  }
  .image-hero-stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;align-items:start
  }
  .img-cap{
    display:block;margin-top:.8vh;
    font-family:var(--mono);
    font-size:max(14px,.82vw);
    letter-spacing:.2em;text-transform:uppercase;
    opacity:.6;
  }
  figure.frame-img,figure.tile{margin:0;display:flex;flex-direction:column;min-width:0}
  figure.tile > .frame-img{flex:0 0 auto}

  /* 瑞士风图文混排: 只用直角、发丝线、单一 accent；图像容器不加圆角/阴影 */
  .swiss-img-split{display:grid;grid-template-columns:5fr 7fr;gap:3vw;align-items:start;flex:1;min-height:0}
  .swiss-img-split.reverse{grid-template-columns:7fr 5fr}
  .swiss-img-split.align-bottom{align-items:end}
  .swiss-img-split.align-bottom .swiss-img-copy{align-self:end}
  .swiss-img-split.align-image-bottom{align-items:end;padding-bottom:var(--nav-safe-bottom)}
  .swiss-img-split.align-image-bottom .swiss-img-copy{align-self:end}
  .swiss-img-split.align-image-bottom figure.tile{align-self:end;position:relative}
  .swiss-img-split.align-image-bottom figure.tile > .swiss-img-caption{
    position:absolute;left:0;right:0;top:calc(100% + var(--sp-4));margin-top:0
  }
  .nav-safe-bottom{padding-bottom:var(--nav-safe-bottom)}
  .nav-safe-bottom-tight{padding-bottom:calc(var(--nav-safe-bottom) * .65)}
  .swiss-img-copy{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}
  .swiss-img-copy .rule{margin:0}
  .swiss-img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);align-items:start;margin-top:var(--sp-7)}
  .swiss-img-grid.two{grid-template-columns:repeat(2,1fr)}
  .swiss-img-grid.tight{margin-top:0}
  .swiss-img-caption{
    display:flex;justify-content:space-between;gap:var(--sp-5);
    margin-top:var(--sp-4);
    font-family:var(--mono);font-size:max(14px,.74vw);
    letter-spacing:.16em;text-transform:uppercase;color:var(--text-helper);
    border-top:1px solid var(--border-subtle);padding-top:var(--sp-4)
  }
  .swiss-img-caption strong{
    font-family:var(--sans),var(--sans-zh);font-size:max(16px,.9vw);
    font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-primary)
  }

  /* ============ Bar Chart (扁平几何图表) ============ */
  .bar-chart{display:flex;flex-direction:column;gap:1.4vh}
  .bar-row{display:grid;grid-template-columns:8em 1fr 4em;gap:1.4vw;align-items:center}
  .bar-row .bar-label{font-family:var(--mono);font-size:max(14px,.84vw);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
  .bar-row .bar-track{height:14px;background:rgba(127,127,127,.18);position:relative}
  .bar-row .bar-fill{height:100%;background:var(--accent);position:absolute;left:0;top:0}
  .bar-row .bar-fill.ink{background:currentColor}
  .bar-row .bar-value{font-family:var(--sans);font-weight:700;font-size:max(16px,1.05vw);text-align:right;font-feature-settings:"tnum"}

  /* ============ 导航 ============ */
  /* 右侧垂直圆形导航指示器 */
  #nav{position:fixed;top:50%;right:24px;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:10px;align-items:center;padding:0;background:transparent;border:0}
  #nav .dot{width:8px;height:8px;background:rgba(0,0,0,.28);cursor:pointer;transition:all .25s ease;border:0;padding:0;border-radius:50%}
  #nav .dot:hover{background:rgba(0,0,0,.55)}
  #nav .dot.active{background:var(--accent);width:10px;height:10px}
  body.dark-bg #nav .dot{background:rgba(255,255,255,.32)}
  body.dark-bg #nav .dot.active{background:var(--accent)}

  #hint{display:none;position:fixed;bottom:2.4vh;right:2.5vw;z-index:30;font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;opacity:.4;color:var(--ink-tint, currentColor)}
  body.dark-bg #hint{color:var(--paper);opacity:.4}
  body.low-power #hint{color:var(--accent);opacity:.72}
  body.dark-bg.low-power #hint{color:var(--paper);opacity:.72}

  /* ESC 索引页: 动画元素强制可见 (覆盖 motion-ready 的 opacity:0) */
  #overview [data-anim]{opacity:1!important;transform:none!important}
  #overview .slide *{animation:none!important;transition:none!important}

  /* 统一卡片样式 token: card-fill (默认灰底 · 中性) + card-ink (反转高对比) + card-accent (单一焦点) */
  .card-fill{background:#ffffff;border:0;color:var(--text-primary)}
  .card-ink{background:var(--ink);border:0;color:var(--paper)}
  .card-ink .t-meta,.card-ink .t-cat{color:rgba(255,255,255,.6)}
  .card-accent{background:var(--accent);border:0;color:var(--accent-on)}
  .card-accent .t-meta,.card-accent .t-cat{color:var(--accent-on)}

  /* ============ CodeTutor 投稿页专用: 亮色官网截图 + 产品证据 ============ */
  .shot-frame{
    background:#fff;
    border:1px solid rgba(18,22,31,.1);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
  }
  .shot-top{
    height:26px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 10px;
    border-bottom:1px solid rgba(18,22,31,.08);
    background:#f7f8fb;
  }
  .shot-top span{width:6px;height:6px;border-radius:50%;background:#c6cad4}
  .shot-top span:nth-child(2){background:#aeb5c2}
  .shot-top span:nth-child(3){background:var(--accent)}
  .shot-frame img{
    width:100%;
    height:0;
    flex:1 1 0;
    min-height:0;
    display:block;
    object-fit:cover;
    object-position:top center
  }
  .shot-frame.contain img{object-fit:contain}
  .shot-caption{
    display:flex;justify-content:space-between;gap:var(--sp-4);
    padding:1vh 1vw;
    border-top:1px solid rgba(18,22,31,.08);
    background:#fff;
    font-family:var(--mono);font-size:max(12px,.68vw);
    letter-spacing:.12em;text-transform:uppercase;color:var(--text-helper)
  }
  .shot-caption strong{
    font-family:var(--sans),var(--sans-zh);font-size:max(14px,.84vw);
    letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600
  }
  .shot-frame.dark-shot{
    background:#121722;
    border-color:rgba(255,255,255,.12)!important;
  }
  .shot-frame.dark-shot .shot-top{
    border-bottom-color:rgba(255,255,255,.10);
    background:#171d29;
  }
  .shot-frame.dark-shot .shot-caption{
    border-top-color:rgba(255,255,255,.10);
    background:#171d29;
    color:rgba(255,255,255,.52);
  }
  .shot-frame.dark-shot .shot-caption strong{color:var(--paper)}
  .product-shot-grid{
    display:grid;
    grid-template-columns:1.18fr .82fr;
    grid-template-rows:minmax(0,1fr) auto;
    gap:2vw;
    align-items:stretch;
    height:100%;
    min-height:0;
  }
  .product-shot-stack{display:grid;grid-template-rows:1fr 1fr;gap:2vh;min-height:0}
  .product-proof-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vw;margin-top:0}
  .proof-pill{
    border-top:2px solid var(--accent);
    padding-top:.8vh;
    font-family:var(--sans),var(--sans-zh);
    font-size:max(13px,.78vw);
    line-height:1.35;
    color:var(--text-secondary)
  }
  .proof-pill strong{
    display:block;
    font-family:var(--mono);
    font-size:max(12px,.68vw);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:.5vh
  }

  .step-axis{
    position:relative;
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:1.1vw;
    align-items:stretch;
    min-height:36vh;
    padding-top:5.8vh;
  }
  .step-axis::before{
    content:"";
    position:absolute;
    left:3.5%;
    right:3.5%;
    top:8vh;
    height:1px;
    background:repeating-linear-gradient(to right,var(--ink) 0 6px,transparent 6px 12px);
    opacity:.28;
  }
  .step-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    padding-top:5.2vh;
  }
  .step-card::before{
    content:"";
    position:absolute;
    top:calc(8vh - 5.8vh - 5px);
    left:0;
    width:10px;
    height:10px;
    background:var(--ink);
  }
  .step-card.accent::before{background:var(--accent)}
  .step-card .step-tag{
    font-family:var(--mono);
    font-size:max(12px,.7vw);
    font-weight:600;
    letter-spacing:.14em;
    color:var(--accent);
    text-transform:uppercase;
  }
  .step-card .step-name{
    margin-top:1.2vh;
    font-family:var(--sans),var(--sans-zh);
    font-size:max(17px,1.35vw);
    font-weight:400;
    line-height:1.2;
    letter-spacing:-.01em;
    color:var(--text-primary);
  }
  .step-card .step-copy{
    margin-top:1.1vh;
    max-width:11.5vw;
    font-family:var(--sans),var(--sans-zh);
    font-size:max(13px,.78vw);
    line-height:1.48;
    color:var(--text-secondary);
  }
  .step-card.accent .step-name{color:var(--accent)}

  .lesson-col.warning > .t-cat{color:#dc2626}
  .lesson-col.advice > .t-cat{color:var(--accent)}

  .shot-carousel{
    position:relative;
    min-height:0;
    overflow:hidden;
  }
  .shot-reel{
    height:100%;
    display:flex;
    animation:shot-slide 19.2s var(--ease-exp) infinite;
  }
  .shot-pair{
    flex:0 0 100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.6vw;
    height:100%;
  }
  .shot-pair .shot-frame{height:100%}
  .shot-carousel .shot-frame img{
    object-fit:contain;
    object-position:center center;
    background:#fff;
  }
  @keyframes shot-slide{
    0%,12%{transform:translateX(0)}
    16.66%,28.66%{transform:translateX(-100%)}
    33.33%,45.33%{transform:translateX(-200%)}
    50%,62%{transform:translateX(-300%)}
    66.66%,78.66%{transform:translateX(-400%)}
    83.33%,95.33%{transform:translateX(-500%)}
    100%{transform:translateX(0)}
  }

  .chat-demo{
    background:#fff;
    color:var(--ink);
    border:1px solid rgba(255,255,255,.14);
    min-height:0;
    display:grid;
    grid-template-rows:auto 1fr auto;
    overflow:hidden;
  }
  .chat-demo .chat-head{
    display:flex;justify-content:space-between;align-items:center;
    padding:1.5vh 1.4vw;
    border-bottom:1px solid rgba(18,22,31,.08);
    background:#f7f8fb;
  }
  .chat-demo .chat-head strong{font-family:var(--sans),var(--sans-zh);font-size:max(16px,1vw);font-weight:600}
  .chat-demo .chat-head span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-helper)}
  .chat-demo .chat-body{padding:1.6vh 1.35vw;display:flex;flex-direction:column;gap:.9vh;min-height:0}
  .chat-demo.hero-chat{
    border-color:rgba(255,255,255,.10);
    grid-template-rows:auto minmax(0,1fr);
    background:#181d28;
    color:var(--paper);
    border-radius:0;
    box-shadow:0 28px 70px -48px rgba(0,0,0,.86);
  }
  .hero-chat .chat-head{
    border-bottom-color:rgba(255,255,255,.10);
    background:#151a24;
  }
  .hero-chat .chat-head strong{color:var(--paper)}
  .hero-chat .chat-head span{color:rgba(255,255,255,.52)}
  .hero-chat .chat-body{
    position:relative;
    overflow:hidden;
    padding:0;
  }
  .hero-chat .chat-body::before,
  .hero-chat .chat-body::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    z-index:2;
    pointer-events:none;
  }
  .hero-chat .chat-body::before{
    top:0;
    height:7vh;
    background:linear-gradient(180deg,rgba(24,29,40,.98),rgba(24,29,40,0));
  }
  .hero-chat .chat-body::after{
    bottom:0;
    height:9vh;
    background:linear-gradient(180deg,rgba(24,29,40,0),rgba(24,29,40,.98));
  }
  .chat-scroll{
    display:flex;
    flex-direction:column;
    gap:1.35vh;
    padding:3vh 1.5vw 4vh;
    animation:hero-chat-scroll 24s linear infinite;
  }
  .chat-row{
    display:flex;
    gap:.9vw;
    align-items:flex-start;
  }
  .chat-avatar{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    color:var(--paper);
    border-radius:12px;
    font-family:var(--sans),var(--sans-zh);
    font-size:12px;
    font-weight:700;
  }
  .chat-row.ai .chat-avatar{background:var(--accent);color:#fff}
  .chat-row.system .chat-avatar{background:rgba(255,255,255,.07);color:var(--accent)}
  .chat-card{
    max-width:92%;
    padding:1.05vh 1vw;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.88);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    font-family:var(--sans),var(--sans-zh);
    font-size:max(13px,.78vw);
    line-height:1.48;
  }
  .chat-row.ai .chat-card{background:rgba(77,105,255,.14);border-color:rgba(77,105,255,.24)}
  .chat-row.system .chat-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
  .chat-card .chat-label{
    display:flex;
    flex-wrap:wrap;
    gap:.5vw;
    align-items:center;
    margin-bottom:.55vh;
    font-family:var(--mono);
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .chat-card .chat-meta{
    padding:.2vh .45vw;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.55);
    border-radius:999px;
    font-size:10px;
    letter-spacing:.08em;
  }
  .chat-suggestion{
    margin-top:1vh;
    display:flex;
    align-items:center;
    gap:.5vw;
    padding:.7vh .75vw;
    background:rgba(0,0,0,.18);
    color:var(--accent);
    font-family:var(--sans),var(--sans-zh);
    font-size:max(12px,.7vw);
    font-weight:600;
    border-radius:14px;
  }
  .chat-suggestion .lucide{width:14px;height:14px;stroke-width:2}
  .chat-side{
    height:100%;
    display:grid;
    grid-template-rows:1.35fr 1fr;
    gap:2.6vh;
  }
  .chat-side .scenario-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:0;
  }
  .chat-side .feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.7vh;
  }
  @keyframes hero-chat-scroll{
    0%{transform:translateY(0)}
    100%{transform:translateY(-50%)}
  }
  .bubble{
    max-width:82%;
    padding:.95vh 1vw;
    font-family:var(--sans),var(--sans-zh);
    font-size:max(13px,.78vw);
    line-height:1.42;
    background:#f0f2f6;
    color:var(--ink);
  }
  .bubble.user{align-self:flex-end;background:var(--accent);color:#fff}
  .bubble.ai{align-self:flex-start}
  .bubble .label{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.6;
    margin-bottom:.45vh
  }
  .chat-attach{
    align-self:flex-end;
    display:flex;align-items:center;gap:.7vw;
    padding:.85vh .9vw;
    border:1px solid rgba(77,105,255,.28);
    background:#f8f9ff;
    font-family:var(--sans),var(--sans-zh);
    font-size:max(12px,.72vw);
    color:var(--accent)
  }
  .chat-tools{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:rgba(18,22,31,.08);
    border-top:1px solid rgba(18,22,31,.08)
  }
  .chat-tools div{
    background:#fff;
    padding:.95vh .8vw;
    display:flex;align-items:center;gap:.55vw;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-helper)
  }
  .chat-tools i{width:1.1vw;height:1.1vw;stroke-width:1.7;color:var(--accent)}

  .mvp-proof-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:2.4vw;
    align-items:stretch;
    height:100%;
    min-height:0;
  }
  .mvp-proof-grid > *{
    align-self:stretch;
    min-height:0;
  }
  .mvp-proof-list{display:grid;grid-template-columns:1fr 1fr;gap:1.1vh 1.1vw}
  .mvp-proof-card{
    background:rgba(255,255,255,.06);
    padding:1.25vh 1.1vw;
    border-top:2px solid rgba(255,255,255,.16);
  }
  .mvp-proof-card.accent{background:var(--accent);border-top-color:var(--accent);color:var(--accent-on)}
  .mvp-proof-card .num{
    font-family:var(--sans);
    font-weight:250;
    font-size:min(2.75vw,5vh);
    line-height:1;
    letter-spacing:-.025em;
    color:var(--accent)
  }
  .mvp-proof-card.accent .num{color:#fff}
  .mvp-proof-card .lbl{
    margin-top:.8vh;
    font-family:var(--sans),var(--sans-zh);
    font-size:max(13px,.82vw);
    line-height:1.38;
    color:rgba(255,255,255,.78)
  }
  .mvp-proof-card .meta{
    margin-top:.25vh;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.48)
  }

  .loop-stage{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:24vh;
  }
  .loop-stage svg{width:100%;max-height:46vh}
  .loop-label{
    position:absolute;
    left:50%;
    top:50%;
    z-index:2;
    min-width:9.8vw;
    padding:.8vh .85vw;
    border-radius: 24px;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.76);
    font-family:var(--mono);
    font-size:max(11px,.66vw);
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    text-align:center;
    animation:loop-label-drift 5.8s linear infinite;
  }
  .loop-label b{
    display:block;
    margin-top:.35vh;
    font-family:var(--sans),var(--sans-zh);
    font-size:max(13px,.8vw);
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    color:var(--accent);
  }
  .loop-label.plan{--from-x:0;--from-y:-26vh;animation-delay:0s}
  .loop-label.task{--from-x:24vw;--from-y:0;animation-delay:1.45s}
  .loop-label.chat{--from-x:0;--from-y:26vh;animation-delay:2.9s}
  .loop-label.growth{--from-x:-20vw;--from-y:0;animation-delay:4.35s}
  @keyframes loop-label-drift{
    0%{opacity:0;transform:translate(-50%,-50%) translate(var(--from-x),var(--from-y)) scale(.98)}
    15%{opacity:1}
    78%{opacity:.92}
    100%{opacity:0;transform:translate(-50%,-50%) translate(0,0) scale(.86)}
  }

  .multimodal-card{
    position:relative;
    overflow:hidden;
  }
  .multimodal-card .peek-icon{
    position:absolute;
    top:-1.6vh;
    right:-1.1vw;
    width:7.4vw;
    height:7.4vw;
    transform:rotate(-18deg);
    color:rgba(255,255,255,.16);
  }
  .multimodal-card .peek-icon .lucide{
    width:100%;
    height:100%;
    stroke-width:1.1;
  }

  /* ============ 动效 (与原模板一致) ============ */
  [data-anim]{opacity:1}
  body.motion-ready [data-anim]{opacity:0}
  body.motion-ready [data-anim="left"]{transform:translateX(-24px)}
  body.motion-ready [data-anim="right"]{transform:translateX(24px)}
  body.motion-ready [data-anim="line"]{opacity:0;transform:translateY(10px)}
  body.motion-ready [data-animate="pipeline"] [data-anim]{opacity:.15}
  body.low-power #deck{transition:none!important}
  body.low-power *,
  body.low-power *::before,
  body.low-power *::after{animation:none!important;transition:none!important}
  body.low-power.motion-ready [data-anim],
  body.low-power [data-anim]{opacity:1!important;transform:none!important}

  /* ============================================================
     ↓↓↓ V2 EXTENSIONS · Canvas Mode + 参考图新类
     验证效果后沉淀回 template-swiss.html
     ============================================================ */

  /* Windows 适配:雅黑没有 ExtraLight 200,中文大字号字重补偿 */
  body.is-win .name-mega,
  body.is-win .num-mega,
  body.is-win .kpi-thin,
  body.is-win .tl-node .multi{
    font-weight:300;letter-spacing:-.02em;
  }
  body.is-win [style*="font-weight:200"]{font-weight:300 !important}

  /* 全屏铺满模式 · 关闭 WebGL · 卡片即页面 */
  body.canvas-mode{background:var(--paper)}
  body.canvas-mode canvas.bg{display:none !important}
  body.canvas-mode .slide{background:var(--paper);padding:0;align-items:stretch;justify-content:stretch}
  body.canvas-mode .slide.hero{background:var(--paper)}

  .canvas-card{
    width:100vw;
    height:100vh;
    background:var(--paper);color:var(--ink);
    padding:calc(5.6vh - 10px) 5vw 4.4vh;
    display:flex;flex-direction:column;
    position:relative;overflow:hidden;
    box-shadow:none;
    border-radius:0;
  }
  .slide.dark .canvas-card{background:var(--ink);color:var(--paper)}
  .slide.accent .canvas-card{background:var(--accent);color:var(--accent-on)}
  .slide.grey .canvas-card{background:var(--grey-1);color:var(--ink)}
  .slide.split .canvas-card{padding:0;flex-direction:row}

  /* ============ ASCII 点阵呼吸场 · IKB 封面/封底专用 ============
     用法:在 .canvas-card(或 split .half.b-accent)内首位插入 <canvas class="ascii-bg" aria-hidden="true">.
     动画由本文件底部的 ASCII IIFE 自动启动,所有 canvas.ascii-bg 都会被扫到.
     其他内容靠 .canvas-card > *:not(.ascii-bg){z-index:1} 自动浮在上层. */
  canvas.ascii-bg{
    position:absolute;inset:0;width:100%;height:100%;
    pointer-events:none;z-index:0;
    mix-blend-mode:screen;opacity:.92;
  }
  .canvas-card > *:not(.ascii-bg){position:relative;z-index:1}
  .slide.accent .canvas-card .chrome-min{color:rgba(255,255,255,.62)}
  .slide.accent .canvas-card .t-meta{color:rgba(255,255,255,.7)}
  .split-half > .half.b-accent .chrome-min{color:rgba(255,255,255,.62)}

  /* 编号目录页 · 超大数字 + 国家名风格 — 越大越细 */
  .num-mega{
    font-family:var(--sans);font-weight:200;
    font-size:9vw;line-height:1;letter-spacing:-.04em;
    font-feature-settings:"tnum"
  }
  .num-mega.thin{font-weight:200}
  .name-mega{
    font-family:var(--sans);font-weight:200;
    font-size:9vw;line-height:1;letter-spacing:-.035em;
  }
  .name-mega.muted{color:var(--grey-3)}

  /* 细体超大 KPI — 字号越大权重越低 */
  .kpi-thin{
    font-family:var(--sans);font-weight:200;
    font-size:14vw;line-height:.92;letter-spacing:-.045em;
    font-feature-settings:"tnum"
  }
  .kpi-thin .unit{font-size:.3em;font-weight:300;opacity:.55;margin-left:.15em;vertical-align:.6em}
  .kpi-thin.accent{color:var(--accent)}
  .kpi-thin-sm{
    font-family:var(--sans);font-weight:250;
    font-size:5.6vw;line-height:1.04;letter-spacing:-.03em;
    font-feature-settings:"tnum"
  }
  .kpi-thin-sm .unit{font-size:.3em;font-weight:300;opacity:.55;margin-left:.12em;vertical-align:.45em}

  /* 4 列细线 KPI 行 — 顶部一根 hairline,内部不再加竖线 */
  /* 4 列 KPI: 用纵向分割线建立网格感 (Carbon 2x grid 模数) */
  .kpi-row-4{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:0;padding-top:2.4vh;
    border-top:1px solid var(--grey-2)
  }
  .kpi-row-4 > .kpi-cell{
    padding:1.6vh 1.6vw 0;
    border-left:1px solid var(--grey-2)
  }
  .kpi-row-4 > .kpi-cell:first-child{padding-left:0;border-left:none}
  .kpi-cell .lbl{font-family:var(--mono);font-size:max(14px,.78vw);letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:1.2vh}
  .kpi-cell .nb{font-family:var(--sans);font-weight:250;font-size:3.2vw;line-height:1;letter-spacing:-.025em;font-feature-settings:"tnum"}
  .kpi-cell .nb .unit{font-size:.32em;font-weight:300;opacity:.6;margin-left:.1em;vertical-align:.4em}
  .kpi-cell .note{font-family:var(--sans),var(--sans-zh);font-size:max(16px,.92vw);line-height:1.5;opacity:.7;margin-top:1.2vh}

  /* 时间线轴 — 通用 axis token, 横纵共享
     axis 列 = 24px 固定宽,dot 直径 8px,绝对居中在 axis 列中线 (12px)
     虚线绝对定位 left:12px,与 dot 中心严格对齐 */
  .timeline-v{
    --tl-axis-w:24px;        /* axis 列固定宽度 */
    --tl-dot:8px;            /* 圆点直径 */
    position:relative;margin-top:var(--sp-7)
  }
  .timeline-v::before{
    content:"";position:absolute;
    left:calc(var(--tl-axis-w) / 2);
    transform:translateX(-50%);
    top:var(--sp-5);bottom:var(--sp-5);
    width:1px;
    background:repeating-linear-gradient(to bottom,currentColor 0 4px,transparent 4px 8px);
    opacity:.35;pointer-events:none;z-index:0
  }
  .tl-node{
    position:relative;
    display:grid;
    grid-template-columns:var(--tl-axis-w) minmax(0,7em) minmax(0,7.6em) 1fr;
    gap:0 var(--sp-5);
    align-items:center;
    padding:var(--sp-7) 0
  }
  /* 进度点: 纯色实心圆,无背景无描边,精确居中在 axis 列中线 */
  .tl-node .dot{
    width:var(--tl-dot);height:var(--tl-dot);
    border-radius:50%;
    background:currentColor;
    justify-self:center;
    z-index:1
  }
  .tl-node.accent .dot{background:var(--accent)}
  .tl-node .yr{
    font-family:var(--mono);font-weight:500;
    font-size:max(14px,1vw);letter-spacing:.04em
  }
  .tl-node .multi{
    font-family:var(--sans);font-weight:200;
    font-size:clamp(28px,2.8vw,56px);
    line-height:.95;letter-spacing:-.025em;
    white-space:nowrap;
    overflow:hidden;
    min-width:0
  }
  .tl-node .multi .unit{
    font-size:.36em;font-weight:300;opacity:.6;
    margin-left:.2em;
    vertical-align:.42em;
    letter-spacing:0
  }
  .tl-node.accent .multi{color:var(--accent)}
  .tl-node .desc{
    font-family:var(--sans),var(--sans-zh);
    font-size:max(16px,.94vw);line-height:1.55;opacity:.78;
    min-width:0
  }

  /* 横向时间线 (.timeline-h) — 与 .timeline-v 共享 axis token, 视觉语言一致 */
  .timeline-h{
    --tl-axis-w:8px;
    --tl-dot:8px;
    position:relative;
    flex:1;
    display:flex;align-items:center
  }
  .timeline-h::before{
    content:"";position:absolute;
    top:50%;left:5%;right:5%;height:1px;
    transform:translateY(-50%);
    background:repeating-linear-gradient(to right,currentColor 0 4px,transparent 4px 8px);
    opacity:.35;pointer-events:none;z-index:0
  }
  .timeline-h .tl-row{
    position:relative;width:100%;
    display:grid;grid-template-columns:repeat(5,1fr);
    align-items:center
  }
  .timeline-h .th-node{
    position:relative;display:flex;justify-content:center
  }
  /* 横向 dot: 8px 纯色实心,无描边无阴影 (与 P2 保持一致) */
  .timeline-h .th-node .dot{
    width:var(--tl-dot);height:var(--tl-dot);
    border-radius:50%;
    background:var(--ink);
    z-index:1;position:relative
  }
  .timeline-h .th-node.accent .dot{background:var(--accent)}
  .timeline-h .th-node .label{
    position:absolute;left:50%;transform:translateX(-50%);
    width:13vw;text-align:center;
    display:flex;flex-direction:column;gap:.4vh
  }
  .timeline-h .th-node.up .label{bottom:calc(50% + 22px)}
  .timeline-h .th-node.down .label{top:calc(50% + 22px)}
  .timeline-h .th-node .yr{
    font-family:var(--mono);font-size:max(14px,.78vw);letter-spacing:.05em;
    color:var(--text-helper);font-weight:500
  }
  .timeline-h .th-node.accent .yr{color:var(--accent)}
  .timeline-h .th-node .name{
    font-family:var(--sans);font-size:max(16px,1.05vw);font-weight:400;
    color:var(--text-primary);line-height:1.2;letter-spacing:-.005em
  }
  .timeline-h .th-node.accent .name{color:var(--accent)}
  .timeline-h .th-node .desc{
    font-family:var(--sans),var(--sans-zh);font-size:max(14px,.84vw);
    color:var(--text-secondary);font-weight:400;line-height:1.4
  }

  /* 几何图示 (参考图 5) — SVG-friendly 容器 */
  .geo-icon{width:5vw;height:5vw;display:block;margin-bottom:2.2vh;color:var(--ink);flex-shrink:0}
  .slide.dark .geo-icon{color:var(--paper)}
  .geo-icon svg{width:100%;height:100%;overflow:visible}
  .geo-icon .stroke{fill:none;stroke:currentColor;stroke-width:1.4}
  .geo-icon .stroke-accent{fill:none;stroke:var(--accent);stroke-width:1.4}
  .geo-icon .fill-accent{fill:var(--accent)}

  /* 卡片网格 (参考图 1 卡片漂浮) — 在 canvas-card 内部再分卡 */
  .sub-grid-3-2{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:1.4vh 1.4vw;flex:1;align-content:stretch;margin-top:3vh}
  .sub-card{
    background:var(--grey-1);
    padding:2.4vh 1.6vw 2vh;
    display:flex;flex-direction:column;
    position:relative;border-radius:3px;
    min-height:0
  }
  .slide.dark .sub-card{background:rgba(255,255,255,.06)}
  .sub-card.accent{background:var(--accent);color:var(--accent-on)}
  .sub-card.ink{background:var(--ink);color:var(--paper)}
  .sub-card .nb-corner{
    position:absolute;top:1.6vh;right:1.4vw;
    font-family:var(--mono);font-size:max(14px,.8vw);
    letter-spacing:.16em;opacity:.55
  }
  .sub-card .ttl{font-family:var(--sans),var(--sans-zh);font-weight:500;font-size:max(17px,1.5vw);line-height:1.2;letter-spacing:-.015em;margin-bottom:1vh}
  .sub-card .desc{font-family:var(--sans),var(--sans-zh);font-size:max(16px,.94vw);line-height:1.55;opacity:.78;margin-top:auto}
  .sub-card .lucide{width:2.4vw;height:2.4vw;stroke-width:1.4;color:currentColor;margin-bottom:1.6vh;flex-shrink:0}
  .sub-card.accent .lucide{color:var(--accent-on)}

  /* 三层架构纯色块拼图 (参考图 4 + 6) — 横排等高色块 */
  .stack-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;flex:1;margin-top:6vh;align-items:stretch}
  .stack-block{
    display:flex;flex-direction:column;
    padding:3.2vh 1.8vw 2.4vh;
    position:relative;
    min-height:0
  }
  .stack-block.b-accent{background:var(--accent);color:var(--accent-on)}
  .stack-block.b-grey{background:var(--grey-1);color:var(--ink)}
  .stack-block.b-ink{background:var(--ink);color:var(--paper)}
  .stack-block .layer-nb{font-family:var(--mono);font-size:max(14px,.84vw);letter-spacing:.18em;opacity:.65;margin-bottom:auto}
  .stack-block .layer-icon{margin-bottom:1.6vh}
  .stack-block .layer-icon svg{width:3vw;height:3vw}
  .stack-block .layer-icon .stroke{fill:none;stroke:currentColor;stroke-width:1.6}
  .stack-block .layer-ttl{font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(17px,2vw);line-height:1.1;margin-top:1vh;letter-spacing:-.02em}
  .stack-block .layer-desc{font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(16px,.94vw);line-height:1.55;opacity:.88;margin-top:1.4vh}
  .stack-block .lucide{width:2.6vw;height:2.6vw;stroke-width:1.4;margin-bottom:1.6vh;flex-shrink:0}
  .stack-block .layer-tag{font-family:var(--mono);font-size:max(14px,.74vw);letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-top:1.6vh;border-top:1px solid currentColor;padding-top:1vh}

  /* 不等高柱状 KPI 塔 (参考图 6) */
  .bar-towers{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:1.2vw;flex:1;align-items:end;margin-top:auto
  }
  .bar-tower{
    display:flex;flex-direction:column;justify-content:flex-end;
    min-height:0;height:100%
  }
  .bar-tower .cap{
    background:var(--grey-1);
    height:5.6vh;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:.4vh
  }
  .bar-tower .cap svg{width:1.6vw;height:1.6vw;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .bar-tower .body-block{
    flex:0 1 auto;
    padding:2vh 1.2vw 2vh;
    display:flex;flex-direction:column;justify-content:flex-end;
    min-height:18vh
  }
  .bar-tower .body-block.h-1{min-height:22vh}
  .bar-tower .body-block.h-2{min-height:30vh}
  .bar-tower .body-block.h-3{min-height:38vh}
  .bar-tower .body-block.h-4{min-height:46vh}
  /* 默认所有 KPI 塔统一为浅描边卡 — 不抢戏;只有 .b-accent 突出为 IKB */
  .bar-tower .body-block{background:var(--paper);color:var(--ink);border:1px solid var(--grey-2)}
  .bar-tower .body-block.b-accent{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
  .bar-tower .lbl{font-family:var(--mono);font-size:max(14px,.82vw);letter-spacing:.16em;text-transform:uppercase;opacity:.65;margin-bottom:1vh}
  .bar-tower .nb{font-family:var(--sans);font-weight:250;font-size:max(20px,2.8vw);line-height:1;letter-spacing:-.03em;font-feature-settings:"tnum"}
  .bar-tower .body-block.b-accent .nb{font-weight:300}
  .bar-tower .nb .unit{font-size:.36em;font-weight:300;opacity:.7;margin-left:.08em;vertical-align:.4em}
  .bar-tower .sub{font-family:var(--sans),var(--sans-zh);font-size:max(16px,.92vw);opacity:.75;margin-top:1.2vh;line-height:1.5}
  .bar-tower .cap{background:var(--grey-1);color:var(--ink)}
  .bar-tower .lucide{width:1.6vw;height:1.6vw;stroke-width:1.4}

  /* ============ Carbon Productive Type Tokens ============
     用于 PPT 中的"productive 时刻": 列表、表格行、说明文、章节标签
     固定 px 字号,密集紧凑;与 vw-based 的 Expressive 巨字形成双极对比 */

  /* category label / eyebrow / section tag — small, bold, uppercase */
  .t-cat{
    font-family:var(--mono);
    font-size:14px;font-weight:600;
    letter-spacing:.15em;text-transform:uppercase;
    color:var(--text-helper);line-height:1.3
  }
  .t-cat.accent{color:var(--accent)}
  .t-cat.on-dark{color:rgba(255,255,255,.78)}

  /* page chrome / breadcrumb / running header — extra-small mono */
  .t-meta{
    font-family:var(--mono);
    font-size:14px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-helper);line-height:1.45
  }

  /* helper / caption — secondary text */
  .t-helper{
    font-family:var(--sans),var(--sans-zh);
    font-size:14px;font-weight:400;
    color:var(--text-helper);line-height:1.5;
    letter-spacing:.005em
  }

  /* body small — list items, table rows, captions */
  .t-body-sm{
    font-family:var(--sans),var(--sans-zh);
    font-size:16px;font-weight:400;
    color:var(--text-secondary);line-height:1.55;
    letter-spacing:0
  }

  /* body — paragraphs, descriptions */
  .t-body{
    font-family:var(--sans),var(--sans-zh);
    font-size:18px;font-weight:400;
    color:var(--text-primary);line-height:1.5;
    letter-spacing:-.005em
  }

  /* body emphasis — 强调正文 */
  .t-body-emp{
    font-family:var(--sans),var(--sans-zh);
    font-size:18px;font-weight:600;       /* SemiBold per Carbon */
    color:var(--text-primary);line-height:1.5;
    letter-spacing:-.005em
  }

  /* productive heading — section title within slide */
  .t-h-prod{
    font-family:var(--sans),var(--sans-zh);
    font-size:22px;font-weight:600;
    color:var(--text-primary);line-height:1.4;
    letter-spacing:-.01em
  }

  /* dark background variants */
  .slide.dark .t-cat,.slide.dark .t-meta,.slide.dark .t-helper{color:rgba(255,255,255,.62)}
  .slide.dark .t-body-sm{color:rgba(255,255,255,.78)}
  .slide.dark .t-body,.slide.dark .t-body-emp,.slide.dark .t-h-prod{color:var(--paper)}
  .split-half .half.b-ink .t-cat,.split-half .half.b-ink .t-meta,.split-half .half.b-ink .t-helper{color:rgba(255,255,255,.62)}
  .split-half .half.b-ink .t-body-sm{color:rgba(255,255,255,.78)}
  .split-half .half.b-ink .t-body,.split-half .half.b-ink .t-body-emp,.split-half .half.b-ink .t-h-prod{color:var(--paper)}

  /* 斜杠点阵装饰 (参考图 6 左下) */
  .hatch{
    background-image:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 8px);
    opacity:.55
  }

  /* ========== V3: 高级点阵装饰 — 圆点 / × 号 / 圆圈 ========== */
  /* 实心圆点矩阵 — 用于大面积装饰 */
  .dot-mat{
    --d:14px;
    background-image:radial-gradient(currentColor 1.4px,transparent 1.6px);
    background-size:var(--d) var(--d);
    background-position:0 0;
    opacity:.5
  }
  .dot-mat.lg{--d:22px}
  .dot-mat.xl{--d:34px}
  .dot-mat.dense{--d:9px;opacity:.62}

  /* 描边圆圈矩阵 — 工业感 */
  .ring-mat{
    --d:18px;
    background-image:
      radial-gradient(circle at 50% 50%,transparent 2px,currentColor 2px,currentColor 2.6px,transparent 2.7px);
    background-size:var(--d) var(--d);
    opacity:.55
  }
  .ring-mat.lg{--d:28px}

  /* × 号矩阵 — SVG mask 实现真正的 × 网格平铺 */
  .cross-mat{
    --d:22px;
    background-color:currentColor;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><g stroke='black' stroke-width='1.4' stroke-linecap='round' fill='none'><line x1='8' y1='8' x2='14' y2='14'/><line x1='14' y1='8' x2='8' y2='14'/></g></svg>");
            mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><g stroke='black' stroke-width='1.4' stroke-linecap='round' fill='none'><line x1='8' y1='8' x2='14' y2='14'/><line x1='14' y1='8' x2='8' y2='14'/></g></svg>");
    -webkit-mask-size:var(--d) var(--d);
            mask-size:var(--d) var(--d);
    -webkit-mask-repeat:repeat;mask-repeat:repeat;
    opacity:.42
  }
  .cross-mat.lg{--d:32px}

  /* ========== V3: 几何水平柱状图 ========== */
  /* 横向柱图: 标签列 + 柱体列 + 数值列 — 严格瑞士网格 */
  .h-bar-chart{
    display:grid;
    grid-template-columns:11em minmax(0,1fr) 8em;
    gap:1.6vh 1.6vw;
    align-items:center;
    margin-top:2.4vh;
    font-feature-settings:"tnum"
  }
  .h-bar-chart .row-lbl{
    font-family:var(--sans),var(--sans-zh);
    font-weight:500;
    font-size:max(14px,1vw);
    letter-spacing:-.005em;
    text-align:left
  }
  .h-bar-chart .row-track{
    height:3.2vh;
    background:var(--grey-1);
    position:relative;
    overflow:hidden
  }
  .h-bar-chart .row-fill{
    height:100%;
    background:var(--ink);
    transition:width 1s cubic-bezier(.5,0,.2,1)
  }
  .h-bar-chart .row-fill.accent{background:var(--accent)}
  .h-bar-chart .row-fill.grey{background:var(--grey-3)}
  .h-bar-chart .row-val{
    font-family:var(--sans);font-weight:250;
    font-size:max(16px,1.5vw);
    letter-spacing:-.02em;
    line-height:1
  }
  .h-bar-chart .row-val .unit{
    font-size:.5em;opacity:.55;font-weight:300;
    margin-left:.15em;letter-spacing:.04em
  }

  /* 垂直柱图: 用于 KPI 对比页(章节 P8) */
  .v-bar-chart{
    display:grid;
    grid-template-columns:repeat(var(--cols,4),1fr);
    align-items:end;
    gap:1.4vw;
    height:50vh;
    margin-top:3vh
  }
  .v-bar-chart .col{display:flex;flex-direction:column;gap:1.4vh;align-items:stretch;height:100%}
  .v-bar-chart .col-bar{
    flex:1 1 auto;
    background:var(--grey-1);
    border-top:2px solid var(--ink);
    position:relative;
    display:flex;align-items:flex-start;justify-content:center;
    padding-top:1vh
  }
  .v-bar-chart .col-bar.accent{background:var(--accent);border-top-color:var(--accent);color:var(--accent-on)}
  .v-bar-chart .col-bar.ink{background:var(--ink);color:var(--paper);border-top-color:var(--ink)}
  .v-bar-chart .col-bar .v{
    font-family:var(--sans);font-weight:250;
    font-size:max(18px,1.6vw);letter-spacing:-.02em
  }
  .v-bar-chart .col-lbl{
    font-family:var(--mono);font-size:max(14px,.78vw);
    letter-spacing:.14em;text-transform:uppercase;opacity:.6;
    text-align:center;flex:0 0 auto
  }

  /* 对仗对比双栏 (章节 P9) */
  .duo-compare{
    display:grid;grid-template-columns:1fr 1px 1fr;
    gap:0 3.4vw;
    flex:1;align-items:stretch;margin-top:8vh
  }
  .duo-compare .vrule{background:var(--grey-2);width:1px;align-self:stretch}
  .duo-compare .col{display:flex;flex-direction:column;gap:1.6vh;padding:0 .4vw}
  .duo-compare .col-tag{
    font-family:var(--mono);font-size:max(14px,.78vw);
    letter-spacing:.16em;text-transform:uppercase;
    color:var(--grey-3);
    display:flex;align-items:center;gap:.6vw
  }
  .duo-compare .col-tag .num{
    font-weight:600;color:var(--ink);
    border:1px solid var(--ink);
    padding:.2em .6em;font-size:.92em
  }
  .duo-compare .col.accent .col-tag .num{color:var(--accent);border-color:var(--accent)}
  .duo-compare .col-ttl{
    font-family:var(--sans),var(--sans-zh);font-weight:200;
    font-size:3.6vw;line-height:1;letter-spacing:-.03em
  }
  .duo-compare .col.accent .col-ttl{color:var(--accent)}
  .duo-compare .col-desc{
    font-family:var(--sans),var(--sans-zh);
    font-size:max(16px,1.04vw);line-height:1.55;opacity:.78;
    max-width:30vw
  }
  .duo-compare .col-list{
    list-style:none;display:flex;flex-direction:column;gap:1vh;
    margin-top:auto;padding-top:2vh;border-top:1px solid var(--grey-2)
  }
  .duo-compare .col-list li{
    font-family:var(--sans),var(--sans-zh);
    font-size:max(16px,.94vw);line-height:1.5;
    padding-left:1.4em;position:relative
  }
  .duo-compare .col-list li::before{
    content:"";position:absolute;left:0;top:.6em;
    width:.5em;height:1px;background:currentColor;opacity:.55
  }
  .duo-compare .col.accent .col-list li::before{background:var(--accent);opacity:1}

  /* 半屏 statement (参考图 7) */
  .split-half{display:grid;grid-template-columns:1fr 1fr;gap:0;flex:1;align-items:stretch}
  .split-half > .half{padding:5vh 3.4vw;display:flex;flex-direction:column;min-width:0}
  .split-half > .half.r-border{border-left:1px solid rgba(127,127,127,.22)}
  .split-half > .half.b-grey{background:var(--grey-1)}
  .split-half > .half.b-accent{background:var(--accent);color:var(--accent-on)}
  .split-half > .half.b-ink{background:var(--ink);color:var(--paper)}

  /* 极简页眉 — t-meta 风格 (Carbon productive label-01) */
  .canvas-card .chrome-min{
    display:flex;justify-content:space-between;align-items:flex-start;
    font-family:var(--mono);font-size:14px;font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-helper);
    flex:0 0 auto;
    margin-bottom:var(--sp-9);   /* 48px */
  }
  .canvas-card .chrome-min.tight{margin-bottom:var(--sp-7)}   /* 32px */
  .canvas-card .chrome-min .l, .canvas-card .chrome-min .r{
    max-width:48vw;line-height:1.5
  }
  .slide.dark .canvas-card .chrome-min,.split-half .half.b-ink .canvas-card .chrome-min{color:rgba(255,255,255,.62)}

  /* ============ Inline style extraction: repeated utilities ============ */
  .u-stack-14{display:flex;flex-direction:column;gap:1.4vh}
  .u-stack-20{display:flex;flex-direction:column;gap:2vh}
  .u-stack-12{display:flex;flex-direction:column;gap:1.2vh}
  .u-stack-0{display:flex;flex-direction:column;gap:0}
  .u-slide-title{
    font-family:var(--sans),var(--sans-zh);
    font-weight:200;
    font-size:min(5.8vw,10.2vh);
    line-height:1.05;
    letter-spacing:-.025em
  }
  .u-card-title-md{
    font-family:var(--sans),var(--sans-zh);
    font-weight:300;
    font-size:max(18px,1.8vw);
    line-height:1.2;
    letter-spacing:-.015em
  }
  .u-feature-title{
    font-family:var(--sans),var(--sans-zh);
    font-weight:400;
    font-size:max(16px,1.4vw);
    line-height:1.3;
    letter-spacing:-.01em
  }
  .u-title-sm{
    font-family:var(--sans),var(--sans-zh);
    font-weight:400;
    font-size:max(16px,1.2vw);
    line-height:1.3;
    letter-spacing:-.01em
  }
  .u-body-copy-md{
    font-family:var(--sans),var(--sans-zh);
    font-size:max(16px,.94vw);
    line-height:1.6;
    color:var(--text-secondary);
    font-weight:400
  }
  .u-feature-num{
    font-family:var(--sans);
    font-weight:200;
    font-size:min(4.6vw,8vh);
    line-height:.9;
    letter-spacing:-.03em;
    color:var(--accent);
    flex-shrink:0
  }
  .u-step-num{
    font-family:var(--mono);
    font-size:max(14px,.84vw);
    color:var(--accent);
    font-weight:600;
    letter-spacing:.12em;
    padding-top:.4vh
  }
  .u-row-start-lg{display:flex;align-items:flex-start;gap:2vw}
  .u-row-center-sm{display:flex;align-items:center;gap:.6vw}
  .u-card-pad-lg{padding:3vh 1.8vw;display:flex;flex-direction:column;gap:1.6vh}
  .u-card-pad-lesson{padding:2vh 1.8vw}
  .u-feature-row-card{padding:2.4vh 2vw;display:flex;align-items:flex-start;gap:2vw}
  .u-dark-mini-card{padding:1.15vh 1vw;background:rgba(255,255,255,.06)}
  .u-dark-note-card{background:rgba(255,255,255,.06);padding:1.8vh 1.2vw}
  .u-contact-row{
    display:flex;
    align-items:flex-start;
    gap:1vw;
    padding:1.4vh 1vw;
    border:1px solid var(--border-subtle);
    background:var(--paper)
  }
  .u-contact-icon{
    width:1.2vw;
    height:1.2vw;
    color:var(--text-helper);
    margin-top:.3vh;
    flex-shrink:0
  }
  .u-icon-accent-md{width:1.4vw;height:1.4vw;color:var(--accent)}
  .u-icon-accent-sm{width:1vw;height:1vw;color:var(--accent)}
  .u-text-accent{color:var(--accent)}
  .u-text-secondary{color:var(--text-secondary)}
  .u-text-secondary-copy{color:var(--text-secondary);margin-top:.6vh}
  .u-text-secondary-copy-lg{color:var(--text-secondary);margin-top:.8vh}
  .u-text-secondary-lh{color:var(--text-secondary);line-height:1.5}
  .u-text-inverse-60-top{color:rgba(255,255,255,.6);margin-top:.6vh}
  .u-text-inverse-60-sm{color:rgba(255,255,255,.6);margin-top:.4vh}
  .u-text-inverse-62{color:rgba(255,255,255,.62)}
  .u-text-inverse-64{color:rgba(255,255,255,.64)}
  .u-text-inverse-70-top{color:rgba(255,255,255,.7);margin-top:.75vh}
  .u-text-inverse-72-top{color:rgba(255,255,255,.72);margin-top:.35vh}
  .u-text-inverse-72-strong{color:rgba(255,255,255,.72);font-weight:400}
  .u-text-inverse-60{color:rgba(255,255,255,.6)}
  .u-caption-accent-13{color:var(--accent);font-size:13px}
  .u-meta-inverse-12{color:rgba(255,255,255,.5);font-size:12px;margin-bottom:.8vh}
  .u-text-11{font-size:11px}
  .u-text-14{font-size:14px}
  .u-fw-500{font-weight:500}
  .u-accent-gap-btm{color:var(--accent);margin-bottom:1.2vh}
  .u-main-grid-4{flex:1;display:grid;grid-template-rows:auto minmax(0,1fr);gap:4vh;min-height:0}
  .u-main-grid-5{flex:1;padding:0;display:grid;grid-template-rows:auto 1fr;gap:5vh}
  .u-main-grid-6{flex:1;padding:0;display:grid;grid-template-rows:auto 1fr;gap:6vh}
  .u-serial-num-lg{
    font-family:var(--sans);
    font-weight:200;
    font-size:min(5.6vw,10vh);
    line-height:.9;
    letter-spacing:-.03em;
    color:var(--text-primary);
    margin-top:auto
  }
  .u-accent-rule-80{height:2px;background:var(--accent);width:80px}
  .u-accent-rule-inverse{background:rgba(255,255,255,.9)}
  .u-cta-heading{align-items:center;text-align:center}
  .u-icon-inverse-lg{width:2vw;height:2vw;stroke-width:1.4;color:rgba(255,255,255,.5)}
  .u-takeaway-row{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:2vw;
    align-items:start;
    padding:2.6vh 0;
    border-top:1px solid var(--border-subtle)
  }
  .u-kpi-num-md{
    font-family:var(--sans);
    font-weight:200;
    font-size:min(4vw,7vh);
    line-height:.9;
    color:var(--text-primary)
  }
  .u-takeaway-title{
    font-family:var(--sans),var(--sans-zh);
    font-weight:400;
    font-size:max(18px,1.6vw);
    line-height:1.2;
    letter-spacing:-.015em;
    color:var(--text-primary);
    margin-bottom:1vh
  }
  .u-divider-cta{width:1px;height:2.4vh;background:rgba(255,255,255,.16)}
  .u-mission-card{padding:3vh 1.8vw;flex:1;display:flex;flex-direction:column;justify-content:center}
  .u-contact-column{padding:3vh 2.2vw;display:flex;flex-direction:column;gap:2vh;height:100%}
  .u-row-center-md{display:flex;align-items:center;gap:.8vw}
  .u-contact-note{font-size:13px;margin:4px 0 10px 33px;color:var(--text-helper)}
  .u-copy-chip{
    display:flex;
    justify-content:space-between;
    cursor:pointer;
    padding:1.2vh 1vw;
    background:var(--grey-1);
    font-family:var(--mono);
    font-size:14px;
    letter-spacing:.08em;
    color:var(--text-primary);
    border:1px solid var(--border-subtle);
    transition:border-color .2s;
    user-select:none
  }
  .u-helper-11{color:var(--text-helper);font-size:11px}
  .u-qr-frame{max-height:22vh;border:1px solid var(--border-subtle);background:#fff;flex:1;min-height:0}
  .u-qr-image{object-fit:contain;padding:0.4vw}
  .u-center-note-12{margin-top:10px;font-size:12px;text-align:center}
  .u-text-primary-500{color:var(--text-primary);font-weight:500}
  .u-link-accent-500{color:var(--accent);font-weight:500;text-decoration:none}

  /* 响应式降级 */
  @media (max-width:900px){
    .h-hero{font-size:16vw}
    .h-hero-zh{font-size:13vw}
    .h-xl{font-size:9vw}
    .h-xl-zh{font-size:8vw}
    .kpi-hero{font-size:32vw}
    .kpi-big{font-size:16vw}
    .pipeline{grid-template-columns:repeat(2,1fr)}
    .grid-2-7-5,.grid-2-6-6,.grid-2-8-4,.grid-2-4-8{grid-template-columns:1fr}
    .grid-12{grid-template-columns:repeat(6,1fr)}
  }