@charset "UTF-8";
/* 视觉约定：蓝 = 実際の軌跡（实线、圆点），橙 = 画面上の軌跡（虚线、菱形），青绿 = 界面操作。 */
:root {
  --paper: #f2f5f2;
  --card: #ffffff;
  --ink: #1f3237;
  --muted: #5f7275;
  --line: #d8e1dc;
  --blue: #2474b5;
  --orange: #d5742c;
  --teal: #176959;
  --teal-dark: #0e4f42;
  --soft: #e6efea;
  --yellow: #f6e6ad;
  --vr: #1d3a35;
  --real: #8a7a5a;
  --switch: #b4553f;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
:lang(zh-CN) { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif; }
:lang(ja) { font-family: "Yu Gothic UI", "Yu Gothic", "Meiryo", "Hiragino Sans", "Noto Sans JP", "Segoe UI", sans-serif; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; border: 1px solid #c9d6cf; border-radius: 8px; padding: 9px 14px; color: var(--ink); background: #fff; transition: background .15s, border-color .15s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.3; }
button:hover { background: #edf4ef; border-color: #7b9b8b; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #399387; outline-offset: 3px; }
button.primary, button[aria-pressed="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }
button.primary:hover { background: var(--teal-dark); }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -.5px; line-height: 1.35; font-weight: 650; max-width: 22em; }
h2 { font-size: 23px; font-weight: 650; line-height: 1.45; }
h3 { font-size: 16px; font-weight: 650; }
p { line-height: 1.8; }
code { font-family: Consolas, "Cascadia Code", monospace; font-size: 12px; line-height: 1.9; }
small, .fine-print { font-size: 12px; color: var(--muted); }
.ms { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* 顶栏 */
.topbar { min-height: 68px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 10px max(20px, calc((100vw - 1260px) / 2)); gap: 16px; background: #f9fbf9; flex-wrap: wrap; }
.brand { text-decoration: none; font-size: 15px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; letter-spacing: .3px; }
.brand-symbol { border-radius: 50%; background: var(--ink); color: #fff; width: 30px; height: 30px; display: grid; place-items: center; font-size: 20px; }
.brand-sub { font-size: 12px; color: var(--muted); font-weight: 500; }
.topbar-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.local-label { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #6b4f2a; background: #fbf1d8; border: 1px solid #ecd9a8; padding: 5px 10px; border-radius: 999px; }
.local-label .dot { width: 7px; height: 7px; background: #c58d22; border-radius: 50%; }
.lang-switch { display: flex; align-items: center; gap: 2px; background: #e5ece8; padding: 3px; border-radius: 9px; }
.lang-icon { display: grid; place-items: center; color: var(--muted); padding: 0 5px; }
.lang-switch button { border-color: transparent; background: transparent; font-size: 13px; padding: 6px 11px; }
.lang-switch button[aria-pressed="true"] { background: #fff; color: var(--teal); border-color: #cfdcd5; font-weight: 650; }

main { max-width: 1260px; margin: auto; padding: 32px 24px 0; }
.intro { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 22px; }
.eyebrow { font-size: 13px; color: var(--teal); font-weight: 650; margin-bottom: 8px; }
.intro-copy { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 46em; }
.source-chip { font-size: 12px; line-height: 1.8; color: var(--muted); border-left: 1px solid #c5d3ca; padding-left: 20px; min-width: 220px; }
.source-chip strong { font-size: 12px; color: #3c5552; font-weight: 500; }
.notice { display: flex; align-items: center; gap: 12px; background: #fbf4e2; color: #5d4b26; padding: 12px 18px; border: 1px solid #ecdcae; border-radius: 10px; font-size: 13px; }
.notice-icon { display: grid; place-items: center; color: #b07d1c; font-size: 20px; }

/* 模块导航（滚动时保持可见） */
.module-nav { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; background: rgb(229 236 232 / .94); backdrop-filter: blur(6px); border-radius: 12px; margin: 22px 0; }
.module-tab { background: transparent; border: 1px solid transparent; justify-content: flex-start; gap: 11px; padding: 12px 15px; font-weight: 600; }
.module-tab.active { background: #fff; color: var(--ink); border-color: #d1ddd5; box-shadow: 0 1px 3px rgb(32 51 38 / .06); }
.module-tab .tab-key { font-size: 12px; background: #d6e3dc; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--teal); }
.module-tab.active .tab-key { background: var(--teal); color: #fff; }
.module-tab small { margin-left: auto; font-weight: 400; font-size: 12px; }

.section-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 18px; gap: 18px; }
.segmented { background: #e1e9e4; padding: 4px; border-radius: 10px; display: flex; gap: 3px; flex: none; }
.segmented button { font-size: 14px; border-color: transparent; background: transparent; padding: 9px 18px; }
.segmented button[aria-pressed="true"] { background: var(--teal); color: #fff; }

/* 场景卡片 */
.scene-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; }
.scene-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; background: var(--card); }
.scene-card.real { background: #faf9f5; }
.scene-card.vr { background: #e9f1ef; border-color: #c9dad4; }
.scene-heading { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; flex-wrap: wrap; }
.scene-heading h3 { margin-right: auto; }
.env-badge { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 5px; border: 1px solid; white-space: nowrap; }
.env-badge.real { color: #6d5a33; border-color: #d8c9a4; background: #f7efdb; }
.env-badge.vr { color: #e6f3ef; border-color: var(--vr); background: var(--vr); }
.env-badge.transition { color: #fff; border-color: var(--switch); background: var(--switch); }
.legend { font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; font-weight: 600; }
.legend::before { content: ""; display: inline-block; width: 26px; height: 3px; margin-right: 8px; border-radius: 2px; }
.real-line { color: var(--blue); }
.real-line::before { background: var(--blue); }
.display-line { color: #b65d1d; }
.display-line::before { background: repeating-linear-gradient(90deg, var(--orange) 0 7px, transparent 7px 11px); height: 3px; }
.drawing { display: block; width: 100%; height: auto; max-height: 440px; }
.scene-foot { font-size: 12px; color: var(--muted); padding: 2px 18px 15px; }
.unit { font-size: 12px; color: var(--muted); }

.body-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--muted); margin: 16px 0; }
.body-summary strong { color: var(--ink); font-weight: 600; }

/* 播放控件 */
.transport { display: flex; align-items: center; gap: 8px; background: #fff; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; margin-top: 14px; }
.transport button { font-size: 13px; padding: 8px 12px; }
.progress-label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); flex: 1; min-width: 180px; margin-left: 6px; }
.progress-label input { flex: 1; min-width: 80px; }
.direction-label { font-size: 13px; font-weight: 600; min-width: 13em; text-align: right; color: var(--teal); }
input[type="range"] { accent-color: var(--teal); width: 100%; cursor: pointer; margin: 10px 0; height: 18px; }

.reference { border: 1px solid var(--line); border-radius: 10px; padding: 15px 20px; background: #fbfcfb; margin-top: 20px; font-size: 13px; color: #4f6460; }
.reference summary { cursor: pointer; font-size: 14px; color: var(--ink); font-weight: 600; }
.reference p { margin-top: 12px; }
.reference ul { padding-left: 20px; line-height: 1.9; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin-top: 14px; text-align: left; }
caption { text-align: left; font-size: 13px; padding-bottom: 8px; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: #edf3ef; font-size: 13px; }
tbody th { font-weight: 600; white-space: nowrap; }
.group-letter { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--teal); color: #fff; font-size: 12px; font-weight: 700; }
.soft-chip { font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 7px 12px; border-radius: 6px; background: #fff; }

/* B 映射 */
.mapping-layout { display: grid; grid-template-columns: 270px 1fr; gap: 18px; }
.control-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; align-self: start; }
.slider-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.slider-head output { font-family: Consolas, monospace; font-size: 19px; font-weight: 700; color: var(--teal); }
.slider-head b { font-family: Consolas, monospace; padding-left: 4px; }
.jp-tag { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.jp-tag:empty { display: none; }
.control-card > p { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.control-title { font-size: 13px; font-weight: 650; margin-bottom: 8px !important; color: var(--ink) !important; }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.presets button { flex-direction: column; gap: 2px; font-size: 13px; padding: 8px 4px; }
.presets button small { font-family: Consolas, monospace; font-size: 11px; color: inherit; opacity: .75; }
.control-card .preset-note { font-size: 12px; margin: 10px 0 18px; padding: 8px 10px; background: #f3f6f4; border-radius: 6px; line-height: 1.65; }
.state-card { border-top: 1px solid var(--line); padding-top: 15px; }
.state-card > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.state-card strong { font-size: 17px; display: block; color: var(--teal); }
.state-card p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.mapping-figures { min-width: 0; }
.compact .scene-heading { padding: 14px 14px 2px; }
.ghost-note { font-size: 12px; color: var(--muted); margin-top: 10px; }
.mapping-live { font-family: Consolas, "Microsoft YaHei", monospace; font-size: 12px; color: #45645a; margin: 10px 3px 0; overflow-wrap: anywhere; }
.formula-strip { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 22px; padding: 18px 20px; background: #e7efea; border-radius: 10px; margin-top: 20px; }
.formula-strip > div > span { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }
.formula-strip small { display: block; font-size: 12px; }
.metric-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; margin-top: 20px; }
.metric-card { background: #203c36; border-radius: 12px; padding: 22px; color: #fff; }
.metric-kicker { color: #bbd1be; font-size: 12px; }
.metric-card h3 { font-size: 16px; margin-top: 6px; }
.metric-symbol { font-family: Consolas, monospace; color: #cfe2d6; font-weight: 500; }
.metric-number { font-family: Consolas, monospace; display: block; font-size: 36px; margin: 14px 0 10px; }
.metric-card p { font-size: 12px; color: #ccdbd1; }
#real-means { font-family: Consolas, "Microsoft YaHei", monospace; margin-bottom: 8px; }
.metric-explanation { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.metric-explanation p { font-size: 13px; color: var(--muted); margin-top: 10px; }
.display-metric { border-top: 1px solid var(--line); padding-top: 10px; }
.display-metric output { font-family: Consolas, monospace; color: #b65d1d; font-weight: 700; }

/* C 流程：分组 */
.flow-top { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.group-grid { display: grid; grid-template-columns: auto 64px 64px; gap: 5px; align-items: center; }
.gg-corner { font-size: 11px; color: var(--muted); padding-right: 8px; }
.gg-col { font-size: 13px; text-align: center; font-weight: 600; }
.gg-row { font-size: 13px; font-weight: 600; padding-right: 10px; text-align: right; }
.group-grid button { font-weight: 700; padding: 8px 0; }
.group-name { font-size: 18px; font-weight: 650; color: var(--teal); display: flex; align-items: center; gap: 8px; }

/* C 流程：阶段条与环境色带 */
.stepper { margin: 18px 0 16px; }
.env-bands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 6px; }
.band { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 650; padding: 4px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; }
.band.real { background: #efe6cf; color: #6d5a33; }
.band.vr { background: var(--vr); color: #e6f3ef; }
.band.transition { background: repeating-linear-gradient(-45deg, var(--switch) 0 7px, #c66a52 7px 14px); color: #fff; }
.band .ms { width: 16px; height: 16px; }
.stage-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0; }
.stage-list button { flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; gap: 8px; padding: 12px; font-size: 13px; border-top-width: 4px; text-align: left; }
.stage-list button[data-env="real"] { border-top-color: #cdb98a; }
.stage-list button[data-env="vr"] { border-top-color: var(--vr); }
.stage-list button[data-env="transition"] { border-top-color: var(--switch); }
.stage-num { font-family: Consolas, monospace; font-size: 12px; color: var(--muted); }
.stage-list button.done { background: #f1f6f3; }
.stage-list button.active { background: var(--teal); color: #fff; border-color: var(--teal); border-top-color: inherit; }
.stage-list button.active[data-env="transition"] { background: var(--switch); border-color: var(--switch); }
.stage-list button.active .stage-num { color: #d7e6df; }
.overall { height: 4px; background: #dbe5df; border-radius: 3px; overflow: hidden; margin-top: 10px; }
.overall span { display: block; height: 100%; width: 0; background: var(--teal); }
.key-hint { margin-top: 6px; }

/* C 流程：当前阶段 */
.flow-detail { display: grid; grid-template-columns: 1fr 1.05fr; gap: 18px; }
.flow-scene { border: 1px solid var(--line); border-radius: 14px; padding: 0 0 22px; text-align: center; background: #fff; }
.flow-scene.real { background: #fbf9f3; }
.flow-scene.vr { background: #e9f1ef; border-color: #c9dad4; }
.flow-scene.transition { background: #fbefea; border-color: #e7c3b7; }
.flow-scene .scene-heading { justify-content: space-between; }
.step-count { font-size: 12px; color: var(--muted); }
.flow-illustration { display: flex; align-items: center; justify-content: center; padding: 4px 16px; }
.flow-illustration > svg { width: min(100%, 380px); height: auto; }
.svg-q { font: 700 20px "Segoe UI", sans-serif; fill: #b48a2d; }
.flow-scene h3 { font-size: 20px; margin-top: 4px; }
.flow-scene > p { font-size: 13px; color: var(--muted); margin: 8px 24px; }
#flow-extra { margin: 10px 22px 0; text-align: left; }
.flow-k-box { background: rgb(255 255 255 / .75); border: 1px solid #d1ded7; margin: 16px 22px 0; padding: 12px 15px; text-align: left; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.flow-k-box > span { font-size: 12px; color: var(--muted); }
.flow-k-box output { font-family: Consolas, monospace; font-weight: 700; color: var(--teal); }
.flow-k-box.na output { font-family: inherit; font-weight: 500; font-size: 12px; color: var(--muted); }
.flow-k-box.na .k-track { opacity: .35; }
.flow-k-box .fine-print { width: 100%; line-height: 1.6; }
.k-track { height: 5px; background: #dce8df; border-radius: 3px; width: 100%; overflow: hidden; }
.k-track span { display: block; height: 100%; width: 0; background: var(--teal); }

.switch-banner { display: flex; align-items: center; gap: 10px; }
.sb-env { font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 8px; white-space: nowrap; }
.sb-env.vr { background: var(--vr); color: #e6f3ef; }
.sb-env.real { background: #efe6cf; color: #6d5a33; }
.sb-arrow { flex: 1; display: flex; align-items: center; color: var(--switch); position: relative; min-width: 60px; }
.sb-arrow .ms { width: 26px; height: 26px; background: #fbefea; position: relative; z-index: 1; margin-left: 40%; }
.sb-arrow i { position: absolute; left: 0; right: 6px; top: 50%; border-top: 3px solid var(--switch); }
.sb-arrow i::after { content: ""; position: absolute; right: -6px; top: -8px; border: 6.5px solid transparent; border-left: 9px solid var(--switch); }
.switch-caption { font-size: 13px; color: #7c3b2c; margin-top: 8px; }

.trial-strip { display: grid; grid-template-columns: 3fr 1fr; gap: 8px; }
.trial { border: 1px solid #c6d6cb; border-radius: 8px; padding: 8px; background: #fff; }
.trial.first { border: 2px solid var(--teal); }
.trial.later { opacity: .7; }
.trial-label { display: block; font-size: 12px; font-weight: 650; margin-bottom: 6px; }
.cycles { display: flex; gap: 4px; flex-wrap: wrap; }
.cyc { font-size: 12px; padding: 6px 8px; border-radius: 5px; background: #eef4ef; border: 1px solid #d3e0d6; }
.cyc.c1 { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 650; }
.cyc.etc { background: transparent; border-color: transparent; color: var(--muted); }
.cycle-note { font-size: 13px; color: var(--teal); font-weight: 600; margin-top: 8px; }

.flow-notes { background: #fff; border: 1px solid var(--line); padding: 24px; border-radius: 14px; }
.flow-notes h3 { font-size: 18px; margin-bottom: 12px; }
.flow-notes ul { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.95; color: #4b615c; }
.flow-notes .key-note { background: #f5ecd1; padding: 11px 14px; border-radius: 7px; font-size: 13px; line-height: 1.8; margin-bottom: 18px; }
.flow-transport { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.flow-transport button { font-size: 13px; padding: 9px 12px; }
.stage-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

.analysis-focus { margin-top: 22px; display: flex; gap: 20px; padding: 22px; border: 1px solid #b8ccbd; border-radius: 12px; background: #edf3ec; transition: box-shadow .2s, border-color .2s; }
.analysis-focus.is-current { border-color: var(--teal); box-shadow: 0 0 0 3px rgb(23 105 89 / .15); }
.focus-tag { background: var(--teal); color: #fff; white-space: nowrap; align-self: flex-start; padding: 5px 9px; border-radius: 5px; font-size: 12px; }
.analysis-focus p { font-size: 13px; color: #536a5c; }
.cycle-row { display: flex; align-items: center; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.cycle-row > strong { font-size: 13px; margin-right: 6px; }
.cycle { font-size: 12px; border: 1px solid #c7d8c7; padding: 10px 13px; background: #f9fcf7; border-radius: 6px; min-height: 52px; display: flex; flex-direction: column; justify-content: center; }
.cycle.first { border-color: var(--teal); color: var(--teal); background: #dfece1; }
.cycle b { font-size: 11px; }
.cycle.etc { background: transparent; border-color: transparent; color: var(--muted); }
.check-label { display: flex; align-items: center; gap: 9px; margin: 16px 0; }
.residual-plot { display: block; width: min(100%, 410px); background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; }
#residual-controls { max-width: 560px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; margin-top: 26px; border-top: 1px solid var(--line); font-size: 12px; color: #6f7f79; flex-wrap: wrap; }

/* SVG */
.svg-label { font: 12px "Segoe UI", "Microsoft YaHei", "Yu Gothic UI", sans-serif; fill: #66786f; }
.svg-label.small { font-size: 10px; }
.svg-axis { stroke: #b4c3b9; stroke-width: 1; }
.svg-grid { stroke: #dbe4dc; stroke-width: .7; }
.svg-path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.svg-path.ghost { stroke-width: 2; opacity: .28; }
.svg-path.live { stroke-width: 3.4; }
.svg-trail { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .2; }
.svg-arrow { opacity: .8; }
.svg-dir { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.svg-ghost-point { fill: #fff; fill-opacity: .7; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 3 2.5; }
.svg-shift { stroke: #66757a; stroke-width: 2; }
.svg-shift-head { fill: #66757a; }
.shift-label { fill: #4f5e62; font-weight: 600; }

@media (max-width: 1000px) {
  .module-tab small, .source-chip, .brand-sub { display: none; }
  .mapping-layout { grid-template-columns: 1fr; }
  .control-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
  .control-card .presets, .control-card .preset-note, .control-card .state-card, .control-card .control-title { grid-column: 1 / -1; }
  .presets { grid-template-columns: repeat(4, 1fr); }
  .formula-strip { grid-template-columns: 1fr; gap: 14px; }
  .flow-detail { grid-template-columns: 1fr; }
  .body-summary { display: block; }
  .body-summary p + p { margin-top: 6px; }
}
@media (max-width: 720px) {
  .topbar { padding: 10px 16px; }
  main { padding: 22px 16px 0; }
  h1 { font-size: 25px; }
  h2 { font-size: 19px; }
  .intro { margin-bottom: 16px; }
  .notice { font-size: 12px; padding: 10px 12px; align-items: flex-start; }
  .module-nav { gap: 3px; padding: 4px; margin: 16px 0; }
  .module-tab { font-size: 13px; gap: 6px; padding: 10px 6px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .scene-pair { grid-template-columns: 1fr; gap: 12px; }
  .control-card { display: block; }
  .presets { grid-template-columns: 1fr 1fr; }
  .metric-layout { grid-template-columns: 1fr; }
  .metric-number { font-size: 30px; }
  .transport .progress-label { order: 5; flex-basis: 100%; margin: 0; }
  .direction-label { margin-left: auto; min-width: 0; }
  .flow-top { grid-template-columns: 1fr; }
  .env-bands { display: none; }
  .stage-list { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stage-list button { padding: 9px; font-size: 12px; }
  .flow-notes { padding: 18px; }
  .analysis-focus { padding: 18px; display: block; }
  .focus-tag { display: inline-block; margin-bottom: 12px; }
  .cycle-row > strong { flex-basis: 100%; }
  .trial-strip { grid-template-columns: 1fr; }
  .switch-banner { flex-wrap: wrap; }
  .flow-transport button { flex: 1; padding: 9px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
/* 日语标题按词组换行（支持的浏览器生效，其余照常换行） */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; }