llm-atlas/src/components/DeepSeekArtifactLab.astro

---
import rawTrace from "@/data/deepseek-v2-lite-trace.json";
import rawRepro from "@/data/deepseek-v2-lite-trace-repro.json";
import rawAbsorb from "@/data/deepseek-v2-lite-absorb.json";
import rawAbsorbRepro from "@/data/deepseek-v2-lite-absorb-repro.json";
import rawCorpus from "@/data/deepseek-v2-lite-routing-corpus.json";
import rawCorpusRepro from "@/data/deepseek-v2-lite-routing-corpus-repro.json";
import rawMatched16 from "@/data/deepseek-v2-lite-routing-matched16.json";
import rawMatched16Repro from "@/data/deepseek-v2-lite-routing-matched16-repro.json";
import rawMatched24 from "@/data/deepseek-v2-lite-routing-matched24.json";
import rawMatched24Repro from "@/data/deepseek-v2-lite-routing-matched24-repro.json";
import rawLengthSensitivity from "@/data/deepseek-v2-lite-routing-length-sensitivity.json";
import rawTemplate from "@/data/deepseek-v2-lite-routing-template.json";
import rawTemplateRepro from "@/data/deepseek-v2-lite-routing-template-repro.json";
import rawHistory from "@/data/deepseek-v2-lite-routing-history-factorial.json";
import rawHistoryRepro from "@/data/deepseek-v2-lite-routing-history-factorial-repro.json";
import rawDistance from "@/data/deepseek-v2-lite-routing-history-distance-control.json";
import rawDistanceRepro from "@/data/deepseek-v2-lite-routing-history-distance-control-repro.json";
import rawBoundaryCompact from "@/data/deepseek-v2-lite-routing-history-boundary-token-control-compact.json";
import rawRoleCompact from "@/data/deepseek-v2-lite-routing-role-marker-head-control-compact.json";
import rawSpecialCompact from "@/data/deepseek-v2-lite-routing-special-token-family-control-compact.json";
import rawRoleBlockCompact from "@/data/deepseek-v2-lite-routing-role-marker-block-factorial-compact.json";

const trace = rawTrace as any;
const repro = rawRepro as any;
const absorb = rawAbsorb as any;
const absorbRepro = rawAbsorbRepro as any;
const corpus = rawCorpus as any;
const corpusRepro = rawCorpusRepro as any;
const matched16 = rawMatched16 as any;
const matched16Repro = rawMatched16Repro as any;
const matched24 = rawMatched24 as any;
const matched24Repro = rawMatched24Repro as any;
const lengthSensitivity = rawLengthSensitivity as any;
const template = rawTemplate as any;
const templateRepro = rawTemplateRepro as any;
const history = rawHistory as any;
const historyRepro = rawHistoryRepro as any;
const distance = rawDistance as any;
const distanceRepro = rawDistanceRepro as any;
const boundaryCompact = rawBoundaryCompact as any;
const roleCompact = rawRoleCompact as any;
const specialCompact = rawSpecialCompact as any;
const roleBlockCompact = rawRoleBlockCompact as any;
const absorbExact = JSON.stringify(absorb) === JSON.stringify(absorbRepro);
const corpusExact = JSON.stringify(corpus) === JSON.stringify(corpusRepro);
const matched16Exact = JSON.stringify(matched16) === JSON.stringify(matched16Repro);
const matched24Exact = JSON.stringify(matched24) === JSON.stringify(matched24Repro);
const templateExact = JSON.stringify(template) === JSON.stringify(templateRepro);
const historyExact = JSON.stringify(history) === JSON.stringify(historyRepro);
const distanceExact = JSON.stringify(distance) === JSON.stringify(distanceRepro);
const boundaryExact = boundaryCompact.source.exact;
const roleExact = roleCompact.source.exact;
const specialExact = specialCompact.source.exact;
const roleBlockExact = roleBlockCompact.source.exact;
const bytes = (value: number) => value >= 1024
  ? `${(value / 1024).toFixed(2)} KiB`
  : `${value.toLocaleString()} B`;
const scientific = (value: number) => value.toExponential(2);
const compact = {
  prompts: trace.prompts.map((prompt: any) => ({
    id: prompt.id,
    label: prompt.label,
    text: prompt.text,
  })),
  layers: trace.execution.layers.slice(1).map((layer: any) => ({
    layer: layer.layer,
    load: layer.routing.aggregate_load,
    metrics: layer.routing.aggregate_metrics,
    selectedWeight: layer.routing.selected_weight_sum,
    topExperts: layer.routing.top_experts,
    prompts: layer.routing.per_prompt.map((prompt: any) => ({
      id: prompt.id,
      label: prompt.label,
      tokens: prompt.tokens,
      load: prompt.load,
      metrics: prompt.metrics,
      topExperts: prompt.top_experts,
      tokenRoutes: prompt.token_routes,
    })),
    jaccard: layer.routing.prompt_pair_jaccard,
  })),
  cache: trace.cache_accounting,
  execution: {
    batch: trace.execution.batch,
    paddedSequence: trace.execution.padded_sequence,
    validTokens: trace.execution.valid_tokens,
  },
};
const compactJson = JSON.stringify(compact).replaceAll("<", "\\u003c");
const compactCorpus = (input: any) => ({
  domains: input.corpus_contract.domains,
  labels: input.corpus_contract.domain_labels,
  counts: input.corpus_contract.counts,
  inference: input.inference_contract,
  statistics: input.statistical_contract,
  layers: input.layers.slice(1).map((layer: any) => ({
    layer: layer.layer,
    routes: layer.routes,
    modes: layer.statistics,
  })),
});
const corpusCompact = {
  cohorts: {
    natural: compactCorpus(corpus),
    matched16: compactCorpus(matched16),
    matched24: compactCorpus(matched24),
  },
  lengthSensitivity,
};
const corpusCompactJson = JSON.stringify(corpusCompact).replaceAll("<", "\\u003c");
const aggregateTemplateAlignment = (layer: any, domain: string) => {
  const rows = layer.prompts
    .filter((prompt: any) => prompt.domain === domain)
    .map((prompt: any) => prompt.alignments.raw_to_user_content);
  const aligned = rows.reduce((sum: number, row: any) => sum + row.aligned_tokens, 0);
  const setExact = rows.reduce((sum: number, row: any) => sum + row.set_topk_exact, 0);
  const orderedExact = rows.reduce((sum: number, row: any) => sum + row.ordered_topk_exact, 0);
  const weightedJaccard = rows.reduce(
    (sum: number, row: any) => sum + row.mean_jaccard * row.aligned_tokens,
    0,
  );
  return {
    aligned,
    setExactRate: setExact / aligned,
    orderedExactRate: orderedExact / aligned,
    meanJaccard: weightedJaccard / aligned,
  };
};
const templateCompact = {
  domains: template.corpus_contract.domains,
  labels: template.corpus_contract.domain_labels,
  inference: template.inference_contract,
  template: {
    sha256: template.template_contract.chat_template_sha256,
    bos: template.template_contract.bos_token_id,
  },
  exact: templateExact,
  layers: template.layers.slice(1).map((layer: any) => ({
    layer: layer.layer,
    invariant: layer.causal_suffix_invariant,
    alignment: Object.fromEntries(
      template.corpus_contract.domains.map((domain: string) => [
        domain,
        aggregateTemplateAlignment(layer, domain),
      ]),
    ),
    scopes: Object.fromEntries(
      ["content_only", "full_input"].map((scope) => [
        scope,
        {
          modes: Object.fromEntries(
            ["prompt_balanced", "token_weighted"].map((mode) => [
              mode,
              {
                rawToUser: layer.statistics[scope].modes[mode]
                  .comparisons.raw_to_user,
                userToGeneration: layer.statistics[scope].modes[mode]
                  .comparisons.user_to_generation,
              },
            ]),
          ),
        },
      ]),
    ),
  })),
};
const templateCompactJson = JSON.stringify(templateCompact).replaceAll("<", "\\u003c");
const historyConditions = ["s0f0", "s1f0", "s0f1", "s1f1"];
const historyEdges = ["system_at_f0", "system_at_f1", "fewshot_at_s0", "fewshot_at_s1"];
const aggregateHistoryAlignment = (layer: any, domain: string, edge: string) => {
  const rows = layer.prompts
    .filter((prompt: any) => prompt.domain === domain)
    .map((prompt: any) => prompt.alignments[edge]);
  const aligned = rows.reduce((sum: number, row: any) => sum + row.aligned_tokens, 0);
  const setExact = rows.reduce((sum: number, row: any) => sum + row.set_topk_exact, 0);
  const orderedExact = rows.reduce((sum: number, row: any) => sum + row.ordered_topk_exact, 0);
  const weightedJaccard = rows.reduce(
    (sum: number, row: any) => sum + row.mean_jaccard * row.aligned_tokens,
    0,
  );
  return {
    aligned,
    setExactRate: setExact / aligned,
    orderedExactRate: orderedExact / aligned,
    meanJaccard: weightedJaccard / aligned,
  };
};
const historyCompact = {
  domains: history.corpus_contract.domains,
  labels: history.corpus_contract.domain_labels,
  inference: history.inference_contract,
  messages: {
    system: history.message_history_contract.system_message,
    demoUser: history.message_history_contract.demo_user,
    demoAssistant: history.message_history_contract.demo_assistant,
  },
  exact: historyExact,
  layers: history.layers.slice(1).map((layer: any) => ({
    layer: layer.layer,
    alignment: Object.fromEntries(
      history.corpus_contract.domains.map((domain: string) => [
        domain,
        Object.fromEntries(
          historyEdges.map((edge) => [
            edge,
            aggregateHistoryAlignment(layer, domain, edge),
          ]),
        ),
      ]),
    ),
    scopes: Object.fromEntries(
      ["target_content", "full_input"].map((scope) => [
        scope,
        {
          modes: Object.fromEntries(
            ["prompt_balanced", "token_weighted"].map((mode) => {
              const statistics = layer.statistics[scope].modes[mode];
              return [
                mode,
                {
                  conditions: Object.fromEntries(
                    historyConditions.map((condition) => [
                      condition,
                      Object.fromEntries(
                        history.corpus_contract.domains.map((domain: string) => [
                          domain,
                          statistics.conditions[condition][domain].metrics.cv.point,
                        ]),
                      ),
                    ]),
                  ),
                  factorial: Object.fromEntries(
                    history.corpus_contract.domains.map((domain: string) => [
                      domain,
                      statistics.factorial[domain].metric_effects.cv,
                    ]),
                  ),
                  comparisons: Object.fromEntries(
                    historyEdges.map((edge) => [
                      edge,
                      Object.fromEntries(
                        history.corpus_contract.domains.map((domain: string) => [
                          domain,
                          {
                            cv: statistics.comparisons[edge][domain].metrics.cv,
                            tv: statistics.comparisons[edge][domain].total_variation,
                            jsd: statistics.comparisons[edge][domain].js_divergence,
                          },
                        ]),
                      ),
                    ]),
                  ),
                },
              ];
            }),
          ),
        },
      ]),
    ),
  })),
};
const historyCompactJson = JSON.stringify(historyCompact).replaceAll("<", "\\u003c");
const distanceEdges = [
  "system_none",
  "system_filler",
  "system_demo",
  "demo_vs_filler_s0",
  "demo_vs_filler_s1",
];
const aggregateDistanceAlignment = (layer: any, domain: string, edge: string) => {
  const rows = layer.prompts
    .filter((prompt: any) => prompt.domain === domain)
    .map((prompt: any) => prompt.alignments[edge]);
  const aligned = rows.reduce((sum: number, row: any) => sum + row.aligned_tokens, 0);
  const setExact = rows.reduce((sum: number, row: any) => sum + row.set_topk_exact, 0);
  const orderedExact = rows.reduce((sum: number, row: any) => sum + row.ordered_topk_exact, 0);
  const weightedJaccard = rows.reduce(
    (sum: number, row: any) => sum + row.mean_jaccard * row.aligned_tokens,
    0,
  );
  return {
    aligned,
    setExactRate: setExact / aligned,
    orderedExactRate: orderedExact / aligned,
    meanJaccard: weightedJaccard / aligned,
  };
};
const distanceCompact = {
  domains: distance.corpus_contract.domains,
  labels: distance.corpus_contract.domain_labels,
  inference: distance.inference_contract,
  messages: {
    system: distance.history_control_contract.system_message,
    demoUser: distance.history_control_contract.demo_user,
    demoAssistant: distance.history_control_contract.demo_assistant,
    fillerUser: distance.history_control_contract.filler_user,
    fillerAssistant: distance.history_control_contract.filler_assistant,
  },
  exact: distanceExact,
  layers: distance.layers.slice(1).map((layer: any) => ({
    layer: layer.layer,
    alignment: Object.fromEntries(
      distance.corpus_contract.domains.map((domain: string) => [
        domain,
        Object.fromEntries(
          distanceEdges.map((edge) => [
            edge,
            aggregateDistanceAlignment(layer, domain, edge),
          ]),
        ),
      ]),
    ),
    scopes: Object.fromEntries(
      ["target_content", "full_input"].map((scope) => [
        scope,
        {
          modes: Object.fromEntries(
            ["prompt_balanced", "token_weighted"].map((mode) => {
              const control = layer.statistics[scope].modes[mode].history_control;
              return [
                mode,
                Object.fromEntries(
                  distance.corpus_contract.domains.map((domain: string) => [
                    domain,
                    {
                      distances: control[domain].system_edge_distances,
                      contrasts: control[domain].system_edge_distance_contrasts,
                      cvEdges: control[domain].metric_system_edges.cv,
                      cvContrasts: control[domain].metric_system_edge_contrasts.cv,
                      lexical: control[domain].lexical_replacement,
                    },
                  ]),
                ),
              ];
            }),
          ),
        },
      ]),
    ),
  })),
};
const distanceCompactJson = JSON.stringify(distanceCompact).replaceAll("<", "\\u003c");
const boundaryCompactJson = JSON.stringify(boundaryCompact).replaceAll("<", "\\u003c");
const roleCompactJson = JSON.stringify(roleCompact).replaceAll("<", "\\u003c");
const specialCompactJson = JSON.stringify(specialCompact).replaceAll("<", "\\u003c");
const roleBlockCompactJson = JSON.stringify(roleBlockCompact).replaceAll("<", "\\u003c");
const aggregateCrossBatch = (input: any) => [1, 2, 3, 4, 5, 6].map((layer) => {
  const rows = input.crossBatch.filter((row: any) => row.layer === layer);
  return {
    layer,
    compared: rows.reduce((sum: number, row: any) => sum + row.compared, 0),
    targetRouteHashExact: rows.reduce(
      (sum: number, row: any) => sum + row.targetRouteHashExact,
      0,
    ),
    targetLoadExact: rows.reduce(
      (sum: number, row: any) => sum + row.targetLoadExact,
      0,
    ),
  };
});
const specialCrossBatch = aggregateCrossBatch(specialCompact);
const roleBlockCrossBatch = aggregateCrossBatch(roleBlockCompact);
const shardFraction = trace.provenance.shard_1_bytes / trace.provenance.checkpoint_tensor_bytes;
---

<figure class="artifact-lab" data-dsv2-lab>
  <header class="artifact-head">
    <div>
      <p>REAL-WEIGHT LAB / DEEPSEEK-V2-LITE</p>
      <h3>这一次不是调公式：让官方权重真的走过七层</h3>
    </div>
    <p>
      固定官方 revision、tokenizer、模型代码和 BF16 第一分片；RTX 5090 连续执行 layer 0–6，
      从 3,240 次 token 显微轨迹扩到 11,289,744 次公开语料路由，并让 layer-1 权重继续走入官方吸收式 cache。
      所有结论都带证据身份与停止线。
    </p>
  </header>

  <div class="artifact-status">
    <span><i>X</i><b>本机执行</b>真实权重与 hidden states</span>
    <span><i>O</i><b>官方工件</b>配置、代码与 checkpoint</span>
    <span><i>D</i><b>确定推导</b>从 shape 计算 bytes</span>
    <span><i>U</i><b>未覆盖</b>全模型、训练与生产 kernel</span>
  </div>

  <div class="artifact-tabs" role="tablist" aria-label="选择 DeepSeek V2-Lite 真实工件实验">
    <button type="button" role="tab" data-artifact-tab="route" aria-selected="true">
      <span>01</span><b>路由显微镜</b><small>token → top-6 experts</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="load" aria-selected="false" tabindex="-1">
      <span>02</span><b>覆盖 ≠ 均衡</b><small>CV · Gini · entropy</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="cache" aria-selected="false" tabindex="-1">
      <span>03</span><b>缓存实现账</b><small>latent vs HF eager</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="absorb" aria-selected="false" tabindex="-1">
      <span>04</span><b>吸收式执行</b><small>real cache · SM120</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="corpus" aria-selected="false" tabindex="-1">
      <span>05</span><b>128 样本区间</b><small>4 domains · bootstrap</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="template" aria-selected="false" tabindex="-1">
      <span>06</span><b>官方模板扰动</b><small>raw → user → assistant</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="history" aria-selected="false" tabindex="-1">
      <span>07</span><b>消息历史 2×2</b><small>system × one-shot</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="distance" aria-selected="false" tabindex="-1">
      <span>08</span><b>等长历史控制</b><small>none → filler → demo</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="boundary" aria-selected="false" tabindex="-1">
      <span>09</span><b>边界单词元控制</b><small>EOS ↔ x / . / ↵</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="role" aria-selected="false" tabindex="-1">
      <span>10</span><b>角色词头控制</b><small>User ↔ Assistant / x</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="special" aria-selected="false" tabindex="-1">
      <span>11</span><b>特殊词元家族</b><small>EOS / BOS ↔ x / .</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="role-block" aria-selected="false" tabindex="-1">
      <span>12</span><b>完整角色块</b><small>head × delimiter</small>
    </button>
    <button type="button" role="tab" data-artifact-tab="evidence" aria-selected="false" tabindex="-1">
      <span>13</span><b>证据断面</b><small>revision · shards · rerun</small>
    </button>
  </div>

  <section class="artifact-panel" data-artifact-panel="route">
    <div class="panel-lead">
      <div><span>X / TOKEN-LEVEL ROUTES</span><h4>先选层，再选 prompt 和 token</h4></div>
      <p>同一个 expert ID 只在当前层内有意义；跨层同号专家是不同参数，图中不会把它们连成“专长轨迹”。</p>
    </div>

    <div class="route-controls">
      <label>
        <span>decoder layer</span>
        <select data-route-layer aria-label="选择路由层">
          {[1, 2, 3, 4, 5, 6].map((layer) => <option value={layer}>layer {layer}</option>)}
        </select>
      </label>
      <label>
        <span>prompt</span>
        <select data-route-prompt aria-label="选择 prompt">
          {trace.prompts.map((prompt: any) => <option value={prompt.id}>{prompt.label} · {prompt.token_ids.length} tokens</option>)}
        </select>
      </label>
      <label class="token-select">
        <span>token position / decoded piece</span>
        <select data-route-token aria-label="选择 token"></select>
      </label>
    </div>

    <div class="token-context">
      <span>PROMPT</span>
      <p data-route-prompt-text></p>
    </div>

    <div class="route-stage">
      <article class="token-card">
        <span>TOKEN <b data-route-position>#0</b></span>
        <strong data-route-piece></strong>
        <small>ID <b data-route-token-id></b></small>
      </article>
      <i aria-hidden="true">→</i>
      <div>
        <span class="micro-title">ACTUAL TOP-6 / WEIGHT DESCENDING</span>
        <div class="chosen-experts" data-route-experts></div>
      </div>
      <i aria-hidden="true">→</i>
      <article class="sum-card">
        <span>SELECTED WEIGHT SUM</span>
        <strong data-route-weight-sum></strong>
        <small>配置不把 top-6 重新归一到 1</small>
      </article>
    </div>

    <div class="heat-head">
      <div>
        <span>64 ROUTED EXPERTS / CURRENT PROMPT</span>
        <b data-route-heat-title></b>
      </div>
      <p>颜色表示这条 prompt 在当前层的选择次数；空白表示本小样本未触达，不表示专家失效。</p>
    </div>
    <div class="expert-heatmap" data-route-heatmap aria-label="64 个 routed expert 负载热图"></div>

    <div class="route-metrics">
      <article><span>ROUTES</span><b data-route-count></b><p>tokens × top-6</p></article>
      <article><span>USED / 64</span><b data-route-used></b><p>至少被选一次</p></article>
      <article><span>CV</span><b data-route-cv></b><p>std ÷ mean</p></article>
      <article><span>EFFECTIVE</span><b data-route-effective></b><p>exp(route entropy)</p></article>
    </div>

    <div class="artifact-boundary">
      <b>X / DESCRIPTIVE TRACE</b>
      <p>这是 4 条固定 prompt、90 个有效 token 的前六个 MoE 层；不能据此命名专家、估计线上总体负载或判断训练均衡。</p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="load" hidden>
    <div class="panel-lead">
      <div><span>X + D / LOAD ACCOUNTING</span><h4>“64 个专家几乎都用到了”为什么仍可能不均衡</h4></div>
      <p>覆盖只问是否出现过；CV、Gini 与 effective experts 才描述计数分布。这里同时展示 aggregate 与四条 prompt。</p>
    </div>

    <div class="layer-switch" role="group" aria-label="选择负载统计层">
      {[1, 2, 3, 4, 5, 6].map((layer) => (
        <button type="button" data-load-layer={layer} class={layer === 1 ? "active" : ""}>L{layer}</button>
      ))}
    </div>

    <div class="aggregate-card">
      <div>
        <span>AGGREGATE / 90 TOKENS</span>
        <strong><b data-load-used></b> / 64 used</strong>
        <p><span data-load-zero></span> 个专家在本样本为零；总选择数固定为 540。</p>
      </div>
      <div class="load-dials">
        <article><span>CV</span><b data-load-cv></b><i><em data-load-cv-bar></em></i></article>
        <article><span>GINI</span><b data-load-gini></b><i><em data-load-gini-bar></em></i></article>
        <article><span>EFFECTIVE</span><b data-load-effective></b><i><em data-load-effective-bar></em></i></article>
      </div>
    </div>

    <div class="load-table" role="table" aria-label="按 prompt 的专家负载统计">
      <div class="head" role="row">
        <b role="columnheader">SCOPE</b><b role="columnheader">TOKENS</b><b role="columnheader">USED</b>
        <b role="columnheader">CV</b><b role="columnheader">GINI</b><b role="columnheader">TOP EXPERT</b>
      </div>
      <div data-load-rows></div>
    </div>

    <div class="jaccard-block">
      <div>
        <span>USED-SET OVERLAP</span>
        <h5>同层 prompt 两两 Jaccard</h5>
        <p>只比较“用过哪些 ID”，不比较权重、次数或语义。</p>
      </div>
      <div data-load-jaccard></div>
    </div>

    <div class="load-lessons">
      <article><span>FALSE SHORTCUT</span><b>63 / 64 used → balanced</b><p>Layer 1 虽触达 63 个专家，CV 仍为 0.925，E8 被选 48 次。</p></article>
      <article><span>CORRECT READING</span><b>同看覆盖、离散度和熵</b><p>Layer 2 的 64/64、CV 0.549 与 effective 55.08 才构成较完整的描述。</p></article>
      <article><span>HARD BOUNDARY</span><b>ID is not semantics</b><p>Layer 4 的 E48 只是该层参数索引；不能命名成“代码专家”。</p></article>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="cache" hidden>
    <div class="panel-lead">
      <div><span>X + D / IMPLEMENTATION GAP</span><h4>MLA 定义了可压缩状态，不保证框架已经按压缩格式存</h4></div>
      <p>上半区是本次真实 shape；下半区只把相同维度扩展到可调 batch、context、layers 和 dtype。</p>
    </div>

    <div class="observed-cache">
      <article>
        <span>X / ACTUAL PROJECTION</span>
        <strong>[4, 27, <b>576</b>]</strong>
        <p>512 KV latent + 64 decoupled RoPE key</p>
      </article>
      <i aria-hidden="true">≠</i>
      <article class="expanded">
        <span>X / HF EAGER CACHE</span>
        <strong>K [4,16,27,<b>192</b>]</strong>
        <strong>V [4,16,27,<b>128</b>]</strong>
        <p>官方 eager 路径物化展开后的多头 K/V</p>
      </article>
    </div>

    <div class="cache-controls">
      <label><span>batch B <output data-cache-batch-label>4</output></span><input data-cache-batch type="range" min="1" max="32" value="4" /></label>
      <label><span>context T</span><select data-cache-context><option value="27">27 / 本次 trace</option><option value="4096">4K</option><option value="32768">32K</option><option value="131072">128K</option><option value="1048576">1M</option></select></label>
      <label><span>layers L <output data-cache-layers-label>7</output></span><input data-cache-layers type="range" min="1" max="27" value="7" /></label>
      <label><span>storage</span><select data-cache-dtype><option value="1">1 byte</option><option value="2" selected>BF16 / 2 bytes</option><option value="4">FP32 / 4 bytes</option></select></label>
    </div>

    <div class="cache-ledger">
      <article>
        <header><span>D / LATENT CONTRACT</span><b>576 elements / token / layer</b></header>
        <div class="cache-bar latent"><i></i></div>
        <strong data-cache-latent-bytes></strong>
        <p>512 latent + 64 RoPE key；需要配套吸收与 attention kernel 才能兑现。</p>
      </article>
      <article>
        <header><span>X→D / HF EAGER FORMAT</span><b>5,120 elements / token / layer</b></header>
        <div class="cache-bar eager"><i></i></div>
        <strong data-cache-eager-bytes></strong>
        <p>16 × (192 key + 128 value)；按真实 shape 外推，不是服务显存 benchmark。</p>
      </article>
    </div>

    <div class="cache-ratio">
      <article><span>EAGER / LATENT</span><b data-cache-ratio></b><p>相同 B/T/L/dtype 下的元素倍数</p></article>
      <article><span>LATENT REDUCTION</span><b data-cache-reduction></b><p>相对本次 HF eager 物化口径</p></article>
      <article class="warning"><span>NOT REPRODUCED</span><b>93.3%</b><p>这是 V2 报告的另一模型 / 基线 / 配置口径</p></article>
    </div>

    <div class="artifact-boundary">
      <b>IMPLEMENTATION CONTRACT</b>
      <p>算法上“可以缓存 576 元素”与 HF eager“实际缓存 5,120 元素”同时为真；下一页继续执行官方 absorb 参考路径，生产吞吐仍需要受支持的优化 kernel 与 serving runtime。</p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="absorb" hidden>
    <div class="panel-lead">
      <div><span>X + O / WEIGHT ABSORPTION</span><h4>这一次 576 元素真的进入了缓存</h4></div>
      <p>
        同一组真实 V2-Lite layer-1 权重、同一条 26-token hidden-state 轨迹：
        先用 V3 官方 naive 路径展开 K/V，再用官方 absorb 路径做 25-token prefill + 1-token decode。
      </p>
    </div>

    <div class="absorb-algebra" aria-label="MLA 权重吸收的两条代数变换">
      <article>
        <span>SCORE / 把 Wᴷ 搬到 query</span>
        <code>qᵀ(Wᴷc) = (Wᴷᵀq)ᵀc</code>
        <p>不再为每个历史 token、每个 head 存展开后的 no-RoPE key；query 先变成 512 维，再与 latent <i>c</i> 相乘。</p>
      </article>
      <article>
        <span>VALUE / 把 Wⱽ 搬到 attention 后</span>
        <code>Σ pₜ(Wⱽcₜ) = Wⱽ(Σ pₜcₜ)</code>
        <p>先对 512 维 latent 做加权和，再展开成各 head 的 value。含位置的 64 维 RoPE key 不能这样吸收，必须单独缓存。</p>
      </article>
    </div>

    <div class="absorb-cache-flow">
      <article class="naive">
        <header><span>X / V3 NAIVE · BF16</span><b>{bytes(absorb.cache_accounting.naive_active_bytes)}</b></header>
        <div>
          <code>K [1, 26, 16, 192]</code>
          <code>V [1, 26, 16, 128]</code>
        </div>
        <p>26 × 5,120 元素；与 HF eager 是同一种展开状态。</p>
      </article>
      <i aria-hidden="true">→</i>
      <article class="absorbed">
        <header><span>X / V3 ABSORB · BF16</span><b>{bytes(absorb.cache_accounting.absorb_active_bytes)}</b></header>
        <div>
          <code>latent [1, 26, 512]</code>
          <code>RoPE [1, 26, 64]</code>
        </div>
        <p>26 × 576 元素；两个官方 buffer 的真实 active slice。</p>
      </article>
    </div>

    <div class="absorb-metrics">
      <article><span>REAL CACHE RATIO</span><b>{absorb.cache_accounting.naive_over_absorb_ratio.toFixed(4)}×</b><p>展开 K/V ÷ latent + RoPE</p></article>
      <article><span>BF16 MAX |Δ|</span><b>{absorb.correctness.v3_naive_vs_absorb_bfloat16.max_abs}</b><p>官方 V3 naive ↔ absorb decode</p></article>
      <article><span>FP32 MAX |Δ|</span><b>{scientific(absorb.correctness.v3_naive_vs_absorb_float32.max_abs)}</b><p>同一 BF16 权重转 FP32 做代数审计</p></article>
      <article class="exact"><span>INDEPENDENT RERUN</span><b>{absorbExact ? "BYTE-EXACT" : "MISMATCH"}</b><p>完整 JSON SHA-256 6b4c714a…e63d</p></article>
    </div>

    <div class="precision-lens">
      <div>
        <span>HF EAGER ↔ V3 NAIVE / BF16</span>
        <i><em style={`--error:${absorb.correctness.hf_eager_vs_v3_naive_bfloat16.max_abs / .004}`}></em></i>
        <b>max {absorb.correctness.hf_eager_vs_v3_naive_bfloat16.max_abs}</b>
      </div>
      <div>
        <span>V3 NAIVE ↔ ABSORB / BF16</span>
        <i><em style={`--error:${absorb.correctness.v3_naive_vs_absorb_bfloat16.max_abs / .004}`}></em></i>
        <b>max {absorb.correctness.v3_naive_vs_absorb_bfloat16.max_abs}</b>
      </div>
      <div>
        <span>V3 NAIVE ↔ ABSORB / FP32</span>
        <i><em style={`--error:${absorb.correctness.v3_naive_vs_absorb_float32.max_abs / .004}`}></em></i>
        <b>max {scientific(absorb.correctness.v3_naive_vs_absorb_float32.max_abs)}</b>
      </div>
      <p>
        三组输出均 finite。FP32 不是新的 checkpoint 精度，而是把同一组 BF16 权重提升后，
        隔离矩阵乘法顺序造成的舍入误差。
      </p>
    </div>

    <div class="kernel-contract">
      <div>
        <span>OFFICIAL FLASHMLA / PINNED {absorb.flashmla_boundary.official_revision.slice(0, 8)}</span>
        <h5>算法路径已执行，不等于优化 kernel 已执行</h5>
        <p>官方支持矩阵与编译目标只覆盖 SM90 / SM100；本机 RTX 5090 是 SM120。</p>
      </div>
      <div class="kernel-matrix" role="table" aria-label="FlashMLA 官方架构支持矩阵">
        <div class="head" role="row"><b>KERNEL</b><b>SM90</b><b>SM100</b><b>LOCAL SM120</b></div>
        <div role="row"><span>dense decode</span><i class="yes">支持</i><i>—</i><i class="no">未支持</i></div>
        <div role="row"><span>sparse decode</span><i class="yes">支持</i><i class="yes">支持</i><i class="no">未支持</i></div>
        <div role="row"><span>dense prefill</span><i>—</i><i class="yes">支持</i><i class="no">未支持</i></div>
        <div role="row"><span>sparse prefill</span><i class="yes">支持</i><i class="yes">支持</i><i class="no">未支持</i></div>
      </div>
    </div>

    <div class="execution-split">
      <article><span>EXECUTED</span><b>官方 V3 pure-PyTorch absorb</b><p>真实权重、真实 latent / RoPE buffers、真实 incremental decode。</p></article>
      <article><span>BUILD ATTEMPTS</span><b>2 个环境，均未产出 wheel</b><p>host 编译器边界；隔离 CUDA 13 环境缺少 <code>cuda/std/utility</code>。</p></article>
      <article class="blocked"><span>NOT EXECUTED</span><b>FlashMLA optimized kernel</b><p>源码只生成 <code>sm_90a</code> / <code>sm_100f</code>，dense decode 运行时还拒绝非 SM90a。</p></article>
    </div>

    <div class="evidence-links">
      <a href="https://github.com/deepseek-ai/DeepSeek-V3/blob/main/inference/model.py" rel="noreferrer">官方 V3 absorb 参考实现 ↗</a>
      <a href="https://github.com/deepseek-ai/FlashMLA" rel="noreferrer">官方 FlashMLA 支持矩阵 ↗</a>
      <a href="https://arxiv.org/abs/2405.04434" rel="noreferrer">DeepSeek-V2 MLA 报告 ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>CORRECT CLAIM</b>
      <p>
        本实验复现的是“真实权重 + 官方参考实现中的压缩缓存与 decode 等价性”，不是 FlashMLA 性能、
        生产 serving 吞吐或 V2 论文完整模型相对 MHA 的 93.3% 缓存降幅。
      </p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="corpus" hidden>
    <div class="panel-lead">
      <div><span>X + S / FIXED PUBLIC CORPUS</span><h4>从自然长度，再走到同 prompt 的 16 / 24-token 对照</h4></div>
      <p>
        三个 cohort 都来自 WikiText-2、TNEWS、HumanEval、GSM8K；等长两档使用完全相同的
        128 条源 prompt 和嵌套前缀。每个区间都重采样 prompt，不把相关 token 假装成独立样本。
      </p>
    </div>

    <div class="corpus-ledger">
      <article><span>COHORTS</span><b>3</b><p>natural ≤96 · matched 16 / 24</p></article>
      <article><span>PROMPT RUNS</span><b>384</b><p>每档 4 domains × 32</p></article>
      <article><span>VALID TOKENS</span><b>13,580</b><p>答案未使用，代码未执行</p></article>
      <article><span>REAL ROUTES</span><b>488,880</b><p>三档 × 前六个 MoE 层</p></article>
      <article><span>BOOTSTRAP</span><b>{corpus.statistical_contract.replicates.toLocaleString()}</b><p>prompt-level / domain-stratified</p></article>
      <article class="exact">
        <span>INDEPENDENT RERUN</span>
        <b>{corpusExact && matched16Exact && matched24Exact ? "3 / 3 EXACT" : "MISMATCH"}</b>
        <p>自然长度与两个等长 cohort</p>
      </article>
    </div>

    <div class="corpus-controls">
      <div>
        <span>COHORT</span>
        <div class="corpus-cohort-switch" role="group" aria-label="选择公开语料长度 cohort">
          <button type="button" data-corpus-cohort="natural" aria-pressed="true">自然 ≤96</button>
          <button type="button" data-corpus-cohort="matched16" aria-pressed="false">同样本 16</button>
          <button type="button" data-corpus-cohort="matched24" aria-pressed="false">同样本 24</button>
        </div>
      </div>
      <div>
        <span>MOE LAYER</span>
        <div class="layer-switch corpus-layer-switch" role="group" aria-label="选择公开语料路由层">
          {[1, 2, 3, 4, 5, 6].map((layer) => (
            <button type="button" data-corpus-layer={layer} class={layer === 1 ? "active" : ""}>L{layer}</button>
          ))}
        </div>
      </div>
      <div>
        <span>AGGREGATION</span>
        <div class="corpus-mode-switch" role="group" aria-label="选择公开语料聚合口径">
          <button type="button" data-corpus-mode="prompt_balanced" aria-pressed="true">每条 prompt 等权</button>
          <button type="button" data-corpus-mode="token_weighted" aria-pressed="false">按 token 加权</button>
        </div>
      </div>
      <p data-corpus-mode-note>
        自然长度 cohort：每条 prompt 先归一再等权；它保留来源长度差异，适合描述实际选中样本。
      </p>
    </div>

    <div class="corpus-domain-table" role="table" aria-label="四域专家负载与 bootstrap 区间">
      <div class="head" role="row">
        <b role="columnheader">DOMAIN / TOKENS</b>
        <b role="columnheader">CV · 95% CI</b>
        <b role="columnheader">EFFECTIVE · 95% CI</b>
        <b role="columnheader">TOP EXPERT · SHARE</b>
      </div>
      <div data-corpus-domain-rows></div>
    </div>

    <div class="corpus-heat-head">
      <div><span>64 EXPERT SHARES</span><b data-corpus-heat-title>layer 1 · 每条 prompt 等权</b></div>
      <p>每一行独立着色；悬停查看 expert ID、份额与 95% 区间。同号 expert 只在当前层内有意义。</p>
    </div>
    <div class="corpus-heat-scroll">
      <div class="corpus-heatmap" data-corpus-heatmap aria-label="四个语料域的 64 专家份额热图"></div>
    </div>

    <div class="corpus-comparison">
      <div>
        <span>PAIRWISE DISTANCE / JENSEN–SHANNON · NATS</span>
        <h5>同层四域分布距离</h5>
        <p>0 表示两条分布相同，理论上界 ln(2)≈0.693；这里展示点估计与 prompt bootstrap 区间。</p>
      </div>
      <div class="corpus-jsd" data-corpus-jsd role="table" aria-label="四域 Jensen-Shannon divergence 矩阵"></div>
    </div>

    <div class="corpus-findings">
      <article><span>CURRENT HIGHEST CV</span><b data-corpus-highest-cv></b><p data-corpus-highest-cv-ci></p></article>
      <article><span>CURRENT LARGEST JSD</span><b data-corpus-largest-jsd></b><p data-corpus-largest-jsd-ci></p></article>
      <article><span>CURRENT COHORT</span><b data-corpus-cohort-title>自然长度 ≤96</b><p data-corpus-cohort-boundary>四域 token 总量不同；不能把差异全归因于内容。</p></article>
    </div>

    <div class="length-sensitivity">
      <div class="length-sensitivity-head">
        <div>
          <span>PAIRED LENGTH SENSITIVITY / SAME SOURCE PROMPTS</span>
          <h5>同一条 prompt：16 → 24 tokens，CV 怎样变化？</h5>
        </div>
        <p>
          short / long 每次 bootstrap 使用同一组 prompt indices；下方 Δ = CV24 − CV16。
          负值表示读入后续 8 tokens 后，64-expert 分布更平。
        </p>
      </div>
      <div class="length-delta-grid" data-length-delta-grid></div>
      <div class="length-pair-summary">
        <article>
          <span>中文新闻 ↔ 代码 / JSD</span>
          <b data-length-jsd></b>
          <p data-length-jsd-ci></p>
        </article>
        <article>
          <span>LARGEST |CV Δ|</span>
          <b data-length-largest></b>
          <p data-length-largest-ci></p>
        </article>
        <article>
          <span>READING</span>
          <b>长度影响存在，但没有抹掉域差异</b>
          <p>六层中文↔代码 JSD 都下降，24-token 下仍保持非零经验距离。</p>
        </article>
      </div>
    </div>

    <div class="evidence-links">
      <a href="https://huggingface.co/datasets/Salesforce/wikitext" rel="noreferrer">WikiText-2 数据卡 ↗</a>
      <a href="https://github.com/CLUEbenchmark/CLUE" rel="noreferrer">CLUE / TNEWS ↗</a>
      <a href="https://github.com/openai/human-eval" rel="noreferrer">OpenAI HumanEval ↗</a>
      <a href="https://github.com/openai/grade-school-math" rel="noreferrer">OpenAI GSM8K ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>DESCRIPTIVE, NOT SEMANTICS</b>
      <p>
        这是三个固定公开 cohort 上的前六个 MoE 层，不是训练分布或线上流量；matched cohort
        只代表各域至少 24 tokens 的子群。
        bootstrap 区间描述本探针换 prompt 的稳定性，不是零差异假设检验；没有多重比较校正，
        也不能把 E29、E48 等参数索引命名成“中文专家”或“代码专家”。
      </p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="template" hidden>
    <div class="panel-lead">
      <div><span>X / OFFICIAL CHAT TEMPLATE</span><h4>同一段内容，只在前面加上「User:」</h4></div>
      <p>
        三种输入使用同一 checkpoint、同一批 128 条 source prompt、同一 padded batch。
        既比较真实整段输入，也只比较字符跨度与 token ID 都完全对齐的 2,874 个内容 token。
      </p>
    </div>

    <div class="template-ledger">
      <article><span>SOURCE PROMPTS</span><b>128</b><p>四域 × 32 · 固定哈希选样</p></article>
      <article><span>PROMPT VARIANTS</span><b>384</b><p>raw · user · generation</p></article>
      <article><span>INPUT TOKENS</span><b>10,612</b><p>三种协议的真实输入总数</p></article>
      <article><span>REAL ROUTES</span><b>382,032</b><p>三种协议 × 前六个 MoE 层</p></article>
      <article><span>CAUSAL PREFIX</span><b>21,852 / 21,852</b><p>追加 Assistant: 后 ordered top-6 exact</p></article>
      <article class="exact"><span>INDEPENDENT RERUN</span><b>{templateExact ? "BYTE-EXACT" : "MISMATCH"}</b><p>完整 JSON SHA-256 da1f1033…bc1b9</p></article>
    </div>

    <div class="template-protocol" aria-label="DeepSeek V2-Lite 三种输入协议">
      <article>
        <span>RAW</span>
        <div><i>BOS</i><b>相同内容</b></div>
        <p>每条固定 24 input tokens：1 BOS + 23 content。</p>
      </article>
      <i aria-hidden="true">→</i>
      <article>
        <span>OFFICIAL USER</span>
        <div><i>BOS</i><em>User:</em><b>相同内容</b><small>↵↵</small></div>
        <p><code>apply_chat_template</code> 的单轮 user 渲染。</p>
      </article>
      <i aria-hidden="true">→</i>
      <article>
        <span>GENERATION PROMPT</span>
        <div><i>共享前缀</i><em>Assistant:</em></div>
        <p>只在末尾追加 suffix；不能反向改变此前 token。</p>
      </article>
    </div>

    <div class="template-controls">
      <div>
        <span>MOE LAYER</span>
        <div class="layer-switch template-layer-switch" role="group" aria-label="选择模板敏感性层">
          {[1, 2, 3, 4, 5, 6].map((layer) => (
            <button type="button" data-template-layer={layer} class={layer === 1 ? "active" : ""}>L{layer}</button>
          ))}
        </div>
      </div>
      <div>
        <span>MEASUREMENT SCOPE</span>
        <div class="template-scope-switch" role="group" aria-label="选择模板统计范围">
          <button type="button" data-template-scope="content_only" aria-pressed="true">精确对齐内容</button>
          <button type="button" data-template-scope="full_input" aria-pressed="false">完整输入</button>
        </div>
      </div>
      <div>
        <span>AGGREGATION</span>
        <div class="template-mode-switch" role="group" aria-label="选择模板聚合口径">
          <button type="button" data-template-mode="prompt_balanced" aria-pressed="true">prompt 等权</button>
          <button type="button" data-template-mode="token_weighted" aria-pressed="false">token 加权</button>
        </div>
      </div>
      <p data-template-note>
        精确对齐内容：三种条件只保留相同相对字符跨度与相同 token ID；wrapper 和边界重切分 token 同时剔除。
      </p>
    </div>

    <div class="template-domain-grid" data-template-domain-grid></div>

    <div class="template-negative-control">
      <article>
        <span>USER → GENERATION / SHARED PREFIX</span>
        <b data-template-prefix-exact></b>
        <p>同一 batch 内逐 token ordered top-6；未来 suffix 不得改写过去。</p>
      </article>
      <article>
        <span>CONTENT-ONLY DELTA</span>
        <b data-template-content-zero></b>
        <p>CV Δ / TV / JSD；对齐内容不包含新追加的 Assistant:。</p>
      </article>
      <article>
        <span>FULL-INPUT TV</span>
        <b data-template-suffix-tv></b>
        <p>整段统计会变化，因为 generation 条件确实加入了新的 suffix token。</p>
      </article>
    </div>

    <div class="template-depth">
      <div>
        <span>DEPTH MAP / Δ CV(USER − RAW)</span>
        <h5>角色前缀没有一个跨层恒定方向</h5>
        <p>每格是一层；绿色表示 USER 更平，红色表示 USER 更集中。切换 scope / aggregation 后重新计算。</p>
      </div>
      <div data-template-depth-map></div>
    </div>

    <div class="evidence-links">
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite/blob/main/tokenizer_config.json" rel="noreferrer">官方 tokenizer_config ↗</a>
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite" rel="noreferrer">官方 V2-Lite 模型卡 ↗</a>
      <a href="https://arxiv.org/abs/2405.04434" rel="noreferrer">DeepSeek-V2 技术报告 ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>PROTOCOL SENSITIVITY, NOT CAPABILITY</b>
      <p>
        RAW→USER 的变化只描述固定 23-content-token 探针中的协议敏感性；不能命名专家，
        不能推出完整 27 层或线上对话流量，也没有生成答案。USER→GENERATION 的共享前缀 exact
        是 causal-mask 实现负对照，不是“Assistant: 没有作用”——新增 suffix 自己仍有路由。
      </p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="history" hidden>
    <div class="panel-lead">
      <div><span>X / MESSAGE-HISTORY FACTORIAL</span><h4>把 system 与 one-shot 拆成四格，而不是只做两组对比</h4></div>
      <p>
        同一批 128 条目标内容，在官方模板中切换两个固定处理。system 每条恒增 16 tokens，
        one-shot 每条恒增 17 tokens；四格同 batch，目标内容精确对齐。
      </p>
    </div>

    <div class="history-ledger">
      <article><span>SOURCE PROMPTS</span><b>128</b><p>与上一模板探针逐项同 cohort</p></article>
      <article><span>2×2 VARIANTS</span><b>512</b><p>S0F0 · S1F0 · S0F1 · S1F1</p></article>
      <article><span>INPUT TOKENS</span><b>24,040</b><p>四格完整协议输入</p></article>
      <article><span>REAL ROUTES</span><b>865,440</b><p>四格 × 前六个 MoE 层</p></article>
      <article><span>ALIGNED TARGET</span><b>2,874 × 4</b><p>相同字符跨度与 token ID</p></article>
      <article class="exact"><span>INDEPENDENT RERUN</span><b>{historyExact ? "BYTE-EXACT" : "MISMATCH"}</b><p>完整 JSON SHA-256 5765fbf8…c1fb</p></article>
    </div>

    <div class="history-factorial" aria-label="System 与 one-shot 的二乘二实验矩阵">
      <div class="history-axis">
        <span>ONE-SHOT FACTOR →</span>
        <b>F0 · 无示例</b>
        <b>F1 · 固定 user / assistant 示例</b>
      </div>
      <div class="history-row">
        <strong>S0<br /><small>无 SYSTEM</small></strong>
        <article>
          <span>S0F0 / BASE</span>
          <div><i>USER TARGET</i><em>Assistant:</em></div>
          <p>每条约 30 tokens；只含目标单轮。</p>
        </article>
        <article>
          <span>S0F1 / ONE-SHOT</span>
          <div><b>USER DEMO</b><b>ASSISTANT · EOS</b><i>USER TARGET</i><em>Assistant:</em></div>
          <p>相对 base 每条固定 +17 tokens。</p>
        </article>
      </div>
      <div class="history-row">
        <strong>S1<br /><small>固定 SYSTEM</small></strong>
        <article>
          <span>S1F0 / SYSTEM</span>
          <div><u>SYSTEM</u><i>USER TARGET</i><em>Assistant:</em></div>
          <p>相对 base 每条固定 +16 tokens。</p>
        </article>
        <article>
          <span>S1F1 / COMBINED</span>
          <div><u>SYSTEM</u><b>USER DEMO</b><b>ASSISTANT · EOS</b><i>USER TARGET</i><em>Assistant:</em></div>
          <p>两种增量严格相加：+16 +17 tokens。</p>
        </article>
      </div>
    </div>

    <div class="history-controls">
      <div>
        <span>MOE LAYER</span>
        <div class="layer-switch history-layer-switch" role="group" aria-label="选择消息历史层">
          {[1, 2, 3, 4, 5, 6].map((layer) => (
            <button type="button" data-history-layer={layer} class={layer === 1 ? "active" : ""}>L{layer}</button>
          ))}
        </div>
      </div>
      <div>
        <span>MEASUREMENT SCOPE</span>
        <div class="history-scope-switch" role="group" aria-label="选择消息历史统计范围">
          <button type="button" data-history-scope="target_content" aria-pressed="true">目标内容</button>
          <button type="button" data-history-scope="full_input" aria-pressed="false">完整输入</button>
        </div>
      </div>
      <div>
        <span>AGGREGATION</span>
        <div class="history-mode-switch" role="group" aria-label="选择消息历史聚合口径">
          <button type="button" data-history-mode="prompt_balanced" aria-pressed="true">prompt 等权</button>
          <button type="button" data-history-mode="token_weighted" aria-pressed="false">token 加权</button>
        </div>
      </div>
      <div>
        <span>DEPTH MAP EFFECT</span>
        <div class="history-effect-switch" role="group" aria-label="选择消息历史因子效应">
          <button type="button" data-history-effect="system_main" aria-pressed="false">System</button>
          <button type="button" data-history-effect="fewshot_main" aria-pressed="false">One-shot</button>
          <button type="button" data-history-effect="interaction" aria-pressed="true">Interaction</button>
        </div>
      </div>
      <p data-history-note>
        目标内容：四格只保留相同相对字符跨度与相同 token ID；下方 Δ 均为 CV 的 source-paired 2×2 效应。
      </p>
    </div>

    <div class="history-domain-grid" data-history-domain-grid></div>

    <div class="history-buffer-summary">
      <article><span>SYSTEM EDGE TV</span><b>24 / 24 ↓</b><p>有 one-shot 时，六层四域的 system-edge TV 全部下降。</p></article>
      <article><span>MEAN TARGET TV</span><b>.073 → .019</b><p>system at F0 → system at F1，平均下降约 74%。</p></article>
      <article><span>|Δ CV|</span><b>21 / 24 ↓</b><p>绝对 CV system effect 从均值 .068 降至 .016。</p></article>
      <article><span>BOUNDARY</span><b>HISTORY BUFFER</b><p>不能单独归因给示例语义；距离、EOS、角色与文本共同变化。</p></article>
    </div>

    <div class="history-buffer">
      <div>
        <span>CURRENT LAYER / SYSTEM EDGE</span>
        <h5>同样增加 16 tokens，先经过一轮历史后变化更小</h5>
        <p>每域同时显示目标路由 TV 与逐 token top-6 set exact；左为 F0，右为 F1。</p>
      </div>
      <div data-history-buffer-grid></div>
    </div>

    <div class="history-depth">
      <div>
        <span>DEPTH MAP / Δ CV</span>
        <h5 data-history-depth-title>Interaction：两个处理是否可以简单相加</h5>
        <p>绿色为 CV 下降，红色为 CV 上升；颜色身份只表示方向，不表示能力好坏。</p>
      </div>
      <div data-history-depth-map></div>
    </div>

    <div class="evidence-links">
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite/blob/main/tokenizer_config.json" rel="noreferrer">官方 tokenizer_config ↗</a>
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite" rel="noreferrer">官方 V2-Lite 模型卡 ↗</a>
      <a href="https://arxiv.org/abs/2405.04434" rel="noreferrer">DeepSeek-V2 技术报告 ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>HISTORY COMPOSITION, NOT ROLE SEMANTICS</b>
      <p>
        这组 2×2 同时改变固定文本、角色边界、EOS、距离与长度；“24 / 24 TV 下降”是本探针中的
        历史缓冲模式，不证明 one-shot 语义本身稳定了路由，更不证明答案质量提升。
      </p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="distance" hidden>
    <div class="panel-lead">
      <div><span>X / EQUAL-LENGTH HISTORY CONTROL</span><h4>把“历史缓冲”再拆一层：可读示例并不是唯一来源</h4></div>
      <p>
        system 开 / 关分别搭配无历史、17-token 重复词元 filler 与 17-token 原 one-shot。
        filler / demo 的角色、EOS、目标位置与 batch 形状完全相同，只替换历史文本。
      </p>
    </div>

    <div class="history-ledger distance-ledger">
      <article><span>SOURCE PROMPTS</span><b>128</b><p>四个公开域各 32 条；同一 cohort</p></article>
      <article><span>2×3 VARIANTS</span><b>768</b><p>system 0/1 × none/filler/demo</p></article>
      <article><span>INPUT TOKENS</span><b>38,236</b><p>六格完整官方模板输入</p></article>
      <article><span>REAL ROUTES</span><b>1,376,496</b><p>六格 × 前六个 MoE 层</p></article>
      <article><span>ALIGNED TARGET</span><b>2,874 × 6</b><p>相同字符跨度与 token ID</p></article>
      <article class="exact"><span>INDEPENDENT RERUN</span><b>{distanceExact ? "BYTE-EXACT" : "MISMATCH"}</b><p>完整 JSON SHA-256 423a095d…e648e</p></article>
    </div>

    <div class="distance-protocol" aria-label="System 与三种消息历史的二乘三控制矩阵">
      <div class="distance-row head">
        <span>HISTORY →</span>
        <b>NONE · 无历史</b>
        <b>FILLER · 重复词元</b>
        <b>DEMO · 原 one-shot</b>
      </div>
      <div class="distance-row">
        <strong>S0<br /><small>无 SYSTEM</small></strong>
        <article><span>S0 / NONE</span><div><i>USER TARGET</i><em>Assistant:</em></div><p>目标前没有已完成 turn。</p></article>
        <article><span>S0 / FILLER</span><div><b>USER · x×9</b><b>ASSISTANT · x · EOS</b><i>USER TARGET</i></div><p>相对 none 固定 +17 tokens。</p></article>
        <article><span>S0 / DEMO</span><div><u>USER · Reply with OK</u><u>ASSISTANT · OK · EOS</u><i>USER TARGET</i></div><p>同样固定 +17 tokens。</p></article>
      </div>
      <div class="distance-row">
        <strong>S1<br /><small>固定 SYSTEM</small></strong>
        <article><span>S1 / NONE</span><div><mark>SYSTEM</mark><i>USER TARGET</i><em>Assistant:</em></div><p>system 相对 S0 固定 +16 tokens。</p></article>
        <article><span>S1 / FILLER</span><div><mark>SYSTEM</mark><b>FILLER TURN · EOS</b><i>USER TARGET</i></div><p>与 S1 demo 的目标位置相同。</p></article>
        <article><span>S1 / DEMO</span><div><mark>SYSTEM</mark><u>DEMO TURN · EOS</u><i>USER TARGET</i></div><p>只把 filler 文本替换为原示例。</p></article>
      </div>
    </div>

    <div class="distance-controls">
      <div>
        <span>MOE LAYER</span>
        <div class="layer-switch distance-layer-switch" role="group" aria-label="选择等长历史控制层">
          {[1, 2, 3, 4, 5, 6].map((layer) => (
            <button type="button" data-distance-layer={layer} class={layer === 1 ? "active" : ""}>L{layer}</button>
          ))}
        </div>
      </div>
      <div>
        <span>MEASUREMENT SCOPE</span>
        <div class="distance-scope-switch" role="group" aria-label="选择等长历史统计范围">
          <button type="button" data-distance-scope="target_content" aria-pressed="true">目标内容</button>
          <button type="button" data-distance-scope="full_input" aria-pressed="false">完整输入</button>
        </div>
      </div>
      <div>
        <span>AGGREGATION</span>
        <div class="distance-mode-switch" role="group" aria-label="选择等长历史聚合口径">
          <button type="button" data-distance-mode="prompt_balanced" aria-pressed="true">prompt 等权</button>
          <button type="button" data-distance-mode="token_weighted" aria-pressed="false">token 加权</button>
        </div>
      </div>
      <div>
        <span>DEPTH MAP CONTRAST</span>
        <div class="distance-contrast-switch" role="group" aria-label="选择等长历史阶梯">
          <button type="button" data-distance-contrast="filler_minus_none" aria-pressed="true">Filler − None</button>
          <button type="button" data-distance-contrast="demo_minus_filler" aria-pressed="false">Demo − Filler</button>
        </div>
      </div>
      <p data-distance-note>
        目标内容：六格只保留相同相对字符跨度与相同 token ID；TV 是两条真实 system edge 的分布距离。
      </p>
    </div>

    <div class="distance-domain-grid" data-distance-domain-grid></div>

    <div class="history-buffer-summary distance-summary">
      <article><span>STRUCTURE STEP</span><b>24 / 24 ↓</b><p>none → filler 的 system-edge TV 全部下降，区间也全部低于零。</p></article>
      <article><span>TEXT STEP</span><b>24 / 24 ↓</b><p>filler → demo 再次全部下降，区间同样全部低于零。</p></article>
      <article><span>MEAN TARGET TV</span><b>.074 → .038 → .019</b><p>重复历史复现约一半缓冲；原示例再贡献一个台阶。</p></article>
      <article><span>BOUNDARY</span><b>NOT PURE DISTANCE</b><p>`x` 仍是学习过的 token；没有生成答案，也没有测能力。</p></article>
    </div>

    <div class="distance-depth">
      <div>
        <span>DEPTH MAP / Δ SYSTEM-EDGE TV</span>
        <h5 data-distance-depth-title>Filler − None：等长历史结构的第一个台阶</h5>
        <p>绿色表示 selected history 让 system-edge TV 下降；每格都来自六格共享 source-bootstrap。</p>
      </div>
      <div data-distance-depth-map></div>
    </div>

    <div class="distance-interpretation">
      <article>
        <span>WHAT FILLER CONTROLS</span>
        <b>角色 · EOS · 长度 · 目标位置</b>
        <p>filler 与 demo 在这些协议字段上完全相同，因此可比较固定文本替换。</p>
      </article>
      <article>
        <span>WHAT IT DOES NOT CONTROL</span>
        <b>纯距离 · token identity · repetition</b>
        <p>none → filler 仍同时加入历史与重复 token，不能命名为纯位置因果效应。</p>
      </article>
      <article>
        <span>NUMERICAL CONTRACT</span>
        <b>BF16 batch shape matters</b>
        <p>跨实验 token IDs 虽 exact，深层 gate hash 可因矩阵形状改变；正式结论只做六格组内比较。</p>
      </article>
    </div>

    <div class="evidence-links">
      <a href="https://aclanthology.org/2022.emnlp-main.759/" rel="noreferrer">Min et al. · demonstration format ↗</a>
      <a href="https://arxiv.org/abs/2209.11895" rel="noreferrer">Induction Heads ↗</a>
      <a href="https://aclanthology.org/2024.tacl-1.9/" rel="noreferrer">Lost in the Middle ↗</a>
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite" rel="noreferrer">官方 V2-Lite ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>HISTORY STRUCTURE + TEXT REPLACEMENT, NOT CAPABILITY</b>
      <p>
        filler 已说明“可读正确示例”不是缓冲出现的必要条件，但 `x` 不是无语义空气；
        demo 的额外台阶也不能归因给示例正确性。下一步仍需 EOS、角色、多 filler 与行为指标控制。
      </p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="boundary" hidden>
    <div class="panel-lead">
      <div><span>X / SINGLE-ID BOUNDARY CONTROL</span><h4>只换 assistant 后面的一个 ID：EOS 不是普通占位符</h4></div>
      <p>
        重复词元历史、角色标记、长度、目标绝对位置与 32-row batch 全部不动；
        只把官方 EOS `100001` 分别换成单 token 的 x、句点或换行。
      </p>
    </div>

    <div class="history-ledger boundary-ledger">
      <article><span>SOURCE PROMPTS</span><b>128</b><p>四个公开域各 32 条；同一 cohort</p></article>
      <article><span>2×4 VARIANTS</span><b>1,024</b><p>system 0/1 × 四种边界 ID</p></article>
      <article><span>INPUT TOKENS</span><b>56,784</b><p>八格逐组完全同长度</p></article>
      <article><span>REAL ROUTES</span><b>2,044,224</b><p>八格 × 前六个 MoE 层</p></article>
      <article><span>ALIGNED TARGET</span><b>2,874 × 8</b><p>相同字符跨度、位置与 token ID</p></article>
      <article class="exact"><span>INDEPENDENT RERUN</span><b>{boundaryExact ? "BYTE-EXACT" : "MISMATCH"}</b><p>完整 JSON SHA-256 9bb93834…b9c37</p></article>
    </div>

    <div class="boundary-protocol" aria-label="历史 assistant 边界的单 token ID 控制">
      <div class="boundary-track">
        <span>FIXED PREFIX</span>
        <b>Assistant:</b>
        <i>x</i>
        <mark data-boundary-track-token>EOS</mark>
        <b>User:</b>
        <i>TARGET</i>
        <span>FIXED SUFFIX</span>
      </div>
      <div class="boundary-token-grid">
        <article class="official">
          <span>OFFICIAL</span><b>EOS</b><code>ID 100001</code>
          <p>官方 template 自然产生；唯一的合法序列格。</p>
        </article>
        <article>
          <span>COUNTERFACTUAL A</span><b>x</b><code>ID 87</code>
          <p>普通内容 token；相对官方序列只改一个 ID。</p>
        </article>
        <article>
          <span>COUNTERFACTUAL B</span><b>.</b><code>ID 13</code>
          <p>普通标点 token；长度与后续位置完全不变。</p>
        </article>
        <article>
          <span>COUNTERFACTUAL C</span><b>↵</b><code>ID 185</code>
          <p>普通换行 token；保留紧随其后的 `User:` 标记。</p>
        </article>
      </div>
      <p>
        每个 source 在 S0 / S1 内都通过 4 / 4 同长度、4 / 4 同目标位置；768 / 768
        反事实格相对官方 token 序列恰好只改一个 ID。
      </p>
    </div>

    <div class="boundary-controls">
      <div>
        <span>MOE LAYER</span>
        <div class="layer-switch boundary-layer-switch" role="group" aria-label="选择边界 token 控制层">
          {[1, 2, 3, 4, 5, 6].map((layer) => (
            <button type="button" data-boundary-layer={layer} class={layer === 1 ? "active" : ""}>L{layer}</button>
          ))}
        </div>
      </div>
      <div>
        <span>MEASUREMENT SCOPE</span>
        <div class="boundary-scope-switch" role="group" aria-label="选择边界 token 统计范围">
          <button type="button" data-boundary-scope="target_content" aria-pressed="true">目标内容</button>
          <button type="button" data-boundary-scope="full_input" aria-pressed="false">完整输入</button>
        </div>
      </div>
      <div>
        <span>AGGREGATION</span>
        <div class="boundary-mode-switch" role="group" aria-label="选择边界 token 聚合口径">
          <button type="button" data-boundary-mode="prompt_balanced" aria-pressed="true">prompt 等权</button>
          <button type="button" data-boundary-mode="token_weighted" aria-pressed="false">token 加权</button>
        </div>
      </div>
      <div>
        <span>REPLACEMENT − EOS</span>
        <div class="boundary-contrast-switch" role="group" aria-label="选择 EOS 的单 token 替换">
          <button type="button" data-boundary-contrast="x_minus_eos" aria-pressed="true">x − EOS</button>
          <button type="button" data-boundary-contrast="period_minus_eos" aria-pressed="false">. − EOS</button>
          <button type="button" data-boundary-contrast="newline_minus_eos" aria-pressed="false">↵ − EOS</button>
        </div>
      </div>
      <p data-boundary-note>
        目标内容：八格只比较完全相同的后续内容 token；正 ΔTV 表示替换 EOS 后 system edge 更大，不表示能力更差。
      </p>
    </div>

    <div class="boundary-domain-grid" data-boundary-domain-grid></div>

    <div class="history-buffer-summary boundary-summary">
      <article><span>X CONTROL</span><b>24 / 24 ↑</b><p>system-edge TV 全部高于 EOS；23 / 24 配对区间完全高于零。</p></article>
      <article><span>PERIOD CONTROL</span><b>24 / 24 ↑</b><p>点估计全部高于 EOS；同样 23 / 24 区间完全高于零。</p></article>
      <article><span>NEWLINE CONTROL</span><b>23 / 24 ↑</b><p>16 / 24 区间完全高于零；比另两个对照更依赖层与域。</p></article>
      <article><span>MEAN TARGET TV</span><b>.037 → .054 / .055 / .049</b><p>EOS / x / 句点 / 换行；不是准确率或优劣排名。</p></article>
    </div>

    <div class="boundary-depth">
      <div>
        <span>DEPTH MAP / REPLACEMENT − EOS</span>
        <h5 data-boundary-depth-title>x − EOS：只替换历史边界的一个 input ID</h5>
        <p>红色为替换后 system-edge TV 更大，绿色为更小；每格使用八格共享 source-bootstrap。</p>
      </div>
      <div data-boundary-depth-map></div>
    </div>

    <div class="boundary-interpretation">
      <article>
        <span>WHAT IS CAUSAL</span>
        <b>一个历史 input ID</b>
        <p>在固定模型、目标、位置、mask 与 batch 内，EOS→control 的路由差异来自这一个输入干预。</p>
      </article>
      <article>
        <span>WHAT REMAINS</span>
        <b>`User:` 边界仍在</b>
        <p>实验没有删除全部回合结构，只识别 EOS token identity；三个反事实也不是合法官方 chat。</p>
      </article>
      <article>
        <span>CHECKPOINT BOUNDARY</span>
        <b>BASE ≠ CHAT / SFT</b>
        <p>不能把较小 TV 命名为“理解回合结束”；仍需 V2-Lite-Chat 与行为生成对照。</p>
      </article>
    </div>

    <div class="evidence-links">
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite/blob/604d5664dddd88a0433dbae533b7fe9472482de0/tokenizer_config.json" rel="noreferrer">固定官方 tokenizer_config ↗</a>
      <a href="https://huggingface.co/docs/transformers/en/chat_templating" rel="noreferrer">HF Chat Templates ↗</a>
      <a href="https://arxiv.org/abs/2305.11206" rel="noreferrer">LIMA · EOT supervision ↗</a>
      <a href="https://aclanthology.org/2020.blackboxnlp-1.26/" rel="noreferrer">EOS Decision ↗</a>
      <a href="https://arxiv.org/abs/2309.16042" rel="noreferrer">Activation Patching Limits ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>SINGLE-ID ROUTING CAUSALITY, NOT TURN-SEMANTIC OR CAPABILITY PROOF</b>
      <p>
        EOS 条件下后续目标路由对 system 开关更稳定，但本实验既未生成答案，也未覆盖 Chat 权重；
        更小 TV 不等于更正确。下一步要拆 `User:` 角色标记、special-token 家族与行为指标。
      </p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="role" hidden>
    <div class="panel-lead">
      <div><span>X / ROLE-HEAD SINGLE-ID CONTROL</span><h4>只换 `User:` 的第一个 ID：直接作用不等于统一调制 system</h4></div>
      <p>
        官方 EOS、冒号、长度、目标位置、mask 与 32-row batch 全部不动；
        目标后的 generation head 另做 causal suffix 负对照。
      </p>
    </div>

    <div class="history-ledger role-ledger">
      <article><span>SOURCE PROMPTS</span><b>128</b><p>四个公开域各 32 条；沿用同一 cohort</p></article>
      <article><span>2×4 VARIANTS</span><b>1,024</b><p>system 0/1 × 四种词头水平</p></article>
      <article><span>INPUT TOKENS</span><b>56,784</b><p>八格逐组完全同长度</p></article>
      <article><span>REAL ROUTES</span><b>2,044,224</b><p>八格 × 前六个 MoE 层</p></article>
      <article><span>CAUSAL SUFFIX</span><b>34,488 exact</b><p>目标 layer×token×system ordered top-6</p></article>
      <article class="exact"><span>INDEPENDENT RERUN</span><b>{roleExact ? "BYTE-EXACT" : "MISMATCH"}</b><p>完整 JSON SHA-256 9dc0e37f…b8caf</p></article>
    </div>

    <div class="role-protocol" aria-label="目标角色词头的单 token ID 控制">
      <div class="role-track">
        <span>FIXED HISTORY + EOS</span>
        <b data-role-target-head>User</b><i>:</i><mark>TARGET</mark>
        <span>CAUSAL SUFFIX</span>
        <b data-role-suffix-head>Assistant</b><i>:</i>
      </div>
      <div class="role-level-grid">
        <article class="official">
          <span>OFFICIAL</span><b>User … Assistant</b><code>5726 / 77398</code>
          <p>目标入口与 generation prompt 都保持官方词头。</p>
        </article>
        <article>
          <span>PRE-TARGET A</span><b>User → Assistant</b><code>5726 → 77398</code>
          <p>只改目标前词头；冒号与官方 EOS 不动。</p>
        </article>
        <article>
          <span>PRE-TARGET B</span><b>User → x</b><code>5726 → 87</code>
          <p>普通内容 token 对照；仍只改一个 ID。</p>
        </article>
        <article class="negative">
          <span>POST-TARGET CONTROL</span><b>Assistant → User</b><code>77398 → 5726</code>
          <p>发生在目标之后；目标路由必须 causal-exact。</p>
        </article>
      </div>
      <p>
        256 / 256 组同长度同目标位置；768 / 768 个反事实相对官方序列恰好一 ID。
        三个反事实都不是官方合法 chat。
      </p>
    </div>

    <div class="role-controls">
      <div>
        <span>MOE LAYER</span>
        <div class="layer-switch role-layer-switch" role="group" aria-label="选择角色词头控制层">
          {[1, 2, 3, 4, 5, 6].map((layer) => (
            <button type="button" data-role-layer={layer} class={layer === 1 ? "active" : ""}>L{layer}</button>
          ))}
        </div>
      </div>
      <div>
        <span>MEASUREMENT SCOPE</span>
        <div class="role-scope-switch" role="group" aria-label="选择角色词头统计范围">
          <button type="button" data-role-scope="target_content" aria-pressed="true">目标内容</button>
          <button type="button" data-role-scope="full_input" aria-pressed="false">完整输入</button>
        </div>
      </div>
      <div>
        <span>AGGREGATION</span>
        <div class="role-mode-switch" role="group" aria-label="选择角色词头聚合口径">
          <button type="button" data-role-mode="prompt_balanced" aria-pressed="true">prompt 等权</button>
          <button type="button" data-role-mode="token_weighted" aria-pressed="false">token 加权</button>
        </div>
      </div>
      <div>
        <span>CONTROL − OFFICIAL</span>
        <div class="role-contrast-switch" role="group" aria-label="选择角色词头对照">
          <button type="button" data-role-contrast="target_assistant_minus_official" aria-pressed="true">U→A</button>
          <button type="button" data-role-contrast="target_x_minus_official" aria-pressed="false">U→x</button>
          <button type="button" data-role-contrast="suffix_user_minus_official" aria-pressed="false">suffix A→U</button>
        </div>
      </div>
      <p data-role-note>
        目标内容：正 ΔTV 表示替换词头后 system edge 更大；direct TV 单独回答“这个 ID 本身改了多少路由”。
      </p>
    </div>

    <div class="role-domain-grid" data-role-domain-grid></div>

    <div class="history-buffer-summary role-summary">
      <article><span>DIRECT U→A</span><b>.0222 / .0218</b><p>S0 / S1 mean target TV；前置词头有直接作用。</p></article>
      <article><span>DIRECT U→x</span><b>.0263 / .0253</b><p>S0 / S1；普通 token 对照同样改变后续路由。</p></article>
      <article><span>SUFFIX CONTROL</span><b>34,488 / 34,488</b><p>目标 ordered top-6 exact；direct TV / JSD 全为零。</p></article>
      <article><span>SYSTEM MODULATION</span><b>12↑12↓ / 13↑11↓</b><p>U→A / U→x 的 24 格方向混合，均值近零。</p></article>
    </div>

    <div class="role-depth">
      <div>
        <span>DEPTH MAP / SYSTEM-EDGE CONTRAST</span>
        <h5 data-role-depth-title>User→Assistant：system-edge TV 相对官方的变化</h5>
        <p>每格用八条件共享 source-bootstrap；红色为更大、绿色为更小，跨零不冒充稳定方向。</p>
      </div>
      <div data-role-depth-map></div>
    </div>

    <div class="role-causal-ledger">
      <article>
        <span>BEFORE TARGET</span><b>direct TV ≈ .02–.03</b>
        <p>单个角色词头 ID 足以条件化后续 token 的专家集合。</p>
      </article>
      <article class="exact">
        <span>AFTER TARGET</span><b>ordered top-6 = 100%</b>
        <p>六层 × 两个 system 水平全部 causal-exact；对齐与 mask 闸门通过。</p>
      </article>
      <article>
        <span>NOT IDENTIFIED</span><b>完整角色语义</b>
        <p>冒号仍在，且 base ≠ Chat/SFT；没有生成、准确率或安全行为。</p>
      </article>
    </div>

    <div class="role-batch-audit">
      <div>
        <span>BF16 BATCH-CONTENT AUDIT</span>
        <h5>同样 32 rows、同样 official token IDs，companion rows 改了，深层 route 仍会分化</h5>
        <p>当前 official 与上一轮 EOS 条件的 256 / 256 token-ID hashes 相同；下表是跨实验 official target route-hash exact。</p>
      </div>
      <div>
        {roleCompact.crossBatch.map((row: any) => (
          <span class={row.layer === 1 ? "exact" : ""}>
            <b>L{row.layer}</b>
            <i>{row.targetRouteHashExact} / {row.compared}</i>
          </span>
        ))}
      </div>
    </div>

    <div class="evidence-links">
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite/blob/604d5664dddd88a0433dbae533b7fe9472482de0/tokenizer_config.json" rel="noreferrer">固定官方 tokenizer_config ↗</a>
      <a href="https://huggingface.co/docs/transformers/en/chat_templating" rel="noreferrer">HF Chat Templates ↗</a>
      <a href="https://arxiv.org/abs/2305.11206" rel="noreferrer">LIMA · EOT ↗</a>
      <a href="https://proceedings.iclr.cc/paper_files/paper/2024/file/6bcbb4a501dbad0eba1b660c1a55318c-Paper-Conference.pdf" rel="noreferrer">URIAL · base formatting ↗</a>
      <a href="https://aclanthology.org/2024.tacl-1.52/" rel="noreferrer">Multi-prompt sensitivity ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>ONE ROLE-HEAD ID, NOT COMPLETE ROLE SEMANTICS</b>
      <p>
        前置词头会改变后续路由，但没有统一调制 system；后置负对照严格为零。
        special-token family 与完整两-token 角色块已在后续页签闭环；下一步转向 Chat 权重与行为指标。
      </p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="special" hidden>
    <div class="panel-lead">
      <div><span>X / COMPLETE SPECIAL INVENTORY</span><h4>EOS 与 BOS 都测了：具体身份比“是否 special”更诚实</h4></div>
      <p>
        固定 tokenizer 只有两个 special IDs；本轮完整枚举 EOS/BOS，再放入 `x` 与句点两个普通
        单-ID 对照。四个水平同长度、同目标位置、同一个 32-row BF16 batch。
      </p>
    </div>

    <div class="history-ledger special-ledger">
      <article><span>SOURCE PROMPTS</span><b>128</b><p>四个公开域各 32 条；同一固定 cohort</p></article>
      <article><span>2×4 VARIANTS</span><b>1,024</b><p>system 0/1 × 四个边界 ID</p></article>
      <article><span>SPECIAL INVENTORY</span><b>2 / 2</b><p>BOS 与 EOS 全枚举；PAD 与 EOS 同 ID</p></article>
      <article><span>REAL ROUTES</span><b>2,044,224</b><p>56,784 tokens × 前六个 MoE 层</p></article>
      <article><span>EDIT CONTRACT</span><b>768 / 768</b><p>三类反事实都恰好修改一个 ID</p></article>
      <article class="exact"><span>INDEPENDENT RERUN</span><b>{specialExact ? "BYTE-EXACT" : "MISMATCH"}</b><p>完整 JSON SHA-256 c372c1b0…4af5bf</p></article>
    </div>

    <div class="special-inventory">
      <div>
        <span>PINNED TOKENIZER INVENTORY</span>
        <h5>词表约十万，不代表有十万个 special token</h5>
        <p>
          `all_special_ids = [100000, 100001]`；PAD 复用 EOS `100001`。
          所以 BOS/EOS 是完整 special 库，但 `x`/句点只是普通库中的两个选定对照。
        </p>
      </div>
      <div class="special-token-grid">
        <article class="official"><span>OFFICIAL / SPECIAL</span><b>EOS</b><code>100001</code><p>官方 assistant 历史边界；同时承担 PAD。</p></article>
        <article class="special"><span>COUNTERFACTUAL / SPECIAL</span><b>BOS</b><code>100000</code><p>完整 special inventory 中的另一个独立 ID。</p></article>
        <article><span>ORDINARY CONTROL A</span><b>x</b><code>87</code><p>一个普通内容 token；不是普通词元总体样本。</p></article>
        <article><span>ORDINARY CONTROL B</span><b>.</b><code>13</code><p>一个普通标点 token；不代表全部 delimiter。</p></article>
      </div>
    </div>

    <div class="special-controls">
      <div>
        <span>MOE LAYER</span>
        <div class="layer-switch special-layer-switch" role="group" aria-label="选择特殊词元控制层">
          {[1, 2, 3, 4, 5, 6].map((layer) => (
            <button type="button" data-special-layer={layer} class={layer === 1 ? "active" : ""}>L{layer}</button>
          ))}
        </div>
      </div>
      <div>
        <span>MEASUREMENT SCOPE</span>
        <div class="special-scope-switch" role="group" aria-label="选择特殊词元统计范围">
          <button type="button" data-special-scope="target_content" aria-pressed="true">目标内容</button>
          <button type="button" data-special-scope="full_input" aria-pressed="false">完整输入</button>
        </div>
      </div>
      <div>
        <span>AGGREGATION</span>
        <div class="special-mode-switch" role="group" aria-label="选择特殊词元聚合口径">
          <button type="button" data-special-mode="prompt_balanced" aria-pressed="true">prompt 等权</button>
          <button type="button" data-special-mode="token_weighted" aria-pressed="false">token 加权</button>
        </div>
      </div>
      <div>
        <span>SYSTEM-EDGE CONTRAST</span>
        <div class="special-contrast-switch" role="group" aria-label="选择特殊词元对照">
          <button type="button" data-special-contrast="bos_minus_eos" aria-pressed="true">BOS−EOS</button>
          <button type="button" data-special-contrast="x_minus_eos" aria-pressed="false">x−EOS</button>
          <button type="button" data-special-contrast="period_minus_eos" aria-pressed="false">.−EOS</button>
          <button type="button" data-special-contrast="family" aria-pressed="false">2 vs 2</button>
        </div>
      </div>
      <p data-special-note>
        目标内容：正 ΔTV 表示替换边界后 system edge 更大；2-vs-2 只描述这四个 ID。
      </p>
    </div>

    <div class="special-domain-grid" data-special-domain-grid></div>

    <div class="history-buffer-summary special-summary">
      <article><span>EOS SYSTEM EDGE</span><b>.037518</b><p>24 个 layer×domain 的目标内容均值。</p></article>
      <article><span>BOS − EOS</span><b>+.010500</b><p>22↑ / 2↓；19 个 paired CI 全正。</p></article>
      <article><span>x / . − EOS</span><b>24↑ / 24↑</b><p>均值 +.016457 / +.017771。</p></article>
      <article><span>ORDINARY − SPECIAL</span><b>+.011864</b><p>四 ID 描述性汇总；不是总体类别推断。</p></article>
    </div>

    <div class="special-depth">
      <div>
        <span>DEPTH MAP / SYSTEM-EDGE CONTRAST</span>
        <h5 data-special-depth-title>BOS − EOS：同为 special，路由模式仍不同</h5>
        <p>红色为更大、绿色为更小；每格保留 source-paired 95% bootstrap 区间。</p>
      </div>
      <div data-special-depth-map></div>
    </div>

    <div class="special-scope-ledger">
      <article><span>TARGET CONTENT</span><b>因果主口径</b><p>只看编辑位置之后精确对齐的 23 个目标 tokens。</p></article>
      <article><span>FULL INPUT</span><b>BOS−EOS = −.001735</b><p>包含被编辑 token 自身，方向可与目标内容不同。</p></article>
      <article><span>BEHAVIOR</span><b>NOT MEASURED</b><p>没有生成、正确率、回合理解或安全性指标。</p></article>
    </div>

    <div class="role-batch-audit special-batch-audit">
      <div>
        <span>BF16 BATCH-CONTENT AUDIT</span>
        <h5>token 合同 768 / 768 exact；companion rows 改变后，深层 gate 可分化</h5>
        <p>下表合计 EOS / x / 句点三个共享水平，显示跨上一轮实验的 target route-hash exact。</p>
      </div>
      <div>
        {specialCrossBatch.map((row: any) => (
          <span class={row.layer === 1 ? "exact" : ""}>
            <b>L{row.layer}</b><i>{row.targetRouteHashExact} / {row.compared}</i>
          </span>
        ))}
      </div>
    </div>

    <div class="evidence-links">
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite/blob/604d5664dddd88a0433dbae533b7fe9472482de0/tokenizer_config.json" rel="noreferrer">固定 tokenizer inventory ↗</a>
      <a href="https://aclanthology.org/2024.emnlp-main.295/" rel="noreferrer">Lexical Sensitivity ↗</a>
      <a href="https://aclanthology.org/2024.naacl-long.325/" rel="noreferrer">Prompt Sensitivity ↗</a>
      <a href="https://aclanthology.org/2026.findings-eacl.61.pdf" rel="noreferrer">PROMPTPRISM taxonomy ↗</a>
      <a href="https://proceedings.iclr.cc/paper_files/paper/2024/file/6bcbb4a501dbad0eba1b660c1a55318c-Paper-Conference.pdf" rel="noreferrer">URIAL ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>COMPLETE SPECIAL INVENTORY, INCOMPLETE ORDINARY-TOKEN POPULATION</b>
      <p>
        可以说 BOS 不复现 EOS，也可以描述这四个 ID 的 2-vs-2 差异；
        不能说普通 token 普遍比 special token 更强，更不能把 route TV 改写成行为质量。
      </p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="role-block" hidden>
    <div class="panel-lead">
      <div><span>X / FULL ROLE-BLOCK FACTORIAL</span><h4>`User:` 不是一个 token：把词头与分隔符放进同一个 2×2</h4></div>
      <p>
        `User:` = `[5726,25]`，`Assistant:` = `[77398,25]`。本轮独立操纵
        head 与 delimiter，官方 EOS、目标、长度、位置、mask 和 generation suffix 全部固定。
      </p>
    </div>

    <div class="history-ledger role-block-ledger">
      <article><span>SOURCE PROMPTS</span><b>128</b><p>四域各 32 条；沿用固定 cohort</p></article>
      <article><span>2×2×2 VARIANTS</span><b>1,024</b><p>system × head × delimiter</p></article>
      <article><span>ROLE BLOCK</span><b>2 TOKENS</b><p>两个位置都是普通 token，不是专用 role ID</p></article>
      <article><span>REAL ROUTES</span><b>2,044,224</b><p>八格 × 六个 MoE 层</p></article>
      <article><span>EDIT CONTRACT</span><b>256 / 512 / 256</b><p>零改动 / 单 ID / 双 ID 全 exact</p></article>
      <article class="exact"><span>INDEPENDENT RERUN</span><b>{roleBlockExact ? "BYTE-EXACT" : "MISMATCH"}</b><p>完整 JSON SHA-256 a703dddb…7e82</p></article>
    </div>

    <div class="role-block-protocol">
      <div>
        <span>PRE-TARGET TWO-TOKEN BLOCK</span>
        <h5>同一个 2×2 同时识别 head、delimiter 与 interaction</h5>
        <p>四个块长度都为 2；`Assistant x` 相对官方 `User:` 恰好改两个 ID。</p>
      </div>
      <div class="role-block-matrix">
        <article class="official"><span>USER × COLON</span><b>User:</b><code>[5726, 25]</code><p>官方目标入口。</p></article>
        <article><span>ASSISTANT × COLON</span><b>Assistant:</b><code>[77398, 25]</code><p>只改 head。</p></article>
        <article><span>USER × X</span><b>User x</b><code>[5726, 87]</code><p>只改 delimiter。</p></article>
        <article><span>ASSISTANT × X</span><b>Assistant x</b><code>[77398, 87]</code><p>同时改两个位置。</p></article>
      </div>
    </div>

    <div class="role-block-controls">
      <div>
        <span>MOE LAYER</span>
        <div class="layer-switch role-block-layer-switch" role="group" aria-label="选择完整角色块控制层">
          {[1, 2, 3, 4, 5, 6].map((layer) => (
            <button type="button" data-role-block-layer={layer} class={layer === 1 ? "active" : ""}>L{layer}</button>
          ))}
        </div>
      </div>
      <div>
        <span>MEASUREMENT SCOPE</span>
        <div class="role-block-scope-switch" role="group" aria-label="选择完整角色块统计范围">
          <button type="button" data-role-block-scope="target_content" aria-pressed="true">目标内容</button>
          <button type="button" data-role-block-scope="full_input" aria-pressed="false">完整输入</button>
        </div>
      </div>
      <div>
        <span>AGGREGATION</span>
        <div class="role-block-mode-switch" role="group" aria-label="选择完整角色块聚合口径">
          <button type="button" data-role-block-mode="prompt_balanced" aria-pressed="true">prompt 等权</button>
          <button type="button" data-role-block-mode="token_weighted" aria-pressed="false">token 加权</button>
        </div>
      </div>
      <div>
        <span>FACTOR EFFECT</span>
        <div class="role-block-effect-switch" role="group" aria-label="选择完整角色块因子效应">
          <button type="button" data-role-block-effect="head_main" aria-pressed="true">head</button>
          <button type="button" data-role-block-effect="delimiter_main" aria-pressed="false">delimiter</button>
          <button type="button" data-role-block-effect="head_by_delimiter" aria-pressed="false">interaction</button>
        </div>
      </div>
      <p data-role-block-note>
        head main：平均跨过两个 delimiter，User→Assistant 对 system-edge TV 的影响。
      </p>
    </div>

    <div class="role-block-domain-grid" data-role-block-domain-grid></div>

    <div class="history-buffer-summary role-block-summary">
      <article><span>FOUR SYSTEM EDGES</span><b>.037304 → .036220</b><p>User: / Assistant: / User x / Assistant x 均值非常接近。</p></article>
      <article><span>HEAD MAIN</span><b>−.000654</b><p>9↑ / 15↓；CI 3 正 / 3 负 / 18 跨零。</p></article>
      <article><span>DELIMITER MAIN</span><b>−.000430</b><p>8↑ / 16↓；23 / 24 个 paired CI 跨零。</p></article>
      <article><span>INTERACTION</span><b>−.000729</b><p>6↑ / 18↓；局部正负单元同时存在。</p></article>
    </div>

    <div class="role-block-direct">
      <article><span>HEAD @ COLON</span><b>.022399 / .021933</b><p>S0 / S1 direct target TV。</p></article>
      <article><span>HEAD @ x</span><b>.018726 / .019973</b><p>多数格低于 head@colon。</p></article>
      <article><span>DELIMITER @ USER</span><b>.026560 / .025679</b><p>冒号→x 也会条件化后续路由。</p></article>
      <article><span>DELIMITER @ ASSISTANT</span><b>.024495 / .024949</b><p>system modulation 仍跨层跨域混合。</p></article>
    </div>

    <div class="role-block-depth">
      <div>
        <span>DEPTH MAP / FACTOR EFFECT</span>
        <h5 data-role-block-depth-title>head main：User→Assistant 是否统一改变 system edge</h5>
        <p>每格是带符号 ΔTV；孤立的稳定单元不会被升级成全局结论。</p>
      </div>
      <div data-role-block-depth-map></div>
    </div>

    <div class="special-scope-ledger role-block-boundaries">
      <article><span>DIRECT EFFECT</span><b>两个位置都非零</b><p>head 与 delimiter 都会条件化后续目标路由。</p></article>
      <article><span>SYSTEM MODULATION</span><b>方向混合</b><p>直接作用不等于统一放大或削弱 system。</p></article>
      <article><span>SEMANTICS</span><b>NOT IDENTIFIED</b><p>`x` 只有一个对照；base ≠ Chat，也没有生成行为。</p></article>
    </div>

    <div class="role-batch-audit role-block-batch-audit">
      <div>
        <span>BF16 BATCH-CONTENT AUDIT</span>
        <h5>共享 `User:` / `Assistant:` token 合同 512 / 512 exact</h5>
        <p>下表合计两个共享水平；L1 路由全 exact，深层随 companion rows 改变而逐步分化。</p>
      </div>
      <div>
        {roleBlockCrossBatch.map((row: any) => (
          <span class={row.layer === 1 ? "exact" : ""}>
            <b>L{row.layer}</b><i>{row.targetRouteHashExact} / {row.compared}</i>
          </span>
        ))}
      </div>
    </div>

    <div class="evidence-links">
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite/blob/604d5664dddd88a0433dbae533b7fe9472482de0/tokenizer_config.json" rel="noreferrer">固定角色块 tokenization ↗</a>
      <a href="https://huggingface.co/docs/transformers/en/chat_templating" rel="noreferrer">HF Chat Templates ↗</a>
      <a href="https://aclanthology.org/2024.emnlp-main.295/" rel="noreferrer">Lexical Sensitivity ↗</a>
      <a href="https://aclanthology.org/2026.findings-eacl.61.pdf" rel="noreferrer">PROMPTPRISM · delimiters ↗</a>
      <a href="https://arxiv.org/abs/2305.11206" rel="noreferrer">LIMA ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>FULL TWO-TOKEN BLOCK, NOT FULL ROLE SEMANTICS</b>
      <p>
        可以识别固定 `User/Assistant × :/x` 的路由效应与 interaction；
        不能把一个 delimiter control 泛化成标点规律，也不能把 base routing 等同于 Chat 行为。
      </p>
    </div>
  </section>

  <section class="artifact-panel" data-artifact-panel="evidence" hidden>
    <div class="panel-lead">
      <div><span>O + X / EVIDENCE SLICE</span><h4>为什么执行到 layer 6 就停，而不是把“部分下载”写成“完整复现”</h4></div>
      <p>第一分片完整包含 layer 0–6；layer 7 跨两个分片。停止线由 checkpoint index 决定，不由页面叙事决定。</p>
    </div>

    <div class="artifact-identity">
      <article>
        <span>OFFICIAL MODEL</span>
        <b>deepseek-ai/DeepSeek-V2-Lite</b>
        <code>604d5664…2482de0</code>
      </article>
      <article>
        <span>CHECKPOINT</span>
        <b>29.261 GiB · 4 shards</b>
        <code>shard 1 · 8.005 GiB · {(shardFraction * 100).toFixed(1)}%</code>
      </article>
      <article>
        <span>EXECUTION</span>
        <b>RTX 5090 · BF16</b>
        <code>torch 2.11.0+cu128</code>
      </article>
    </div>

    <div class="layer-evidence" aria-label="27 层模型的实际执行边界">
      {Array.from({ length: 27 }, (_, layer) => (
        <span class={layer <= 6 ? "executed" : layer === 7 ? "split" : "unloaded"} title={`layer ${layer}`}>
          <b>{layer}</b><small>{layer <= 6 ? "X" : layer === 7 ? "SPLIT" : "U"}</small>
        </span>
      ))}
    </div>
    <div class="layer-legend">
      <span><i class="executed"></i><b>0–6</b> 完整参数 + 连续 forward</span>
      <span><i class="split"></i><b>7</b> 横跨 shard 1 / 2，未执行</span>
      <span><i class="unloaded"></i><b>8–26</b> 未下载 / 未执行</span>
    </div>

    <div class="repro-gate">
      <div>
        <span>INDEPENDENT RERUN</span>
        <strong>{repro.exact_checks} / {repro.total_checks}</strong>
        <b>EXACT</b>
      </div>
      <ul>
        <li>provenance、configuration、tokenization</li>
        <li>initial / final 与逐层 hidden hashes</li>
        <li>7 层 MLA shapes</li>
        <li>6 层 aggregate loads 与全部 token routes</li>
      </ul>
      <p><b>计时不比较：</b>kernel warm-up、频率与系统噪声不属于确定性证据。</p>
    </div>

    <div class="dependency-split">
      <article>
        <span>FAILED CURRENT STACK</span>
        <b>Transformers 5.5</b>
        <p>官方 2024 remote code 引用已移除的 <code>is_torch_fx_available</code>。</p>
      </article>
      <i aria-hidden="true">→</i>
      <article>
        <span>PINNED READ-ONLY STACK</span>
        <b>Transformers 4.41.2</b>
        <p>隔离依赖、本地 package 导入；官方模型源码不打补丁。</p>
      </article>
    </div>

    <div class="checksum-grid">
      <article><span>TRACE SHA-256</span><code>81ff4ab34d20…1f1aef</code></article>
      <article><span>SHARD 1 SHA-256</span><code>0d7e9f39bde4…1f1e8da</code></article>
      <article><span>MODEL CODE SHA-256</span><code>7d8e52210952…b45b9c</code></article>
      <article><span>TOKENIZER SHA-256</span><code>41f3bf64213d…29f669</code></article>
    </div>

    <div class="evidence-links">
      <a href="https://huggingface.co/deepseek-ai/DeepSeek-V2-Lite" rel="noreferrer">官方模型与 model card ↗</a>
      <a href="https://github.com/deepseek-ai/DeepSeek-V2" rel="noreferrer">官方 DeepSeek-V2 仓库 ↗</a>
      <a href="https://arxiv.org/abs/2405.04434" rel="noreferrer">DeepSeek-V2 技术报告 ↗</a>
    </div>

    <div class="artifact-boundary">
      <b>U / STILL OPEN</b>
      <p>完整 27 层生成、受支持硬件上的 FlashMLA 优化 kernel、生产服务、训练负载、FP8/pipeline 与 R1-like 训练 trace 仍未覆盖。</p>
    </div>
  </section>

  <figcaption>
    <span>可复现入口</span>
    <code>experiments/deepseek/v2_lite_trace.py</code> ·
    <code>experiments/deepseek/v2_lite_absorb_probe.py</code> ·
    <code>experiments/deepseek/v2_lite_routing_corpus.py</code> ·
    <code>experiments/deepseek/compare_routing_length_control.py</code> ·
    <code>research/DEEPSEEK_ROUTING_LENGTH_CONTROL_AUDIT.md</code> ·
    <code>experiments/deepseek/v2_lite_routing_template_probe.py</code> ·
    <code>research/DEEPSEEK_ROUTING_TEMPLATE_AUDIT.md</code> ·
    <code>experiments/deepseek/v2_lite_routing_history_factorial_probe.py</code> ·
    <code>research/DEEPSEEK_ROUTING_HISTORY_FACTORIAL_AUDIT.md</code> ·
    <code>experiments/deepseek/v2_lite_routing_history_distance_control.py</code> ·
    <code>research/DEEPSEEK_ROUTING_HISTORY_DISTANCE_CONTROL_AUDIT.md</code> ·
    <code>experiments/deepseek/v2_lite_routing_history_boundary_token_control.py</code> ·
    <code>research/DEEPSEEK_ROUTING_HISTORY_BOUNDARY_TOKEN_AUDIT.md</code> ·
    <code>experiments/deepseek/v2_lite_routing_role_marker_head_control.py</code> ·
    <code>research/DEEPSEEK_ROUTING_ROLE_MARKER_HEAD_AUDIT.md</code> ·
    <code>experiments/deepseek/v2_lite_routing_special_token_family_control.py</code> ·
    <code>research/DEEPSEEK_ROUTING_SPECIAL_TOKEN_FAMILY_AUDIT.md</code> ·
    <code>experiments/deepseek/v2_lite_routing_role_marker_block_factorial.py</code> ·
    <code>research/DEEPSEEK_ROUTING_ROLE_MARKER_BLOCK_AUDIT.md</code>
  </figcaption>

  <script is:inline type="application/json" data-dsv2-trace set:html={compactJson}></script>
  <script is:inline type="application/json" data-dsv2-corpus set:html={corpusCompactJson}></script>
  <script is:inline type="application/json" data-dsv2-template set:html={templateCompactJson}></script>
  <script is:inline type="application/json" data-dsv2-history set:html={historyCompactJson}></script>
  <script is:inline type="application/json" data-dsv2-distance set:html={distanceCompactJson}></script>
  <script is:inline type="application/json" data-dsv2-boundary set:html={boundaryCompactJson}></script>
  <script is:inline type="application/json" data-dsv2-role set:html={roleCompactJson}></script>
  <script is:inline type="application/json" data-dsv2-special set:html={specialCompactJson}></script>
  <script is:inline type="application/json" data-dsv2-role-block set:html={roleBlockCompactJson}></script>
</figure>

<script>
  document.querySelectorAll<HTMLElement>("[data-dsv2-lab]").forEach((root) => {
    const one = <T extends Element>(selector: string) => root.querySelector<T>(selector);
    const all = <T extends Element>(selector: string) => [...root.querySelectorAll<T>(selector)];
    const set = (selector: string, value: string) => {
      const node = one<HTMLElement>(selector);
      if (node) node.textContent = value;
    };
    const payloadNode = one<HTMLScriptElement>("[data-dsv2-trace]");
    const corpusNode = one<HTMLScriptElement>("[data-dsv2-corpus]");
    const templateNode = one<HTMLScriptElement>("[data-dsv2-template]");
    const historyNode = one<HTMLScriptElement>("[data-dsv2-history]");
    const distanceNode = one<HTMLScriptElement>("[data-dsv2-distance]");
    const boundaryNode = one<HTMLScriptElement>("[data-dsv2-boundary]");
    const roleNode = one<HTMLScriptElement>("[data-dsv2-role]");
    const specialNode = one<HTMLScriptElement>("[data-dsv2-special]");
    const roleBlockNode = one<HTMLScriptElement>("[data-dsv2-role-block]");
    if (
      !payloadNode?.textContent
      || !corpusNode?.textContent
      || !templateNode?.textContent
      || !historyNode?.textContent
      || !distanceNode?.textContent
      || !boundaryNode?.textContent
      || !roleNode?.textContent
      || !specialNode?.textContent
      || !roleBlockNode?.textContent
    ) return;
    const data = JSON.parse(payloadNode.textContent);
    const corpusData = JSON.parse(corpusNode.textContent);
    const templateData = JSON.parse(templateNode.textContent);
    const historyData = JSON.parse(historyNode.textContent);
    const distanceData = JSON.parse(distanceNode.textContent);
    const boundaryData = JSON.parse(boundaryNode.textContent);
    const roleData = JSON.parse(roleNode.textContent);
    const specialData = JSON.parse(specialNode.textContent);
    const roleBlockData = JSON.parse(roleBlockNode.textContent);

    const tabs = all<HTMLButtonElement>("[data-artifact-tab]");
    const panels = all<HTMLElement>("[data-artifact-panel]");
    const selectTab = (target: HTMLButtonElement) => {
      tabs.forEach((tab) => {
        const selected = tab === target;
        tab.setAttribute("aria-selected", String(selected));
        tab.tabIndex = selected ? 0 : -1;
      });
      panels.forEach((panel) => panel.hidden = panel.dataset.artifactPanel !== target.dataset.artifactTab);
    };
    tabs.forEach((tab, index) => {
      tab.addEventListener("click", () => selectTab(tab));
      tab.addEventListener("keydown", (event) => {
        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
        event.preventDefault();
        let next = index;
        if (event.key === "ArrowRight") next = (index + 1) % tabs.length;
        if (event.key === "ArrowLeft") next = (index - 1 + tabs.length) % tabs.length;
        if (event.key === "Home") next = 0;
        if (event.key === "End") next = tabs.length - 1;
        tabs[next].focus();
        selectTab(tabs[next]);
      });
    });

    const layerById = (layer: number) => data.layers.find((item: any) => item.layer === layer);
    const promptMeta = (id: string) => data.prompts.find((prompt: any) => prompt.id === id);
    const formatPiece = (piece: string) => piece === "" ? "∅" : piece.replaceAll("\n", "↵").replaceAll(" ", "␠");

    const routeLayer = one<HTMLSelectElement>("[data-route-layer]");
    const routePrompt = one<HTMLSelectElement>("[data-route-prompt]");
    const routeToken = one<HTMLSelectElement>("[data-route-token]");
    const renderRoute = (resetTokens = false) => {
      if (!routeLayer || !routePrompt || !routeToken) return;
      const layer = layerById(Number(routeLayer.value));
      const prompt = layer.prompts.find((item: any) => item.id === routePrompt.value);
      const meta = promptMeta(prompt.id);
      if (resetTokens || !routeToken.options.length || Number(routeToken.value) >= prompt.tokenRoutes.length) {
        routeToken.replaceChildren(...prompt.tokenRoutes.map((token: any) => {
          const option = document.createElement("option");
          option.value = String(token.position);
          option.textContent = `#${token.position} · ${formatPiece(token.decoded_piece)} · id ${token.token_id}`;
          return option;
        }));
      }
      const token = prompt.tokenRoutes[Number(routeToken.value) || 0];
      set("[data-route-prompt-text]", meta.text);
      set("[data-route-position]", `#${token.position}`);
      set("[data-route-piece]", formatPiece(token.decoded_piece));
      set("[data-route-token-id]", String(token.token_id));
      set("[data-route-weight-sum]", token.selected_weight_sum.toFixed(4));
      set("[data-route-heat-title]", `${prompt.label} · layer ${layer.layer}`);
      set("[data-route-count]", prompt.metrics.routes.toLocaleString());
      set("[data-route-used]", `${prompt.metrics.used_experts} / 64`);
      set("[data-route-cv]", prompt.metrics.cv.toFixed(3));
      set("[data-route-effective]", prompt.metrics.effective_experts.toFixed(2));

      const experts = one<HTMLElement>("[data-route-experts]");
      if (experts) {
        experts.replaceChildren(...token.experts_by_weight.map((entry: any, index: number) => {
          const node = document.createElement("article");
          const rank = document.createElement("span");
          const expert = document.createElement("b");
          const weight = document.createElement("small");
          rank.textContent = `#${index + 1}`;
          expert.textContent = `E${entry.expert}`;
          weight.textContent = entry.weight.toFixed(4);
          node.append(rank, expert, weight);
          return node;
        }));
      }

      const heatmap = one<HTMLElement>("[data-route-heatmap]");
      if (heatmap) {
        const max = Math.max(...prompt.load, 1);
        heatmap.replaceChildren(...prompt.load.map((count: number, expert: number) => {
          const cell = document.createElement("span");
          const label = document.createElement("b");
          const value = document.createElement("small");
          cell.style.setProperty("--load", String(count / max));
          cell.classList.toggle("selected", token.experts_by_weight.some((entry: any) => entry.expert === expert));
          cell.title = `layer ${layer.layer} · E${expert} · ${count} routes`;
          label.textContent = `E${expert}`;
          value.textContent = String(count);
          cell.append(label, value);
          return cell;
        }));
      }
    };
    routeLayer?.addEventListener("change", () => renderRoute(true));
    routePrompt?.addEventListener("change", () => renderRoute(true));
    routeToken?.addEventListener("change", () => renderRoute(false));
    renderRoute(true);

    const promptNames = Object.fromEntries(data.prompts.map((prompt: any) => [prompt.id, prompt.label]));
    const renderLoad = (layerNumber: number) => {
      const layer = layerById(layerNumber);
      all<HTMLButtonElement>("[data-load-layer]").forEach((button) => {
        button.classList.toggle("active", Number(button.dataset.loadLayer) === layerNumber);
      });
      set("[data-load-used]", String(layer.metrics.used_experts));
      set("[data-load-zero]", String(layer.metrics.zero_experts));
      set("[data-load-cv]", layer.metrics.cv.toFixed(3));
      set("[data-load-gini]", layer.metrics.gini.toFixed(3));
      set("[data-load-effective]", layer.metrics.effective_experts.toFixed(2));
      one<HTMLElement>("[data-load-cv-bar]")?.style.setProperty("--fraction", String(Math.min(layer.metrics.cv / 1.5, 1)));
      one<HTMLElement>("[data-load-gini-bar]")?.style.setProperty("--fraction", String(layer.metrics.gini));
      one<HTMLElement>("[data-load-effective-bar]")?.style.setProperty("--fraction", String(layer.metrics.effective_experts / 64));

      const rows = one<HTMLElement>("[data-load-rows]");
      if (rows) {
        const aggregate = {
          label: "全部 prompt",
          tokens: data.execution.validTokens,
          metrics: layer.metrics,
          topExperts: layer.topExperts,
        };
        rows.replaceChildren(...[aggregate, ...layer.prompts].map((prompt: any, index: number) => {
          const row = document.createElement("div");
          if (index === 0) row.className = "aggregate";
          [
            prompt.label,
            String(prompt.tokens),
            `${prompt.metrics.used_experts}/64`,
            prompt.metrics.cv.toFixed(3),
            prompt.metrics.gini.toFixed(3),
            `E${prompt.topExperts[0].expert} · ${prompt.topExperts[0].routes}`,
          ].forEach((value) => {
            const cell = document.createElement(index === 0 ? "b" : "span");
            cell.textContent = value;
            row.append(cell);
          });
          return row;
        }));
      }

      const jaccard = one<HTMLElement>("[data-load-jaccard]");
      if (jaccard) {
        jaccard.replaceChildren(...layer.jaccard.map((pair: any) => {
          const row = document.createElement("article");
          const labels = document.createElement("span");
          const track = document.createElement("i");
          const fill = document.createElement("em");
          const value = document.createElement("b");
          labels.textContent = `${promptNames[pair.left]} ↔ ${promptNames[pair.right]}`;
          fill.style.setProperty("--fraction", String(pair.used_expert_jaccard));
          track.append(fill);
          value.textContent = pair.used_expert_jaccard.toFixed(3);
          row.append(labels, track, value);
          return row;
        }));
      }
    };
    all<HTMLButtonElement>("[data-load-layer]").forEach((button) => {
      button.addEventListener("click", () => renderLoad(Number(button.dataset.loadLayer)));
    });
    renderLoad(1);

    const compactBytes = (bytes: number) => {
      if (bytes >= 1024 ** 4) return `${(bytes / 1024 ** 4).toFixed(2)} TiB`;
      if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(2)} GiB`;
      if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(2)} MiB`;
      if (bytes >= 1024) return `${(bytes / 1024).toFixed(2)} KiB`;
      return `${bytes.toLocaleString()} B`;
    };
    const renderCache = () => {
      const batch = Number(one<HTMLInputElement>("[data-cache-batch]")?.value ?? 4);
      const context = Number(one<HTMLSelectElement>("[data-cache-context]")?.value ?? 27);
      const layers = Number(one<HTMLInputElement>("[data-cache-layers]")?.value ?? 7);
      const bytes = Number(one<HTMLSelectElement>("[data-cache-dtype]")?.value ?? 2);
      const latent = batch * context * layers * data.cache.latent_elements_per_token_layer * bytes;
      const eager = batch * context * layers * data.cache.hf_eager_elements_per_token_layer * bytes;
      set("[data-cache-batch-label]", String(batch));
      set("[data-cache-layers-label]", String(layers));
      set("[data-cache-latent-bytes]", compactBytes(latent));
      set("[data-cache-eager-bytes]", compactBytes(eager));
      set("[data-cache-ratio]", `${data.cache.eager_over_latent_ratio.toFixed(2)}×`);
      set("[data-cache-reduction]", `${(data.cache.latent_reduction_vs_eager * 100).toFixed(2)}%`);
    };
    all<HTMLInputElement | HTMLSelectElement>("[data-cache-batch], [data-cache-context], [data-cache-layers], [data-cache-dtype]")
      .forEach((control) => {
        control.addEventListener("input", renderCache);
        control.addEventListener("change", renderCache);
      });
    renderCache();

    const corpusLabels: Record<string, string> = {
      english: "英文百科",
      chinese: "中文新闻",
      code: "Python 代码",
      math: "小学数学",
    };
    const cohortMeta: Record<string, { title: string; boundary: string }> = {
      natural: {
        title: "自然长度 ≤96",
        boundary: "四域 token 总量不同；不能把差异全归因于内容。",
      },
      matched16: {
        title: "同样本 · 16 tokens",
        boundary: "只读取至少 24-token 固定 cohort 的前 16 tokens。",
      },
      matched24: {
        title: "同样本 · 24 tokens",
        boundary: "与 16-token 档源 prompt 完全相同，只增加后续 8 tokens。",
      },
    };
    let corpusCohort = "natural";
    let corpusLayerNumber = 1;
    let corpusMode = "prompt_balanced";
    const formatCi = (ci: number[], digits = 3) => `[${ci[0].toFixed(digits)}, ${ci[1].toFixed(digits)}]`;
    const signed = (value: number, digits = 3) => `${value >= 0 ? "+" : ""}${value.toFixed(digits)}`;
    const formatSignedCi = (ci: number[], digits = 3) =>
      `[${signed(ci[0], digits)}, ${signed(ci[1], digits)}]`;
    const renderCorpus = () => {
      const cohort = corpusData.cohorts[corpusCohort];
      const layer = cohort.layers.find((item: any) => item.layer === corpusLayerNumber);
      const mode = layer.modes[corpusMode];
      all<HTMLButtonElement>("[data-corpus-cohort]").forEach((button) => {
        button.setAttribute("aria-pressed", String(button.dataset.corpusCohort === corpusCohort));
      });
      all<HTMLButtonElement>("[data-corpus-layer]").forEach((button) => {
        button.classList.toggle("active", Number(button.dataset.corpusLayer) === corpusLayerNumber);
      });
      all<HTMLButtonElement>("[data-corpus-mode]").forEach((button) => {
        button.setAttribute("aria-pressed", String(button.dataset.corpusMode === corpusMode));
      });
      set(
        "[data-corpus-mode-note]",
        corpusCohort === "natural"
          ? corpusMode === "prompt_balanced"
            ? "自然长度 cohort：每条 prompt 先归一再等权；它保留来源长度差异，适合描述实际选中样本。"
            : "自然长度 cohort：直接汇总 token 路由；长 prompt 权重更高，适合回答本批 token 实际流向哪里。"
          : corpusMode === "prompt_balanced"
            ? "等长 cohort：每条 prompt 等权；16 / 24 两档使用同一批源样本，可以做 paired delta。"
            : "等长 cohort 中每条 prompt 的 token 数相同，因此 token 加权与 prompt 等权理论上重合。",
      );
      set(
        "[data-corpus-heat-title]",
        `${cohortMeta[corpusCohort].title} · layer ${corpusLayerNumber} · ${corpusMode === "prompt_balanced" ? "prompt 等权" : "token 加权"}`,
      );
      set("[data-corpus-cohort-title]", cohortMeta[corpusCohort].title);
      set("[data-corpus-cohort-boundary]", cohortMeta[corpusCohort].boundary);

      const rows = one<HTMLElement>("[data-corpus-domain-rows]");
      if (rows) {
        rows.replaceChildren(...cohort.domains.map((domain: string) => {
          const result = mode.domains[domain];
          const metrics = result.metrics;
          const top = result.top_experts[0];
          const row = document.createElement("div");
          row.setAttribute("role", "row");

          const identity = document.createElement("span");
          const identityLabel = document.createElement("b");
          const identityMeta = document.createElement("small");
          identityLabel.textContent = corpusLabels[domain];
          identityMeta.textContent = `32 prompts · ${cohort.counts[domain].valid_tokens.toLocaleString()} tokens`;
          identity.append(identityLabel, identityMeta);

          const cv = document.createElement("span");
          const cvPoint = document.createElement("b");
          const cvCi = document.createElement("small");
          cvPoint.textContent = metrics.cv.point.toFixed(3);
          cvCi.textContent = formatCi(metrics.cv.ci95);
          cv.append(cvPoint, cvCi);

          const effective = document.createElement("span");
          const effectivePoint = document.createElement("b");
          const effectiveCi = document.createElement("small");
          effectivePoint.textContent = metrics.effective_experts.point.toFixed(1);
          effectiveCi.textContent = formatCi(metrics.effective_experts.ci95, 1);
          effective.append(effectivePoint, effectiveCi);

          const topExpert = document.createElement("span");
          const topLabel = document.createElement("b");
          const topCi = document.createElement("small");
          topLabel.textContent = `E${top.expert} · ${(top.share * 100).toFixed(2)}%`;
          topCi.textContent = `${(top.ci95[0] * 100).toFixed(2)}–${(top.ci95[1] * 100).toFixed(2)}%`;
          topExpert.append(topLabel, topCi);
          row.append(identity, cv, effective, topExpert);
          return row;
        }));
      }

      const heatmap = one<HTMLElement>("[data-corpus-heatmap]");
      if (heatmap) {
        heatmap.replaceChildren(...cohort.domains.map((domain: string) => {
          const result = mode.domains[domain];
          const max = Math.max(...result.distribution);
          const row = document.createElement("div");
          const label = document.createElement("b");
          label.textContent = corpusLabels[domain];
          row.append(label);
          result.distribution.forEach((share: number, expert: number) => {
            const cell = document.createElement("span");
            const ci = result.expert_share_ci95[expert];
            cell.style.setProperty("--share", String(share / max));
            cell.title = `${corpusLabels[domain]} · L${corpusLayerNumber} · E${expert} · ${(share * 100).toFixed(2)}% · 95% CI ${(ci[0] * 100).toFixed(2)}–${(ci[1] * 100).toFixed(2)}%`;
            cell.setAttribute("aria-label", cell.title);
            row.append(cell);
          });
          return row;
        }));
      }

      const jsd = one<HTMLElement>("[data-corpus-jsd]");
      const pairFor = (left: string, right: string) => mode.pairs.find((pair: any) =>
        (pair.left === left && pair.right === right) || (pair.left === right && pair.right === left)
      );
      if (jsd) {
        const cells: HTMLElement[] = [];
        const corner = document.createElement("b");
        corner.textContent = "DOMAIN";
        cells.push(corner);
        cohort.domains.forEach((domain: string) => {
          const header = document.createElement("b");
          header.textContent = corpusLabels[domain];
          cells.push(header);
        });
        cohort.domains.forEach((left: string) => {
          const header = document.createElement("b");
          header.textContent = corpusLabels[left];
          cells.push(header);
          cohort.domains.forEach((right: string) => {
            const cell = document.createElement("span");
            if (left === right) {
              cell.className = "diagonal";
              cell.textContent = "0";
            } else {
              const result = pairFor(left, right).js_divergence;
              const point = document.createElement("b");
              const ci = document.createElement("small");
              point.textContent = result.point.toFixed(3);
              ci.textContent = formatCi(result.ci95);
              cell.append(point, ci);
            }
            cells.push(cell);
          });
        });
        jsd.replaceChildren(...cells);
      }

      const highest = cohort.domains
        .map((domain: string) => ({ domain, value: mode.domains[domain].metrics.cv }))
        .sort((left: any, right: any) => right.value.point - left.value.point)[0];
      const largest = [...mode.pairs]
        .sort((left: any, right: any) =>
          right.js_divergence.point - left.js_divergence.point
        )[0];
      set(
        "[data-corpus-highest-cv]",
        `${corpusLabels[highest.domain]} · ${highest.value.point.toFixed(3)}`,
      );
      set(
        "[data-corpus-highest-cv-ci]",
        `95% CI ${formatCi(highest.value.ci95)} · L${corpusLayerNumber}`,
      );
      set(
        "[data-corpus-largest-jsd]",
        `${corpusLabels[largest.left]} ↔ ${corpusLabels[largest.right]} · ${largest.js_divergence.point.toFixed(3)}`,
      );
      set(
        "[data-corpus-largest-jsd-ci]",
        `95% CI ${formatCi(largest.js_divergence.ci95)} · nats`,
      );

      const comparisonLayer = corpusData.lengthSensitivity.layers
        .find((item: any) => item.layer === corpusLayerNumber);
      const comparison = comparisonLayer.modes[corpusMode];
      const deltaGrid = one<HTMLElement>("[data-length-delta-grid]");
      if (deltaGrid) {
        deltaGrid.replaceChildren(...cohort.domains.map((domain: string) => {
          const result = comparison.domains[domain];
          const cv = result.metrics.cv;
          const card = document.createElement("article");
          const label = document.createElement("span");
          const values = document.createElement("b");
          const delta = document.createElement("strong");
          const detail = document.createElement("p");
          label.textContent = corpusLabels[domain];
          values.textContent = `${cv.short.toFixed(3)} → ${cv.long.toFixed(3)}`;
          delta.textContent = `Δ ${signed(cv.delta_long_minus_short)}`;
          delta.className = cv.delta_long_minus_short <= 0 ? "down" : "up";
          detail.textContent = `paired 95% ${formatSignedCi(cv.delta_ci95)} · TV ${result.total_variation.point.toFixed(3)}`;
          card.append(label, values, delta, detail);
          return card;
        }));
      }
      const chineseCode = comparison.pairs.find((pair: any) =>
        pair.left === "chinese" && pair.right === "code"
      ).js_divergence;
      set(
        "[data-length-jsd]",
        `${chineseCode.short.toFixed(3)} → ${chineseCode.long.toFixed(3)} · Δ ${signed(chineseCode.delta_long_minus_short)}`,
      );
      set(
        "[data-length-jsd-ci]",
        `paired 95% ${formatSignedCi(chineseCode.delta_ci95)} · L${corpusLayerNumber}`,
      );
      const largestDelta = cohort.domains
        .map((domain: string) => ({
          domain,
          value: comparison.domains[domain].metrics.cv,
        }))
        .sort((left: any, right: any) =>
          Math.abs(right.value.delta_long_minus_short) - Math.abs(left.value.delta_long_minus_short)
        )[0];
      set(
        "[data-length-largest]",
        `${corpusLabels[largestDelta.domain]} · Δ ${signed(largestDelta.value.delta_long_minus_short)}`,
      );
      set(
        "[data-length-largest-ci]",
        `paired 95% ${formatSignedCi(largestDelta.value.delta_ci95)} · CV24 − CV16`,
      );
    };
    all<HTMLButtonElement>("[data-corpus-cohort]").forEach((button) => {
      button.addEventListener("click", () => {
        corpusCohort = button.dataset.corpusCohort ?? "natural";
        renderCorpus();
      });
    });
    all<HTMLButtonElement>("[data-corpus-layer]").forEach((button) => {
      button.addEventListener("click", () => {
        corpusLayerNumber = Number(button.dataset.corpusLayer);
        renderCorpus();
      });
    });
    all<HTMLButtonElement>("[data-corpus-mode]").forEach((button) => {
      button.addEventListener("click", () => {
        corpusMode = button.dataset.corpusMode ?? "prompt_balanced";
        renderCorpus();
      });
    });
    renderCorpus();

    let templateLayerNumber = 1;
    let templateScope = "content_only";
    let templateMode = "prompt_balanced";
    const templateResult = (layerNumber: number, domain: string) => {
      const layer = templateData.layers.find((item: any) => item.layer === layerNumber);
      return {
        layer,
        comparison: layer.scopes[templateScope].modes[templateMode].rawToUser[domain],
        suffix: layer.scopes.full_input.modes[templateMode].userToGeneration[domain],
        contentSuffix: layer.scopes.content_only.modes[templateMode]
          .userToGeneration[domain],
        alignment: layer.alignment[domain],
      };
    };
    const deltaClass = (ci: number[]) =>
      ci[1] < 0 ? "down" : ci[0] > 0 ? "up" : "neutral";
    const renderTemplate = () => {
      all<HTMLButtonElement>("[data-template-layer]").forEach((button) => {
        button.classList.toggle(
          "active",
          Number(button.dataset.templateLayer) === templateLayerNumber,
        );
      });
      all<HTMLButtonElement>("[data-template-scope]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.templateScope === templateScope),
        );
      });
      all<HTMLButtonElement>("[data-template-mode]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.templateMode === templateMode),
        );
      });
      set(
        "[data-template-note]",
        templateScope === "content_only"
          ? "精确对齐内容：三种条件只保留相同相对字符跨度与相同 token ID；wrapper 和边界重切分 token 同时剔除。"
          : "完整输入：BOS、User:、换行与 content 全部进入统计；它回答真实协议流量，不等同于内容本身的变化。",
      );

      const grid = one<HTMLElement>("[data-template-domain-grid]");
      if (grid) {
        grid.replaceChildren(...templateData.domains.map((domain: string) => {
          const result = templateResult(templateLayerNumber, domain);
          const cv = result.comparison.metrics.cv;
          const card = document.createElement("article");
          const label = document.createElement("span");
          const values = document.createElement("b");
          const delta = document.createElement("strong");
          const ci = document.createElement("p");
          const distance = document.createElement("small");
          const stability = document.createElement("em");
          label.textContent = corpusLabels[domain];
          values.textContent = `${cv.before.toFixed(3)} → ${cv.after.toFixed(3)}`;
          delta.textContent = `Δ ${signed(cv.delta_after_minus_before)}`;
          delta.className = deltaClass(cv.delta_ci95);
          ci.textContent = `paired 95% ${formatSignedCi(cv.delta_ci95)}`;
          distance.textContent = `TV ${result.comparison.total_variation.point.toFixed(3)} · JSD ${result.comparison.js_divergence.point.toFixed(3)}`;
          stability.textContent = `aligned ${result.alignment.aligned} · top-6 set exact ${(result.alignment.setExactRate * 100).toFixed(1)}% · J ${result.alignment.meanJaccard.toFixed(3)}`;
          card.append(label, values, delta, ci, distance, stability);
          return card;
        }));
      }

      const currentLayer = templateData.layers.find(
        (item: any) => item.layer === templateLayerNumber,
      );
      set(
        "[data-template-prefix-exact]",
        `${currentLayer.invariant.ordered_topk_exact.toLocaleString()} / ${currentLayer.invariant.shared_prefix_tokens.toLocaleString()} EXACT · L${templateLayerNumber}`,
      );
      const contentSuffixZero = templateData.domains.every((domain: string) => {
        const result = templateResult(templateLayerNumber, domain).contentSuffix;
        return result.metrics.cv.delta_after_minus_before === 0
          && result.total_variation.point === 0
          && result.js_divergence.point === 0;
      });
      set(
        "[data-template-content-zero]",
        contentSuffixZero ? "4 / 4 DOMAINS · Δ 0" : "CHECK FAILED",
      );
      const suffixTv = templateData.domains.map(
        (domain: string) =>
          templateResult(templateLayerNumber, domain).suffix.total_variation.point,
      );
      set(
        "[data-template-suffix-tv]",
        `${Math.min(...suffixTv).toFixed(3)}–${Math.max(...suffixTv).toFixed(3)} · L${templateLayerNumber}`,
      );

      const depth = one<HTMLElement>("[data-template-depth-map]");
      if (depth) {
        depth.replaceChildren(...templateData.domains.map((domain: string) => {
          const row = document.createElement("div");
          const label = document.createElement("b");
          label.textContent = corpusLabels[domain];
          row.append(label);
          templateData.layers.forEach((layer: any) => {
            const cv = layer.scopes[templateScope].modes[templateMode]
              .rawToUser[domain].metrics.cv;
            const cell = document.createElement("span");
            cell.className = deltaClass(cv.delta_ci95);
            cell.style.setProperty(
              "--strength",
              String(Math.min(1, Math.abs(cv.delta_after_minus_before) / 0.14)),
            );
            cell.textContent = `L${layer.layer} ${signed(cv.delta_after_minus_before)}`;
            cell.title = `${corpusLabels[domain]} · L${layer.layer} · Δ CV ${signed(cv.delta_after_minus_before)} · paired 95% ${formatSignedCi(cv.delta_ci95)}`;
            row.append(cell);
          });
          return row;
        }));
      }
    };
    all<HTMLButtonElement>("[data-template-layer]").forEach((button) => {
      button.addEventListener("click", () => {
        templateLayerNumber = Number(button.dataset.templateLayer);
        renderTemplate();
      });
    });
    all<HTMLButtonElement>("[data-template-scope]").forEach((button) => {
      button.addEventListener("click", () => {
        templateScope = button.dataset.templateScope ?? "content_only";
        renderTemplate();
      });
    });
    all<HTMLButtonElement>("[data-template-mode]").forEach((button) => {
      button.addEventListener("click", () => {
        templateMode = button.dataset.templateMode ?? "prompt_balanced";
        renderTemplate();
      });
    });
    renderTemplate();

    let historyLayerNumber = 1;
    let historyScope = "target_content";
    let historyMode = "prompt_balanced";
    let historyEffect = "interaction";
    const historyEffectLabels: Record<string, string> = {
      system_main: "SYSTEM MAIN",
      fewshot_main: "ONE-SHOT MAIN",
      interaction: "INTERACTION",
    };
    const historyConditionLabels: Record<string, string> = {
      s0f0: "S0F0",
      s1f0: "S1F0",
      s0f1: "S0F1",
      s1f1: "S1F1",
    };
    const renderHistory = () => {
      all<HTMLButtonElement>("[data-history-layer]").forEach((button) => {
        button.classList.toggle(
          "active",
          Number(button.dataset.historyLayer) === historyLayerNumber,
        );
      });
      all<HTMLButtonElement>("[data-history-scope]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.historyScope === historyScope),
        );
      });
      all<HTMLButtonElement>("[data-history-mode]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.historyMode === historyMode),
        );
      });
      all<HTMLButtonElement>("[data-history-effect]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.historyEffect === historyEffect),
        );
      });
      set(
        "[data-history-note]",
        historyScope === "target_content"
          ? "目标内容：四格只保留相同相对字符跨度与相同 token ID；下方 Δ 均为 CV 的 source-paired 2×2 效应。"
          : "完整输入：system、demo、EOS、目标与 Assistant: 全部进入统计；它回答协议流量，不等同于目标内容本身。",
      );

      const currentLayer = historyData.layers.find(
        (item: any) => item.layer === historyLayerNumber,
      );
      const view = currentLayer.scopes[historyScope].modes[historyMode];
      const grid = one<HTMLElement>("[data-history-domain-grid]");
      if (grid) {
        grid.replaceChildren(...historyData.domains.map((domain: string) => {
          const card = document.createElement("article");
          const label = document.createElement("span");
          const cells = document.createElement("div");
          const effect = view.factorial[domain][historyEffect];
          const primary = document.createElement("strong");
          const ci = document.createElement("p");
          const allEffects = document.createElement("small");
          const edges = document.createElement("em");
          label.textContent = corpusLabels[domain];
          cells.className = "history-cell-values";
          ["s0f0", "s1f0", "s0f1", "s1f1"].forEach((condition) => {
            const cell = document.createElement("i");
            const name = document.createElement("small");
            const value = document.createElement("b");
            name.textContent = historyConditionLabels[condition];
            value.textContent = view.conditions[condition][domain].toFixed(3);
            cell.append(name, value);
            cells.append(cell);
          });
          primary.textContent = `${historyEffectLabels[historyEffect]} · Δ ${signed(effect.point)}`;
          primary.className = deltaClass(effect.ci95);
          ci.textContent = `source-paired 95% ${formatSignedCi(effect.ci95)}`;
          allEffects.textContent = [
            `S ${signed(view.factorial[domain].system_main.point)}`,
            `F ${signed(view.factorial[domain].fewshot_main.point)}`,
            `I ${signed(view.factorial[domain].interaction.point)}`,
          ].join(" · ");
          edges.textContent = [
            `system TV at F0 ${view.comparisons.system_at_f0[domain].tv.point.toFixed(3)}`,
            `at F1 ${view.comparisons.system_at_f1[domain].tv.point.toFixed(3)}`,
          ].join(" → ");
          card.append(label, cells, primary, ci, allEffects, edges);
          return card;
        }));
      }

      const bufferView = currentLayer.scopes.target_content
        .modes.prompt_balanced;
      const bufferGrid = one<HTMLElement>("[data-history-buffer-grid]");
      if (bufferGrid) {
        bufferGrid.replaceChildren(...historyData.domains.map((domain: string) => {
          const card = document.createElement("article");
          const label = document.createElement("span");
          const tv = document.createElement("b");
          const reduction = document.createElement("strong");
          const stability = document.createElement("p");
          const f0 = bufferView.comparisons.system_at_f0[domain].tv.point;
          const f1 = bufferView.comparisons.system_at_f1[domain].tv.point;
          const alignF0 = currentLayer.alignment[domain].system_at_f0;
          const alignF1 = currentLayer.alignment[domain].system_at_f1;
          label.textContent = corpusLabels[domain];
          tv.textContent = `TV ${f0.toFixed(3)} → ${f1.toFixed(3)}`;
          reduction.textContent = `↓ ${((1 - f1 / f0) * 100).toFixed(0)}%`;
          stability.textContent = `top-6 set exact ${(alignF0.setExactRate * 100).toFixed(1)}% → ${(alignF1.setExactRate * 100).toFixed(1)}% · J ${alignF0.meanJaccard.toFixed(3)} → ${alignF1.meanJaccard.toFixed(3)}`;
          card.append(label, tv, reduction, stability);
          return card;
        }));
      }

      const effectTitles: Record<string, string> = {
        system_main: "System main：平均两个 one-shot 水平后的 system 增量",
        fewshot_main: "One-shot main：平均两个 system 水平后的示例增量",
        interaction: "Interaction：两个处理是否可以简单相加",
      };
      set("[data-history-depth-title]", effectTitles[historyEffect]);
      const depth = one<HTMLElement>("[data-history-depth-map]");
      if (depth) {
        depth.replaceChildren(...historyData.domains.map((domain: string) => {
          const row = document.createElement("div");
          const label = document.createElement("b");
          label.textContent = corpusLabels[domain];
          row.append(label);
          historyData.layers.forEach((layer: any) => {
            const effect = layer.scopes[historyScope].modes[historyMode]
              .factorial[domain][historyEffect];
            const cell = document.createElement("span");
            cell.className = deltaClass(effect.ci95);
            cell.style.setProperty(
              "--strength",
              String(Math.min(1, Math.abs(effect.point) / 0.22)),
            );
            cell.textContent = `L${layer.layer} ${signed(effect.point)}`;
            cell.title = `${corpusLabels[domain]} · L${layer.layer} · ${historyEffectLabels[historyEffect]} Δ CV ${signed(effect.point)} · paired 95% ${formatSignedCi(effect.ci95)}`;
            row.append(cell);
          });
          return row;
        }));
      }
    };
    all<HTMLButtonElement>("[data-history-layer]").forEach((button) => {
      button.addEventListener("click", () => {
        historyLayerNumber = Number(button.dataset.historyLayer);
        renderHistory();
      });
    });
    all<HTMLButtonElement>("[data-history-scope]").forEach((button) => {
      button.addEventListener("click", () => {
        historyScope = button.dataset.historyScope ?? "target_content";
        renderHistory();
      });
    });
    all<HTMLButtonElement>("[data-history-mode]").forEach((button) => {
      button.addEventListener("click", () => {
        historyMode = button.dataset.historyMode ?? "prompt_balanced";
        renderHistory();
      });
    });
    all<HTMLButtonElement>("[data-history-effect]").forEach((button) => {
      button.addEventListener("click", () => {
        historyEffect = button.dataset.historyEffect ?? "interaction";
        renderHistory();
      });
    });
    renderHistory();

    let distanceLayerNumber = 1;
    let distanceScope = "target_content";
    let distanceMode = "prompt_balanced";
    let distanceContrast = "filler_minus_none";
    const distanceContrastLabels: Record<string, string> = {
      filler_minus_none: "FILLER − NONE",
      demo_minus_filler: "DEMO − FILLER",
    };
    const distanceHistoryLabels: Record<string, string> = {
      none: "NONE",
      filler: "FILLER",
      demo: "DEMO",
    };
    const renderDistance = () => {
      all<HTMLButtonElement>("[data-distance-layer]").forEach((button) => {
        button.classList.toggle(
          "active",
          Number(button.dataset.distanceLayer) === distanceLayerNumber,
        );
      });
      all<HTMLButtonElement>("[data-distance-scope]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.distanceScope === distanceScope),
        );
      });
      all<HTMLButtonElement>("[data-distance-mode]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.distanceMode === distanceMode),
        );
      });
      all<HTMLButtonElement>("[data-distance-contrast]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.distanceContrast === distanceContrast),
        );
      });
      set(
        "[data-distance-note]",
        distanceScope === "target_content"
          ? "目标内容：六格只保留相同相对字符跨度与相同 token ID；TV 是两条真实 system edge 的分布距离。"
          : "完整输入：system、filler/demo、角色、EOS、目标与 Assistant: 全部计入；它回答协议流量而非目标内容本身。",
      );

      const currentLayer = distanceData.layers.find(
        (item: any) => item.layer === distanceLayerNumber,
      );
      const view = currentLayer.scopes[distanceScope].modes[distanceMode];
      const grid = one<HTMLElement>("[data-distance-domain-grid]");
      if (grid) {
        grid.replaceChildren(...distanceData.domains.map((domain: string) => {
          const data = view[domain];
          const card = document.createElement("article");
          const label = document.createElement("span");
          const ladder = document.createElement("div");
          const contrast = data.contrasts[distanceContrast].total_variation_delta;
          const primary = document.createElement("strong");
          const ci = document.createElement("p");
          const stability = document.createElement("small");
          const lexical = document.createElement("em");
          const cv = document.createElement("u");
          label.textContent = corpusLabels[domain];
          ladder.className = "distance-tv-ladder";
          ["none", "filler", "demo"].forEach((history) => {
            const cell = document.createElement("i");
            const name = document.createElement("small");
            const value = document.createElement("b");
            name.textContent = distanceHistoryLabels[history];
            value.textContent = data.distances[history].total_variation.point.toFixed(3);
            cell.append(name, value);
            ladder.append(cell);
          });
          primary.textContent = `${distanceContrastLabels[distanceContrast]} · ΔTV ${signed(contrast.point)}`;
          primary.className = deltaClass(contrast.ci95);
          ci.textContent = `source-paired 95% ${formatSignedCi(contrast.ci95)}`;
          const noneAlign = currentLayer.alignment[domain].system_none;
          const fillerAlign = currentLayer.alignment[domain].system_filler;
          const demoAlign = currentLayer.alignment[domain].system_demo;
          stability.textContent = `target top-6 set exact ${(noneAlign.setExactRate * 100).toFixed(1)}% → ${(fillerAlign.setExactRate * 100).toFixed(1)}% → ${(demoAlign.setExactRate * 100).toFixed(1)}%`;
          lexical.textContent = [
            "filler↔demo TV",
            `at S0 ${data.lexical.at_s0.total_variation.point.toFixed(3)}`,
            `at S1 ${data.lexical.at_s1.total_variation.point.toFixed(3)}`,
          ].join(" · ");
          cv.textContent = [
            "system ΔCV",
            ...["none", "filler", "demo"].map(
              (history) => `${distanceHistoryLabels[history]} ${signed(data.cvEdges[history].point)}`,
            ),
          ].join(" · ");
          card.append(label, ladder, primary, ci, stability, lexical, cv);
          return card;
        }));
      }

      const titles: Record<string, string> = {
        filler_minus_none: "Filler − None：等长历史结构的第一个台阶",
        demo_minus_filler: "Demo − Filler：固定协议字段后的文本替换台阶",
      };
      set("[data-distance-depth-title]", titles[distanceContrast]);
      const depth = one<HTMLElement>("[data-distance-depth-map]");
      if (depth) {
        depth.replaceChildren(...distanceData.domains.map((domain: string) => {
          const row = document.createElement("div");
          const label = document.createElement("b");
          label.textContent = corpusLabels[domain];
          row.append(label);
          distanceData.layers.forEach((layer: any) => {
            const contrast = layer.scopes[distanceScope].modes[distanceMode]
              [domain].contrasts[distanceContrast].total_variation_delta;
            const cell = document.createElement("span");
            cell.className = deltaClass(contrast.ci95);
            cell.style.setProperty(
              "--strength",
              String(Math.min(1, Math.abs(contrast.point) / 0.07)),
            );
            cell.textContent = `L${layer.layer} ${signed(contrast.point)}`;
            cell.title = `${corpusLabels[domain]} · L${layer.layer} · ${distanceContrastLabels[distanceContrast]} Δ system-edge TV ${signed(contrast.point)} · paired 95% ${formatSignedCi(contrast.ci95)}`;
            row.append(cell);
          });
          return row;
        }));
      }
    };
    all<HTMLButtonElement>("[data-distance-layer]").forEach((button) => {
      button.addEventListener("click", () => {
        distanceLayerNumber = Number(button.dataset.distanceLayer);
        renderDistance();
      });
    });
    all<HTMLButtonElement>("[data-distance-scope]").forEach((button) => {
      button.addEventListener("click", () => {
        distanceScope = button.dataset.distanceScope ?? "target_content";
        renderDistance();
      });
    });
    all<HTMLButtonElement>("[data-distance-mode]").forEach((button) => {
      button.addEventListener("click", () => {
        distanceMode = button.dataset.distanceMode ?? "prompt_balanced";
        renderDistance();
      });
    });
    all<HTMLButtonElement>("[data-distance-contrast]").forEach((button) => {
      button.addEventListener("click", () => {
        distanceContrast = button.dataset.distanceContrast ?? "filler_minus_none";
        renderDistance();
      });
    });
    renderDistance();

    let boundaryLayerNumber = 1;
    let boundaryScope = "target_content";
    let boundaryMode = "prompt_balanced";
    let boundaryContrast = "x_minus_eos";
    const boundaryContrastLabels: Record<string, string> = {
      x_minus_eos: "X − EOS",
      period_minus_eos: "PERIOD − EOS",
      newline_minus_eos: "NEWLINE − EOS",
    };
    const boundaryLevelLabels: Record<string, string> = {
      eos: "EOS",
      x: "X",
      period: ".",
      newline: "↵",
    };
    const boundaryReplacement = () => boundaryContrast.replace("_minus_eos", "");
    const renderBoundary = () => {
      all<HTMLButtonElement>("[data-boundary-layer]").forEach((button) => {
        button.classList.toggle(
          "active",
          Number(button.dataset.boundaryLayer) === boundaryLayerNumber,
        );
      });
      all<HTMLButtonElement>("[data-boundary-scope]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.boundaryScope === boundaryScope),
        );
      });
      all<HTMLButtonElement>("[data-boundary-mode]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.boundaryMode === boundaryMode),
        );
      });
      all<HTMLButtonElement>("[data-boundary-contrast]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.boundaryContrast === boundaryContrast),
        );
      });
      set(
        "[data-boundary-note]",
        boundaryScope === "target_content"
          ? "目标内容：八格只比较完全相同的后续内容 token；正 ΔTV 表示替换 EOS 后 system edge 更大，不表示能力更差。"
          : "完整输入：system、历史、被替换边界、角色包装与目标全部计入；一个 ID 的后续效应会被整段协议流量稀释。",
      );

      const replacement = boundaryReplacement();
      set(
        "[data-boundary-track-token]",
        boundaryLevelLabels[replacement],
      );
      const currentLayer = boundaryData.layers.find(
        (item: any) => item.layer === boundaryLayerNumber,
      );
      const view = currentLayer.scopes[boundaryScope].modes[boundaryMode];
      const grid = one<HTMLElement>("[data-boundary-domain-grid]");
      if (grid) {
        grid.replaceChildren(...boundaryData.domains.map((domain: string) => {
          const data = view[domain];
          const contrast = data.contrasts[boundaryContrast].total_variation_delta;
          const direct = data.direct[replacement];
          const interaction = direct.s1_minus_s0.total_variation_delta;
          const eosAlignment = currentLayer.alignment[domain].system_eos;
          const replacementAlignment = currentLayer.alignment[domain][`system_${replacement}`];
          const card = document.createElement("article");
          const label = document.createElement("span");
          const ladder = document.createElement("div");
          const primary = document.createElement("strong");
          const ci = document.createElement("p");
          const stability = document.createElement("small");
          const substitution = document.createElement("em");
          const interactionLine = document.createElement("u");
          const cv = document.createElement("i");
          label.textContent = corpusLabels[domain];
          ladder.className = "boundary-tv-ladder";
          ["eos", "x", "period", "newline"].forEach((boundary) => {
            const cell = document.createElement("b");
            const name = document.createElement("small");
            const value = document.createElement("strong");
            name.textContent = boundaryLevelLabels[boundary];
            value.textContent = data.distances[boundary].total_variation.point.toFixed(3);
            cell.classList.toggle("selected", boundary === replacement);
            cell.classList.toggle("official", boundary === "eos");
            cell.append(name, value);
            ladder.append(cell);
          });
          primary.textContent = `${boundaryContrastLabels[boundaryContrast]} · ΔTV ${signed(contrast.point)}`;
          primary.className = deltaClass(contrast.ci95);
          ci.textContent = `source-paired 95% ${formatSignedCi(contrast.ci95)}`;
          stability.textContent = `system top-6 set exact EOS ${(eosAlignment.setExactRate * 100).toFixed(1)}% · ${boundaryLevelLabels[replacement]} ${(replacementAlignment.setExactRate * 100).toFixed(1)}% · J ${eosAlignment.meanJaccard.toFixed(3)} → ${replacementAlignment.meanJaccard.toFixed(3)}`;
          substitution.textContent = `direct EOS↔${boundaryLevelLabels[replacement]} TV · S0 ${direct.at_s0.total_variation.point.toFixed(3)} · S1 ${direct.at_s1.total_variation.point.toFixed(3)}`;
          interactionLine.textContent = `direct S1−S0 ${signed(interaction.point)} · 95% ${formatSignedCi(interaction.ci95)}`;
          const cvContrast = data.cvContrasts[boundaryContrast];
          cv.textContent = `system-edge ΔCV ${signed(cvContrast.point)} · 95% ${formatSignedCi(cvContrast.ci95)}`;
          card.append(
            label,
            ladder,
            primary,
            ci,
            stability,
            substitution,
            interactionLine,
            cv,
          );
          return card;
        }));
      }

      const titles: Record<string, string> = {
        x_minus_eos: "x − EOS：普通内容 token 替换官方边界",
        period_minus_eos: "句点 − EOS：普通标点 token 替换官方边界",
        newline_minus_eos: "换行 − EOS：普通格式 token 替换官方边界",
      };
      set("[data-boundary-depth-title]", titles[boundaryContrast]);
      const depth = one<HTMLElement>("[data-boundary-depth-map]");
      if (depth) {
        depth.replaceChildren(...boundaryData.domains.map((domain: string) => {
          const row = document.createElement("div");
          const label = document.createElement("b");
          label.textContent = corpusLabels[domain];
          row.append(label);
          boundaryData.layers.forEach((layer: any) => {
            const contrast = layer.scopes[boundaryScope].modes[boundaryMode]
              [domain].contrasts[boundaryContrast].total_variation_delta;
            const cell = document.createElement("span");
            cell.className = deltaClass(contrast.ci95);
            cell.style.setProperty(
              "--strength",
              String(Math.min(1, Math.abs(contrast.point) / 0.04)),
            );
            cell.textContent = `L${layer.layer} ${signed(contrast.point)}`;
            cell.title = `${corpusLabels[domain]} · L${layer.layer} · ${boundaryContrastLabels[boundaryContrast]} Δ system-edge TV ${signed(contrast.point)} · paired 95% ${formatSignedCi(contrast.ci95)}`;
            row.append(cell);
          });
          return row;
        }));
      }
    };
    all<HTMLButtonElement>("[data-boundary-layer]").forEach((button) => {
      button.addEventListener("click", () => {
        boundaryLayerNumber = Number(button.dataset.boundaryLayer);
        renderBoundary();
      });
    });
    all<HTMLButtonElement>("[data-boundary-scope]").forEach((button) => {
      button.addEventListener("click", () => {
        boundaryScope = button.dataset.boundaryScope ?? "target_content";
        renderBoundary();
      });
    });
    all<HTMLButtonElement>("[data-boundary-mode]").forEach((button) => {
      button.addEventListener("click", () => {
        boundaryMode = button.dataset.boundaryMode ?? "prompt_balanced";
        renderBoundary();
      });
    });
    all<HTMLButtonElement>("[data-boundary-contrast]").forEach((button) => {
      button.addEventListener("click", () => {
        boundaryContrast = button.dataset.boundaryContrast ?? "x_minus_eos";
        renderBoundary();
      });
    });
    renderBoundary();

    let roleLayerNumber = 1;
    let roleScope = "target_content";
    let roleMode = "prompt_balanced";
    let roleContrast = "target_assistant_minus_official";
    const roleContrastLabels: Record<string, string> = {
      target_assistant_minus_official: "U→A − OFFICIAL",
      target_x_minus_official: "U→X − OFFICIAL",
      suffix_user_minus_official: "SUFFIX A→U − OFFICIAL",
    };
    const roleLevelLabels: Record<string, string> = {
      official: "OFF.",
      target_assistant: "U→A",
      target_x: "U→x",
      suffix_user: "SFX",
    };
    const roleReplacement = () => roleContrast.replace("_minus_official", "");
    const renderRole = () => {
      all<HTMLButtonElement>("[data-role-layer]").forEach((button) => {
        button.classList.toggle(
          "active",
          Number(button.dataset.roleLayer) === roleLayerNumber,
        );
      });
      all<HTMLButtonElement>("[data-role-scope]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.roleScope === roleScope),
        );
      });
      all<HTMLButtonElement>("[data-role-mode]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.roleMode === roleMode),
        );
      });
      all<HTMLButtonElement>("[data-role-contrast]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.roleContrast === roleContrast),
        );
      });
      set(
        "[data-role-note]",
        roleScope === "target_content"
          ? "目标内容：正 ΔTV 表示替换词头后 system edge 更大；direct TV 单独回答“这个 ID 本身改了多少路由”。"
          : "完整输入：被替换词头、历史、目标、换行与 generation prompt 全部计入；suffix 自身因此不再是零。",
      );

      const replacement = roleReplacement();
      set(
        "[data-role-target-head]",
        replacement === "target_assistant"
          ? "Assistant"
          : replacement === "target_x"
            ? "x"
            : "User",
      );
      set(
        "[data-role-suffix-head]",
        replacement === "suffix_user" ? "User" : "Assistant",
      );
      const currentLayer = roleData.layers.find(
        (item: any) => item.layer === roleLayerNumber,
      );
      const view = currentLayer.scopes[roleScope].modes[roleMode];
      const grid = one<HTMLElement>("[data-role-domain-grid]");
      if (grid) {
        grid.replaceChildren(...roleData.domains.map((domain: string) => {
          const data = view[domain];
          const contrast = data.contrasts[roleContrast].total_variation_delta;
          const direct = data.direct[replacement];
          const interaction = direct.s1_minus_s0.total_variation_delta;
          const alignmentS0 = currentLayer.alignment[domain][`${replacement}_at_s0`];
          const alignmentS1 = currentLayer.alignment[domain][`${replacement}_at_s1`];
          const card = document.createElement("article");
          const label = document.createElement("span");
          const ladder = document.createElement("div");
          const primary = document.createElement("strong");
          const ci = document.createElement("p");
          const stability = document.createElement("small");
          const substitution = document.createElement("em");
          const interactionLine = document.createElement("u");
          const cv = document.createElement("i");
          label.textContent = corpusLabels[domain];
          ladder.className = "role-tv-ladder";
          ["official", "target_assistant", "target_x", "suffix_user"].forEach((level) => {
            const cell = document.createElement("b");
            const name = document.createElement("small");
            const value = document.createElement("strong");
            name.textContent = roleLevelLabels[level];
            value.textContent = data.distances[level].total_variation.point.toFixed(3);
            cell.classList.toggle("selected", level === replacement);
            cell.classList.toggle("official", level === "official");
            cell.classList.toggle("causal", level === "suffix_user");
            cell.append(name, value);
            ladder.append(cell);
          });
          primary.textContent = `${roleContrastLabels[roleContrast]} · ΔTV ${signed(contrast.point)}`;
          primary.className = deltaClass(contrast.ci95);
          ci.textContent = `source-paired 95% ${formatSignedCi(contrast.ci95)}`;
          stability.textContent = `direct target top-6 set exact · S0 ${(alignmentS0.setExactRate * 100).toFixed(1)}% · S1 ${(alignmentS1.setExactRate * 100).toFixed(1)}% · J ${alignmentS0.meanJaccard.toFixed(3)} / ${alignmentS1.meanJaccard.toFixed(3)}`;
          substitution.textContent = `direct OFFICIAL↔${roleLevelLabels[replacement]} TV · S0 ${direct.at_s0.total_variation.point.toFixed(3)} · S1 ${direct.at_s1.total_variation.point.toFixed(3)}`;
          interactionLine.textContent = `direct S1−S0 ${signed(interaction.point)} · 95% ${formatSignedCi(interaction.ci95)}`;
          const cvContrast = data.cvContrasts[roleContrast];
          cv.textContent = `system-edge ΔCV ${signed(cvContrast.point)} · 95% ${formatSignedCi(cvContrast.ci95)}`;
          card.append(
            label,
            ladder,
            primary,
            ci,
            stability,
            substitution,
            interactionLine,
            cv,
          );
          return card;
        }));
      }

      const titles: Record<string, string> = {
        target_assistant_minus_official: "User→Assistant：system-edge TV 相对官方的变化",
        target_x_minus_official: "User→x：普通 token 词头的 system-edge contrast",
        suffix_user_minus_official: "suffix Assistant→User：目标内容 causal-exact 负对照",
      };
      set("[data-role-depth-title]", titles[roleContrast]);
      const depth = one<HTMLElement>("[data-role-depth-map]");
      if (depth) {
        depth.replaceChildren(...roleData.domains.map((domain: string) => {
          const row = document.createElement("div");
          const label = document.createElement("b");
          label.textContent = corpusLabels[domain];
          row.append(label);
          roleData.layers.forEach((layer: any) => {
            const contrast = layer.scopes[roleScope].modes[roleMode]
              [domain].contrasts[roleContrast].total_variation_delta;
            const cell = document.createElement("span");
            cell.className = deltaClass(contrast.ci95);
            cell.style.setProperty(
              "--strength",
              String(Math.min(1, Math.abs(contrast.point) / 0.015)),
            );
            cell.textContent = `L${layer.layer} ${signed(contrast.point)}`;
            cell.title = `${corpusLabels[domain]} · L${layer.layer} · ${roleContrastLabels[roleContrast]} Δ system-edge TV ${signed(contrast.point)} · paired 95% ${formatSignedCi(contrast.ci95)}`;
            row.append(cell);
          });
          return row;
        }));
      }
    };
    all<HTMLButtonElement>("[data-role-layer]").forEach((button) => {
      button.addEventListener("click", () => {
        roleLayerNumber = Number(button.dataset.roleLayer);
        renderRole();
      });
    });
    all<HTMLButtonElement>("[data-role-scope]").forEach((button) => {
      button.addEventListener("click", () => {
        roleScope = button.dataset.roleScope ?? "target_content";
        renderRole();
      });
    });
    all<HTMLButtonElement>("[data-role-mode]").forEach((button) => {
      button.addEventListener("click", () => {
        roleMode = button.dataset.roleMode ?? "prompt_balanced";
        renderRole();
      });
    });
    all<HTMLButtonElement>("[data-role-contrast]").forEach((button) => {
      button.addEventListener("click", () => {
        roleContrast = button.dataset.roleContrast
          ?? "target_assistant_minus_official";
        renderRole();
      });
    });
    renderRole();

    let specialLayerNumber = 1;
    let specialScope = "target_content";
    let specialMode = "prompt_balanced";
    let specialContrast = "bos_minus_eos";
    const specialLevelLabels: Record<string, string> = {
      eos: "EOS",
      bos: "BOS",
      x: "x",
      period: ".",
    };
    const specialContrastLabels: Record<string, string> = {
      bos_minus_eos: "BOS − EOS",
      x_minus_eos: "x − EOS",
      period_minus_eos: ". − EOS",
      family: "ORDINARY − SPECIAL",
    };
    const specialReplacement = () => specialContrast.replace("_minus_eos", "");
    const specialEffect = (view: any) => specialContrast === "family"
      ? view.family.total_variation.ordinary_minus_special
      : view.contrasts[specialContrast].total_variation_delta;
    const renderSpecial = () => {
      all<HTMLButtonElement>("[data-special-layer]").forEach((button) => {
        button.classList.toggle(
          "active",
          Number(button.dataset.specialLayer) === specialLayerNumber,
        );
      });
      all<HTMLButtonElement>("[data-special-scope]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.specialScope === specialScope),
        );
      });
      all<HTMLButtonElement>("[data-special-mode]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.specialMode === specialMode),
        );
      });
      all<HTMLButtonElement>("[data-special-contrast]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.specialContrast === specialContrast),
        );
      });
      set(
        "[data-special-note]",
        specialScope === "target_content"
          ? specialContrast === "family"
            ? "目标内容：ordinary − special 是 mean(x, .) − mean(EOS, BOS)，只描述这四个 ID，不代表普通词元总体。"
            : "目标内容：正 ΔTV 表示替换边界后 system edge 更大；direct TV 另记这个单 ID 本身造成的后续路由移动。"
          : "完整输入：被替换的边界 token 自身也进入聚合；它是稳健性账，不是下游因果主口径。",
      );

      const currentLayer = specialData.layers.find(
        (item: any) => item.layer === specialLayerNumber,
      );
      const view = currentLayer.scopes[specialScope].modes[specialMode];
      const replacement = specialReplacement();
      const grid = one<HTMLElement>("[data-special-domain-grid]");
      if (grid) {
        grid.replaceChildren(...specialData.domains.map((domain: string) => {
          const result = view[domain];
          const effect = specialEffect(result);
          const card = document.createElement("article");
          const label = document.createElement("span");
          const ladder = document.createElement("div");
          const primary = document.createElement("strong");
          const ci = document.createElement("p");
          const detail = document.createElement("em");
          const stability = document.createElement("small");
          const cv = document.createElement("i");
          label.textContent = corpusLabels[domain];
          ladder.className = "special-tv-ladder";
          ["eos", "bos", "x", "period"].forEach((level) => {
            const cell = document.createElement("b");
            const name = document.createElement("small");
            const value = document.createElement("strong");
            name.textContent = specialLevelLabels[level];
            value.textContent = result.distances[level].total_variation.point.toFixed(3);
            cell.classList.toggle("official", level === "eos");
            cell.classList.toggle(
              "selected",
              specialContrast === "family"
                ? ["bos", "x", "period"].includes(level)
                : level === replacement,
            );
            cell.append(name, value);
            ladder.append(cell);
          });
          primary.textContent = `${specialContrastLabels[specialContrast]} · ΔTV ${signed(effect.point)}`;
          primary.className = deltaClass(effect.ci95);
          ci.textContent = `source-paired 95% ${formatSignedCi(effect.ci95)}`;
          if (specialContrast === "family") {
            const family = result.family.total_variation;
            detail.textContent = `special mean ${family.special_mean.point.toFixed(3)} · selected ordinary mean ${family.ordinary_control_mean.point.toFixed(3)}`;
            stability.textContent = "2-vs-2 descriptive family summary · complete special inventory, two selected ordinary controls";
            cv.textContent = "CV family contrast 未定义；避免把两个具体 ordinary IDs 冒充总体类别。";
          } else {
            const direct = result.direct[replacement];
            const alignS0 = currentLayer.alignment[domain][`${replacement}_at_s0`];
            const alignS1 = currentLayer.alignment[domain][`${replacement}_at_s1`];
            detail.textContent = `direct EOS↔${specialLevelLabels[replacement]} TV · S0 ${direct.at_s0.total_variation.point.toFixed(3)} · S1 ${direct.at_s1.total_variation.point.toFixed(3)} · Δ ${signed(direct.s1_minus_s0.total_variation_delta.point)}`;
            stability.textContent = `target top-6 set exact · S0 ${(alignS0.setExactRate * 100).toFixed(1)}% · S1 ${(alignS1.setExactRate * 100).toFixed(1)}% · J ${alignS0.meanJaccard.toFixed(3)} / ${alignS1.meanJaccard.toFixed(3)}`;
            const cvEffect = result.cvContrasts[specialContrast];
            cv.textContent = `system-edge ΔCV ${signed(cvEffect.point)} · 95% ${formatSignedCi(cvEffect.ci95)}`;
          }
          card.append(label, ladder, primary, ci, detail, stability, cv);
          return card;
        }));
      }

      const titles: Record<string, string> = {
        bos_minus_eos: "BOS − EOS：同为 special，路由模式仍不同",
        x_minus_eos: "x − EOS：选定普通内容 token 对照",
        period_minus_eos: "句点 − EOS：选定普通标点 token 对照",
        family: "mean(x, .) − mean(EOS, BOS)：仅描述四个 ID",
      };
      set("[data-special-depth-title]", titles[specialContrast]);
      const depth = one<HTMLElement>("[data-special-depth-map]");
      if (depth) {
        depth.replaceChildren(...specialData.domains.map((domain: string) => {
          const row = document.createElement("div");
          const label = document.createElement("b");
          label.textContent = corpusLabels[domain];
          row.append(label);
          specialData.layers.forEach((layer: any) => {
            const result = layer.scopes[specialScope].modes[specialMode][domain];
            const effect = specialEffect(result);
            const cell = document.createElement("span");
            cell.className = deltaClass(effect.ci95);
            cell.style.setProperty(
              "--strength",
              String(Math.min(1, Math.abs(effect.point) / 0.04)),
            );
            cell.textContent = `L${layer.layer} ${signed(effect.point)}`;
            cell.title = `${corpusLabels[domain]} · L${layer.layer} · ${specialContrastLabels[specialContrast]} ΔTV ${signed(effect.point)} · paired 95% ${formatSignedCi(effect.ci95)}`;
            row.append(cell);
          });
          return row;
        }));
      }
    };
    all<HTMLButtonElement>("[data-special-layer]").forEach((button) => {
      button.addEventListener("click", () => {
        specialLayerNumber = Number(button.dataset.specialLayer);
        renderSpecial();
      });
    });
    all<HTMLButtonElement>("[data-special-scope]").forEach((button) => {
      button.addEventListener("click", () => {
        specialScope = button.dataset.specialScope ?? "target_content";
        renderSpecial();
      });
    });
    all<HTMLButtonElement>("[data-special-mode]").forEach((button) => {
      button.addEventListener("click", () => {
        specialMode = button.dataset.specialMode ?? "prompt_balanced";
        renderSpecial();
      });
    });
    all<HTMLButtonElement>("[data-special-contrast]").forEach((button) => {
      button.addEventListener("click", () => {
        specialContrast = button.dataset.specialContrast ?? "bos_minus_eos";
        renderSpecial();
      });
    });
    renderSpecial();

    let roleBlockLayerNumber = 1;
    let roleBlockScope = "target_content";
    let roleBlockMode = "prompt_balanced";
    let roleBlockEffect = "head_main";
    const roleBlockLevelLabels: Record<string, string> = {
      user_colon: "U:",
      assistant_colon: "A:",
      user_x: "Ux",
      assistant_x: "Ax",
    };
    const roleBlockEffectLabels: Record<string, string> = {
      head_main: "HEAD MAIN",
      delimiter_main: "DELIMITER MAIN",
      head_by_delimiter: "HEAD × DELIMITER",
    };
    const roleBlockDirectKeys: Record<string, string[]> = {
      head_main: ["head_at_colon", "head_at_x"],
      delimiter_main: ["delimiter_at_user", "delimiter_at_assistant"],
    };
    const roleBlockDirectLabels: Record<string, string> = {
      head_at_colon: "head @ colon",
      head_at_x: "head @ x",
      delimiter_at_user: "delimiter @ User",
      delimiter_at_assistant: "delimiter @ Assistant",
    };
    const renderRoleBlock = () => {
      all<HTMLButtonElement>("[data-role-block-layer]").forEach((button) => {
        button.classList.toggle(
          "active",
          Number(button.dataset.roleBlockLayer) === roleBlockLayerNumber,
        );
      });
      all<HTMLButtonElement>("[data-role-block-scope]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.roleBlockScope === roleBlockScope),
        );
      });
      all<HTMLButtonElement>("[data-role-block-mode]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.roleBlockMode === roleBlockMode),
        );
      });
      all<HTMLButtonElement>("[data-role-block-effect]").forEach((button) => {
        button.setAttribute(
          "aria-pressed",
          String(button.dataset.roleBlockEffect === roleBlockEffect),
        );
      });
      const notes: Record<string, string> = {
        head_main: "head main：平均跨过两个 delimiter，User→Assistant 对 system-edge TV 的影响。",
        delimiter_main: "delimiter main：平均跨过两个 head，冒号→x 对 system-edge TV 的影响。",
        head_by_delimiter: "interaction：(Assistant x−User x) − (Assistant:−User:)；head 的作用是否依赖 delimiter。",
      };
      set("[data-role-block-note]", notes[roleBlockEffect]);

      const currentLayer = roleBlockData.layers.find(
        (item: any) => item.layer === roleBlockLayerNumber,
      );
      const view = currentLayer.scopes[roleBlockScope].modes[roleBlockMode];
      const grid = one<HTMLElement>("[data-role-block-domain-grid]");
      if (grid) {
        grid.replaceChildren(...roleBlockData.domains.map((domain: string) => {
          const result = view[domain];
          const effect = (
            result.factorial.systemEdgeDistanceEffects.total_variation
              [roleBlockEffect]
          );
          const card = document.createElement("article");
          const label = document.createElement("span");
          const ladder = document.createElement("div");
          const primary = document.createElement("strong");
          const ci = document.createElement("p");
          const direct = document.createElement("em");
          const dependency = document.createElement("u");
          const cv = document.createElement("i");
          const stability = document.createElement("small");
          label.textContent = corpusLabels[domain];
          ladder.className = "role-block-tv-ladder";
          ["user_colon", "assistant_colon", "user_x", "assistant_x"].forEach((level) => {
            const cell = document.createElement("b");
            const name = document.createElement("small");
            const value = document.createElement("strong");
            name.textContent = roleBlockLevelLabels[level];
            value.textContent = result.distances[level].total_variation.point.toFixed(3);
            cell.classList.toggle("official", level === "user_colon");
            cell.append(name, value);
            ladder.append(cell);
          });
          primary.textContent = `${roleBlockEffectLabels[roleBlockEffect]} · ΔTV ${signed(effect.point)}`;
          primary.className = deltaClass(effect.ci95);
          ci.textContent = `source-paired 95% ${formatSignedCi(effect.ci95)}`;
          if (roleBlockEffect === "head_by_delimiter") {
            const headDependency = (
              result.factorial.directEffectDependencies
                .delimiter_dependence_of_head_direct
            );
            const s0 = headDependency.at_s0.total_variation_delta;
            const s1 = headDependency.at_s1.total_variation_delta;
            const did = (
              headDependency.s1_minus_s0
                .total_variation_difference_in_differences
            );
            direct.textContent = `direct head@x − head@colon · S0 ${signed(s0.point)} · S1 ${signed(s1.point)}`;
            dependency.textContent = `system DiD ${signed(did.point)} · 95% ${formatSignedCi(did.ci95)}`;
            const align = currentLayer.alignment[domain].head_at_x_s0;
            stability.textContent = `head@x target top-6 set exact ${(align.setExactRate * 100).toFixed(1)}% · J ${align.meanJaccard.toFixed(3)}`;
          } else {
            const [firstKey, secondKey] = roleBlockDirectKeys[roleBlockEffect];
            const first = result.factorial.directFactorEdges[firstKey];
            const second = result.factorial.directFactorEdges[secondKey];
            direct.textContent = `${roleBlockDirectLabels[firstKey]} TV · S0 ${first.at_s0.total_variation.point.toFixed(3)} · S1 ${first.at_s1.total_variation.point.toFixed(3)}`;
            dependency.textContent = `${roleBlockDirectLabels[secondKey]} TV · S0 ${second.at_s0.total_variation.point.toFixed(3)} · S1 ${second.at_s1.total_variation.point.toFixed(3)}`;
            const alignmentKey = roleBlockEffect === "head_main"
              ? "assistant_colon_at_s0"
              : "user_x_at_s0";
            const align = currentLayer.alignment[domain][alignmentKey];
            stability.textContent = `representative direct target top-6 set exact ${(align.setExactRate * 100).toFixed(1)}% · J ${align.meanJaccard.toFixed(3)}`;
          }
          const cvEffect = (
            result.factorial.metricSystemEdgeEffects.cv[roleBlockEffect]
          );
          cv.textContent = `system-edge ΔCV ${signed(cvEffect.point)} · 95% ${formatSignedCi(cvEffect.ci95)}`;
          card.append(label, ladder, primary, ci, direct, dependency, stability, cv);
          return card;
        }));
      }

      const titles: Record<string, string> = {
        head_main: "head main：User→Assistant 是否统一改变 system edge",
        delimiter_main: "delimiter main：冒号→x 是否统一改变 system edge",
        head_by_delimiter: "interaction：head 的作用是否依赖 delimiter",
      };
      set("[data-role-block-depth-title]", titles[roleBlockEffect]);
      const depth = one<HTMLElement>("[data-role-block-depth-map]");
      if (depth) {
        depth.replaceChildren(...roleBlockData.domains.map((domain: string) => {
          const row = document.createElement("div");
          const label = document.createElement("b");
          label.textContent = corpusLabels[domain];
          row.append(label);
          roleBlockData.layers.forEach((layer: any) => {
            const effect = (
              layer.scopes[roleBlockScope].modes[roleBlockMode][domain]
                .factorial.systemEdgeDistanceEffects.total_variation
                  [roleBlockEffect]
            );
            const cell = document.createElement("span");
            cell.className = deltaClass(effect.ci95);
            cell.style.setProperty(
              "--strength",
              String(Math.min(1, Math.abs(effect.point) / 0.015)),
            );
            cell.textContent = `L${layer.layer} ${signed(effect.point)}`;
            cell.title = `${corpusLabels[domain]} · L${layer.layer} · ${roleBlockEffectLabels[roleBlockEffect]} ΔTV ${signed(effect.point)} · paired 95% ${formatSignedCi(effect.ci95)}`;
            row.append(cell);
          });
          return row;
        }));
      }
    };
    all<HTMLButtonElement>("[data-role-block-layer]").forEach((button) => {
      button.addEventListener("click", () => {
        roleBlockLayerNumber = Number(button.dataset.roleBlockLayer);
        renderRoleBlock();
      });
    });
    all<HTMLButtonElement>("[data-role-block-scope]").forEach((button) => {
      button.addEventListener("click", () => {
        roleBlockScope = button.dataset.roleBlockScope ?? "target_content";
        renderRoleBlock();
      });
    });
    all<HTMLButtonElement>("[data-role-block-mode]").forEach((button) => {
      button.addEventListener("click", () => {
        roleBlockMode = button.dataset.roleBlockMode ?? "prompt_balanced";
        renderRoleBlock();
      });
    });
    all<HTMLButtonElement>("[data-role-block-effect]").forEach((button) => {
      button.addEventListener("click", () => {
        roleBlockEffect = button.dataset.roleBlockEffect ?? "head_main";
        renderRoleBlock();
      });
    });
    renderRoleBlock();
  });
</script>

<style>
  .artifact-lab {
    --ink: #202027;
    --paper: #f4f0e7;
    --blue: #62699b;
    --teal: #39786e;
    --amber: #ba762c;
    --red: #a14d4d;
    margin: 2rem 0 0;
    border: 1px solid rgba(32, 32, 39, .22);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 10px 12px 0 rgba(32, 32, 39, .07);
    overflow: hidden;
  }
  .artifact-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr);
    gap: 2rem;
    padding: 2rem;
    background:
      linear-gradient(115deg, rgba(98, 105, 155, .17), transparent 45%),
      repeating-linear-gradient(90deg, transparent 0 39px, rgba(32,32,39,.035) 39px 40px);
    border-bottom: 1px solid rgba(32, 32, 39, .18);
  }
  .artifact-head > div > p,
  .panel-lead span,
  .micro-title,
  .heat-head span,
  .aggregate-card span,
  .jaccard-block span,
  .observed-cache span,
  .artifact-identity span,
  .absorb-algebra span,
  .absorb-cache-flow span,
  .absorb-metrics span,
  .kernel-contract span,
  .execution-split span,
  .repro-gate span,
  .dependency-split span,
  .checksum-grid span,
  .corpus-ledger span,
  .corpus-controls > div > span,
  .corpus-heat-head span,
  .corpus-comparison span,
  .corpus-findings span,
  .length-sensitivity span,
  .template-ledger span,
  .template-protocol > article > span,
  .template-controls > div > span,
  .template-domain-grid > :global(article > span),
  .template-negative-control span,
  .template-depth span,
  .history-ledger span,
  .history-factorial span,
  .history-controls > div > span,
  .history-domain-grid > :global(article > span),
  .history-buffer-summary span,
  .history-buffer span,
  .history-depth span,
  .distance-protocol span,
  .distance-controls > div > span,
  .distance-domain-grid > :global(article > span),
  .distance-depth span,
  .distance-interpretation span {
    margin: 0;
    color: var(--blue);
    font: 700 .69rem/1.3 var(--font-mono);
    letter-spacing: .1em;
  }
  .artifact-head h3 {
    margin: .55rem 0 0;
    max-width: 14ch;
    font: 720 clamp(1.65rem, 3.1vw, 2.8rem)/.99 var(--font-display);
    letter-spacing: -.045em;
  }
  .artifact-head > p {
    align-self: end;
    margin: 0;
    color: rgba(32, 32, 39, .72);
    font-size: .94rem;
    line-height: 1.75;
  }
  .artifact-status {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgba(32, 32, 39, .16);
    background: #ece6da;
  }
  .artifact-status span {
    display: grid;
    grid-template-columns: 1.75rem auto;
    align-items: center;
    gap: .05rem .55rem;
    padding: .8rem 1rem;
    border-right: 1px solid rgba(32, 32, 39, .12);
    color: rgba(32,32,39,.65);
    font-size: .69rem;
  }
  .artifact-status span:last-child { border-right: 0; }
  .artifact-status i {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    font: 800 .7rem/1 var(--font-mono);
  }
  .artifact-status span:nth-child(1) i { background: var(--teal); }
  .artifact-status span:nth-child(2) i { background: var(--blue); }
  .artifact-status span:nth-child(3) i { background: var(--amber); }
  .artifact-status span:nth-child(4) i { background: var(--red); }
  .artifact-status b { color: var(--ink); font-size: .72rem; }
  .artifact-tabs {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--ink);
  }
  .artifact-tabs button {
    display: grid;
    grid-template-columns: 1.45rem minmax(0, 1fr);
    gap: .08rem .45rem;
    min-width: 0;
    padding: .9rem .6rem;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.13);
    background: transparent;
    color: rgba(255,255,255,.58);
    text-align: left;
    cursor: pointer;
  }
  .artifact-tabs button:last-child { border-right: 0; }
  .artifact-tabs button[aria-selected="true"] { background: var(--blue); color: white; }
  .artifact-tabs button:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
  .artifact-tabs span {
    grid-row: 1 / 3;
    color: currentColor;
    font: 700 .7rem/1 var(--font-mono);
  }
  .artifact-tabs b { min-width: 0; font-size: .79rem; overflow-wrap: anywhere; }
  .artifact-tabs small { min-width: 0; font: .58rem/1.2 var(--font-mono); overflow-wrap: anywhere; }
  .artifact-panel { padding: 1.6rem; }
  .artifact-panel[hidden] { display: none; }
  .panel-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .9fr);
    gap: 2rem;
    align-items: end;
    margin-bottom: 1.35rem;
  }
  .panel-lead h4 {
    margin: .35rem 0 0;
    font: 700 clamp(1.25rem, 2vw, 1.7rem)/1.1 var(--font-display);
    letter-spacing: -.025em;
  }
  .panel-lead p { margin: 0; color: rgba(32,32,39,.68); font-size: .83rem; line-height: 1.65; }
  .route-controls,
  .cache-controls {
    display: grid;
    grid-template-columns: .7fr 1fr 1.45fr;
    border: 1px solid rgba(32,32,39,.17);
    background: #fffdf8;
  }
  .cache-controls { grid-template-columns: repeat(4, 1fr); }
  .route-controls label,
  .cache-controls label {
    display: grid;
    gap: .45rem;
    padding: .8rem;
    border-right: 1px solid rgba(32,32,39,.13);
  }
  .route-controls label:last-child,
  .cache-controls label:last-child { border-right: 0; }
  .route-controls label span,
  .cache-controls label span {
    color: rgba(32,32,39,.58);
    font: 650 .65rem/1 var(--font-mono);
    text-transform: uppercase;
  }
  .route-controls select,
  .cache-controls select {
    min-width: 0;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(32,32,39,.28);
    background: transparent;
    color: var(--ink);
    font: 650 .78rem/1.3 var(--font-mono);
  }
  .cache-controls input { width: 100%; accent-color: var(--blue); }
  .token-context {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: .75rem;
    margin-top: .65rem;
    padding: .7rem .85rem;
    background: rgba(98,105,155,.08);
  }
  .token-context span { color: var(--blue); font: 700 .65rem/1.5 var(--font-mono); }
  .token-context p { margin: 0; font-size: .78rem; line-height: 1.5; }
  .route-stage {
    display: grid;
    grid-template-columns: .7fr auto 2fr auto .9fr;
    gap: .8rem;
    align-items: center;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.15);
    background:
      radial-gradient(circle at 35% 50%, rgba(98,105,155,.12), transparent 32%),
      #e8e2d7;
  }
  .route-stage > i { color: rgba(32,32,39,.35); font: 400 1.35rem/1 var(--font-display); }
  .token-card,
  .sum-card {
    display: grid;
    gap: .3rem;
    min-width: 0;
    padding: .9rem;
    background: var(--ink);
    color: white;
  }
  .token-card span,
  .sum-card span { color: rgba(255,255,255,.55); font: 650 .61rem/1 var(--font-mono); }
  .token-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    font: 750 1.35rem/1.2 var(--font-display);
  }
  .token-card small,
  .sum-card small { color: rgba(255,255,255,.58); font: .62rem/1.35 var(--font-mono); }
  .sum-card { background: var(--teal); }
  .sum-card strong { font: 750 1.8rem/1 var(--font-display); }
  .micro-title { display: block; margin-bottom: .45rem; }
  .chosen-experts { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; }
  .chosen-experts :global(article) {
    display: grid;
    justify-items: center;
    gap: .2rem;
    padding: .55rem .2rem;
    border: 1px solid rgba(32,32,39,.17);
    background: #fffdf8;
  }
  .chosen-experts :global(span) { color: rgba(32,32,39,.44); font: .56rem/1 var(--font-mono); }
  .chosen-experts :global(b) { font: 750 .92rem/1 var(--font-mono); }
  .chosen-experts :global(small) { color: var(--blue); font: 650 .57rem/1 var(--font-mono); }
  .heat-head {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1rem;
    align-items: end;
    margin: 1.2rem 0 .55rem;
  }
  .heat-head div { display: grid; gap: .2rem; }
  .heat-head b { font-size: .8rem; }
  .heat-head p { margin: 0; color: rgba(32,32,39,.6); font-size: .7rem; line-height: 1.5; text-align: right; }
  .expert-heatmap {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 3px;
  }
  .expert-heatmap > :global(span) {
    display: grid;
    justify-items: center;
    gap: .15rem;
    padding: .45rem .1rem;
    background: color-mix(in srgb, var(--blue) calc(var(--load) * 78%), #e6dfd3);
    color: color-mix(in srgb, white calc(var(--load) * 100%), var(--ink));
    outline: 0 solid var(--amber);
    transition: transform .15s ease;
  }
  .expert-heatmap > :global(span.selected) { outline-width: 2px; z-index: 1; transform: scale(1.05); }
  .expert-heatmap :global(b) { font: 700 .58rem/1 var(--font-mono); }
  .expert-heatmap :global(small) { font: .55rem/1 var(--font-mono); }
  .route-metrics,
  .cache-ratio,
  .load-lessons,
  .absorb-metrics,
  .artifact-identity,
  .checksum-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
  }
  .route-metrics article,
  .cache-ratio article,
  .load-lessons article,
  .absorb-metrics article,
  .artifact-identity article,
  .checksum-grid article {
    padding: .8rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .route-metrics article:last-child,
  .cache-ratio article:last-child,
  .load-lessons article:last-child,
  .absorb-metrics article:last-child,
  .artifact-identity article:last-child,
  .checksum-grid article:last-child { border-right: 0; }
  .route-metrics span,
  .cache-ratio span,
  .load-lessons span,
  .absorb-metrics span {
    display: block;
    color: var(--blue);
    font: 700 .61rem/1 var(--font-mono);
  }
  .route-metrics b,
  .cache-ratio b,
  .absorb-metrics b { display: block; margin-top: .35rem; font: 750 1.25rem/1 var(--font-display); }
  .route-metrics p,
  .cache-ratio p,
  .load-lessons p,
  .absorb-metrics p { margin: .3rem 0 0; color: rgba(32,32,39,.56); font-size: .65rem; line-height: 1.45; }
  .artifact-boundary {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 1rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-left: 4px solid var(--red);
    background: rgba(161,77,77,.08);
  }
  .artifact-boundary b { color: var(--red); font: 750 .68rem/1.4 var(--font-mono); }
  .artifact-boundary p { margin: 0; font-size: .74rem; line-height: 1.55; }
  .layer-switch { display: flex; gap: .35rem; margin-bottom: .7rem; }
  .layer-switch button {
    width: 3rem;
    padding: .55rem;
    border: 1px solid rgba(32,32,39,.22);
    background: #fffdf8;
    color: var(--ink);
    font: 700 .72rem/1 var(--font-mono);
    cursor: pointer;
  }
  .layer-switch button.active { border-color: var(--blue); background: var(--blue); color: white; }
  .aggregate-card {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 1rem;
    padding: 1rem;
    background: var(--ink);
    color: white;
  }
  .aggregate-card strong { display: block; margin-top: .4rem; font: 720 1.4rem/1 var(--font-display); }
  .aggregate-card strong,
  .aggregate-card strong b { color: white; }
  .aggregate-card p { margin: .5rem 0 0; color: rgba(255,255,255,.55); font-size: .7rem; }
  .load-dials { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
  .load-dials article { display: grid; gap: .35rem; }
  .load-dials b { font: 700 1rem/1 var(--font-mono); }
  .load-dials i,
  .jaccard-block i {
    display: block;
    height: 5px;
    background: rgba(255,255,255,.16);
    overflow: hidden;
  }
  .load-dials em,
  .jaccard-block em {
    display: block;
    width: calc(var(--fraction) * 100%);
    height: 100%;
    background: #cbc5ef;
  }
  .load-table { margin-top: .8rem; border: 1px solid rgba(32,32,39,.16); overflow-x: auto; }
  .load-table .head,
  .load-table :global([data-load-rows] > div) {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, .62fr) .85fr;
    min-width: 650px;
  }
  .load-table .head { background: #dfd8cb; }
  .load-table .head b,
  .load-table :global([data-load-rows] span),
  .load-table :global([data-load-rows] b) {
    padding: .6rem;
    border-right: 1px solid rgba(32,32,39,.1);
    border-bottom: 1px solid rgba(32,32,39,.1);
    font: 650 .66rem/1.3 var(--font-mono);
  }
  .load-table :global([data-load-rows] > div.aggregate) { background: rgba(98,105,155,.09); }
  .jaccard-block {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 1.2rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #ebe5da;
  }
  .jaccard-block h5 { margin: .35rem 0; font: 700 1rem/1.1 var(--font-display); }
  .jaccard-block p { margin: 0; color: rgba(32,32,39,.58); font-size: .68rem; line-height: 1.45; }
  .jaccard-block :global([data-load-jaccard]) { display: grid; gap: .45rem; }
  .jaccard-block :global([data-load-jaccard] article) { display: grid; grid-template-columns: 1.5fr 1fr 2.5rem; gap: .5rem; align-items: center; }
  .jaccard-block :global([data-load-jaccard] article span) { color: var(--ink); letter-spacing: 0; font-size: .59rem; }
  .jaccard-block :global([data-load-jaccard] i) {
    display: block;
    height: 5px;
    overflow: hidden;
    background: rgba(32,32,39,.12);
  }
  .jaccard-block :global([data-load-jaccard] em) {
    display: block;
    width: calc(var(--fraction) * 100%);
    height: 100%;
    background: var(--blue);
  }
  .jaccard-block :global([data-load-jaccard] article b) { font: 700 .62rem/1 var(--font-mono); text-align: right; }
  .load-lessons { grid-template-columns: repeat(3, 1fr); }
  .load-lessons b { display: block; margin-top: .35rem; font-size: .77rem; }
  .corpus-ledger {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: 1px solid rgba(32,32,39,.14);
  }
  .corpus-ledger article {
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .corpus-ledger article:last-child { border-right: 0; }
  .corpus-ledger article.exact { background: rgba(57,120,110,.1); }
  .corpus-ledger b {
    display: block;
    margin-top: .4rem;
    font: 750 1.2rem/1 var(--font-display);
  }
  .corpus-ledger p {
    margin: .3rem 0 0;
    color: rgba(32,32,39,.56);
    font-size: .63rem;
    line-height: 1.4;
  }
  .corpus-controls {
    display: grid;
    grid-template-columns: 1.2fr auto 1fr;
    gap: 1rem;
    align-items: end;
    margin-top: .8rem;
    padding: .85rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .corpus-controls > div { display: grid; gap: .45rem; }
  .corpus-controls .layer-switch { margin: 0; }
  .corpus-mode-switch,
  .corpus-cohort-switch { display: flex; }
  .corpus-mode-switch button,
  .corpus-cohort-switch button {
    padding: .58rem .75rem;
    border: 1px solid rgba(32,32,39,.22);
    background: #fffdf8;
    color: var(--ink);
    font: 650 .67rem/1 var(--font-mono);
    cursor: pointer;
  }
  .corpus-mode-switch button + button,
  .corpus-cohort-switch button + button { border-left: 0; }
  .corpus-mode-switch button[aria-pressed="true"],
  .corpus-cohort-switch button[aria-pressed="true"] {
    border-color: var(--blue);
    background: var(--blue);
    color: white;
  }
  .corpus-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: .75rem;
    border-top: 1px solid rgba(32,32,39,.12);
    color: rgba(32,32,39,.62);
    font-size: .69rem;
    line-height: 1.5;
  }
  .corpus-domain-table {
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.15);
    overflow-x: auto;
    background: #fffdf8;
  }
  .corpus-domain-table .head,
  .corpus-domain-table :global([data-corpus-domain-rows] > div) {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr);
    min-width: 680px;
  }
  .corpus-domain-table .head { background: var(--ink); color: white; }
  .corpus-domain-table .head b,
  .corpus-domain-table :global([data-corpus-domain-rows] > div > span) {
    display: grid;
    gap: .25rem;
    padding: .7rem;
    border-right: 1px solid rgba(32,32,39,.1);
    border-bottom: 1px solid rgba(32,32,39,.1);
  }
  .corpus-domain-table .head b {
    font: 650 .62rem/1.2 var(--font-mono);
    border-color: rgba(255,255,255,.12);
  }
  .corpus-domain-table :global([data-corpus-domain-rows] b) {
    font: 720 .76rem/1.2 var(--font-mono);
  }
  .corpus-domain-table :global([data-corpus-domain-rows] small) {
    color: rgba(32,32,39,.52);
    font: .61rem/1.25 var(--font-mono);
  }
  .corpus-heat-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1rem;
    align-items: end;
    margin: 1rem 0 .55rem;
  }
  .corpus-heat-head > div { display: grid; gap: .25rem; }
  .corpus-heat-head b { font-size: .78rem; }
  .corpus-heat-head p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .67rem;
    line-height: 1.45;
    text-align: right;
  }
  .corpus-heat-scroll {
    overflow-x: auto;
    border: 1px solid rgba(32,32,39,.14);
    background: #ddd6ca;
  }
  .corpus-heatmap { min-width: 880px; }
  .corpus-heatmap > :global(div) {
    display: grid;
    grid-template-columns: 6.5rem repeat(64, minmax(8px, 1fr));
    gap: 2px;
    padding: 3px;
    border-bottom: 1px solid rgba(32,32,39,.12);
  }
  .corpus-heatmap > :global(div:last-child) { border-bottom: 0; }
  .corpus-heatmap > :global(div > b) {
    position: sticky;
    left: 0;
    z-index: 1;
    display: grid;
    align-items: center;
    padding: .45rem;
    background: #eee8de;
    font: 700 .61rem/1.1 var(--font-mono);
  }
  .corpus-heatmap > :global(div > span) {
    min-height: 1.55rem;
    background: color-mix(in srgb, var(--blue) calc(var(--share) * 88%), #f2ede4);
    cursor: help;
  }
  .corpus-heatmap > :global(div > span:hover) {
    outline: 2px solid var(--amber);
    z-index: 2;
  }
  .corpus-comparison {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
    gap: 1rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .corpus-comparison h5 {
    margin: .4rem 0;
    font: 720 1rem/1.15 var(--font-display);
  }
  .corpus-comparison p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .68rem;
    line-height: 1.5;
  }
  .corpus-jsd {
    display: grid;
    grid-template-columns: 6rem repeat(4, minmax(5.5rem, 1fr));
    overflow-x: auto;
    border: 1px solid rgba(32,32,39,.13);
    background: #fffdf8;
  }
  .corpus-jsd > :global(b),
  .corpus-jsd > :global(span) {
    display: grid;
    align-content: center;
    gap: .2rem;
    min-height: 3.1rem;
    padding: .45rem;
    border-right: 1px solid rgba(32,32,39,.1);
    border-bottom: 1px solid rgba(32,32,39,.1);
    font: 650 .59rem/1.2 var(--font-mono);
  }
  .corpus-jsd > :global(b) { background: var(--ink); color: white; }
  .corpus-jsd > :global(span > b) { font-size: .72rem; }
  .corpus-jsd > :global(span > small) {
    color: rgba(32,32,39,.48);
    font-size: .52rem;
  }
  .corpus-jsd > :global(span.diagonal) {
    place-items: center;
    background: rgba(57,120,110,.08);
    color: var(--teal);
  }
  .corpus-findings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
  }
  .corpus-findings article {
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .corpus-findings article:last-child { border-right: 0; }
  .corpus-findings b {
    display: block;
    margin-top: .4rem;
    font-size: .78rem;
  }
  .corpus-findings p {
    margin: .3rem 0 0;
    color: rgba(32,32,39,.56);
    font-size: .65rem;
    line-height: 1.45;
  }
  .length-sensitivity {
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.15);
    background:
      linear-gradient(120deg, rgba(57,120,110,.11), transparent 42%),
      #e8e2d7;
  }
  .length-sensitivity-head {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 1.2rem;
    align-items: end;
  }
  .length-sensitivity h5 {
    margin: .4rem 0 0;
    font: 720 1.08rem/1.15 var(--font-display);
  }
  .length-sensitivity-head > p {
    margin: 0;
    color: rgba(32,32,39,.62);
    font-size: .69rem;
    line-height: 1.55;
  }
  .length-delta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.13);
    background: #fffdf8;
  }
  .length-delta-grid > :global(article) {
    padding: .8rem;
    border-right: 1px solid rgba(32,32,39,.11);
  }
  .length-delta-grid > :global(article:last-child) { border-right: 0; }
  .length-delta-grid > :global(article > span) {
    display: block;
    color: var(--blue);
    font: 700 .62rem/1.2 var(--font-mono);
  }
  .length-delta-grid > :global(article > b) {
    display: block;
    margin-top: .45rem;
    font: 730 .88rem/1.1 var(--font-mono);
  }
  .length-delta-grid > :global(article > strong) {
    display: inline-block;
    margin-top: .35rem;
    padding: .22rem .35rem;
    font: 750 .7rem/1 var(--font-mono);
  }
  .length-delta-grid > :global(article > strong.down) {
    background: rgba(57,120,110,.12);
    color: var(--teal);
  }
  .length-delta-grid > :global(article > strong.up) {
    background: rgba(186,118,44,.12);
    color: var(--amber);
  }
  .length-delta-grid > :global(article > p) {
    margin: .4rem 0 0;
    color: rgba(32,32,39,.54);
    font: .59rem/1.4 var(--font-mono);
  }
  .length-pair-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: .65rem;
    border: 1px solid rgba(32,32,39,.13);
  }
  .length-pair-summary article {
    padding: .8rem;
    border-right: 1px solid rgba(32,32,39,.11);
  }
  .length-pair-summary article:last-child { border-right: 0; }
  .length-pair-summary b {
    display: block;
    margin-top: .4rem;
    font-size: .77rem;
  }
  .length-pair-summary p {
    margin: .3rem 0 0;
    color: rgba(32,32,39,.55);
    font-size: .63rem;
    line-height: 1.45;
  }
  .template-ledger {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: 1px solid rgba(32,32,39,.14);
  }
  .template-ledger article {
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .template-ledger article:last-child { border-right: 0; }
  .template-ledger article.exact { background: rgba(57,120,110,.1); }
  .template-ledger b {
    display: block;
    margin-top: .4rem;
    font: 750 1.05rem/1.05 var(--font-display);
  }
  .template-ledger p {
    margin: .3rem 0 0;
    color: rgba(32,32,39,.56);
    font-size: .61rem;
    line-height: 1.4;
  }
  .template-protocol {
    display: grid;
    grid-template-columns: 1fr auto 1.3fr auto 1.15fr;
    gap: .55rem;
    align-items: stretch;
    margin-top: .8rem;
  }
  .template-protocol > i {
    align-self: center;
    color: rgba(32,32,39,.35);
    font-style: normal;
  }
  .template-protocol article {
    padding: .9rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #fffdf8;
  }
  .template-protocol article > div {
    display: flex;
    flex-wrap: wrap;
    gap: .22rem;
    margin-top: .55rem;
  }
  .template-protocol article > div > * {
    padding: .35rem .45rem;
    border: 1px solid rgba(32,32,39,.14);
    font: 650 .66rem/1 var(--font-mono);
    font-style: normal;
  }
  .template-protocol article > div > i { background: var(--ink); color: white; }
  .template-protocol article > div > em { background: rgba(98,105,155,.15); color: var(--blue); }
  .template-protocol article > div > b { background: rgba(57,120,110,.12); color: var(--teal); }
  .template-protocol article > div > small { color: rgba(32,32,39,.58); }
  .template-protocol p {
    margin: .55rem 0 0;
    color: rgba(32,32,39,.58);
    font-size: .64rem;
    line-height: 1.45;
  }
  .template-controls {
    display: grid;
    grid-template-columns: auto 1.15fr 1fr;
    gap: 1rem;
    align-items: end;
    margin-top: .8rem;
    padding: .85rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .template-controls > div { display: grid; gap: .45rem; }
  .template-controls .layer-switch { margin: 0; }
  .template-scope-switch,
  .template-mode-switch { display: flex; }
  .template-scope-switch button,
  .template-mode-switch button {
    padding: .58rem .72rem;
    border: 1px solid rgba(32,32,39,.22);
    background: #fffdf8;
    color: var(--ink);
    font: 650 .65rem/1 var(--font-mono);
    cursor: pointer;
  }
  .template-scope-switch button + button,
  .template-mode-switch button + button { border-left: 0; }
  .template-scope-switch button[aria-pressed="true"],
  .template-mode-switch button[aria-pressed="true"] {
    border-color: var(--blue);
    background: var(--blue);
    color: white;
  }
  .template-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: .75rem;
    border-top: 1px solid rgba(32,32,39,.12);
    color: rgba(32,32,39,.62);
    font-size: .69rem;
    line-height: 1.5;
  }
  .template-domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #fffdf8;
  }
  .template-domain-grid > :global(article) {
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .template-domain-grid > :global(article:last-child) { border-right: 0; }
  .template-domain-grid > :global(article > b) {
    display: block;
    margin-top: .45rem;
    font: 730 .88rem/1.1 var(--font-mono);
  }
  .template-domain-grid > :global(article > strong) {
    display: inline-block;
    margin-top: .4rem;
    padding: .24rem .38rem;
    font: 750 .7rem/1 var(--font-mono);
  }
  .template-domain-grid > :global(article > strong.down),
  .template-depth :global(span.down) {
    background: rgba(57,120,110,.13);
    color: var(--teal);
  }
  .template-domain-grid > :global(article > strong.up),
  .template-depth :global(span.up) {
    background: rgba(161,77,77,.12);
    color: var(--red);
  }
  .template-domain-grid > :global(article > strong.neutral),
  .template-depth :global(span.neutral) {
    background: rgba(186,118,44,.12);
    color: var(--amber);
  }
  .template-domain-grid > :global(article > p) {
    margin: .4rem 0 0;
    color: rgba(32,32,39,.56);
    font: .59rem/1.4 var(--font-mono);
  }
  .template-domain-grid > :global(article > small),
  .template-domain-grid > :global(article > em) {
    display: block;
    margin-top: .35rem;
    color: rgba(32,32,39,.57);
    font: .58rem/1.4 var(--font-mono);
    font-style: normal;
  }
  .template-domain-grid > :global(article > em) {
    padding-top: .35rem;
    border-top: 1px solid rgba(32,32,39,.1);
  }
  .template-negative-control {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background:
      linear-gradient(115deg, rgba(57,120,110,.11), transparent 48%),
      #e8e2d7;
  }
  .template-negative-control article {
    padding: .9rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .template-negative-control article:last-child { border-right: 0; }
  .template-negative-control b {
    display: block;
    margin-top: .4rem;
    font: 730 .88rem/1.1 var(--font-mono);
  }
  .template-negative-control p {
    margin: .4rem 0 0;
    color: rgba(32,32,39,.58);
    font-size: .64rem;
    line-height: 1.45;
  }
  .template-depth {
    display: grid;
    grid-template-columns: .55fr 1.45fr;
    gap: 1rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
  }
  .template-depth h5 {
    margin: .4rem 0;
    font: 720 1rem/1.15 var(--font-display);
  }
  .template-depth p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .66rem;
    line-height: 1.5;
  }
  .template-depth > :global([data-template-depth-map]) {
    display: grid;
    gap: .35rem;
  }
  .template-depth :global([data-template-depth-map] > div) {
    display: grid;
    grid-template-columns: 5.5rem repeat(6, 1fr);
    gap: .25rem;
  }
  .template-depth :global([data-template-depth-map] > div > b),
  .template-depth :global([data-template-depth-map] > div > span) {
    display: grid;
    align-items: center;
    min-height: 2.2rem;
    padding: .35rem;
    font: 650 .57rem/1.2 var(--font-mono);
  }
  .template-depth :global([data-template-depth-map] > div > b) {
    color: var(--blue);
  }
  .template-depth :global([data-template-depth-map] > div > span.down) {
    background: color-mix(in srgb, var(--teal) calc(var(--strength) * 55%), #eef0e9);
    color: var(--ink);
  }
  .template-depth :global([data-template-depth-map] > div > span.up) {
    background: color-mix(in srgb, var(--red) calc(var(--strength) * 48%), #f3ebe6);
    color: var(--ink);
  }
  .template-depth :global([data-template-depth-map] > div > span.neutral) {
    background: rgba(186,118,44,.1);
    color: var(--ink);
  }
  .history-ledger {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border: 1px solid rgba(32,32,39,.14);
  }
  .history-ledger article {
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .history-ledger article:last-child { border-right: 0; }
  .history-ledger article.exact { background: rgba(57,120,110,.1); }
  .history-ledger b {
    display: block;
    margin-top: .4rem;
    font: 750 1.05rem/1.05 var(--font-display);
  }
  .history-ledger p {
    margin: .3rem 0 0;
    color: rgba(32,32,39,.56);
    font-size: .61rem;
    line-height: 1.4;
  }
  .history-factorial {
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.15);
    overflow-x: auto;
    background: #fffdf8;
  }
  .history-axis,
  .history-row {
    display: grid;
    grid-template-columns: 7rem 1fr 1fr;
    min-width: 720px;
  }
  .history-axis {
    background: var(--ink);
    color: white;
  }
  .history-axis > * {
    padding: .65rem .8rem;
    border-right: 1px solid rgba(255,255,255,.13);
  }
  .history-axis > b {
    font: 650 .64rem/1.3 var(--font-mono);
  }
  .history-row > strong {
    display: grid;
    align-content: center;
    padding: .8rem;
    border-right: 1px solid rgba(32,32,39,.12);
    border-bottom: 1px solid rgba(32,32,39,.12);
    background: #e5ded2;
    color: var(--blue);
    font: 750 .8rem/1.4 var(--font-mono);
  }
  .history-row > strong small {
    color: rgba(32,32,39,.55);
    font: .56rem/1.35 var(--font-mono);
  }
  .history-row article {
    padding: .8rem;
    border-right: 1px solid rgba(32,32,39,.12);
    border-bottom: 1px solid rgba(32,32,39,.12);
  }
  .history-row article > div {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-top: .55rem;
  }
  .history-row article > div > * {
    padding: .34rem .4rem;
    border: 1px solid rgba(32,32,39,.13);
    font: 650 .56rem/1 var(--font-mono);
    font-style: normal;
    text-decoration: none;
  }
  .history-row article u { background: rgba(161,77,77,.1); color: var(--red); }
  .history-row article b { background: rgba(186,118,44,.1); color: var(--amber); }
  .history-row article i { background: rgba(57,120,110,.11); color: var(--teal); }
  .history-row article em { background: rgba(98,105,155,.13); color: var(--blue); }
  .history-row article p {
    margin: .5rem 0 0;
    color: rgba(32,32,39,.56);
    font-size: .61rem;
    line-height: 1.4;
  }
  .history-controls {
    display: grid;
    grid-template-columns: auto .9fr .9fr 1.35fr;
    gap: .8rem;
    align-items: end;
    margin-top: .8rem;
    padding: .85rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .history-controls > div { display: grid; gap: .45rem; }
  .history-controls .layer-switch { margin: 0; }
  .history-scope-switch,
  .history-mode-switch,
  .history-effect-switch { display: flex; }
  .history-scope-switch button,
  .history-mode-switch button,
  .history-effect-switch button {
    padding: .58rem .66rem;
    border: 1px solid rgba(32,32,39,.22);
    background: #fffdf8;
    color: var(--ink);
    font: 650 .61rem/1 var(--font-mono);
    cursor: pointer;
  }
  .history-scope-switch button + button,
  .history-mode-switch button + button,
  .history-effect-switch button + button { border-left: 0; }
  .history-scope-switch button[aria-pressed="true"],
  .history-mode-switch button[aria-pressed="true"],
  .history-effect-switch button[aria-pressed="true"] {
    border-color: var(--blue);
    background: var(--blue);
    color: white;
  }
  .history-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: .75rem;
    border-top: 1px solid rgba(32,32,39,.12);
    color: rgba(32,32,39,.62);
    font-size: .69rem;
    line-height: 1.5;
  }
  .history-domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #fffdf8;
  }
  .history-domain-grid > :global(article) {
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .history-domain-grid > :global(article:last-child) { border-right: 0; }
  .history-domain-grid :global(.history-cell-values) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
    margin-top: .55rem;
  }
  .history-domain-grid :global(.history-cell-values > i) {
    display: grid;
    gap: .18rem;
    padding: .4rem;
    background: #e8e2d7;
    font-style: normal;
  }
  .history-domain-grid :global(.history-cell-values small) {
    color: rgba(32,32,39,.5);
    font: 650 .53rem/1 var(--font-mono);
  }
  .history-domain-grid :global(.history-cell-values b) {
    font: 720 .7rem/1 var(--font-mono);
  }
  .history-domain-grid > :global(article > strong) {
    display: inline-block;
    margin-top: .48rem;
    padding: .26rem .38rem;
    font: 750 .65rem/1 var(--font-mono);
  }
  .history-domain-grid > :global(article > strong.down),
  .history-depth :global(span.down) {
    background: rgba(57,120,110,.13);
    color: var(--teal);
  }
  .history-domain-grid > :global(article > strong.up),
  .history-depth :global(span.up) {
    background: rgba(161,77,77,.12);
    color: var(--red);
  }
  .history-domain-grid > :global(article > strong.neutral),
  .history-depth :global(span.neutral) {
    background: rgba(186,118,44,.12);
    color: var(--amber);
  }
  .history-domain-grid > :global(article > p) {
    margin: .4rem 0 0;
    color: rgba(32,32,39,.56);
    font: .58rem/1.4 var(--font-mono);
  }
  .history-domain-grid > :global(article > small),
  .history-domain-grid > :global(article > em) {
    display: block;
    margin-top: .35rem;
    color: rgba(32,32,39,.57);
    font: .57rem/1.4 var(--font-mono);
    font-style: normal;
  }
  .history-domain-grid > :global(article > em) {
    padding-top: .35rem;
    border-top: 1px solid rgba(32,32,39,.1);
  }
  .history-buffer-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background:
      linear-gradient(115deg, rgba(57,120,110,.11), transparent 48%),
      #e8e2d7;
  }
  .history-buffer-summary article {
    padding: .9rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .history-buffer-summary article:last-child { border-right: 0; }
  .history-buffer-summary b {
    display: block;
    margin-top: .4rem;
    font: 750 .94rem/1.05 var(--font-display);
  }
  .history-buffer-summary p {
    margin: .4rem 0 0;
    color: rgba(32,32,39,.58);
    font-size: .62rem;
    line-height: 1.45;
  }
  .history-buffer,
  .history-depth {
    display: grid;
    grid-template-columns: .52fr 1.48fr;
    gap: 1rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
  }
  .history-buffer h5,
  .history-depth h5 {
    margin: .4rem 0;
    font: 720 1rem/1.15 var(--font-display);
  }
  .history-buffer p,
  .history-depth p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .66rem;
    line-height: 1.5;
  }
  .history-buffer > :global([data-history-buffer-grid]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
  }
  .history-buffer :global([data-history-buffer-grid] article) {
    padding: .65rem;
    background: #fffdf8;
    border: 1px solid rgba(32,32,39,.12);
  }
  .history-buffer :global([data-history-buffer-grid] article > *) {
    display: block;
  }
  .history-buffer :global([data-history-buffer-grid] b) {
    margin-top: .35rem;
    font: 720 .74rem/1.2 var(--font-mono);
  }
  .history-buffer :global([data-history-buffer-grid] strong) {
    margin-top: .3rem;
    color: var(--teal);
    font: 750 .68rem/1 var(--font-mono);
  }
  .history-buffer :global([data-history-buffer-grid] p) {
    margin-top: .35rem;
    font: .55rem/1.4 var(--font-mono);
  }
  .history-depth > :global([data-history-depth-map]) {
    display: grid;
    gap: .35rem;
  }
  .history-depth :global([data-history-depth-map] > div) {
    display: grid;
    grid-template-columns: 5.5rem repeat(6, 1fr);
    gap: .25rem;
  }
  .history-depth :global([data-history-depth-map] > div > b),
  .history-depth :global([data-history-depth-map] > div > span) {
    display: grid;
    align-items: center;
    min-height: 2.2rem;
    padding: .35rem;
    font: 650 .57rem/1.2 var(--font-mono);
  }
  .history-depth :global([data-history-depth-map] > div > b) {
    color: var(--blue);
  }
  .history-depth :global([data-history-depth-map] > div > span.down) {
    background: color-mix(in srgb, var(--teal) calc(var(--strength) * 55%), #eef0e9);
    color: var(--ink);
  }
  .history-depth :global([data-history-depth-map] > div > span.up) {
    background: color-mix(in srgb, var(--red) calc(var(--strength) * 48%), #f3ebe6);
    color: var(--ink);
  }
  .history-depth :global([data-history-depth-map] > div > span.neutral) {
    background: rgba(186,118,44,.1);
    color: var(--ink);
  }
  .distance-protocol {
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.15);
    overflow-x: auto;
    background: #fffdf8;
  }
  .distance-row {
    display: grid;
    grid-template-columns: 7rem repeat(3, minmax(13rem, 1fr));
    min-width: 890px;
  }
  .distance-row.head {
    background: var(--ink);
    color: white;
  }
  .distance-row.head > * {
    padding: .65rem .8rem;
    border-right: 1px solid rgba(255,255,255,.13);
  }
  .distance-row.head b { font: 650 .62rem/1.3 var(--font-mono); }
  .distance-row > strong {
    display: grid;
    align-content: center;
    padding: .8rem;
    border-right: 1px solid rgba(32,32,39,.12);
    border-bottom: 1px solid rgba(32,32,39,.12);
    background: #e5ded2;
    color: var(--blue);
    font: 750 .8rem/1.4 var(--font-mono);
  }
  .distance-row > strong small {
    color: rgba(32,32,39,.55);
    font: .56rem/1.35 var(--font-mono);
  }
  .distance-row article {
    padding: .8rem;
    border-right: 1px solid rgba(32,32,39,.12);
    border-bottom: 1px solid rgba(32,32,39,.12);
  }
  .distance-row article > div {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    margin-top: .55rem;
  }
  .distance-row article > div > * {
    padding: .34rem .4rem;
    border: 1px solid rgba(32,32,39,.13);
    font: 650 .53rem/1 var(--font-mono);
    font-style: normal;
    text-decoration: none;
  }
  .distance-row article mark { background: rgba(161,77,77,.1); color: var(--red); }
  .distance-row article b { background: rgba(186,118,44,.1); color: var(--amber); }
  .distance-row article u { background: rgba(98,105,155,.12); color: var(--blue); }
  .distance-row article i { background: rgba(57,120,110,.11); color: var(--teal); }
  .distance-row article em { background: rgba(98,105,155,.13); color: var(--blue); }
  .distance-row article p {
    margin: .5rem 0 0;
    color: rgba(32,32,39,.56);
    font-size: .61rem;
    line-height: 1.4;
  }
  .distance-controls {
    display: grid;
    grid-template-columns: auto .9fr .9fr 1.45fr;
    gap: .8rem;
    align-items: end;
    margin-top: .8rem;
    padding: .85rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .distance-controls > div { display: grid; gap: .45rem; }
  .distance-controls .layer-switch { margin: 0; }
  .distance-scope-switch,
  .distance-mode-switch,
  .distance-contrast-switch { display: flex; }
  .distance-scope-switch button,
  .distance-mode-switch button,
  .distance-contrast-switch button {
    padding: .58rem .66rem;
    border: 1px solid rgba(32,32,39,.22);
    background: #fffdf8;
    color: var(--ink);
    font: 650 .6rem/1 var(--font-mono);
    cursor: pointer;
  }
  .distance-scope-switch button + button,
  .distance-mode-switch button + button,
  .distance-contrast-switch button + button { border-left: 0; }
  .distance-scope-switch button[aria-pressed="true"],
  .distance-mode-switch button[aria-pressed="true"],
  .distance-contrast-switch button[aria-pressed="true"] {
    border-color: var(--blue);
    background: var(--blue);
    color: white;
  }
  .distance-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: .75rem;
    border-top: 1px solid rgba(32,32,39,.12);
    color: rgba(32,32,39,.62);
    font-size: .69rem;
    line-height: 1.5;
  }
  .distance-domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #fffdf8;
  }
  .distance-domain-grid > :global(article) {
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .distance-domain-grid > :global(article:last-child) { border-right: 0; }
  .distance-domain-grid :global(.distance-tv-ladder) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .22rem;
    margin-top: .55rem;
  }
  .distance-domain-grid :global(.distance-tv-ladder > i) {
    display: grid;
    gap: .18rem;
    padding: .38rem;
    background: #e8e2d7;
    font-style: normal;
  }
  .distance-domain-grid :global(.distance-tv-ladder small) {
    color: rgba(32,32,39,.5);
    font: 650 .49rem/1 var(--font-mono);
  }
  .distance-domain-grid :global(.distance-tv-ladder b) {
    font: 720 .66rem/1 var(--font-mono);
  }
  .distance-domain-grid > :global(article > strong) {
    display: inline-block;
    margin-top: .48rem;
    padding: .26rem .38rem;
    font: 750 .62rem/1 var(--font-mono);
  }
  .distance-domain-grid > :global(article > strong.down),
  .distance-depth :global(span.down) {
    background: rgba(57,120,110,.13);
    color: var(--teal);
  }
  .distance-domain-grid > :global(article > strong.up),
  .distance-depth :global(span.up) {
    background: rgba(161,77,77,.12);
    color: var(--red);
  }
  .distance-domain-grid > :global(article > strong.neutral),
  .distance-depth :global(span.neutral) {
    background: rgba(186,118,44,.12);
    color: var(--amber);
  }
  .distance-domain-grid > :global(article > p),
  .distance-domain-grid > :global(article > small),
  .distance-domain-grid > :global(article > em),
  .distance-domain-grid > :global(article > u) {
    display: block;
    margin: .38rem 0 0;
    color: rgba(32,32,39,.57);
    font: .55rem/1.4 var(--font-mono);
    font-style: normal;
    text-decoration: none;
  }
  .distance-domain-grid > :global(article > em),
  .distance-domain-grid > :global(article > u) {
    padding-top: .35rem;
    border-top: 1px solid rgba(32,32,39,.1);
  }
  .distance-depth {
    display: grid;
    grid-template-columns: .52fr 1.48fr;
    gap: 1rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
  }
  .distance-depth h5 {
    margin: .4rem 0;
    font: 720 1rem/1.15 var(--font-display);
  }
  .distance-depth p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .66rem;
    line-height: 1.5;
  }
  .distance-depth > :global([data-distance-depth-map]) {
    display: grid;
    gap: .35rem;
  }
  .distance-depth :global([data-distance-depth-map] > div) {
    display: grid;
    grid-template-columns: 5.5rem repeat(6, 1fr);
    gap: .25rem;
  }
  .distance-depth :global([data-distance-depth-map] > div > b),
  .distance-depth :global([data-distance-depth-map] > div > span) {
    display: grid;
    align-items: center;
    min-height: 2.2rem;
    padding: .35rem;
    font: 650 .55rem/1.2 var(--font-mono);
  }
  .distance-depth :global([data-distance-depth-map] > div > b) {
    color: var(--blue);
  }
  .distance-depth :global([data-distance-depth-map] > div > span.down) {
    background: color-mix(in srgb, var(--teal) calc(var(--strength) * 55%), #eef0e9);
    color: var(--ink);
  }
  .distance-depth :global([data-distance-depth-map] > div > span.up) {
    background: color-mix(in srgb, var(--red) calc(var(--strength) * 48%), #f3ebe6);
    color: var(--ink);
  }
  .distance-depth :global([data-distance-depth-map] > div > span.neutral) {
    background: rgba(186,118,44,.1);
    color: var(--ink);
  }
  .distance-interpretation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .distance-interpretation article {
    padding: .9rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .distance-interpretation article:last-child { border-right: 0; }
  .distance-interpretation b {
    display: block;
    margin-top: .4rem;
    font: 730 .78rem/1.2 var(--font-display);
  }
  .distance-interpretation p {
    margin: .4rem 0 0;
    color: rgba(32,32,39,.58);
    font-size: .62rem;
    line-height: 1.45;
  }
  .boundary-protocol {
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.15);
    background:
      linear-gradient(115deg, rgba(98,105,155,.09), transparent 50%),
      #fffdf8;
  }
  .boundary-track {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .8rem;
    background: var(--ink);
    color: white;
  }
  .boundary-track > * {
    padding: .36rem .48rem;
    font: 650 .61rem/1 var(--font-mono);
    font-style: normal;
  }
  .boundary-track span {
    color: rgba(255,255,255,.48);
    font-size: .52rem;
  }
  .boundary-track b { background: rgba(255,255,255,.1); }
  .boundary-track i { color: #d5d8ef; }
  .boundary-track mark {
    min-width: 3.6rem;
    background: var(--amber);
    color: white;
    text-align: center;
  }
  .boundary-token-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .55rem;
    border: 1px solid rgba(32,32,39,.12);
  }
  .boundary-token-grid article {
    display: grid;
    gap: .34rem;
    padding: .75rem;
    border-right: 1px solid rgba(32,32,39,.12);
    background: #f3eee5;
  }
  .boundary-token-grid article:last-child { border-right: 0; }
  .boundary-token-grid article.official {
    background: rgba(57,120,110,.11);
  }
  .boundary-token-grid span {
    color: var(--blue);
    font: 700 .52rem/1 var(--font-mono);
  }
  .boundary-token-grid b {
    font: 760 1.05rem/1 var(--font-display);
  }
  .boundary-token-grid code {
    width: max-content;
    padding: .22rem .3rem;
    background: rgba(32,32,39,.08);
    font-size: .57rem;
  }
  .boundary-token-grid p,
  .boundary-protocol > p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .61rem;
    line-height: 1.45;
  }
  .boundary-protocol > p {
    margin-top: .7rem;
    text-align: center;
  }
  .boundary-controls {
    display: grid;
    grid-template-columns: auto .9fr .9fr 1.55fr;
    gap: .8rem;
    align-items: end;
    margin-top: .8rem;
    padding: .85rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .boundary-controls > div { display: grid; gap: .45rem; }
  .boundary-controls .layer-switch { margin: 0; }
  .boundary-scope-switch,
  .boundary-mode-switch,
  .boundary-contrast-switch { display: flex; }
  .boundary-scope-switch button,
  .boundary-mode-switch button,
  .boundary-contrast-switch button {
    padding: .58rem .66rem;
    border: 1px solid rgba(32,32,39,.22);
    background: #fffdf8;
    color: var(--ink);
    font: 650 .6rem/1 var(--font-mono);
    cursor: pointer;
  }
  .boundary-scope-switch button + button,
  .boundary-mode-switch button + button,
  .boundary-contrast-switch button + button { border-left: 0; }
  .boundary-scope-switch button[aria-pressed="true"],
  .boundary-mode-switch button[aria-pressed="true"],
  .boundary-contrast-switch button[aria-pressed="true"] {
    border-color: var(--blue);
    background: var(--blue);
    color: white;
  }
  .boundary-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: .75rem;
    border-top: 1px solid rgba(32,32,39,.12);
    color: rgba(32,32,39,.62);
    font-size: .69rem;
    line-height: 1.5;
  }
  .boundary-domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #fffdf8;
  }
  .boundary-domain-grid > :global(article) {
    min-width: 0;
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .boundary-domain-grid > :global(article:last-child) { border-right: 0; }
  .boundary-domain-grid :global(.boundary-tv-ladder) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .18rem;
    margin-top: .55rem;
  }
  .boundary-domain-grid :global(.boundary-tv-ladder > b) {
    display: grid;
    gap: .18rem;
    min-width: 0;
    padding: .34rem;
    background: #e8e2d7;
  }
  .boundary-domain-grid :global(.boundary-tv-ladder > b.official) {
    background: rgba(57,120,110,.12);
  }
  .boundary-domain-grid :global(.boundary-tv-ladder > b.selected) {
    outline: 1px solid var(--blue);
    outline-offset: -1px;
  }
  .boundary-domain-grid :global(.boundary-tv-ladder small) {
    color: rgba(32,32,39,.5);
    font: 650 .46rem/1 var(--font-mono);
  }
  .boundary-domain-grid :global(.boundary-tv-ladder strong) {
    white-space: nowrap;
    font: 720 .58rem/1 var(--font-mono);
    letter-spacing: -.025em;
  }
  .boundary-domain-grid > :global(article > strong) {
    display: inline-block;
    margin-top: .48rem;
    padding: .26rem .38rem;
    font: 750 .62rem/1 var(--font-mono);
  }
  .boundary-domain-grid > :global(article > strong.down),
  .boundary-depth :global(span.down) {
    background: rgba(57,120,110,.13);
    color: var(--teal);
  }
  .boundary-domain-grid > :global(article > strong.up),
  .boundary-depth :global(span.up) {
    background: rgba(161,77,77,.12);
    color: var(--red);
  }
  .boundary-domain-grid > :global(article > strong.neutral),
  .boundary-depth :global(span.neutral) {
    background: rgba(186,118,44,.12);
    color: var(--amber);
  }
  .boundary-domain-grid > :global(article > p),
  .boundary-domain-grid > :global(article > small),
  .boundary-domain-grid > :global(article > em),
  .boundary-domain-grid > :global(article > u),
  .boundary-domain-grid > :global(article > i) {
    display: block;
    margin: .38rem 0 0;
    color: rgba(32,32,39,.57);
    overflow-wrap: anywhere;
    font: .54rem/1.4 var(--font-mono);
    font-style: normal;
    text-decoration: none;
  }
  .boundary-domain-grid > :global(article > em),
  .boundary-domain-grid > :global(article > u),
  .boundary-domain-grid > :global(article > i) {
    padding-top: .34rem;
    border-top: 1px solid rgba(32,32,39,.1);
  }
  .boundary-depth {
    display: grid;
    grid-template-columns: .52fr 1.48fr;
    gap: 1rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
  }
  .boundary-depth h5 {
    margin: .4rem 0;
    font: 720 1rem/1.15 var(--font-display);
  }
  .boundary-depth p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .66rem;
    line-height: 1.5;
  }
  .boundary-depth > :global([data-boundary-depth-map]) {
    display: grid;
    gap: .35rem;
  }
  .boundary-depth :global([data-boundary-depth-map] > div) {
    display: grid;
    grid-template-columns: 5.5rem repeat(6, 1fr);
    gap: .25rem;
  }
  .boundary-depth :global([data-boundary-depth-map] > div > b),
  .boundary-depth :global([data-boundary-depth-map] > div > span) {
    display: grid;
    align-items: center;
    min-height: 2.2rem;
    padding: .35rem;
    font: 650 .55rem/1.2 var(--font-mono);
  }
  .boundary-depth :global([data-boundary-depth-map] > div > b) {
    color: var(--blue);
  }
  .boundary-depth :global([data-boundary-depth-map] > div > span.down) {
    background: color-mix(in srgb, var(--teal) calc(var(--strength) * 55%), #eef0e9);
    color: var(--ink);
  }
  .boundary-depth :global([data-boundary-depth-map] > div > span.up) {
    background: color-mix(in srgb, var(--red) calc(var(--strength) * 48%), #f3ebe6);
    color: var(--ink);
  }
  .boundary-depth :global([data-boundary-depth-map] > div > span.neutral) {
    background: rgba(186,118,44,.1);
    color: var(--ink);
  }
  .boundary-interpretation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .boundary-interpretation article {
    padding: .9rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .boundary-interpretation article:last-child { border-right: 0; }
  .boundary-interpretation b {
    display: block;
    margin-top: .4rem;
    font: 730 .78rem/1.2 var(--font-display);
  }
  .boundary-interpretation p {
    margin: .4rem 0 0;
    color: rgba(32,32,39,.58);
    font-size: .62rem;
    line-height: 1.45;
  }
  .role-protocol {
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.15);
    background:
      linear-gradient(115deg, rgba(57,120,110,.08), transparent 52%),
      #fffdf8;
  }
  .role-track {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .8rem;
    background: var(--ink);
    color: white;
  }
  .role-track > * {
    padding: .36rem .48rem;
    font: 650 .61rem/1 var(--font-mono);
    font-style: normal;
  }
  .role-track span {
    color: rgba(255,255,255,.48);
    font-size: .52rem;
  }
  .role-track b { background: rgba(255,255,255,.1); }
  .role-track i { color: #d5d8ef; }
  .role-track mark {
    min-width: 4.6rem;
    background: var(--amber);
    color: white;
    text-align: center;
  }
  .role-level-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .55rem;
    border: 1px solid rgba(32,32,39,.12);
  }
  .role-level-grid article {
    display: grid;
    gap: .34rem;
    padding: .75rem;
    border-right: 1px solid rgba(32,32,39,.12);
    background: #f3eee5;
  }
  .role-level-grid article:last-child { border-right: 0; }
  .role-level-grid article.official { background: rgba(57,120,110,.11); }
  .role-level-grid article.negative { background: rgba(98,105,155,.11); }
  .role-level-grid span {
    color: var(--blue);
    font: 700 .52rem/1 var(--font-mono);
  }
  .role-level-grid b { font: 760 .84rem/1.1 var(--font-display); }
  .role-level-grid code {
    width: max-content;
    padding: .22rem .3rem;
    background: rgba(32,32,39,.08);
    font-size: .57rem;
  }
  .role-level-grid p,
  .role-protocol > p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .61rem;
    line-height: 1.45;
  }
  .role-protocol > p {
    margin-top: .7rem;
    text-align: center;
  }
  .role-controls {
    display: grid;
    grid-template-columns: auto .9fr .9fr 1.55fr;
    gap: .8rem;
    align-items: end;
    margin-top: .8rem;
    padding: .85rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .role-controls > div { display: grid; gap: .45rem; }
  .role-controls .layer-switch { margin: 0; }
  .role-scope-switch,
  .role-mode-switch,
  .role-contrast-switch { display: flex; }
  .role-scope-switch button,
  .role-mode-switch button,
  .role-contrast-switch button {
    padding: .58rem .66rem;
    border: 1px solid rgba(32,32,39,.22);
    background: #fffdf8;
    color: var(--ink);
    font: 650 .6rem/1 var(--font-mono);
    cursor: pointer;
  }
  .role-scope-switch button + button,
  .role-mode-switch button + button,
  .role-contrast-switch button + button { border-left: 0; }
  .role-scope-switch button[aria-pressed="true"],
  .role-mode-switch button[aria-pressed="true"],
  .role-contrast-switch button[aria-pressed="true"] {
    border-color: var(--blue);
    background: var(--blue);
    color: white;
  }
  .role-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: .75rem;
    border-top: 1px solid rgba(32,32,39,.12);
    color: rgba(32,32,39,.62);
    font-size: .69rem;
    line-height: 1.5;
  }
  .role-domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #fffdf8;
  }
  .role-domain-grid > :global(article) {
    min-width: 0;
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .role-domain-grid > :global(article:last-child) { border-right: 0; }
  .role-domain-grid :global(.role-tv-ladder) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .18rem;
    margin-top: .55rem;
  }
  .role-domain-grid :global(.role-tv-ladder > b) {
    display: grid;
    gap: .18rem;
    min-width: 0;
    padding: .34rem;
    background: #e8e2d7;
  }
  .role-domain-grid :global(.role-tv-ladder > b.official) {
    background: rgba(57,120,110,.12);
  }
  .role-domain-grid :global(.role-tv-ladder > b.causal) {
    background: rgba(98,105,155,.1);
  }
  .role-domain-grid :global(.role-tv-ladder > b.selected) {
    outline: 1px solid var(--blue);
    outline-offset: -1px;
  }
  .role-domain-grid :global(.role-tv-ladder small) {
    color: rgba(32,32,39,.5);
    font: 650 .42rem/1 var(--font-mono);
  }
  .role-domain-grid :global(.role-tv-ladder strong) {
    white-space: nowrap;
    font: 720 .58rem/1 var(--font-mono);
    letter-spacing: -.025em;
  }
  .role-domain-grid > :global(article > strong) {
    display: inline-block;
    margin-top: .48rem;
    padding: .26rem .38rem;
    font: 750 .58rem/1.15 var(--font-mono);
  }
  .role-domain-grid > :global(article > strong.down),
  .role-depth :global(span.down) {
    background: rgba(57,120,110,.13);
    color: var(--teal);
  }
  .role-domain-grid > :global(article > strong.up),
  .role-depth :global(span.up) {
    background: rgba(161,77,77,.12);
    color: var(--red);
  }
  .role-domain-grid > :global(article > strong.neutral),
  .role-depth :global(span.neutral) {
    background: rgba(186,118,44,.12);
    color: var(--amber);
  }
  .role-domain-grid > :global(article > p),
  .role-domain-grid > :global(article > small),
  .role-domain-grid > :global(article > em),
  .role-domain-grid > :global(article > u),
  .role-domain-grid > :global(article > i) {
    display: block;
    margin: .38rem 0 0;
    color: rgba(32,32,39,.57);
    overflow-wrap: anywhere;
    font: .54rem/1.4 var(--font-mono);
    font-style: normal;
    text-decoration: none;
  }
  .role-domain-grid > :global(article > em),
  .role-domain-grid > :global(article > u),
  .role-domain-grid > :global(article > i) {
    padding-top: .34rem;
    border-top: 1px solid rgba(32,32,39,.1);
  }
  .role-depth {
    display: grid;
    grid-template-columns: .52fr 1.48fr;
    gap: 1rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
  }
  .role-depth h5 {
    margin: .4rem 0;
    font: 720 1rem/1.15 var(--font-display);
  }
  .role-depth p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .66rem;
    line-height: 1.5;
  }
  .role-depth > :global([data-role-depth-map]) {
    display: grid;
    gap: .35rem;
  }
  .role-depth :global([data-role-depth-map] > div) {
    display: grid;
    grid-template-columns: 5.5rem repeat(6, 1fr);
    gap: .25rem;
  }
  .role-depth :global([data-role-depth-map] > div > b),
  .role-depth :global([data-role-depth-map] > div > span) {
    display: grid;
    align-items: center;
    min-height: 2.2rem;
    padding: .35rem;
    font: 650 .55rem/1.2 var(--font-mono);
  }
  .role-depth :global([data-role-depth-map] > div > b) { color: var(--blue); }
  .role-depth :global([data-role-depth-map] > div > span.down) {
    background: color-mix(in srgb, var(--teal) calc(var(--strength) * 55%), #eef0e9);
    color: var(--ink);
  }
  .role-depth :global([data-role-depth-map] > div > span.up) {
    background: color-mix(in srgb, var(--red) calc(var(--strength) * 48%), #f3ebe6);
    color: var(--ink);
  }
  .role-depth :global([data-role-depth-map] > div > span.neutral) {
    background: rgba(186,118,44,.1);
    color: var(--ink);
  }
  .role-causal-ledger {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .role-causal-ledger article {
    padding: .9rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .role-causal-ledger article:last-child { border-right: 0; }
  .role-causal-ledger article.exact { background: rgba(57,120,110,.11); }
  .role-causal-ledger b {
    display: block;
    margin-top: .4rem;
    font: 730 .78rem/1.2 var(--font-display);
  }
  .role-causal-ledger p {
    margin: .4rem 0 0;
    color: rgba(32,32,39,.58);
    font-size: .62rem;
    line-height: 1.45;
  }
  .role-batch-audit {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: .8rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #fffdf8;
  }
  .role-batch-audit h5 {
    margin: .45rem 0;
    font: 720 .9rem/1.15 var(--font-display);
  }
  .role-batch-audit p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .62rem;
    line-height: 1.5;
  }
  .role-batch-audit > div:last-child {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .3rem;
  }
  .role-batch-audit > div:last-child span {
    display: grid;
    gap: .2rem;
    padding: .55rem;
    background: #e8e2d7;
  }
  .role-batch-audit > div:last-child span.exact {
    background: rgba(57,120,110,.14);
  }
  .role-batch-audit i {
    font: normal .55rem/1 var(--font-mono);
  }
  .special-inventory,
  .role-block-protocol {
    display: grid;
    grid-template-columns: .64fr 1.36fr;
    gap: 1rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #fffdf8;
  }
  .special-inventory > div:first-child,
  .role-block-protocol > div:first-child {
    align-self: center;
  }
  .special-inventory h5,
  .role-block-protocol h5 {
    margin: .45rem 0;
    font: 720 1rem/1.15 var(--font-display);
  }
  .special-inventory p,
  .role-block-protocol p {
    margin: 0;
    color: rgba(32,32,39,.6);
    font-size: .66rem;
    line-height: 1.55;
  }
  .special-inventory span,
  .special-controls > div > span,
  .special-depth span,
  .special-scope-ledger span,
  .role-block-protocol span,
  .role-block-controls > div > span,
  .role-block-depth span,
  .role-block-direct span {
    color: var(--blue);
    font: 700 .67rem/1.3 var(--font-mono);
    letter-spacing: .08em;
  }
  .special-token-grid,
  .role-block-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(32,32,39,.14);
  }
  .special-token-grid article,
  .role-block-matrix article {
    min-width: 0;
    padding: .8rem;
    border-right: 1px solid rgba(32,32,39,.12);
    background: #eee8dc;
  }
  .special-token-grid article:last-child,
  .role-block-matrix article:last-child { border-right: 0; }
  .special-token-grid article.official,
  .role-block-matrix article.official { background: rgba(57,120,110,.13); }
  .special-token-grid article.special { background: rgba(98,105,155,.12); }
  .special-token-grid b,
  .role-block-matrix b {
    display: block;
    margin-top: .35rem;
    font: 760 .9rem/1.1 var(--font-display);
  }
  .special-token-grid code,
  .role-block-matrix code {
    display: block;
    margin: .35rem 0;
    color: var(--red);
    font-size: .61rem;
    overflow-wrap: anywhere;
  }
  .special-token-grid p,
  .role-block-matrix p { font-size: .58rem; }
  .special-controls,
  .role-block-controls {
    display: grid;
    grid-template-columns: .9fr .72fr .72fr 1.35fr;
    gap: .8rem;
    margin-top: .8rem;
    padding: .9rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .special-controls > div,
  .role-block-controls > div { display: grid; gap: .45rem; }
  .special-controls .layer-switch,
  .role-block-controls .layer-switch { margin: 0; }
  .special-scope-switch,
  .special-mode-switch,
  .special-contrast-switch,
  .role-block-scope-switch,
  .role-block-mode-switch,
  .role-block-effect-switch { display: flex; }
  .special-scope-switch button,
  .special-mode-switch button,
  .special-contrast-switch button,
  .role-block-scope-switch button,
  .role-block-mode-switch button,
  .role-block-effect-switch button {
    flex: 1;
    min-width: 0;
    padding: .45rem .35rem;
    border: 1px solid rgba(32,32,39,.22);
    background: transparent;
    color: var(--ink);
    font: 650 .55rem/1 var(--font-mono);
    cursor: pointer;
  }
  .special-scope-switch button + button,
  .special-mode-switch button + button,
  .special-contrast-switch button + button,
  .role-block-scope-switch button + button,
  .role-block-mode-switch button + button,
  .role-block-effect-switch button + button { border-left: 0; }
  .special-scope-switch button[aria-pressed="true"],
  .special-mode-switch button[aria-pressed="true"],
  .special-contrast-switch button[aria-pressed="true"],
  .role-block-scope-switch button[aria-pressed="true"],
  .role-block-mode-switch button[aria-pressed="true"],
  .role-block-effect-switch button[aria-pressed="true"] {
    background: var(--blue);
    color: white;
  }
  .special-controls > p,
  .role-block-controls > p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: .7rem;
    border-top: 1px solid rgba(32,32,39,.12);
    color: rgba(32,32,39,.62);
    font-size: .64rem;
    line-height: 1.45;
  }
  .special-domain-grid,
  .role-block-domain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #fffdf8;
  }
  .special-domain-grid > :global(article),
  .role-block-domain-grid > :global(article) {
    min-width: 0;
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .special-domain-grid > :global(article:last-child),
  .role-block-domain-grid > :global(article:last-child) { border-right: 0; }
  .special-domain-grid :global(.special-tv-ladder),
  .role-block-domain-grid :global(.role-block-tv-ladder) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .22rem;
    margin: .6rem 0;
  }
  .special-domain-grid :global(.special-tv-ladder > b),
  .role-block-domain-grid :global(.role-block-tv-ladder > b) {
    display: grid;
    gap: .2rem;
    min-width: 0;
    padding: .4rem .2rem;
    background: #e8e2d7;
    text-align: center;
  }
  .special-domain-grid :global(.special-tv-ladder > b.official),
  .role-block-domain-grid :global(.role-block-tv-ladder > b.official) {
    box-shadow: inset 0 -3px var(--teal);
  }
  .special-domain-grid :global(.special-tv-ladder > b.selected) {
    background: rgba(98,105,155,.16);
  }
  .special-domain-grid :global(.special-tv-ladder small),
  .role-block-domain-grid :global(.role-block-tv-ladder small) {
    color: rgba(32,32,39,.55);
    font: 650 .48rem/1 var(--font-mono);
  }
  .special-domain-grid :global(.special-tv-ladder strong),
  .role-block-domain-grid :global(.role-block-tv-ladder strong) {
    font: 700 .68rem/1 var(--font-mono);
  }
  .special-domain-grid > :global(article > strong),
  .role-block-domain-grid > :global(article > strong) {
    display: block;
    padding: .43rem;
    font: 730 .68rem/1.2 var(--font-mono);
  }
  .special-domain-grid > :global(article > strong.down),
  .special-depth :global(span.down),
  .role-block-domain-grid > :global(article > strong.down),
  .role-block-depth :global(span.down) {
    background: rgba(57,120,110,.13);
    color: var(--teal);
  }
  .special-domain-grid > :global(article > strong.up),
  .special-depth :global(span.up),
  .role-block-domain-grid > :global(article > strong.up),
  .role-block-depth :global(span.up) {
    background: rgba(161,77,77,.12);
    color: var(--red);
  }
  .special-domain-grid > :global(article > strong.neutral),
  .special-depth :global(span.neutral),
  .role-block-domain-grid > :global(article > strong.neutral),
  .role-block-depth :global(span.neutral) {
    background: rgba(186,118,44,.12);
    color: var(--amber);
  }
  .special-domain-grid > :global(article > p),
  .special-domain-grid > :global(article > small),
  .special-domain-grid > :global(article > em),
  .special-domain-grid > :global(article > i),
  .role-block-domain-grid > :global(article > p),
  .role-block-domain-grid > :global(article > small),
  .role-block-domain-grid > :global(article > em),
  .role-block-domain-grid > :global(article > u),
  .role-block-domain-grid > :global(article > i) {
    display: block;
    margin: .36rem 0 0;
    color: rgba(32,32,39,.57);
    overflow-wrap: anywhere;
    font: .53rem/1.42 var(--font-mono);
    font-style: normal;
    text-decoration: none;
  }
  .special-domain-grid > :global(article > em),
  .special-domain-grid > :global(article > i),
  .role-block-domain-grid > :global(article > em),
  .role-block-domain-grid > :global(article > u),
  .role-block-domain-grid > :global(article > i) {
    padding-top: .34rem;
    border-top: 1px solid rgba(32,32,39,.1);
  }
  .special-depth,
  .role-block-depth {
    display: grid;
    grid-template-columns: .52fr 1.48fr;
    gap: 1rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.14);
  }
  .special-depth h5,
  .role-block-depth h5 {
    margin: .4rem 0;
    font: 720 1rem/1.15 var(--font-display);
  }
  .special-depth p,
  .role-block-depth p {
    margin: 0;
    color: rgba(32,32,39,.58);
    font-size: .66rem;
    line-height: 1.5;
  }
  .special-depth > :global([data-special-depth-map]),
  .role-block-depth > :global([data-role-block-depth-map]) {
    display: grid;
    gap: .35rem;
  }
  .special-depth :global([data-special-depth-map] > div),
  .role-block-depth :global([data-role-block-depth-map] > div) {
    display: grid;
    grid-template-columns: 5.5rem repeat(6, 1fr);
    gap: .25rem;
  }
  .special-depth :global([data-special-depth-map] > div > b),
  .special-depth :global([data-special-depth-map] > div > span),
  .role-block-depth :global([data-role-block-depth-map] > div > b),
  .role-block-depth :global([data-role-block-depth-map] > div > span) {
    display: grid;
    align-items: center;
    min-height: 2.2rem;
    padding: .35rem;
    font: 650 .55rem/1.2 var(--font-mono);
  }
  .special-depth :global([data-special-depth-map] > div > b),
  .role-block-depth :global([data-role-block-depth-map] > div > b) { color: var(--blue); }
  .special-depth :global([data-special-depth-map] > div > span.down),
  .role-block-depth :global([data-role-block-depth-map] > div > span.down) {
    background: color-mix(in srgb, var(--teal) calc(var(--strength) * 55%), #eef0e9);
    color: var(--ink);
  }
  .special-depth :global([data-special-depth-map] > div > span.up),
  .role-block-depth :global([data-role-block-depth-map] > div > span.up) {
    background: color-mix(in srgb, var(--red) calc(var(--strength) * 48%), #f3ebe6);
    color: var(--ink);
  }
  .special-depth :global([data-special-depth-map] > div > span.neutral),
  .role-block-depth :global([data-role-block-depth-map] > div > span.neutral) {
    background: rgba(186,118,44,.1);
    color: var(--ink);
  }
  .special-scope-ledger,
  .role-block-direct {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
    background: #e8e2d7;
  }
  .role-block-direct { grid-template-columns: repeat(4, 1fr); background: #fffdf8; }
  .special-scope-ledger article,
  .role-block-direct article {
    padding: .85rem;
    border-right: 1px solid rgba(32,32,39,.12);
  }
  .special-scope-ledger article:last-child,
  .role-block-direct article:last-child { border-right: 0; }
  .special-scope-ledger b,
  .role-block-direct b {
    display: block;
    margin-top: .35rem;
    font: 730 .78rem/1.15 var(--font-display);
  }
  .special-scope-ledger p,
  .role-block-direct p {
    margin: .35rem 0 0;
    color: rgba(32,32,39,.58);
    font-size: .6rem;
    line-height: 1.45;
  }
  .observed-cache {
    display: grid;
    grid-template-columns: 1fr auto 1.25fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: .8rem;
  }
  .observed-cache > i { color: var(--red); font: 700 1.4rem/1 var(--font-display); }
  .observed-cache article {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.16);
    background: rgba(57,120,110,.08);
  }
  .observed-cache article.expanded { background: rgba(161,77,77,.07); }
  .observed-cache strong { font: 700 .93rem/1.2 var(--font-mono); }
  .observed-cache p { margin: 0; color: rgba(32,32,39,.58); font-size: .68rem; }
  .cache-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
  .cache-ledger article { padding: 1rem; border: 1px solid rgba(32,32,39,.14); background: #fffdf8; }
  .cache-ledger header { display: flex; justify-content: space-between; gap: 1rem; font: 650 .62rem/1.3 var(--font-mono); }
  .cache-ledger header span { color: var(--blue); }
  .cache-bar { height: 1.1rem; margin: .75rem 0; background: #ddd6cb; }
  .cache-bar i { display: block; width: 11.25%; height: 100%; background: var(--teal); }
  .cache-bar.eager i { width: 100%; background: var(--red); }
  .cache-ledger strong { font: 750 1.35rem/1 var(--font-display); }
  .cache-ledger p { margin: .35rem 0 0; color: rgba(32,32,39,.58); font-size: .68rem; line-height: 1.45; }
  .cache-ratio { grid-template-columns: repeat(3, 1fr); }
  .cache-ratio .warning { background: rgba(186,118,44,.09); }
  .absorb-algebra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
  }
  .absorb-algebra article {
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.15);
    background: #fffdf8;
  }
  .absorb-algebra code {
    display: block;
    margin: .75rem 0;
    color: var(--ink);
    font: 750 clamp(.88rem, 1.7vw, 1.2rem)/1.2 var(--font-mono);
  }
  .absorb-algebra p,
  .absorb-cache-flow p,
  .kernel-contract p,
  .execution-split p {
    margin: 0;
    color: rgba(32,32,39,.62);
    font-size: .69rem;
    line-height: 1.55;
  }
  .absorb-cache-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .8rem;
    align-items: center;
    margin-top: .8rem;
  }
  .absorb-cache-flow > i { color: var(--teal); font: 800 1.5rem/1 var(--font-display); }
  .absorb-cache-flow article {
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.15);
  }
  .absorb-cache-flow article.naive { background: rgba(161,77,77,.07); }
  .absorb-cache-flow article.absorbed { background: rgba(57,120,110,.09); }
  .absorb-cache-flow header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
  .absorb-cache-flow header b { font: 760 1.25rem/1 var(--font-display); }
  .absorb-cache-flow div { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
  .absorb-cache-flow code {
    padding: .35rem .45rem;
    background: rgba(32,32,39,.08);
    font-size: .66rem;
  }
  .absorb-metrics { grid-template-columns: repeat(4, 1fr); }
  .absorb-metrics article.exact { background: rgba(57,120,110,.1); }
  .precision-lens {
    display: grid;
    gap: .55rem;
    margin-top: .8rem;
    padding: 1rem;
    background: var(--ink);
    color: white;
  }
  .precision-lens > div {
    display: grid;
    grid-template-columns: minmax(13rem, 1.3fr) 1fr minmax(8rem, auto);
    gap: .8rem;
    align-items: center;
  }
  .precision-lens span,
  .precision-lens b { font: 650 .62rem/1.3 var(--font-mono); }
  .precision-lens b { text-align: right; }
  .precision-lens i { height: 7px; overflow: hidden; background: rgba(255,255,255,.13); }
  .precision-lens em {
    display: block;
    width: max(calc(var(--error) * 100%), 2px);
    max-width: 100%;
    height: 100%;
    background: #b7bce5;
  }
  .precision-lens > div:last-of-type em { background: #91cfc1; }
  .precision-lens > p {
    margin: .25rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.58);
    font-size: .66rem;
    line-height: 1.5;
  }
  .kernel-contract {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 1rem;
    margin-top: .8rem;
    padding: 1rem;
    border: 1px solid rgba(32,32,39,.15);
    background: #e6dfd3;
  }
  .kernel-contract h5 { margin: .45rem 0; font: 720 1rem/1.15 var(--font-display); }
  .kernel-matrix { overflow-x: auto; border: 1px solid rgba(32,32,39,.14); background: #fffdf8; }
  .kernel-matrix > div {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, minmax(5rem, .7fr));
    min-width: 520px;
  }
  .kernel-matrix b,
  .kernel-matrix span,
  .kernel-matrix i {
    padding: .55rem;
    border-right: 1px solid rgba(32,32,39,.1);
    border-bottom: 1px solid rgba(32,32,39,.1);
    font: 650 .61rem/1.2 var(--font-mono);
  }
  .kernel-matrix .head { background: var(--ink); color: white; }
  .kernel-matrix i { color: rgba(32,32,39,.45); font-style: normal; text-align: center; }
  .kernel-matrix i.yes { color: var(--teal); background: rgba(57,120,110,.08); }
  .kernel-matrix i.no { color: var(--red); background: rgba(161,77,77,.08); }
  .execution-split {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: .8rem;
    border: 1px solid rgba(32,32,39,.14);
  }
  .execution-split article { padding: .9rem; border-right: 1px solid rgba(32,32,39,.12); }
  .execution-split article:last-child { border-right: 0; }
  .execution-split article.blocked { background: rgba(161,77,77,.08); }
  .execution-split b { display: block; margin: .4rem 0; font-size: .77rem; }
  .artifact-identity { grid-template-columns: repeat(3, 1fr); }
  .artifact-identity article { display: grid; gap: .35rem; }
  .artifact-identity b { font-size: .78rem; }
  .artifact-identity code,
  .checksum-grid code { font-size: .62rem; overflow-wrap: anywhere; }
  .layer-evidence {
    display: grid;
    grid-template-columns: repeat(27, 1fr);
    gap: 3px;
    margin-top: 1rem;
  }
  .layer-evidence > span {
    display: grid;
    justify-items: center;
    gap: .25rem;
    min-width: 0;
    padding: .55rem .05rem;
    background: #ded8cc;
  }
  .layer-evidence > span.executed { background: var(--teal); color: white; }
  .layer-evidence > span.split { background: var(--amber); color: white; }
  .layer-evidence b { font: 700 .58rem/1 var(--font-mono); }
  .layer-evidence small { font: 650 .43rem/1 var(--font-mono); }
  .layer-legend { display: flex; flex-wrap: wrap; gap: .8rem 1.3rem; margin-top: .65rem; }
  .layer-legend span { display: flex; align-items: center; gap: .35rem; color: rgba(32,32,39,.62); font-size: .68rem; }
  .layer-legend i { width: .7rem; height: .7rem; background: #ded8cc; }
  .layer-legend i.executed { background: var(--teal); }
  .layer-legend i.split { background: var(--amber); }
  .repro-gate {
    display: grid;
    grid-template-columns: .55fr 1fr .8fr;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    padding: 1rem;
    background: var(--ink);
    color: white;
  }
  .repro-gate > div { display: grid; gap: .3rem; }
  .repro-gate strong { font: 760 2rem/1 var(--font-display); }
  .repro-gate > div > b { color: #91cfc1; font: 750 .72rem/1 var(--font-mono); }
  .repro-gate ul { margin: 0; padding-left: 1rem; color: rgba(255,255,255,.72); font-size: .68rem; line-height: 1.65; }
  .repro-gate > p { margin: 0; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.58); font-size: .68rem; line-height: 1.5; }
  .dependency-split {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .8rem;
    align-items: center;
    margin-top: .8rem;
  }
  .dependency-split > i { color: rgba(32,32,39,.38); font-style: normal; }
  .dependency-split article { padding: .9rem; border: 1px solid rgba(32,32,39,.14); }
  .dependency-split b { display: block; margin: .35rem 0; font-size: .8rem; }
  .dependency-split p { margin: 0; color: rgba(32,32,39,.6); font-size: .68rem; line-height: 1.45; }
  .checksum-grid article { display: grid; gap: .35rem; }
  .evidence-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
  .evidence-links a {
    padding: .55rem .7rem;
    border: 1px solid rgba(32,32,39,.18);
    color: var(--ink);
    font: 650 .66rem/1 var(--font-mono);
    text-decoration: none;
  }
  .artifact-lab figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .85rem 1.6rem;
    border-top: 1px solid rgba(32,32,39,.16);
    background: #e7e0d4;
    color: rgba(32,32,39,.58);
    font-size: .64rem;
  }
  .artifact-lab figcaption span { color: var(--ink); font-weight: 750; }
  .artifact-lab figcaption code { font-size: .61rem; }
  @media (max-width: 860px) {
    .artifact-head,
    .panel-lead,
    .heat-head,
    .aggregate-card,
    .jaccard-block,
    .kernel-contract,
    .corpus-controls,
    .corpus-heat-head,
    .corpus-comparison,
    .length-sensitivity-head,
    .template-protocol,
    .template-controls,
    .template-depth,
    .history-controls,
    .history-buffer,
    .history-depth,
    .distance-controls,
    .distance-depth,
    .boundary-controls,
    .boundary-depth,
    .role-controls,
    .role-depth,
    .role-batch-audit,
    .special-inventory,
    .special-controls,
    .special-depth,
    .role-block-protocol,
    .role-block-controls,
    .role-block-depth { grid-template-columns: 1fr; }
    .artifact-status { grid-template-columns: 1fr 1fr; }
    .artifact-tabs { grid-template-columns: 1fr 1fr; }
    .route-controls { grid-template-columns: 1fr 1fr; }
    .route-controls .token-select { grid-column: 1 / -1; border-top: 1px solid rgba(32,32,39,.13); }
    .route-stage { grid-template-columns: 1fr; }
    .route-stage > i { transform: rotate(90deg); justify-self: center; }
    .cache-controls { grid-template-columns: 1fr 1fr; }
    .route-metrics,
    .checksum-grid,
    .absorb-metrics { grid-template-columns: 1fr 1fr; }
    .corpus-ledger { grid-template-columns: repeat(3, 1fr); }
    .template-ledger { grid-template-columns: repeat(3, 1fr); }
    .template-domain-grid { grid-template-columns: 1fr 1fr; }
    .history-ledger { grid-template-columns: repeat(3, 1fr); }
    .history-domain-grid,
    .history-buffer-summary,
    .distance-domain-grid,
    .boundary-domain-grid,
    .boundary-token-grid,
    .role-domain-grid,
    .role-level-grid,
    .role-causal-ledger,
    .special-token-grid,
    .special-domain-grid,
    .role-block-matrix,
    .role-block-domain-grid,
    .role-block-direct { grid-template-columns: 1fr 1fr; }
    .distance-interpretation,
    .boundary-interpretation { grid-template-columns: 1fr; }
    .distance-interpretation article,
    .boundary-interpretation article { border-right: 0; border-bottom: 1px solid rgba(32,32,39,.12); }
    .template-protocol > i { transform: rotate(90deg); justify-self: center; }
    .length-delta-grid { grid-template-columns: 1fr 1fr; }
    .corpus-heat-head p { text-align: left; }
    .layer-evidence { grid-template-columns: repeat(9, 1fr); }
    .repro-gate { grid-template-columns: 1fr 1fr; }
    .repro-gate > p { grid-column: 1 / -1; padding: .8rem 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  }
  @media (max-width: 560px) {
    .artifact-head,
    .artifact-panel { padding: 1rem; }
    .artifact-head { gap: 1rem; }
    .artifact-status { grid-template-columns: 1fr; }
    .artifact-status span { border-right: 0; border-bottom: 1px solid rgba(32,32,39,.1); }
    .artifact-tabs { display: flex; overflow-x: auto; }
    .artifact-tabs button { min-width: 10.5rem; flex: 1 0 auto; }
    .route-controls,
    .cache-controls { grid-template-columns: 1fr; }
    .route-controls .token-select { grid-column: auto; }
    .route-controls label,
    .cache-controls label { border-right: 0; border-bottom: 1px solid rgba(32,32,39,.12); }
    .chosen-experts { grid-template-columns: repeat(3, 1fr); }
    .expert-heatmap { grid-template-columns: repeat(8, 1fr); }
    .route-metrics,
    .cache-ratio,
    .load-lessons,
    .absorb-metrics,
    .artifact-identity,
    .checksum-grid,
    .cache-ledger,
    .corpus-ledger,
    .corpus-findings,
    .length-delta-grid,
    .length-pair-summary,
    .template-ledger,
    .template-domain-grid,
    .template-negative-control,
    .history-ledger,
    .history-domain-grid,
    .history-buffer-summary,
    .distance-domain-grid,
    .distance-interpretation,
    .boundary-domain-grid,
    .boundary-token-grid,
    .boundary-interpretation,
    .special-scope-ledger,
    .role-ledger,
    .role-domain-grid,
    .role-level-grid,
    .role-causal-ledger,
    .special-domain-grid,
    .special-token-grid,
    .role-block-domain-grid,
    .role-block-matrix,
    .role-block-direct { grid-template-columns: 1fr; }
    .route-metrics article,
    .cache-ratio article,
    .load-lessons article,
    .absorb-metrics article,
    .artifact-identity article,
    .checksum-grid article { border-right: 0; border-bottom: 1px solid rgba(32,32,39,.12); }
    .corpus-ledger article,
    .corpus-findings article,
    .template-ledger article,
    .template-domain-grid > :global(article),
    .template-negative-control article,
    .history-ledger article,
    .history-domain-grid > :global(article),
    .history-buffer-summary article,
    .distance-domain-grid > :global(article),
    .distance-interpretation article,
    .boundary-domain-grid > :global(article),
    .boundary-token-grid article,
    .boundary-interpretation article,
    .role-ledger article,
    .role-domain-grid > :global(article),
    .role-level-grid article,
    .role-causal-ledger article,
    .special-domain-grid > :global(article),
    .special-token-grid article,
    .special-scope-ledger article,
    .role-block-domain-grid > :global(article),
    .role-block-matrix article,
    .role-block-direct article { border-right: 0; border-bottom: 1px solid rgba(32,32,39,.12); }
    .corpus-mode-switch,
    .corpus-cohort-switch,
    .template-scope-switch,
    .template-mode-switch,
    .history-scope-switch,
    .history-mode-switch,
    .history-effect-switch,
    .distance-scope-switch,
    .distance-mode-switch,
    .distance-contrast-switch,
    .boundary-scope-switch,
    .boundary-mode-switch,
    .boundary-contrast-switch,
    .role-scope-switch,
    .role-mode-switch,
    .role-contrast-switch,
    .special-scope-switch,
    .special-mode-switch,
    .special-contrast-switch,
    .role-block-scope-switch,
    .role-block-mode-switch,
    .role-block-effect-switch { display: grid; grid-template-columns: 1fr; }
    .corpus-mode-switch button + button,
    .corpus-cohort-switch button + button,
    .template-scope-switch button + button,
    .template-mode-switch button + button,
    .history-scope-switch button + button,
    .history-mode-switch button + button,
    .history-effect-switch button + button,
    .distance-scope-switch button + button,
    .distance-mode-switch button + button,
    .distance-contrast-switch button + button,
    .boundary-scope-switch button + button,
    .boundary-mode-switch button + button,
    .boundary-contrast-switch button + button,
    .role-scope-switch button + button,
    .role-mode-switch button + button,
    .role-contrast-switch button + button,
    .special-scope-switch button + button,
    .special-mode-switch button + button,
    .special-contrast-switch button + button,
    .role-block-scope-switch button + button,
    .role-block-mode-switch button + button,
    .role-block-effect-switch button + button { border-left: 1px solid rgba(32,32,39,.22); border-top: 0; }
    .length-delta-grid > :global(article),
    .length-pair-summary article { border-right: 0; border-bottom: 1px solid rgba(32,32,39,.11); }
    .artifact-boundary { grid-template-columns: 1fr; }
    .load-dials { grid-template-columns: 1fr; }
    .observed-cache,
    .dependency-split,
    .absorb-algebra,
    .absorb-cache-flow,
    .execution-split { grid-template-columns: 1fr; }
    .observed-cache > i,
    .dependency-split > i { transform: rotate(90deg); justify-self: center; }
    .absorb-cache-flow > i { transform: rotate(90deg); justify-self: center; }
    .precision-lens > div { grid-template-columns: 1fr; }
    .precision-lens b { text-align: left; }
    .template-depth { overflow-x: auto; }
    .template-depth > :global([data-template-depth-map]) { min-width: 620px; }
    .history-buffer > :global([data-history-buffer-grid]) { grid-template-columns: 1fr; }
    .history-depth { overflow-x: auto; }
    .history-depth > :global([data-history-depth-map]) { min-width: 620px; }
    .boundary-depth { overflow-x: auto; }
    .boundary-depth > :global([data-boundary-depth-map]) { min-width: 620px; }
    .role-depth { overflow-x: auto; }
    .role-depth > :global([data-role-depth-map]) { min-width: 620px; }
    .special-depth,
    .role-block-depth { overflow-x: auto; }
    .special-depth > :global([data-special-depth-map]),
    .role-block-depth > :global([data-role-block-depth-map]) { min-width: 620px; }
    .layer-evidence { grid-template-columns: repeat(7, 1fr); }
    .repro-gate { grid-template-columns: 1fr; }
    .repro-gate > p { grid-column: auto; }
    .artifact-lab figcaption { padding: .8rem 1rem; }
  }
</style>