/* ==========================================================================
   Apple / OpenAI Style Design System (Foundation Models Presentation)
   ========================================================================== */

:root {
    /* 核心色彩 (Colors) */
    --bg-color: #F5F5F7; /* 苹果经典浅灰背景 */
    --card-bg: #FFFFFF; /* 纯白卡片 */
    
    /* 文本色彩 (Typography Colors) */
    --text-main: #1D1D1F; /* 极深灰，用于主标题和正文 */
    --text-muted: #54545A; /* 中灰，用于副标题和次要信息（投屏可读，原 #86868B） */
    
    /* 强调色与状态色 (Accents & States) */
    --ai-gradient: linear-gradient(135deg, #5E5CE6 0%, #B051D5 50%, #FF375F 100%); /* AI 渐变色 */
    --ai-blue: #0066CC; /* 链接/激活态 */
    --ai-green: #34C759; /* 成功/完成态 */
    --ai-orange: #FF9500; /* 警告/监控态 */
    --ai-red: #FF3B30; /* 错误/危险态 */
    
    /* 边框与阴影 (Borders & Shadows) */
    --border-color: rgba(0, 0, 0, 0.08); /* 极细微的边框 */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.02); /* 内部小阴影 */
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06); /* 卡片悬浮阴影 */
    
    /* 圆角 (Border Radius) */
    --radius-lg: 24px; /* 大卡片圆角 */
    --radius-md: 12px; /* 内部面板/模拟器圆角 */
    --radius-sm: 8px; /* 按钮/小标签圆角 */
    
    /* 字体 (Fonts) */
    --font-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;

    /* ==========================================================================
       TYPOGRAPHY CONTRACT · 字号契约（投屏可读版 v2 · 2026-04-24）
       --------------------------------------------------------------------------
       场景定位：30-80 人会议室 / 5-10 米可视距离 / 1080p 投影
       设计基线：6×6 法则——最后一排能清晰阅读正文
       原则：所有正文 ≥ 18px（投屏后≈14pt），不同层级用字重/颜色/字间距区分
       --------------------------------------------------------------------------
       【强制使用规则】
       1. 页面 HTML 内任何 font-size 必须写作 var(--fs-*)，禁止直接写 Npx
          例外：clamp() / @media 断点内的响应式计算可保留 px
       2. 全套 deck 只有下面 8 个 Token，不得新增；如需微调由此处统一调整
       3. 调整字号档位只改下方 8 个值，全 deck 自动同步生效
       --------------------------------------------------------------------------
       L1 Hero   72px — 封面大标题（≈54pt）
       L2 H1     48px — 页面主标题（≈36pt，远处一眼可读）
       L3 H2     32px — 面板 / 章节 / 模块标题（≈24pt）
       L4 H3     23px — 卡片标题 / 子标题（≈17pt）
       L5 Lead   20px — 副标题 / 引导段落（≈15pt）
       L6 Body   18px — 正文（≈14pt，投屏可读底线）
       L7 Small  16px — 标签 / 徽章 / 辅助说明
       L8 Micro  14px — 页脚 / 极小字
       --------------------------------------------------------------------------
       回滚信息（2024 桌面阅读版，如需切回改下方 8 个值）：
       Hero 52 · H1 32 · H2 22 · H3 17 · Lead 15 · Body 13 · Small 13 · Micro 13
       ========================================================================== */
    --fs-hero:  72px;
    --fs-h1:    48px;
    --fs-h2:    32px;
    --fs-h3:    23px;
    --fs-lead:  20px;
    --fs-body:  18px;
    --fs-small: 16px;
    --fs-micro: 14px;
}

/* ==========================================================================
   CLASS NAMING CONVENTION · 类名命名规范
   --------------------------------------------------------------------------
   格式：[页面前缀]-[组件名]-[语义后缀]
   每张幻灯片有自己的页面前缀命名空间；语义后缀强绑定字号档位。
   --------------------------------------------------------------------------
   【页面前缀登记表】
     00 封面         cover-*, chapter-*
     01              driver-*, comp-*, point-*
     02              cap-*, sim-*, summary-*
     03              evo-*, card-s1..s4
     04              module-*, road-*, judge-*, conclusion-*
     05              stage-*
     06              matrix-*, m-cell, cell-*, row-*, col-*
     07              condition-*, method-*, middle-*
     08              flow-*, bridge-*, pipeline-*
     09              chain-*, example-*
     10              analysis-*, insight-*, belt-*, evolution-rail*
     11              core-*, support-*
     12              taxonomy-*, type-*, overview-*, ability-*
     13 / 14         judgement-*, selector-*, detail-*
     15              mod-*（原 m-*，已规整）、flow-*, code-step-*, fn-io-*
     16              quad-*, axis-*
     17              case-*, material-*, judgement-*（原 judgment-* 已修复）
     18              col-*, wrong-*, flow-item, bottom-card-*
     19              criteria-*, switch-*
     20              task-*, route-*, bridge-*
     21              phase-*, synthesis-*, st-*
     22              principle-*（原 p-* 已规整）
   --------------------------------------------------------------------------
   【语义后缀 ⇄ 字号档位 强制映射】

   后缀                        Token              用途
   -----------------------     ----------------   ---------------------------
   -hero                       --fs-hero   (72)   封面超大标题
   -title                      --fs-h1     (48)   页面主标题（一页一个）
   -section / -section-header  --fs-h2     (32)   模块 / 章节标题
   -heading / *-title（卡片）  --fs-h3     (23)   卡片 / 小区块标题
   -subtitle / -lead           --fs-lead   (20)   副标题 / 引导段
   -text / -desc / -body       --fs-body   (18)   正文段落
   -tag / -label / -pill /
   -chip / -meta / -eyebrow /
   -kicker                     --fs-small  (16)   标签 / 徽章 / 眉题
   -caption / -footer /
   -micro                      --fs-micro  (14)   页脚 / 极小说明
   -num                        上下文判定         大数字用 --fs-h2，小序号用 --fs-small
   --------------------------------------------------------------------------
   【全局共享组件（不属于任何单页）】
   以下类在 css/style.css 中**全局定义**，页面 <style> 内不应再重定义；
   如需微调，只在页面级使用更具体的选择器（如 `.p01 .main-title`）做补丁。

   幻灯片三区结构  Slide Header  .eyebrow  .main-title  .sub-title
                   Slide Footer  .bottom-judgement  .bottom-card-title
                                  .bottom-card-text  .closing-summary

   例外保留：.closing-line 存在 4 种不同视觉形态（徽章 / 上边框竖 /
   上边框横 / 左缩进白字），按页自行定义。
   --------------------------------------------------------------------------
   【新页面作者快速指南】
   • 新建 class 时，先确定它的"语义后缀"——自动得到字号
   • 在 CSS 中 font-size 永远写 var(--fs-X)，不写 Npx
   • 无法套用页面前缀时，用下文的 .t-* 原子工具类（见文件末尾）
   • 复用全局共享组件 class 时，直接在 HTML 里写 class 名即可，不要复制 CSS
   ========================================================================== */

/* ================= 全局重置 ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden; /* 幻灯片模式，禁止全局滚动 */
    height: 100vh;
    width: 100vw;
}

/* ================= 统一动态背景系统 (Dynamic Background) ================= */
.dynamic-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* 基础光晕 */
.color-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    animation: float-blob 25s infinite alternate ease-in-out;
    will-change: transform;
}

.blob-purple {
    top: -10%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: rgba(94, 92, 230, 0.25);
    animation-delay: 0s;
}

.blob-blue {
    bottom: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: rgba(0, 102, 204, 0.2);
    animation-delay: -5s;
}

@keyframes float-blob {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5%, 5%) scale(1.05); }
    100% { transform: translate(-5%, 5%) scale(0.95); }
}

/* 神经网络 Canvas */
.network-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.8;
    display: none;
}

/* 噪点纹理叠加 */
.noise-overlay {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
    z-index: 2;
    pointer-events: none;
}

        /* ================= 幻灯片容器与动画 ================= */
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background: var(--ai-gradient);
            width: 0%;
            z-index: 1000;
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .slides-container {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease;
            display: flex;
            flex-direction: column;
            padding: 40px 60px 60px 60px; /* 减小上下内边距，特别是底部留出空间给 footer */
            background-color: transparent; /* 背景由 dynamic-bg 控制 */
            box-sizing: border-box;
        }

        .slide.active {
            opacity: 1;
            visibility: visible;
            z-index: 10;
        }

/* 通用进场动画 */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
    opacity: 0;
    animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* ================= 页面头部排版 (Header) ================= */
.header {
    max-width: 1200px;
    margin: 0 auto 40px auto;
    text-align: center;
}

.eyebrow {
    display: inline-block;
    font-size: var(--fs-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: var(--ndk-eyebrow-grad, var(--ai-gradient));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.title {
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
    line-height: 1.24;
}

.subtitle {
    font-size: var(--fs-lead);
    color: var(--text-muted);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ================= 标题分隔线品牌角标（01-22页） ================= */
.layer-1 {
    position: relative;
    padding-right: 500px;
}

.layer-1::before,
.layer-1::after {
    content: none;
}

/* 上线版不展示组织标识 */
body:not(.is-cover) .brand-logo {
    display: none !important;
}

@media (max-width: 1366px) {
    .layer-1 {
        padding-right: 380px;
    }

    .layer-1::before {
        right: 216px;
        width: 190px;
        height: 42px;
    }

    .layer-1::after {
        width: 228px;
        height: 54px;
    }
}

/* ================= 卡片与布局 (Cards & Layout) ================= */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    flex: 1;
}

.card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.base-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.card-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--ai-blue);
    background: rgba(0, 102, 204, 0.08);
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
    width: fit-content;
}

.card-title {
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.4;
    letter-spacing: -0.3px;
}

/* ================= 模拟器/终端面板 (Simulator/Terminal) ================= */
.scene {
    background: rgba(251, 251, 253, 0.8);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sim-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sim-title {
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-main);
}

.sim-state {
    font-size: var(--fs-small);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(52, 199, 89, 0.1);
    color: var(--ai-green);
}

.sim-state.pending { background: rgba(0, 102, 204, 0.1); color: var(--ai-blue); }
.sim-state.warning { background: rgba(255, 149, 0, 0.1); color: var(--ai-orange); }

.sim-board {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-family: var(--font-mono);
}

.sim-footnote {
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: 1.5;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}

/* ==========================================================================
   SLIDE SKELETON · 幻灯片三区骨架（01-22 全页写死，不可本地重定义）
   --------------------------------------------------------------------------
   本段把幻灯片划成 3 个互不侵占的矩形区，由 flex + 锁死高度实现：

       ┌─── .strategic-slide (relative container) ───┐
       │           · padding-top 40px                │
       │  ┌── .layer-1 · TOP 150px fixed ────────┐   │
       │  │    eyebrow + main-title + sub-title   │  │ ← 永不下沉
       │  └────────────────────────────────────── ┘  │
       │           · gap 14px                        │
       │  ┌── .layer-2/3 · MIDDLE flex:1 ─────────┐  │ ← 弹性吃剩余空间
       │  │    页面特定内容                        │  │
       │  └────────────────────────────────────── ┘  │
       │           · gap 14px                        │
       │  ┌── last layer · BOTTOM 132px fixed ───┐   │
       │  │    结论 / 讨论 / 总结                  │  │ ← 永远贴底
       │  └────────────────────────────────────── ┘  │
       │           · padding-bottom 40px (safe-zone) │
       └──────────────────────────────────────────── ┘
       ┌── .slide-footer-global · FIXED 40px ──────┐ ← 屏幕底部钉死
       │   page title · page number                 │
       └──────────────────────────────────────────  ┘

   三区"写死"语义：
     1. 顶部 .layer-1 高度 = var(--header-height)，不跟随内容生长
     2. 底部 (last .layer-*) 高度 = var(--conclusion-height)，不跟随内容生长
     3. 中间 .layer-2/3 吃上下两块之间的剩余空间，elastic
     4. 任一区内容溢出时 overflow: hidden 裁剪，不侵占邻区
     5. 如需调整某区高度：仅可改此处 CSS 变量；禁止在任一页面 <style> 重新定义
   ========================================================================== */
:root {
    --slide-pad-top: 20px;
    --slide-pad-x: 60px;
    /* --footer-safe-bottom 在下方 Footer 段定义为 40px */
    --header-height: 140px;
    --conclusion-height: 88px;
    --region-gap: 10px;
}

.strategic-slide {
    padding: 0;
    position: relative;
    overflow: hidden;
    background-color: #F5F5F7;
    box-sizing: border-box;
}

.content-layout {
    position: absolute;
    top: var(--slide-pad-top);
    left: var(--slide-pad-x);
    right: var(--slide-pad-x);
    bottom: var(--footer-safe-bottom);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--region-gap);
}

/* ===== TOP REGION · 顶部标题栏（高度写死） ===== */
.layer-1 {
    flex: 0 0 var(--header-height);
    min-height: var(--header-height);
    max-height: var(--header-height);
    overflow: hidden;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

/* ===== MIDDLE REGION · 中间内容区（弹性） =====
   layer-2 始终是中间；layer-3 / layer-4 只有在不是最后一个孩子时才算中间。*/
.content-layout > .layer-2,
.content-layout > .layer-3:not(:last-child),
.content-layout > .layer-4:not(:last-child) {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* ===== BOTTOM REGION · 底部结论区（高度写死） =====
   DOM 里最后一个 layer-3 或 layer-4 自动成为结论区。*/
.content-layout > .layer-3:last-child,
.content-layout > .layer-4:last-child {
    flex: 0 0 var(--conclusion-height);
    min-height: var(--conclusion-height);
    max-height: var(--conclusion-height);
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 0;
}

        /* ================= 底部导航 (Footer) ================= */
        :root {
            /* ==========================================================================
               LOCKED: Footer Spacing Baseline (Do Not Change Casually)
               --------------------------------------------------------------------------
               这是全套页面统一的“结论框 ↔ 页码”间距基线，只允许改这里这一处。
               若需要微调，请仅改 --footer-content-gap，并记录日期和原因。
               禁止在单页 HTML 里单独改底部距离（避免再次失去全局一致性）。
               ========================================================================== */
            --footer-height: 40px;
            /* 收紧底部留白，给中部内容腾出空间，并让结论框更贴近页码 */
            --footer-content-gap: 0px;
            --footer-safe-bottom: calc(var(--footer-height) + var(--footer-content-gap));
        }

        .slide-footer-global {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: var(--footer-height);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 48px;
            background-color: transparent;
            font-size: var(--fs-micro);
            color: #4A4A4F;
            font-weight: 600;
            letter-spacing: 0.5px;
            z-index: 100;
        }

        .slide-footer-global .footer-left,
        .slide-footer-global .footer-right {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .slide-footer-global .footer-left::before,
        .slide-footer-global .footer-right::after {
            content: '';
            width: 14px;
            height: 1px;
            background: #4A4A4F;
            opacity: 0.5;
        }

/* ================= 底部安全区 =================
   注：.strategic-slide 的三区骨架已用绝对定位（见上方 SLIDE SKELETON），
   .content-layout 的 bottom 已对齐到 --footer-safe-bottom，
   故不再需要 padding-bottom / margin-top:auto 的遗留 hack。
   .slide（封面/非 strategic）仍保留 padding-bottom 兜底。*/
.slide:not(.strategic-slide) {
    padding-bottom: var(--footer-safe-bottom);
}

.slide-counter {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: #4A4A4F;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ================= Slide 12 Interactive Demos ================= */
.ability-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ability-modal.is-open {
    display: flex;
}

.ability-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.68);
    backdrop-filter: blur(8px);
}

.ability-panel {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(90% 80% at 50% 0%, rgba(99, 102, 241, 0.16), transparent 55%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95));
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.46);
    padding: 22px 22px 20px;
}

.ability-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.78);
    color: #E2E8F0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    font-size: 18px;
}

.ability-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    border: 1px solid rgba(165, 180, 252, 0.2);
    background: rgba(49, 46, 129, 0.18);
    padding: 5px 11px;
    color: #CBD6FF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ability-title {
    margin-top: 12px;
    color: #F8FAFC;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.24;
}

.ability-lead {
    margin-top: 8px;
    max-width: 920px;
    color: #C7D3E0;
    font-size: 14px;
    line-height: 1.72;
}

.interactive-demo {
    margin-top: 18px;
}

.demo-surface {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.demo-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(2, 6, 23, 0.18);
}

.demo-toolbar-title {
    font-size: 13px;
    font-weight: 700;
    color: #E2E8F0;
}

.demo-toolbar-subtitle {
    margin-top: 2px;
    font-size: 13px;
    color: #94A3B8;
}

.demo-vision-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.demo-vision-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.64);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: #DBEAFE;
    font-size: 13px;
    font-weight: 700;
}

.demo-vision-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #34D399;
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.14);
}

.demo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #E2E8F0;
    background: rgba(71, 85, 105, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.demo-badge[data-tone="success"] {
    background: rgba(16, 185, 129, 0.15);
    color: #86EFAC;
}

.demo-badge[data-tone="warning"] {
    background: rgba(245, 158, 11, 0.14);
    color: #FCD34D;
}

.demo-badge[data-tone="danger"] {
    background: rgba(239, 68, 68, 0.14);
    color: #FDA4AF;
}

.demo-badge[data-tone="pending"] {
    background: rgba(59, 130, 246, 0.14);
    color: #93C5FD;
}

.demo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    gap: 16px;
    padding: 16px;
}

.demo-panel {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 6, 23, 0.26);
    padding: 16px;
}

.demo-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: #F8FAFC;
}

.demo-panel-lead {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.65;
    color: #AAB7C8;
}

.demo-vision-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.78fr);
}

.demo-vision-main,
.demo-vision-sidebar {
    min-width: 0;
}

.demo-chat-shell {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    flex-direction: column;
    height: 540px;
    overflow: hidden;
}

.demo-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.demo-chat-model-name {
    font-size: 15px;
    font-weight: 800;
    color: #F8FAFC;
    display: flex;
    align-items: center;
    gap: 8px;
}

.demo-chat-model-name::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}

.demo-chat-model-note {
    margin-top: 4px;
    font-size: 13px;
    color: #94A3B8;
}

.demo-thread-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    align-items: center;
}

.demo-chat-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #BBF7D0;
    background: rgba(22, 163, 74, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.18);
}

.demo-chat-log {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    scroll-behavior: smooth;
}

.demo-chat-footer {
    padding: 16px 20px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 50%, rgba(15, 23, 42, 0));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.demo-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.demo-chip-row::-webkit-scrollbar {
    height: 4px;
}

.demo-chip-row::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}

.demo-chip {
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.8);
    color: #E2E8F0;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.demo-chip:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
    color: #EFF6FF;
    transform: translateY(-1px);
}

.demo-chip.is-active {
    background: rgba(37, 99, 235, 0.4);
    border-color: rgba(96, 165, 250, 0.6);
    color: #FFFFFF;
}

.demo-message {
    max-width: 85%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.demo-message-wrapper {
    display: flex;
    width: 100%;
}

.demo-message-wrapper.user {
    justify-content: flex-end;
}

.demo-message-wrapper.assistant {
    justify-content: flex-start;
}

.demo-message-wrapper.system {
    justify-content: center;
}

.demo-message-wrapper.system .demo-message {
    max-width: 90%;
    align-items: center;
}

.demo-message-content {
    border-radius: 18px;
    padding: 12px 16px;
    position: relative;
}

.demo-message-wrapper.user .demo-message-content {
    background: linear-gradient(135deg, #2563EB, #4F46E5);
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.demo-message-wrapper.assistant .demo-message-content {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: #E2E8F0;
    border-bottom-left-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.demo-message-wrapper.system .demo-message-content {
    background: transparent;
    color: #94A3B8;
    font-size: 13px;
    padding: 4px 12px;
    text-align: center;
}

.demo-message-role {
    font-size: 13px;
    font-weight: 600;
    color: #94A3B8;
    margin-bottom: 2px;
    padding: 0 4px;
}

.demo-message-wrapper.user .demo-message-role {
    text-align: right;
    display: none; /* Hide 'You' label for modern look */
}

.demo-message-wrapper.assistant .demo-message-role {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
}

.demo-message-wrapper.assistant .demo-message-role::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2394A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7v1a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-1H4a1 1 0 0 1-1-1v-1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"></path><path d="M9 13v2"></path><path d="M15 13v2"></path></svg>') no-repeat center center;
}

.demo-message-wrapper.system .demo-message-role {
    display: none;
}

.demo-message-body {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.demo-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.demo-input-container {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 24px;
    padding: 4px 8px 4px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.demo-input-container:focus-within {
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.demo-textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: #F8FAFC;
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 0;
    max-height: 120px;
    min-height: 42px;
    resize: none;
    outline: none;
}

.demo-textarea::placeholder {
    color: #64748B;
}

.demo-send-btn {
    background: #2563EB;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 5px;
    margin-left: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.demo-send-btn:hover:not(:disabled) {
    background: #3B82F6;
    transform: scale(1.05);
}

.demo-send-btn:disabled {
    background: rgba(71, 85, 105, 0.5);
    color: rgba(148, 163, 184, 0.5);
    cursor: not-allowed;
}

.demo-inline-note {
    font-size: 13px;
    color: #64748B;
    text-align: center;
}

.demo-surface-light {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.demo-surface-light .demo-toolbar {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.82);
}

.demo-surface-light .demo-toolbar-title {
    color: #0F172A;
    font-size: 13px;
}

.demo-surface-light .demo-toolbar-subtitle {
    color: #475569;
    font-size: 13px;
}

.demo-surface-light .demo-badge {
    color: #334155;
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.demo-surface-light .demo-badge[data-tone="success"] {
    background: #ECFDF5;
    color: #047857;
}

.demo-surface-light .demo-badge[data-tone="warning"] {
    background: #FFF7ED;
    color: #C2410C;
}

.demo-surface-light .demo-badge[data-tone="danger"] {
    background: #FEF2F2;
    color: #B91C1C;
}

.demo-surface-light .demo-badge[data-tone="pending"] {
    background: #EFF6FF;
    color: #1D4ED8;
}

.demo-surface-light .demo-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.78fr);
    gap: 12px;
    padding: 12px;
}

.demo-surface-light .demo-panel {
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
    padding: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.demo-panel-chat,
.demo-panel-brief {
    min-width: 0;
}

.demo-surface-light .demo-chat-shell {
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
    height: 430px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.demo-surface-light .demo-chat-header {
    padding: 12px 14px;
    border-bottom: 1px solid #E2E8F0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
}

.demo-surface-light .demo-chat-model-name {
    color: #0F172A;
    font-size: 14px;
}

.demo-surface-light .demo-chat-model-note {
    color: #475569;
}

.demo-surface-light .demo-chat-live-pill {
    color: #0369A1;
    background: #F0F9FF;
    border-color: #BAE6FD;
}

.demo-surface-light .demo-secondary-btn {
    background: #FFFFFF;
    color: #334155;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.demo-surface-light .demo-chat-log {
    gap: 12px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.72), rgba(255, 255, 255, 0.96)),
        radial-gradient(circle at top left, rgba(191, 219, 254, 0.24), transparent 32%);
}

.demo-surface-light .demo-chat-footer {
    gap: 10px;
    padding: 12px 14px 14px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.86), rgba(255, 255, 255, 0.98));
    border-top: 1px solid rgba(226, 232, 240, 0.92);
}

.demo-surface-light .demo-chip-row {
    gap: 6px;
    padding-bottom: 2px;
}

.demo-surface-light .demo-chip {
    border-radius: 999px;
    border: 1px solid #DBEAFE;
    background: #F8FBFF;
    color: #334155;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
}

.demo-surface-light .demo-chip:hover,
.demo-surface-light .demo-chip.is-active {
    background: #EFF6FF;
    border-color: #93C5FD;
    color: #1D4ED8;
    transform: none;
}

.demo-surface-light .demo-message {
    max-width: 82%;
}

.demo-surface-light .demo-message-content {
    border-radius: 16px;
    padding: 10px 12px;
}

.demo-surface-light .demo-message-wrapper.user .demo-message-content {
    background: linear-gradient(135deg, #DBEAFE, #E0E7FF);
    color: #1E3A8A;
    border: 1px solid #BFDBFE;
    border-bottom-right-radius: 6px;
    box-shadow: 0 4px 14px rgba(96, 165, 250, 0.12);
}

.demo-surface-light .demo-message-wrapper.assistant .demo-message-content {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #0F172A;
    border-bottom-left-radius: 6px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.demo-surface-light .demo-message-wrapper.system .demo-message-content {
    background: #F8FAFC;
    color: #475569;
    border: 1px dashed #CBD5E1;
}

.demo-surface-light .demo-message-role {
    color: #475569;
    font-size: 13px;
}

.demo-surface-light .demo-message-wrapper.assistant .demo-message-role::before {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #60A5FA, #A855F7);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
}

.demo-surface-light .demo-message-body {
    font-size: 13px;
    line-height: 1.62;
}

.demo-surface-light .demo-input-container {
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #DCE6F2;
    border-radius: 18px;
    padding: 0 6px 0 12px;
    min-height: 46px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.demo-surface-light .demo-input-container:focus-within {
    border-color: #93C5FD;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

.demo-surface-light .demo-textarea {
    color: #0F172A;
    font-size: 13px;
    min-height: 38px;
    max-height: 92px;
    padding: 10px 0;
}

.demo-surface-light .demo-textarea::placeholder {
    color: #94A3B8;
}

.demo-surface-light .demo-send-btn {
    width: 30px;
    height: 30px;
    margin: 0 0 0 8px;
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.18);
}

.demo-surface-light .demo-inline-note {
    color: #475569;
    text-align: left;
    font-size: 13px;
}

.demo-surface-light .demo-panel-title {
    color: #0F172A;
}

.demo-surface-light .demo-panel-lead {
    color: #475569;
    margin-top: 4px;
    font-size: 13px;
}

.demo-brief-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.demo-brief-card {
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC);
    padding: 10px;
}

.demo-brief-card-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.demo-brief-card-value {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
    color: #0F172A;
}

.demo-surface-light .demo-takeaway-list {
    margin-top: 12px;
    gap: 8px;
}

.demo-surface-light .demo-takeaway-list li {
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    padding: 10px 11px;
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.demo-surface-light .demo-summary-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #CBD5E1;
}

.demo-surface-light .demo-summary-block-title {
    color: #6366F1;
}

.demo-surface-light .demo-summary-block-text {
    color: #475569;
    font-size: 13px;
    line-height: 1.6;
}

.demo-surface-light .demo-runtime,
.demo-surface-light .demo-config-hint {
    display: none;
}

.material-card-demo {
    padding: 0;
    overflow: hidden;
}

.demo-multimodal-surface {
    height: 100%;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
}

.demo-multimodal-body {
    padding: 14px 16px 16px;
}

.demo-multimodal-input-container {
    min-height: 50px;
    margin-top: 12px;
}

.demo-multimodal-preview-stage {
    margin-top: 12px;
    height: clamp(320px, 42vh, 420px);
    min-height: 280px;
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.22), transparent 34%),
        radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.18), transparent 30%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.06), rgba(30, 41, 59, 0.02));
}

.demo-multimodal-empty {
    flex-direction: column;
    gap: 10px;
}

.demo-multimodal-empty-art {
    width: min(76%, 280px);
    height: auto;
    filter: drop-shadow(0 18px 34px rgba(99, 102, 241, 0.16));
}

.demo-multimodal-empty-text {
    max-width: 220px;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.demo-multimodal-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(248, 250, 252, 0.72);
    display: block;
}

.demo-multimodal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    margin-top: 10px;
}

.demo-multimodal-actions[hidden],
.demo-multimodal-save[hidden],
.demo-multimodal-save-note[hidden] {
    display: none;
}

.demo-multimodal-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    text-decoration: none;
}

.demo-multimodal-save-note {
    min-width: 0;
    overflow: hidden;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-multimodal-loading {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.76);
    color: #E0F2FE;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.demo-primary-btn,
.demo-secondary-btn {
    border: 0;
    border-radius: 12px;
    padding: 12px 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.demo-primary-btn {
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    color: #F8FAFC;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.24);
}

.demo-primary-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.demo-secondary-btn {
    background: rgba(30, 41, 59, 0.74);
    color: #E2E8F0;
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.demo-compact-btn {
    padding: 8px 12px;
    font-size: 13px;
}

.demo-runtime,
.demo-config-hint {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: #94A3B8;
}

.demo-takeaway-list {
    margin-top: 14px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-takeaway-list li {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.42);
    padding: 12px;
    color: #E2E8F0;
    font-size: 13px;
    line-height: 1.62;
}

.demo-summary-block {
    margin-top: 14px;
    border-top: 1px dashed rgba(148, 163, 184, 0.2);
    padding-top: 14px;
}

.demo-summary-block-title {
    font-size: 13px;
    font-weight: 800;
    color: #CBD5E1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.demo-summary-block-text {
    margin-top: 6px;
    color: #AAB7C8;
    font-size: 13px;
    line-height: 1.66;
}

.demo-vision-controls {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) auto;
    gap: 10px;
    align-items: end;
}

.demo-vision-control-bar {
    margin-top: 14px;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) auto;
    gap: 12px;
    align-items: end;
}

.demo-vision-upload-row {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}

.demo-upload-inline {
    min-width: 220px;
    flex: 1 1 220px;
}

.demo-vision-mode-panel {
    min-width: 0;
}

.demo-vision-action-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.demo-vision-helper {
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: rgba(37, 99, 235, 0.12);
    color: #DBEAFE;
    font-size: 13px;
    line-height: 1.6;
}

.demo-vision-stage-footer {
    margin-top: 12px;
    display: grid;
    gap: 6px;
}

.demo-vision-legend {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.demo-vision-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.48);
    border: 1px solid rgba(148, 163, 184, 0.16);
    color: #CBD5E1;
    font-size: 13px;
    font-weight: 600;
}

.demo-vision-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.demo-vision-legend-dot.is-positive {
    background: #4ADE80;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
}

.demo-vision-legend-dot.is-negative {
    background: #FB7185;
    box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.16);
}

.demo-vision-legend-dot.is-box {
    background: #93C5FD;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
}

.demo-upload {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.demo-field-label {
    font-size: 13px;
    font-weight: 700;
    color: #CBD5E1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.demo-upload input[type="file"] {
    color: #CBD5E1;
    font-size: 13px;
}

.demo-upload input[type="file"]::file-selector-button {
    margin-right: 10px;
    border: 0;
    border-radius: 10px;
    padding: 9px 12px;
    background: rgba(37, 99, 235, 0.18);
    color: #DBEAFE;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.demo-preview-stage {
    position: relative;
    margin-top: 16px;
    min-height: 320px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.42), rgba(30, 41, 59, 0.24)),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.02) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.02) 75%);
    background-size: auto, 24px 24px, 24px 24px;
    background-position: 0 0, 0 0, 12px 12px;
    overflow: hidden;
}

.demo-preview-stage.has-mask {
    box-shadow:
        inset 0 0 0 2px rgba(251, 191, 36, 0.52),
        0 18px 40px rgba(249, 115, 22, 0.16);
}

.demo-preview-stage.has-mask::after {
    content: "SAM2 Mask";
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #FDE68A;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.demo-preview-stage[data-mode="positive"],
.demo-preview-stage[data-mode="negative"] {
    cursor: crosshair;
}

.demo-preview-stage[data-mode="box"] {
    cursor: cell;
}

.demo-preview-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #94A3B8;
    font-size: 13px;
    text-align: center;
}

.demo-preview-frame {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(2, 6, 23, 0.26);
}

.demo-preview-image,
.demo-preview-mask,
.demo-annotation-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.demo-preview-image {
    object-fit: fill;
    background: rgba(15, 23, 42, 0.28);
}

.demo-preview-mask {
    object-fit: fill;
    opacity: 1;
    mix-blend-mode: normal;
    filter: saturate(1.18) contrast(1.08);
}

.demo-annotation-overlay {
    pointer-events: none;
}

.demo-result-list {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.demo-result-chip {
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(37, 99, 235, 0.18);
    color: #DBEAFE;
    border: 1px solid rgba(96, 165, 250, 0.2);
    font-size: 13px;
    font-weight: 700;
}

.demo-vision-metric-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.demo-vision-metric-card {
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.34);
    padding: 12px;
}

.demo-vision-metric-card.is-wide {
    grid-column: 1 / -1;
}

.demo-vision-metric-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
}

.demo-vision-metric-value {
    margin-top: 8px;
    color: #F8FAFC;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 700;
}

.type-card-button {
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
}

.type-card-button:focus-visible,
.demo-chip:focus-visible,
.demo-primary-btn:focus-visible,
.demo-secondary-btn:focus-visible,
.demo-textarea:focus-visible,
.demo-input:focus-visible,
.ability-close:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.9);
    outline-offset: 2px;
}

.type-card-cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2563EB;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 980px) {
    .demo-layout {
        grid-template-columns: 1fr;
    }

    .demo-vision-control-bar,
    .demo-vision-controls {
        grid-template-columns: 1fr;
    }

    .demo-vision-action-row {
        justify-content: stretch;
    }

    .demo-form {
        grid-template-columns: 1fr;
    }

    .demo-form-actions {
        flex-direction: row;
    }
}

/* ==========================================================================
   品牌 Logo 已在上线版关闭
   ========================================================================== */
.brand-logo {
    display: none;
}

.brand-logo__wordmark {
    height: 30px;
    width: auto;
    object-fit: contain;
    display: block;
}

.brand-logo__mark {
    height: 26px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* 封面页不展示 logo（封面自有设计） */
body:has(.cover-slide) .brand-logo,
body.is-cover .brand-logo {
    display: none !important;
}

/* ==========================================================================
   SLIDE HEADER · 幻灯片标题区（跨页共享三元组）
   --------------------------------------------------------------------------
   .eyebrow   · 页眉小标签（渐变文本）
   .main-title · 页面主标题
   .sub-title  · 页面副标题
   所有 23 页标题区统一使用此定义，页内 <style> 不再单独重定义。
   如单页确需差异，可用更具体的选择器（如 `.p01 .main-title`）做局部微调。
   ========================================================================== */
.eyebrow {
    display: inline-block;
    font-size: var(--fs-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: var(--ndk-eyebrow-grad, var(--ai-gradient));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.main-title {
    font-size: var(--fs-h1);
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.45px;
    margin-bottom: 8px;
    line-height: 1.24;
}

.main-title .accent {
    background: var(--ai-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub-title {
    font-size: var(--fs-lead);
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 95%;
}

/* ==========================================================================
   SLIDE CONCLUSION · 幻灯片底部结论区（跨页共享）
   --------------------------------------------------------------------------
   .bottom-judgement · 底部判断条（深色背景 + 白字 + 下分隔线）
   .bottom-card-title · 底部信息卡片标题
   .bottom-card-text  · 底部信息卡片正文
   .closing-summary  · 深色层末尾的收束句
   用于 p17–p22 结论层；页面内不再单独重定义这些类。
   注：.closing-line 因存在 4 种完全不同的视觉形态（徽章条 / 上边框竖向 /
   上边框横向 / 左缩进白字），未纳入统一，各页自行定义。
   ========================================================================== */
.bottom-judgement {
    font-size: var(--fs-body);
    font-weight: 800;
    color: #FFFFFF;
    text-align: center;
    line-height: 1.45;
    letter-spacing: 0.3px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-card-title {
    font-size: var(--fs-body);
    font-weight: 800;
    color: #E2E8F0;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.bottom-card-text {
    font-size: var(--fs-body);
    color: #CBD5E1;
    line-height: 1.5;
    font-weight: 500;
}

.closing-summary {
    font-size: var(--fs-body);
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

/* ==========================================================================
   语义类 → 字号 Token 默认映射 · Semantic Typography Defaults
   --------------------------------------------------------------------------
   Phase 2 后，24 个页面内的 font-size 已全部切换为 var(--fs-*)，不再有
   散落的 px 硬编码。本层不再使用 !important，改为"默认映射"：
     • 仅当页面没有为该 class 显式写 font-size 时生效
     • 页面若有更具体的 selector 或更靠后的规则，可自然覆盖本层
     • 方便新页面作者直接复用常见语义类名，无需再写 font-size
   ========================================================================== */

/* ---------- L1 Hero (72px) · 封面 ---------- */
.cover-title {
    font-size: var(--fs-hero);
    line-height: 1.15;
}

/* ---------- L2 页面主标题 (48px) ---------- */
/* .main-title 已在 SLIDE HEADER 块中全局定义，此处仅保留别名 */
.title,
.page-title,
.slide-title,
.ability-title {
    font-size: var(--fs-h1);
    line-height: 1.24;
}

/* ---------- L3 章节/面板标题 (32px) ---------- */
.panel-title,
.section-title,
.module-header,
.module-title,
.driver-title,
.detail-title,
.selector-title,
.summary-title,
.route-title,
.demo-panel-title {
    font-size: var(--fs-h2);
    line-height: 1.35;
}

/* ---------- L4 卡片标题 (23px) ---------- */
.card-title,
.card-main-text,
.cap-title,
.col-header,
.support-title,
.core-text,
.summary-body,
.type-title,
.task-label,
.meta-value,
.conclusion-heading,
.demo-chat-model-name,
.demo-toolbar-title {
    font-size: var(--fs-h3);
    line-height: 1.4;
}

/* ---------- L5 副标题/引导段 (20px) ---------- */
/* .sub-title 已在 SLIDE HEADER 块中全局定义，此处仅保留别名 */
.subtitle,
.cover-desc,
.ability-lead,
.panel-lead,
.demo-panel-lead,
.lead,
.section-lead,
.summary-lead,
.header-subtitle,
.summary-body-text {
    font-size: var(--fs-lead);
    line-height: 1.55;
}

/* ---------- L6 正文 (18px) ---------- */
.cap-desc,
.driver-desc,
.support-desc,
.conclusion-text,
.detail-text,
.detail-col-text,
.judgement-text,
.point-item,
.evo-step,
.sim-title,
.sim-footnote,
.task-desc,
.bridge-text,
.body-text,
.summary-footer,
.summary-body-desc,
.detail-list li,
.conclusion-list li,
.note-text,
.demo-message-body,
.demo-summary-block-text,
.demo-takeaway-list li,
.demo-brief-card-value,
.demo-vision-metric-value {
    font-size: var(--fs-body);
    line-height: 1.6;
}

/* ---------- L7 小字/标签 (16px) ---------- */
.cover-kicker,
.card-header-text,
.card-tag,
.meta-label,
.data-item-label,
.data-item-value,
.sim-state,
.sim-aux,
.tag,
.task-kicker,
.task-hint,
.core-kicker,
.conclusion-title,
.stage-judgement,
.summary-transition,
.cell-task,
.row-header,
.legend,
.legend-text,
.bridge-pill-left,
.bridge-pill-right,
.kicker,
.demo-badge,
.demo-chip,
.demo-field-label,
.demo-chat-live-pill,
.demo-vision-live-pill,
.demo-vision-legend-item,
.demo-summary-block-title,
.demo-chat-model-note {
    font-size: var(--fs-small);
    line-height: 1.45;
}

/* ---------- L8 微型/页脚 (14px) ---------- */
.slide-counter,
.slide-footer-global,
.cell-model,
.demo-toolbar-subtitle,
.demo-inline-note,
.demo-message-role,
.demo-brief-card-label,
.demo-vision-metric-label,
.micro-text,
.footnote-small {
    font-size: var(--fs-micro);
    line-height: 1.5;
}

/* ---------- 通用语义标签兜底 ---------- */
.slide p { font-size: var(--fs-body); line-height: 1.6; }
.slide li { font-size: var(--fs-body); line-height: 1.6; }

/* ==========================================================================
   Table of Contents (TOC) — right-top toggle + overlay
   顺序播放时不显示；点击右上角按钮或按 M 打开；Esc 关闭。
   ========================================================================== */
.toc-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9998;
    height: 44px;
    min-width: 44px;
    padding: 0 12px 0 13px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    color: #1D1D1F;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: inherit;
    font-weight: 600;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(10, 10, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: gap 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.25s ease,
                box-shadow 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease;
}
.toc-toggle:hover {
    gap: 8px;
    padding-right: 18px;
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 32px rgba(94, 92, 230, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.toc-toggle .tt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2.5px;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.toc-toggle .tt-grid i {
    background: currentColor;
    border-radius: 1.5px;
    opacity: 0.9;
    animation: tt-dot-pulse 2.4s ease-in-out infinite;
}
.toc-toggle .tt-grid i:nth-child(1){ animation-delay: 0.00s; }
.toc-toggle .tt-grid i:nth-child(2){ animation-delay: 0.10s; }
.toc-toggle .tt-grid i:nth-child(3){ animation-delay: 0.20s; }
.toc-toggle .tt-grid i:nth-child(4){ animation-delay: 0.30s; }
.toc-toggle .tt-grid i:nth-child(5){
    animation-delay: 0.40s;
    background: linear-gradient(135deg, #5E5CE6, #FF375F);
    opacity: 1;
}
.toc-toggle .tt-grid i:nth-child(6){ animation-delay: 0.50s; }
.toc-toggle .tt-grid i:nth-child(7){ animation-delay: 0.60s; }
.toc-toggle .tt-grid i:nth-child(8){ animation-delay: 0.70s; }
.toc-toggle .tt-grid i:nth-child(9){ animation-delay: 0.80s; }
@keyframes tt-dot-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.82); }
    50%      { opacity: 1;    transform: scale(1); }
}
.toc-toggle .tt-label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: 0.08em;
    transform: translateX(-4px);
    transition: max-width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease 0.08s,
                transform 0.3s ease;
}
.toc-toggle:hover .tt-label {
    max-width: 80px;
    opacity: 1;
    transform: translateX(0);
}
.toc-toggle.is-active {
    background: linear-gradient(135deg, #5E5CE6, #B051D5 55%, #FF375F);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 30px rgba(94, 92, 230, 0.35);
}
.toc-toggle.is-active .tt-grid i { background: #fff; opacity: 0.95; }
.toc-toggle.is-active .tt-grid i:nth-child(5){ background: #fff; }

/* ---------- Overlay ---------- */
.toc-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(ellipse at 30% 20%, rgba(94, 92, 230, 0.28), transparent 55%),
                radial-gradient(ellipse at 70% 80%, rgba(255, 55, 95, 0.20), transparent 55%),
                rgba(12, 13, 22, 0.62);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.toc-overlay.is-open {
    display: flex;
    opacity: 1;
}

.toc-panel {
    position: relative;
    width: min(1240px, 94vw);
    max-height: 90vh;
    padding: 36px 40px 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,250,252,0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 40px 120px rgba(10, 8, 40, 0.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(18px) scale(0.97);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.toc-overlay.is-open .toc-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.toc-panel::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 92, 230, 0.28), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}
.toc-panel::after {
    content: '';
    position: absolute;
    bottom: -160px;
    left: -100px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 55, 95, 0.22), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}

.toc-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}
.toc-header-left { min-width: 0; }
.toc-kicker {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    background: var(--ai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 8px;
}
.toc-title {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--text-main);
    line-height: 1.15;
}
.toc-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.toc-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.toc-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
}
.toc-stat-val {
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 900;
    background: var(--ai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}
.toc-stat-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 3px;
}
.toc-close {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.035);
    color: #1D1D1F;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    transition: background 0.25s ease, color 0.25s ease, transform 0.3s ease, border-color 0.25s ease;
}
.toc-close:hover {
    background: #1D1D1F;
    color: #fff;
    border-color: #1D1D1F;
    transform: rotate(90deg);
}

.toc-body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    margin-top: 8px;
    padding: 14px 6px 6px 0;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.toc-body::-webkit-scrollbar { width: 8px; }
.toc-body::-webkit-scrollbar-track { background: transparent; }
.toc-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.14);
    border-radius: 4px;
}
.toc-body::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); }

.toc-chapter {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 26px;
    padding: 18px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.07);
}
.toc-chapter:last-child { border-bottom: none; padding-bottom: 6px; }
.toc-chapter-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}
.toc-chapter-num {
    font-family: 'Inter', sans-serif;
    font-size: 56px;
    font-weight: 900;
    line-height: 0.9;
    background: var(--ai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.05em;
}
.toc-chapter-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.toc-chapter-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.35;
}
.toc-chapter-range {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 6px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.toc-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
    gap: 10px;
    align-content: start;
    min-width: 0;
}
.toc-page-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 13px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: var(--text-main);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    font-family: inherit;
    opacity: 0;
    transform: translateY(10px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.toc-overlay.is-open .toc-page-card {
    animation: toc-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes toc-card-in {
    to { opacity: 1; transform: translateY(0); }
}
.toc-page-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--ai-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.toc-page-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(94, 92, 230, 0.18);
    border-color: transparent;
}
.toc-page-card:hover::before { opacity: 1; }
.toc-page-num {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--text-muted);
}
.toc-page-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.toc-page-card.is-current {
    background: linear-gradient(135deg, rgba(94, 92, 230, 0.10), rgba(255, 55, 95, 0.08));
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(94, 92, 230, 0.18);
}
.toc-page-card.is-current::before { opacity: 1; }
.toc-page-card.is-current .toc-page-num {
    background: var(--ai-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.toc-page-card.is-current::after {
    content: '正在浏览';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 3px 7px;
    border-radius: 999px;
    color: #fff;
    background: var(--ai-gradient);
    box-shadow: 0 6px 16px rgba(94, 92, 230, 0.35);
}

.toc-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.toc-keys { display: flex; flex-wrap: wrap; gap: 14px; }
.toc-key { display: inline-flex; align-items: center; gap: 6px; }
.toc-key kbd {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 3px 8px;
    min-width: 22px;
    text-align: center;
    border-radius: 6px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--text-main);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.toc-brand {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 900px) {
    .toc-chapter { grid-template-columns: 1fr; gap: 14px; }
    .toc-chapter-num { font-size: 42px; }
    .toc-title { font-size: 26px; }
    .toc-panel { padding: 26px 22px 20px; }
}

@media print {
    .toc-toggle, .toc-overlay { display: none !important; }
}

/* ==========================================================================
   统一"悬停微动"系统 (Unified Hover-Lift Motion)
   —— 与封面 00 页 .chapter-card:hover 保持一致的鼠标靠近动效。
   使用 :where() 包裹，特异性为 0，不覆盖各页已有的自定义 :hover 样式；
   仅对本身没有 hover 交互的内容框补齐"微微抬起 + 柔光阴影"的一致观感。

   为何 :hover 里用 !important ：部分页面给卡片加了带 `fill-mode: forwards`
   的入场动画（如 05/10/21 等的 .anim-stage-x），动画会把 `transform` 永久
   锁定，按 CSS 级联规范，作者层 normal 优先级的规则都被动画层击败。只有
   作者层 `!important` 能胜过动画层。此处仅对本列表中的类生效，不会影响
   其他自定义 :hover（它们不在本 :where 选择器里）。
   ========================================================================== */
:where(
    /* 01 */ .driver-card, .comp-panel, .point-item, .evo-step,
    /* 03 */ .evo-card,
    /* 04 */ .module, .module-left, .module-right, .road-item, .judge-item,
    /* 05 */ .stage-card,
    /* 06 */ .m-cell.filled,
    /* 07 */ .condition-item, .method-card,
    /* 08 */ .flow-step, .bridge-card, .bridge-module, .pipeline-entry,
    /* 09 */ .chain-card, .summary-band, .example-card,
    /* 10 */ .analysis-column, .insight-item, .transition-belt,
    /* 11 */ .core-definition, .support-card,
    /* 12 */ .overview-card, .overview-panel, .judgement-box, .type-entry,
    /* 13/14 */ .detail-panel, .selector-card,
    /* 15 */ .flow-bubble, .module-card, .fn-io-card,
    /* 16 */ .quad-meta-block,
    /* 17 */ .bottom-card, .material-card, .case-card,
    /* 18 */ .col-panel, .wrong-item, .flow-item, .transition-col,
    /* 19 */ .judgement-banner, .suit-item, .risk-item,
    /* 20 */ .task-card, .route-panel,
    /* 21 */ .phase,
    /* 22 */ .principle-card, .logic-step,
    /* ml-demo 系列（单独的方程卡等） */ .eq-card
) {
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s ease,
        border-color 0.3s ease;
    will-change: transform;
}

:where(
    .driver-card, .comp-panel, .point-item, .evo-step,
    .evo-card,
    .module, .module-left, .module-right, .road-item, .judge-item,
    .stage-card,
    .m-cell.filled,
    .condition-item, .method-card,
    .flow-step, .bridge-card, .bridge-module, .pipeline-entry,
    .chain-card, .summary-band, .example-card,
    .analysis-column, .insight-item, .transition-belt,
    .core-definition, .support-card,
    .overview-card, .overview-panel, .judgement-box, .type-entry,
    .detail-panel, .selector-card,
    .flow-bubble, .module-card, .fn-io-card,
    .quad-meta-block,
    .bottom-card, .material-card, .case-card,
    .col-panel, .wrong-item, .flow-item, .transition-col,
    .judgement-banner, .suit-item, .risk-item,
    .task-card, .route-panel,
    .phase,
    .principle-card, .logic-step,
    .eq-card
):hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.08),
        0 4px 12px rgba(94, 92, 230, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* ml-demo 系列：.card 类名过于通用，仅在 demo 根容器下生效 */
:where(.ml-demo-root, .viz-panel, .info-panel, .interactive-stage) .card {
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s ease,
        border-color 0.3s ease;
    will-change: transform;
}
:where(.ml-demo-root, .viz-panel, .info-panel, .interactive-stage) .card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.08),
        0 4px 12px rgba(94, 92, 230, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* 辅助工具类：对日后新增的内容框可直接加 class="hover-lift" 获得一致动效 */
.hover-lift {
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s ease,
        border-color 0.3s ease;
    will-change: transform;
}
.hover-lift:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.08),
        0 4px 12px rgba(94, 92, 230, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* 尊重"减弱动态效果"的用户偏好 */
@media (prefers-reduced-motion: reduce) {
    :where(
        .driver-card, .comp-panel, .point-item, .evo-step,
        .evo-card, .module, .module-left, .module-right, .road-item, .judge-item,
        .stage-card, .m-cell.filled, .condition-item, .method-card,
        .flow-step, .bridge-card, .bridge-module, .pipeline-entry,
        .chain-card, .summary-band, .example-card,
        .analysis-column, .insight-item, .transition-belt,
        .core-definition, .support-card, .overview-card, .overview-panel, .judgement-box, .type-entry,
        .detail-panel, .selector-card,
        .flow-bubble, .module-card, .fn-io-card, .quad-meta-block,
        .bottom-card, .material-card, .case-card,
        .col-panel, .wrong-item, .flow-item, .transition-col,
        .judgement-banner, .suit-item, .risk-item, .task-card, .route-panel,
        .phase, .principle-card, .logic-step, .eq-card,
        .hover-lift
    ):hover {
        transform: none !important;
    }
}

/* ==========================================================================
   TYPOGRAPHY ATOMIC UTILITIES · 字号原子工具类
   --------------------------------------------------------------------------
   用于无法套用"页面前缀 + 语义后缀"规范时的应急字号指定。
   优先级：语义类名（如 .driver-title）> 原子工具类（.t-h1）> 默认继承。
   新页面/临时布局可直接给元素加 class="t-body" / "t-h2" 获得契约字号。
   ========================================================================== */
.t-hero   { font-size: var(--fs-hero); }
.t-h1     { font-size: var(--fs-h1); }
.t-h2     { font-size: var(--fs-h2); }
.t-h3     { font-size: var(--fs-h3); }
.t-lead   { font-size: var(--fs-lead); }
.t-body   { font-size: var(--fs-body); }
.t-small  { font-size: var(--fs-small); }
.t-micro  { font-size: var(--fs-micro); }