---
import rawLab from "@/data/deepseek-v2-lite-chat-task-bootstrap-crn-compact.json";

const lab = rawLab as any;
const json = JSON.stringify(lab).replaceAll("<", "\\u003c");
const example = lab.uniformExample;
const conditions = ["s0_eos", "s1_eos", "s0_period", "s1_period"];
const conditionLabels: Record<string, string> = {
  s0_eos: "无 system · EOS",
  s1_eos: "有 system · EOS",
  s0_period: "无 system · 句点",
  s1_period: "有 system · 句点",
};
---

<figure class="task-bootstrap-lab" data-task-bootstrap-lab>
  <header class="tb-head">
    <div>
      <p>ROUND 08 / TASK BOOTSTRAP × EXPLICIT CRN</p>
      <h3>把“换题”和“换随机数”拆开，再问 prompt 到底改变了什么</h3>
    </div>
    <p>
      主分析固定 T0，在 HumanEval 与 GSM8K 各 32 道预选题上逐题配对；
      另取每域 4 题跑 T0–T3。四格在第 <code>t</code> 步读取同一个显式
      <code>uₜ</code>，再各自穿过不同的 token CDF。
    </p>
  </header>

  <div class="tb-ledger">
    <article><span>TASKS</span><b>32 + 32</b><p>Code / Math 始终分开</p></article>
    <article><span>FORMAL GRID</span><b>352</b><p>256 主分析 + 96 额外 tape</p></article>
    <article class="pass"><span>PROMPT HASH</span><b>256 / 256</b><p>输出前冻结并逐格 exact</p></article>
    <article><span>UNIFORM AUDIT</span><b>352 / 352</b><p>每条消费前缀重新派生</p></article>
    <article><span>TASK BOOTSTRAP</span><b>10,000×</b><p>固定 32 题框，不外推总体</p></article>
    <article class="pass"><span>FRESH PROCESS</span><b>64 / 64</b><p>十二项字段全部 exact</p></article>
  </div>

  <div class="tb-tabs" role="tablist" aria-label="选择任务 bootstrap 实验视图">
    <button type="button" role="tab" data-tb-tab="sampler" aria-selected="true">
      <span>01</span><b>真正的共同随机数</b><small>uniform tape → four CDFs</small>
    </button>
    <button type="button" role="tab" data-tb-tab="bootstrap" aria-selected="false" tabindex="-1">
      <span>02</span><b>32 题重采样带</b><small>paired task bootstrap</small>
    </button>
    <button type="button" role="tab" data-tb-tab="tasks" aria-selected="false" tabindex="-1">
      <span>03</span><b>逐题看正负抵消</b><small>task × condition explorer</small>
    </button>
    <button type="button" role="tab" data-tb-tab="tapes" aria-selected="false" tabindex="-1">
      <span>04</span><b>换题还是换 tape</b><small>4 tasks × 4 tapes</small>
    </button>
    <button type="button" role="tab" data-tb-tab="audit" aria-selected="false" tabindex="-1">
      <span>05</span><b>重放、失败与偏离</b><small>evidence boundary</small>
    </button>
  </div>

  <section class="tb-panel" data-tb-panel="sampler">
    <div class="tb-panel-lead">
      <div><span>I / COMMON RANDOM NUMBERS</span><h4>同一个 seed，不一定是同一个随机冲击</h4></div>
      <p>
        旧实验把四行放在同一个 seeded batch，<code>torch.multinomial</code> 为不同
        行消费不同 RNG 子流。本轮直接定义每一步的均匀数，所以配对对象终于可见、可重建。
      </p>
    </div>

    <div class="pairing-compare">
      <article>
        <span>ROUND 06–07 · BATCH SEED</span>
        <div class="stream-row"><i>seed</i><b>→</b><u>r₀</u><u>r₁</u><u>r₂</u><u>r₃</u></div>
        <p>同一 seed 与调用时序，但四行不是同一概率分位。</p>
      </article>
      <article class="active">
        <span>ROUND 08 · EXPLICIT TAPE</span>
        <div class="stream-row"><i>uₜ</i><b>→</b><u>uₜ</u><u>uₜ</u><u>uₜ</u><u>uₜ</u></div>
        <p>同题、同 tape、同 step 的四格读取完全相同的 <code>uₜ</code>。</p>
      </article>
    </div>

    <div class="sampler-pipeline" aria-label="显式共同随机数采样流程">
      <article><span>01 / HASH</span><b>SHA-256</b><p>protocol · tape · source · step</p></article>
      <i>→</i>
      <article class="uniform"><span>02 / SHARED</span><b>uₜ ∈ (0,1)</b><p>四格同一个概率分位</p></article>
      <i>→</i>
      <article><span>03 / FOUR DISTRIBUTIONS</span><b>T .3 · P .95</b><p>prompt 改变各自 logits / CDF</p></article>
      <i>→</i>
      <article><span>04 / TOKEN</span><b>searchsorted</b><p>同 uₜ 可以落入不同 token</p></article>
    </div>

    <div class="uniform-demo">
      <header>
        <div><span>REAL T0 TAPE / {example.sourceId}</span><b>前 8 个生成步</b></div>
        <p>柱高是 float32 <code>uₜ</code>；hex 是冻结的 uint64 前缀。</p>
      </header>
      <div class="uniform-bars">
        {example.uniformFloat32FirstEight.map((value: number, index: number) => (
          <article style={`--u:${Math.max(0.025, value)}`}>
            <i></i>
            <span>t{index}</span>
            <b>{value.toFixed(3)}</b>
            <code>{example.uniformUint64FirstEightHex[index].slice(0, 6)}</code>
          </article>
        ))}
      </div>
      <div class="token-lanes">
        {conditions.map((condition) => (
          <article>
            <header><span>{condition}</span><b>{conditionLabels[condition]}</b></header>
            <div>
              {example.conditions[condition].generatedTokenIds.map((token: number, index: number) => (
                <i><small>t{index}</small>{token}</i>
              ))}
            </div>
          </article>
        ))}
      </div>
    </div>

    <aside class="tb-note">
      <b>读图关键：四条 lane 上方的随机柱完全相同，token ID 却会分叉</b>
      <p>
        共同随机数控制的是 sampling noise，不是把四个条件钉成同一输出。prompt 一旦改变
        概率分布，同一分位自然可以映射到不同 token。
      </p>
    </aside>
  </section>

  <section class="tb-panel" data-tb-panel="bootstrap" hidden>
    <div class="tb-panel-lead">
      <div><span>II / SELECTED-TASK BOOTSTRAP</span><h4>带宽回答“换这 32 道题的权重会怎样”</h4></div>
      <p>
        每次在固定 32 题中有放回抽 32 题，四条件保持题级配对。它不包含换随机带的不确定性，
        也不是完整 benchmark population confidence interval。
      </p>
    </div>

    <div class="tb-switch-row">
      <div role="group" aria-label="选择 bootstrap 任务域">
        <button type="button" data-tb-domain="code" aria-pressed="true">CODE · HUMANEVAL</button>
        <button type="button" data-tb-domain="math" aria-pressed="false">MATH · GSM8K</button>
      </div>
      <div role="group" aria-label="选择 bootstrap 指标">
        <button type="button" data-tb-metric="fixed_budget_success" aria-pressed="true">CORRECTNESS</button>
        <button type="button" data-tb-metric="generated_tokens" aria-pressed="false">LENGTH</button>
      </div>
    </div>

    <div class="condition-cards" data-tb-condition-cards></div>

    <div class="forest">
      <header><span>RIGHT LOWER / SHORTER</span><b>0 · NO MEAN DIFFERENCE</b><span>RIGHT HIGHER / LONGER</span></header>
      <div data-tb-forest></div>
    </div>

    <div class="bootstrap-reading">
      <article>
        <span>WHAT IS RESAMPLED</span>
        <b>32 selected tasks</b>
        <p>同一次抽样中，四个 prompt condition 保持配对。</p>
      </article>
      <article>
        <span>WHAT IS FIXED</span>
        <b>T0 · checkpoint · prompt</b>
        <p>这条带不覆盖 generation-tape uncertainty。</p>
      </article>
      <article class="result">
        <span data-tb-robust-label>LENGTH / CODE</span>
        <b data-tb-robust-count>—</b>
        <p data-tb-robust-copy>—</p>
      </article>
    </div>

    <aside class="tb-note dark">
      <b>正确率的八条带都跨 0；长度出现 domain 反向交互</b>
      <p>
        Code 的 system-at-period 为 −130.9 tokens，Math 为 +25.1 tokens，两个
        selected-task bands 都不跨 0、方向却相反。“system 会让输出更短”不是可跨域外推的结论。
      </p>
    </aside>
  </section>

  <section class="tb-panel" data-tb-panel="tasks" hidden>
    <div class="tb-panel-lead">
      <div><span>III / TASK EXPLORER</span><h4>平均差为 0，也可能是 fail→pass 与 pass→fail 抵消</h4></div>
      <p>
        每页 8 道题。P/F 是 T0 上的独立 evaluator 结果；末列显示所选 contrast 的
        success 差、长度差与共同 token 前缀。
      </p>
    </div>

    <div class="task-controls">
      <label><span>DOMAIN</span>
        <select data-tb-task-domain aria-label="选择逐题任务域">
          <option value="code">Code · HumanEval</option>
          <option value="math">Math · GSM8K</option>
        </select>
      </label>
      <label><span>CONTRAST</span>
        <select data-tb-task-contrast aria-label="选择逐题 contrast">
          <option value="period_at_s0">句点 − EOS · 无 system</option>
          <option value="period_at_s1">句点 − EOS · 有 system</option>
          <option value="system_at_eos">system on − off · EOS</option>
          <option value="system_at_period">system on − off · 句点</option>
        </select>
      </label>
      <article><span>VISIBLE TASKS</span><b data-tb-task-page-label>01–08 / 32</b></article>
    </div>

    <div class="task-pages" role="group" aria-label="选择逐题页">
      {[0, 1, 2, 3].map((page) => (
        <button type="button" data-tb-task-page={page} aria-pressed={page === 0 ? "true" : "false"}>
          {String(page * 8 + 1).padStart(2, "0")}–{String(page * 8 + 8).padStart(2, "0")}
        </button>
      ))}
    </div>

    <div class="task-table">
      <header><b>TASK</b>{conditions.map((condition) => <b>{condition}</b>)}<b>SELECTED CONTRAST</b></header>
      <div data-tb-task-rows></div>
    </div>

    <div class="transition-cards" data-tb-transition-cards></div>

    <aside class="tb-note">
      <b>四格合计 pass 不是模型标准分数</b>
      <p>
        Code 的 59/128 与 Math 的 71/128 都来自 <code>32 tasks × 4 conditions</code>；
        同一道题出现四次。逐题转移表才保留条件改变的方向。
      </p>
    </aside>
  </section>

  <section class="tb-panel" data-tb-panel="tapes" hidden>
    <div class="tb-panel-lead">
      <div><span>IV / CROSSED TAPE DIAGNOSTIC</span><h4>4 道题 × 4 条 tape，不是 16 道独立题</h4></div>
      <p>
        行是预先固定的题，列是 T0–T3。先在题内横向看 tape range，再在 tape 内纵向看
        task range；两种变化不能揉成一个普通样本方差。
      </p>
    </div>

    <div class="tape-controls">
      <label><span>DOMAIN</span>
        <select data-tb-tape-domain aria-label="选择随机带诊断域">
          <option value="code">Code · HumanEval</option>
          <option value="math">Math · GSM8K</option>
        </select>
      </label>
      <label><span>CONTRAST</span>
        <select data-tb-tape-contrast aria-label="选择随机带诊断 contrast">
          <option value="period_at_s0">句点 − EOS · 无 system</option>
          <option value="period_at_s1">句点 − EOS · 有 system</option>
          <option value="system_at_eos">system on − off · EOS</option>
          <option value="system_at_period">system on − off · 句点</option>
        </select>
      </label>
      <label><span>METRIC</span>
        <select data-tb-tape-metric aria-label="选择随机带诊断指标">
          <option value="success">Correctness Δ</option>
          <option value="tokens">Length Δ</option>
        </select>
      </label>
    </div>

    <div class="tape-matrix">
      <header><b>TASK ↓ / TAPE →</b><b>T0</b><b>T1</b><b>T2</b><b>T3</b><b>TAPE RANGE</b></header>
      <div data-tb-tape-rows></div>
      <footer data-tb-tape-means></footer>
    </div>

    <div class="tape-reading">
      <article><span>MEAN TASK RANGE WITHIN TAPE</span><b data-tb-task-range>—</b><p>固定一条 tape，四题之间的 contrast 跨度</p></article>
      <article><span>MEAN TAPE RANGE WITHIN TASK</span><b data-tb-tape-range>—</b><p>固定一道题，四条 tape 之间的 contrast 跨度</p></article>
      <article class="result"><span>INDEPENDENCE</span><b>4 crossed tasks</b><p>不是 16 个独立观测；只做敏感性诊断</p></article>
    </div>

    <aside class="tb-note dark">
      <b>Code 长度方向更稳，Math correctness 对 tape 更敏感</b>
      <p>
        在四题诊断子集上，Code 的 system-at-period 四条 tape 都为负；Math 同一长度
        contrast 四条都为正。但 Math correctness 的 system-at-EOS 在 T0–T3 间从 −0.25 到 +0.50。
      </p>
    </aside>
  </section>

  <section class="tb-panel" data-tb-panel="audit" hidden>
    <div class="tb-panel-lead">
      <div><span>V / EVIDENCE AUDIT</span><h4>先锁 trajectory，再打开 gold；偏离也写进证据链</h4></div>
      <p>
        formal、独立 evaluator、replay 与 analysis 各自有文件 hash。重放检查的不只是
        headline，而是每格 12 个冻结字段。
      </p>
    </div>

    <div class="evidence-pipeline">
      <article><span>01 / FREEZE</span><b>64 tasks · 256 prompts</b><p>source、tape、contrast、bootstrap seed</p></article>
      <i>→</i>
      <article><span>02 / GENERATE</span><b>352 trajectories</b><p>88/88 runs 不消费 PyTorch RNG</p></article>
      <i>→</i>
      <article><span>03 / EVALUATE</span><b>networkless sandbox</b><p>停止、覆盖、正确、失败分账</p></article>
      <i>→</i>
      <article class="result"><span>04 / REPLAY</span><b>64 / 64 exact</b><p>全新进程 · 十二字段</p></article>
    </div>

    <div class="replay-fields">
      {Object.entries(lab.reproduction.by_field).map(([field, count]) => (
        <article>
          <span>{String(field).replaceAll("_", " ").toUpperCase()}</span>
          <b>{String(count)} / 64</b><i>EXACT</i>
        </article>
      ))}
    </div>

    <div class="failure-ledger">
      <article>
        <header><span>CODE / 128 T0 OUTPUTS</span><b>59 pass</b></header>
        {Object.entries(lab.outcomes.code).map(([name, count]) => (
          <div><span>{name.replaceAll("_", " ")}</span><i><u style={`--share:${Number(count) / 128}`}></u></i><b>{String(count)}</b></div>
        ))}
      </article>
      <article>
        <header><span>MATH / 128 T0 OUTPUTS</span><b>71 exact</b></header>
        {Object.entries(lab.outcomes.math).map(([name, count]) => (
          <div><span>{name.replaceAll("_", " ")}</span><i><u style={`--share:${Number(count) / 128}`}></u></i><b>{String(count)}</b></div>
        ))}
      </article>
    </div>

    <div class="deviation-ledger">
      {lab.deviations.map((deviation: any, index: number) => (
        <article class={deviation.severity}>
          <span>{String(index + 1).padStart(2, "0")} / {deviation.severity.replaceAll("-", " ").toUpperCase()}</span>
          <b>{deviation.id.replaceAll("-", " ")}</b>
          <p>{deviation.summary}</p>
        </article>
      ))}
    </div>

    <div class="artifact-chain">
      {Object.entries(lab.artifactHashes).map(([name, hash], index) => (
        <article>
          <span>{String(index + 1).padStart(2, "0")} / {name.toUpperCase()}</span>
          <b>{String(hash).slice(0, 12)}…{String(hash).slice(-8)}</b>
        </article>
      ))}
    </div>

    <aside class="tb-note">
      <b>gold 加载时机是本轮明确报告的流程偏离</b>
      <p>
        复用 runner 在生成进程开始前加载 gold，只用于文本生成结束后的窄
        <code>task_score</code>；gold 不进入 prompt、logits、CDF、tape 或任务选择，权威
        evaluator 仍独立运行。它没有已知 trajectory 因果路径，但后续 runner 应彻底删除这条依赖。
      </p>
    </aside>
  </section>

  <figcaption>
    <b>证据边界</b>
    <span>
      两个 domain 各 32 道预选题，不是完整 benchmark；selected-task band 固定 T0，
      不覆盖 generation-tape uncertainty；句点是 counterfactual，不是官方聊天格式。
    </span>
    <code>FORMAL ea0607…1809 · EVAL 82b2fc…77ab · REPLAY 64/64</code>
  </figcaption>

  <script is:inline type="application/json" data-tb-data set:html={json}></script>
</figure>

<script>
  document.querySelectorAll<HTMLElement>("[data-task-bootstrap-lab]").forEach((root) => {
    const payload = root.querySelector<HTMLScriptElement>("[data-tb-data]");
    if (!payload) return;
    const data = JSON.parse(payload.textContent ?? "{}");
    const conditionLabels: Record<string, string> = {
      s0_eos: "无 system · EOS",
      s1_eos: "有 system · EOS",
      s0_period: "无 system · 句点",
      s1_period: "有 system · 句点",
    };
    const contrastLabels: Record<string, string> = {
      period_at_s0: "句点 − EOS · 无 system",
      period_at_s1: "句点 − EOS · 有 system",
      system_at_eos: "system on − off · EOS",
      system_at_period: "system on − off · 句点",
    };
    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 signed = (value: number, digits = 2) => (
      `${value > 0 ? "+" : ""}${value.toFixed(digits)}`
    );

    const tabButtons = all<HTMLButtonElement>("[data-tb-tab]");
    const panels = all<HTMLElement>("[data-tb-panel]");
    tabButtons.forEach((button, index) => {
      button.addEventListener("click", () => {
        const target = button.dataset.tbTab;
        tabButtons.forEach((candidate) => {
          const active = candidate === button;
          candidate.setAttribute("aria-selected", String(active));
          candidate.tabIndex = active ? 0 : -1;
        });
        panels.forEach((panel) => {
          panel.hidden = panel.dataset.tbPanel !== target;
        });
      });
      button.addEventListener("keydown", (event) => {
        if (!["ArrowLeft", "ArrowRight"].includes(event.key)) return;
        event.preventDefault();
        const delta = event.key === "ArrowRight" ? 1 : -1;
        const target = tabButtons[(index + delta + tabButtons.length) % tabButtons.length];
        target.click();
        target.focus();
      });
    });

    let bootstrapDomain: "code" | "math" = "code";
    let bootstrapMetric = "fixed_budget_success";
    const domainButtons = all<HTMLButtonElement>("[data-tb-domain]");
    const metricButtons = all<HTMLButtonElement>("[data-tb-metric]");
    const renderBootstrap = () => {
      const cards = one<HTMLElement>("[data-tb-condition-cards]");
      if (cards) {
        cards.replaceChildren();
        data.conditionTable[bootstrapDomain].forEach((row: any) => {
          const article = document.createElement("article");
          const label = document.createElement("span");
          label.textContent = conditionLabels[row.condition];
          const value = document.createElement("b");
          value.textContent = `${row.success} / 32 pass`;
          const length = document.createElement("p");
          length.textContent = `${row.meanTokens.toFixed(1)} tokens · ${row.naturalEos}/32 EOS`;
          article.append(label, value, length);
          cards.append(article);
        });
      }
      const forest = one<HTMLElement>("[data-tb-forest]");
      if (forest) {
        forest.replaceChildren();
        Object.entries(data.contrasts[bootstrapDomain]).forEach(([name, contrast]: [string, any]) => {
          const metric = contrast.metrics[bootstrapMetric];
          const scale = bootstrapMetric === "generated_tokens" ? 210 : 0.42;
          const position = (value: number) => Math.max(1, Math.min(99, 50 + value / scale * 50));
          const row = document.createElement("article");
          const label = document.createElement("span");
          label.textContent = contrastLabels[name];
          const track = document.createElement("i");
          const band = document.createElement("u");
          band.style.setProperty("--band-left", `${position(metric.band.p2_5)}%`);
          band.style.setProperty("--band-right", `${position(metric.band.p97_5)}%`);
          band.className = metric.band.p2_5 > 0 || metric.band.p97_5 < 0 ? "clear" : "crosses";
          const point = document.createElement("em");
          point.style.setProperty("--point", `${position(metric.point)}%`);
          track.append(band, point);
          const value = document.createElement("b");
          value.textContent = bootstrapMetric === "generated_tokens"
            ? `${signed(metric.point, 1)} tok`
            : signed(metric.point, 3);
          const interval = document.createElement("small");
          interval.textContent = `[${signed(metric.band.p2_5, bootstrapMetric === "generated_tokens" ? 1 : 3)}, ${signed(metric.band.p97_5, bootstrapMetric === "generated_tokens" ? 1 : 3)}]`;
          row.append(label, track, value, interval);
          forest.append(row);
        });
      }
      const clear = Object.values(data.contrasts[bootstrapDomain]).filter((contrast: any) => {
        const band = contrast.metrics[bootstrapMetric].band;
        return band.p2_5 > 0 || band.p97_5 < 0;
      }).length;
      set(
        "[data-tb-robust-label]",
        `${bootstrapMetric === "generated_tokens" ? "LENGTH" : "CORRECTNESS"} / ${bootstrapDomain.toUpperCase()}`,
      );
      set("[data-tb-robust-count]", `${clear} / 4 bands 不跨 0`);
      set(
        "[data-tb-robust-copy]",
        bootstrapMetric === "fixed_budget_success"
          ? "所有 correctness 带都跨 0，点估计不能升级成稳定能力结论。"
          : bootstrapDomain === "code"
            ? "period-at-s1 与 system-at-period 明确偏负；Code 输出显著缩短。"
            : "只有 system-at-period 明确偏正；Math 输出反而延长。",
      );
    };
    domainButtons.forEach((button) => button.addEventListener("click", () => {
      bootstrapDomain = (button.dataset.tbDomain ?? "code") as "code" | "math";
      domainButtons.forEach((candidate) => candidate.setAttribute(
        "aria-pressed",
        String(candidate === button),
      ));
      renderBootstrap();
    }));
    metricButtons.forEach((button) => button.addEventListener("click", () => {
      bootstrapMetric = button.dataset.tbMetric ?? "fixed_budget_success";
      metricButtons.forEach((candidate) => candidate.setAttribute(
        "aria-pressed",
        String(candidate === button),
      ));
      renderBootstrap();
    }));
    renderBootstrap();

    const taskDomainSelect = one<HTMLSelectElement>("[data-tb-task-domain]");
    const taskContrastSelect = one<HTMLSelectElement>("[data-tb-task-contrast]");
    const taskPageButtons = all<HTMLButtonElement>("[data-tb-task-page]");
    let taskPage = 0;
    const renderTasks = () => {
      const domain = taskDomainSelect?.value ?? "code";
      const contrast = taskContrastSelect?.value ?? "period_at_s0";
      const rows = data.tasks[domain].slice(taskPage * 8, taskPage * 8 + 8);
      set(
        "[data-tb-task-page-label]",
        `${String(taskPage * 8 + 1).padStart(2, "0")}–${String(taskPage * 8 + 8).padStart(2, "0")} / 32`,
      );
      const container = one<HTMLElement>("[data-tb-task-rows]");
      if (container) {
        container.replaceChildren();
        rows.forEach((task: any) => {
          const row = document.createElement("article");
          const label = document.createElement("span");
          label.innerHTML = `<small>${String(task.index + 1).padStart(2, "0")}</small><b>${task.id}</b>`;
          row.append(label);
          Object.values(task.conditions).forEach((condition: any) => {
            const cell = document.createElement("i");
            cell.className = condition.success ? "pass" : "fail";
            cell.innerHTML = `<b>${condition.success ? "P" : "F"}</b><small>${condition.tokens}t</small>`;
            cell.title = `${condition.outcome} · ${condition.tokens} tokens`;
            row.append(cell);
          });
          const delta = task.contrasts[contrast];
          const summary = document.createElement("strong");
          summary.className = delta.successDelta > 0 ? "positive" : delta.successDelta < 0 ? "negative" : "zero";
          summary.innerHTML = `<b>${signed(delta.successDelta, 0)} pass · ${signed(delta.tokenDelta, 0)} tok</b><small>${delta.commonPrefixTokens} token 共同前缀</small>`;
          row.append(summary);
          container.append(row);
        });
      }
      const transition = data.contrasts[domain][contrast]
        .metrics.fixed_budget_success.transition;
      const cards = one<HTMLElement>("[data-tb-transition-cards]");
      if (cards && transition) {
        cards.replaceChildren();
        [
          ["FAIL → PASS", transition.fail_to_pass, "positive"],
          ["PASS → FAIL", transition.pass_to_fail, "negative"],
          ["PASS → PASS", transition.pass_to_pass, "stable"],
          ["FAIL → FAIL", transition.fail_to_fail, "stable"],
        ].forEach(([label, count, className]) => {
          const article = document.createElement("article");
          article.className = String(className);
          article.innerHTML = `<span>${label}</span><b>${count} / 32</b>`;
          cards.append(article);
        });
      }
    };
    taskDomainSelect?.addEventListener("change", () => {
      taskPage = 0;
      taskPageButtons.forEach((button, index) => button.setAttribute("aria-pressed", String(index === 0)));
      renderTasks();
    });
    taskContrastSelect?.addEventListener("change", renderTasks);
    taskPageButtons.forEach((button) => button.addEventListener("click", () => {
      taskPage = Number(button.dataset.tbTaskPage ?? 0);
      taskPageButtons.forEach((candidate) => candidate.setAttribute(
        "aria-pressed",
        String(candidate === button),
      ));
      renderTasks();
    }));
    renderTasks();

    const tapeDomain = one<HTMLSelectElement>("[data-tb-tape-domain]");
    const tapeContrast = one<HTMLSelectElement>("[data-tb-tape-contrast]");
    const tapeMetric = one<HTMLSelectElement>("[data-tb-tape-metric]");
    const renderTapes = () => {
      const domain = tapeDomain?.value ?? "code";
      const contrast = tapeContrast?.value ?? "period_at_s0";
      const metricName = tapeMetric?.value ?? "success";
      const domainData = data.diagnostic[domain];
      const metric = domainData.contrasts[contrast][metricName];
      const rows = one<HTMLElement>("[data-tb-tape-rows]");
      if (rows) {
        rows.replaceChildren();
        metric.matrix.forEach((values: number[], index: number) => {
          const row = document.createElement("article");
          const label = document.createElement("span");
          label.textContent = domainData.sourceIds[index];
          row.append(label);
          values.forEach((value: number) => {
            const cell = document.createElement("b");
            cell.className = value > 0 ? "positive" : value < 0 ? "negative" : "zero";
            cell.style.setProperty("--strength", String(Math.min(1, Math.abs(value) / (metricName === "success" ? 1 : 200))));
            cell.textContent = metricName === "success" ? signed(value, 2) : signed(value, 0);
            row.append(cell);
          });
          const range = Math.max(...values) - Math.min(...values);
          const output = document.createElement("strong");
          output.textContent = metricName === "success" ? range.toFixed(2) : `${range.toFixed(0)} tok`;
          row.append(output);
          rows.append(row);
        });
      }
      const means = one<HTMLElement>("[data-tb-tape-means]");
      if (means) {
        means.replaceChildren();
        const label = document.createElement("span");
        label.textContent = "TAPE MEAN";
        means.append(label);
        domainData.tapes.forEach((tape: string) => {
          const value = metric.tapeMeans[tape];
          const cell = document.createElement("b");
          cell.textContent = metricName === "success" ? signed(value, 2) : signed(value, 1);
          means.append(cell);
        });
        const note = document.createElement("strong");
        note.textContent = "descriptive";
        means.append(note);
      }
      set(
        "[data-tb-task-range]",
        `${metric.taskRangeWithinTape.mean.toFixed(metricName === "success" ? 2 : 1)}${metricName === "tokens" ? " tok" : ""}`,
      );
      set(
        "[data-tb-tape-range]",
        `${metric.tapeRangeWithinTask.mean.toFixed(metricName === "success" ? 2 : 1)}${metricName === "tokens" ? " tok" : ""}`,
      );
    };
    [tapeDomain, tapeContrast, tapeMetric].forEach((control) => (
      control?.addEventListener("change", renderTapes)
    ));
    renderTapes();
  });
</script>

<style is:global>
  [data-task-bootstrap-lab] { margin: 1.6rem 0 0; overflow: hidden; border: 1px solid var(--line); background: #f7f3ea; }
  [data-task-bootstrap-lab] .tb-head { display: grid; grid-template-columns: 1.08fr .92fr; gap: 1.5rem; padding: 1.55rem; color: #edf3f1; background: #263f47; }
  [data-task-bootstrap-lab] .tb-head p { margin: 0; font-size: .62rem; line-height: 1.65; }
  [data-task-bootstrap-lab] .tb-head > div > p { color: #8fcbbf; font: 690 .48rem/1.2 var(--font-mono); letter-spacing: .08em; }
  [data-task-bootstrap-lab] .tb-head h3 { margin: .6rem 0 0; max-width: 28ch; color: #edf3f1; font: 760 1.22rem/1.14 var(--font-display); }
  [data-task-bootstrap-lab] .tb-head code { color: #f0c7aa; font-size: .53rem; }
  [data-task-bootstrap-lab] .tb-ledger { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
  [data-task-bootstrap-lab] .tb-ledger article { min-width: 0; padding: .82rem; background: #eee9df; }
  [data-task-bootstrap-lab] .tb-ledger article.pass { background: #dcebe5; }
  [data-task-bootstrap-lab] .tb-ledger span { display: block; color: #687772; font: .42rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .tb-ledger b { display: block; margin-top: .38rem; font: 760 .72rem/1.1 var(--font-mono); }
  [data-task-bootstrap-lab] .tb-ledger p { margin: .32rem 0 0; color: #717975; font-size: .45rem; line-height: 1.4; }
  [data-task-bootstrap-lab] .tb-tabs { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
  [data-task-bootstrap-lab] .tb-tabs button { min-width: 0; padding: .86rem; text-align: left; color: #52615e; border: 0; background: #e5e0d5; cursor: pointer; }
  [data-task-bootstrap-lab] .tb-tabs button[aria-selected="true"] { color: #f0f5f3; background: #2e776c; }
  [data-task-bootstrap-lab] .tb-tabs span, [data-task-bootstrap-lab] .tb-tabs b, [data-task-bootstrap-lab] .tb-tabs small { display: block; }
  [data-task-bootstrap-lab] .tb-tabs span { color: var(--orange); font: 730 .42rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .tb-tabs button[aria-selected="true"] span { color: #f2c6a8; }
  [data-task-bootstrap-lab] .tb-tabs b { margin-top: .38rem; font-size: .57rem; }
  [data-task-bootstrap-lab] .tb-tabs small { margin-top: .25rem; opacity: .65; font: .39rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .tb-panel { padding: 1.25rem; }
  [data-task-bootstrap-lab] .tb-panel-lead { display: grid; grid-template-columns: 1.08fr .92fr; gap: 1.4rem; margin-bottom: 1rem; }
  [data-task-bootstrap-lab] .tb-panel-lead span { color: var(--orange); font: 700 .46rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .tb-panel-lead h4 { margin: .42rem 0 0; font: 750 .96rem/1.15 var(--font-display); }
  [data-task-bootstrap-lab] .tb-panel-lead p { margin: 0; color: #63706c; font-size: .57rem; line-height: 1.65; }
  [data-task-bootstrap-lab] .pairing-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
  [data-task-bootstrap-lab] .pairing-compare article { padding: .9rem; border: 1px solid var(--line); background: #eee9df; }
  [data-task-bootstrap-lab] .pairing-compare article.active { color: #edf3f1; border: 0; background: #2f776c; }
  [data-task-bootstrap-lab] .pairing-compare > article > span { font: 690 .43rem/1.2 var(--font-mono); opacity: .72; }
  [data-task-bootstrap-lab] .pairing-compare p { margin: .55rem 0 0; opacity: .72; font-size: .49rem; }
  [data-task-bootstrap-lab] .stream-row { display: grid; grid-template-columns: .9fr auto repeat(4,1fr); gap: .35rem; align-items: center; margin-top: .65rem; }
  [data-task-bootstrap-lab] .stream-row i, [data-task-bootstrap-lab] .stream-row u { display: grid; place-items: center; height: 2.2rem; text-decoration: none; font: 730 .52rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .stream-row i { color: #f4f0e8; background: #b96b45; font-style: normal; }
  [data-task-bootstrap-lab] .pairing-compare article:not(.active) .stream-row i { color: #fff; }
  [data-task-bootstrap-lab] .stream-row u { color: #29434a; background: #dce8e4; }
  [data-task-bootstrap-lab] .stream-row b { color: #d89a76; text-align: center; }
  [data-task-bootstrap-lab] .sampler-pipeline, [data-task-bootstrap-lab] .evidence-pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; margin-top: 1rem; }
  [data-task-bootstrap-lab] .sampler-pipeline article, [data-task-bootstrap-lab] .evidence-pipeline article { min-width: 0; padding: .8rem; border: 1px solid var(--line); background: #eee9df; }
  [data-task-bootstrap-lab] .sampler-pipeline article.uniform, [data-task-bootstrap-lab] .evidence-pipeline article.result { color: #edf4f1; border: 0; background: #2f776c; }
  [data-task-bootstrap-lab] .sampler-pipeline span, [data-task-bootstrap-lab] .evidence-pipeline span { font: .4rem/1.2 var(--font-mono); opacity: .7; }
  [data-task-bootstrap-lab] .sampler-pipeline b, [data-task-bootstrap-lab] .evidence-pipeline b { display: block; margin-top: .35rem; font: 720 .61rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .sampler-pipeline p, [data-task-bootstrap-lab] .evidence-pipeline p { margin: .32rem 0 0; opacity: .7; font-size: .43rem; }
  [data-task-bootstrap-lab] .sampler-pipeline > i, [data-task-bootstrap-lab] .evidence-pipeline > i { color: var(--orange); font: 760 .72rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .uniform-demo { margin-top: 1rem; overflow: hidden; border: 1px solid var(--line); background: #eee9df; }
  [data-task-bootstrap-lab] .uniform-demo > header { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; color: #e8efed; background: #29434a; }
  [data-task-bootstrap-lab] .uniform-demo > header span { display: block; color: #91c9be; font: .4rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .uniform-demo > header b { display: block; margin-top: .3rem; font: 710 .58rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .uniform-demo > header p { margin: 0; font-size: .45rem; }
  [data-task-bootstrap-lab] .uniform-bars { display: grid; grid-template-columns: repeat(8,1fr); gap: 1px; height: 9rem; padding: .75rem; background: #d9d4ca; }
  [data-task-bootstrap-lab] .uniform-bars article { display: grid; grid-template-rows: 1fr auto auto auto; min-width: 0; padding: .3rem; background: #f7f3ea; text-align: center; }
  [data-task-bootstrap-lab] .uniform-bars i { align-self: end; width: 58%; height: calc(var(--u) * 100%); min-height: .25rem; margin: 0 auto; background: linear-gradient(#8fc9bd,#2f776c); }
  [data-task-bootstrap-lab] .uniform-bars span, [data-task-bootstrap-lab] .uniform-bars code { margin-top: .18rem; color: #6a7773; font: .35rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .uniform-bars b { margin-top: .18rem; font: 700 .43rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .token-lanes { display: grid; gap: 1px; padding: 0 .75rem .75rem; background: #d9d4ca; }
  [data-task-bootstrap-lab] .token-lanes article { display: grid; grid-template-columns: 1.2fr 4fr; gap: 1px; background: #d9d4ca; }
  [data-task-bootstrap-lab] .token-lanes header { padding: .55rem; background: #eee9df; }
  [data-task-bootstrap-lab] .token-lanes header span, [data-task-bootstrap-lab] .token-lanes header b { display: block; }
  [data-task-bootstrap-lab] .token-lanes header span { color: var(--orange); font: .38rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .token-lanes header b { margin-top: .3rem; font-size: .48rem; }
  [data-task-bootstrap-lab] .token-lanes article > div { display: grid; grid-template-columns: repeat(8,1fr); gap: 1px; background: #d9d4ca; }
  [data-task-bootstrap-lab] .token-lanes i { display: grid; place-items: center; min-width: 0; padding: .45rem .15rem; background: #fffaf2; font: 680 .39rem/1 var(--font-mono); font-style: normal; }
  [data-task-bootstrap-lab] .token-lanes small { display: block; margin-bottom: .23rem; color: #77817d; font-size: .31rem; }
  [data-task-bootstrap-lab] .tb-note { margin-top: 1rem; padding: .85rem 1rem; border-left: .24rem solid var(--orange); background: #eee9df; }
  [data-task-bootstrap-lab] .tb-note.dark { color: #e8efed; border-left-color: #e0a17c; background: #29434a; }
  [data-task-bootstrap-lab] .tb-note b { font: 710 .58rem/1.3 var(--font-mono); }
  [data-task-bootstrap-lab] .tb-note p { margin: .42rem 0 0; opacity: .76; font-size: .51rem; line-height: 1.6; }
  [data-task-bootstrap-lab] .tb-switch-row { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem; border: 1px solid var(--line); background: #eee9df; }
  [data-task-bootstrap-lab] .tb-switch-row > div { display: flex; gap: .35rem; }
  [data-task-bootstrap-lab] .tb-switch-row button, [data-task-bootstrap-lab] .task-pages button { padding: .55rem .75rem; color: #53625f; border: 1px solid var(--line); background: #fffaf2; font: 690 .45rem/1 var(--font-mono); cursor: pointer; }
  [data-task-bootstrap-lab] .tb-switch-row button[aria-pressed="true"], [data-task-bootstrap-lab] .task-pages button[aria-pressed="true"] { color: #edf3f1; border-color: #2f776c; background: #2f776c; }
  [data-task-bootstrap-lab] .condition-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 1rem; border: 1px solid var(--line); background: var(--line); }
  [data-task-bootstrap-lab] .condition-cards article { padding: .75rem; background: #eee9df; }
  [data-task-bootstrap-lab] .condition-cards span { color: #66736f; font: .41rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .condition-cards b { display: block; margin-top: .38rem; color: #2d6d63; font: 740 .63rem/1.1 var(--font-mono); }
  [data-task-bootstrap-lab] .condition-cards p { margin: .3rem 0 0; color: #717b77; font-size: .44rem; }
  [data-task-bootstrap-lab] .forest { margin-top: 1rem; overflow: hidden; border: 1px solid var(--line); }
  [data-task-bootstrap-lab] .forest > header { display: grid; grid-template-columns: 1fr auto 1fr; padding: .6rem .8rem; color: #e9f0ee; background: #29434a; font: .4rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .forest > header span:last-child { text-align: right; }
  [data-task-bootstrap-lab] .forest > header b { color: #a8d2c9; }
  [data-task-bootstrap-lab] .forest [data-tb-forest] > article { display: grid; grid-template-columns: 1.25fr 2.8fr .65fr 1.2fr; gap: .65rem; align-items: center; padding: .72rem .8rem; border-bottom: 1px solid var(--line); background: #eee9df; }
  [data-task-bootstrap-lab] .forest [data-tb-forest] > article:last-child { border-bottom: 0; }
  [data-task-bootstrap-lab] .forest article > span { font: 650 .46rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .forest article > i { position: relative; height: .38rem; background: linear-gradient(to right,#deb194 0 49.7%,#29434a 49.7% 50.3%,#a9d3ca 50.3% 100%); }
  [data-task-bootstrap-lab] .forest article u { position: absolute; top: 50%; left: var(--band-left); width: calc(var(--band-right) - var(--band-left)); height: .44rem; background: #596d68; transform: translateY(-50%); text-decoration: none; }
  [data-task-bootstrap-lab] .forest article u.clear { background: #2f776c; }
  [data-task-bootstrap-lab] .forest article em { position: absolute; top: 50%; left: var(--point); width: .75rem; height: .75rem; border: .13rem solid #eee9df; border-radius: 50%; background: #bd6c46; box-shadow: 0 0 0 1px #29434a; transform: translate(-50%,-50%); }
  [data-task-bootstrap-lab] .forest article > b { font: 730 .48rem/1.2 var(--font-mono); text-align: right; }
  [data-task-bootstrap-lab] .forest article > small { color: #687570; font: .37rem/1.3 var(--font-mono); }
  [data-task-bootstrap-lab] .bootstrap-reading, [data-task-bootstrap-lab] .tape-reading { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 1rem; border: 1px solid var(--line); background: var(--line); }
  [data-task-bootstrap-lab] .bootstrap-reading article, [data-task-bootstrap-lab] .tape-reading article { padding: .8rem; background: #eee9df; }
  [data-task-bootstrap-lab] .bootstrap-reading article.result, [data-task-bootstrap-lab] .tape-reading article.result { color: #edf4f1; background: #2f776c; }
  [data-task-bootstrap-lab] .bootstrap-reading span, [data-task-bootstrap-lab] .tape-reading span { font: .4rem/1.2 var(--font-mono); opacity: .7; }
  [data-task-bootstrap-lab] .bootstrap-reading b, [data-task-bootstrap-lab] .tape-reading b { display: block; margin-top: .4rem; font: 730 .62rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .bootstrap-reading p, [data-task-bootstrap-lab] .tape-reading p { margin: .35rem 0 0; opacity: .7; font-size: .46rem; line-height: 1.45; }
  [data-task-bootstrap-lab] .task-controls, [data-task-bootstrap-lab] .tape-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
  [data-task-bootstrap-lab] .task-controls label, [data-task-bootstrap-lab] .task-controls article, [data-task-bootstrap-lab] .tape-controls label { padding: .72rem; background: #eee9df; }
  [data-task-bootstrap-lab] .task-controls span, [data-task-bootstrap-lab] .tape-controls span { display: block; color: #6e7975; font: .4rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .task-controls select, [data-task-bootstrap-lab] .tape-controls select { width: 100%; margin-top: .38rem; padding: .42rem; border: 1px solid var(--line); background: #fffaf2; font: 650 .5rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .task-controls b { display: block; margin-top: .45rem; font: 730 .61rem/1.1 var(--font-mono); }
  [data-task-bootstrap-lab] .task-pages { display: grid; grid-template-columns: repeat(4,1fr); gap: .35rem; margin-top: .7rem; }
  [data-task-bootstrap-lab] .task-table, [data-task-bootstrap-lab] .tape-matrix { margin-top: .75rem; overflow: hidden; border: 1px solid var(--line); }
  [data-task-bootstrap-lab] .task-table > header, [data-task-bootstrap-lab] .task-table [data-tb-task-rows] > article { display: grid; grid-template-columns: 1.4fr repeat(4,.55fr) 1.75fr; gap: 1px; background: var(--line); }
  [data-task-bootstrap-lab] .task-table > header > * { padding: .55rem .35rem; color: #e9f0ee; background: #29434a; font: 620 .36rem/1.2 var(--font-mono); text-align: center; }
  [data-task-bootstrap-lab] .task-table > header > *:first-child, [data-task-bootstrap-lab] .task-table > header > *:last-child { text-align: left; }
  [data-task-bootstrap-lab] .task-table [data-tb-task-rows] article > span { display: flex; gap: .5rem; align-items: center; min-width: 0; padding: .55rem; background: #eee9df; }
  [data-task-bootstrap-lab] .task-table article > span small { color: var(--orange); font: .36rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .task-table article > span b { overflow: hidden; font: 650 .43rem/1.2 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
  [data-task-bootstrap-lab] .task-table article > i { display: grid; place-items: center; padding: .4rem; background: #f0dfd5; font-style: normal; }
  [data-task-bootstrap-lab] .task-table article > i.pass { background: #dcebe5; }
  [data-task-bootstrap-lab] .task-table article > i b { font: 760 .52rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .task-table article > i small { margin-top: .22rem; color: #6b7773; font: .32rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .task-table article > strong { display: grid; align-content: center; padding: .45rem .55rem; background: #eee9df; }
  [data-task-bootstrap-lab] .task-table article > strong.positive { background: #dcebe5; }
  [data-task-bootstrap-lab] .task-table article > strong.negative { background: #f0dfd5; }
  [data-task-bootstrap-lab] .task-table article > strong b { font: 700 .43rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .task-table article > strong small { margin-top: .25rem; color: #67736f; font: .33rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .transition-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: .75rem; border: 1px solid var(--line); background: var(--line); }
  [data-task-bootstrap-lab] .transition-cards article { padding: .7rem; background: #eee9df; }
  [data-task-bootstrap-lab] .transition-cards article.positive { background: #dcebe5; }
  [data-task-bootstrap-lab] .transition-cards article.negative { background: #f0dfd5; }
  [data-task-bootstrap-lab] .transition-cards span { color: #65736e; font: .4rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .transition-cards b { display: block; margin-top: .35rem; font: 730 .6rem/1.1 var(--font-mono); }
  [data-task-bootstrap-lab] .tape-matrix > header, [data-task-bootstrap-lab] .tape-matrix [data-tb-tape-rows] > article, [data-task-bootstrap-lab] .tape-matrix > footer { display: grid; grid-template-columns: 1.45fr repeat(4,.75fr) 1fr; gap: 1px; background: var(--line); }
  [data-task-bootstrap-lab] .tape-matrix > header > *, [data-task-bootstrap-lab] .tape-matrix > footer > * { padding: .58rem .4rem; color: #e8efed; background: #29434a; font: 650 .4rem/1.2 var(--font-mono); text-align: center; }
  [data-task-bootstrap-lab] .tape-matrix > header > *:first-child, [data-task-bootstrap-lab] .tape-matrix > footer > *:first-child { text-align: left; }
  [data-task-bootstrap-lab] .tape-matrix [data-tb-tape-rows] article > span, [data-task-bootstrap-lab] .tape-matrix [data-tb-tape-rows] article > strong { padding: .7rem .55rem; background: #eee9df; font: 650 .43rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .tape-matrix [data-tb-tape-rows] article > b { display: grid; place-items: center; color: #29433e; background: color-mix(in srgb,#8fc8bd calc(var(--strength) * 72%),#f7f3ea); font: 730 .5rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .tape-matrix [data-tb-tape-rows] article > b.negative { color: #5e3427; background: color-mix(in srgb,#dc9d78 calc(var(--strength) * 72%),#f7f3ea); }
  [data-task-bootstrap-lab] .tape-matrix [data-tb-tape-rows] article > b.zero { background: #f7f3ea; }
  [data-task-bootstrap-lab] .tape-matrix [data-tb-tape-rows] article > strong { text-align: center; }
  [data-task-bootstrap-lab] .replay-fields { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 1rem; border: 1px solid var(--line); background: var(--line); }
  [data-task-bootstrap-lab] .replay-fields article { padding: .7rem; background: #dfece7; }
  [data-task-bootstrap-lab] .replay-fields span { display: block; color: #58716b; font: .36rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .replay-fields b { display: block; margin-top: .32rem; color: #28675c; font: 740 .58rem/1.1 var(--font-mono); }
  [data-task-bootstrap-lab] .replay-fields i { display: block; margin-top: .23rem; color: #568178; font: .34rem/1 var(--font-mono); }
  [data-task-bootstrap-lab] .failure-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
  [data-task-bootstrap-lab] .failure-ledger > article { overflow: hidden; border: 1px solid var(--line); background: #eee9df; }
  [data-task-bootstrap-lab] .failure-ledger header { display: flex; justify-content: space-between; padding: .7rem; color: #e8efed; background: #29434a; }
  [data-task-bootstrap-lab] .failure-ledger header span { font: .4rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .failure-ledger header b { font: 720 .5rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .failure-ledger article > div { display: grid; grid-template-columns: 1.2fr 2fr .35fr; gap: .55rem; align-items: center; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
  [data-task-bootstrap-lab] .failure-ledger article > div:last-child { border-bottom: 0; }
  [data-task-bootstrap-lab] .failure-ledger div > span { font: .4rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .failure-ledger div > i { height: .36rem; background: #d8d2c8; }
  [data-task-bootstrap-lab] .failure-ledger div > i u { display: block; width: calc(var(--share) * 100%); height: 100%; background: #2f776c; text-decoration: none; }
  [data-task-bootstrap-lab] .failure-ledger div > b { font: 700 .44rem/1 var(--font-mono); text-align: right; }
  [data-task-bootstrap-lab] .deviation-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
  [data-task-bootstrap-lab] .deviation-ledger article { padding: .85rem; border: 1px solid var(--line); background: #eee9df; }
  [data-task-bootstrap-lab] .deviation-ledger article.reported-process-deviation { border-left: .25rem solid #bd6c46; }
  [data-task-bootstrap-lab] .deviation-ledger article.corrected-before-output { border-left: .25rem solid #2f776c; }
  [data-task-bootstrap-lab] .deviation-ledger span { color: var(--orange); font: .39rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .deviation-ledger b { display: block; margin-top: .38rem; font: 710 .58rem/1.2 var(--font-mono); text-transform: uppercase; }
  [data-task-bootstrap-lab] .deviation-ledger p { margin: .38rem 0 0; color: #69746f; font-size: .48rem; line-height: 1.55; }
  [data-task-bootstrap-lab] .artifact-chain { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 1rem; border: 1px solid var(--line); background: var(--line); }
  [data-task-bootstrap-lab] .artifact-chain article { min-width: 0; padding: .65rem; background: #eee9df; }
  [data-task-bootstrap-lab] .artifact-chain span { color: var(--orange); font: .36rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] .artifact-chain b { display: block; margin-top: .32rem; overflow: hidden; font: 650 .4rem/1.2 var(--font-mono); text-overflow: ellipsis; }
  [data-task-bootstrap-lab] > figcaption { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; color: #e2eae8; background: #203a42; }
  [data-task-bootstrap-lab] > figcaption b { color: #8dc8bd; font: 720 .48rem/1.2 var(--font-mono); }
  [data-task-bootstrap-lab] > figcaption span { font-size: .5rem; line-height: 1.5; }
  [data-task-bootstrap-lab] > figcaption code { color: #dda988; font: .38rem/1.3 var(--font-mono); }
  @media (max-width: 900px) {
    [data-task-bootstrap-lab] .tb-head, [data-task-bootstrap-lab] .tb-panel-lead { grid-template-columns: 1fr; }
    [data-task-bootstrap-lab] .tb-ledger { grid-template-columns: repeat(3,1fr); }
    [data-task-bootstrap-lab] .tb-tabs { grid-template-columns: repeat(3,1fr); }
    [data-task-bootstrap-lab] .sampler-pipeline, [data-task-bootstrap-lab] .evidence-pipeline { grid-template-columns: 1fr; }
    [data-task-bootstrap-lab] .sampler-pipeline > i, [data-task-bootstrap-lab] .evidence-pipeline > i { transform: rotate(90deg); text-align: center; }
    [data-task-bootstrap-lab] .replay-fields, [data-task-bootstrap-lab] .artifact-chain { grid-template-columns: 1fr 1fr; }
    [data-task-bootstrap-lab] > figcaption { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    [data-task-bootstrap-lab] .tb-panel { padding: .9rem; }
    [data-task-bootstrap-lab] .tb-head { padding: 1.2rem; }
    [data-task-bootstrap-lab] .tb-tabs, [data-task-bootstrap-lab] .pairing-compare,
    [data-task-bootstrap-lab] .tb-switch-row, [data-task-bootstrap-lab] .task-controls,
    [data-task-bootstrap-lab] .tape-controls, [data-task-bootstrap-lab] .bootstrap-reading,
    [data-task-bootstrap-lab] .tape-reading, [data-task-bootstrap-lab] .failure-ledger,
    [data-task-bootstrap-lab] .deviation-ledger { display: grid; grid-template-columns: 1fr; }
    [data-task-bootstrap-lab] .tb-switch-row > div { display: grid; grid-template-columns: 1fr 1fr; }
    [data-task-bootstrap-lab] .condition-cards, [data-task-bootstrap-lab] .transition-cards { grid-template-columns: 1fr 1fr; }
    [data-task-bootstrap-lab] .uniform-demo > header { display: grid; }
    [data-task-bootstrap-lab] .uniform-bars { grid-template-columns: repeat(4,1fr); height: auto; }
    [data-task-bootstrap-lab] .uniform-bars article { min-height: 6.5rem; }
    [data-task-bootstrap-lab] .token-lanes article { grid-template-columns: 1fr; }
    [data-task-bootstrap-lab] .token-lanes article > div { overflow-x: auto; }
    [data-task-bootstrap-lab] .forest [data-tb-forest] > article { grid-template-columns: 1fr; }
    [data-task-bootstrap-lab] .forest article > i { margin: .45rem 0; }
    [data-task-bootstrap-lab] .task-table, [data-task-bootstrap-lab] .tape-matrix { overflow-x: auto; }
    [data-task-bootstrap-lab] .task-table > header, [data-task-bootstrap-lab] .task-table [data-tb-task-rows] > article { min-width: 44rem; }
    [data-task-bootstrap-lab] .tape-matrix > header, [data-task-bootstrap-lab] .tape-matrix [data-tb-tape-rows] > article, [data-task-bootstrap-lab] .tape-matrix > footer { min-width: 36rem; }
  }
</style>