/* 生成模型：claude-opus-5.5 · 2026-11-02 · Rollica-赵锡盛 · 网页版简历样式 */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }

:root {
  --bg: #f4f2ed; --paper: #fbfaf7; --ink: #121a2b; --ink2: #2d3445; --mute: #6b7180; --line: rgba(18, 26, 43, .09);
  --acc: #2350d8; --acc2: #8aa4f2; --accs: #e7ecfb; --sage: #a9c2ae; --sage-ink: #54705b; --warm: #f0dcc4;
  --serif: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, "Songti SC", serif;
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { font-family: var(--sans); background: var(--bg); color: var(--ink2); font-size: 16px; line-height: 1.8;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-autospace: normal; overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
a { color: inherit; text-decoration: none; }
strong { color: var(--ink); font-weight: 600; }
::selection { background: var(--acc); color: #fff; }
.wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.lk { text-decoration: underline; text-decoration-color: rgba(35, 80, 216, .45); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .3s; }
.lk:hover { text-decoration-color: var(--acc); }
.arr { display: inline-block; margin: 0 .4em; color: var(--acc); font-family: var(--serif); }

/* 导航 */
.prog { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; display: flex; align-items: center;
  border-bottom: 1px solid transparent; transition: background .45s, border-color .45s; }
.nav.on { background: rgba(244, 242, 237, .74); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom-color: var(--line); }
.nav .wrap { display: flex; justify-content: space-between; align-items: center; }
.brand { font-weight: 600; color: var(--ink); letter-spacing: .08em; font-size: 15px; }
.brand em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--mute); margin-left: .6em; letter-spacing: 0; }
.nav-links { display: flex; gap: 30px; font-size: 14px; color: var(--mute); }
.nav-links a { position: relative; transition: color .3s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* 首屏 */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 110px; }
.orbs i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; will-change: transform; }
.orbs .o1 { width: 48vw; height: 48vw; left: -14vw; top: -16vw; background: radial-gradient(circle, #c6d3fb, transparent 66%); animation: d1 22s ease-in-out infinite alternate; }
.orbs .o2 { width: 40vw; height: 40vw; right: -12vw; top: 8vh; background: radial-gradient(circle, #d3e3d6, transparent 66%); animation: d2 27s ease-in-out infinite alternate; }
.orbs .o3 { width: 32vw; height: 32vw; left: 32vw; bottom: -16vw; background: radial-gradient(circle, #f1dcc3, transparent 66%); animation: d3 31s ease-in-out infinite alternate; }
@keyframes d1 { to { transform: translate(9vw, 7vh) scale(1.08); } }
@keyframes d2 { to { transform: translate(-7vw, 9vh) scale(.94); } }
@keyframes d3 { to { transform: translate(-10vw, -6vh) scale(1.1); } }
.glow { position: absolute; left: 0; top: 0; width: 560px; height: 560px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(35, 80, 216, .11), transparent 62%);
  transform: translate(var(--gx, -999px), var(--gy, -999px)) translate(-50%, -50%); transition: transform .3s ease-out; }
.hero-in { position: relative; }
.kicker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.kicker span { font-size: 12px; letter-spacing: .18em; color: var(--mute); padding: 5px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .4); }
.name { font-size: clamp(76px, 12.5vw, 184px); line-height: .98; font-weight: 600; color: var(--ink); letter-spacing: -.01em; display: flex; }
.name .ch { display: inline-block; opacity: 0; transform: translateY(.38em) rotate(5deg); filter: blur(14px);
  animation: rise 1.15s var(--ease) forwards; animation-delay: calc(.13s * var(--i) + .15s); }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.en { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.6vw, 34px); color: var(--mute); margin: 16px 0 34px; }
.role { font-size: clamp(18px, 1.75vw, 24px); line-height: 1.55; color: var(--ink2); max-width: 900px; }
.role .r1, .role .r2 { display: block; }
.role .r1 { color: var(--ink); font-weight: 500; }
.role .r2 { margin-top: 4px; font-size: .82em; color: var(--ink2); }
.role strong { color: var(--acc); font-weight: 600; }
.rot { margin-top: 36px; display: flex; gap: 18px; align-items: baseline; font-size: clamp(18px, 1.9vw, 26px); font-weight: 500; color: var(--ink2); min-height: 1.7em; }
.rot-k { flex: none; width: 44px; height: 1px; background: var(--acc); transform: translateY(-.32em); }
.rot-t { display: inline-block; transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); }
.rot-t.out { opacity: 0; transform: translateY(-14px); filter: blur(8px); }
.rot-t.pre { opacity: 0; transform: translateY(14px); filter: blur(8px); transition: none; }
.links { margin-top: 46px; display: flex; flex-wrap: wrap; gap: 12px; }
.links a, .links span { font-size: 14px; padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .45s var(--ease), color .45s, border-color .45s; }
.links a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 11px; letter-spacing: .3em; color: var(--mute);
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cue span { width: 1px; height: 46px; background: linear-gradient(var(--ink), transparent); transform-origin: top; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* 出场动画（无 JS 时直接显示） */
.js [data-r] { opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-r].in { opacity: 1; transform: none; filter: none; }

/* 区块 */
.sec { position: relative; padding: clamp(90px, 12vw, 160px) 0; }
.sec-h { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 72px); }
.sec-h .no { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--acc); }
.sec-h h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; color: var(--ink); letter-spacing: -.005em; line-height: 1.2; }
.sec-h .sub { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: 19px; }
[data-spot] { position: relative; overflow: hidden; isolation: isolate; }
[data-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(35, 80, 216, .09), transparent 42%); }
[data-spot]:hover::before { opacity: 1; }

/* 核心亮点 */
.hl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.hl-card { background: rgba(255, 255, 255, .62); border: 1px solid var(--line); border-radius: 28px; padding: clamp(28px, 3.4vw, 46px);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s; }
.hl-card:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -38px rgba(18, 26, 43, .32); border-color: rgba(35, 80, 216, .22); }
.fig { display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.fig .n { font-family: var(--serif); font-size: clamp(66px, 7.4vw, 112px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.fig .u { font-size: 17px; color: var(--mute); }
.fig-cap { font-size: 13px; letter-spacing: .12em; color: var(--acc); margin: 12px 0 28px; }
.hl-card h3 { font-size: 20px; color: var(--ink); font-weight: 600; line-height: 1.55; margin-bottom: 12px; }
.hl-card p { font-size: 15px; color: var(--mute); line-height: 1.9; }
.hl-card p strong { color: var(--acc); }

/* 经历与项目 */
.co-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.co-row h3 { font-size: clamp(20px, 2.2vw, 27px); color: var(--ink); font-weight: 600; }
.dates { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: 16px; white-space: nowrap; }
.ov { color: var(--mute); margin: 16px 0 40px; font-size: 15px; }
.tl { position: relative; padding-left: 42px; }
.tl-line { position: absolute; left: 6px; top: 46px; bottom: 30px; width: 1px; background: var(--line); }
.tl-line i { position: absolute; inset: 0; background: linear-gradient(var(--acc), var(--acc2)); transform-origin: top; transform: scaleY(var(--tp, 0)); }
.seg { position: relative; display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(24px, 4vw, 64px); padding: 36px 0; border-top: 1px solid var(--line); }
.seg:first-of-type { border-top: 0; }
.seg::before { content: ""; position: absolute; left: -41px; top: 47px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--acc); transition: background .8s .3s; }
.seg.in::before { background: var(--acc); }
.seg-dates { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--acc); margin-bottom: 8px; }
.seg-meta h4 { font-size: 19px; color: var(--ink); font-weight: 600; line-height: 1.5; margin-bottom: 14px; }
.seg-meta .duty { font-size: 14px; color: var(--ink2); margin-bottom: 12px; line-height: 1.8; }
.team { font-size: 13.5px; color: var(--mute); line-height: 1.8; }
.team span { display: inline-block; font-size: 11px; letter-spacing: .14em; color: var(--sage-ink); border: 1px solid var(--sage); border-radius: 999px; padding: 0 9px; margin-right: 8px; line-height: 1.8; }
.team strong { color: var(--ink); }
.seg-proj { display: flex; flex-direction: column; gap: 10px; }
.pcard { display: grid; grid-template-columns: 40px 1fr 26px; gap: 16px; align-items: start; padding: 22px 24px; border-radius: 20px; border: 1px solid transparent;
  background: rgba(255, 255, 255, .42); transition: background .5s, border-color .5s, transform .6s var(--ease); }
.pcard:hover { background: rgba(255, 255, 255, .9); border-color: var(--line); transform: translateX(4px); }
.pc-no { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: 15px; padding-top: 3px; }
.pc-body h5 { display: inline-block; font-size: 17px; color: var(--ink); font-weight: 600; margin-bottom: 6px; line-height: 1.5; }
.pc-body p { font-size: 14px; color: var(--mute); line-height: 1.85; }
.pc-body p strong { color: var(--acc); }
.pc-go { font-size: 18px; color: var(--mute); padding-top: 2px; transition: transform .5s var(--ease), color .5s; }
.pcard:hover .pc-go { transform: translateX(6px); color: var(--acc); }
.early { margin-top: 36px; border-top: 1px solid var(--line); padding-left: 42px; }
.early-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.early-row b { color: var(--ink); font-weight: 600; }
.early-row em { font-style: normal; color: var(--ink2); margin: 0 12px; }
.early-row small { color: var(--mute); font-size: 13.5px; }

/* 个人 AI 实践（深色） */
.dark { background: #0d1322; color: #c6ccd9; }
.dark .sec-h h2 { color: #f5f6f9; }
.dark .sec-h .sub { color: #8a93a8; }
.dark .sec-h .no { color: #93abf5; }
.ai-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; overflow: hidden; margin-bottom: 64px; }
.ai-stat { background: #0d1322; padding: 34px 28px; }
.ai-stat .n { font-family: var(--serif); font-size: clamp(46px, 5vw, 74px); color: #fff; line-height: 1; }
.ai-stat .u { font-size: 15px; color: #9aa3b7; margin-left: 6px; }
.ai-stat p { margin-top: 14px; font-size: 13px; color: #8a93a8; letter-spacing: .06em; }
.chart-t { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.chart-t h3 { font-size: 18px; font-weight: 600; color: #f5f6f9; }
.chart-t span { font-size: 12.5px; color: #7d869b; }
.bars { display: grid; grid-template-columns: repeat(var(--cols, 9), 1fr); gap: clamp(8px, 1.4vw, 18px); align-items: end; height: 260px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar i { display: block; width: 100%; height: calc(var(--h) * 1%); transform: scaleY(0); transform-origin: bottom; border-radius: 10px 10px 2px 2px;
  background: linear-gradient(180deg, #93abf5, #2350d8 85%); transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 70ms + .1s); }
.bars.in .bar i, .bars:not([data-r]) .bar i { transform: scaleY(1); }
.bar b { position: absolute; bottom: calc(var(--h) * 1% + 8px); font-family: var(--serif); font-weight: 400; font-size: 15px; color: #e8ebf2; opacity: 0; transition: opacity .6s 1s; }
.bars.in .bar b, .bars:not([data-r]) .bar b { opacity: 1; }
.bar-x { display: grid; grid-template-columns: repeat(var(--cols, 9), 1fr); gap: clamp(8px, 1.4vw, 18px); font-size: 12px; color: #8a93a8; text-align: center; margin-top: 12px; }
.ai-foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; margin-top: 72px; align-items: end; }
.ai-one { font-size: 16px; color: #c6ccd9; line-height: 1.95; }
.ai-one strong { color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 14px;
  transition: background .45s var(--ease), color .45s, border-color .45s; }
.btn:hover { background: #fff; color: #0d1322; }
.btn.light { border-color: rgba(18, 26, 43, .16); color: var(--ink); background: rgba(255, 255, 255, .5); }
.btn.light:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 能力与背景 */
.about { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(36px, 6vw, 96px); }
.about h3 { font-size: 13px; letter-spacing: .2em; color: var(--acc); font-weight: 500; margin-bottom: 22px; }
.sk { display: grid; grid-template-columns: 116px 1fr; gap: 14px 24px; font-size: 14.5px; }
.sk dt { color: var(--ink); font-weight: 600; }
.sk dd { color: var(--mute); }
.edu { display: flex; flex-direction: column; gap: 20px; }
.edu div b { color: var(--ink); font-weight: 600; font-size: 16px; }
.edu div span { display: block; color: var(--ink2); font-size: 14px; }
.edu div small { display: block; color: var(--mute); font-size: 13px; }
.honor { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px; }
.honor span { font-size: 13.5px; color: var(--ink2); padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .5); }

/* 页脚 */
.foot { padding: clamp(96px, 13vw, 170px) 0 44px; border-top: 1px solid var(--line); }
.foot p { font-size: 14px; color: var(--mute); margin-bottom: 18px; letter-spacing: .1em; }
.foot .big { font-family: var(--serif); font-style: italic; font-size: clamp(38px, 6.4vw, 92px); color: var(--ink); line-height: 1.12; display: inline-block; position: relative; }
.foot .big::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: 2px; background: var(--acc); transform: scaleX(0); transform-origin: right; transition: transform .8s var(--ease); }
.foot .big:hover::after { transform: scaleX(1); transform-origin: left; }
.foot-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 80px; font-size: 12.5px; color: var(--mute); }
.foot-row a:hover { color: var(--ink); }

/* 项目页 */
.pj-hero { padding: 150px 0 24px; position: relative; overflow: hidden; }
.pj-hero .orbs i { opacity: .45; }
.back { display: inline-flex; gap: 10px; font-size: 13px; color: var(--mute); margin-bottom: 60px; transition: color .3s, gap .4s var(--ease); }
.back:hover { color: var(--ink); gap: 14px; }
.pj-crumb { font-size: 12px; letter-spacing: .22em; color: var(--acc); margin-bottom: 22px; }
.pj-title { font-size: clamp(38px, 5.6vw, 78px); line-height: 1.12; color: var(--ink); font-weight: 600; letter-spacing: -.01em; max-width: 16em; }
.pj-meta { margin-top: 22px; font-size: 14px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.pj-meta .dates { font-size: 17px; color: var(--acc); }
.pj-lede { margin-top: 42px; font-size: clamp(18px, 1.85vw, 24px); line-height: 1.8; color: var(--ink2); max-width: 900px; }
.pj-lede strong { color: var(--acc); }
.mx { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; margin-top: 64px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.mx-t { background: rgba(251, 250, 247, .92); padding: 30px 26px; }
.mx-t .v { font-family: var(--serif); font-size: clamp(30px, 3.3vw, 46px); color: var(--ink); line-height: 1.18; }
.mx-t p { margin-top: 12px; font-size: 13px; color: var(--mute); line-height: 1.7; }
.viz { padding: 72px 0 8px; }
.viz-card { position: relative; border-radius: 32px; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55)); border: 1px solid var(--line); padding: clamp(28px, 4vw, 56px); overflow: hidden; }
.viz-cap { font-size: 12px; letter-spacing: .22em; color: var(--mute); margin-bottom: 30px; }
.viz-foot { margin-top: 30px; font-size: 14px; color: var(--mute); line-height: 1.8; }
.story { padding: 64px 0 110px; }
.hint { font-size: 13px; color: var(--mute); margin-bottom: 26px; display: flex; align-items: center; gap: 12px; }
.hint i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(35, 80, 216, .4); color: var(--acc); font-style: normal; font-family: var(--serif); display: grid; place-items: center; font-size: 13px; }
.st { display: grid; grid-template-columns: 190px 1fr; gap: clamp(24px, 5vw, 72px); padding: 46px 0; border-top: 1px solid var(--line); }
.st-l { position: sticky; top: 100px; align-self: start; }
.st-l h2 { font-size: 23px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.st-l span { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: 16px; }
.st-r .pre { color: var(--ink2); margin-bottom: 18px; font-size: 16px; line-height: 1.9; }
.st-r ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.st-r li { position: relative; padding: 18px 24px 18px 60px; border-radius: 18px; background: rgba(255, 255, 255, .58); border: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.9; transition: opacity .45s, border-color .45s, box-shadow .45s, transform .55s var(--ease); }
.st-r li .cn { position: absolute; left: 20px; top: 19px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; color: var(--acc); border: 1px solid rgba(35, 80, 216, .35); background: rgba(255, 255, 255, .7); }
.st-r li.plain { padding-left: 46px; }
.st-r li.plain::before { content: ""; position: absolute; left: 24px; top: 31px; width: 6px; height: 6px; border-radius: 50%; background: var(--acc2); }
.st.res li { background: var(--ink); border-color: var(--ink); color: #cfd4df; }
.st.res li strong { color: #fff; }
.st.res li .cn { background: transparent; color: #a9bdf7; border-color: rgba(169, 189, 247, .45); }
.st.res li.plain::before { background: #93abf5; }
.st.res .arr { color: #93abf5; }
[data-map] li[data-n] { cursor: default; }
.map-on li { opacity: .32; }
.map-on li.hit { opacity: 1; border-color: rgba(35, 80, 216, .5); box-shadow: 0 20px 44px -26px rgba(35, 80, 216, .5); transform: translateX(6px); }
.pj-next { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; padding-bottom: 40px; }
.pj-next a { display: block; padding: 30px 32px; border-radius: 26px; border: 1px solid var(--line); background: rgba(255, 255, 255, .5); transition: background .5s, transform .6s var(--ease); }
.pj-next a:hover { background: #fff; transform: translateY(-4px); }
.pj-next span { display: block; font-size: 12px; letter-spacing: .2em; color: var(--mute); margin-bottom: 10px; }
.pj-next strong { font-size: clamp(18px, 2vw, 24px); color: var(--ink); font-weight: 600; }
.pj-next .nx { text-align: right; background: var(--ink); border-color: var(--ink); }
.pj-next .nx span { color: #9aa3b7; }
.pj-next .nx strong { color: #fff; }
.pj-next .nx:hover { background: #1b2540; }

/* 示意图：层级三改二 */
.layers { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.lcol { display: flex; flex-direction: column; gap: 12px; }
.lcol h6 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 19px; color: var(--mute); margin-bottom: 4px; }
.ly { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 16px; padding: 18px 22px; font-weight: 600; font-size: 16px; color: var(--ink); background: var(--accs); }
.ly small { font-weight: 400; font-size: 13px; color: var(--mute); }
.l3 .ly { background: #eceef3; color: var(--ink2); }
.viz-card.in .l3 .ly.mid { animation: fold 2.6s var(--ease) 1.1s forwards; }
@keyframes fold { 35% { background: #f8e4e0; color: #a5493e; } 100% { background: #f3f1ed; color: #b9bcc4; transform: scale(.96); text-decoration: line-through; } }
.l2 .ly { opacity: 0; transform: translateX(-24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.viz-card.in .l2 .ly { opacity: 1; transform: none; transition-delay: 2.2s; }
.viz-card.in .l2 .ly + .ly { transition-delay: 2.45s; }
.lar { font-family: var(--serif); font-size: 34px; color: var(--acc); }

/* 示意图：五层 */
.stack { display: flex; flex-direction: column; gap: 10px; perspective: 1400px; }
.sl { display: grid; grid-template-columns: 44px 220px 1fr; gap: 18px; align-items: center; padding: 20px 26px; border-radius: 18px; border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(35, 80, 216, calc(.16 - var(--k) * .025)), rgba(255, 255, 255, .75));
  opacity: 0; transform: rotateX(22deg) translateY(28px); transform-origin: top center;
  transition: opacity 1s var(--ease), transform 1s var(--ease), background .4s; transition-delay: calc(var(--k) * 130ms); }
.viz-card.in .sl { opacity: 1; transform: none; }
.viz-card.in .sl:hover { transform: translateX(8px); transition-delay: 0s; }
.sl .k { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 19px; }
.sl b { color: var(--ink); font-size: 16px; font-weight: 600; }
.sl span { color: var(--mute); font-size: 14px; line-height: 1.7; }

/* 示意图：流程 */
.flow { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr 56px 1fr; align-items: center; }
.fn { position: relative; padding: 24px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); min-height: 132px;
  opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--k) * 220ms); }
.viz-card.in .fn { opacity: 1; transform: none; }
.fn.hot { background: var(--ink); border-color: var(--ink); }
.fn.hot b { color: #fff; }
.fn.hot small, .fn.hot .fk { color: #a9bdf7; }
.fk { display: block; font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 15px; margin-bottom: 10px; }
.fn b { display: block; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.45; }
.fn small { display: block; margin-top: 8px; color: var(--mute); font-size: 13px; line-height: 1.7; }
.fl { position: relative; height: 1px; margin: 0 8px; background: rgba(35, 80, 216, .25); overflow: visible; }
.fl i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 5px rgba(35, 80, 216, .12); opacity: 0; }
.viz-card.in .fl i { animation: travel 2.4s cubic-bezier(.6, 0, .4, 1) infinite; animation-delay: calc(var(--k) * 400ms + 1s); }
@keyframes travel { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.tagline { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.tagline span { font-size: 13px; color: var(--ink2); padding: 6px 14px; border-radius: 999px; background: var(--accs); }

/* 用量页（浅色图表） */
.light-chart .bars { border-bottom-color: var(--line); }
.light-chart .bar b { color: var(--ink); }
.light-chart .bar-x { color: var(--mute); }
.light-chart .chart-t h3 { color: var(--ink); }
.light-chart .chart-t span { color: var(--mute); }
.u-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.u-stat { background: rgba(251, 250, 247, .94); padding: 30px 26px; }
.u-stat .n { font-family: var(--serif); font-size: clamp(40px, 4.2vw, 62px); line-height: 1; color: var(--ink); }
.u-stat .u { font-size: 14px; color: var(--mute); margin-left: 6px; }
.u-stat p { margin-top: 12px; font-size: 13px; color: var(--mute); }
.share { display: flex; flex-direction: column; gap: 14px; }
.sh { display: grid; grid-template-columns: 130px 1fr 64px; gap: 16px; align-items: center; font-size: 14px; }
.sh b { color: var(--ink); font-weight: 600; }
.sh .tr { height: 10px; border-radius: 99px; background: rgba(18, 26, 43, .06); overflow: hidden; }
.sh .tr i { display: block; height: 100%; width: calc(var(--w) * 1%); border-radius: 99px; background: linear-gradient(90deg, #93abf5, #2350d8); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.share.in .sh .tr i { transform: scaleX(1); }
.sh span { text-align: right; font-family: var(--serif); color: var(--ink2); font-size: 16px; }
.note { font-size: 13px; color: var(--mute); line-height: 1.9; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.box { border-radius: 28px; border: 1px solid var(--line); background: rgba(255, 255, 255, .6); padding: clamp(26px, 3.4vw, 44px); }

/* 细节 */
.pn { font-size: .62em; font-weight: 500; color: var(--mute); letter-spacing: 0; }
.pj-title .pn { display: inline-block; font-size: .5em; }
.v .cj { font-family: var(--sans); font-size: .5em; font-weight: 500; color: var(--ink2); margin: 0 .18em; letter-spacing: 0; }
.pc-body strong, .hl-card p strong, .st-r li strong, .pj-lede strong, .mx-t p { white-space: nowrap; }
.mx-t p { white-space: normal; }

/* 响应式 */
@media (max-width: 900px) {
  .nav-links { gap: 18px; font-size: 13px; }
  .brand em { display: none; }
  .hl-grid, .two { grid-template-columns: 1fr; }
  .seg { grid-template-columns: 1fr; gap: 18px; }
  .ai-stats, .u-stats { grid-template-columns: repeat(2, 1fr); }
  .ai-foot, .about { grid-template-columns: 1fr; }
  .btns { justify-content: flex-start; }
  .st { grid-template-columns: 1fr; gap: 16px; padding: 36px 0; }
  .st-l { position: static; }
  .layers { grid-template-columns: 1fr; }
  .lar { transform: rotate(90deg); justify-self: center; }
  .flow { grid-template-columns: 1fr; gap: 0; }
  .fl { width: 1px; height: 40px; margin: 6px auto; }
  .fl i { left: -3px; animation-name: travelv; }
  @keyframes travelv { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }
  .sl { grid-template-columns: 34px 1fr; }
  .sl span { grid-column: 2; }
  .pj-next { grid-template-columns: 1fr; }
  .early-row { grid-template-columns: 1fr; gap: 4px; }
  .sh { grid-template-columns: 96px 1fr 54px; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 36px); }
  .nav-links { gap: 15px; font-size: 13px; }
  .tl, .early { padding-left: 26px; }
  .seg::before { left: -25px; }
  .pcard { grid-template-columns: 1fr; gap: 6px; padding: 18px; }
  .pcard { position: relative; padding-right: 58px; }
  .pc-go { position: absolute; right: 14px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; padding: 0;
    font-size: 15px; color: var(--acc); background: #fff; border: 1px solid rgba(35, 80, 216, .28); }
  .st-r li { padding: 16px 18px 16px 52px; font-size: 15px; }
  .bars { height: 200px; }
  .bar b { font-size: 12px; }
}

/* 截图 / 打印：直接显示终态 */
.static [data-r] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.static .name .ch { animation: none; opacity: 1; transform: none; filter: none; }
.static .bar i, .static .sh .tr i { transform: none !important; transition: none !important; }
.static .bar b { opacity: 1 !important; transition: none !important; }
.static .l2 .ly, .static .sl, .static .fn { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-r] { opacity: 1; transform: none; filter: none; }
  .name .ch { opacity: 1; transform: none; filter: none; }
  .orbs i { animation: none; }
}

/* ===== 图解组件（项目页深度图解，src/pages/NN.html 用；2026-11-03） ===== */
.dg { padding: 56px 0 8px; }
.dg-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.dg-h .k { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 18px; }
.dg-h h3 { font-size: clamp(20px, 2.2vw, 28px); color: var(--ink); font-weight: 600; line-height: 1.35; }
.dg-lead { color: var(--mute); font-size: 15px; line-height: 1.85; max-width: 780px; margin-bottom: 28px; }
.dg-note { margin-top: 22px; font-size: 13.5px; color: var(--mute); line-height: 1.8; }
.dg strong { color: var(--ink); }
.dg em.hl { font-style: normal; color: var(--acc); font-weight: 600; }
/* 对比：before → after */
.dg-vs { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 14px; align-items: stretch; }
.dg-vs .side { border-radius: 22px; padding: 24px; background: #f0efeb; }
.dg-vs .side.new { background: var(--accs); }
.dg-vs .side h4 { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--mute); font-size: 18px; margin-bottom: 14px; }
.dg-vs .side.new h4 { color: var(--acc); }
.dg-vs .side ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dg-vs .side li { background: rgba(255, 255, 255, .75); border-radius: 12px; padding: 11px 15px; font-size: 14.5px; line-height: 1.7; color: var(--ink2); }
.dg-vs .mid { display: grid; place-items: center; font-family: var(--serif); font-size: 32px; color: var(--acc); }
/* 分层架构 */
.dg-arch { display: flex; flex-direction: column; gap: 10px; }
.dg-arch .row { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: stretch; opacity: 0; transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--k, 0) * 120ms); }
.viz-card.in .dg-arch .row { opacity: 1; transform: none; }
.dg-arch .lab { border-radius: 14px; background: var(--ink); color: #fff; padding: 14px 16px; font-weight: 600; font-size: 14.5px; display: flex; flex-direction: column; justify-content: center; line-height: 1.45; }
.dg-arch .lab small { color: #a9bdf7; font-weight: 400; font-size: 12px; margin-top: 4px; }
.dg-arch .cells { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; padding: 10px; border-radius: 14px; background: rgba(35, 80, 216, .05); border: 1px dashed rgba(35, 80, 216, .25); }
.dg-arch .cell { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.dg-arch .cell.hot { background: var(--acc); color: #fff; border-color: var(--acc); }
.dg-arch .cell small { display: block; color: var(--mute); font-size: 12px; }
.dg-arch .cell.hot small { color: #dbe3ff; }
/* 卡片网格 */
.dg-grid { display: grid; grid-template-columns: repeat(var(--c, 3), 1fr); gap: 14px; }
.dg-card { border-radius: 20px; background: #fff; border: 1px solid var(--line); padding: 22px; opacity: 0; transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--k, 0) * 110ms); }
.viz-card.in .dg-card { opacity: 1; transform: none; }
.dg-card .t { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 15px; margin-bottom: 8px; }
.dg-card h4 { font-size: 16.5px; color: var(--ink); font-weight: 600; margin-bottom: 8px; line-height: 1.5; }
.dg-card p { font-size: 14px; color: var(--mute); line-height: 1.8; }
.dg-card .v { font-family: var(--serif); font-size: 34px; color: var(--ink); line-height: 1.1; margin: 6px 0 4px; }
.dg-card.dark { background: var(--ink); border-color: var(--ink); }
.dg-card.dark h4, .dg-card.dark .v { color: #fff; }
.dg-card.dark p { color: #aeb6c7; }
.dg-card.dark .t { color: #a9bdf7; }
/* 阶段时间轴 */
.dg-phases { display: grid; grid-template-columns: repeat(var(--c, 3), 1fr); position: relative; }
.dg-phases::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--line); }
.dg-ph { position: relative; padding: 38px 22px 0 0; }
.dg-ph::before { content: ""; position: absolute; top: 8px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1px solid var(--acc);
  transition: background .6s; transition-delay: calc(var(--k, 0) * 260ms + .3s); }
.viz-card.in .dg-ph::before { background: var(--acc); }
.dg-ph .d { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 15px; }
.dg-ph h4 { font-size: 17px; color: var(--ink); font-weight: 600; margin: 4px 0 8px; line-height: 1.5; }
.dg-ph p { font-size: 14px; color: var(--mute); line-height: 1.8; }
/* 指标前后对比条 */
.dg-bars { display: flex; flex-direction: column; gap: 14px; }
.dg-bars .b { display: grid; grid-template-columns: 200px 1fr 110px; gap: 16px; align-items: center; font-size: 14px; }
.dg-bars .b b { color: var(--ink); font-weight: 600; }
.dg-bars .tr { height: 12px; border-radius: 99px; background: rgba(18, 26, 43, .06); overflow: hidden; position: relative; }
.dg-bars .tr i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 1%); border-radius: 99px; background: linear-gradient(90deg, #93abf5, #2350d8);
  transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); transition-delay: calc(var(--k, 0) * 120ms + .2s); }
.dg-bars .tr i.was { background: #c9ced8; z-index: 1; }
.viz-card.in .dg-bars .tr i { transform: scaleX(1); }
.dg-bars .b span { text-align: right; font-family: var(--serif); font-size: 17px; color: var(--ink2); }
/* 漏斗 */
.dg-funnel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dg-funnel .f { width: calc(var(--w) * 1%); min-width: 220px; text-align: center; padding: 13px 18px; border-radius: 12px; color: #fff; font-size: 14.5px;
  background: linear-gradient(90deg, #2350d8, #5f80e8); opacity: 0; transform: scaleX(.6); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--k, 0) * 140ms); }
.viz-card.in .dg-funnel .f { opacity: 1; transform: none; }
/* SVG：线条描绘与渐显 */
.dg svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.dg svg .draw { stroke-dasharray: var(--len, 800); stroke-dashoffset: var(--len, 800); transition: stroke-dashoffset 1.6s var(--ease); transition-delay: calc(var(--k, 0) * 160ms + .2s); }
.viz-card.in svg .draw { stroke-dashoffset: 0; }
.dg svg .fade { opacity: 0; transition: opacity .8s var(--ease); transition-delay: calc(var(--k, 0) * 140ms + .3s); }
.viz-card.in svg .fade { opacity: 1; }
.static .dg-arch .row, .static .dg-card, .static svg .fade, .static .dg-funnel .f { opacity: 1 !important; transform: none !important; transition: none !important; }
.static svg .draw { stroke-dashoffset: 0 !important; transition: none !important; }
.static .dg-bars .tr i { transform: none !important; transition: none !important; }
@media (max-width: 900px) {
  .dg-vs { grid-template-columns: 1fr; } .dg-vs .mid { transform: rotate(90deg); }
  .dg-grid, .dg-phases { grid-template-columns: 1fr; gap: 14px; } .dg-phases::before { display: none; }
  .dg-arch .row { grid-template-columns: 1fr; }
  .dg-bars .b { grid-template-columns: 1fr 90px; } .dg-bars .b .tr { grid-column: 1 / -1; grid-row: 2; }
}
/* 下降类指标：“之后”的条比“之前”短，要放在上层才看得见（2026-11-03） */
.dg-bars .tr i.top { z-index: 2; }
.static .dg-ph::before { background: var(--acc); transition: none; }
@media (max-width: 560px) { .role { font-size: 16px; } .role .r2 { font-size: 13.5px; } .rot { font-size: 17px; gap: 12px; } .rot-k { width: 22px; } }
/* ---- 13 页 · 用量部分（本人 11-03 晚：用量页并入个人 AI 实践页） ---- */
.part { padding: 70px 0 6px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.part span { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 18px; }
.part h2 { font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); font-weight: 600; }
.pg-13u { --l0: #ebe9e4; --l1: #dde5fb; --l2: #a9bdf5; --l3: #6388ea; --l4: #1f45c4; }
.paibi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-bottom: 34px; }
.pb { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pb .pn { font-family: var(--serif); font-size: clamp(40px, 4vw, 56px); line-height: 1; color: var(--ink); }
.pb .pn small { font-family: var(--sans); font-size: 14px; color: var(--mute); margin-left: 6px; }
.pb:nth-child(-n+2) .pn { color: var(--acc); }
.pb p { font-size: 14.5px; color: var(--ink2); line-height: 1.7; }
.pb p b { color: var(--ink); font-weight: 600; }
.hm-wrap { margin-top: 6px; }
.hm-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.hm-tg { display: flex; gap: 6px; background: #f0efeb; border-radius: 99px; padding: 4px; }
.hm-tg button { font: inherit; font-size: 13px; border: 0; background: transparent; color: var(--ink2); padding: 7px 16px; border-radius: 99px; cursor: pointer; }
.hm-tg button.on { background: var(--ink); color: #fff; }
.hm-lg { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mute); }
.hm-lg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.hm-lg em { font-style: normal; margin-left: 10px; } .hm-lg .lg-h, .by-h .hm-lg .lg-m { display: none; } .by-h .hm-lg .lg-h { display: inline; }
.hm-sc { overflow-x: auto; padding-bottom: 4px; }
.hm-mo { display: grid; grid-template-columns: repeat(var(--n), minmax(9px, 1fr)); gap: 3px; font-size: 11.5px; color: var(--mute); margin-bottom: 6px; min-width: 520px; }
.hm-mo span { white-space: nowrap; }
.hm { display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-template-columns: repeat(var(--n), minmax(9px, 1fr)); gap: 3px; min-width: 520px; }
.hm i { aspect-ratio: 1; border-radius: 3px; background: var(--m); transition: background .4s var(--ease); }
.by-h .hm i { background: var(--h); }
.hm i.x { background: transparent; }
.u-stats.u5 { grid-template-columns: repeat(5, 1fr); }
.pg-13u .u-stat { padding: 24px 22px; }
.pg-13u .u-stat .n { font-size: clamp(34px, 3.4vw, 50px); }
.gh { font-size: 15px; color: var(--ink); font-weight: 600; margin: 30px 0 14px; }
.gens { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; border-top: 2px solid var(--acc2); }
.gn { padding: 14px 10px 0 0; position: relative; }
.gn::before { content: ""; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); }
.gn .mo { display: block; font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 14px; }
.gn b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.45; margin-top: 4px; }
.gn small { display: block; font-size: 12px; color: var(--mute); margin-top: 3px; line-height: 1.5; }
.vbar { display: flex; height: 26px; border-radius: 9px; overflow: hidden; gap: 2px; }
.vbar i { background: hsl(calc(224 + var(--k) * 9), calc(70% - var(--k) * 4%), calc(42% + var(--k) * 4.6%)); min-width: 2px; }
.vleg { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; color: var(--ink2); }
.vleg span i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: hsl(calc(224 + var(--k) * 9), calc(70% - var(--k) * 4%), calc(42% + var(--k) * 4.6%)); }
.vleg b { font-weight: 600; color: var(--ink); } .vleg .more-v { color: var(--mute); }
.rk2 { display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; align-items: start; }
.rt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rt th { text-align: left; font-weight: 500; color: var(--mute); font-size: 12px; padding: 0 8px 8px 0; border-bottom: 1px solid var(--line); }
.rt td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); color: var(--ink2); vertical-align: middle; }
.rt .rk { color: var(--mute); width: 26px; font-family: var(--serif); }
.rt .nm { color: var(--ink); font-weight: 500; white-space: nowrap; }
.rt .nm small { display: block; font-weight: 400; font-size: 11.5px; color: var(--mute); }
.rt .br { width: 30%; } .rt .nu { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .rt .sp { color: var(--mute); font-size: 12.5px; }
.tb { display: block; height: 8px; border-radius: 99px; background: rgba(18, 26, 43, .05); overflow: hidden; }
.tb i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #93abf5, #2350d8); }
.more { margin-top: 10px; }
.more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--acc); padding: 8px 14px; border-radius: 99px; background: var(--accs); }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "↓"; transition: transform .3s; } .more[open] summary::after { transform: rotate(180deg); }
.more[open] summary { margin-bottom: 8px; }
.more .rt thead { display: none; }
@media (max-width: 900px) {
  .paibi { grid-template-columns: 1fr; } .pb { grid-template-columns: 130px 1fr; }
  .u-stats.u5 { grid-template-columns: repeat(2, 1fr); }
  .gens { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--acc2); }
  .gn { padding: 0 0 14px 18px; } .gn::before { top: 4px; left: -6px; }
  .rk2 { grid-template-columns: 1fr; }
  .rt .br { width: 24%; }   /* 本人 11-04：手机上也保留排名条 */
}
@media (max-width: 900px) {
  .rt th:nth-child(5), .rt td:nth-child(5) { display: none; }
  .rt { font-size: 13px; } .rt .sp { font-size: 11.5px; }
  .hm, .hm-mo { min-width: 0; gap: 2px; grid-template-columns: repeat(var(--n), 1fr); } .hm i { border-radius: 2px; }
  .hm-mo { font-size: 10.5px; }
  .hm-lg em { display: none !important; }
}
/* ---- 第 2 轮（11-03 夜）：排比 3 行、热力图悬停、排名分档 ---- */
.paibi { display: flex; flex-direction: column; gap: 0; }
.pbr { display: grid; grid-template-columns: 92px 1fr 1fr; gap: 0 36px; align-items: center; border-bottom: 1px solid var(--line); }
.pbr .pl { font-size: 12.5px; letter-spacing: .12em; color: var(--mute); }
.pbr .pb { border-bottom: 0; }
.pbr .pb .pn { color: var(--ink); } .pbr.lead .pb .pn { color: var(--acc); } .pbr.lead .pl { color: var(--acc); }
.pb:nth-child(-n+2) .pn { color: inherit; }
.hm-tg button { white-space: nowrap; }
.by-t .hm i { background: var(--t); }
.hm-cap { font-size: 12.5px; color: var(--mute); }
.hm-note { margin-top: 14px; font-size: 13px; color: var(--mute); line-height: 1.8; }
.hm i:not(.x) { cursor: pointer; } .hm i.cur { outline: 2px solid var(--ink); outline-offset: 1px; }
.hm-wrap { --l0: #ebe9e4; --l1: #dde5fb; --l2: #a9bdf5; --l3: #6388ea; --l4: #1f45c4; }
.hm-wrap.dark { --l0: rgba(255,255,255,.05); --l1: #22325c; --l2: #2f4f9e; --l3: #4c78e6; --l4: #9fbaff; }
.hm-wrap.dark .hm-mo, .hm-wrap.dark .hm-lg, .hm-wrap.dark .hm-cap, .hm-wrap.dark .hm-note { color: #8a93a8; }
.hm-wrap.dark .hm i.cur { outline-color: #fff; }
.hm-tip { position: fixed; z-index: 300; pointer-events: none; width: 300px; padding: 14px 16px; border-radius: 14px; background: rgba(18, 26, 43, .96); color: #e8ebf2;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28); font-size: 12.5px; line-height: 1.6; opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
.hm-tip.on { opacity: 1; transform: none; }
.hm-tip .d { font-size: 13.5px; color: #fff; font-weight: 600; } .hm-tip .d span { font-weight: 400; color: #9aa3b7; margin-left: 8px; }
.hm-tip .tk { font-family: var(--serif); font-size: 24px; color: #fff; margin: 4px 0 8px; } .hm-tip .tk small { font-family: var(--sans); font-size: 12px; color: #9aa3b7; margin-left: 4px; }
.hm-tip .g { margin-top: 6px; } .hm-tip .g b { display: block; color: #a9bdf7; font-weight: 600; font-size: 12px; margin-bottom: 3px; }
.hm-tip .g span { display: inline-block; margin: 0 4px 4px 0; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.hm-tip .g span.more { background: none; color: #9aa3b7; }
.tb.hd { background: none; position: relative; overflow: visible; }
.tb.hd i { background: linear-gradient(90deg, #2d3445, #121a2b); clip-path: polygon(0 0, 88% 0, 85% 50%, 88% 100%, 0 100%); }
.tb.hd::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 9%; background: linear-gradient(90deg, #2d3445, #121a2b); clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%, 0 50%); border-radius: 0 99px 99px 0; }
.tb.hd em { position: absolute; right: 2px; top: -16px; font-style: normal; font-size: 10.5px; color: var(--mute); }
.rt tr.hd .nm { color: var(--ink); }
.rt tr.hd + tr:not(.hd) td { border-top: 1px dashed rgba(18, 26, 43, .25); }
.ai-hm { margin-top: 48px; }
.ai-hm .hm-top { margin-bottom: 10px; }
@media (max-width: 900px) {
  .pbr { grid-template-columns: 1fr 1fr; gap: 0 18px; } .pbr .pl { grid-column: 1 / -1; padding-top: 14px; }
  .pb { grid-template-columns: 1fr; gap: 6px; } .pb .pn { font-size: 40px; }
  .hm-tip { width: min(300px, calc(100vw - 24px)); }
}
/* 项目页结尾：返回主页（本人 11-03 夜：总分总分，读完一个项目回到主页结构） */
.pj-end { padding: 10px 0 60px; }
/* 本人 11-04：原来的深色块和“结果”同色、太突兀。改为轻量的收尾：上下细线、描边圆箭头，悬停时箭头填色、标题下划线展开 */
.home-cta { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: clamp(20px, 3vw, 34px); align-items: center;
  padding: clamp(30px, 4vw, 44px) 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); }
.home-cta i { grid-row: 1 / 4; font-style: normal; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 24px;
  color: var(--acc); border: 1px solid rgba(35, 80, 216, .35); background: rgba(255, 255, 255, .6); transition: transform .55s var(--ease), background .4s, color .4s, border-color .4s; }
.home-cta .k { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: 15px; }
.home-cta strong { justify-self: start; font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; color: var(--ink); margin-top: 2px; line-height: 1.35;
  background: linear-gradient(var(--acc), var(--acc)) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .6s var(--ease), color .4s; }
.home-cta small { font-size: 13.5px; color: var(--mute); margin-top: 6px; line-height: 1.7; }
.home-cta:hover i { background: var(--acc); color: #fff; border-color: var(--acc); transform: translateX(-6px); }
.home-cta:hover strong { background-size: 100% 1px; color: var(--acc); }
.home-cta:active i { transform: translateX(-6px) scale(.94); }
/* 项目页导航：左上角常驻“← 主页” */
.nav-l { display: flex; align-items: center; gap: 14px; }
.nav-back { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink2); padding: 6px 13px 6px 9px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .65); transition: color .3s, border-color .3s, background .3s, gap .4s var(--ease); }
.nav-back i { font-style: normal; color: var(--acc); transition: transform .4s var(--ease); }
.nav-back:hover { color: var(--acc); border-color: rgba(35, 80, 216, .4); background: #fff; } .nav-back:hover i { transform: translateX(-3px); }
@media (max-width: 560px) { .nav.pj .brand { display: none; } .nav.pj .nav-links { gap: 13px; } }
.pcard { scroll-margin-top: 120px; }
/* 页脚：电话为主，邮箱次之 */
.foot .mail { display: block; width: fit-content; margin-top: 18px; font-size: clamp(17px, 1.8vw, 22px); color: var(--ink2); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.foot .mail:hover { color: var(--acc); border-color: var(--acc); }
@media (max-width: 560px) { .home-cta { column-gap: 16px; } .home-cta i { width: 48px; height: 48px; font-size: 19px; } .home-cta small { display: none; } }
@media (max-width: 900px) { .hm, .hm-mo { min-width: 470px; gap: 3px; } .hm-sc { margin: 0 -4px; padding: 0 4px 6px; } }
/* ---- 第三级：图解里的“展开详情”（本人 11-03 夜：主页 → 项目页 → 可展开的细节） ---- */
.deep { margin-top: 18px; border-radius: 18px; border: 1px solid rgba(35, 80, 216, .22); background: linear-gradient(180deg, rgba(35, 80, 216, .045), rgba(35, 80, 216, .015)); overflow: hidden; transition: border-color .35s, box-shadow .35s; }
.deep:hover { border-color: rgba(35, 80, 216, .5); box-shadow: 0 10px 30px rgba(35, 80, 216, .08); }
.deep > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; column-gap: 14px; align-items: center; padding: 16px 20px; }
.deep > summary::-webkit-details-marker { display: none; }
.deep .dk { grid-row: span 2; font-size: 11.5px; letter-spacing: .14em; color: #fff; background: var(--acc); border-radius: 99px; padding: 5px 11px; white-space: nowrap; }
.deep > summary b { font-size: 15.5px; color: var(--ink); font-weight: 600; line-height: 1.5; }
.deep > summary small { grid-column: 2; font-size: 13px; color: var(--mute); line-height: 1.6; }
.deep > summary i { grid-row: 1 / 3; grid-column: 3; font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(35, 80, 216, .3); color: var(--acc); font-size: 20px; transition: transform .35s var(--ease), background .35s; }
.deep:hover > summary i { background: var(--acc); color: #fff; }
.deep[open] > summary i { transform: rotate(45deg); }
.deep[open] > summary { border-bottom: 1px dashed rgba(35, 80, 216, .25); }
.deep-in { padding: 20px 22px 22px; background: rgba(255, 255, 255, .7); animation: deepin .45s var(--ease); }
@keyframes deepin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.deep-in h5 { font-size: 14.5px; color: var(--ink); font-weight: 600; margin: 18px 0 8px; } .deep-in h5:first-child { margin-top: 0; }
.deep-in p, .deep-in li { font-size: 13.5px; color: var(--ink2); line-height: 1.85; }
.deep-in ul, .deep-in ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.deep-in b { color: var(--ink); font-weight: 600; }
.deep-in .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .deep-in .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .deep-in .g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.deep-in .bx { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.deep-in .bx .t { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 14px; } .deep-in .bx h6 { font-size: 14px; color: var(--ink); font-weight: 600; margin: 2px 0 6px; }
.deep-in .bx.dark { background: var(--ink); border-color: var(--ink); } .deep-in .bx.dark h6, .deep-in .bx.dark b { color: #fff; } .deep-in .bx.dark p, .deep-in .bx.dark li { color: #c3cadb; } .deep-in .bx.dark .t { color: #a9bdf7; }
.deep-in .calc { font-family: var(--serif); font-size: 17px; color: var(--ink); line-height: 1.9; }
.deep-in .calc em { font-style: normal; color: var(--acc); }
.deep-in .src { margin-top: 12px; font-size: 12.5px; color: var(--mute); }
@media (max-width: 900px) { .deep-in .g2, .deep-in .g3, .deep-in .g4 { grid-template-columns: 1fr; } .deep > summary { grid-template-columns: 1fr auto; } .deep .dk { grid-row: auto; justify-self: start; margin-bottom: 6px; } .deep > summary small { grid-column: 1; } .deep > summary i { grid-row: 1 / 4; grid-column: 2; } }

/* ===== 第 3 轮交互（本人 11-04：手机可点提示、导航；最近两轮新加的块补上出场与联动） ===== */
/* 导航：当前一节 */
.nav-links a.cur { color: var(--ink); } .nav-links a.cur::after { transform: scaleX(1); transform-origin: left; }
/* 项目卡：按下反馈；进入视野时箭头轻推一下，提示可以点 */
.pcard { -webkit-tap-highlight-color: transparent; }
.pcard:active { transform: scale(.985); background: rgba(255, 255, 255, .95); border-color: var(--line); transition-duration: .15s; }
.pcard:active .pc-go { background: var(--acc); color: #fff; border-color: var(--acc); }
.seg.in .pc-go { animation: nudge 1.1s var(--ease) calc(.7s + var(--i, 0) * .15s) 2; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 45% { translate: 5px 0; } }
/* 热力图：按周从左到右铺开；切换着色时颜色也按列扫过去 */
.hm i[data-k] { transition: background .45s var(--ease); transition-delay: calc(var(--c, 0) * 12ms); }
.js .hm i[data-k] { opacity: 0; }
.in .hm i[data-k] { opacity: 1; animation: hmIn .55s var(--ease) backwards; animation-delay: calc(var(--c, 0) * 16ms + .1s); }
@keyframes hmIn { from { opacity: 0; transform: scale(.3); } }
.hm i[data-k]:hover { transform: scale(1.3); transition: transform .2s var(--ease), background .45s var(--ease); transition-delay: 0s; }
/* 13 页排名条、按原厂的分段条、每月第一的模型 */
.js .rt .tb i { transform: scaleX(0); transform-origin: left; }
.in .rt .tb i { transform: none; transition: transform 1.2s var(--ease); transition-delay: calc(var(--r, 0) * 70ms + .25s); }
.js .rt .tb.hd::after, .js .rt .tb.hd em { opacity: 0; } .in .rt .tb.hd::after, .in .rt .tb.hd em { opacity: 1; transition: opacity .5s 1.1s; }
details.more[open] .tb i { animation: tbIn 1s var(--ease) backwards; animation-delay: calc(var(--r, 0) * 35ms); }
@keyframes tbIn { from { transform: scaleX(0); } }
.in .pg-13u .vbar i { animation: tbIn .8s var(--ease) backwards; transform-origin: left; animation-delay: calc(var(--k, 0) * 70ms + .2s); }
/* 依次出场（site.js 给子项加 .sq 与 --j） */
.js .sq { opacity: 0; }
.in .sq, .deep[open] .sq { opacity: 1; animation: sqIn .75s var(--ease) backwards; animation-delay: calc(var(--j, 0) * 85ms + .15s); }
.deep[open] .sq { animation-duration: .5s; animation-delay: calc(var(--j, 0) * 45ms + .05s); }
@keyframes sqIn { from { opacity: 0; transform: translateY(12px); } }
.tl6 .tarrow.sq { animation-name: arIn; } @keyframes arIn { from { opacity: 0; scale: .4; } }
.pg-03 .mwc { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.pg-03 .mwc:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18, 26, 43, .08); border-color: rgba(35, 80, 216, .3); }
.pg-03 .mwc.key:hover { box-shadow: 0 16px 40px rgba(35, 80, 216, .3); }
/* Rollie：人工的灰条慢慢铺满，Agent 的蓝点最后才出现并闪两下 */
.js .pg-02 .vt i.old { transform: scaleX(0); transform-origin: left; }
.pg-02 .viz-card.in .vt i.old { transform: none; transition: transform 1.6s var(--ease); transition-delay: calc(var(--k, 0) * 220ms + .35s); }
.pg-02 .vbar.hot .vt { overflow: visible; }
.js .pg-02 .vt i.new { opacity: 0; transform: scale(.2); }
.pg-02 .viz-card.in .vt i.new { opacity: 1; transform: none; transition: opacity .3s, transform .5s var(--ease); transition-delay: 1.5s; animation: ping 1.6s var(--ease) 1.9s 2; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(35, 80, 216, .5); } 100% { box-shadow: 0 0 0 16px rgba(35, 80, 216, 0); } }
/* Rollie：原则 ↔ 界面联动 */
.pg-02 .prn [data-p] { cursor: pointer; transition: background .3s, box-shadow .3s, color .3s; outline: none; }
.pg-02 .prn [data-p]:hover, .pg-02 .prn [data-p].cur { background: var(--acc); color: #e6ecff; box-shadow: 0 8px 22px rgba(35, 80, 216, .22); }
.pg-02 .prn [data-p]:hover b, .pg-02 .prn [data-p].cur b { color: #fff; }
.pg-02 .p-hint { font-size: 12px; color: var(--mute); margin: -6px 0 14px; } .pg-02 .p-hint::before { content: "↔"; color: var(--acc); margin-right: 6px; }
.pg-02 .viz-card.pk-live .rv { transition: opacity .3s, transform .3s; transition-delay: 0s; }
.pg-02 .viz-card.pk-live .tit { transition: opacity .3s, box-shadow .3s; }
.pg-02 .viz-card.in.p-on .rule:not(.p-hit), .pg-02 .viz-card.in.p-on .tit:not(.p-hit) { opacity: .28; }
.pg-02 .p-hit .pt { background: var(--acc); color: #fff; }
.pg-02 .tcol.new .tit.p-hit { box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .6); }
/* 截图（?static）与减少动态效果：直接显示终态 */
.static .sq, .static .hm i[data-k], .static .rt .tb i, .static .rt .tb.hd::after, .static .rt .tb.hd em, .static .pg-02 .vt i, .static .pg-13u .vbar i, .static .pc-go {
  opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sq, .hm i[data-k], .rt .tb i, .pg-02 .vt i, .pg-13u .vbar i, .pc-go { animation: none !important; opacity: 1 !important; transform: none !important; }
  .rt .tb.hd::after, .rt .tb.hd em { opacity: 1 !important; }
}
.mx-t .v.word { font-family: var(--sans); font-weight: 700; color: var(--acc); font-size: clamp(26px, 2.7vw, 36px); letter-spacing: .02em; line-height: 1.3; padding-top: 4px; }
.mx-t:has(.v.word) { background: linear-gradient(160deg, rgba(35, 80, 216, .09), rgba(251, 250, 247, .92) 70%); }
.home-cta { padding-left: 12px; }
/* 用量单独成页（本人 11-04）：开源页开头的引子卡、用量页末尾链到开源页 */
.ut { display: block; background: var(--ink) !important; border-color: var(--ink) !important; color: #fff; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.ut:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(18, 26, 43, .28); }
.ut-h .k { font-family: var(--serif); font-style: italic; color: #a9bdf7; font-size: 15px; }
.ut-h h3 { color: #fff; font-size: clamp(19px, 2vw, 24px); font-weight: 600; line-height: 1.5; margin: 4px 0 22px; }
.ut-st { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.ut-s .n { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 50px); color: #fff; line-height: 1; } .ut-s .u { display: block; font-size: 13px; color: #aeb6c7; margin-top: 8px; }
.ut .hm-note { display: none; }
.ut-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14.5px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 3px; transition: gap .4s var(--ease), border-color .3s; }
.ut-go i { font-style: normal; color: #a9bdf7; } .ut:hover .ut-go { gap: 16px; border-color: #fff; }
.ut-next { padding: 30px 0 4px; } .ut-next a { display: block; padding: 22px 26px; border-radius: 20px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.ut-next span { display: block; font-family: var(--serif); font-style: italic; color: var(--mute); font-size: 14.5px; } .ut-next b { display: block; font-size: 18px; color: var(--ink); margin-top: 4px; }
.ut-next i { font-style: normal; color: var(--acc); transition: margin .4s var(--ease); } .ut-next a:hover { border-color: rgba(35, 80, 216, .35); background: #fff; } .ut-next a:hover i { margin-left: 8px; }
@media (max-width: 560px) { .ut-st { grid-template-columns: repeat(2, 1fr); row-gap: 18px; } }

/* ===== 批 4（本人 11-04 采纳第 10 条 UI 建议） ===== */
/* 1、2 侧边块目录 + 展开全部细节 */
.toc { position: fixed; left: 18px; top: 50%; transform: translate(-12px, -50%); z-index: 40; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.toc.on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.toc ol { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-radius: 16px; background: rgba(251, 250, 247, .78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); }
.toc a { display: flex; align-items: center; gap: 0; padding: 6px 8px; border-radius: 10px; color: var(--mute); font-size: 12.5px; white-space: nowrap; transition: background .3s, color .3s, gap .35s var(--ease); }
.toc .tk { font-family: var(--serif); font-style: italic; font-size: 14px; width: 20px; }
.toc .tt { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .45s var(--ease), opacity .3s; }
.toc:hover .tt, .toc a.cur .tt { max-width: 190px; opacity: 1; } .toc:hover a, .toc a.cur { gap: 6px; }
.toc a:hover { background: #fff; color: var(--ink); } .toc a.cur { color: var(--acc); background: var(--accs); }
.toc-all { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; color: var(--ink2); cursor: pointer;
  padding: 7px 12px 7px 9px; border-radius: 99px; border: 1px solid rgba(35, 80, 216, .3); background: rgba(255, 255, 255, .85); transition: background .3s, color .3s, border-color .3s; }
.toc-all i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--accs); color: var(--acc); transition: transform .4s var(--ease); }
.toc-all:hover { border-color: var(--acc); color: var(--acc); } .toc-all.on i { transform: rotate(45deg); background: var(--acc); color: #fff; }
@media (max-width: 1279px) { .toc ol { display: none; } .toc { left: auto; right: 14px; top: auto; bottom: 18px; transform: translateY(12px); } .toc.on { transform: none; }
  .toc-all { margin: 0; box-shadow: 0 8px 24px rgba(18, 26, 43, .14); } }
@media print { .toc { display: none; } }
/* 3 实心蓝：每张图最多两块实心，其余改蓝色描边 */
.dg-arch .cell.hot:not(.solid) { background: #fff; color: var(--ink); border-color: rgba(35, 80, 216, .55); box-shadow: inset 3px 0 0 var(--acc); }
.dg-arch .cell.hot:not(.solid) small { color: var(--mute); }
.deep .dk { background: transparent; color: var(--acc); border: 1px solid rgba(35, 80, 216, .45); }
.deep:hover .dk, .deep[open] .dk { background: var(--acc); color: #fff; }
/* 4 关键机制深色通栏 */
.dg.band { position: relative; margin: 64px 0 40px; padding: 80px 0 72px; background: radial-gradient(900px 420px at 85% 0%, rgba(35, 80, 216, .45), transparent 70%), radial-gradient(700px 380px at 0% 100%, rgba(35, 80, 216, .22), transparent 70%), var(--ink); }
.dg.band .viz-card { box-shadow: 0 30px 80px rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .12); }
.dg-h .bk { order: -1; flex-basis: 100%; font-size: 11.5px; letter-spacing: .24em; color: var(--acc); margin-bottom: -2px; }
.dg-h .bk::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--acc); vertical-align: middle; margin-right: 8px; }
/* 5 数字 + 小号单位 */
.dg-card .v small.u, .mx-t .v .cj { font-family: var(--sans); font-size: .42em; color: var(--mute); font-weight: 500; margin-left: .25em; letter-spacing: .02em; }
.dg-card.dark .v small.u { color: #a9b3c9; } .dg-card.best .v small.u { color: #dbe3ff; }
/* 6 主页三张主卡：大一号 + 小示意图 */
.pcard.major { grid-template-columns: 40px 1fr 210px 26px; padding: 28px 28px 28px 24px; background: rgba(255, 255, 255, .7); border-color: var(--line); }
.pcard.major .pc-body h5 { font-size: 20px; } .pcard.major .pc-body p { font-size: 14.5px; }
.pc-viz { display: flex; flex-direction: column; gap: 5px; align-self: center; }
.pc-viz .cap { font-size: 10.5px; letter-spacing: .16em; color: var(--mute); margin-bottom: 2px; }
.pc-viz i { display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 11.5px; line-height: 1.3; color: var(--ink2); padding: 6px 10px; border-radius: 8px;
  background: rgba(18, 26, 43, .045); transition: background .5s var(--ease), color .5s, transform .5s var(--ease); transition-delay: calc(var(--k) * 60ms); }
.pc-viz i small { margin-left: auto; font-size: 10.5px; color: var(--mute); white-space: nowrap; }
.pc-viz i.h { background: var(--acc); color: #fff; } .pc-viz i.h small { color: #dbe3ff; }
.pc-viz i.ent { background: transparent; padding: 0; gap: 4px; }
.pc-viz i.ent em { flex: 1; text-align: center; font-style: normal; padding: 6px 0; border-radius: 8px; background: #fff; border: 1px solid rgba(35, 80, 216, .3); color: var(--acc); font-weight: 500; }
.pcard.major:hover .pc-viz:not(.chat) i:not(.ent) { background: var(--accs); transform: translateX(3px); } .pcard.major:hover .pc-viz i.h { background: var(--acc); }
.pcard.major:hover .pc-viz i.ent em { background: var(--accs); }
@media (max-width: 900px) { .pcard.major { grid-template-columns: 40px 1fr 26px; } .pc-viz { grid-column: 2; grid-row: 2; margin-top: 10px; max-width: 360px; } }
@media (max-width: 560px) { .pcard.major { grid-template-columns: 1fr; padding-right: 58px; } .pc-viz { grid-column: 1; grid-row: auto; max-width: none; } }
.dg.band .viz-card { background: var(--paper); }
section.dg[id] { scroll-margin-top: 76px; } .dg.band[id] { scroll-margin-top: 20px; }

/* ===== 交互恢复（本人 11-04）：触屏上用“滚到中间”代替悬停；首屏光晕在手机上缓慢漂移 ===== */
@media (hover: none) {
  [data-spot].act::before { opacity: 1; --mx: 50%; --my: 40%; }
  .hl-card.act { transform: translateY(-6px); box-shadow: 0 34px 70px -38px rgba(18, 26, 43, .32); border-color: rgba(35, 80, 216, .22); }
  .pcard.act { background: rgba(255, 255, 255, .9); border-color: var(--line); transform: translateX(4px); }
  .pcard.act .pc-go { transform: translateX(4px); background: var(--acc); color: #fff; border-color: var(--acc); }
  .pcard.major.act .pc-viz:not(.chat) i:not(.ent) { background: var(--accs); transform: translateX(3px); } .pcard.major.act .pc-viz i.h { background: var(--acc); }
  .pg-03 .mwc.act { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18, 26, 43, .08); border-color: rgba(35, 80, 216, .3); }
  .pg-03 .mwc.key.act { box-shadow: 0 16px 40px rgba(35, 80, 216, .3); }
  .ut.act { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(18, 26, 43, .28); } .ut.act .ut-go { gap: 16px; border-color: #fff; }
  .ut-next a.act { border-color: rgba(35, 80, 216, .35); background: #fff; } .ut-next a.act i { margin-left: 8px; }
  .home-cta.act i { background: var(--acc); color: #fff; border-color: var(--acc); transform: translateX(-6px); } .home-cta.act strong { background-size: 100% 1px; color: var(--acc); }
  .dg-card { transition: opacity .9s var(--ease), transform .9s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
  .viz-card.in .dg-card.act { box-shadow: 0 16px 36px rgba(18, 26, 43, .09); border-color: rgba(35, 80, 216, .25); }
  .viz-card.in .sl.act { transform: translateX(8px); transition-delay: 0s; }
  .hero .glow { --gx: 30%; --gy: 40%; animation: glowDrift 14s ease-in-out infinite alternate; transition: none; }
  @keyframes glowDrift { 0% { transform: translate(18vw, 22vh) translate(-50%, -50%); } 50% { transform: translate(78vw, 38vh) translate(-50%, -50%); } 100% { transform: translate(36vw, 70vh) translate(-50%, -50%); } }
}
@media (hover: none) and (prefers-reduced-motion: reduce) { .hero .glow { animation: none; } }
/* AdmiClaw 中间层结果：改造前 → 改造后的对比条（恢复第一版里“灰条 → 蓝条”的长出效果） */
.pg-03 .mres .mb { display: block; flex-basis: 100%; height: 8px; border-radius: 99px; background: rgba(18, 26, 43, .06); position: relative; overflow: hidden; margin-top: 4px; }
.pg-03 .mres .mb em { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 1%); border-radius: 99px; background: linear-gradient(90deg, #93abf5, #2350d8);
  transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); transition-delay: calc(var(--j, 0) * 85ms + .6s); }
.pg-03 .mres .mb em.was { background: #c9ced8; z-index: 1; transition-delay: calc(var(--j, 0) * 85ms + .3s); }
.viz-card.in .pg-03 .mres .mb em, .pg-03 .viz-card.in .mres .mb em { transform: scaleX(1); }
.static .pg-03 .mres .mb em { transform: none !important; transition: none !important; }
.pg-03 .mres .mb.dn em.was { z-index: 0; } .pg-03 .mres .mb.dn em:not(.was) { z-index: 2; }

/* ===== 单次播放（本人 11-04 17:35）：往上滑才露出的元素直接显示终态 ===== */
.still, .still *, .still *::before, .still *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-delay: 0s !important; }
.quiet .sq:not(.deep-in .sq), .quiet .hm i[data-k], .quiet .pc-go, .quiet .vt i.new, .quiet .vbar i { animation: none !important; }
.quiet .l3 .ly.mid { animation-duration: 1ms !important; animation-delay: 0s !important; }

/* ===== 本人 11-04 21:01：主页 AdmiClaw 主卡（飞书群对话示意）、页脚联系方式 ===== */
.pc-viz.chat { gap: 7px; }
.pc-viz.chat .cap { display: flex; align-items: center; gap: 6px; letter-spacing: .08em; }
.pc-viz.chat .live { width: 7px; height: 7px; border-radius: 50%; background: #1fb26b; box-shadow: 0 0 0 0 rgba(31, 178, 107, .5); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(31, 178, 107, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(31, 178, 107, 0); } }
.pc-viz.chat i { display: block; font-style: normal; font-size: 11.5px; line-height: 1.5; padding: 7px 10px; border-radius: 12px; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.pc-viz.chat .msg.me { align-self: flex-end; max-width: 92%; background: var(--acc); color: #fff; border-bottom-right-radius: 4px; }
.pc-viz.chat .msg.ai { align-self: flex-start; max-width: 96%; background: #fff; color: var(--ink2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.pc-viz.chat .msg.ai b { display: block; font-size: 10px; color: var(--acc); font-weight: 600; margin-bottom: 1px; }
.pc-viz.chat .tags { display: flex; gap: 4px; padding: 0; background: none; }
.pc-viz.chat .tags em { flex: 1; text-align: center; font-style: normal; font-size: 10.5px; color: var(--acc); padding: 4px 0; border-radius: 99px; border: 1px solid rgba(35, 80, 216, .3); background: rgba(255, 255, 255, .7); }
.js .pc-viz.chat i { opacity: 0; transform: translateY(8px) scale(.97); }
.seg.in .pc-viz.chat i { opacity: 1; transform: none; transition-delay: calc(.6s + var(--k) * .5s); }
.pcard.major:hover .pc-viz.chat i, .pcard.major.act .pc-viz.chat i { transform: none; }
.pcard.major:hover .pc-viz.chat .msg.ai { border-color: rgba(35, 80, 216, .35); }
.static .pc-viz.chat i { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .pc-viz.chat .live { animation: none; } .pc-viz.chat i { opacity: 1 !important; transform: none !important; } }
@media (max-width: 900px) { .pc-viz.chat { max-width: 330px; } }

.foot .ct { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.foot .lbl { display: block; font-size: 12px; letter-spacing: .22em; color: var(--mute); margin: 0 0 6px; }
.foot .lbl + .big { margin-bottom: 26px; }
.foot .ct .mail { margin-top: 0; }
.foot .ct-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 16px 14px; border-radius: 24px; background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(18, 26, 43, .35); transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s; }
.foot .ct-qr:hover { transform: translateY(-4px); box-shadow: 0 36px 70px -36px rgba(35, 80, 216, .35); border-color: rgba(35, 80, 216, .28); }
.foot .qr { width: 160px; height: 160px; padding: 8px; border-radius: 14px; background: #fff; }
.foot .qr img { display: block; width: 100%; height: 100%; image-rendering: crisp-edges; }
.foot .qr-t { text-align: center; line-height: 1.5; }
.foot .qr-t b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); font-weight: 600; }
.foot .qr-t b i { width: 7px; height: 7px; border-radius: 50%; background: #1fb26b; }
.foot .qr-t span { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.foot .qr-t .mob { display: none; }
@media (hover: none) { .foot .qr-t .dsk { display: none; } .foot .qr-t .mob { display: block; } }
@media (max-width: 760px) { .foot .ct { grid-template-columns: 1fr; gap: 34px; } .foot .ct-qr { flex-direction: row; align-items: center; justify-self: start; gap: 16px; padding: 14px 18px 14px 14px; }
  .foot .qr { width: 132px; height: 132px; } .foot .qr-t { text-align: left; } .foot .qr-t span { max-width: 140px; }
  .foot .ct-qr { box-shadow: 0 10px 28px rgba(18, 26, 43, .07); } }

/* 本人 11-04 21:46：各项目补“结果”块 + 口径详情 */
.dg-grid.res .dg-card .v { font-size: 24px; white-space: nowrap; letter-spacing: -.01em; }
@media (max-width: 1100px) and (min-width: 901px) { .dg-grid.res { grid-template-columns: repeat(3, 1fr); } }

/* ===== 本人 11-04 22:53：智能投放组三页（EMI4.0 / AIGC 素材 / 投放策略）按升 18 级答辩改版 ===== */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease), box-shadow .45s var(--ease), border-color .45s, background .45s; transition-delay: calc(var(--k, 0) * 140ms + .2s); }
.viz-card.in .rv { opacity: 1; transform: none; }
.static .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
.cap2 { font-size: 12px; letter-spacing: .2em; color: var(--mute); margin: 34px 0 14px; }
/* 共用开头：定位条 */
.ctx-pos { display: flex; align-items: stretch; gap: 8px; margin: 0 0 22px; }
.ctx-pos .nd { flex: 1 1 0; min-width: 0; border-radius: 16px; padding: 11px 15px; background: #fff; border: 1px solid var(--line); }
.ctx-pos .nd b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.ctx-pos .nd small { display: block; font-size: 12px; color: var(--mute); line-height: 1.55; margin-top: 2px; }
.ctx-pos .nd.me { background: var(--ink); border-color: var(--ink); } .ctx-pos .nd.me b { color: #fff; } .ctx-pos .nd.me small { color: #a9bdf7; }
.ctx-pos .ar { align-self: center; color: var(--acc); font-family: var(--serif); font-size: 17px; flex: none; }
/* 三大瓶颈卡 */
.bns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bn { position: relative; display: flex; flex-direction: column; border-radius: 22px; padding: 22px 22px 18px; background: #fff; border: 1px solid var(--line); }
.bn:hover, .bn.act { box-shadow: 0 16px 38px rgba(18, 26, 43, .09); border-color: rgba(35, 80, 216, .28); transition-delay: 0s; }
.bn .kk { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bn .kk i { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 15px; }
.bn .kk span { font-size: 19px; font-weight: 700; color: var(--ink); } .bn .kk small { font-size: 12px; color: var(--mute); }
.bn .el { font-size: 11.5px; letter-spacing: .16em; color: var(--mute); margin-top: 14px; }
.bn h4 { font-size: 15px; color: var(--ink); font-weight: 600; margin: 3px 0 12px; line-height: 1.55; }
.bn .bv { display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1px dashed rgba(18, 26, 43, .14); }
.bn .bv b { font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1; color: var(--ink); white-space: nowrap; }
.bn .bv small { font-size: 12.5px; color: var(--mute); line-height: 1.6; }
.bn .ess { font-size: 14px; color: var(--acc); font-weight: 600; line-height: 1.65; margin-top: 3px; }
.bn .lp { width: 100%; max-width: 240px; margin: 8px auto 2px; display: block; overflow: visible; }
.lp text { font-size: 13px; fill: var(--ink2); font-family: var(--sans); } .lp text.ct { font-size: 11px; fill: var(--mute); letter-spacing: .1em; }
.lp .rg { stroke: var(--acc2); } .lp .nd { fill: var(--acc); } .lp .dt { fill: var(--acc); }
.lp .spin { transform-box: view-box; transform-origin: 120px 66px; animation: lpspin 7s linear infinite; }
@keyframes lpspin { to { transform: rotate(360deg); } }
.bn .ft { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bn .tg { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: rgba(169, 189, 247, .18); color: #fff; }
.bn .hf { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: var(--accs); color: var(--acc); }
.bn .go, .xp-go { display: inline-block; font-size: 13px; font-weight: 500; color: var(--acc); padding: 6px 12px; border-radius: 99px; background: var(--accs); transition: background .3s, color .3s, transform .3s var(--ease); }
.bn .go:hover, .xp-go:hover { background: var(--acc); color: #fff; transform: translateX(3px); }
.bn.me { background: var(--ink); border-color: var(--ink); }
.bn.me .kk span, .bn.me h4, .bn.me .bv b { color: #fff; } .bn.me .kk i, .bn.me .ess { color: #a9bdf7; } .bn.me .bv small, .bn.me .el, .bn.me .kk small { color: #8f9bb8; }
.bn.me .bv { border-color: rgba(255, 255, 255, .14); } .bn.me .lp text { fill: #dfe5f3; } .bn.me .lp text.ct { fill: #8f9bb8; } .bn.me .lp .nd, .bn.me .lp .dt { fill: #a9bdf7; }
.bn.half { border-color: rgba(35, 80, 216, .35); }
/* 外部环境 */
.envs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.env { border-radius: 20px; padding: 20px 22px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); }
.env:hover, .env.act { border-color: rgba(35, 80, 216, .28); box-shadow: 0 14px 32px rgba(18, 26, 43, .07); transition-delay: 0s; }
.env .t { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 14px; }
.env h4 { font-size: 15.5px; color: var(--ink); font-weight: 600; margin: 4px 0 12px; line-height: 1.55; }
.env ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.env li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--mute); line-height: 1.7; }
.env li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc2); }
.env li b { color: var(--ink); font-weight: 600; }
.env li em { font-style: normal; font-size: 11.5px; color: var(--acc); background: var(--accs); padding: 1px 8px; border-radius: 99px; margin-left: 4px; white-space: nowrap; }
.env li a.xp { color: var(--acc); border-bottom: 1px solid rgba(35, 80, 216, .3); white-space: nowrap; } .env li a.xp:hover { border-color: var(--acc); }
.ctx-sum { margin-top: 14px; border-radius: 18px; padding: 16px 22px; background: var(--ink); color: #c3cadb; font-size: 14.5px; line-height: 1.85; }
.ctx-sum b { color: #fff; font-weight: 600; }
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13.5px; }
.cmp th, .cmp td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.65; color: var(--ink2); }
.cmp th { font-size: 12px; color: var(--mute); font-weight: 500; letter-spacing: .06em; }
.cmp td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; } .cmp td small { display: block; color: var(--mute); font-size: 12px; font-weight: 400; }
.cmp tr.me td { background: rgba(231, 236, 251, .6); }
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sxh { display: none; font-size: 12px; color: var(--mute); margin-top: 6px; }
/* EMI4.0 三场仗 */
.bts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bt { display: flex; flex-direction: column; border-radius: 22px; padding: 22px; background: #fff; border: 1px solid var(--line); }
.bt:hover, .bt.act { box-shadow: 0 16px 38px rgba(18, 26, 43, .09); border-color: rgba(35, 80, 216, .28); transition-delay: 0s; }
.bt .bh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bt .bh span { font-size: 12px; letter-spacing: .18em; color: var(--acc); font-weight: 600; } .bt .bh small { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: 13px; white-space: nowrap; }
.bt h4 { font-size: 24px; color: var(--ink); font-weight: 700; margin: 6px 0 4px; letter-spacing: .02em; }
.bt .slg { font-size: 14px; color: var(--ink2); line-height: 1.7; margin-bottom: 14px; min-height: 3.4em; }
.bt .how { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.bt .how li { font-size: 13.5px; color: var(--mute); line-height: 1.7; padding: 9px 12px; border-radius: 12px; background: rgba(18, 26, 43, .035); }
.bt .how li b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.bt .rs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bt .rs span { font-size: 12.5px; padding: 4px 10px; border-radius: 99px; background: var(--accs); color: var(--acc); font-weight: 600; }
.bt .fx { font-size: 12.5px; color: var(--mute); margin-bottom: 14px; } .bt .fx i { font-style: normal; color: var(--ink2); font-weight: 500; }
.bt .bl { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.bt .bl a { font-size: 13px; font-weight: 500; color: var(--acc); padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(35, 80, 216, .3); transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.bt .bl a:hover { background: var(--acc); color: #fff; border-color: var(--acc); transform: translateX(3px); }
.bt.me { background: var(--ink); border-color: var(--ink); }
.bt.me h4 { color: #fff; } .bt.me .bh span, .bt.me .bh small { color: #a9bdf7; } .bt.me .slg { color: #dfe5f3; }
.bt.me .how li { background: rgba(255, 255, 255, .06); color: #a3adc4; } .bt.me .how li b { color: #fff; }
.bt.me .rs span { background: rgba(35, 80, 216, .5); color: #fff; } .bt.me .fx { color: #8f9bb8; } .bt.me .fx i { color: #dfe5f3; }
.bt.me .bl a { color: #fff; border-color: rgba(255, 255, 255, .3); } .bt.me .bl a:hover { background: #fff; color: var(--ink); }
/* 答辩式大数字条 */
.bigs { display: grid; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); border-radius: 22px; border: 1px solid rgba(35, 80, 216, .2); background: linear-gradient(180deg, #fff, rgba(231, 236, 251, .5)); overflow: hidden; }
.bigs > div { padding: 22px 20px 20px; border-left: 1px solid var(--line); }
.bigs > div:first-child { border-left: 0; }
.bigs .l { font-size: 12.5px; color: var(--mute); line-height: 1.5; }
.bigs .n { font-family: var(--serif); font-size: clamp(30px, 3vw, 46px); line-height: 1.1; color: var(--acc); margin: 8px 0 6px; white-space: nowrap; }
.bigs .n small { font-family: var(--sans); font-size: .34em; color: var(--mute); margin-left: .2em; letter-spacing: .02em; }
.bigs .c { font-size: 12.5px; color: var(--mute); line-height: 1.65; }
.bigs.dark { background: var(--ink); border-color: var(--ink); } .bigs.dark > div { border-color: rgba(255, 255, 255, .1); } .bigs.dark .n { color: #fff; } .bigs.dark .l, .bigs.dark .c, .bigs.dark .n small { color: #a3adc4; }
/* 三问（素材理解）*/
.q3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.q3 .q { display: flex; flex-direction: column; gap: 8px; }
.q3 h5 { font-size: 17px; color: var(--ink); font-weight: 700; text-align: center; margin-bottom: 2px; }
.q3 .qa { flex: 1; border-radius: 18px; background: #fff; border: 1px solid var(--line); padding: 16px 18px; }
.q3 .qa b, .q3 .qb b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; } .q3 .qa b { color: var(--acc); }
.q3 .qa ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; } .q3 .qa li, .q3 .qa p { font-size: 13.5px; color: var(--mute); line-height: 1.7; }
.q3 .qd { text-align: center; color: var(--acc); font-size: 16px; line-height: 1; }
.q3 .qb { border-radius: 18px; background: var(--ink); padding: 16px 18px; } .q3 .qb b { color: #fff; } .q3 .qb p { font-size: 13.5px; color: #a3adc4; line-height: 1.7; }
/* 素材特征矩阵 */
.fm { display: grid; grid-template-columns: 54px repeat(3, minmax(0, 1fr)); gap: 12px; }
.fm .ax { grid-column: 2 / 5; position: relative; display: flex; justify-content: space-between; gap: 20px; font-size: 12px; color: var(--mute); padding-bottom: 10px; }
.fm .ax::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--acc2), var(--acc)); }
.fm .ax b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.fm .ay { display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; letter-spacing: .3em; font-size: 13px; color: var(--ink2); font-weight: 600; border-right: 2px solid var(--acc2); }
.fm .c { border-radius: 18px; background: #fff; border: 1px solid var(--line); padding: 14px 16px; min-width: 0; }
.fm .c:hover, .fm .c.act { border-color: rgba(35, 80, 216, .3); box-shadow: 0 12px 30px rgba(18, 26, 43, .08); transition-delay: 0s; }
.fm .c h6 { font-size: 14px; color: var(--ink); font-weight: 600; margin-bottom: 10px; line-height: 1.5; } .fm .c h6 i { font-style: normal; color: var(--acc); margin-right: 4px; }
.fm .c h6 small { display: block; font-size: 11.5px; font-weight: 400; color: var(--mute); }
.fm .ex { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; }
.fm .ex svg { width: 72px; height: 72px; border-radius: 12px; display: block; }
.fm .kv { display: flex; flex-wrap: wrap; gap: 5px; }
.fm .kv span { font-size: 12px; padding: 3px 8px; border-radius: 8px; background: var(--accs); color: var(--ink); line-height: 1.5; } .fm .kv span small { color: var(--mute); margin-right: 4px; font-size: 11px; }
.fm .ds { font-size: 12px; color: var(--mute); line-height: 1.65; margin-top: 6px; }
.fm .c.vec { background: linear-gradient(140deg, #1b2645, #121a2b); border-color: #121a2b; }
.fm .c.vec h6 { color: #fff; } .fm .c.vec h6 small, .fm .c.vec .ds { color: #8f9bb8; } .fm .c.vec h6 i { color: #a9bdf7; }
.fm .vbars { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin: 4px 0 8px; }
.fm .vbars i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, #a9bdf7, #2350d8); height: calc(var(--h) * 1%); opacity: .9; }
.fm .vnum { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: #dbe3ff; letter-spacing: .02em; }
.fm .r2 { grid-column: 3 / 5; }
/* 商店原生化 before / after */
.ba { display: grid; grid-template-columns: 1fr .82fr 1fr; gap: 14px; align-items: stretch; }
.ba > div { border-radius: 20px; padding: 18px 18px 14px; background: #fff; border: 1px solid var(--line); text-align: center; }
.ba h5 { font-family: var(--serif); font-size: 24px; color: var(--ink); font-weight: 400; } .ba .af h5 { color: var(--acc); }
.ba p { font-size: 13px; color: var(--mute); line-height: 1.7; margin: 4px 0 10px; } .ba p b { color: var(--acc); font-weight: 600; }
.ba svg { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto; }
.ba .md { background: rgba(231, 236, 251, .55); border-color: rgba(35, 80, 216, .18); display: flex; flex-direction: column; justify-content: center; }
.ba .md h5 { font-family: var(--sans); font-size: 15px; font-weight: 600; }
/* 采纳率曲线 */
.cv { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; border-radius: 22px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); }
.cv .cvn .l { font-size: 13px; color: var(--mute); } .cv .cvn .n { font-family: var(--serif); font-size: 64px; line-height: 1.05; color: var(--acc); margin: 6px 0; }
.cv .cvn .c { font-size: 12.5px; color: var(--mute); line-height: 1.7; }
.cv svg { width: 100%; height: auto; display: block; }
.cv svg text { font-size: 13px; fill: var(--mute); font-family: var(--sans); }
.cv .ln { fill: none; stroke: var(--acc); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.cv .tr { stroke: var(--ink2); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .55; }
.cv .gd { stroke: rgba(18, 26, 43, .07); }
.cv .end { fill: var(--acc); } .cv .pul { fill: none; stroke: var(--acc); opacity: 0; }
.viz-card.in .cv .pul { animation: cvpul 2.4s ease-out 2.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cvpul { 0% { opacity: .6; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.4); } }
/* 投放助手架构 */
.asa svg { width: 100%; min-width: 760px; height: auto; display: block; }
.asa text { font-family: var(--sans); font-size: 14px; fill: var(--ink); }
.asa .chev { fill: var(--accs); } .asa .chev-t { font-size: 14px; fill: var(--acc); font-weight: 600; letter-spacing: .1em; }
.asa .nb { fill: #fff; stroke: rgba(35, 80, 216, .45); stroke-width: 1.3; } .asa .nb.k { fill: var(--ink); stroke: var(--ink); } .asa .nb.a { fill: var(--acc); stroke: var(--acc); }
.asa text.w { fill: #fff; font-weight: 600; } .asa .eg { fill: none; stroke: var(--acc2); stroke-width: 1.6; }
.asa .side { fill: rgba(18, 26, 43, .045); } .asa .side-t { font-size: 13px; fill: var(--mute); letter-spacing: .1em; }
/* 两栏因果（投放策略 02） */
.cz { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.cz .cc { border-radius: 22px; padding: 22px; background: #fff; border: 1px solid var(--line); }
.cz .cc h4 { font-size: 21px; color: var(--ink); font-weight: 700; } .cz .cc h4 small { font-size: 13px; color: var(--mute); font-weight: 400; margin-left: 8px; }
.cz .cc .bv { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 12px; } .cz .cc .bv b { font-family: var(--serif); font-weight: 400; font-size: 42px; color: var(--acc); line-height: 1; white-space: nowrap; } .cz .cc .bv small { font-size: 12.5px; color: var(--mute); line-height: 1.6; }
.cz .cc ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .cz .cc li { font-size: 13.5px; color: var(--mute); line-height: 1.7; } .cz .cc li b { color: var(--ink); margin-right: 6px; }
.cz .cm { text-align: center; color: var(--acc); font-size: 13px; } .cz .cm i { display: block; font-style: normal; font-family: var(--serif); font-size: 30px; line-height: 1; }
.chl { border-radius: 18px; padding: 16px 22px; background: rgba(231, 236, 251, .6); border: 1px solid rgba(35, 80, 216, .18); font-size: 14.5px; color: var(--ink2); line-height: 1.85; margin-bottom: 14px; }
.chl b { color: var(--acc); }
.insight { margin-top: 18px; border-radius: 20px; padding: 22px 24px; background: radial-gradient(600px 220px at 100% 0%, rgba(35, 80, 216, .45), transparent 70%), var(--ink); color: #c3cadb; }
.insight .k { font-size: 12px; letter-spacing: .2em; color: #a9bdf7; } .insight h4 { color: #fff; font-size: 18px; font-weight: 600; margin: 6px 0 10px; line-height: 1.6; }
.insight p { font-size: 13.5px; line-height: 1.85; }
@media (max-width: 1000px) and (min-width: 901px) { .bigs { grid-template-columns: repeat(2, 1fr); } .bigs > div:nth-child(odd) { border-left: 0; } .bigs > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 900px) {
  .ctx-pos { flex-direction: column; } .ctx-pos .ar { transform: rotate(90deg); align-self: flex-start; margin-left: 20px; }
  .bns, .envs, .bts, .q3, .ba, .cz { grid-template-columns: 1fr; }
  .bigs { grid-template-columns: 1fr 1fr; } .bigs > div:nth-child(odd) { border-left: 0; } .bigs > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .bigs.dark > div:nth-child(n+3) { border-top-color: rgba(255, 255, 255, .1); }
  .fm { grid-template-columns: 1fr; } .fm .ax { grid-column: auto; flex-direction: column; gap: 2px; } .fm .ay { writing-mode: horizontal-tb; border-right: 0; border-bottom: 2px solid var(--acc2); justify-content: flex-start; padding: 6px 0; } .fm .r2 { grid-column: auto; }
  .cv { grid-template-columns: 1fr; } .cz .cm i { transform: rotate(90deg); }
  .sxh { display: block; }
}
@media (max-width: 560px) { .bigs { grid-template-columns: 1fr; } .bigs > div { border-left: 0 !important; } .bigs > div + div { border-top: 1px solid var(--line); } .bigs.dark > div + div { border-top-color: rgba(255, 255, 255, .1); } }
@media (prefers-reduced-motion: reduce) { .lp .spin { animation: none; } .viz-card.in .cv .pul { animation: none; } }
@media (max-width: 900px) { .cv .scrollx svg { min-width: 600px; } }

/* ===== 本人 11-05 00:24：事实卡版（B 版）项目页 + 两版切换 ===== */
.vsw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vsw .vsw-k { font-size: 11.5px; letter-spacing: .14em; color: var(--mute); padding: 0 10px 0 12px; }
.vsw > a, .vsw .vsw-a { font-size: 13.5px; font-weight: 500; color: var(--ink2); padding: 7px 16px; border-radius: 99px; transition: background .3s, color .3s; }
.vsw > a:hover { background: var(--accs); color: var(--acc); }
.vsw > a.on, .vsw .vsw-a.on { background: var(--ink); color: #fff; }
.vsw .vsw-a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px; }
.vsw .vsw-a b { font-weight: 500; } .vsw .vsw-a a { font-size: 12.5px; color: var(--acc); background: var(--accs); padding: 4px 10px; border-radius: 99px; transition: background .3s, color .3s; }
.vsw .vsw-a a:hover { background: var(--acc); color: #fff; }
.vsw-home { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -6px 0 26px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); }
.vsw-home .k { font-size: 12px; letter-spacing: .14em; color: var(--mute); margin-right: 6px; }
.vsw-home button { font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink2); padding: 7px 16px; border-radius: 99px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.vsw-home button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vsw-home small { flex-basis: 100%; font-size: 12.5px; color: var(--mute); line-height: 1.7; }
.pcard.vb .pc-go::after { content: "事实卡"; position: absolute; right: 0; top: -18px; font-size: 10px; letter-spacing: .1em; color: var(--acc); white-space: nowrap; }
.pcard .pc-go { position: relative; }
.bk-pos { margin-top: 34px; } .bk-pos span { font-size: 12px; letter-spacing: .2em; color: var(--acc); }
.bk-pos + .pj-lede { margin-top: 10px; }
.bk-cov { margin-top: 18px; font-size: 13.5px; color: var(--mute); }
.bk-core { font-size: 16px; color: var(--ink2); line-height: 1.9; max-width: 900px; margin-bottom: 16px; } .bk-core strong { color: var(--acc); }
.bk-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.bk-list li { position: relative; padding: 12px 16px 12px 40px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; color: var(--ink2); line-height: 1.75; counter-increment: bkl; }
.bk-list { counter-reset: bkl; } .bk-list li::before { content: counter(bkl); position: absolute; left: 14px; top: 12px; font-family: var(--serif); font-style: italic; color: var(--acc); }
.bk-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-quote { display: flex; flex-direction: column; gap: 4px; border-radius: 22px; padding: 22px 26px; margin-bottom: 14px;
  background: radial-gradient(600px 220px at 100% 0%, rgba(35, 80, 216, .45), transparent 70%), var(--ink); }
.bk-quote span { font-size: 12px; letter-spacing: .2em; color: #a9bdf7; } .bk-quote b { font-size: clamp(20px, 2.4vw, 28px); color: #fff; font-weight: 600; line-height: 1.5; }
.bk-road { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bk-rd { position: relative; border-radius: 18px; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--line); }
.bk-rd::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--acc2), var(--acc)); }
.bk-rd-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .bk-rd-h b { font-size: 16px; color: var(--ink); } .bk-rd-h span { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--acc); white-space: nowrap; }
.bk-rd .g { font-size: 14px; color: var(--ink2); margin: 8px 0 6px; line-height: 1.65; } .bk-rd .d { font-size: 13px; color: var(--mute); line-height: 1.7; }
.bk-rd em { display: inline-block; margin-top: 10px; font-style: normal; font-size: 12px; color: var(--sage-ink); background: rgba(169, 194, 174, .3); padding: 2px 10px; border-radius: 99px; }
.bk-dec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bk-dc { display: flex; flex-direction: column; gap: 8px; border-radius: 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); }
.bk-dc:hover { border-color: rgba(35, 80, 216, .28); box-shadow: 0 14px 32px rgba(18, 26, 43, .07); transition-delay: 0s; }
.bk-dc .q { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.5; } .bk-dc .q i { font-style: italic; font-family: var(--serif); color: var(--acc); font-weight: 400; margin-right: 8px; }
.bk-dc .ch { font-size: 13.5px; color: var(--ink); line-height: 1.65; padding: 8px 10px; border-radius: 10px; background: var(--accs); }
.bk-dc .ch.no { background: rgba(18, 26, 43, .04); color: var(--mute); text-decoration: line-through; text-decoration-color: rgba(107, 113, 128, .5); }
.bk-dc .ch span { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .08em; margin-right: 8px; text-decoration: none; } .bk-dc .ch .y { color: var(--acc); } .bk-dc .ch .n { color: var(--mute); }
.bk-dc .why, .bk-dc .res { font-size: 13px; color: var(--mute); line-height: 1.7; } .bk-dc b { display: block; font-size: 11.5px; color: var(--ink2); letter-spacing: .08em; font-weight: 600; }
.bk-dc .res { margin-top: auto; padding-top: 8px; border-top: 1px dashed rgba(18, 26, 43, .14); color: var(--acc); } .bk-dc .res b { color: var(--acc); }
.dg-h h3 .bk-st { display: inline-block; font-size: .56em; font-weight: 600; letter-spacing: .1em; color: #fff; background: var(--acc); padding: 3px 12px; border-radius: 99px; margin-right: 10px; vertical-align: .25em; }
.bk-when { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 15px; margin: -2px 0 12px; }
.bk-goal { font-size: 15px; color: var(--ink2); line-height: 1.85; max-width: 900px; margin-bottom: 18px; padding: 14px 18px; border-radius: 16px; background: rgba(231, 236, 251, .55); }
.bk-goal b { font-size: 12px; letter-spacing: .14em; color: var(--acc); margin-right: 10px; }
.bk-pp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bk-pp.one { grid-template-columns: 1fr; }
.bk-ph { border-radius: 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); }
.bk-ph h5 { font-size: 14px; color: var(--ink); font-weight: 600; margin-bottom: 8px; } .bk-ph.hard h5 { color: #a5493e; }
.bk-ph ul { list-style: none; display: flex; flex-direction: column; gap: 7px; } .bk-ph li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--mute); line-height: 1.75; }
.bk-ph li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc2); } .bk-ph.hard li::before { background: #e3a598; }
.bk-ph li strong { color: var(--ink); }
.bk-solve { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-sv { display: grid; grid-template-columns: 34px 1fr; gap: 12px; border-radius: 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); }
.bk-sv:hover { border-color: rgba(35, 80, 216, .28); box-shadow: 0 14px 32px rgba(18, 26, 43, .07); transition-delay: 0s; }
.bk-sv i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--serif); font-size: 14px; color: #fff; background: var(--acc); }
.bk-sv h5 { font-size: 15px; color: var(--ink); font-weight: 600; margin-bottom: 4px; line-height: 1.5; } .bk-sv p { font-size: 13.5px; color: var(--mute); line-height: 1.8; }
.bk-tl { margin-top: 4px; }
.bk-mine { margin-top: 16px; border-radius: 16px; padding: 14px 18px; background: var(--ink); } .bk-mine span { font-size: 12px; letter-spacing: .16em; color: #a9bdf7; }
.bk-mine p { font-size: 13.5px; color: #c3cadb; line-height: 1.8; margin-top: 4px; }
.bk-lk { margin-top: 14px; }
.bk-led td b { color: var(--acc); font-weight: 600; } .bk-led td:last-child { color: var(--mute); font-size: 12.5px; }
.bk-ms { list-style: none; position: relative; display: flex; flex-direction: column; gap: 0; padding-left: 22px; }
.bk-ms::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, var(--acc2), var(--acc)); }
.bk-ms li { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 9px 0; border-bottom: 1px dashed rgba(18, 26, 43, .1); }
.bk-ms li::before { content: ""; position: absolute; left: -20px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--acc); }
.bk-ms span { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 14px; } .bk-ms p { font-size: 14px; color: var(--ink2); line-height: 1.7; }
.bk-tags { display: flex; flex-wrap: wrap; gap: 8px; } .bk-tags span { font-size: 13px; color: var(--ink2); padding: 6px 14px; border-radius: 99px; background: var(--accs); }
.deep-in > ul { padding-left: 1.2em; }
@media (max-width: 1000px) { .bk-dec { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .bk-3, .bk-dec, .bk-pp, .bk-solve { grid-template-columns: 1fr; }
  .bk-ms li { grid-template-columns: 1fr; gap: 2px; }
  .vsw { border-radius: 18px; } .vsw .vsw-k { flex-basis: 100%; padding: 4px 10px 2px; }
}
@media (min-width: 901px) { .bigs[style*="--c:3"] > div:nth-child(3n+1) { border-left: 0; } .bigs[style*="--c:3"] > div:nth-child(n+4) { border-top: 1px solid var(--line); } }
.bigs.bkb .n { font-size: clamp(26px, 2.5vw, 38px); } .bigs.bkb .l:empty { display: none; } .bigs.bkb .l:empty + .n { margin-top: 0; }
/* 本人 11-05 01:11：关键取舍放进对应阶段 */
.bk-dec.two { grid-template-columns: 1fr 1fr; } .bk-dec.one { grid-template-columns: minmax(0, 720px); }
.bk-dc.key { border-color: rgba(35, 80, 216, .22); background: linear-gradient(180deg, #fff, rgba(231, 236, 251, .35)); }
.bk-dc.flash { box-shadow: 0 0 0 3px rgba(35, 80, 216, .35); transition: box-shadow .3s; }
.bk-dc { scroll-margin-top: 90px; }
.bk-dix { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.bk-dix a { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: baseline; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, background .3s, transform .3s var(--ease); }
.bk-dix a:hover { border-color: rgba(35, 80, 216, .35); background: var(--accs); transform: translateX(3px); }
.bk-dix i { font-style: italic; font-family: var(--serif); color: var(--acc); font-size: 13px; }
.bk-dix span { font-size: 13.5px; color: var(--ink); line-height: 1.55; } .bk-dix li.m span { color: var(--ink2); }
.bk-dix em { font-style: normal; font-size: 11.5px; color: var(--acc); background: var(--accs); padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.bk-dix li.m em { color: var(--mute); background: rgba(18, 26, 43, .05); }
.bk-hero .mx-t .v { font-size: clamp(26px, 2.6vw, 38px); white-space: nowrap; }
@media (max-width: 900px) { .bk-dec.two, .bk-dix { grid-template-columns: 1fr; } }
.vsw .vsw-a b, .vsw > a { white-space: nowrap; }
@media (max-width: 900px) { .vsw .vsw-a { flex-wrap: wrap; border-radius: 14px; padding: 6px 8px 6px 12px; } .vsw .vsw-a b { flex-basis: 100%; } }

/* ===== 本人 11-05 02:31：事实卡版的图（嵌入图解 + 现画图表） ===== */
.bk-fig { margin: 18px 0 6px; }
.bk-fig > .viz-card.bk-in { padding: 0; border: 0; background: none; border-radius: 0; overflow: visible; box-shadow: none; }
.bk-fig > .viz-card.bk-in::before, .bk-fig > .viz-card.bk-in::after { display: none; }
.bk-fcap { margin-top: 30px; }
.bk-tabs { margin-top: 4px; border-radius: 24px; border: 1px solid rgba(35, 80, 216, .16); background: linear-gradient(180deg, rgba(231, 236, 251, .45), rgba(255, 255, 255, .6)); padding: 10px 18px 18px; }
.bk-tbar { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.bk-tbar::-webkit-scrollbar { display: none; }
.bk-tbar button { flex: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink2); padding: 8px 14px; border-radius: 99px; border: 1px solid transparent; background: transparent; cursor: pointer; white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.bk-tbar button i { font-style: italic; font-family: var(--serif); color: var(--acc); margin-right: 6px; font-size: 12.5px; }
.bk-tbar button:hover { background: #fff; border-color: var(--line); }
.bk-tbar button.on { background: var(--ink); color: #fff; } .bk-tbar button.on i { color: #a9bdf7; }
.bk-pane { display: none; } .bk-pane.on { display: block; animation: deepin .45s var(--ease); }
.bk-pane > .bk-fig { margin-top: 10px; }
/* 甘特图 */
.gt { margin-top: 2px; } .gt-in { min-width: 660px; display: flex; flex-direction: column; gap: 8px; }
.gt-h, .gt-r { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: center; }
.gt-l b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; line-height: 1.4; } .gt-l small { display: block; font-size: 12px; color: var(--mute); line-height: 1.55; margin-top: 2px; }
.gt-t { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); min-height: 46px; border-radius: 12px;
  background: repeating-linear-gradient(90deg, rgba(18, 26, 43, .045) 0 1px, transparent 1px calc(100% / var(--n))); }
.gt-ax { min-height: 0; background: none; } .gt-ax span { font-size: 11.5px; color: var(--mute); text-align: left; padding-left: 4px; border-left: 1px solid var(--line); line-height: 1.35; }
.gt-ax span b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--acc); font-size: 13px; min-height: 1.2em; }
.gt-b { position: absolute; top: 7px; bottom: 7px; left: calc(var(--s) / var(--n) * 100% + 3px); width: calc((var(--e) - var(--s)) / var(--n) * 100% - 6px);
  border-radius: 10px; background: linear-gradient(90deg, var(--acc2), #b9c9f7); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--k) * 180ms + .3s);
  display: flex; align-items: center; overflow: hidden; }
.gt-b.main { background: linear-gradient(90deg, #1b3fb8, var(--acc)); box-shadow: 0 8px 22px rgba(35, 80, 216, .28); }
.gt-b span { font-size: 12.5px; font-weight: 500; color: var(--ink); padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .6s; transition-delay: calc(var(--k) * 180ms + 1s); }
.gt-b.main span { color: #fff; }
.viz-card.in .gt-b { transform: none; } .viz-card.in .gt-b span { opacity: 1; }
.gt-t em { position: absolute; top: -9px; left: calc(var(--e) / var(--n) * 100% - 6px); transform: translateX(-100%); font-style: normal; font-size: 10.5px; color: var(--sage-ink); background: #eef4ef; border: 1px solid rgba(84, 112, 91, .2); padding: 0 7px; border-radius: 99px; white-space: nowrap; z-index: 1; }
/* 前后对比条 */
.bfa { margin-top: 6px; border-radius: 22px; padding: 18px 20px 12px; background: #fff; border: 1px solid var(--line); }
.bfa-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.bfa-lg b { order: -1; flex-basis: 100%; font-size: 15px; color: var(--ink); font-weight: 600; }
.bfa-lg span { font-size: 12px; color: var(--mute); display: inline-flex; align-items: center; gap: 6px; } .bfa-lg span::before { content: ""; width: 14px; height: 8px; border-radius: 4px; background: #d5d9e2; }
.bfa-lg span.now::before, .bfa-lg span.s0::before { background: var(--acc); } .bfa-lg span.s1::before { background: var(--acc2); }
.bfa-r { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px dashed rgba(18, 26, 43, .09); }
.bfa-m b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.45; } .bfa-m em { font-style: normal; font-family: var(--serif); font-size: 22px; color: var(--acc); }
.bfa-bars { display: flex; flex-direction: column; gap: 6px; }
.bfa-b { position: relative; display: flex; align-items: center; gap: 10px; height: 18px; }
.bfa-b i { display: block; height: 100%; width: calc(var(--w) * 1% * .8); border-radius: 6px; background: #d5d9e2; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--k) * 120ms + .3s); }
.bfa-b.now i { background: linear-gradient(90deg, var(--acc), #4b6fe0); transition-delay: calc(var(--k) * 120ms + .7s); }
.bfa-b span { font-size: 12.5px; color: var(--mute); white-space: nowrap; } .bfa-b.now span { color: var(--acc); font-weight: 600; }
.viz-card.in .bfa-b i { transform: none; }
/* 趋势折线 */
.trd { border-radius: 22px; padding: 18px 20px 8px; background: #fff; border: 1px solid var(--line); margin-top: 6px; }
.trd-t { font-size: 15px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.trd svg { width: 100%; min-width: 560px; height: auto; display: block; }
.trd svg text { font-family: var(--sans); font-size: 13px; fill: var(--mute); } .trd svg .vl { fill: var(--acc); font-weight: 600; font-size: 14px; }
.trd svg .gd { stroke: rgba(18, 26, 43, .07); } .trd svg .ln { fill: none; stroke: var(--acc); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.trd svg .dt { fill: #fff; stroke: var(--acc); stroke-width: 2.4; } .trd svg .tg { stroke: var(--sage-ink); stroke-width: 1.4; stroke-dasharray: 6 5; } .trd svg .tgt { fill: var(--sage-ink); font-size: 12px; }
/* 分组提升条 */
.lf { border-radius: 22px; padding: 18px 20px 12px; background: #fff; border: 1px solid var(--line); margin-top: 6px; }
.lf-r { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; padding: 9px 0; border-top: 1px dashed rgba(18, 26, 43, .09); }
.lf-r > b { font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.45; }
.lf-bs { display: flex; flex-direction: column; gap: 6px; }
.lf-b { display: flex; align-items: center; gap: 10px; height: 18px; }
.lf-b i { display: block; height: 100%; width: calc(var(--w) * 1% * .82); min-width: 3px; border-radius: 6px; background: linear-gradient(90deg, var(--acc), #4b6fe0); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--k) * 120ms + .3s); }
.lf-b.s1 i { background: var(--acc2); transition-delay: calc(var(--k) * 120ms + .6s); }
.lf-b span { font-size: 12.5px; color: var(--acc); font-weight: 600; white-space: nowrap; } .lf-b.s1 span { color: #5a72c4; }
.viz-card.in .lf-b i { transform: none; }
.static .gt-b, .static .bfa-b i, .static .lf-b i { transform: none !important; transition: none !important; } .static .gt-b span { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { .gt-b, .bfa-b i, .lf-b i { transform: none !important; } .gt-b span { opacity: 1 !important; } }
@media (max-width: 900px) {
  .bk-tabs { padding: 8px 12px 14px; border-radius: 18px; }
  .bfa-r, .lf-r { grid-template-columns: 1fr; gap: 6px; } .bfa-m { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .gt-h, .gt-r { grid-template-columns: 150px 1fr; }
}
.bk-flow .fn { padding: 18px 14px; min-height: 110px; } .bk-flow .fn b { font-size: 15px; } .bk-flow .fn small { font-size: 12px; }
@media (max-width: 900px) { .flow.bk-flow { grid-template-columns: 1fr !important; } }

/* ===== 本人 11-05 14:20：事实卡版 slide deck ===== */
section.dg.sld, section.dg.sl-open { padding-top: 44px; }
.sld .viz-card { padding: clamp(28px, 4vw, 58px); }
.sl-k { font-size: 12px; letter-spacing: .22em; color: var(--acc); margin-bottom: 8px; }
.sld .dg-h h3 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.38; letter-spacing: -.005em; }
.sl-lead { font-size: clamp(16px, 1.45vw, 19px); font-weight: 600; color: var(--ink); line-height: 1.75; max-width: 980px; margin: 4px 0 22px; }
.sl-lead strong { color: var(--acc); }
.sl-p { font-size: 15px; color: var(--ink2); line-height: 1.85; max-width: 900px; margin: 10px 0; }
.sl-fine { font-size: 12.5px; color: var(--mute); line-height: 1.8; margin-top: 14px; max-width: 980px; }
.sld > .wrap > .viz-card > * + .bk-fig, .sld .bk-fig + .bk-fig { margin-top: 22px; }
/* 章节页 */
.sl-open .viz-card { background: radial-gradient(900px 340px at 100% 0%, rgba(35, 80, 216, .5), transparent 70%), radial-gradient(600px 300px at 0% 100%, rgba(35, 80, 216, .22), transparent 70%), var(--ink); border-color: var(--ink); padding: clamp(36px, 5vw, 70px); }
.sl-open .dg-h .k { color: #a9bdf7; font-size: 22px; } .sl-open .dg-h h3 { color: #fff; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.3; }
.sl-ok { display: block; font-size: 13px; font-weight: 500; letter-spacing: .24em; color: #a9bdf7; margin-bottom: 10px; }
.sl-olead { font-size: clamp(15px, 1.4vw, 18px); color: #c3cadb; line-height: 1.85; max-width: 900px; margin-top: 8px; }
.sl-open .bk-fig { margin-top: 26px; }
.sl-open .pk-c, .sl-open .pk-common { background: rgba(255, 255, 255, .96); }
/* 栏与要点卡 */
.sl-cols { display: grid; grid-template-columns: var(--tpl); gap: 18px; align-items: start; }
.sl-col > * + * { margin-top: 14px; }
.sl-pts { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 12px; }
.sl-pt { position: relative; border-radius: 18px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); }
.sl-pt:hover, .sl-pt.act { border-color: rgba(35, 80, 216, .28); box-shadow: 0 14px 32px rgba(18, 26, 43, .07); transition-delay: 0s; }
.sl-pt .n { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 14px; }
.sl-pt h5 { font-size: 16px; color: var(--ink); font-weight: 600; line-height: 1.55; margin: 2px 0 6px; } .sl-pt h5 strong { color: var(--acc); }
.sl-pt p { font-size: 14px; color: var(--ink2); line-height: 1.8; } .sl-pt small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--mute); line-height: 1.75; }
.sl-list { border-radius: 18px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); }
.sl-list h5 { font-size: 15px; color: var(--ink); font-weight: 600; margin-bottom: 10px; }
.sl-list ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .sl-list li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--mute); line-height: 1.75; }
.sl-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc2); } .sl-list li strong { color: var(--ink); }
.sl-verdict { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 18px; padding: 18px; background: var(--ink); text-align: center; }
.sl-verdict span { font-size: 12px; letter-spacing: .14em; color: #a9bdf7; } .sl-verdict b { font-size: 22px; color: #fff; } .sl-verdict em { font-style: normal; font-family: var(--serif); font-size: 20px; color: #ffcf9e; }
/* 想一想 */
.tq { margin: 22px 0 6px; border-radius: 20px; border: 1px dashed rgba(35, 80, 216, .45); background: linear-gradient(135deg, rgba(231, 236, 251, .7), rgba(255, 255, 255, .7)); }
.tq > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px 14px; align-items: center; padding: 16px 20px; }
.tq > summary::-webkit-details-marker { display: none; }
.tq-k { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: #fff; background: var(--acc); padding: 4px 11px; border-radius: 99px; white-space: nowrap; }
.tq summary b { font-size: 16px; color: var(--ink); font-weight: 600; line-height: 1.55; } .tq summary em { font-style: normal; font-size: 12.5px; color: var(--acc); white-space: nowrap; }
.tq summary i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(35, 80, 216, .3); color: var(--acc); transition: transform .4s var(--ease); }
.tq[open] summary i { transform: rotate(45deg); } .tq[open] summary em { visibility: hidden; }
.tq-a { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px 18px; animation: deepin .45s var(--ease); }
.tq-c { border-radius: 14px; padding: 12px 14px; background: #fff; border: 1px solid rgba(35, 80, 216, .25); } .tq-c.no { background: rgba(18, 26, 43, .03); border-color: var(--line); }
.tq-c span { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; color: var(--mute); } .tq-c span.y { color: var(--acc); }
.tq-c p { font-size: 14px; color: var(--ink); line-height: 1.7; margin-top: 2px; } .tq-c.no p { color: var(--mute); text-decoration: line-through; text-decoration-color: rgba(107, 113, 128, .45); }
.tq-w, .tq-r { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.8; color: var(--ink2); } .tq-w b, .tq-r b { font-size: 11.5px; letter-spacing: .12em; color: var(--mute); margin-right: 8px; }
.tq-r { padding: 10px 14px; border-radius: 12px; background: var(--ink); color: #dfe5f3; } .tq-r b { color: #a9bdf7; }
.tq-w p, .tq-r p { display: inline; }
/* 四段式 */
.sl-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 18px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.sl-f4 { padding: 16px 18px 18px; border-left: 1px solid var(--line); } .sl-f4:first-child { border-left: 0; }
.sl-f4 h5 { font-size: 13px; letter-spacing: .1em; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.sl-f4 h5 i { font-style: italic; font-family: var(--serif); font-size: 14px; }
.sl-f4.f0 h5 { color: var(--acc); } .sl-f4.f1 h5 { color: #a5493e; } .sl-f4.f2 h5 { color: var(--sage-ink); } .sl-f4.f3 { background: var(--ink); } .sl-f4.f3 h5 { color: #a9bdf7; }
.sl-f4 ul { list-style: none; display: flex; flex-direction: column; gap: 7px; } .sl-f4 li { font-size: 13.5px; color: var(--ink2); line-height: 1.7; }
.sl-f4.f3 li { color: #dfe5f3; } .sl-f4.f3 li strong { color: #fff; }
/* 链路 */
.sl-chain { margin-top: 8px; }
.sl-ch { display: grid; grid-template-columns: 54px repeat(var(--n), minmax(150px, 1fr)); gap: 8px 10px; min-width: 980px; }
.ch-lab { font-size: 12px; letter-spacing: .14em; color: var(--mute); display: flex; align-items: center; writing-mode: vertical-rl; justify-content: center; }
.ch-n { position: relative; border-radius: 16px; padding: 12px 14px; background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 4px; }
.ch-n:not(:last-of-type)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--acc); font-size: 16px; z-index: 1; }
.ch-n i { font-style: italic; font-family: var(--serif); font-size: 13px; color: #a9bdf7; } .ch-n b { font-size: 15px; }
.ch-n em { align-self: flex-start; font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 99px; }
.ch-c { border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.65; }
.ch-c.p { background: #fbf1ef; color: #6e3b33; } .ch-c.s { background: var(--accs); color: var(--ink2); } .ch-c.r { background: #fff; border: 1px solid rgba(35, 80, 216, .2); color: var(--ink2); } .ch-c strong { color: var(--acc); }
.ch-go { text-align: center; } .ch-go a { font-size: 12.5px; color: var(--acc); border-bottom: 1px solid rgba(35, 80, 216, .3); }
.cat-d { background: #ffe1c7; color: #8a4a12; } .cat-i { background: #dfe7ff; color: #2350d8; } .cat-q { background: #fbdcd6; color: #a5493e; } .cat-e { background: #e2d9fb; color: #5b3fb8; } .cat-u { background: #d8eedd; color: #3f6b4a; }
.ch-lg { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--mute); margin-top: 10px; }
.ch-lg span { padding: 1px 9px; border-radius: 99px; font-size: 11.5px; }
/* 挑战 → 解法 */
.sl-pairs { display: flex; flex-direction: column; gap: 8px; }
.sl-pr { display: grid; grid-template-columns: 1fr 30px 1fr 220px; gap: 12px; align-items: stretch; }
.sl-pr.hd { font-size: 12px; letter-spacing: .14em; color: var(--mute); } .sl-pr.hd > div { padding: 0 4px; }
.sl-pr .a, .sl-pr .b, .sl-pr .m { border-radius: 16px; padding: 14px 16px; }
.sl-pr .a { background: #fbf1ef; } .sl-pr .a b { color: #a5493e; } .sl-pr .b { background: #eef4ef; } .sl-pr .b b { color: var(--sage-ink); }
.sl-pr b { display: block; font-size: 15.5px; line-height: 1.5; } .sl-pr small { display: block; font-size: 12.5px; color: var(--mute); line-height: 1.7; margin-top: 4px; }
.sl-pr .ar { align-self: center; text-align: center; color: var(--acc2); font-size: 20px; }
.sl-pr .m { background: var(--ink); color: #dfe5f3; font-size: 13.5px; line-height: 1.6; display: flex; align-items: center; } .sl-pr .m strong { color: #fff; font-size: 18px; margin: 0 4px; }
.sl-pr.hd .m { background: none; color: var(--mute); padding: 0 4px; }
/* 三阶段圆 */
.sl-road { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: start; gap: 6px; margin: 8px 0 18px; }
.rd-ar { align-self: center; text-align: center; color: var(--acc); font-size: 24px; margin-top: -60px; }
.rd-c { text-align: center; } .rd-c .o { width: 170px; height: 170px; margin: 0 auto 14px; border-radius: 50%; border: 1px dashed var(--acc2); display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 30%, #fff, rgba(231, 236, 251, .6)); }
.rd-c .o i { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 22px; } .rd-c .o b { font-size: 20px; color: var(--ink); } .rd-c .o small { font-size: 12px; color: var(--mute); margin-top: 4px; }
.rd-c .g { font-size: 14.5px; color: var(--acc); font-weight: 600; line-height: 1.6; } .rd-c .m { font-size: 13px; color: var(--mute); margin-top: 6px; } .rd-c .m span { font-size: 11px; letter-spacing: .14em; margin-right: 6px; color: var(--ink2); }
/* 2×2 矩阵 */
.sl-mx2 { display: grid; grid-template-columns: 68px 1fr 1fr; gap: 6px; }
.sl-mx2 .h { font-size: 12.5px; color: var(--mute); text-align: center; align-self: end; padding-bottom: 2px; } .sl-mx2 .h.v { align-self: center; text-align: right; padding-right: 6px; }
.sl-mx2 .c { border-radius: 14px; padding: 14px; min-height: 76px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.sl-mx2 .c b { font-family: var(--serif); font-size: 24px; color: var(--ink2); } .sl-mx2 .c small { font-size: 12px; color: var(--mute); }
.sl-mx2 .c.p0 { background: var(--acc); border-color: var(--acc); } .sl-mx2 .c.p0 b, .sl-mx2 .c.p0 small { color: #fff; }
.sl-mx2 .c.p1, .sl-mx2 .c.p2 { background: var(--accs); }
/* 全量 vs 增量 */
.sl-vs2 { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 10px; align-items: center; }
.sl-vs2 > div { border-radius: 20px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); }
.sl-vs2 h5 { font-size: 16px; color: var(--ink); font-weight: 600; } .sl-vs2 p { font-size: 13px; color: var(--mute); line-height: 1.7; margin: 4px 0 12px; }
.sl-vs2 .t { display: block; margin-top: 12px; font-family: var(--serif); font-size: 30px; color: #a5493e; font-weight: 400; } .sl-vs2 .vs-b .t { color: var(--acc); }
.sl-vs2 .vs-b { border-color: rgba(35, 80, 216, .3); } .vs-ar { text-align: center; color: var(--acc); font-size: 24px; }
.sq-g { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 3px; }
.sq-g i { aspect-ratio: 1; border-radius: 3px; background: #e6e8ee; transition: background .5s; transition-delay: calc(var(--k, 0) * 4ms); }
.viz-card.in .vs-a .sq-g i.on { background: #e3a598; } .viz-card.in .vs-b .sq-g i.on { background: var(--acc); }
.static .vs-a .sq-g i.on { background: #e3a598; } .static .vs-b .sq-g i.on { background: var(--acc); }
/* 三段质量体系 */
.sl-q3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sl-q3 .q { border-radius: 18px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); } .sl-q3 .q.hot { background: var(--ink); border-color: var(--ink); }
.sl-q3 span { font-size: 12px; letter-spacing: .14em; color: var(--acc); } .sl-q3 .hot span { color: #a9bdf7; }
.sl-q3 h5 { font-size: 16px; color: var(--ink); font-weight: 600; margin: 4px 0 6px; } .sl-q3 .hot h5 { color: #fff; }
.sl-q3 p { font-size: 13.5px; color: var(--mute); line-height: 1.75; } .sl-q3 .hot p { color: #c3cadb; }
/* 优选范式 */
.pk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pk-c { display: flex; flex-direction: column; gap: 6px; border-radius: 18px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.pk-c:hover { border-color: rgba(35, 80, 216, .4); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18, 26, 43, .1); }
.pk-c span { font-size: 11.5px; letter-spacing: .12em; color: var(--mute); } .pk-c h5 { font-size: 16px; color: var(--ink); font-weight: 600; } .pk-c p { font-size: 13.5px; color: var(--mute); line-height: 1.7; flex: 1; }
.pk-c b { font-size: 14px; color: var(--acc); }
.pk-common { margin-top: 12px; display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; border-radius: 18px; padding: 14px 18px; background: rgba(255, 255, 255, .9); border: 1px solid rgba(35, 80, 216, .2); }
.pk-common > span { font-size: 12px; letter-spacing: .14em; color: var(--acc); font-weight: 600; } .pk-common div { font-size: 13px; color: var(--mute); line-height: 1.65; } .pk-common b { display: block; color: var(--ink); font-size: 14px; }
.pk-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; border-radius: 18px; padding: 18px; background: var(--ink); margin-bottom: 14px; }
.pk-f span { font-size: 15px; color: #a9bdf7; } .pk-f span.a { color: #fff; font-weight: 600; font-size: 18px; padding: 6px 14px; border-radius: 12px; background: rgba(35, 80, 216, .45); } .pk-f b { color: #a9bdf7; font-size: 22px; font-family: var(--serif); }
/* 多对多 */
.mm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: center; border-radius: 22px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); }
.mm-g svg { width: 100%; height: auto; display: block; } .mm-g text { font-family: var(--sans); font-size: 13px; fill: var(--ink); } .mm-g text.w { fill: #fff; font-weight: 600; font-size: 12px; }
.mm-g .ad { fill: #fff; stroke: #c9d0dd; } .mm-g .mt { fill: var(--acc2); } .mm-g .mt.ai { fill: var(--acc); } .mm-g .ln path { fill: none; stroke: rgba(35, 80, 216, .45); stroke-width: 1.4; }
.mm-c { font-size: 12.5px; color: var(--mute); text-align: center; margin-top: 6px; }
.mm-t h5 { font-size: 17px; color: var(--ink); font-weight: 600; line-height: 1.55; margin-bottom: 12px; }
.mm-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mm-n div { border-radius: 14px; padding: 12px; background: #fbf1ef; } .mm-n b { display: block; font-family: var(--serif); font-size: 30px; color: #a5493e; font-weight: 400; line-height: 1.1; } .mm-n span { font-size: 12px; color: #6e3b33; line-height: 1.5; }
.mm-t p { font-size: 13.5px; color: var(--ink2); line-height: 1.8; }
@media (max-width: 900px) {
  .sl-cols, .sl-vs2, .mm { grid-template-columns: 1fr !important; } .vs-ar { transform: rotate(90deg); }
  .sl-pts, .sl-q3, .pk, .mm-n { grid-template-columns: 1fr; } .pk-common { grid-template-columns: 1fr; }
  .sl-four { grid-template-columns: 1fr; } .sl-f4 { border-left: 0; border-top: 1px solid var(--line); } .sl-f4:first-child { border-top: 0; }
  .sl-pr { grid-template-columns: 1fr; } .sl-pr .ar { transform: rotate(90deg); } .sl-pr.hd { display: none; }
  .sl-road { grid-template-columns: 1fr; } .rd-ar { transform: rotate(90deg); margin: 0; }
  .tq > summary { grid-template-columns: 1fr auto; } .tq-k { grid-column: 1 / -1; justify-self: start; } .tq summary em { display: none; } .tq-a { grid-template-columns: 1fr; }
}