@charset "UTF-8";
/* Retu 官网 · r28 · 交易学院
 *
 * r27 的三个病灶(委托人 2026-09-24 的原话:「每個模塊沒有明細的區分,一堆文字放在頁面,
 * 像個草稿頁」「這些動畫都需要精細打磨,目前毫無美感」「動畫做成一個類屏幕播放的形式,局中」):
 *
 *   1. 模块之间只有一条 1px 分隔线 —— 而深色档里 --c-divider 就等于 --c-surface,
 *      对 --c-canvas 的对比是 1.14,肉眼近乎没有。所以「没有区分」不是错觉,是真的没画出来。
 *      r28:章头给编号牌 + 强描边横线,节升格成有面的卡片(--c-surface on --c-canvas + 强描边)。
 *   2. 通栏 46rem 左对齐 + 全是段落 = 草稿页。r28 把 .ac-body 解除宽度上限,
 *      只给它的**文字子元素**留 46rem 可读宽;图与屏幕可以走满栏并居中。
 *   3. 动画面板原本 background:--c-surface-sunken(深色档里等于 --c-canvas)、border:--c-border
 *      (等于 --c-surface)—— 等于把一块透明的板子放在底色上,没有任何「屏幕」感。
 *      r28 做成真播放器:外框 --c-surface + 强描边,屏幕区 --c-canvas + 玻璃高光,
 *      16:9 定framing,字幕条居中,底部图标键 + 分段进度条。
 *
 * 颜色/间距/字号一律取站内既有 token,本文件**不新造任何色值**;需要中间档时用 color-mix()
 * 从既有 token 调,不硬写第二个十六进制。
 */

/* ================= 两栏:左侧常驻目录 + 右侧正文 ================= */

/* ⚠️ 必须是 minmax(0,1fr) 而不是 1fr:1fr 的下限是 auto=min-content,窄屏上目录那条横滑胶囊
 *    的 min-content 是 518px,会把整列(连同正文)撑到 518 —— 375 的屏上整页横向溢出。 */
.ac-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.ac-rail, .ac-main { min-inline-size: 0; }

/* 目录:窄屏是可横滑的胶囊条(照抄报价页 .qtab 的视觉语言) */
/* 站头是 fixed 的(--header-h),所有 sticky / 锚点偏移都要让开它,否则会被压在底下 */
.ac-rail {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  padding: var(--s-3) 0;
  margin-bottom: var(--s-2);
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-border-strong);
}

.ac-rail__title { display: none; }

.ac-rail__list {
  display: flex;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.ac-rail__list::-webkit-scrollbar { display: none; }
.ac-rail__subs { display: none; }

.ac-rail__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  white-space: nowrap;
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-3);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}

.ac-rail__link:hover { color: var(--c-text); background: var(--c-surface); }
.ac-rail__link:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }

.ac-rail__item[data-current="true"] .ac-rail__link {
  color: var(--c-primary-700);
  background: var(--c-primary-50);
  border-color: var(--c-primary-600);
}

/* ================= 模块(章):从「一条线」升级成「一个开篇」 ================= */

.ac-mod { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }

.ac-mod + .ac-mod {
  margin-top: var(--s-11);
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-border-strong);
}

.ac-mod__head { padding-bottom: var(--s-5); }

/* 章的分量原本靠一个编号牌撑着。编号拿掉之后改用一小段主色短线起头 ——
 * 起同样的「这里是新一章」的作用,但不需要读者去解码 01 / 第一章 是什么意思。 */
.ac-mod__headtx { min-inline-size: 0; }

.ac-mod__headtx::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 3px;
  margin-bottom: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--c-primary-600);
}

.ac-mod__title {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.25;
  color: var(--c-text);
}

.ac-mod__intro {
  margin: var(--s-4) 0 0;
  max-width: 46rem;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--c-text-2);
}

/* 同 .ac-layout:隐式列的下限是 min-content,卡里那张宽表会把卡撑到 465px 顶出屏幕 */
.ac-mod__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }

/* ================= 节:每一节是一张卡,不再是连排段落 ================= */

.ac-card {
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
}

.ac-card__title {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--c-text);
}

/* ================= 正文块 ================= */

/* ⚠️ r27 是 .ac-body { max-width: 46rem } —— 动画被这一行钉死在 736px 且左对齐。
 *    r28 把上限下移到文字子元素:字保持 46rem 可读宽,图和屏幕可以走满卡片并居中。 */
.ac-body { max-width: none; font-size: var(--fs-body); line-height: 1.75; color: var(--c-text-2); }
.ac-body > * { margin: 0 0 var(--s-5); }
.ac-body > *:last-child { margin-bottom: 0; }
.ac-body > p, .ac-body > ul, .ac-body > ol, .ac-body > .ac-code { max-width: 46rem; }
.ac-body strong { color: var(--c-text); font-weight: 600; }
.ac-body ul, .ac-body ol { padding-left: 1.3em; }
.ac-body li { margin-bottom: .6em; }
.ac-body li:last-child { margin-bottom: 0; }

.ac-code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text);
  white-space: pre;
  overflow-x: auto;
  padding: var(--s-4) var(--s-5);
  background: var(--c-canvas);
  border-left: 2px solid var(--c-primary-600);
  border-radius: var(--r-sm);
}

/* 「名称 = 算式」两列栅格:等号由布局对齐,不靠空格补位 —— 中文字宽不是拉丁等宽字的
   精确两倍,补位法在不同字体回退下必歪(2026-09-25)。 */
.ac-code-eq {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .9em;
  row-gap: .3em;
  white-space: normal;
  overflow-x: visible;
}
.ac-code-eq dt, .ac-code-eq dd { margin: 0; }
.ac-code-eq dd { white-space: pre-wrap; }

/* 正文表格:最宽的那张是术语表(三列,第三列是整句算式),它自己可以走满卡片 */
.ac-tablewrap { max-width: none; overflow-x: auto; }
.ac-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.ac-table th {
  text-align: left;
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-text-3);
  padding: var(--s-2) var(--s-4) var(--s-2) 0;
  border-bottom: 1px solid var(--c-border-strong);
  white-space: nowrap;
}

.ac-table td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--c-border-strong) 45%, transparent);
  vertical-align: top;
  color: var(--c-text-2);
}

.ac-table td:first-child { color: var(--c-text); white-space: nowrap; }

/* ================= 瓦片:「每节只有一个清单」的章(品种那一章) ================= */

.ac-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--s-4);
}

.ac-tile {
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
}

.ac-tile__title {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-3);
  font-size: var(--fs-h4);
  color: var(--c-text);
  border-bottom: 1px solid color-mix(in srgb, var(--c-border-strong) 45%, transparent);
}

.ac-tile__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}

.ac-tile__list li { margin-bottom: .5em; }
.ac-tile__list li:last-child { margin-bottom: 0; }

/* ================= 示例数字总表 ================= */

.ac-sample {
  margin-bottom: var(--s-9);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
}

.ac-sample > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
}

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

.ac-sample > summary::before {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.5px solid var(--c-text-3);
  border-block-end: 1.5px solid var(--c-text-3);
  rotate: -45deg;
  transition: rotate var(--dur-1) var(--ease);
}

.ac-sample[open] > summary::before { rotate: 45deg; }
.ac-sample > summary:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }
.ac-sample__body { padding: 0 var(--s-5) var(--s-5); }
.ac-sample .ac-table td:last-child { font-family: var(--font-mono); }

/* ================= 动画 = 一块屏幕在放片 ================= */

/* 居中,并且允许比正文宽 —— 「局中」不只是 text-align,是这块东西自己要有画框。 */
.ac-screen {
  margin: var(--s-7) auto;
  max-width: 58rem;
}

/* r44 · 卡片边统一成设计系统的「细半透白」:rgba(255,255,255,.14),不加阴影。
 * 此前是 border-strong 实色(#61747C),在深底上读成一圈灰框,比里面的内容还抢眼。 */
.ac-screen__bezel {
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-2) var(--ease);
}

/* 在放的时候画框微微亮一档:告诉人「这个还在动」,而不是靠再加一个颜色。
 * r44:亮的是白边的透明度,不再掺品牌蓝 —— 一张图只留一处品牌蓝,给「播放」键。 */
.ac-screen[data-playing="1"] .ac-screen__bezel {
  border-color: rgba(255, 255, 255, .26);
}

/* ---- 顶条:左标签 / 中标题 / 右计数 ---- */
.ac-screen__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ac-screen__tag,
.ac-screen__count {
  flex: none;
  min-inline-size: 5.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: var(--c-text-3);
}

.ac-screen__tag { display: flex; align-items: center; gap: var(--s-2); }

/* 录制指示灯:停的时候是灰点,放的时候亮起来。只有一个语义,不占新颜色档。 */
.ac-screen__tag::before {
  content: "";
  flex: none;
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--r-pill);
  background: var(--c-text-disabled);
  transition: background-color var(--dur-1) var(--ease);
}

.ac-screen[data-playing="1"] .ac-screen__tag::before { background: var(--c-text); }

.ac-screen__count { text-align: right; }

.ac-screen__title {
  flex: 1 1 auto;
  min-inline-size: 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text);
}

/* ---- 屏幕本体:统一 16:9,内容由 viewBox 自己居中 ---- */
.ac-screen__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-canvas);
}

/* 顶部一层极淡的斜光,把「一块玻璃」的感觉做出来。不加色值,只用正文色的低透明。 */
.ac-screen__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--c-text) 5%, transparent),
              transparent 46%);
}

.ac-screen__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* ---- r44 · 竖版(手机):脚本按正文栏宽度切到 360×480 的竖版画布 ----
 * 舞台不再是 16:9,由 svg 自己按 3:4 撑高;svg 限宽 28rem 居中 ——
 * 600 宽上下的小平板如果也满幅铺开,一张图就有 730px 高,一屏看不全。 */
.ac-screen[data-layout="tall"] .ac-screen__stage { aspect-ratio: auto; }
.ac-screen[data-layout="tall"] .ac-screen__svg {
  aspect-ratio: 3 / 4;
  block-size: auto;
  max-inline-size: 28rem;
  margin-inline: auto;
}

/* ---- 字幕条:跟着屏幕底色,所以它读起来是「屏幕里的字幕」而不是「图下面的说明」 ---- */
.ac-screen__cap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 4.2em;
  margin: 0;
  padding: var(--s-4) var(--s-6);
  text-align: center;
  text-wrap: balance;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-text-2);
  background: var(--c-canvas);
}

/* ---- 控制条 ---- */
.ac-screen__ctrl {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.ac-screen__keys { display: flex; align-items: center; gap: var(--s-1); }

.ac-key {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  padding: 0;
  color: var(--c-text-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
              background-color var(--dur-1) var(--ease);
}

.ac-key svg { inline-size: var(--icon-md); block-size: var(--icon-md); fill: currentColor; }
.ac-key:hover { color: var(--c-text); background: color-mix(in srgb, var(--c-text) 10%, transparent); }
.ac-key:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.ac-key[disabled] { opacity: .35; cursor: default; background: none; }

.ac-key--main {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--c-on-primary);
  background: var(--c-primary-600);
}

.ac-key--main:hover { color: var(--c-on-primary); background: var(--c-primary-700); }

/* ---- 分段进度:六帧就是六段,一眼看出「第几帧 / 还剩几帧」 ---- */
.ac-screen__track {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.ac-seg {
  appearance: none;
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
  block-size: 1.5rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.ac-seg::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  translate: 0 -50%;
  block-size: 3px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-text) 16%, transparent);
}

.ac-seg__fill {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  translate: 0 -50%;
  inline-size: 0;
  block-size: 3px;
  border-radius: var(--r-pill);
  /* r44:进度改中性白。品牌蓝整张图只留给「播放」键一处 */
  background: var(--c-text-2);
}

.ac-seg[aria-current="true"]::before,
.ac-seg[aria-current="true"] .ac-seg__fill { block-size: 5px; }
.ac-seg:hover::before { background: color-mix(in srgb, var(--c-text) 30%, transparent); }
.ac-seg:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 0; border-radius: var(--r-xs); }

/* ---- 全屏:此时它就是一块屏幕,别的都退场 ---- */
.ac-screen:fullscreen {
  display: grid;
  place-items: center;
  max-width: none;
  margin: 0;
  padding: var(--s-6);
  background: var(--c-canvas);
}

.ac-screen:fullscreen .ac-screen__bezel {
  inline-size: min(100%, 1600px);
  max-block-size: 100%;
}

.ac-screen:fullscreen .ac-screen__title { font-size: var(--fs-lead); }
.ac-screen:fullscreen .ac-screen__cap { font-size: var(--fs-lead); min-block-size: 3.6em; }

/* ================= 动画内部的 SVG 语义类 ================= */
/* 只有四个语义:中性、有利、不利、预警。分镜稿的「配色只需三档语义」加上追保线那一档。
 * 第五个会让人问「蓝色那根是什么意思」,而它什么意思都没有。 */
/* 语义填充色的规则本体在本文件末尾的「语义色覆盖」一节 ——
 * 它必须排在字级档(.an-tick / .an-sample 等)之后才能赢过它们自带的默认色。 */

/* fill:none 和 an-edge-* 那一族一样是必须的,不是抄来的装饰:这五个是「只管描边」的类,
 * 可落在 line 上,也可落在 rect/path 上。SVG 的 fill 默认值是黑色,不是透明 ——
 * 所以一旦把它们贴到闭合图形上而没另给 fill,那块就渲染成纯黑。
 * 实测:a7 三张步骤卡点亮时从 an-edge-n(自带 fill:none)换成 an-sink,fill:none 一并丢掉,
 * 深色画布上出现三个黑洞。按族补齐,避免下一个换类的地方再踩。 */
.an-sn    { stroke: var(--c-text-3);      fill: none; }
.an-sgood { stroke: var(--c-success-700); fill: none; }
.an-sbad  { stroke: var(--c-danger-700);  fill: none; }
.an-swarn { stroke: var(--c-warning-700); fill: none; }
.an-sink  { stroke: var(--c-text);        fill: none; }

/* ---- 描边阶梯:只有四档,每档一个职责 ----
 * non-scaling-stroke 是这四档能成立的前提:没有它,stroke-width 会跟着
 * viewBox 缩放漂移(实测标称 1px 落在 0.97–1.30 之间),四档会糊成一档。 */
.ac-screen__svg [class*="an-w"] { vector-effect: non-scaling-stroke; }
.an-w1  { stroke-width: 1; }      /* hair   — 网格、刻度、虚线阈值 */
.an-w15 { stroke-width: 1.5; }    /* base   — 坐标轴、体块轮廓、面板边 */
.an-w25 { stroke-width: 2.5; }    /* strong — 主曲线、水位线,每屏 1–2 条 */
.an-lead { stroke-width: 4; }     /* lead   — 全屏唯一焦点,每屏最多 1 处 */

/* ---- 网格:方向性、内缩、≤7 条。强度提到 22%,数量换强度 ---- */
.an-grid {
  stroke: color-mix(in srgb, var(--c-border-strong) 22%, transparent);
  fill: none;
}

/* 曲线/折线统一收口,不留方角毛刺。虚线除外 —— round 会把短划糊成一条 */
.an-line { stroke-linecap: round; stroke-linejoin: round; }
.an-dash { stroke-linecap: butt; }

/* ---- 体块:用 color-mix 混成实色,不用 fill-opacity ----
 * 理由不是洁癖:fill-opacity 在体块重叠处会叠乘,越线区会莫名多暗一块。
 * 34% 是解出来的 —— 「体块对底 ≥1.65」与「水位线对体块 ≥3.0」两条约束的唯一交点,
 * 35% 时水位线对体块掉到 2.96 就不达标了。中性档刻意只给 22%,
 * 合成后 1.51 < 语义档 1.67,这样眼睛不会先落在「什么都没发生」的那一块上。 */
.an-body-n    { fill: color-mix(in srgb, var(--c-text-3)      22%, var(--c-canvas)); }
.an-body-good { fill: color-mix(in srgb, var(--c-success-700) 34%, var(--c-canvas)); }
.an-body-bad  { fill: color-mix(in srgb, var(--c-danger-700)  34%, var(--c-canvas)); }
.an-body-warn { fill: color-mix(in srgb, var(--c-warning-700) 34%, var(--c-canvas)); }

/* 体块边线:比水位线弱一档,让水位线独占「满强度」 */
.an-edge-n    { stroke: color-mix(in srgb, var(--c-border-strong) 55%, transparent); fill: none; }
.an-edge-good { stroke: color-mix(in srgb, var(--c-success-700)   70%, transparent); fill: none; }
.an-edge-bad  { stroke: color-mix(in srgb, var(--c-danger-700)    70%, transparent); fill: none; }
.an-edge-warn { stroke: color-mix(in srgb, var(--c-warning-700)   70%, transparent); fill: none; }

/* 面板底。深色下 --c-surface 对画框底只有 1.14,单靠它分不出层 ——
 * 所以 panel() 一定要再叠一圈 .an-edge-n:分隔感由边线承担,这层只负责轻微抬起。 */
.an-panel { fill: var(--c-surface); }

/* 分段缺口:用底色划过体块,切出一道真的空隙,而不是再加一根线。
 * 十段累计面积如果靠「加九根分隔线」去分,画面会多出九个视觉元素;
 * 用缺口分,视觉元素数量不变。 */
.an-cut { stroke: var(--c-canvas); fill: none; }

/* ⚠️ fill 必须在这里兜底。SVG 的 fill 默认值是纯黑,而画框底是 #141F26 ——
 * 任何一个没被 .an-ink / .an-n / .an-good 之类染色的 text 都会黑底黑字(对比度 1.25)。
 * 此前 .an-lbl 只设了字体没设颜色,于是七个动画的「标的价格 / 保证金 / 账户权益」
 * 这一整层结构标签全都没画出来 —— 动画「看起来简陋」有一大半是丢了这一层。
 * 兜在基类上,新加的 text 忘记染色也不会再掉进黑底黑字。 */
/* --u = 960 / 舞台宽度,由 ResizeObserver 写到舞台上(缺省 1,脚本没跑起来也不会糊)。
 * calc(15px * var(--u)) 在任何舞台宽度下都渲染成 15 个 CSS 像素 ——
 * 不这么做,同一个字级类在不同分镜里实测差 35%,字级层级根本不成立。 */
.ac-screen__stage { --u: 1; }

.ac-screen__svg text {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--u));
  font-variant-numeric: tabular-nums;
  fill: var(--c-text-2);
}

/* 三档字级。字族说明「这是数字还是词」,字号说明「这有多重要」。
 * readout : label = 32 : 15,超过两倍 —— 层级靠尺度差拉开,不靠加粗。 */
.ac-screen__svg .an-read {
  font-family: var(--font-mono);
  font-size: calc(32px * var(--u));
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.ac-screen__svg .an-lbl {
  font-family: var(--font-sans);
  font-size: calc(15px * var(--u));
  font-weight: 500;
}
.ac-screen__svg .an-note {
  font-family: var(--font-sans);
  font-size: calc(12px * var(--u));
}

/* 刻度档:坐标轴刻度、时间轴步骤名、面板字段名 —— 这些是要读的内容,只是层级低。
 * 此前它们和「示例数值」水印共用一个类,于是一起吃了 --c-text-disabled(对比度 3.19)。
 * 水印该淡,刻度不该:分成两个类之后,刻度 7.00,水印仍是 3.19,各自回到本来的位置。 */
.ac-screen__svg .an-tick {
  font-family: var(--font-sans);
  font-size: calc(12px * var(--u));
  letter-spacing: .08em;
  fill: var(--c-text-3);
}

/* 只给「示例数值」水印本身用。全页仅一处,别拿它当小字号使。 */
.ac-screen__svg .an-sample {
  font-family: var(--font-sans);
  font-size: calc(12px * var(--u));
  letter-spacing: .08em;
  fill: var(--c-text-disabled);
}

/* r44 · 竖版字级。手机上不是桌面等比缩小,是另一套尺度:
 * 读数 32 → 24、标签 15 → 14;注释 / 刻度 / 水印留在 12(竖版 UMAX 1.2,320 宽手机实测 11.16,仍 ≥11)。
 * 24 : 14 仍拉开 1.7 倍 —— 层级靠尺度差,这条规矩在窄屏上也成立。 */
.ac-screen[data-layout="tall"] .ac-screen__svg .an-read { font-size: calc(24px * var(--u)); }
.ac-screen[data-layout="tall"] .ac-screen__svg .an-lbl  { font-size: calc(14px * var(--u)); }

/* ---- 语义色覆盖:只有四个语义(中性 / 有利 / 不利 / 预警)----
 * 第五个会让人问「蓝色那根是什么意思」,而它什么意思都没有。
 *
 * ⚠️ 这一节的位置和前缀都是有讲究的,别搬走也别简写:
 * ① 必须带 .ac-screen__svg 前缀 —— 兜底规则 `.ac-screen__svg text` 特指度是 (0,1,1),
 *    裸写 `.an-bad` 只有 (0,1,0) 会被它压掉,实测七支动画的语义色文字全渲染成正文灰。
 * ② 必须排在字级档之后 —— .an-tick / .an-sample 自带默认色且同为 (0,2,0),
 *    同特指度下后写的赢;排在前面的话 `an-n2 an-tick`(时间轴当前步)会被 .an-tick 压回去,
 *    当前步和已过步长得一模一样,高亮就没了。 */
.ac-screen__svg .an-ink   { fill: var(--c-text); }
.ac-screen__svg .an-n     { fill: var(--c-text-3); }
.ac-screen__svg .an-n2    { fill: var(--c-text-2); }
.ac-screen__svg .an-good  { fill: var(--c-success-700); }
.ac-screen__svg .an-bad   { fill: var(--c-danger-700); }
.ac-screen__svg .an-warn  { fill: var(--c-warning-700); }

.ac-screen__svg .an-track {
  fill: none;
  stroke: color-mix(in srgb, var(--c-border-strong) 55%, transparent);
}

/* r44 · 画面里的面板 = 卡片:和外框同一条边,半透白 .14、1px,无阴影 */
.ac-screen__svg .an-card {
  fill: none;
  stroke: rgba(255, 255, 255, .14);
}

/* 结论帧的一次性辉光。深色下投影不可见(页面底与卡面对比只有 1.14),
 * 但滤镜辉光是可见的 —— 所以纵深用它,不用 box-shadow。全片只出现一次,不循环。
 * r44:辉光改用元素自身的光(白),不再染品牌蓝 —— 绿色的差额条泛出蓝光,读成第五种语义色。 */
@keyframes ac-anglow {
  0%   { filter: none; }
  40%  { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c-text) 35%, transparent)); }
  100% { filter: none; }
}
.an-glow { animation: ac-anglow 500ms var(--ease) 1 both; }

/* 阈值线被撞一下:反应发生在被撞的那一方身上。
 * 越线后整块变色只是「状态被改写」;让静止的一方有反应,画面才有因果。 */
@keyframes ac-recoil {
  0%, 100% { stroke-width: 1; }
  45%      { stroke-width: 2.5; }
}
.an-recoil { animation: ac-recoil 120ms cubic-bezier(.34, 1.26, .64, 1) 1 both; }

/* ================= 页尾说明 ================= */

.ac-note {
  margin-top: var(--s-11);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border-strong);
  max-width: 46rem;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-3);
}

.ac-note__title {
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin: 0 0 var(--s-3);
}

.ac-note p { margin: 0 0 var(--s-3); }
.ac-note p:last-child { margin-bottom: 0; }
.ac-note strong { color: var(--c-text-2); font-weight: 600; }

.ac-fail { padding: var(--s-9) 0; color: var(--c-text-3); font-size: var(--fs-sm); }

/* ================= 宽屏:目录立到左边,正文让开 ================= */

@media (min-width: 1100px) {
  .ac-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s-9);
    align-items: start;
  }

  .ac-rail {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    align-self: start;
    max-block-size: calc(100vh - var(--header-h) - var(--s-8));
    overflow-y: auto;
    padding: 0;
    margin: 0;
    background: none;
    border-bottom: 0;
    border-left: 1px solid color-mix(in srgb, var(--c-border-strong) 55%, transparent);
    scrollbar-width: thin;
  }

  .ac-rail__title {
    display: block;
    margin: 0 0 var(--s-3) var(--s-4);
    font-size: var(--fs-eyebrow);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-text-3);
  }

  .ac-rail__list { display: block; overflow: visible; }
  .ac-rail__item + .ac-rail__item { margin-top: var(--s-1); }

  .ac-rail__link {
    align-items: baseline;
    padding: var(--s-2) var(--s-4);
    white-space: normal;
    border: 0;
    border-radius: 0;
    border-left: 2px solid transparent;
    margin-left: -1px;
    background: none;
  }

  .ac-rail__link:hover { background: none; color: var(--c-text); }

  .ac-rail__item[data-current="true"] .ac-rail__link {
    background: none;
    border-left-color: var(--c-primary-600);
    color: var(--c-text);
  }

  /* 只展开当前章的子目录 —— 四章全展开有 22 条,那又是一堵字墙 */
  .ac-rail__subs {
    display: none;
    margin: var(--s-1) 0 var(--s-3);
    padding: 0;
    list-style: none;
  }

  .ac-rail__item[data-current="true"] .ac-rail__subs { display: block; }

  .ac-rail__sub {
    display: block;
    padding: var(--s-1) var(--s-4) var(--s-1) calc(var(--s-4) + 1.9rem);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--c-text-3);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: color var(--dur-1) var(--ease);
  }

  .ac-rail__sub:hover { color: var(--c-text-2); }
  .ac-rail__sub[aria-current="true"] { color: var(--c-primary-700); border-left-color: var(--c-primary-700); }
  .ac-rail__sub:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; }

  .ac-card { padding: var(--s-7); }
}

/* ================= 手机 ================= */

@media (max-width: 760px) {
  .ac-mod__headtx::before { inline-size: 2rem; margin-bottom: var(--s-3); }
  .ac-mod__intro { font-size: var(--fs-body); }
  .ac-card { padding: var(--s-5); border-radius: var(--r-md); }

  /* 表头是名词短语、单元格是整句,窄屏并排三列会把三边都挤成一字一行。
     改成一格一行,表头当每行的小标签 —— 同 helpcenter-r27.css:230 的既有做法。 */
  .ac-table, .ac-table tbody, .ac-table tr, .ac-table td { display: block; width: 100%; }
  .ac-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ac-table tr { border-top: 1px solid color-mix(in srgb, var(--c-border-strong) 45%, transparent); padding: var(--s-3) 0; }
  .ac-table td { border: 0; padding: 0 0 .35em; white-space: normal; }
  .ac-table td:first-child { color: var(--c-text); font-weight: 600; white-space: normal; }

  /* thead 藏起来之后,列名靠每格自带的 data-label 顶上,否则窄屏只剩一串没名字的数字 */
  .ac-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-eyebrow);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-3);
  }
  .ac-table td:first-child[data-label]::before { font-weight: 500; }

  /* 这里放的是公式不是代码,横滑才能读完一条公式在手机上等于读不到。
     pre-wrap 保留对齐用的空格,只是允许折行。 */
  .ac-code { white-space: pre-wrap; overflow-x: visible; }

  .ac-screen { margin-inline: calc(var(--s-5) * -1); }
  .ac-screen__bezel { border-radius: 0; border-inline: 0; }
  .ac-screen__bar { gap: var(--s-2); padding: var(--s-3); }
  .ac-screen__tag, .ac-screen__count { min-inline-size: 0; letter-spacing: .04em; }
  .ac-screen__cap { padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); min-block-size: 5em; }
  .ac-screen__ctrl { flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3); }
  .ac-screen__track { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-rail__link, .ac-rail__sub, .ac-key, .ac-screen__bezel,
  .ac-screen__tag::before, .ac-sample > summary::before { transition: none; }
  .an-glow { animation: none; }
  /* r44:阈值线被撞那一下也是动画,之前漏了 */
  .an-recoil { animation: none; }
  .ac-seg__fill { transition: none !important; }
}