/* Opus 5.5 新版（2026-10-09）。只追加、不改 main.css：删掉 index.html 里引用这个文件的一行即可整体撤回样式。
 * 分块：A 壳牌 / B 雀巢能恩 / C 晶澳流程提效 / D 凯度项目入口（教育一章的样式已并回 main.css）。各块互不依赖，A、B 共用开头的“小图通用”。 */

/* ---- 小图通用（壳牌、能恩） */
.jw-shell .o-axis, .jw-nan .o-axis { fill: none; stroke: var(--line); stroke-width: 1; }
.o-mute { color: var(--mute-2); }
.o-key { color: var(--accent-ink); font-weight: 600; }
[data-o] { opacity: 0; }
.jw-sc.is-static [data-o] { transition: none; }

/* ---- A 壳牌 */
.jw-shell .o-ln { fill: none; stroke: #9a9aa2; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; }
.jw-shell .o-ln--hot { stroke: var(--accent); stroke-width: 2; }
.jw-shell .o-name { color: var(--ink-2); font-weight: 600; }
.jw-shell .o-end { fill: var(--accent); }
.jw-shell .o-band { fill: var(--accent-soft); stroke: none; }
.jw-shell .o-judge { color: var(--ink-2); }
.jw-shell .o-judge b { color: var(--accent-ink); font-weight: 600; }
.jw-shell .o-seg { fill: #e4e4e9; }
.jw-shell .o-seg--lead { fill: #fff; stroke: #c9c9cf; stroke-width: 1; transition: fill 0.35s, stroke 0.35s; }
.jw-shell .o-seg--lead.is-on { fill: var(--accent); stroke: var(--accent); }
.jw-shell .o-fly { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.jw-shell .o-target { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.jw-shell .o-act { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; }
.jw-shell .o-now { fill: var(--ink-2); }
.jw-shell .o-proj { fill: none; stroke: #b9b9c0; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.jw-shell .o-proj.is-cur { stroke: var(--accent); stroke-width: 1.8; }
.jw-shell .o-mark { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; }
.jw-shell .o-markdot { fill: var(--bg); stroke: var(--accent); stroke-width: 1.6; }
.jw-shell .o-ver { fill: var(--bg); stroke: #b9b9c0; stroke-width: 1.2; opacity: 1; transition: fill 0.2s, stroke 0.2s; }
.jw-shell .o-ver.is-on { fill: var(--accent); stroke: var(--accent); }
.jw-shell .o-bar { fill: #d2d2d7; transform-box: fill-box; transform-origin: left; transform: scaleX(0); opacity: 1; }
.jw-shell .o-bar--hot { fill: var(--accent); }
.jw-shell .o-big { font-size: 0.95em; }
.jw-shell .o-tick { font-variant-numeric: tabular-nums; }

/* ---- B 雀巢能恩 */
.jw-nan .o-tbl { fill: #fff; stroke: #c9c9cf; stroke-width: 1; }
.jw-nan .o-rowl { fill: none; stroke: #efeff2; stroke-width: 1; }
.jw-nan .o-rn { fill: #c4c4ca; }
.jw-nan .o-cell { fill: #cfcfd5; }
.jw-nan .o-cell--q { fill: var(--accent); transform-box: fill-box; transform-origin: left; transform: scaleX(0); opacity: 1; }
.jw-nan .o-ph { fill: none; stroke: #d0d0d5; stroke-width: 1; stroke-dasharray: 2 2; }
.jw-nan .o-colhi { fill: var(--accent-soft); }
.jw-nan .o-qh { color: var(--mute-2); transition: color 0.3s; }
.jw-nan .o-qh--on.is-on { color: var(--accent-ink); font-weight: 600; }
.jw-nan [data-o^="qh"] { opacity: 1; }
.jw-nan .o-page { fill: #fff; stroke: #a9a9b0; stroke-width: 1; }
.jw-nan .o-pt { fill: var(--ink-2); }
.jw-nan .o-tl { fill: #c9c9ce; transform-box: fill-box; transform-origin: left; transform: scaleX(0); opacity: 1; }
.jw-nan .o-drop { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; }
.jw-nan .o-tok { fill: var(--accent); }
.jw-nan .o-tok.is-set { fill: var(--ink-2); }

/* ---- C 晶澳 · 流程提效（新版） */
.jw-flow .o-sheet, .jw-flow .o-doc { fill: #fff; stroke: #d9d9de; stroke-width: 1; }
.jw-flow .o-rowl { fill: none; stroke: #ececf0; stroke-width: 1; }
.jw-flow .o-gl { fill: #8a8b95; }
.jw-flow .o-gl--tok { fill: #8a8b95; }
.jw-flow .o-seal { fill: var(--bg); stroke: #dcdce2; stroke-width: 1; transition: fill 0.25s, stroke 0.25s; }
.jw-flow .o-tickp { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.25s; }
.jw-flow [data-o="seal"] { opacity: 1; }
.jw-flow [data-o="seal"].is-on .o-seal { fill: #fdf1ea; stroke: #efc2ab; }
.jw-flow [data-o="seal"].is-on .o-tickp { opacity: 1; }
.jw-flow [data-o="row"] { opacity: 1; }
.jw-flow .o-rowbg { fill: transparent; transition: fill 0.3s; }
.jw-flow .o-jb { fill: #b4b5bd; transition: fill 0.3s, opacity 0.3s; }
.jw-flow .o-jb--off { fill: none; stroke: #c9cad1; stroke-width: 1; stroke-dasharray: 2 2; }
.jw-flow .o-hotdot { fill: #c2c3ca; }
.jw-flow [data-o="row"].is-taken .o-jb { fill: #d9dae0; }
.jw-flow [data-o="row"].is-dropped .o-jb { opacity: 0.45; }
.jw-flow .o-card { fill: #fff; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.jw-flow .o-chip { fill: #fff; stroke: var(--ink-2); stroke-width: 1; transition: fill 0.25s, stroke 0.25s; }
.jw-flow .o-chip.is-set { fill: var(--ink-2); }
.jw-flow .o-chip.is-set.is-hit { fill: var(--accent); stroke: var(--accent); }
.jw-flow .o-gate { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 1; transition: stroke 0.2s; }
.jw-flow .o-gate.is-hit { stroke: var(--accent); }
.jw-flow .o-rail { fill: none; stroke: #c7c8cf; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.jw-flow .o-ai { fill: #fff; stroke: #b9bac2; stroke-width: 1; }
.jw-flow .o-ai.is-run { stroke: #8f909a; animation: oAiBreath 1.4s ease-in-out infinite; }
@keyframes oAiBreath { 50% { stroke-width: 2.4; } }
.jw-flow .o-tok2 .o-tb { fill: #9a9ba5; transition: fill 0.3s; }
.jw-flow .o-tok2.is-landed .o-tb { fill: #6f707b; }
.jw-flow .o-hot rect { fill: #fae4d8; }
.jw-flow .o-vf { fill: var(--accent); fill-opacity: 0.05; stroke: var(--accent); stroke-width: 1; }
.jw-flow .o-vline { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.8; }
.jw-flow .o-vt circle { fill: #fdf1ea; }
.jw-flow .o-vt path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.jw-flow .o-fl-src { font-size: 0.6875em; color: #5f606a; font-weight: 600; }
.jw-flow .o-fl-off { font-size: 0.5625em; color: var(--mute-2); }
.jw-flow .o-fl-rule { font-size: 0.5625em; color: #fff; font-weight: 600; letter-spacing: 0.02em; mix-blend-mode: normal; }
.jw-flow .o-fl-cap { font-size: 0.625em; color: var(--ink-2); letter-spacing: 0.08em; }
.jw-flow .o-fl-vcap { color: var(--accent-ink); }
.jw-flow .o-fl-ai { font-size: 0.625em; font-weight: 600; color: #6f707b; }
.jw-flow .o-fl-doc { font-size: 0.75em; font-weight: 600; color: var(--ink-2); }
.jw-flow .o-fl-sec { font-size: 0.5625em; color: var(--mute); }
.jw-flow .o-fl-hot { font-size: 0.5em; font-weight: 600; color: var(--accent-ink); }
.jw-flow .o-fl-res { font-size: 0.8125em; color: var(--ink-2); }
.jw-flow .o-fl-res b { color: var(--accent-ink); }
.jw-flow .o-fl-note { font-size: 0.5625em; color: var(--mute-2); }
/* 规则字在白底芯片上（落位前）是深色，落位后芯片变实心，字反白 */
.jw-flow .o-fl-rule { color: var(--ink-2); transition: color 0.25s; }
.jw-flow .o-fl-rule.is-set { color: #fff; }
.jw-flow .o-vf { opacity: 1; }
.m-tall .mv-works .jw-flow :is(.o-fl-src, .o-fl-cap, .o-fl-ai, .o-fl-sec) { font-size: max(0.625em, 9px); }
.m-tall .mv-works .jw-flow .o-fl-rule { font-size: max(0.5625em, 8.5px); }
.m-tall .mv-works .jw-flow .o-fl-res { font-size: max(0.8125em, 11.5px); }
.m-tall .mv-works .jw-flow :is(.o-fl-off, .o-fl-note, .o-fl-hot) { font-size: max(0.5em, 8px); }

/* ---- D 凯度：右侧四个项目的入口
 * 左栏：一个可点的提示块（大号“4”＋两行说明＋箭头），点它直接打开第一个项目。
 * 右栏：讲凯度时每一行变成明确的入口——行尾一个“看做法与成果 ›”，到站时四行依次轻推一下；
 * 悬停整行起底色、箭头前移；选中后底色转强调色、行尾改成“正在查看”。 */
.kp-cue {
  display: flex; align-items: center; gap: 0.85rem; width: 100%;
  margin-top: 1.1rem; padding: 0.8rem 1rem 0.8rem 0.95rem;
  border: 1px solid rgba(232, 87, 31, 0.28); border-radius: 0.75rem;
  background: linear-gradient(90deg, rgba(232, 87, 31, 0.06), rgba(232, 87, 31, 0.015));
  text-align: left; color: var(--ink); cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--out);
}
.kp-cue:hover { border-color: rgba(232, 87, 31, 0.55); background: rgba(232, 87, 31, 0.08); }
.kp-cue:hover .kp-cue-go { transform: translateX(4px); }
.kp-cue-n { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--accent-ink); }
.kp-cue-t { display: grid; gap: 0.2rem; min-width: 0; flex: 1; }
.kp-cue-t b { font-size: 0.95rem; font-weight: 600; }
.kp-cue-t small { font-size: 0.8rem; color: var(--mute); line-height: 1.5; white-space: normal; }
.kp-cue-go { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); display: grid; place-items: center; transition: transform 0.3s var(--out); }
.kp-cue-go svg { width: 0.85rem; height: 0.55rem; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.world[data-focus="kantar"] ~ * .kp-cue, .kp-cue { animation: kpCueIn 0.6s var(--out) both; }
@keyframes kpCueIn { from { opacity: 0; transform: translateY(6px); } }
.m-tall .kp-cue { display: none; }

.pr-go { display: none; }
.world[data-focus="kantar"] .pr-go {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: calc(4px * var(--tk));
  margin-left: calc(6px * var(--tk));
  font-size: calc(16px * var(--tk)); font-weight: 500; color: var(--accent-ink); white-space: nowrap;
}
.pr-go svg { width: calc(15px * var(--tk)); height: calc(15px * var(--tk)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--out); }
.pr-go-t, .pr-go-on { transition: opacity 0.25s, transform 0.3s var(--out); }
.pr-go-on { display: none; }
.world[data-focus="kantar"] .pr-head { cursor: pointer; padding-left: calc(8px * var(--tk)); margin-left: calc(-8px * var(--tk)); transition: background 0.25s, box-shadow 0.25s; }
.world[data-focus="kantar"] .pr-head::before {
  content: ""; position: absolute; inset: 0 calc(-170px * var(--tk)) 0 0; border-radius: calc(10px * var(--tk));
  background: transparent; transition: background 0.25s; z-index: -1; pointer-events: none;
}
.world[data-focus="kantar"] .pr-head:hover::before,
.world[data-focus="kantar"] .pr-head:focus-visible::before { background: rgba(232, 87, 31, 0.07); }
.world[data-focus="kantar"] .pr-head:hover .pr-go svg { transform: translateX(3px); }
.world[data-focus="kantar"] .pr-head:hover .pr-name { color: var(--accent-ink); }
/* 闲置时“看做法与成果”是淡的，只留箭头；到站轻推一遍，悬停才完全显出 */
.world[data-focus="kantar"] .pr-go-t { opacity: 0.55; }
.world[data-focus="kantar"] .pr-head:hover .pr-go-t { opacity: 1; }
.world[data-focus="kantar"] .pr.is-in .pr-go { animation: prNudge 1.1s var(--out) calc(1.1s + var(--k) * 0.16s) both; }
@keyframes prNudge { 0% { opacity: 0; transform: translate(-8px, -50%); } 45% { opacity: 1; transform: translate(4px, -50%); } 100% { opacity: 1; transform: translate(0, -50%); } }
.world[data-focus="kantar"] .pr.is-in .pr-head::before { animation: prGlow 1.1s ease-out calc(1.1s + var(--k) * 0.16s) both; }
@keyframes prGlow { 35% { background: rgba(232, 87, 31, 0.09); } 100% { background: transparent; } }
/* 选中 */
.world[data-focus="kantar"] .pr.is-sel .pr-head::before { animation: none; background: rgba(232, 87, 31, 0.1); box-shadow: inset 3px 0 0 var(--accent); }
.world[data-focus="kantar"] .pr.is-sel .pr-go-t { display: none; }
.world[data-focus="kantar"] .pr.is-sel .pr-go-on { display: inline; }
.world[data-focus="kantar"] .pr.is-sel .pr-go svg { transform: rotate(90deg); }
.world[data-focus="kantar"].has-project .pr:not(.is-sel) .pr-go-t { opacity: 0; }
.world[data-focus="kantar"].has-project .pr:not(.is-sel) .pr-head:hover .pr-go-t { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .world .pr .pr-go, .world .pr .pr-head::before, .kp-cue { animation: none !important; } }

/* 手机：项目切换一排加一句提示，选中态更明确 */
.m-tall .pj-heading::after { content: " · 点选查看"; color: var(--accent-ink); font-weight: 500; }