/* =========================================================
   设计令牌 Design Tokens
   风格：蓝白工业科研平台 + 语义化数据色
   规则：所有颜色只在这里定义，案例与组件不得写死色值
   ========================================================= */

:root{
  /* ---------- 画布 ---------- */
  --paper:      #f4f7fa;   /* 主背景，冷白 */
  --paper-2:    #edf2f7;   /* 次级底板 */
  --paper-3:    #e5ebf1;   /* 三级底板 */
  --card:       #ffffff;   /* 卡片 */
  --card-soft:  #f8fafc;   /* 卡片内嵌区 */

  /* ---------- 描边 ---------- */
  --line:       #e2e9f1;
  --line-2:     #d3deea;
  --line-3:     #b9c8d7;

  /* ---------- 墨色（文字） ---------- */
  --ink:        #17283b;
  --ink-2:      #4f6276;
  --ink-3:      #65758a;
  --ink-4:      #8b9aac;
  --ink-inv:    #f8fbff;

  /* ---------- 工业科研界面 ---------- */
  --navy-950:   #081724;
  --navy-900:   #0d2033;
  --navy-800:   #13283c;
  --navy-700:   #1b3650;
  --steel-700:  #304b61;
  --canvas:     #f2f5f8;
  --canvas-2:   #e9eff4;
  --panel:      #ffffff;
  --panel-cool: #f7f9fb;
  --text-1:     #17283b;
  --text-2:     #4f6174;
  --text-3:     #708194;
  --border-1:   #dce4ec;
  --border-2:   #c9d5e0;
  --accent:     #245fa8;
  --accent-d:   #194c88;
  --accent-l:   #eaf1f9;
  --cyan-data:  #3e9bb2;
  --sand-data:  #d3a55f;
  --danger-data:#b95e55;

  /* ---------- 统一工业平台设计系统（D1） ----------
     新页面优先使用 platform-* 令牌；旧案例仍可使用上方兼容令牌，
     便于按阶段迁移，不会在 D1 连带改动其余 16 个案例。 */
  --platform-nav:          #14283c;
  --platform-nav-hover:    #203a54;
  --platform-bg:           #f4f7fa;
  --platform-surface:      #ffffff;
  --platform-surface-soft: #f8fafc;
  --platform-text:         #17283b;
  --platform-text-2:       #4f6276;
  --platform-muted:        #65758a;
  --platform-accent:       #0868d9;
  --platform-accent-dark:  #0757b5;
  --platform-accent-soft:  #eaf3ff;
  --platform-border:       #e2e9f1;
  --platform-border-strong:#cbd7e4;
  --platform-success:      #16865d;
  --platform-success-soft: #e8f6f0;
  --platform-warning:      #c78320;
  --platform-warning-soft: #fff5e5;
  --platform-danger:       #c94b4b;
  --platform-danger-soft:  #fff0f0;
  --platform-chart-blue:   #2878c8;
  --platform-chart-green:  #16865d;
  --platform-chart-orange: #d18425;
  --platform-chart-red:    #c94b4b;
  --platform-chart-gray:   #8b9aac;
  --platform-container:    1360px;
  --platform-radius-sm:    4px;
  --platform-radius-md:    8px;
  --platform-radius-lg:    12px;
  --platform-shadow-sm:    0 1px 2px rgba(20,40,60,.04), 0 8px 24px rgba(20,40,60,.05);
  --platform-shadow-md:    0 14px 36px rgba(20,40,60,.09);

  /* ---------- 主强调 ---------- */
  --jade:       #0868d9;
  --jade-d:     #0757b5;
  --jade-l:     #eaf3ff;
  --clay:       #c78320;
  --clay-d:     #996113;
  --clay-l:     #fff5e5;

  /* ---------- 五类方法色（中饱和，白底可读） ---------- */
  --c-cv:       #16865d;   /* 计算机视觉 */
  --c-ts:       #d18425;   /* 时序预测 */
  --c-nlp:      #7857a8;   /* 自然语言处理 */
  --c-opt:      #2878c8;   /* 优化算法 */
  --c-kg:       #4f7f9b;   /* 知识图谱 */

  --bg-cv:      #e8f6f0;
  --bg-ts:      #fff5e5;
  --bg-nlp:     #f2edfb;
  --bg-opt:     #eaf3ff;
  --bg-kg:      #edf4f8;

  /* ---------- 语义色 ---------- */
  --ok:         #16865d;
  --ok-bg:      #e8f6f0;
  --warn:       #c78320;
  --warn-bg:    #fff5e5;
  --bad:        #c94b4b;
  --bad-bg:     #fff0f0;

  /* ---------- 圆角与阴影 ---------- */
  --r-s: 5px;
  --r-m: 9px;
  --r-l: 14px;
  --r-xl: 20px;

  --sh-1: 0 1px 2px rgba(20,40,60,.04);
  --sh-2: 0 1px 2px rgba(20,40,60,.05), 0 8px 24px -12px rgba(20,40,60,.18);
  --sh-3: 0 2px 4px rgba(20,40,60,.06), 0 16px 38px -18px rgba(20,40,60,.24);

  /* ---------- 字体 ---------- */
  --mono: 'JetBrains Mono','SFMono-Regular','Cascadia Mono',Consolas,'Liberation Mono',monospace;
  --sans: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI Variable','Segoe UI',
          'PingFang SC','Hiragino Sans GB','Microsoft YaHei UI','Microsoft YaHei',sans-serif;

  /* ---------- 布局 ---------- */
  --nav-h: 54px;
  --maxw: 1360px;
  --sp-1: 6px;  --sp-2: 10px;  --sp-3: 14px;
  --sp-4: 20px; --sp-5: 28px;  --sp-6: 40px;
}

/* =========================================================
   Reset
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.68;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* 背景只保留冷色工业网格，不引入暖色纸面。 */
body::before{
  content:'';
  position:fixed;inset:0;z-index:-2;
  background:linear-gradient(180deg,#f8fbfe 0,#f4f7fa 260px,var(--paper) 100%);
}
/* 极淡网格，只在上半页可见 */
body::after{
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(44,83,116,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(44,83,116,.045) 1px, transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 70% 46% at 50% 0%, #000 0%, transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 70% 46% at 50% 0%, #000 0%, transparent 82%);
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}
img,svg{max-width:100%}
::selection{background:rgba(8,104,217,.18);color:var(--ink)}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:3px solid var(--paper-2)}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}

:focus-visible{outline:2px solid var(--jade);outline-offset:2px;border-radius:3px}

/* =========================================================
   排版基元
   ========================================================= */
h1,h2,h3,h4,h5{font-weight:650;letter-spacing:-.005em;line-height:1.3;color:var(--ink)}
p{color:var(--ink-2)}
b,strong{font-weight:650;color:var(--ink)}

.wrap{width:min(var(--maxw),calc(100% - 48px));margin:0 auto}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--jade-d);display:inline-flex;align-items:center;gap:9px;
}
.kicker::before{content:'';width:20px;height:1.5px;background:currentColor;opacity:.55;border-radius:2px}
.kicker.plain::before{display:none}
.kicker.clay{color:var(--clay-d)}

.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
}

.lede{font-size:13.5px;line-height:1.8;color:var(--ink-2)}

/* 工具类 */
.muted{color:var(--ink-3)}
.small{font-size:12px}
.nowrap{white-space:nowrap}
.hr{height:1px;background:var(--line);border:0;margin:0}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}

/* 动效：轻微上浮，不做夸张动画 */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rise{animation:rise .42s cubic-bezier(.2,.7,.3,1) both}
.d1{animation-delay:.03s}.d2{animation-delay:.06s}.d3{animation-delay:.09s}.d4{animation-delay:.12s}.d5{animation-delay:.15s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}