@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   Retu site-2.0 · 板块插图 r6 · 统一词汇表(一份,不分支)

   房规(自检脚本逐条照着查):
     1. 零十六进制色值。颜色一律 var(--c-*)。
     2. 绝不用 --c-border / --c-divider —— 深色档这两个与 --c-surface 同值,
        用了整条线会消失。中性描边一律从 --c-border-strong 起步。
     3. SVG 里零 <text>、零内联 style=。文字全部走 .figure__keys / .figure__cap。
     4. 这里定义的每个类,snippets.html 都用得到;反过来也成立。

   ── 这一轮的不透明度预算(对齐首屏 brand/hero-home-light.svg)──
   首屏三档实测:0.0318 / 0.1596 / 0.3055,没有更强的。于是:
     场线(单向格线、密网眼、转虚的场)  ≤ .155  —— 派单给的上限是 .16
     结构线(单根 rule / datum / hold)   ≤ .3055 —— 首屏最强那一档,不再往上
     唯一的强音                          一枚 r≈5.5 的实心点(或那一处断口)
   r5 的对照数字:场线 .30/.48/.62/.66,实心块 fill 1.0。差的就是这一截。

   ── 记号表 ──
     .f6-base / .f6-veil        渐变底 + 边缘消隐罩(「有底、有消隐」)
     .f6-net-faint/.f6-net/-2   单向格线场。疏密差 = 核验分辨率差。
                                单向 ⇒ 几何上围不成格子,读者没有格子可数。
     .f6-mesh                   方形 = 按预设规则由智能体执行。
                                全图唯一允许双向闭合的地方,闭合本身是语义。
     .f6-holdnet / .f6-hold     待确认 / 被拒 / 间接。整段场转虚,或单根虚线。
     .f6-rule-2/.f6-rule/-strong 场里的结构线,三档粗细。
     .f6-datum                  基准线,最粗,两端出画框。
     .f6-arc + .f6-dot          圆形 = 具名的人裁定。场先让开一个圆(线真的没画),
                                弧带一处缺口,圆心落一枚极小的实心点。
     .f6-stop                   断口。一张图里只允许出现一个停止信号。
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. 版面:图是一整块出血的版,不是一个带边框的盒子 ────────────── */

.figblock {
  margin-block: var(--s-7) var(--s-6);
}

.figure--plate {
  padding: 0;
  border: 0;
  border-radius: var(--r-0);
  background: var(--c-surface);
  overflow: hidden;
}

.motif {
  display: block;
  width: 100%;
  height: auto;
}

.figmark {
  inline-size: min(330px, 62vw);
  margin-block: var(--s-5) var(--s-6);
}

.figmark--faint {
  inline-size: min(220px, 44vw);
  opacity: .72;
}

/* ── 2. 底与消隐 ─────────────────────────────────────────────────── */
/* 渐变三停对着首屏抄:浅底 → 浅蓝 → 更蓝。中间两停留了 stop-opacity,
   让它是一层染色而不是一块色板 —— 底下那层版面要透得出来。 */

.f6-bg0-p { stop-color: var(--c-surface); }
.f6-bg0-c { stop-color: var(--c-canvas); }
.f6-bg1 { stop-color: var(--c-primary-50); stop-opacity: .58; }
.f6-bg2 { stop-color: var(--c-primary-100); stop-opacity: .82; }

/* 消隐罩的颜色 = 这张图所坐的那层底。罩住的一侧化进版面,
   所以场不是四边齐平地框住,而是有一侧在化掉。 */
.f6-veil-p { stop-color: var(--c-surface); }
.f6-veil-c { stop-color: var(--c-canvas); }

/* 深色档同一组停会把整块版染成一块靛蓝砖 —— 炭底上那就是一个看得见的框,
   正是这一轮要躲的东西。压到一半,只留方向感,不留砖。
   分档本身是站体既有做法(theme-bridge.css 的 --hero-grid-opacity 就是这么分的);
   [data-theme] 在首帧前由页头内联脚本写好,不会闪。 */
[data-theme="dark"] .f6-bg1 { stop-opacity: .30; }
[data-theme="dark"] .f6-bg2 { stop-opacity: .46; }

.f6-base,
.f6-veil {
  stroke: none;
}

/* ── 3. 场:一律单向 ─────────────────────────────────────────────── */

.f6-net-faint,
.f6-net,
.f6-net-2,
.f6-mesh,
.f6-holdnet,
.f6-hold,
.f6-rule-2,
.f6-rule,
.f6-rule-strong,
.f6-datum,
.f6-arc,
.f6-stop {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* 场用蓝,和首屏同色(首屏的格线是 #1C7BD0,不是中性灰)。
   第一版把场画成中性灰,并排一看就泄了气 —— 同样 .155,
   中性灰在白底上只压下去 25/255,蓝能压下去 35/255,后者正是首屏中间那档。
   蓝在深色档也更活:#1C7BD0 压在 #1B2A33 上通道差 24,中性灰只有 11。 */

.f6-net-faint {
  stroke: var(--c-primary-500);
  stroke-width: 1.2;
  stroke-opacity: .055;
}

.f6-net {
  stroke: var(--c-primary-500);
  stroke-width: 1.2;
  stroke-opacity: .105;
}

.f6-net-2 {
  stroke: var(--c-primary-500);
  stroke-width: 1.2;
  stroke-opacity: .155;
}

/* 密网眼:和场同色同浓度,只差密度与方向 —— 格距 13.75 是最细的场的一半、
   且双向,单位面积的墨是场的四倍。所以把颜色整个抽掉它依然成立。 */
.f6-mesh {
  stroke: var(--c-primary-500);
  stroke-width: 1;
  stroke-opacity: .155;
}

/* 同一批场线转成的虚,所以同色同浓度,只是断开。 */
.f6-holdnet {
  stroke: var(--c-primary-500);
  stroke-width: 1.3;
  stroke-opacity: .155;
  stroke-dasharray: 4 7;
}

/* 深色档换一档更亮的蓝。--c-primary-500 在两份 token 里是同一个 #1C7BD0 ——
   浅底上它是图形档,炭底上再拿它当墨就是「深色 = 浅色反相」那个错:实测这一片密纹
   composited 之后对底只剩 17/255,疏与密的差当场塌掉(疏密差正是这里的语义)。
   --c-primary-600 是这条色阶里专为深色补的一档(#4091E8),同样 .155 能拉到 26/255。
   换的是色阶档位,不是槽位名,也没碰不透明度 —— 0.16 那条上限一格都不动。 */
[data-theme="dark"] .f6-net-faint,
[data-theme="dark"] .f6-net,
[data-theme="dark"] .f6-net-2,
[data-theme="dark"] .f6-mesh,
[data-theme="dark"] .f6-holdnet {
  stroke: var(--c-primary-600);
}

/* ── 4. 结构线:上限 .3055,不再往上 ─────────────────────────────── */

.f6-rule-2 {
  stroke: var(--c-border-strong);
  stroke-width: 1.8;
  stroke-opacity: .18;
}

.f6-rule {
  stroke: var(--c-border-strong);
  stroke-width: 2.4;
  stroke-opacity: .255;
}

.f6-rule-strong {
  stroke: var(--c-border-strong);
  stroke-width: 3.2;
  stroke-opacity: .3055;
}

.f6-datum {
  stroke: var(--c-border-strong);
  stroke-width: 4.6;
  stroke-opacity: .3055;
}

.f6-hold {
  stroke: var(--c-border-strong);
  stroke-width: 2.2;
  stroke-opacity: .3055;
  stroke-dasharray: 8 9;
}

/* ── 5. 强音:一张图只许有一个 ──────────────────────────────────── */

.f6-arc {
  stroke: var(--c-accent-500);
  stroke-width: 2.2;
  stroke-opacity: .70;
}

/* 全图唯一的实心图元。r≈5.5 在 880 宽的画布上约占万分之一面积。 */
.f6-dot {
  fill: var(--c-accent-500);
  stroke: none;
}

.f6-stop {
  stroke: var(--c-danger-600);
  stroke-width: 5;
  stroke-opacity: .8;
}

/* ── 6. 图例:给的是各项叫什么,不把说明抄一遍 ────────────────────── */

.figure__keys {
  display: grid;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-2);
}

.figure__key {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.figure__key b {
  flex: none;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}

/* 默认记号 = 密网眼。画的是双向细格本身,不是一块实心色。 */
.figure__key::before {
  content: "";
  flex: none;
  inline-size: .82em;
  block-size: .82em;
  translate: 0 .08em;
  background:
    repeating-linear-gradient(to right,
      var(--c-primary-500) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(to bottom,
      var(--c-primary-500) 0 1px, transparent 1px 3px);
  opacity: .9;
}

.figure__key--hold::before {
  background: none;
  border: 1.5px dashed var(--c-border-strong);
}

/* 圆口与点:一圈轮廓 + 圆心一枚小点,和画面里那个记号同构。 */
.figure__key--call::before {
  background: radial-gradient(circle at 50% 50%,
    var(--c-accent-500) 0 24%, transparent 24%);
  border: 1.5px solid var(--c-accent-500);
  border-radius: var(--r-pill);
}

.figure__key--datum::before {
  block-size: .26em;
  translate: 0 -.14em;
  background: var(--c-border-strong);
}

.figure__key--dense::before {
  background:
    repeating-linear-gradient(to right,
      var(--c-primary-500) 0 1px, transparent 1px 3px);
}

/* 断口:一段线,中间缺了一截。 */
.figure__key--stop::before {
  block-size: .3em;
  translate: 0 -.12em;
  background: var(--c-danger-600);
}

.figure__key--void::before {
  background: none;
  border: 1.5px solid var(--c-border-strong);
  opacity: .5;
}

.figure__key--gap::before {
  background: none;
  border-block: 3px solid var(--c-border-strong);
}

/* 出血线:一根穿过去、两端都没停的线。 */
.figure__key--esc::before {
  inline-size: .22em;
  margin-inline: .3em;
  background: var(--c-border-strong);
}

@media (min-width: 768px) {
  .figure__keys--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figure__keys--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── 6b. 窄屏:只给 A 档补回线宽 ────────────────────────────────────
   A 档的 viewBox 是 880 宽。桌面上它铺到 ~1040px(放大 1.18×),
   到 375 屏只剩 343px —— 缩了 0.39×,1.2 的线落到 0.47 设备像素,
   浏览器只能拿半透明的一像素去凑,整片场就洗白了。实测过,不是推算。
   所以窄屏统一乘 2.3 补回去(0.39 × 2.3 ≈ 0.9 设备像素)。
   不透明度一个都不动 —— 补的是宽度,不是浓度,上限那条线不碰。
   B / C 档的 viewBox 本来就是 330 / 220,窄屏只缩到 0.7 上下,不在这儿补。 */
@media (max-width: 640px) {
  .figure--plate .f6-net-faint,
  .figure--plate .f6-net,
  .figure--plate .f6-net-2 { stroke-width: 2.76; }
  .figure--plate .f6-mesh { stroke-width: 2.3; }
  .figure--plate .f6-holdnet { stroke-width: 3; stroke-dasharray: 9 16; }
  .figure--plate .f6-rule-2 { stroke-width: 4.14; }
  .figure--plate .f6-rule { stroke-width: 5.52; }
  .figure--plate .f6-rule-strong { stroke-width: 7.36; }
  .figure--plate .f6-datum { stroke-width: 10.6; }
  .figure--plate .f6-hold { stroke-width: 5.06; stroke-dasharray: 18 21; }
  .figure--plate .f6-arc { stroke-width: 5.06; }
  .figure--plate .f6-stop { stroke-width: 11.5; }
  .figure--plate .f6-dot { r: 11; }
}

/* ── 7. 说明:与站体 .figure__cap 同源,这里只补外边距 ────────────── */

.figblock .figure__cap {
  margin-top: var(--s-4);
  max-width: 52em;
}