wuyang/llm-atlas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add task bootstrap CRN lab

Browse Source
This commit is contained in:
wuyang
2026-07-30 06:15:45 +08:00
parent f041c15e81
commit 975ed3dce2
11 changed files with 1199 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DeepSeekTaskBootstrapLab.astro
+827
View File
@@ -0,0 +1,827 @@
---
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>