/* 案例页：叠在 home.css 上，沿用纸色、宋体标题、钢蓝 = AI、炉火橙 = 人。
   节奏：纸色封面 + 整幅照片（滚动时展开）→ 难点 → 深色运营图（每个案例一张专属主画面，进入视野时按顺序演一遍）
   → 泳道流程 → 米色关键一刻 → 分工与授权 → 行业方案 → 整幅照片的下一个案例。
   页面由 build-cases.py 生成，改内容改那里。 */

.case .top { color: var(--ink); background: hsl(40 8% 98% / .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.case .top::before { display: none; }
.case .top.scrolled { box-shadow: 0 .5px 0 var(--hair); }
.case .top .crumb { font-size: 13.5px; color: var(--ink-60); padding-left: 16px; border-left: .5px solid var(--hair); letter-spacing: .04em; }
.case .menu { margin-left: auto; }
.case .menu a { opacity: .66; }
.case .menu a:hover, .case .menu a.on { opacity: 1; background: hsl(0 0% 0% / .05); }
.case .top .act { margin-left: 4px; }

.tag { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--stone); letter-spacing: .05em; }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--steel); }

/* 章节头：章节名 + 一句标题 */
.c-wrap { max-width: 1240px; margin: 0 auto; }
.c-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); align-items: baseline; margin-bottom: clamp(36px, 4.4vw, 64px); }
.c-label { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-60); letter-spacing: .1em; }
.c-label::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.c-head h2 { font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); line-height: 1.32; letter-spacing: .01em; }

/* 封面：标题逐行从遮罩里升起 */
.c-hero { padding: calc(132px + env(safe-area-inset-top, 0px)) var(--x) 0; }
.c-hero .c-wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 72px); align-items: end; }
.c-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-60); }
.c-back::before { content: ""; width: 7px; height: 7px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.c-back:hover { color: var(--ink); }
.c-hero .tag { display: flex; margin-top: 40px; }
.c-kicker { display: block; margin-top: 22px; font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: var(--ink-60); letter-spacing: .08em; }
.c-hero h1 { margin-top: 8px; font-family: var(--serif); font-size: clamp(40px, 6vw, 88px); line-height: 1.16; letter-spacing: .02em; }
.c-hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.c-hero h1 .ln > span { display: block; }
.c-lead { font-size: clamp(15.5px, 1.25vw, 17px); color: var(--ink-60); max-width: 26em; padding-bottom: 10px; }
.armed .c-hero h1 .ln > span { transform: translateY(105%); }
.armed .c-hero .tag, .armed .c-kicker, .armed .c-lead { opacity: 0; transform: translateY(8px); }
.shown .c-hero h1 .ln > span { transform: none; transition: transform 1.1s var(--ease) calc(.2s + var(--i, 0) * .12s); }
.shown .c-hero .tag, .shown .c-kicker, .shown .c-lead { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.shown .c-kicker { transition-delay: .1s; }
.shown .c-lead { transition-delay: .55s; }

/* 整幅照片：滚动时从圆角小窗展开到满幅（--p 由 case.js 按滚动位置算） */
.c-photo { --p: 1; position: relative; margin: clamp(48px, 6vw, 88px) 0 0; height: clamp(420px, 76vh, 860px); overflow: hidden; background: #DCDAD6;
  clip-path: inset(calc((1 - var(--p)) * 5%) calc((1 - var(--p)) * (var(--x) + 4%)) round calc((1 - var(--p)) * 28px)); }
.c-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--p) * .12)); }

/* 难点 */
.c-sec { padding: clamp(96px, 11vw, 160px) var(--x) 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--ink); }
.fact { padding: 26px 28px 0 0; }
.fact + .fact { padding-left: 28px; border-left: .5px solid var(--hair); }
.fact b { display: block; font-family: var(--serif); font-size: clamp(40px, 4.6vw, 68px); font-weight: 700; line-height: 1; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact b small { font-size: .34em; font-weight: 600; margin-left: 6px; color: var(--ink-60); letter-spacing: .04em; }
.fact span { display: block; margin-top: 14px; font-size: 14.5px; color: var(--ink-60); }
.pains { list-style: none; margin: clamp(40px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; }
.pains li { padding: 16px 0 0; border-top: .5px solid var(--hair); font-size: 16px; color: var(--stone); }
.pains-end { margin-top: 28px; font-family: var(--serif); font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; }
.c-pain .c-body, .c-roles .c-body, .c-trade .c-body { margin-left: calc(25% + clamp(6px, 1vw, 16px)); }

/* 运营图：深色段，专属主画面 */
.c-map { margin-top: clamp(96px, 11vw, 160px); padding: clamp(80px, 9vw, 128px) var(--x) clamp(64px, 7vw, 96px); background: radial-gradient(70% 60% at 50% 40%, hsl(212 50% 18% / .55), transparent 70%), var(--night); color: #fff; }
.c-map .c-label { color: hsl(0 0% 100% / .5); }
.c-map .c-head h2 { color: #fff; }
.viz-box { position: relative; }
.viz-scroll { overflow-x: auto; scrollbar-width: none; }
.viz-scroll::-webkit-scrollbar { display: none; }
.viz { display: block; width: 100%; min-width: 760px; height: auto; overflow: visible; font-family: var(--sans); }
.viz-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: .5px solid hsl(0 0% 100% / .12); }
.viz-cap { font-size: 14px; color: hsl(0 0% 100% / .6); max-width: 60em; }
.viz-acts { display: inline-flex; align-items: center; gap: 14px; }
.viz-hint { display: none; font-size: 12.5px; color: hsl(0 0% 100% / .5); }
.replay { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: hsl(0 0% 100% / .08); color: hsl(0 0% 100% / .8); font: inherit; font-size: 12.5px; cursor: pointer; box-shadow: inset 0 0 0 .5px hsl(0 0% 100% / .2); }
.replay:hover { background: hsl(0 0% 100% / .14); }
.replay::before { content: ""; width: 9px; height: 9px; border: 1.2px solid currentColor; border-right-color: transparent; border-radius: 50%; }

/* 主画面里的图形 */
.viz text { fill: hsl(0 0% 100% / .62); font-size: 13px; letter-spacing: .02em; }
.viz .t-hi { fill: #fff; }
.viz .t-dim { fill: hsl(0 0% 100% / .42); font-size: 12px; }
.viz .t-ai { fill: hsl(210 80% 74%); }
.viz .t-hu { fill: hsl(26 100% 66%); }
.viz .t-ink { fill: var(--ink); }
.viz .t-ink2 { fill: hsl(0 0% 7% / .55); }
.viz .t-steel { fill: var(--steel); }
.viz .mono { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.viz .serif { font-family: var(--serif); font-weight: 700; }
.viz .ln { stroke: hsl(0 0% 100% / .16); stroke-width: 1; fill: none; }
.viz .ln-ai { stroke: var(--steel-hi); stroke-width: 1.8; fill: none; }
.viz .ln-hu { stroke: var(--ember); stroke-width: 1.4; fill: none; }
.viz .ln-stop { stroke: hsl(0 0% 100% / .85); stroke-width: 1.4; fill: none; }
.viz .ln-ring { stroke: var(--steel-hi); stroke-width: 1.4; fill: none; opacity: .6; }
.viz .blk { fill: hsl(0 0% 100% / .13); }
.viz .blk-ai { fill: var(--steel-hi); }
.viz .trk { fill: hsl(0 0% 100% / .035); }
.viz .box { fill: hsl(0 0% 100% / .03); stroke: hsl(0 0% 100% / .2); stroke-width: 1; }
.viz .dot { fill: var(--night); stroke: hsl(0 0% 100% / .45); stroke-width: 1.2; }
.viz .dot-ai { fill: var(--steel-hi); }
.viz .halo { fill: var(--steel-glow); opacity: .45; }
.viz .dia { fill: var(--ember); }
.viz .chip-hu { fill: var(--paper); stroke: hsl(22 92% 52% / .7); stroke-width: 1; }
.viz .chip-ai { fill: hsl(210 70% 56% / .14); stroke: hsl(210 70% 56% / .6); stroke-width: 1; }
.viz .paper { fill: #FBFAF8; }
.viz .rule-ink { stroke: hsl(0 0% 7% / .12); stroke-width: 1; }
.viz .soft-ai { fill: var(--steel-soft); }

/* 主画面的动作：armed = 等着演；play = 开演。没有 JS 或减少动效时直接是最终画面 */
.viz .grow { transform-box: fill-box; transform-origin: left center; }
.viz .pop, .viz .pulse { transform-box: fill-box; transform-origin: center; }
.viz-box.armed .s, .viz-box.armed .pop, .viz-box.armed .pulse { opacity: 0; }
.viz-box.armed .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.viz-box.armed .grow { transform: scaleX(0); }
.viz-box.play .s { animation: vIn .7s var(--ease) var(--d, 0s) both; }
.viz-box.play .draw { animation: vDraw 1.2s var(--ease) var(--d, 0s) both; }
.viz-box.play .grow { animation: vGrow .8s var(--ease) var(--d, 0s) both; }
.viz-box.play .pop { animation: vPop .6s var(--ease) var(--d, 0s) both; }
.viz-box.play .fade { animation: vFade .6s ease var(--d, 0s) both; }
.viz-box.play .pulse { animation: vPulse 1.8s ease-out var(--d, 0s) 3 both; }
@keyframes vIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes vDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes vFade { from { opacity: 1; } to { opacity: .22; } }
@keyframes vPulse { 0% { opacity: 0; transform: scale(.6); } 8% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(2.6); } }

/* 流程：泳道。横向是步骤，上一道 AI，下一道人 */
.lanes { position: relative; display: grid; grid-auto-flow: column; grid-template-rows: auto auto auto; grid-template-columns: 56px repeat(var(--n), minmax(0, 1fr)); gap: 10px 10px; }
.lanes::before { content: ""; position: absolute; left: 56px; right: 0; top: 13px; height: 1px; background: var(--ink); opacity: .7; transform-origin: left; }
.ln-l { display: flex; align-items: center; gap: 8px; padding-top: 14px; font-size: 13px; color: var(--ink-60); letter-spacing: .06em; align-self: start; }
.ln-l:first-child { padding: 0; }
.ln-h { position: relative; padding: 38px 4px 10px 0; }
.ln-h em { position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--ink); font-family: var(--serif); font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ln-h b { display: block; font-family: var(--serif); font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; line-height: 1.4; }
.ln-c { border-radius: 12px; padding: 14px 14px 16px; font-size: 14px; line-height: 1.65; }
.ln-c.ai { background: var(--steel-soft); color: var(--ink); }
.ln-c.hu { background: hsl(40 10% 95%); color: var(--stone); }
.ln-c.none { background: transparent; box-shadow: inset 0 0 0 .5px var(--hair); color: var(--mute); }
.ln-c .mk { display: block; margin-bottom: 10px; }
.flow-note { margin-top: 22px; font-size: 13.5px; color: var(--ink-60); }
.mk { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
.mk.hu { border-radius: 1px; transform: rotate(45deg); background: var(--ember); }
.mk.sys { border-radius: 1px; background: transparent; box-shadow: inset 0 0 0 1.2px var(--stone); }
.mk.in { background: var(--mute); }
.mk.ok { background: var(--ink); }
.lanes.armed::before { transform: scaleX(0); }
.lanes.armed .ln-h, .lanes.armed .ln-c { opacity: 0; transform: translateY(10px); }
.lanes.shown::before { transform: none; transition: transform 1.4s var(--ease); }
.lanes.shown .ln-h, .lanes.shown .ln-c { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(.2s + var(--i) * .14s); }
.lanes.shown .ln-c.ai { transition-delay: calc(.32s + var(--i) * .14s); }
.lanes.shown .ln-c.hu, .lanes.shown .ln-c.none { transition-delay: calc(.44s + var(--i) * .14s); }

/* 关键一刻：米色段 */
.c-moment { margin-top: clamp(96px, 11vw, 160px); padding: clamp(80px, 9vw, 128px) var(--x); background: var(--cream); }
.moment { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4.4fr) minmax(0, 4.6fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.moment .trace { grid-column: 2; }
.moment .ui-col { grid-column: 3; }
.trace { list-style: none; margin: 0; padding: 0; }
.trace li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; padding-bottom: 28px; }
.trace li::after { content: ""; position: absolute; left: 3px; top: 18px; bottom: 2px; width: 1px; background: var(--hair); }
.trace li:last-child::after { display: none; }
.trace .mk { margin-top: 9px; }
.trace small { display: block; font-size: 12.5px; color: var(--ink-60); letter-spacing: .06em; }
.trace small.ai { color: var(--steel); }
.trace small.hu { color: var(--ember); }
.trace p { font-size: 16px; color: var(--ink); }
.trace.armed li { opacity: 0; transform: translateX(-8px); }
.trace.shown li { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * .22s); }

.ui { border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 .5px var(--hair), 0 30px 70px -36px hsl(0 0% 7% / .4); overflow: hidden; font-size: 14px; }
.ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: .5px solid var(--hair); }
.ui-head b { font-weight: 500; font-size: 14.5px; }
.ui-head .demo { font-size: 11.5px; color: var(--mute); letter-spacing: .06em; }
.ui-body { padding: 16px 18px; }
.ui-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-top: .5px solid var(--hair); background: hsl(40 12% 97%); }
.ui-foot .who { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--stone); }
.ui-foot .who b { font-weight: 500; color: var(--ink); }
.ui-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 13px; letter-spacing: .04em; cursor: pointer; transition: transform .12s; }
.ui-btn:hover { transform: translateY(-1px); }
.ui-btn.ghost { background: transparent; color: var(--stone); box-shadow: inset 0 0 0 .5px var(--hair); }
.ui-btn:focus-visible, .plan:focus-visible, .seg button:focus-visible, .replay:focus-visible { outline: 2px solid var(--steel-hi); outline-offset: 2px; }
.ui .done-msg { display: none; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); }
.ui.done .done-msg { display: inline-flex; }
.ui.done .ui-foot > .who, .ui.done .ui-foot > .ui-btn, .ui.done .ui-foot > span:not(.done-msg) { display: none; }
.ui .note { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--steel-soft); color: var(--ink); font-size: 13.5px; line-height: 1.65; }
.ui .note .mk { position: relative; top: -1px; }
.rows { display: grid; margin: 0; }
.rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: .5px dashed var(--hair); }
.rows > div:last-child { border-bottom: 0; }
.rows dt { color: var(--stone); }
.rows dd { margin: 0; }
.rows .v { font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.rows .src { display: block; font-size: 12px; color: var(--steel); margin-top: 2px; }
.rows .bad { color: var(--ember); }
.ui.done .rows .chg { color: var(--steel); }
.swap .after { display: none; }
.ui.done .swap .before { display: none; }
.ui.done .swap .after { display: inline; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan { text-align: left; padding: 14px; border: 0; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 .5px var(--hair); font: inherit; color: inherit; cursor: pointer; transition: box-shadow .2s, background-color .2s; }
.plan[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.plan .pn { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.plan .pn span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 400; color: var(--steel); }
.plan dl { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 6px 10px; margin: 12px 0 0; font-size: 13px; }
.plan dt { color: var(--ink-60); }
.plan dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: hsl(40 10% 94%); }
.seg button { border: 0; background: transparent; padding: 4px 12px; border-radius: 999px; font: inherit; font-size: 12px; color: var(--ink-60); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px hsl(0 0% 0% / .08); }
.masked .real { display: none; }
.ui:not(.masked) .mask { display: none; }
.cmds { display: grid; gap: 8px; }
.cmd { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.cmd code { display: block; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--stone); background: hsl(40 10% 95%); padding: 5px 9px; border-radius: 6px; overflow-x: auto; white-space: nowrap; }
.cmd p { font-size: 13.5px; margin-top: 4px; }
.ask { margin-top: 14px; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--hair); background: hsl(40 10% 96%); font-size: 13.5px; }
.ask b { font-weight: 500; }
.ui.done .ask { box-shadow: inset 0 0 0 .5px var(--hair); background: transparent; }
.ui-col .flow-note { margin-top: 14px; }

/* 分工与授权：三张卡，人那张用炉火橙 */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.role { padding: 26px 24px 28px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 .5px var(--hair); }
.role .mk { width: 10px; height: 10px; }
.role .mk.hu { width: 9px; height: 9px; }
.role h3 { margin-top: 22px; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; }
.role p { margin-top: 10px; font-size: 15px; color: var(--stone); }
.role.hu { box-shadow: 0 0 0 .5px var(--hair), 0 20px 44px -30px hsl(0 0% 7% / .3); }
.rules { list-style: none; margin: 40px 0 0; padding: 0; border-top: .5px solid var(--hair); }
.rules li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); padding: 18px 0; border-bottom: .5px solid var(--hair); font-size: 15px; }
.rules li b { font-weight: 500; }
.rules li span { color: var(--stone); }
.tiers { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
.tiers::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--steel-hi), hsl(210 30% 80%) 45%, hsl(26 90% 75%) 55%, var(--ember)); }
.tiers div { padding: 18px 16px 0 0; font-size: 14px; }
.tiers b { display: block; font-weight: 500; margin-bottom: 4px; font-size: 15px; }
.tiers span { font-size: 13px; color: var(--ink-60); }
.tiers-cap { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; color: var(--mute); }

/* 行业方案 */
.c-trade { padding-bottom: clamp(96px, 11vw, 160px); }
.trade-intro { margin-bottom: 28px; font-size: 15px; color: var(--ink-60); }
.trade-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.trade-cols > div { padding: 22px 24px 0 0; }
.trade-cols > div + div { padding-left: 24px; border-left: .5px solid var(--hair); }
.trade-cols dt { font-family: var(--serif); font-weight: 700; font-size: 18px; }
.trade-cols dd { margin: 10px 0 0; font-size: 15px; color: var(--stone); }

/* 下一个案例：整幅照片 */
.c-next { position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 62vh, 640px); padding: 0 var(--x) clamp(40px, 6vw, 80px); overflow: hidden; color: #fff; background: #222; }
.c-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.c-next::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, hsl(220 15% 8% / .86), hsl(220 15% 8% / .5) 42%, transparent 78%); }
.c-next:hover img { transform: scale(1.03); }
.c-next .c-wrap { position: relative; z-index: 2; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.c-next small { display: block; font-size: 13px; color: hsl(0 0% 100% / .65); letter-spacing: .08em; }
.c-next h2 { margin-top: 12px; font-family: var(--serif); font-size: clamp(28px, 3.6vw, 52px); line-height: 1.25; }
.c-next .tag { margin-top: 14px; color: hsl(0 0% 100% / .75); }
.c-next .tag i { background: var(--steel-hi); }
.c-next .go { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #111; flex: none; transition: transform .3s var(--ease); }
.c-next .go svg { width: 18px; height: 18px; }
.c-next:hover .go { transform: translateX(4px); }

@media (max-width: 1100px) {
  .case .menu { display: none; }
  .case .top .act { margin-left: auto; }
  .moment { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .moment .trace { grid-column: 1; }
  .moment .ui-col { grid-column: 2; }
  .lanes { display: block; }
  .lanes::before, .ln-l { display: none; }
  .ln-h { padding: 26px 0 10px 34px; border-top: .5px solid var(--hair); }
  .ln-h em { top: 26px; }
  .ln-c { margin: 0 0 8px 34px; }
  .ln-c .mk { display: inline-block; margin: 0 10px 1px 0; vertical-align: middle; }
}
@media (max-width: 760px) {
  .c-hero { padding-top: calc(104px + env(safe-area-inset-top, 0px)); }
  .c-hero .c-wrap, .c-head, .moment, .roles, .trade-cols { grid-template-columns: minmax(0, 1fr); }
  .moment .trace, .moment .ui-col { grid-column: 1; }
  .c-head { gap: 14px; }
  .c-photo { height: 60vh; }
  .c-pain .c-body, .c-roles .c-body, .c-trade .c-body { margin-left: 0; }
  .fact, .fact + .fact { padding: 20px 0 16px; border-left: 0; border-bottom: .5px solid var(--hair); }
  .trade-cols > div, .trade-cols > div + div { padding: 18px 0 14px; border-left: 0; border-bottom: .5px solid var(--hair); }
  .rules li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .case .top .crumb { display: none; }
  .viz-foot { flex-direction: column; align-items: flex-start; }
  .viz-scroll { margin-right: calc(-1 * var(--x)); padding-right: var(--x); -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .viz-scroll.end { -webkit-mask-image: none; mask-image: none; }
  .viz { min-width: 720px; }
  .viz-hint { display: inline; }
}

/* ——— 企业运营专属 ———
   开场：那栋楼从傍晚到入夜的视频，标题压在左下；顶栏在视频上是透明白字（.on-dark 由 case.js 切）。
   主体：楼层剖面。外层按步数撑高，里面一屏 sticky；滚动时从地基往上一层层亮灯，左边换成这一层的说明。
   窗灯是暖白（只表示「这一层接通了」），钢蓝竖井 = 那套系统，炉火橙仍只给人。 */
.c-open { box-sizing: border-box; position: relative; display: flex; align-items: flex-end; min-height: max(560px, 100svh); padding: 0 var(--x) clamp(48px, 9vh, 104px); overflow: hidden; background: #121823; color: #fff; }
.c-open video, .c-open > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, hsl(222 32% 6% / .9), hsl(222 32% 6% / .45) 38%, transparent 66%), linear-gradient(180deg, hsl(222 32% 6% / .5), transparent 24%); }
.c-open .c-wrap { position: relative; z-index: 1; width: 100%; }
.c-open .c-back, .c-open .tag, .c-open .c-kicker, .c-open .c-lead { color: hsl(0 0% 100% / .78); text-shadow: 0 1px 12px hsl(222 32% 6% / .6); }
.c-open .c-back:hover { color: #fff; }
.c-open .tag i { background: hsl(44 92% 76%); }
.case .top.on-dark { color: #fff; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.case .top.on-dark.scrolled { background: hsl(222 30% 7% / .55); box-shadow: 0 .5px 0 hsl(0 0% 100% / .08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.case .top.on-dark .crumb { color: hsl(0 0% 100% / .7); border-left-color: hsl(0 0% 100% / .3); }
.case .top.on-dark .menu a:hover, .case .top.on-dark .menu a.on { background: hsl(0 0% 100% / .12); }

.tower { --lit: hsl(44 92% 80%); --fh: clamp(34px, 5.4vh, 52px); position: relative; height: calc(var(--n) * 42vh + 100vh); margin-top: clamp(96px, 11vw, 160px); background: radial-gradient(60% 50% at 70% 55%, hsl(214 40% 18% / .7), transparent 70%), #0B1018; color: #fff; }
.tw-stick { box-sizing: border-box; position: sticky; top: 0; display: flex; align-items: center; height: 100vh; height: 100svh; padding: 64px var(--x) 0; overflow: hidden; }
.tw-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.tower .c-label { color: hsl(0 0% 100% / .5); }
.tower .mk { background: var(--steel-hi); }
.tower .mk.hu { background: var(--ember); }
.tw-steps { position: relative; min-height: 300px; margin-top: 32px; }
.tw-step { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .6s var(--ease); pointer-events: none; }
.tw-step.on { opacity: 1; transform: none; transition-delay: .1s; pointer-events: auto; }
.tw-no { display: block; font-family: var(--serif); font-size: clamp(52px, 5.6vw, 84px); font-weight: 700; line-height: 1; color: var(--lit); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tw-step h3 { margin-top: 14px; font-family: var(--serif); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.3; }
.tw-step.intro h3, .tw-step.end h3 { margin-top: 0; font-size: clamp(30px, 3.2vw, 46px); }
.tw-p { margin-top: 18px; max-width: 26em; font-size: 16px; line-height: 1.75; color: hsl(0 0% 100% / .66); }
.tw-ai, .tw-hu { display: flex; gap: 14px; max-width: 28em; font-size: 16px; line-height: 1.7; color: hsl(0 0% 100% / .86); }
.tw-ai { margin-top: 26px; padding-top: 20px; border-top: .5px solid hsl(0 0% 100% / .14); }
.tw-hu { margin-top: 16px; }
.tw-ai .mk, .tw-hu .mk { margin-top: 10px; }
.tw-prog { display: flex; align-items: center; gap: 16px; margin-top: 28px; font-size: 13px; color: hsl(0 0% 100% / .5); }
.tw-ticks { display: flex; gap: 4px; }
.tw-ticks i { width: 18px; height: 2px; background: hsl(0 0% 100% / .16); transition: background .4s; }
.tw-ticks i.on { background: var(--lit); }
.tw-count b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }

/* 楼：屋顶 → 七层（column-reverse，1F 在下）→ 地面线 → 地基 */
.tw-bldg { justify-self: center; width: min(100%, 540px); }
.roof { position: relative; height: 40px; margin: 0 112px 0 40px; border-bottom: 2px solid hsl(216 18% 30%); }
.roof span { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 12.5px; letter-spacing: .12em; color: hsl(210 70% 82%); white-space: nowrap; opacity: .4; transition: opacity .6s; }
.tower.done .roof span { opacity: 1; }
.floors { display: flex; flex-direction: column-reverse; }
.fl { display: grid; grid-template-columns: 40px minmax(0, 1fr) 112px; align-items: center; height: var(--fh); }
.fl-no { font-size: 12px; letter-spacing: .04em; color: hsl(0 0% 100% / .32); font-variant-numeric: tabular-nums; transition: color .5s; }
.fl-band { box-sizing: border-box; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 0 8px; padding: 6px 10px 9px; background: hsl(218 22% 11%); border: 1px solid hsl(216 16% 20%); border-width: 0 1px; box-shadow: inset 0 -3px 0 hsl(216 14% 22%); transition: background .6s; }
.wins { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.wins i { position: relative; background: hsl(218 20% 15%); box-shadow: inset 0 -1px 0 hsl(216 16% 22%); }
.wins i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(hsl(46 85% 88%), hsl(40 70% 70%) 70%, hsl(36 55% 56%)); opacity: 0; transition: opacity .35s calc(var(--w) * 40ms); }
.shaft { position: relative; background: hsl(220 24% 8%); }
.shaft::after { content: ""; position: absolute; inset: -6px 4px -9px; background: var(--steel-hi); box-shadow: 0 0 14px var(--steel-glow); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.fl-name { padding-left: 16px; font-size: 13.5px; white-space: nowrap; color: hsl(0 0% 100% / .3); transition: color .5s; }
.fl.on .fl-band { background: hsl(220 20% 15%); }
.fl.on .wins i::after { opacity: .92; }
.fl.on .fl-band { box-shadow: inset 0 -3px 0 hsl(216 14% 24%), 0 0 28px hsl(42 80% 60% / .08); }
.fl.on .shaft::after { transform: none; }
.fl.on .fl-no { color: var(--lit); }
.fl.on .fl-name { color: hsl(0 0% 100% / .72); }
.fl.cur .fl-name { color: #fff; }
.ground { position: relative; height: 30px; margin-left: 28px; border-top: 2px solid hsl(32 12% 48%); }
.ground span { position: absolute; right: 0; top: 7px; font-size: 12px; letter-spacing: .06em; color: hsl(0 0% 100% / .45); }
.basement .fl-band { box-shadow: none; border: 1px dashed hsl(216 18% 26%); background: repeating-linear-gradient(135deg, hsl(218 20% 11%) 0 6px, hsl(218 20% 13%) 6px 7px); }
.basement .wins i::after { background: linear-gradient(hsl(210 70% 82%), hsl(212 55% 58%)); }
.basement .fl.on .fl-no { color: hsl(210 70% 80%); }

.tower.still { height: auto; }
.tower.still .tw-stick { position: static; height: auto; padding: clamp(80px, 9vw, 128px) var(--x); }
.tower.still .tw-step { display: none; }
.tower.still .tw-step.end { display: block; position: static; opacity: 1; transform: none; }

@media (max-width: 760px) {
  .c-open { min-height: max(520px, 92svh); }
  .tower { --fh: 4.2vh; height: calc(var(--n) * 40vh + 100vh); }
  .tw-stick { align-items: flex-start; padding-top: 72px; }
  .tw-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tw-bldg { order: -1; width: 100%; }
  .fl { grid-template-columns: 30px minmax(0, 1fr) 0; }
  .fl-name { display: none; }
  .roof { height: 30px; margin: 0 0 0 30px; }
  .ground { margin-left: 22px; height: 26px; }
  .fl-band { padding: 4px 8px 6px; gap: 0 6px; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr); }
  .wins { gap: 2px; }
  .tw-steps { margin-top: 14px; min-height: 230px; }
  .tw-no { font-size: 40px; }
  .tw-step h3 { margin-top: 8px; font-size: 23px; }
  .tw-step.intro h3, .tw-step.end h3 { font-size: 25px; }
  .tw-p, .tw-ai, .tw-hu { font-size: 14.5px; }
  .tw-ai { margin-top: 14px; padding-top: 12px; }
  .tw-hu { margin-top: 8px; }
  .tw-ai .mk, .tw-hu .mk { margin-top: 9px; }
  .tw-prog { margin-top: 12px; }
}

/* 关键一刻（企业运营，只讲现在）：一张调动审批被 AI 接住的一个画面。
   没有 JS 或减少动效时直接是最后一帧；armed 先藏起来，play 时按各自的 --d 走一遍。 */
.tf-stage { margin-top: 8px; }
.tf { display: block; width: 100%; height: auto; overflow: visible; }
.tf.tall { display: none; max-width: 420px; margin: 0 auto; }
.tf text { font-family: var(--sans); font-size: 14px; fill: var(--stone); }
.tf-lab.ai { fill: var(--steel); font-weight: 500; }
.tf-lab.hu { fill: var(--ember); font-weight: 500; }
.tf-line { fill: none; stroke: var(--ink-35); stroke-width: 1; }
.tf-doc rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.tf-doc path { fill: none; stroke: var(--ink-35); stroke-width: 1.2; stroke-linecap: round; }
.tf-ai { fill: var(--steel); }
.tf-dia { fill: var(--ember); }
.tf-end { fill: var(--ink-35); }
.tf-ring { fill: none; stroke: var(--steel); stroke-width: 1; opacity: .35; transform-box: fill-box; transform-origin: center; }
.tf-ring.hu { stroke: var(--ember); }
.tf-tag rect { fill: var(--steel-soft); stroke: var(--steel); stroke-width: .75; }
.tf-tag text { fill: var(--steel); font-size: 13px; text-anchor: middle; }
.tf-tag.unsure rect { fill: var(--paper); stroke: var(--ember); }
.tf-tag.unsure text { fill: var(--ember); }
.tf-tag.gone { opacity: 0; }
.tf-bar { fill: var(--ink-35); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--to)); }
.tf-bar.b { fill: var(--steel); }
.tf-bar + .tf-lab { text-anchor: middle; }
.tf-trace { fill: none; stroke: var(--steel-hi); stroke-width: 1.2; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tf-dot { fill: var(--steel-hi); opacity: 0; offset-rotate: 0deg; }
/* 四条说明：一行四格，上面一条细线，格子之间竖线隔开 */
.tf-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: clamp(32px, 3.5vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--hair); text-align: left; }
.tf-chips li { display: flex; align-items: center; gap: 12px; padding: 22px 24px 4px; font-size: 14.5px; color: var(--ink); }
.tf-chips li:first-child { padding-left: 0; }
.tf-chips li + li { box-shadow: inset 1px 0 0 var(--hair); }
.tf-chips svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--steel); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rp-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 22px; }
.cp-sec .viz-cap, .dr-legend .viz-cap { color: var(--ink-60); font-size: 13.5px; }
.cp-sec .replay { flex: none; color: var(--ink-60); box-shadow: inset 0 0 0 .5px var(--hair); background: transparent; }

.cp-sec.armed .s, .cp-sec.armed .pop { opacity: 0; }
.cp-sec.armed .ch { transform: scaleY(1); }
.cp-sec.armed .draw { stroke-dashoffset: 1; }
.cp-sec.armed.play .s { animation: tf-in .6s var(--ease) var(--d) both; }
.cp-sec.armed.play .pop { animation: tf-pop .45s var(--ease) var(--d) both; transform-box: fill-box; transform-origin: center; }
.cp-sec.armed.play .pop.gone { animation: tf-pop .45s var(--ease) var(--d) both, tf-out .3s ease var(--o) forwards; }
.cp-sec.armed.play .ch { animation: tf-ch .9s var(--ease) var(--d) both; }
.cp-sec.armed.play .draw { animation: tf-draw 1.1s ease-in-out var(--d) both; }
.cp-sec.armed.play .pulse { animation: tf-pulse 1s ease-out var(--d) both; }
.cp-sec.armed.play .tf.wide .tf-dot { animation: tf-run 3.2s linear .2s both; }
.cp-sec.armed.play .tf.tall .tf-dot { animation: tf-run-t 3.2s linear .2s both; }
.cp-sec.reset * { animation: none !important; transition: none !important; }
@keyframes tf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tf-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes tf-out { to { opacity: 0; } }
@keyframes tf-ch { from { transform: scaleY(1); } to { transform: scaleY(var(--to)); } }
@keyframes tf-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tf-pulse { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: .35; transform: scale(1); } }
/* 点沿线走：到 AI 停一下读，到确认停一下等人，再去两个项目 */
@keyframes tf-run {
  0% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; }
  15%, 30% { offset-distance: 27.8%; } 45%, 70% { offset-distance: 65.6%; }
  90% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes tf-run-t {
  0% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; }
  15%, 30% { offset-distance: 29.4%; } 45%, 70% { offset-distance: 66.5%; }
  90% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* 分工（企业运营）：一条线从招聘流到发薪。钢蓝点自动走，到炉火橙菱形停一下等人确认 */
.flw { position: relative; margin-top: 12px; padding: 0 0 8px; }
.flw-track { position: absolute; left: 0; right: 0; top: 28px; height: 1px; background: var(--ink-35); }
.flw-st { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.flw-st li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.flw-node { position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.flw-node::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--steel); transition: background .3s, box-shadow .3s; }
.flw-st li.hit .flw-node::before { background: var(--steel); }
.flw-st li.gate .flw-node::before { width: 14px; height: 14px; border-radius: 2px; transform: rotate(45deg); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ember); }
.flw-st li.gate.hold .flw-node::before { background: var(--ember); }
.flw-st li.gate .flw-node::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ember); opacity: 0; }
.flw-st li.gate.hold .flw-node::after { animation: flw-ring 1s ease-out; }
@keyframes flw-ring { from { opacity: .8; transform: scale(.5); } to { opacity: 0; transform: scale(1.15); } }
.flw-st b { margin-top: 18px; font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: .02em; }
.flw-st em { margin-top: 10px; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-style: normal; font-size: 13px; color: var(--ember); box-shadow: inset 0 0 0 .75px var(--ember); }
.flw-dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--steel-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--steel-hi) 18%, transparent); pointer-events: none; will-change: transform; }
.flw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: clamp(40px, 4.4vw, 64px); padding-top: 18px; border-top: .5px solid var(--hair); font-size: 13.5px; color: var(--ink-60); }
.flw-legend > span { display: inline-flex; align-items: center; gap: 10px; }
.flw-notes { margin-left: auto; gap: 24px !important; color: var(--stone); }

/* 难点（企业运营）：约千人一人一个点，按项目堆成柱；下面一条人工成本跟着人数变 */
.dr { position: relative; }
.dr-c { display: block; width: 100%; height: var(--h, 200px); }
.dr-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gap); --gap: clamp(8px, 2vw, 28px); border-top: 1px solid var(--ink); }
.dr-cols > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; padding-top: 14px; }
.dr-cols b { font-weight: 500; font-size: 14.5px; }
.dr-n { justify-self: end; font-family: var(--serif); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-60); transition: color .4s; }
.dr-n.up { color: var(--steel); }
.dr-bar { grid-column: 1 / -1; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--steel); width: calc(var(--w, .5) * 100%); transition: width .9s var(--ease); }
.dr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 28px; font-size: 13.5px; color: var(--ink-60); }
.dr-legend > span { display: inline-flex; align-items: center; gap: 10px; }
.dr-key { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-35); }
.dr-key.bar { width: 18px; height: 3px; border-radius: 2px; background: var(--steel); }
.dr-legend .viz-cap { margin-left: auto; }

/* 锻造难点：一处变，整张计划跟着变。canvas 由 case.js 画 */
.hk-c { display: block; width: 100%; height: var(--h, 360px); }
.hk-legend { border-top: .5px solid var(--hair); padding-top: 16px; }
.hk-key { width: 18px; height: 10px; border-radius: 2px; }
.hk-key.hit { box-shadow: inset 0 0 0 1.5px var(--ember); }
.hk-key.ai { background: var(--steel-hi); }
.hk-legend .viz-cap { margin-left: auto; }
.cp-sec.armed .drop { opacity: 0; }

/* 锻造关键一刻：同一张小排产图既是停机现场，也是改排结果 */
.tf { color: hsl(0 0% 7% / .32); }
.of-trk { fill: var(--paper); stroke: var(--hair); stroke-width: .75; }
.of-ln { font-size: 10px !important; fill: var(--mute) !important; }
.of-b { fill: hsl(0 0% 7% / .2); }
.of-stop { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 1; }
.of-b.mv { fill: var(--steel-hi); transform: translate(var(--tx), var(--ty)); }
.of-card rect { fill: var(--paper); stroke: var(--hair); stroke-width: .75; }
.of-card.pick rect { stroke: var(--steel); stroke-width: 1.4; }
.of-card.drop-out { opacity: .4; }
.of-name { font-size: 14.5px !important; font-weight: 500; fill: var(--ink) !important; }
.of-k { font-size: 12.5px !important; fill: var(--ink-60) !important; }
.of-v { font-size: 13.5px !important; font-weight: 500; fill: var(--ink) !important; font-variant-numeric: tabular-nums; }
.of-v.bad { fill: hsl(4 62% 48%) !important; }
.of-out { fill: var(--steel); }
.of-tick { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-sec.armed .of-b.mv { transform: none; fill: hsl(0 0% 7% / .2); }
.cp-sec.armed.play .of-b.mv { animation: of-mv .9s var(--ease) var(--d) both; }
.cp-sec.armed.play .of-card.drop-out { animation: tf-pop .45s var(--ease) var(--d) both, of-dim .4s ease var(--o) forwards; }
.cp-sec.armed.play .of-card.pick rect { animation: of-pick .4s ease var(--o) both; }
@keyframes of-mv { from { transform: none; fill: hsl(0 0% 7% / .2); } 30% { fill: var(--steel-hi); } to { transform: translate(var(--tx), var(--ty)); fill: var(--steel-hi); } }
@keyframes of-dim { to { opacity: .4; } }
@keyframes of-pick { from { stroke: var(--hair); stroke-width: .75; } to { stroke: var(--steel); stroke-width: 1.4; } }

/* 锻造全流程：深色排产长卷。沿用楼层剖面的 sticky 和左边步骤；右边图按 k1～k5 一步步加东西 */
.roll { --lit: hsl(30 95% 64%); background: radial-gradient(60% 50% at 70% 55%, hsl(24 40% 16% / .55), transparent 70%), #0E0D0C; }
.roll .tw-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.rl-fig { position: relative; width: 100%; }
.rl-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.rl-l { position: absolute; transform: translateY(-50%); font-size: 12px; line-height: 1; white-space: nowrap; color: hsl(0 0% 100% / .5); }
.rl-l.ln { color: hsl(0 0% 100% / .42); }
.rl-l.zl { color: hsl(0 0% 100% / .62); }
.rl-zone { fill: hsl(0 0% 100% / .05); }
.rl-zone.z0 { fill: hsl(0 0% 100% / .1); }
.rl-zone.z1 { fill: hsl(0 0% 100% / .07); }
.rl-trk { fill: hsl(30 8% 10%); stroke: hsl(30 6% 18%); stroke-width: 1; }
.rl-tick { stroke: hsl(0 0% 100% / .045); stroke-width: 1; }
.rl-b { fill: hsl(210 20% 32%); }
.rl-b.lock { fill: hsl(0 0% 100% / .2); }
.rl-day { fill: hsl(0 0% 100% / .14); }
.rl-next { fill: none; stroke: hsl(0 0% 100% / .2); stroke-dasharray: 4 4; transition: opacity .5s; }
.rl-b.draft { fill: var(--steel-hi); opacity: 0; transition: opacity .4s var(--d); }
.roll.k2 .rl-next { opacity: 0; }
.roll.k2 .rl-b.draft { opacity: 1; }
.roll .st1, .roll .st2, .roll .st3, .roll .st4, .roll .st5 { opacity: 0; transition: opacity .5s; }
.roll.k1 .st1, .roll.k2 .st2, .roll.k3 .st3, .roll.k4 .st4, .roll.k5 .st5 { opacity: 1; }
.rl-new { fill: none; stroke: var(--ember); stroke-width: 1.4; stroke-dasharray: 4 3; }
.rl-hit { fill: none; stroke: var(--ember); stroke-width: 1.4; }
.rl-push { fill: none; stroke: hsl(0 0% 100% / .5); stroke-width: 1; stroke-dasharray: 3 3; }
.rl-eta { fill: none; stroke: var(--lit); stroke-width: 1.2; stroke-dasharray: 2 4; }
.rl-l.new { transform: translate(-50%, -100%); padding: 4px 9px; border-radius: 999px; color: var(--ember); box-shadow: inset 0 0 0 .75px var(--ember); background: #0E0D0C; }
.rl-l.st1:not(.new), .rl-l.st2, .rl-l.stop { transform: translate(-50%, -50%); }
.rl-down { stroke: hsl(0 0% 100% / .25); stroke-width: 1; }
.rl-stop { stroke: hsl(0 0% 100% / .8); stroke-width: 1.4; }
.rl-l.stop { color: #fff; }
.rl-b.move { transition: transform .9s var(--ease) .25s, fill .4s .25s; }
.roll.k3 .rl-b.move { transform: translate(var(--tx), var(--ty)); fill: var(--steel-hi); }
.rl-play { stroke: var(--lit); stroke-width: 1.6; }
.roll.k4 .rl-play { animation: rl-sweep 3.2s ease-in-out infinite; }
@keyframes rl-sweep { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(440px); } }
.rl-l.play { color: var(--lit); }
.rl-log { stroke: hsl(0 0% 100% / .22); stroke-width: 1; }
.rl-dot { fill: var(--lit); }
.roll.k5 .rl-dot, .roll.k5 .rl-l.log { transition-delay: var(--d); }
.rl-l.log { font-size: 11.5px; color: hsl(0 0% 100% / .6); }
.tower.still .rl-play { animation: none; }

/* 制药「智能人效」：一人一年 → 拉远到全厂。洁净车间的冷白底；画面全在 canvas，标题、字幕、图例、提示是 HTML 叠在上面 */
.yr { position: relative; height: 520vh; background: radial-gradient(70% 60% at 60% 55%, hsl(186 40% 12%), transparent 70%), #081012; color: #fff; }
.yr .c-label { color: hsl(0 0% 100% / .5); }
.yr .yr-caps { color: hsl(0 0% 100% / .66); }
.yr .yr-caps b { color: hsl(22 100% 66%); }
.yr .yr-foot .viz-cap { color: hsl(0 0% 100% / .45); }
.c-open + .yr { margin-top: 0; }
.yr + .c-moment { margin-top: 0; }
.yr-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.yr-c { position: absolute; inset: 0; width: 100%; height: 100%; }
.yr-head { position: absolute; top: clamp(84px, 11vh, 120px); left: var(--x); right: var(--x); pointer-events: none; }
.yr-head h2 { margin-top: 14px; font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); line-height: 1.32; }
.yr-caps { position: relative; height: 3.4em; margin-top: 12px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; color: var(--ink-60); }
.yr-caps p { position: absolute; inset: 0 auto auto 0; max-width: 30em; opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .6s var(--ease); }
.yr-caps p.on { opacity: 1; transform: none; }
.yr-caps b { font-weight: 500; color: var(--ember); }
.yr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.yr-foot { position: absolute; left: var(--x); right: var(--x); bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; font-size: 13px; color: var(--ink-60); }
.yr-foot .viz-cap { margin-left: auto; color: var(--ink-60); font-size: 13px; }
.yr-lg { display: flex; flex-wrap: wrap; gap: 8px 20px; transition: opacity .4s; }
.yr-lg > span { display: inline-flex; align-items: center; gap: 8px; }
.yr-lg.w, .yr.wall .yr-lg.a { display: none; }
.yr.wall .yr-lg.w { display: flex; }
.yk { width: 3px; height: 12px; border-radius: 1px; background: hsl(0 0% 7% / .78); }
.yk.b { background: var(--steel-hi); }
.yk.ex, .yk.ai { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.yk.ai { background: var(--steel-hi); }
.yk.peer { background: hsl(192 26% 52%); }
.yk.me { background: var(--ember); }
.yr-tip { position: absolute; z-index: 2; min-width: 180px; padding: 10px 12px; border-radius: 10px; background: var(--paper); box-shadow: var(--paper-shadow), 0 0 0 .5px var(--hair); font-size: 13px; line-height: 1.7; color: var(--ink-60); pointer-events: none; }
.yr-tip b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.yr-tip em { font-style: normal; color: var(--steel); }
.yr.still { height: auto; }
.yr.still .yr-stick { position: relative; height: 100vh; height: 100svh; min-height: 640px; }
@media (max-width: 760px) {
  .yr { height: 480vh; }
  .yr-head { top: 76px; }
  .yr-caps { height: 5.1em; }
  .yr-foot { bottom: 18px; gap: 6px 14px; font-size: 12px; }
  .yr-foot .viz-cap { margin-left: 0; width: 100%; font-size: 12px; }
}


/* 制药关键一刻「智能溯源」：左边奖金条，中间这个数拆成的算式，右边出处；连线和出处里亮起的那一格由 case.js 和动画配合 */
.og { position: relative; display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) minmax(300px, 420px); gap: clamp(32px, 5vw, 88px); align-items: center; min-height: 440px; }
.og-slip { position: relative; z-index: 1; padding: 22px 22px 12px; border-radius: 14px; background: var(--paper); box-shadow: var(--paper-shadow), 0 0 0 .5px var(--hair); }
.og-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.og-head b { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.og-head span { font-size: 12.5px; color: var(--ink-60); }
.og-row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 12px 10px; border: 0; border-bottom: .5px solid var(--hair); border-radius: 0; background: none; font: inherit; font-size: 14.5px; color: var(--ink); text-align: left; cursor: pointer; transition: background .25s, color .25s; }
.og-row:last-child { border-bottom: 0; }
.og-rows { margin-bottom: 4px; }
.og-row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.og-row.sum b { font-family: var(--serif); font-size: 18px; font-weight: 700; }
.og-row:hover { background: hsl(210 34% 97%); }
.og-row.on { background: var(--steel-soft); color: var(--steel); box-shadow: inset 2px 0 0 var(--steel); }
.og-row:focus-visible { outline: 2px solid var(--steel-hi); outline-offset: -2px; }
.og-mid { position: relative; z-index: 1; }
.og-f { display: none; flex-direction: column; align-items: flex-start; gap: 12px; }
.og-f.on { display: flex; }
.og-ln { display: flex; align-items: center; gap: 12px; }
.og-ln .og-op { width: 14px; text-align: center; }
.og-v { font-family: var(--serif); font-size: clamp(30px, 3vw, 42px); font-weight: 700; font-variant-numeric: tabular-nums; }
.og-op { font-size: 20px; color: var(--ink-35); }
.og-k { padding: 7px 14px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--steel-hi); font-size: 15px; color: var(--steel); white-space: nowrap; }
.og-ai { display: none; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 10px 4px; border-top: 1px solid var(--ink); font-size: 14px; line-height: 1.6; color: var(--steel); }
.og-src { position: relative; z-index: 1; }
.og-docs { display: none; flex-direction: column; gap: 12px; }
.og-docs.on { display: flex; }
.og-doc { padding: 12px 14px 10px; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 .5px var(--hair), 0 10px 30px -18px hsl(0 0% 7% / .3); }
.og-dh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.og-dh b { font-size: 14px; font-weight: 500; }
.og-dh span { font-size: 12px; color: var(--ink-60); }
.og-doc table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.og-doc th { padding: 4px 6px; border-bottom: .5px solid var(--hair); font-weight: 400; color: var(--ink-60); text-align: left; }
.og-doc td { padding: 5px 6px; border-bottom: .5px solid hsl(0 0% 7% / .06); color: var(--ink-60); }
.og-doc tr:last-child td { border-bottom: 0; }
.og-doc td.hit { color: var(--ink); font-weight: 500; background: var(--steel-soft); box-shadow: inset 0 0 0 1.5px var(--steel-hi); border-radius: 4px; }
.og-sec .viz-cap { color: var(--ink-60); font-size: 13.5px; }
.og-sec .rp-foot { margin-top: 28px; }
.og-ai.on { display: flex; }
.og-ai .mk { margin-top: 7px; flex: none; }
.og-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.og-w { fill: none; stroke: var(--steel-hi); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* 动起来：值 → 算式 → 出处 → 连线 → 那一格亮 → AI 复算。只动透明度和模糊，不挪位置，连线才量得准 */
.og.armed .og-f.on > *, .og.armed .og-docs.on .og-doc { opacity: 0; }
.og.armed .og-w { stroke-dashoffset: 1; }
.og.armed .og-docs.on td.hit { background: none; box-shadow: none; }
.og.go .og-f.on > * { animation: og-in .5s var(--ease) var(--d, 0s) both; }
.og.armed .og-ai.on { opacity: 0; }
.og.go .og-ai.on { animation: og-in .5s var(--ease) 1.9s both; }
.og.go .og-docs.on .og-doc { animation: og-in .55s var(--ease) var(--d) both; }
.og.go .og-w { animation: og-draw .7s var(--ease) var(--d) both; }
.og.go .og-docs.on td.hit { animation: og-hit .5s calc(var(--d) + .8s) both; }
@keyframes og-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@keyframes og-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes og-hit { from { background: none; box-shadow: inset 0 0 0 0 var(--steel-hi); } 50% { box-shadow: inset 0 0 0 3px var(--steel-hi); } to { background: var(--steel-soft); box-shadow: inset 0 0 0 1.5px var(--steel-hi); } }
@media (max-width: 999px) {
  .og { grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; }
  .og-wires { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .og.armed .og-f.on > *, .og.armed .og-docs.on .og-doc, .og.armed .og-ai.on { opacity: 1; }
  .og.armed .og-docs.on td.hit { background: var(--steel-soft); box-shadow: inset 0 0 0 1.5px var(--steel-hi); }
  .og.go * { animation: none !important; }
}

@media (max-width: 760px) {
  .tf.wide { display: none; }
  .tf.tall { display: block; }
  .tf-chips { grid-template-columns: 1fr 1fr; }
  .tf-chips li { padding: 18px 12px 16px 16px; font-size: 13.5px; }
  .tf-chips li:nth-child(odd) { padding-left: 0; box-shadow: none; }
  .tf-chips li:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .roll .rl-fig { order: -1; }
  .roll .tw-grid { grid-template-columns: minmax(0, 1fr); }
  .roll .tw-stick { padding-top: 100px; }
  .rl-l { font-size: 10px; }
  .rl-l.ln small { display: none; }
  .rl-l.log { font-size: 9.5px; }
  .rp-foot { align-items: flex-start; }
  /* 分工竖过来：线在左边，站名在右 */
  .flw-track { left: 27.5px; right: auto; top: 28px; bottom: 36px; width: 1px; height: auto; }
  .flw-st { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flw-st li { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 0 14px; }
  .flw-st b { margin-top: 0; font-size: 21px; }
  .flw-st em { margin-top: 0; height: 24px; font-size: 12.5px; }
  .flw-notes { margin-left: 0; flex-wrap: wrap; gap: 6px 18px !important; width: 100%; }
  .dr-cols > div { grid-template-columns: minmax(0, 1fr); }
  .dr-cols b { font-size: 12.5px; }
  .dr-n { justify-self: start; font-size: 13px; }
  .dr-legend .viz-cap { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dr-bar, .flw-node::before { transition: none; }
  .cp-sec .replay { display: none; }
}

/* 短标题整行居中（11-01 用户要：锻造「智能排产」「智能调整」，各页「分工与授权」「成效」）；小标签仍在左边同一行 */
.c-center .c-head h2 { text-align: center; }
@media (min-width: 761px) {
  .c-center .c-head .c-label { grid-column: 1; grid-row: 1; }
  .c-center .c-head h2 { grid-column: 1 / -1; grid-row: 1; }
}


/* 运维「智能排障」：同一套吸顶滚动，浅底线描；网络、面板、环路都由 case.js 画在 canvas 上 */
.yr.pz { height: 560vh; background: var(--bg); color: var(--ink); }
.yr.pz .c-label { color: var(--ink-60); }
.yr.pz .yr-caps { color: var(--ink-60); }
.yr.pz .yr-foot .viz-cap { color: var(--ink-60); }
.pz .yr-lg .mk:not(.hu) { background: var(--steel-hi); }
.c-open + .yr.pz { margin-top: 0; }

/* 命令分级（11-01 第三版）：浅底，三条分级各占一行，左边分级名和规则，右边命令卡片 */
.cl { max-width: 1080px; margin: 0 auto; border-top: 1px solid var(--ink); text-align: left; }
.cg-bar { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 13px; color: var(--mute); }
.cg-bar span:first-child { color: var(--ink-60); }
.cg-bar b { margin-right: 10px; font-weight: 500; color: var(--ink); }
.cg-lane { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); padding: 24px 0; border-top: .5px solid var(--hair); }
.cg-tier i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--steel-hi); }
.cg-lane.wait .cg-tier i { width: 9px; height: 9px; margin: 1px; border-radius: 1px; background: var(--ember); transform: rotate(45deg); }
.cg-lane.deny .cg-tier i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-35); }
.cg-tier b { display: block; margin-top: 12px; font-size: 17px; font-weight: 600; color: var(--ink); }
.cg-tier span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-60); }
.cg-cmds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cg-c { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 .5px var(--hair), 0 14px 30px -24px hsl(210 40% 20% / .35); transition: opacity .5s, transform .6s var(--ease), box-shadow .4s, background .4s; }
.cg-c code { font: 13.5px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; }
.cg-c p { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ink-60); }
.cg-c em { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 12px; font-style: normal; font-size: 12.5px; color: var(--steel); }
.cg-ck { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cg-lane.wait .cg-c { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: 18px 20px 18px 22px; }
.cg-acts, .cg-done { display: flex; align-items: center; gap: 8px; }
.cg-done, .cg-c .cg-res { display: none; }
.cg-c .cg-res { align-items: flex-start; padding-top: 10px; line-height: 1.6; }
.cg-res .cg-ck { margin-top: 3px; }
.cg-lane.deny .cg-c { background: transparent; box-shadow: inset 0 0 0 1px var(--hair); }
.cg-lane.deny code { color: var(--ink-35); }
.cg-lane.deny s { text-decoration-thickness: 1px; }
.cg-lane.deny p { color: var(--mute); }
.cl.done .cg-acts { display: none; }
.cl.done .cg-done, .cl.done .cg-c .cg-res { display: flex; animation: cl-in .5s var(--ease) both; }
/* 进入视野：卡片按查询、改状态、模板外依次落下；等批准时按钮呼吸 */
.cl.armed .cg-c { opacity: 0; transform: translateY(10px); }
.cl.play .cg-c { opacity: 1; transform: none; transition-delay: calc(var(--k) * .4s + .2s), calc(var(--k) * .4s + .2s), 0s, 0s; }
.cl.play:not(.done) .cg-acts .ui-btn:not(.ghost) { animation: cg-breathe 1.6s ease-in-out 2.2s infinite; }
@keyframes cg-breathe { 0%, 100% { box-shadow: 0 0 0 0 hsl(0 0% 7% / .22); } 50% { box-shadow: 0 0 0 7px hsl(0 0% 7% / 0); } }
@keyframes cl-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 760px) {
  .yr.pz { height: 500vh; }
  .cg-lane { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; }
  .cg-tier { display: flex; align-items: center; gap: 10px; }
  .cg-tier b, .cg-tier span { margin-top: 0; }
  .cg-tier b { font-size: 16px; }
  .cg-cmds { grid-template-columns: 1fr; }
  .cg-lane.wait .cg-c { grid-column: auto; grid-template-columns: 1fr; gap: 14px; }
  .cg-c code { font-size: 12.5px; }
  .cg-done { flex-wrap: wrap; }
}


/* 全流程：整条链竖着排。左边一根线，一颗点沿线走一遍；每行：环节名、AI 做什么、人来定；核心技术点那行放大、加底色 */
.ch { position: relative; }
.ch-cols, .ch-r { display: grid; grid-template-columns: 36px minmax(150px, 2.2fr) minmax(0, 5fr) minmax(0, 2.6fr); column-gap: clamp(16px, 2.4vw, 36px); }
.ch-cols { padding-bottom: 12px; font-size: 13px; color: var(--ink-60); }
.ch-cols span:nth-child(2) { grid-column: 3; }
.ch-cols span { display: inline-flex; align-items: center; gap: 8px; }
.ch-list { position: relative; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ch-line { position: absolute; left: 17px; top: 0; bottom: 0; width: 1px; background: var(--hair); z-index: 1; } /* 核心行的浅底垫在竖线下面，竖线和圆点压在上面 */
.ch-fill { position: absolute; inset: 0 0 auto 0; height: 100%; background: var(--steel-hi); transform-origin: top; transform: scaleY(0); }
.ch-dot { position: absolute; left: -4px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--steel-hi); box-shadow: 0 0 0 4px hsl(210 70% 56% / .18); opacity: 0; }
.ch-r { position: relative; align-items: baseline; padding: 16px 0; border-bottom: .5px solid var(--hair); font-size: 15px; line-height: 1.65; }
.ch-r::before { content: ""; position: relative; z-index: 2; grid-column: 1; justify-self: center; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.2px var(--ink-35); }
.ch-n { grid-column: 2; display: flex; flex-direction: column; gap: 4px; }
.ch-n b { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.ch-ai, .ch-hu { display: flex; gap: 10px; align-items: baseline; }
.ch-ai .mk, .ch-hu .mk { flex: none; transform: translateY(-2px); }
.ch-hu .mk.hu { transform: translateY(-2px) rotate(45deg); }
.ch-ai { color: var(--ink); }
.ch-hu { color: var(--ink-60); }
.ch-r.core { margin: 0 calc(-1 * clamp(12px, 1.6vw, 24px)); padding: 26px clamp(12px, 1.6vw, 24px); background: var(--steel-soft); border-bottom-color: transparent; border-radius: 10px; }
.ch-r.core::before { width: 11px; height: 11px; background: var(--steel-hi); box-shadow: 0 0 0 5px hsl(210 70% 56% / .16); }
.ch-r.core .ch-n b { font-size: 22px; }
.ch-r.core .ch-ai { font-size: 16px; font-weight: 500; }
/* 进入视野前环节淡着，点走过就亮；到核心那行停一下 */
.ch.armed .ch-r { opacity: .32; transition: opacity .5s; }
.ch.play .ch-r { opacity: 1; transition-delay: calc(var(--i) * .26s); }
.ch.play .ch-fill { transform: scaleY(1); transition: transform calc(var(--n) * .26s) linear; }
.ch.play .ch-dot { animation: ch-dot calc(var(--n) * .26s) linear forwards; }
@keyframes ch-dot { 0% { top: 0; opacity: 1; } 96% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* 成效：一行一件事，左边谁、做什么，中间原来多久划掉、现在多久，右边一句话和测算依据 */
/* 成效：三栏并排，竖线隔开；每栏一个指标、一个大数字、原来的数字划掉、谁、一行测算依据 */
.ef { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); text-align: left; }
.ef li { display: flex; flex-direction: column; padding: 28px clamp(20px, 3vw, 44px) 30px; }
.ef li:first-child { padding-left: 0; }
.ef li + li { box-shadow: inset 1px 0 0 var(--hair); }
.ef-k { font-size: 15px; font-weight: 500; color: var(--ink); }
.ef-b { margin-top: 18px; font: 700 clamp(34px, 3.6vw, 52px)/1.1 var(--serif); color: var(--steel); }
.ef-was { margin-top: 8px; font-size: 13.5px; color: var(--ink-35); }
.ef-was s { text-decoration-thickness: 1px; }
.ef-who { margin-top: auto; padding-top: 22px; font-size: 13px; color: var(--ink-60); }
.ef li small { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--mute); }
.ef-cap { margin-top: 18px; }
.ef-sec + .c-trade { padding-top: clamp(80px, 9vw, 128px); }
@media (max-width: 760px) {
  .ch-cols { display: none; }
  .ch-r { grid-template-columns: 28px 1fr; row-gap: 6px; padding: 14px 0; font-size: 14px; }
  .ch-r::before { grid-row: 1; }
  .ch-line { left: 13px; }
  .ch-ai, .ch-hu { grid-column: 2; }
  .ch-r.core { margin: 6px -10px; padding: 18px 10px; }
  .ch-r.core .ch-n b { font-size: 19px; }
  .ef { grid-template-columns: 1fr; }
  .ef li { padding: 22px 0; }
  .ef li + li { box-shadow: none; border-top: .5px solid var(--hair); }
  .ef-b { margin-top: 10px; }
  .ef-who { padding-top: 14px; }
}
.ef-sec .ef-cap { color: var(--ink-60); font-size: 13px; }


/* 关键一刻（企业运营，11-01 第四版）：左边一张意象的消息卡，右边 A、B 两个项目的人员点阵，底下处理记录。
   data-step：0 未开始；1 正在输入、卡片弹出；2 批次没写、等确认；3 已确认、橙点飞进 B。没有 JS 或减少动效时直接是 3 */
.tr-main { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 104px); text-align: left; }

/* 消息卡（飞书消息卡的样子）：机器人头像和名字、彩色标题栏、一条 A → B 路线、左对齐按钮、灰色来源 */
.mc { position: relative; --fs: hsl(221 100% 60%); }
.mc-typing { position: absolute; left: 44px; top: 30px; display: none; gap: 5px; padding: 13px 15px; border-radius: 4px 12px 12px 12px; background: var(--paper); box-shadow: 0 10px 30px -18px hsl(210 40% 20% / .3), 0 0 0 .5px var(--hair); }
.mc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-35); animation: mc-dot 1s ease-in-out infinite; }
.mc-typing i:nth-child(2) { animation-delay: .15s; }
.mc-typing i:nth-child(3) { animation-delay: .3s; }
.mc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; color: var(--mute); transition: opacity .4s; }
.mc-top b { font-weight: 500; color: var(--ink); }
.mc-top em { padding: 0 5px; border-radius: 4px; background: hsl(221 100% 60% / .1); color: var(--fs); font-style: normal; font-size: 11px; line-height: 18px; }
.mc-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--steel); color: #fff; font-size: 14px; }
.mc-top time { margin-left: 2px; font-variant-numeric: tabular-nums; }
.mc-card { margin-left: 42px; overflow: hidden; border-radius: 4px 12px 12px 12px; background: var(--paper); box-shadow: 0 1px 2px hsl(0 0% 7% / .04), 0 28px 64px -34px hsl(210 40% 20% / .3), 0 0 0 .5px var(--hair); transform-origin: 0 0; }
.mc-head { padding: 13px 18px; background: hsl(40 10% 95%); font-size: 15px; font-weight: 600; transition: background .5s var(--ease); }
.mc-head .sw .o { color: var(--ink); }
.mc-head .n { color: hsl(221 80% 42%); }
.mc-body { padding: 16px 18px 14px; }
.mc-route { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 30px; padding: 26px 16px 14px; border-radius: 8px; background: var(--cream); }
.mc-end b { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.mc-end > span { display: inline-grid; margin-top: 2px; font-size: 12.5px; color: var(--mute); }
.mc-end.to { text-align: right; }
.mc-end.to .sw { justify-items: end; }
.mc-path { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-35) 0 4px, transparent 4px 9px); }
.mc-run { position: absolute; left: 100%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px hsl(22 92% 52% / .18); font-style: normal; }
.mc-run b { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 400; line-height: 1.6; white-space: nowrap; }
.sw { position: relative; display: inline-grid; vertical-align: top; }
.sw > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .35s, transform .5s var(--ease); }
.sw .o { color: hsl(22 90% 42%); }
.sw .n { color: var(--steel); }
.mc-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .6s cubic-bezier(.34, 1.3, .64, 1); }
.mc-fold > div { min-height: 0; overflow: hidden; }
.mc-foot { padding-top: 14px; }
.mc-sw { display: grid; align-items: center; }
.mc-sw > * { grid-area: 1 / 1; transition: opacity .3s, transform .45s var(--ease); }
.mc-acts { display: flex; gap: 8px; }
.mc-btn { min-height: 34px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; transition: transform .15s var(--ease), background .2s; }
.mc-btn.pri { background: var(--fs); box-shadow: none; color: #fff; }
.mc-btn.press { transform: scale(.94); }
.mc-btn:focus-visible { outline: 2px solid var(--steel-hi); outline-offset: 2px; }
.mc-res { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; font-size: 13.5px; color: hsl(221 80% 42%); white-space: nowrap; }
.mc-ck { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.mc-note { margin-top: 12px; font-size: 12px; color: var(--mute); }

/* 右边：两根点阵从同一条底线往上长，下面写项目、批次、人数和日人工成本 */
.tr-pj { position: relative; }
.tr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); border-bottom: 1px solid var(--ink); }
.tr-dots { display: flex; flex-wrap: wrap-reverse; align-content: flex-start; width: calc(var(--c, 6) * var(--s, 22px)); height: calc(9 * var(--s, 22px)); padding-bottom: 6px; }
.tr-dots > span { width: var(--s, 22px); height: var(--s, 22px); display: grid; place-items: center; }
.tr-dots > span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-35); }
.tr-dots .me::before { background: transparent; }
.tr-dots .slot::before { background: var(--ember); box-shadow: 0 0 0 4px hsl(22 92% 52% / .16); }
.tr-labs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); padding-top: 16px; }
.tr-lab { display: grid; gap: 4px; font-size: 13px; color: var(--ink-60); }
.tr-lab b { font-size: 15px; font-weight: 500; color: var(--ink); }
.tr-cost { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; margin-top: 12px; }
.tr-cost strong { grid-column: 1 / -1; font: 600 clamp(28px, 3vw, 38px)/1.2 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.tr-lab.b .tr-cost strong { color: var(--steel); }
.tr-cost em { grid-row: 1; grid-column: 2; font-style: normal; color: var(--mute); transition: opacity .4s; }
.tr-lab.b .tr-cost em { color: var(--steel); }
.tr-him { position: absolute; left: 0; top: 0; display: none; width: 0; height: 0; pointer-events: none; }
.tr-him i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 5px hsl(22 92% 52% / .18); }
.tr-him b { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 400; white-space: nowrap; }

/* 处理记录 */
.tr-log { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; text-align: left; font-size: 13px; line-height: 1.6; color: var(--ink-60); }
.tr-log li { padding-top: 16px; border-top: 2px solid var(--steel-hi); transition: border-color .4s, color .4s; }
.tr-log li.hu { border-top-color: var(--ember); }
.tr-log time { display: block; margin-bottom: 2px; font-variant-numeric: tabular-nums; color: var(--ink); }

/* 已确认（也是没有动画时的样子） */
.sw .o { opacity: 0; transform: translateY(-8px); }
.mc-acts { opacity: 0; transform: scale(.9); pointer-events: none; }
.tr[data-step="3"] .mc-head, .tr:not(.armed) .mc-head { background: hsl(221 100% 60% / .1); }

/* 走动画 */
.tr.armed .sw .n, .tr.armed .mc-res { opacity: 0; transform: translateY(8px); }
.tr.armed .sw .o { opacity: 1; transform: none; }
.tr.armed .mc-acts { opacity: 1; transform: none; pointer-events: auto; }
.tr.armed .mc-run { left: 0; }
.tr.armed[data-step="3"] .sw .o { opacity: 0; transform: translateY(-8px); }
.tr.armed[data-step="3"] .sw .n { opacity: 1; transform: none; transition-delay: .12s; }
.tr.armed[data-step="3"] .mc-acts { opacity: 0; transform: scale(.9); pointer-events: none; }
.tr.armed[data-step="3"] .mc-res { opacity: 1; transform: none; transition-delay: .15s; }
.tr.armed[data-step="3"] .mc-ck path { animation: mc-ck .5s ease .3s both; }
/* 确认后，卡里这条路上的橙点和右边那颗一起走 */
.tr.armed[data-step="3"] .mc-run { animation: mc-run 1.1s cubic-bezier(.5, 0, .2, 1) .45s both; }
.tr.armed[data-step="2"] .mc-path { animation: mc-flow .9s linear infinite; }
/* 1：头像先出来、正在输入；到了（in）卡片弹进来 */
.tr.armed[data-step="0"] .mc-top { opacity: 0; }
.tr.armed .mc-card { opacity: 0; transform: translateY(14px) scale(.94); }
.tr.armed.in .mc-card { opacity: 1; transform: none; animation: mc-pop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.tr.armed[data-step="1"]:not(.in) .mc-typing { display: inline-flex; animation: mc-in .3s var(--ease) both; }
.tr.armed.in .mc-route { animation: mc-in .45s var(--ease) .25s both; }
.tr.armed.in .mc-note { animation: mc-in .45s var(--ease) .35s both; }
.tr.armed:not([data-step="2"]):not([data-step="3"]) .mc-fold { grid-template-rows: 0fr; }
.tr.armed:not([data-step="2"]):not([data-step="3"]) .mc-foot { opacity: 0; }
.tr.armed[data-step="2"] .mc-foot { animation: mc-in .5s var(--ease) .15s both; }
.tr.armed[data-step="2"] .mc-end.to .sw .o { animation: mc-nudge .5s ease .3s both; }
.tr.armed[data-step="2"] .mc-btn.pri { animation: mc-breathe 1.6s ease-in-out .6s infinite; }
/* 右边：橙点由 JS 摆到位、飞过去；B 的空位在等确认时是一圈虚线 */
.tr.armed .tr-him { display: block; }
.tr.armed .tr-him i, .tr.armed .tr-him b { transition: opacity .4s, transform .5s var(--ease); }
.tr.armed[data-step="0"] .tr-him i, .tr.armed[data-step="0"] .tr-him b { opacity: 0; transform: scale(.4); }
.tr.armed[data-step="0"] .tr-him b { transform: translateX(-50%) scale(.6); }
.tr.armed.in[data-step="1"] .tr-him i { animation: mc-ping 1.2s ease-out .4s 2; }
.tr.armed .tr-dots .slot::before { background: transparent; box-shadow: none; }
.tr.armed[data-step="2"] .tr-dots .slot::before, .tr.armed[data-step="3"] .tr-dots .slot::before { box-shadow: inset 0 0 0 1.5px var(--ember); animation: mc-ring 1.4s ease-in-out infinite; }
.tr.armed[data-step="3"] .tr-dots .slot::before { animation: none; box-shadow: none; }
.tr.armed:not(.landed) .tr-cost em { opacity: 0; }
.tr.armed .tr-log li { border-top-color: var(--hair); color: var(--mute); }
.tr.armed .tr-log li time { color: var(--mute); }
.tr.armed.in .tr-log li:nth-child(-n+2), .tr.armed[data-step="2"] .tr-log li:nth-child(3), .tr.armed[data-step="3"] .tr-log li { border-top-color: var(--steel-hi); color: var(--ink-60); }
.tr.armed[data-step="2"] .tr-log li:nth-child(3), .tr.armed[data-step="3"] .tr-log li:nth-child(3) { border-top-color: var(--ember); }
.tr.armed.in .tr-log li:nth-child(-n+2) time, .tr.armed[data-step="2"] .tr-log li:nth-child(3) time, .tr.armed[data-step="3"] .tr-log li time { color: var(--ink); }
.tr.reset * { transition: none !important; animation: none !important; }
@keyframes mc-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes mc-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes mc-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes mc-ck { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mc-run { from { left: 0; } to { left: 100%; } }
@keyframes mc-flow { to { background-position: 9px 0; } }
@keyframes mc-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes mc-breathe { 0%, 100% { box-shadow: 0 0 0 0 hsl(221 100% 60% / .35); } 50% { box-shadow: 0 0 0 8px hsl(221 100% 60% / 0); } }
@keyframes mc-ping { 0% { box-shadow: 0 0 0 0 hsl(22 92% 52% / .45); } 100% { box-shadow: 0 0 0 16px hsl(22 92% 52% / 0); } }
@keyframes mc-ring { 50% { box-shadow: inset 0 0 0 1.5px hsl(22 92% 52% / .3); } }
@media (max-width: 1000px) {
  .tr-main { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; gap: 48px; }
}
@media (max-width: 760px) {
  .mc-card { margin-left: 0; }
  .mc-typing { left: 0; top: 46px; }
  .mc-body { padding: 14px 14px 12px; }
  .mc-route { gap: 28px; padding: 26px 12px 12px; }
  .tr-dots { --s: 18px; }
  .tr-log { grid-template-columns: 1fr 1fr; row-gap: 20px; }
}
.tr-sec .rp-foot { margin-top: 28px; }
.tr-sec .viz-cap { color: var(--ink-60); font-size: 13.5px; }
.tr-sec .replay { flex: none; color: var(--ink-60); box-shadow: inset 0 0 0 .5px var(--hair); background: transparent; }

/* 光电「智能工艺」（11-01 第二版）：深色一节，左边干涉图（canvas），右边参数和每一道抛光后的粗糙度。
   case.js 加 armed 后按道走：li.on 是已经走到的道，li.cur 是当前这道；fin 是走完。没有 JS 时全部 on + fin */
.lz { margin-top: clamp(96px, 11vw, 160px); padding: clamp(96px, 11vw, 150px) var(--x); background: radial-gradient(50% 60% at 28% 58%, hsl(200 60% 22% / .5), transparent 70%), #091019; color: #fff; }
.lz .c-label { color: hsl(0 0% 100% / .5); }
.lz .c-head h2 { color: #fff; }
.lz-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(40px, 6vw, 104px); align-items: center; text-align: left; }
.lz-disc { justify-self: center; width: min(100%, 470px); margin: 0; }
.lz-disc canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #0E1A2A; box-shadow: 0 0 0 1px hsl(195 60% 80% / .22), 0 0 0 10px hsl(195 60% 80% / .04), 0 30px 120px -20px hsl(195 80% 55% / .35); }
.lz-disc figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; font-size: 13px; color: hsl(0 0% 100% / .5); }
.lz-disc figcaption b { font: 600 clamp(24px, 2.4vw, 32px)/1 var(--serif); color: #fff; }
.lz-pv { display: inline-block; min-width: 2.6em; }
.lz-ord b { display: block; font-size: 19px; font-weight: 600; }
.lz-ord span { display: block; margin-top: 5px; font-size: 13px; color: hsl(0 0% 100% / .55); }
.lz-from { margin-top: 26px; padding-top: 20px; border-top: 1px solid hsl(0 0% 100% / .12); font-size: 12.5px; color: hsl(198 80% 72%); }
.lz-ps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 14px 0 0; }
.lz-ps dt { font-size: 12px; color: hsl(0 0% 100% / .45); }
.lz-ps dd { margin: 2px 0 0; font-size: 15px; }
.lz-pass { display: grid; gap: 16px; list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid hsl(0 0% 100% / .12); }
.lz-pass li { display: grid; grid-template-columns: 58px minmax(0, 1fr) 62px; align-items: center; gap: 14px; font-size: 13px; color: hsl(0 0% 100% / .32); transition: color .4s; }
.lz-pass b { font-weight: 400; }
.lz-bar { position: relative; height: 4px; border-radius: 2px; background: hsl(0 0% 100% / .07); }
.lz-bar::after { content: ""; position: absolute; left: calc(var(--spec) * 100%); top: -6px; bottom: -6px; width: 1px; background: hsl(198 80% 72% / .7); }
.lz-bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: 2px; background: hsl(0 0% 100% / .32); transform-origin: left; transition: transform 1s var(--ease), background .4s; }
.lz-pass em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; transition: opacity .4s; }
.lz-pass li.on { color: hsl(0 0% 100% / .62); }
.lz-pass li.cur, .lz-main.fin .lz-pass li:last-child { color: #fff; }
.lz-pass li.cur .lz-bar i, .lz-main.fin .lz-pass li:last-child .lz-bar i { background: hsl(195 85% 72%); }
.lz-main.fin .lz-pass li:last-child em { color: hsl(195 85% 78%); }
.lz-done { display: flex; align-items: flex-start; gap: 6px; margin-top: 26px; font-size: 13.5px; line-height: 1.6; color: hsl(195 85% 78%); transition: opacity .5s, transform .6s var(--ease); }
.lz-done .mc-ck { margin-top: 3px; }
.lz-main.armed .lz-pass li:not(.on) .lz-bar i { transform: scaleX(0); }
.lz-main.armed .lz-pass li:not(.on) em { opacity: 0; }
.lz-main.armed:not(.fin) .lz-done { opacity: 0; transform: translateY(6px); }
.lz-main.armed.fin .mc-ck path { animation: mc-ck .5s ease .2s both; }
.lz .viz-cap { color: hsl(0 0% 100% / .5); font-size: 13.5px; }
.lz .replay { flex: none; color: hsl(0 0% 100% / .7); box-shadow: inset 0 0 0 .5px hsl(0 0% 100% / .25); background: transparent; }
.lz .rp-foot { margin-top: 36px; }
.lz + .c-moment { margin-top: 0; }

/* 光电关键一刻「超差返抛」（11-01 第二版）：工序线 + 交期 + 检测卡。data-step：0 未开始；1 走到检测；2 超差、等确认；3 已确认，绕回抛光再走到交付（fin 是走完） */
.lp { max-width: 1080px; margin: 0 auto; text-align: left; }
.lp-track { position: relative; padding: 88px 0 72px; }
.lp-st { position: relative; z-index: 1; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.lp-st li { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 64px; font-size: 14.5px; color: var(--mute); transition: color .4s; }
.lp-st i { width: 12px; height: 12px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--ink-35); transition: background .4s, box-shadow .4s; }
.lp-st b { font-weight: 400; }
.lp-st li.on { color: var(--ink); }
.lp-st li.on i { background: var(--steel); box-shadow: none; }
.lp-st li.bad i { background: var(--ember); box-shadow: 0 0 0 5px hsl(22 92% 52% / .16); }
.lp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lp-line { fill: none; stroke: var(--ink-35); stroke-width: 1; }
.lp-back { fill: none; stroke: var(--ember); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lp-dot { fill: var(--steel); transition: fill .3s; }
.lp-halo { fill: hsl(210 52% 36% / .14); transition: fill .3s; }
.lp.bad .lp-dot { fill: var(--ember); }
.lp.bad .lp-halo { fill: hsl(22 92% 52% / .18); }
.lp-flag { position: absolute; z-index: 2; top: 0; padding: 0; transform: translateX(-50%); font-size: 14px; font-weight: 500; white-space: nowrap; }
.lp-flag > span { padding: 5px 12px; border-radius: 999px; }
.lp-flag .o { color: hsl(22 90% 42%); background: var(--paper); box-shadow: inset 0 0 0 .75px hsl(22 92% 52% / .6); }
.lp-flag .n { background: hsl(210 52% 36% / .1); justify-self: center; }
.lp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 4vw, 64px); align-items: center; }
.lp-date small { display: block; font-size: 13px; color: var(--ink-60); }
.lp-date b { display: flex; align-items: baseline; gap: 18px; margin-top: 8px; font: 600 clamp(32px, 3.4vw, 48px)/1.1 var(--serif); }
.lp-date s { font-size: .5em; font-weight: 400; color: var(--ink-35); text-decoration-thickness: 1px; transition: opacity .4s; }
.lp-date b span { color: var(--steel); transition: opacity .5s, transform .6s var(--ease); }
.lp-date p { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; color: var(--steel); transition: opacity .5s .3s; }
.lp.armed:not(.fin) .lp-date b span, .lp.armed:not(.fin) .lp-date p { opacity: 0; }
.lp.armed:not(.fin) .lp-date b span { transform: translateX(-10px); }
.lp.armed:not(.fin) .lp-date s { text-decoration-color: transparent; color: var(--ink); font-size: 1em; font-weight: 600; }
.lp.armed:not(.fin) .lp-date b { gap: 0; }
.lp.armed:not([data-step="3"]) .lp-back { stroke-dashoffset: 1; }
.lp.armed[data-step="3"] .lp-back { transition: stroke-dashoffset 1.1s var(--ease); }
.lp-flag { transition: opacity .4s, transform .5s var(--ease); }
.lp.armed:not(.hit) .lp-flag { opacity: 0; transform: translateX(-50%) translateY(6px); }
.lp.armed:not(.ok) .lp-flag .o { opacity: 1; transform: none; }
.lp.armed:not(.ok) .lp-flag .n { opacity: 0; transform: translateY(8px); }
.lp.armed:not(.ok) .rw-st .o { opacity: 1; transform: none; }
.lp.armed:not(.ok) .rw-st .n { opacity: 0; transform: translateY(8px); }
.lp.armed[data-step="0"] .lp-card, .lp.armed[data-step="1"] .lp-card { opacity: 0; transform: translateY(14px); }

/* 检测卡（超差返抛用） */
.rw-card { padding: 20px 22px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 .5px var(--hair), 0 28px 60px -36px hsl(210 40% 20% / .35); transition: opacity .5s, transform .6s var(--ease); }
.rw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rw-head b { font-size: 16px; font-weight: 600; }
.rw-st > span { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; }
.rw-st .o { color: hsl(22 90% 42%); box-shadow: inset 0 0 0 .75px hsl(22 92% 52% / .6); }
.rw-st .n { background: hsl(210 52% 36% / .1); justify-self: end; }
.rw-why { margin-top: 16px; font-size: 13.5px; line-height: 1.65; color: var(--ink-60); }
.rw-plan { margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--ink); }
.rw-foot { display: grid; margin-top: 18px; }
.rw-foot > * { grid-area: 1 / 1; transition: opacity .3s, transform .45s var(--ease); }
.rw-acts { display: flex; justify-content: flex-end; gap: 8px; }
.rw-res { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--steel); }
.lp .rw-acts { opacity: 0; transform: scale(.9); pointer-events: none; }
.lp.armed[data-step="2"] .rw-acts { opacity: 1; transform: none; pointer-events: auto; }
.lp.armed[data-step="2"] .ui-btn:not(.ghost) { animation: cg-breathe 1.6s ease-in-out .6s infinite; }
.lp.armed:not([data-step="3"]) .rw-res { opacity: 0; transform: translateY(8px); }
.lp.armed[data-step="3"] .rw-res { transition-delay: .15s; }
.lp.armed[data-step="3"] .rw-res .mc-ck path { animation: mc-ck .5s ease .3s both; }
.lp .ui-btn.press { transform: scale(.93); }
.lp-sec .viz-cap { color: var(--ink-60); font-size: 13.5px; }
.lp-sec .replay { flex: none; color: var(--ink-60); box-shadow: inset 0 0 0 .5px var(--hair); background: transparent; }
.lp.reset *, .lz-main.reset * { transition: none !important; animation: none !important; }
@media (max-width: 1000px) {
  .lz-main, .lp-row { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .lz { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: 100svh; padding: 88px var(--x) 64px; }
  .lz-disc { width: 82%; }
  .lp-track { padding: 80px 0 64px; }
  .lp-st li { width: 40px; font-size: 12.5px; gap: 12px; }
  .lp-flag { font-size: 12.5px; }
  .lp-date b { font-size: 30px; }
}

/* 手机（11-01）：每一节撑满一屏、内容竖直居中，节与节之间一条发丝线分开；上下留白收紧到一屏能装下 */
@media (max-width: 760px) {
  .c-sec, .c-moment { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: 100svh; margin-top: 0; padding: 88px var(--x) 64px; }
  .c-sec > .c-wrap, .c-moment > .c-wrap { width: 100%; }
  .c-sec + .c-sec { border-top: .5px solid var(--hair); }
  .c-head { margin-bottom: 28px; }
  .c-next { min-height: 72svh; }
}
.lz-pl { margin-top: 30px; padding-top: 20px; border-top: 1px solid hsl(0 0% 100% / .12); font-size: 12px; color: hsl(0 0% 100% / .45); }
.lz-pl + .lz-pass { margin-top: 14px; padding-top: 0; border-top: 0; }
/* 手机正文放松（11-02 用户说字密）：说明类文字行距 1.85、字距 .02em */
@media (max-width: 760px) {
  .c-lead, .pains li, .ch-r, .tw-p, .tw-ai, .tw-hu, .rw-why, .rw-plan, .ln-c, .ui .note { line-height: 1.85; letter-spacing: .02em; text-wrap: pretty; }
}
/* 手机全流程（11-02 用户要一屏装下）：环节名一列，只有展开的那行显示 AI 做什么、谁确认；重点环节默认展开，底色跟着展开的那行走 */
@media (max-width: 760px) {
  .ch-r { padding: 11px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ch-r:focus-visible { outline: 2px solid var(--steel-hi); outline-offset: 2px; border-radius: 8px; }
  .ch-r .ch-n { flex-direction: row; justify-content: space-between; align-items: center; }
  .ch-r .ch-n b, .ch-r.core .ch-n b { font-size: 16px; }
  .ch-r .ch-n::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 1.2px solid var(--ink-35); border-bottom: 1.2px solid var(--ink-35); transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
  .ch-r:not(.open) .ch-ai, .ch-r:not(.open) .ch-hu { display: none; }
  .ch-r.core { margin: 0; padding: 11px 0; background: none; border-bottom-color: var(--hair); border-radius: 0; }
  .ch-r.core:not(.open) .ch-n b { color: var(--steel); }
  .ch-r.open { margin: 4px -10px; padding: 14px 10px; background: var(--steel-soft); border-bottom-color: transparent; border-radius: 10px; }
  .ch-r.open .ch-n::after { transform: translateY(2px) rotate(-135deg); }
  .ch-r.open .ch-ai { font-size: 14.5px; font-weight: 500; }
  .ch-r.open .ch-n b { font-size: 18px; }
}
@media (max-width: 760px) {
  .ch-r .ch-n { line-height: 1.4; }
  .c-sec, .c-moment { padding: 80px var(--x) 44px; }
  .c-head { margin-bottom: 22px; }
}
/* 手机减量（11-02 用户：太密）：每屏只讲一件事——标题、一张图或一段动效、一两行字。
   次要的图注、测算依据、辅助图表在手机上不显示；标题一律左对齐 */
@media (max-width: 760px) {
  .c-center .c-head h2 { text-align: left; }
  .ef li small { display: none; }
  .ef-who { padding-top: 10px; }
  /* 图注只留「演示数据」，奖金页的「点一项看出处」保留 */
  .rp-foot .viz-cap:not(.keep) { font-size: 0; }
  .rp-foot .viz-cap:not(.keep)::before { content: "演示数据"; font-size: 12.5px; }
  /* 企业运营：去掉点阵和过程记录，留飞书卡片和两个项目的人工成本 */
  .tr-cols, .tr-log, .tr.armed .tr-him { display: none; }
  .tr-labs { margin-top: 8px; }
  /* 锻造：去掉下面四个小标签 */
  .tf-chips { display: none; }
  /* 运维：自动执行的三条查询只留命令一行 */
  .cg-lane.auto .cg-cmds { gap: 0; }
  .cg-lane.auto .cg-c { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; background: none; box-shadow: none; border-bottom: .5px solid var(--hair); border-radius: 0; }
  .cg-lane.auto .cg-c p { display: none; }
  .cg-lane.auto .cg-c code { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-lane.auto .cg-c em { flex: none; margin: 0; padding: 0; }
  .cg-lane.deny .cg-c p { display: none; }
  /* 奖金：算式排成一行；出处只留单据名，不展开表格 */
  .og-f.on { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .og-v { font-size: 26px; }
  .og-ln { gap: 8px; }
  .og-docs.on { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .og-doc { padding: 8px 12px; }
  .og-doc table { display: none; }
  .og-dh { margin: 0; gap: 8px; }
  /* 光学：干涉图缩小放左边，订单名和来源放右边 */
  .lz { padding: 80px var(--x) 44px; }
  .lz-main { grid-template-columns: 128px minmax(0, 1fr); gap: 0 18px; align-items: center; }
  .lz-panel { display: contents; }
  .lz-disc { grid-row: 1 / span 2; width: 128px; }
  .lz-disc figcaption { display: none; }
  .lz-ord, .lz-from { grid-column: 2; align-self: end; }
  .lz-from { align-self: start; margin-top: 8px; }
  .lz-ps, .lz-pl, .lz-pass, .lz-done { grid-column: 1 / -1; }
  .lz-ps { margin-top: 22px; }
}
@media (max-width: 760px) {
  .rp-foot .viz-cap:not(.keep) { flex: 1; white-space: nowrap; }
  .cg-lane.auto .cg-c { flex-direction: row; }
  .cg-lane.auto .cg-c code { flex: 1; min-width: 0; text-align: left; }
  /* 锻造竖版图底部留白多，往上收 */
  .tf-stage { margin-bottom: -56px; }
}
/* 手机（11-02 用户改口）：不再每节撑满一屏，内容多高节就多高；节与节上下各留 64px，发丝线分开 */
@media (max-width: 760px) {
  .c-sec, .c-moment, .lz { min-height: 0; padding-top: 64px; padding-bottom: 64px; }
}
/* 手机：分工与授权、成效跟全流程同一套样子——发丝线分行、宋体 16–17 号环节名、标签和数字靠右（11-02 用户：不好看、不协调） */
@media (max-width: 760px) {
  .flw { margin-top: 0; padding: 0; }
  .flw-track { left: 9px; top: 26px; bottom: 26px; background: var(--hair); }
  .flw-st { gap: 0; border-top: 1px solid var(--ink); }
  .flw-st li { flex-wrap: nowrap; gap: 0 14px; padding: 13px 0; border-bottom: .5px solid var(--hair); }
  .flw-node { flex: none; width: 19px; height: 26px; }
  .flw-node::before { width: 9px; height: 9px; }
  .flw-st li.gate .flw-node::before { width: 9px; height: 9px; }
  .flw-st li.gate .flw-node::after { inset: 3px -1px; }
  .flw-st b { font-size: 17px; letter-spacing: .02em; }
  .flw-st em { margin-left: auto; height: 24px; padding: 0 10px; font-size: 12.5px; }
  .flw-dot { display: none; }
  .flw-legend { margin-top: 16px; padding-top: 0; border-top: 0; font-size: 12.5px; gap: 8px 22px; }

  .ef { border-top: 1px solid var(--ink); }
  .ef li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k b" "who was"; align-items: baseline; gap: 6px 16px; padding: 18px 0; }
  .ef li + li { border-top: .5px solid var(--hair); }
  .ef-k { grid-area: k; font-size: 15px; }
  .ef-b { grid-area: b; margin: 0; font-size: 24px; text-align: right; }
  .ef-was { grid-area: was; margin: 0; font-size: 12.5px; text-align: right; }
  .ef-who { grid-area: who; margin: 0; padding: 0; font-size: 12.5px; }
  .ef-cap { margin-top: 16px; font-size: 12.5px; }
}
@media (max-width: 760px) {
  /* 图例在手机上不显示：橙色标签已写明哪一步由人确认 */
  .flw-legend { display: none; }
  /* 节点、竖线、环节名的位置与全流程对齐（线在 13px，名字从 44px 起） */
  .flw-track { left: 13px; }
  .flw-node { width: 27px; }
  .flw-st li { gap: 0 17px; }
}
/* 手机：企业运营关键一刻的飞书卡片按真实审批卡片排——撑满宽度、字段逐行（员工 / 调出 / 调入）、手机原生字号；
   去掉 A→B 的虚线示意（11-02 用户：太像 demo）。电脑版不变 */
@media (max-width: 760px) {
  .mc-top { margin-bottom: 8px; font-size: 13px; }
  .mc-av { width: 30px; height: 30px; font-size: 13px; }
  .mc-card { margin-left: 0; border-radius: 12px; }
  .mc-head { padding: 14px 16px; font-size: 16px; }
  .mc-body { padding: 4px 16px 14px; }
  .mc-route { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0; align-items: baseline; padding: 0; border-radius: 0; background: none; font-size: 15px; }
  .mc-route::before, .mc-route::after, .mc-end::before, .mc-end > * { padding: 12px 0; border-bottom: .5px solid var(--hair); }
  .mc-route::before { content: "员工"; order: -2; color: var(--mute); font-size: 14px; }
  .mc-route::after { content: "周××"; order: -1; grid-column: span 2; color: var(--ink); }
  .mc-end { display: contents; text-align: left; }
  .mc-end::before { content: "调出"; color: var(--mute); font-size: 14px; }
  .mc-end.to::before { content: "调入"; }
  .mc-end b { font-size: 15px; font-weight: 400; }
  .mc-end > span { margin: 0; font-size: 14px; text-align: right; }
  .mc-end.to .sw { justify-items: end; }
  .mc-end.to .sw .o { color: var(--ember); }
  .mc-path { display: none; }
  .mc-foot { padding-top: 14px; }
  .mc-acts { gap: 10px; }
  .mc-btn { flex: 1; min-height: 40px; font-size: 14.5px; }
  .mc-res { font-size: 14.5px; }
  .mc-note { margin-top: 10px; }
}
@media (max-width: 760px) {
  /* 飞书卡片「调入」一行跟上面两行同样左对齐 */
  .mc-end.to, .mc-end.to::before, .mc-end.to b { text-align: left; }
  .mc-end.to > span { text-align: right; }
  /* 分工与授权：蓝色流转点在手机上也显示 */
  .flw-dot { display: block; z-index: 2; }
}
@media (max-width: 760px) {
  .mc-route { align-items: stretch; }
  .mc-route::before, .mc-route::after, .mc-end::before, .mc-end > * { justify-self: stretch; align-self: stretch; margin: 0; display: block; }
  .mc-end > span.sw { display: grid; }
}
/* 手机难点：三个数并成一行，下面两句跟着，不再一个数占一整行 */
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fact, .fact + .fact { padding: 18px 10px 0 0; border-bottom: 0; }
  .fact + .fact { padding-left: 12px; border-left: .5px solid var(--hair); }
  .fact b { font-size: 30px; }
  .fact b small { margin-left: 3px; }
  .fact span { margin-top: 8px; font-size: 12.5px; line-height: 1.6; }
  .pains { margin-top: 24px; gap: 0; }
  .pains li { padding: 12px 0; font-size: 14.5px; }
}
@media (max-width: 760px) {
  /* 图例和「演示数据」排一行 */
  .yr-foot .viz-cap { margin-left: auto; width: auto; }
}