/* ============================================================
   作品站样式 · 黑金炫彩版 —— 原生 CSS，零依赖、零 CDN 字体
   设计基调：墨黑为底 + 金色主色 + 四色高亮 + 精致动效
   四条规矩：
     1. 动效一律「渐进增强」—— 初始隐藏态挂在 .js 下，脚本挂了内容照常可见
     2. 尊重 prefers-reduced-motion
     3. 颜色全部走变量，四类活各有主色
     4. 窄屏不压扁示意图（figure 横向滚动）
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #0a0906;
  --surface: #16130c;
  --surface-2: #1d1810;
  --ink: #f5edd8;
  --ink-2: #ddd2b6;
  --muted: #a4977b;
  --line: #2e2717;
  --line-strong: #4a3d22;

  --brand: #f0b429;
  --brand-2: #ffd873;
  --brand-3: #22d3ee;

  /* 四类活各自主色（黑底上的高亮版本） */
  --c-extract: #b48cff;
  --c-kb: #38bdf8;
  --c-automate: #ffc233;
  --c-tool: #3ddc97;
  --cat: var(--brand);

  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-2: 0 22px 45px -22px rgba(0, 0, 0, .75);
  --shadow-cat: 0 26px 50px -22px color-mix(in srgb, var(--cat) 55%, transparent);

  --maxw: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* 不是纯黑：深暖炭色渐层，像从顶部打了一盏暖光；fixed 让打光不随滚动乱跑 */
  background: linear-gradient(168deg, #1a1510 0%, #100d09 48%, var(--bg) 100%) fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
    "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 18px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* 背景网格光晕：纯 CSS，不用图片。--glow-x/--glow-y 由 JS 视差驱动（无脚本时停在 0） */
body::before {
  content: "";
  position: fixed;
  inset: -40px;
  z-index: -1;
  background:
    radial-gradient(820px 460px at 12% -6%, rgba(240, 180, 41, .22), transparent 70%),
    radial-gradient(680px 420px at 92% 4%, rgba(34, 211, 238, .16), transparent 68%),
    radial-gradient(720px 480px at 68% 34%, rgba(255, 216, 115, .07), transparent 72%),
    radial-gradient(960px 640px at 50% 108%, rgba(180, 140, 255, .17), transparent 70%);
  transform: translate3d(calc(var(--glow-x, 0) * 1px), calc(var(--glow-y, 0) * 1px), 0);
  pointer-events: none;
}

/* 极淡的金色网格纹理：集中在首屏顶部，向下淡出，增加纵深但不抢内容 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(240, 180, 41, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 180, 41, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 95% 64% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 95% 64% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- 顶栏 */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 9, 6, .78);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 18px;
  background: linear-gradient(115deg, var(--brand), var(--brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mark-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-3));
  box-shadow: 0 0 0 4px rgba(240, 180, 41, .22);
}

nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  margin-left: 20px;
  font-size: 15.5px;
  transition: color .18s ease;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-3));
  transition: right .22s ease;
}

nav a:hover { color: var(--brand); }
nav a:hover::after, nav a[aria-current="page"]::after { right: 0; }
nav a[aria-current="page"] { color: var(--brand); font-weight: 600; }

/* ---------------------------------------------------------------- 通用 */

main { padding: 44px 0 72px; }

h1 { font-size: 44px; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 18px; }
h2 { font-size: 25px; margin: 52px 0 16px; letter-spacing: -.005em; }
h3 { font-size: 19px; margin: 26px 0 8px; }
p { margin: 13px 0; }
ul, ol { padding-left: 22px; }
li { margin: 9px 0; }

/* 首页第一屏：渐变标题（色彩缓慢流动， reduced-motion 时静止） */
main > h1:first-child {
  font-size: 54px;
  font-weight: 800;
  line-height: 1.28;
  background: linear-gradient(112deg, var(--ink) 20%, var(--brand) 48%, var(--brand-3) 72%, var(--brand) 94%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 22px;
  animation: heroFlow 9s ease-in-out infinite alternate;
}

@keyframes heroFlow {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

main > h1:first-child + p {
  font-size: 21px;
  color: var(--ink-2);
  max-width: 44em;
}

.muted { color: var(--muted); }

.kicker {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--cat);
}

.tag {
  display: inline-block;
  font-size: 13.5px;
  color: var(--cat);
  background: color-mix(in srgb, var(--cat) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cat) 22%, var(--surface));
  border-radius: 999px;
  padding: 3px 11px;
  margin: 0 6px 6px 0;
  transition: transform .18s ease, background .18s ease;
}

.tag:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--cat) 16%, var(--surface)); }

.stack { margin-top: 12px; }

hr {
  border: 0;
  height: 1px;
  margin: 30px 0;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; }

blockquote {
  margin: 16px 0;
  padding: 4px 18px;
  border-left: 3px solid color-mix(in srgb, var(--brand) 35%, var(--surface));
  background: linear-gradient(90deg, rgba(240, 180, 41, .07), transparent);
  color: var(--ink-2);
  border-radius: 0 8px 8px 0;
}

code {
  background: rgba(240, 180, 41, .12);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 14px;
}

a { color: var(--brand); }

/* ---------------------------------------------------------------- 四类活卡片 */

.catgrid {
  display: grid;
  gap: 16px;
  margin: 22px 0 8px;
}

@media (min-width: 700px) { .catgrid { grid-template-columns: 1fr 1fr; } }

.catcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  /* --rx/--ry 由 JS 倾斜驱动，--sx/--sy 是追光位置；无脚本时全停在默认值 */
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, border-color .22s ease;
}

.catcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cat), color-mix(in srgb, var(--cat) 35%, var(--surface)));
}

/* 追光：跟随鼠标的主色光斑（无脚本时退化为 hover 出现的顶部柔光） */
.catcard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(300px circle at var(--sx, 82%) var(--sy, -10%),
    color-mix(in srgb, var(--cat) 15%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}

.catcard:hover {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
  border-color: color-mix(in srgb, var(--cat) 34%, var(--line));
  box-shadow: var(--shadow-cat);
}

.catcard:hover::after { opacity: 1; }

.catcard-head { display: flex; align-items: center; gap: 10px; }

.catcard-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cat);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cat) 16%, transparent);
  flex: 0 0 auto;
}

.catcard-name { font-weight: 700; font-size: 18px; line-height: 1.5; }

.catcard-blurb { color: var(--muted); font-size: 15.5px; line-height: 1.75; }

.catcard-foot { display: flex; align-items: baseline; gap: 5px; margin-top: auto; }

.catcard-count {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--cat);
  font-variant-numeric: tabular-nums;
}

.catcard-unit { color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- 卡片 */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 14px 0;
  box-shadow: var(--shadow-1);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease, border-color .2s ease;
}

.caseitem-card {
  position: relative;
  padding-left: 26px;
  overflow: hidden;
}

.caseitem-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--cat), color-mix(in srgb, var(--cat) 30%, var(--surface)));
  opacity: .85;
}

.caseitem-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cat) 30%, var(--line));
  box-shadow: 0 20px 42px -24px color-mix(in srgb, var(--cat) 60%, transparent);
}

.caseitem { display: block; text-decoration: none; color: inherit; }
.caseitem-title { font-weight: 700; font-size: 18.5px; line-height: 1.6; transition: color .18s ease; }
.caseitem:hover .caseitem-title { color: var(--cat); }
.caseitem-why { color: var(--muted); font-size: 15.5px; margin-top: 6px; }

/* 分类小标题（案例列表页） */
.cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  scroll-margin-top: 90px;
}

.cat-head-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cat);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--cat) 14%, transparent);
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------- 案例页 */

.case-head {
  padding: 6px 0 24px;
  border-bottom: 1px solid var(--line);
}

.case-head h1 { font-size: 40px; line-height: 1.4; }

.oneliner {
  font-size: 21px;
  line-height: 1.75;
  color: var(--ink-2);
  border-left: 3px solid var(--cat);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 7%, transparent), transparent);
  border-radius: 0 10px 10px 0;
  padding: 10px 16px;
  margin: 24px 0 6px;
}

.case-body { margin-top: 26px; }

.case-body > h2 {
  font-size: 20px;
  margin: 38px 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--cat);
  scroll-margin-top: 90px;
}

.case-body > h2:first-child { margin-top: 0; }

.case-body ol, .case-body ul { padding-left: 24px; }
.case-body li { margin: 11px 0; }

.backlink { margin-top: 46px; }
.backlink a { text-decoration: none; font-weight: 600; }
.backlink a:hover { text-decoration: underline; }

/* 待填：必须一眼看得见 */
.pending {
  display: inline-block;
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--warn) 55%, var(--surface));
  color: #ffd77a;
  border-radius: 7px;
  padding: 1px 8px;
  font-size: 14.5px;
}

/* ---------------------------------------------------------------- 图 */

figure {
  margin: 24px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 窄屏不让示意图被压扁：375px 屏上按 100% 缩放后，图内 12px 的字只剩约 6px，看不清 */
figure img {
  width: 100%;
  min-width: 520px;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

figcaption { color: var(--muted); font-size: 14px; margin-top: 10px; }

@media (min-width: 700px) { figure img { min-width: 0; } }

/* ---------------------------------------------------------------- 页脚 */

footer {
  position: relative;
  color: var(--muted);
  font-size: 14.5px;
  padding: 26px 0 46px;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

/* ---------------------------------------------------------------- 动效 */

/* 初始隐藏态只挂在 .js 下：脚本未启用 / 加载失败时，内容照常完整可见 */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .62s cubic-bezier(.2, .7, .3, 1),
    transform .62s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}

.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .catcard, .casecard, .caseitem-card, .tag { transition: none; }
  .catcard:hover, .casecard:hover, .caseitem-card:hover { transform: none; }
  /* 新增动效的静态兜底 */
  main > h1:first-child { animation: none; background-size: 100% 100%; }
  .hero-ch { animation: none; opacity: 1; transform: none; }
  body::before { transform: none; }
  .cover-blob { animation: none; }
  h2:target { animation: none; }
  .std-check::after { transition: none; }
}

/* ---------------------------------------------------------------- 响应式 */

@media (max-width: 640px) {
  main { padding: 30px 0 56px; }
  main > h1:first-child { font-size: 34px; }
  h1 { font-size: 30px; }
  h2 { font-size: 21px; margin-top: 40px; }
  .case-head h1 { font-size: 28px; }
  .oneliner { font-size: 18px; }
  body { font-size: 16.5px; }
  nav a { margin-left: 13px; font-size: 14.5px; }
  .mark { font-size: 16px; }
  .catcard { padding: 18px 18px 15px; border-radius: var(--radius); }
  .catcard-count { font-size: 27px; }
  .card { padding: 17px 18px; }
  .caseitem-card { padding-left: 22px; }
  th { white-space: normal; }
}

/* ================================================================
   分类配色 —— 这四行是全站颜色的唯一开关
   卡片、标签、示意图、封面都通过 var(--cat) 取色；
   想调某一类的颜色，只改 :root 里的 --c-xxx。
   ================================================================ */

.cat-extract  { --cat: var(--c-extract); }
.cat-kb       { --cat: var(--c-kb); }
.cat-automate { --cat: var(--c-automate); }
.cat-tool     { --cat: var(--c-tool); }

/* ================================================================
   横框摘要卡：左图 + 右五行（问题 / 需求 / 解决思路 / 方案 / 效果）
   ================================================================ */

.casecard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin: 18px 0;
  box-shadow: var(--shadow-1);
  overflow: hidden;
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s ease, border-color .22s ease;
}

/* 追光：跟随鼠标的主色光斑 */
.casecard::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--sx, 80%) var(--sy, -10%),
    color-mix(in srgb, var(--cat) 10%, transparent), transparent 68%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.casecard:hover::after { opacity: 1; }

@media (min-width: 720px) {
  .casecard { grid-template-columns: 248px 1fr; gap: 22px; padding: 20px; align-items: start; }
}

.casecard:hover {
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px);
  border-color: color-mix(in srgb, var(--cat) 30%, var(--line));
  box-shadow: 0 22px 46px -26px color-mix(in srgb, var(--cat) 62%, transparent);
}

.casecard-cover {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--cat) 12%, var(--surface));
  aspect-ratio: 16 / 11;
}

.casecard-cover > img,
.casecard-cover > svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.casecard-body { min-width: 0; }

.casecard-title {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.6;
  margin-bottom: 4px;
}

.casecard-title a { color: inherit; text-decoration: none; }
.casecard-title a:hover { color: var(--cat); }

.sumgrid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  margin: 14px 0 0;
}

.sumgrid dt {
  color: var(--cat);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  padding-top: 1px;
}

.sumgrid dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.72;
}

.casecard-foot { margin-top: 14px; }
.casecard-foot .tag { font-size: 12.5px; }
.casecard .case-body { margin-top: 16px; }
.casecard .case-body > h2 { font-size: 16px; margin: 24px 0 8px; }

/* B/C 级的正文折叠块：默认收起，让列表保持可扫；不依赖 JS */
.casedetails {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.casedetails > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cat);
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--cat) 26%, var(--surface));
  background: color-mix(in srgb, var(--cat) 7%, var(--surface));
  border-radius: 999px;
  transition: background .18s ease;
}

.casedetails > summary::-webkit-details-marker { display: none; }

.casedetails > summary::before {
  content: "＋";
  font-size: 13px;
  line-height: 1;
}

.casedetails[open] > summary::before { content: "－"; }
.casedetails > summary:hover { background: color-mix(in srgb, var(--cat) 14%, var(--surface)); }
.casedetails .case-body > h2:first-child { margin-top: 14px; }

/* 占位封面：截图还没到位时用，必须看起来是"设计过的"而不是缺图。
   底部直接写项目名，不放"截图待补"这种提示 */
.cover-art { width: 100%; height: 100%; display: block; }
.cover-bg { fill: color-mix(in srgb, var(--cat) 15%, var(--surface)); }
.cover-blob { fill: color-mix(in srgb, var(--cat) 26%, transparent); }
.cover-blob-2 { fill: color-mix(in srgb, var(--cat) 18%, transparent); }
.cover-id { fill: var(--cat); font-size: 36px; font-weight: 800; }
.cover-label { fill: var(--muted); font-size: 12.5px; }
.cover-title { fill: var(--ink); font-size: 15px; font-weight: 600; }

@media (max-width: 719px) {
  .casecard-cover { aspect-ratio: 16 / 9; }
  .sumgrid { grid-template-columns: 1fr; gap: 2px 0; }
  .sumgrid dt { margin-top: 8px; }
  .sumgrid dt:first-of-type { margin-top: 0; }
}

/* ================================================================
   示意图内联样式
   图里的颜色一律走变量，所以改配色时所有示意图跟着变
   ================================================================ */

.diagram {
  display: block;
  width: 100%;
  height: auto;
  min-width: 520px;
  font-family: inherit;
}

@media (min-width: 700px) { .diagram { min-width: 0; } }

.dg-bg { fill: var(--surface); }
.dg-title { fill: var(--ink); font-size: 13px; }
.dg-cap { fill: var(--ink); font-size: 13px; }
.dg-cap.dg-end { text-anchor: end; }
.dg-lbl { fill: var(--muted); font-size: 12px; text-anchor: end; }
.dg-note { fill: var(--muted); font-size: 12px; }
.dg-lane { fill: color-mix(in srgb, var(--cat) 8%, var(--surface)); }
.dg-lane.dg-alt { fill: color-mix(in srgb, var(--cat) 15%, var(--surface)); }
.dg-tick { fill: var(--cat); }
.dg-warn { fill: var(--warn); }
.dg-axis { stroke: color-mix(in srgb, var(--cat) 55%, var(--surface)); stroke-width: 2; }
.dg-drop { stroke: color-mix(in srgb, var(--cat) 32%, var(--surface)); stroke-width: 1; stroke-dasharray: 3 4; }
.dg-head { fill: color-mix(in srgb, var(--cat) 13%, var(--surface)); }
.dg-headt { fill: var(--ink); font-size: 13px; }
.dg-box { fill: color-mix(in srgb, var(--cat) 4%, var(--surface)); stroke: var(--line); stroke-width: 1; }
.dg-boxt { fill: var(--ink); font-size: 12px; }
.dg-link { fill: none; stroke: var(--cat); stroke-width: 1.6; }
.dg-bad { fill: none; stroke: var(--warn); stroke-width: 1.8; stroke-dasharray: 5 4; }
.dg-baddot { fill: var(--warn); }

/* 流程类示意图的通用件 */
.dg-arrow { fill: none; stroke: color-mix(in srgb, var(--cat) 45%, var(--surface)); stroke-width: 1.6; }
.dg-arrowhead { fill: color-mix(in srgb, var(--cat) 55%, var(--surface)); }
.dg-chip { fill: color-mix(in srgb, var(--cat) 10%, var(--surface)); }
.dg-chipt { fill: var(--cat); font-size: 11.5px; }
.dg-flowbar { fill: color-mix(in srgb, var(--cat) 13%, var(--surface)); stroke: color-mix(in srgb, var(--cat) 26%, var(--surface)); stroke-width: 1; }
.dg-flowbart { fill: var(--ink); font-size: 12.5px; }
.dg-diamond { fill: color-mix(in srgb, var(--cat) 8%, var(--surface)); stroke: color-mix(in srgb, var(--cat) 40%, var(--surface)); stroke-width: 1.4; }
.dg-stepnum { fill: var(--cat); font-size: 12px; font-weight: 700; }
.dg-ok { fill: var(--ok); }
.dg-okt { fill: var(--ok); font-size: 12px; }
.dg-faint { fill: var(--muted); font-size: 11.5px; }

/* 状态类示意（黄卡 / 红卡 / 逾期）—— 语义色，不是分类色 */
.dg-state-warn {
  fill: color-mix(in srgb, var(--warn) 10%, var(--surface));
  stroke: color-mix(in srgb, var(--warn) 45%, var(--surface));
  stroke-width: 1.3;
}
.dg-state-bad {
  fill: color-mix(in srgb, var(--bad) 9%, var(--surface));
  stroke: color-mix(in srgb, var(--bad) 42%, var(--surface));
  stroke-width: 1.3;
}
.dg-state-over {
  fill: color-mix(in srgb, var(--ink) 6%, var(--surface));
  stroke: color-mix(in srgb, var(--ink) 26%, var(--surface));
  stroke-width: 1.3;
}
.dg-state-warn-t { fill: var(--warn); font-size: 13px; font-weight: 700; }
.dg-state-bad-t { fill: var(--bad); font-size: 13px; font-weight: 700; }
.dg-state-over-t { fill: var(--ink-2); font-size: 13px; font-weight: 700; }

/* ================================================================
   交互动效二期 —— 全部渐进增强：标记由 JS 添加 / 初始态挂在 .js 下，
   脚本不跑时页面照常完整可读
   ================================================================ */

/* ---- 滚动进度条（元素由 JS 注入） ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 40;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* ---- 首屏大标题：逐字浮现（span 由 JS 拆分注入） ---- */
/* 注意：background-clip:text 的渐变穿不透带动画的子元素，
   所以渐变要落在每个字上，再按字序偏移 background-position，
   拼起来视觉上仍是一条连续渐变（--n 是总字数，由 JS 写在 h1 上） */
main > h1.hero-split { animation: none; background: none; }

.hero-ch {
  display: inline-block;
  background: linear-gradient(112deg, var(--ink) 20%, var(--brand) 48%, var(--brand-3) 72%, var(--brand) 94%);
  background-size: calc(var(--n, 20) * 100%) 100%;
  background-position: calc(var(--d, 0) * 100% / (var(--n, 20) - 1)) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(.38em) rotate(5deg);
  animation: heroCh .66s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: calc(var(--d, 0) * 42ms + 100ms);
}

@keyframes heroCh {
  to { opacity: 1; transform: none; }
}

/* ---- 占位封面：blob 缓慢漂浮，让占位图也像设计品 ---- */
.cover-blob {
  transform-box: fill-box;
  transform-origin: center;
  animation: blobDrift 7s ease-in-out infinite alternate;
}

.cover-blob-2 { animation-duration: 9.5s; animation-delay: -3.2s; }

@keyframes blobDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-16px, 12px) scale(1.14); }
}

/* 封面整体在卡片 hover 时轻微推近 */
.casecard-cover > svg { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.casecard:hover .casecard-cover > svg { transform: scale(1.035); }

/* ---- 验收标准：滚动到位后打钩（.std-check 由 JS 加在对应 h3 上） ---- */
.std-check { position: relative; padding-left: 36px; }

.std-check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--ok) 45%, var(--surface));
}

.std-check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 10px;
  height: 5px;
  border-left: 2.4px solid var(--ok);
  border-bottom: 2.4px solid var(--ok);
  transform: rotate(-45deg);
  transform-origin: center;
}

/* 钩子弹入只挂在 .js 下：无脚本时勾一直在 */
.js .std-check::after {
  transform: rotate(-45deg) scale(0);
  transition: transform .38s cubic-bezier(.34, 1.56, .64, 1) .22s;
}

.js .std-check.is-visible::after { transform: rotate(-45deg) scale(1); }

/* ---- 锚点跳转目标：到位后柔光一闪，让人知道落在哪 ---- */
h2:target {
  animation: targetFlash 1.7s ease-out;
  border-radius: 8px;
}

@keyframes targetFlash {
  0%, 55% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--cat, var(--brand)) 15%, transparent); }
  100% { box-shadow: 0 0 0 7px transparent; }
}