Upload 4 files

app.js

@@ -0,0 +1,566 @@
+const data = window.REPORT_DATA;
+
+const groupDefinitions = [
+  {
+    id: "kimi-k2",
+    label: "Kimi-K2.5 / K2.6",
+    members: ["moonshotai/Kimi-K2.5", "moonshotai/Kimi-K2.6"],
+    note: "Shared TypeScript-style tool declaration output across K2.5 and K2.6.",
+  },
+  {
+    id: "minimax-m2",
+    label: "MiniMax-M2.5 / M2.7",
+    members: ["MiniMaxAI/MiniMax-M2.5", "MiniMaxAI/MiniMax-M2.7"],
+    note: "Same XML/tag-style tool rendering; model-name boilerplate differs.",
+  },
+  {
+    id: "qwen-3",
+    label: "Qwen3.5 / Qwen3.6",
+    members: ["Qwen/Qwen3.5-397B-A17B", "Qwen/Qwen3.6-35B-A3B"],
+    note: "Shared XML/tag-style tool rendering in the sampled cases.",
+  },
+];
+
+const modelByName = new Map(data.models.map((model) => [model.model, model]));
+const groupedNames = new Set(groupDefinitions.flatMap((group) => group.members));
+const modelGroups = [
+  ...data.models
+    .filter((model) => !groupedNames.has(model.model))
+    .map((model) => ({
+      id: model.model,
+      label: shortModel(model.model),
+      members: [model.model],
+      note: "",
+    })),
+  ...groupDefinitions,
+]
+  .map((group) => ({
+    ...group,
+    models: group.members.map((name) => modelByName.get(name)).filter(Boolean),
+  }))
+  .filter((group) => group.models.length)
+  .sort((a, b) => a.label.localeCompare(b.label));
+
+const state = {
+  page: location.hash === "#matrix" ? "matrix" : "overview",
+  group: modelGroups[0]?.id,
+  caseId: "minimal_string_required",
+  examplePath: "",
+  dialect: "all",
+  view: "output",
+};
+
+const featuredCases = [
+  "minimal_string_required",
+  "nested_arrays_enums",
+  "nullable_anyof_refs",
+  "oneof_allof_constraints",
+];
+
+const caseLabels = {
+  minimal_string_required: "Simple required string",
+  nested_arrays_enums: "Nested arrays + enums",
+  nullable_anyof_refs: "Refs + nullable anyOf",
+  oneof_allof_constraints: "oneOf/allOf stress",
+};
+
+const featureNames = [
+  "tool_name",
+  "description",
+  "parameters",
+  "properties",
+  "required",
+  "array",
+  "enum",
+  "anyOf",
+  "oneOf",
+  "ref",
+  "default",
+  "additionalProperties",
+];
+
+function $(id) {
+  return document.getElementById(id);
+}
+
+function label(value) {
+  return String(value ?? "—").replaceAll("_", " ");
+}
+
+function shortModel(model) {
+  return model.split("/").pop();
+}
+
+function family(model) {
+  return model.split("/")[0] || model;
+}
+
+function selectedModel() {
+  return selectedGroup().models[0] || data.models[0];
+}
+
+function selectedGroup() {
+  return modelGroups.find((group) => group.id === state.group) || modelGroups[0];
+}
+
+function caseInfo(id) {
+  return data.cases.find((item) => item.id === id) || data.cases[0];
+}
+
+function isGood(status) {
+  return typeof status === "string" && (status.startsWith("present") || status.startsWith("transformed"));
+}
+
+function statusClass(status) {
+  if (status === "not_applicable") return "na";
+  return isGood(status) ? "good" : "warn";
+}
+
+function dialectLabel(dialect) {
+  const labels = {
+    typescript: "TypeScript-style declarations",
+    xml: "XML/tag-style instructions",
+    json: "JSON tool block",
+    "custom-channel": "Custom channel syntax",
+    "message-json": "Message functions JSON",
+    builtin: "Builtin tool block",
+    other: "Other",
+  };
+  return labels[dialect] || label(dialect);
+}
+
+function supportCoverage(model) {
+  if (model.support_variant === "tools_argument") return `${model.standard_supported}/${model.case_count}`;
+  if (model.support_variant === "message_functions_json") return `${model.message_supported}/${model.case_count}`;
+  if (model.support_variant === "special_modes") return `${model.special_supported}/${model.special_total}`;
+  if (model.support_variant?.startsWith("custom_")) return `${model.custom_supported}/${model.case_count}`;
+  return `${Math.max(model.standard_supported, model.custom_supported, model.message_supported)}/${model.case_count}`;
+}
+
+function filteredModels() {
+  return modelGroups.filter((group) => {
+    return state.dialect === "all" || group.models.some((model) => model.dialect === state.dialect);
+  });
+}
+
+function renderModelList() {
+  $("model-list").innerHTML = filteredModels()
+    .map((group) => {
+      const model = group.models[0];
+      return `
+      <button class="model-card ${model.dialect} ${state.page === "matrix" && group.id === state.group ? "active" : ""}" type="button" data-group="${group.id}">
+        <strong>${group.label}</strong>
+        <span>${dialectLabel(model.dialect)}</span>
+      </button>
+    `;
+    })
+    .join("");
+}
+
+function chooseDefaultExample(model) {
+  const current = model.cases[state.caseId]?.[model.support_variant]?.rendered_path;
+  if (current) return current;
+  for (const variant of Object.values(model.cases[state.caseId] || {})) {
+    if (variant.rendered_path) return variant.rendered_path;
+  }
+  if (model.representative_paths?.length) return model.representative_paths[0];
+  for (const variants of Object.values(model.cases)) {
+    for (const variant of Object.values(variants)) {
+      if (variant.rendered_path) return variant.rendered_path;
+    }
+  }
+  return Object.keys(data.snippets)[0];
+}
+
+function availableExamples(model) {
+  const paths = [];
+  const variants = model.cases[state.caseId] || {};
+  if (variants[model.support_variant]?.rendered_path) {
+    paths.push(variants[model.support_variant].rendered_path);
+  }
+  for (const variant of Object.values(variants)) {
+    if (variant.meaningful && variant.rendered_path) paths.push(variant.rendered_path);
+  }
+  return [...new Set(paths)];
+}
+
+function renderHeader(group) {
+  const model = group.models[0];
+  $("active-family").textContent = group.models.length > 1 ? family(model.model) : family(model.model);
+  $("active-model").textContent = group.label;
+  $("active-summary").textContent =
+    `${dialectLabel(model.dialect)}. ${group.note || model.support_detail} This view shows one representative rendered prompt; evidence packets for each grouped model are kept below.`;
+  $("active-summary").style.borderLeftColor = `var(--${model.dialect})`;
+  $("active-dialect").textContent = dialectLabel(model.dialect);
+  $("active-path").textContent = model.support_path;
+  $("active-coverage").textContent = group.models.length > 1 ? `${supportCoverage(model)} each` : `${supportCoverage(model)} cases`;
+}
+
+function renderExamples(model) {
+  const paths = availableExamples(model);
+  if (!paths.length) {
+    state.examplePath = "";
+    $("rendered-output").innerHTML = unsupportedMessage(model);
+    renderViewMode();
+    return;
+  }
+  if (!paths.includes(state.examplePath)) state.examplePath = paths[0];
+  renderOutput(model);
+}
+
+function renderCases(model) {
+  $("case-tabs").innerHTML = featuredCases
+    .filter((id) => model.cases[id])
+    .map((id) => {
+      const supported = hasMeaningfulOutput(model, id);
+      const title = supported ? "Rendered output available" : "Input example only; no meaningful rendered output for this model/path";
+      return `<button type="button" class="${id === state.caseId ? "active" : ""} ${supported ? "" : "unsupported"}" data-case="${id}" title="${title}">${caseLabels[id] || caseInfo(id).label}</button>`;
+    })
+    .join("");
+  $("case-description").textContent = caseInfo(state.caseId).description;
+  $("case-title").textContent = caseLabels[state.caseId] || caseInfo(state.caseId).label;
+  renderInputSchema();
+}
+
+function hasMeaningfulOutput(model, caseId) {
+  const variants = model.cases[caseId] || {};
+  return Object.values(variants).some((variant) => variant.meaningful && variant.rendered_path);
+}
+
+function renderInputSchema() {
+  const item = caseInfo(state.caseId);
+  $("input-schema").innerHTML = highlightInputJson(JSON.stringify(item.schema.tools, null, 2));
+}
+
+function renderOutput(model) {
+  if (!state.examplePath) {
+    $("rendered-output").innerHTML = unsupportedMessage(model);
+    return;
+  }
+  const text = data.snippets[state.examplePath] || "No rendered prompt available for this selection.";
+  $("rendered-output").innerHTML = highlightRendered(text, caseInfo(state.caseId));
+}
+
+function unsupportedMessage(model) {
+  const variant = model.cases[state.caseId]?.[model.support_variant];
+  const reason = variant?.error ? ` Renderer error: ${escapeHtml(variant.error)}.` : "";
+  return `<span class="empty-render">No meaningful model-visible output was produced for <strong>${escapeHtml(caseLabels[state.caseId] || caseInfo(state.caseId).label)}</strong> using ${escapeHtml(model.support_path)}.${reason} Use <strong>Tool Definition</strong> to inspect the JSON schema that failed this renderer.</span>`;
+}
+
+function renderViewMode() {
+  const isOutput = state.view === "output";
+  $("rendered-output").hidden = !isOutput;
+  $("input-schema").hidden = isOutput;
+  for (const button of document.querySelectorAll("[data-view]")) {
+    const active = button.dataset.view === state.view;
+    button.classList.toggle("active", active);
+    button.setAttribute("aria-selected", String(active));
+  }
+}
+
+function renderPage() {
+  const isOverview = state.page === "overview";
+  $("overview-panel").hidden = !isOverview;
+  $("matrix-view").hidden = isOverview;
+  $("overview-link").classList.toggle("active", isOverview);
+  if (location.hash !== (isOverview ? "#overview" : "#matrix")) {
+    history.replaceState(null, "", isOverview ? "#overview" : "#matrix");
+  }
+}
+
+function highlightInputJson(text) {
+  return escapeHtml(text).replace(
+    /(&quot;(name|description|parameters|properties|required|type|enum|items|anyOf|oneOf|allOf|\$defs|\$ref|default|additionalProperties|minimum)&quot;)/g,
+    '<span class="schema-token">$1</span>',
+  );
+}
+
+function highlightRendered(text, item) {
+  const boilerplatePattern = /knowledge cutoff|current date|general guidelines|multimodal|you are |system_prompt|reasoning mode|today date|user<|<\|user|accurately answer|be very attentive/i;
+  return highlightRenderedTokens(text, item, boilerplatePattern);
+}
+
+function highlightRenderedTokens(text, item, boilerplatePattern) {
+  let escaped = escapeHtml(text);
+  for (const name of item.tool_names || []) {
+    escaped = escaped.replaceAll(escapeHtml(name), `<span class="tool-token">${escapeHtml(name)}</span>`);
+  }
+  escaped = escaped.replace(
+    /\b(parameters|properties|required|enum|anyOf|oneOf|allOf|additionalProperties|tool_call|AVAILABLE_TOOLS|namespace functions|DSML|tool_declare)\b/g,
+    '<span class="schema-token-output">$1</span>',
+  );
+  escaped = escaped
+    .split("\n")
+    .map((line) => (boilerplatePattern.test(line) ? `<span class="boilerplate-token">${line}</span>` : line))
+    .join("\n");
+  return escaped;
+}
+
+function currentVariant(model) {
+  const variants = model.cases[state.caseId] || {};
+  return variants[model.support_variant] || Object.values(variants).find((variant) => variant.meaningful) || Object.values(variants)[0];
+}
+
+function renderFeatures(model) {
+  const variant = currentVariant(model);
+  if (!variant) {
+    $("feature-list").innerHTML = `<p class="muted">No feature packet for this case.</p>`;
+    return;
+  }
+  $("feature-list").innerHTML = featureNames
+    .map((name) => {
+      const status = variant.features?.[name] || "not_applicable";
+      return `
+        <div class="feature-row">
+          <strong>${label(name)}</strong>
+          <span class="status ${statusClass(status)}">${label(status)}</span>
+        </div>
+      `;
+    })
+    .join("");
+}
+
+function renderSpecialModes(model) {
+  const modes = model.special_modes || [];
+  const notes = model.highlighted_notes || [];
+  if (!modes.length && !notes.length) {
+    $("special-list").innerHTML = `<p class="muted">No special/builtin probes or highlighted special-tool notes in this evidence set.</p>`;
+    return;
+  }
+  const modeHtml = modes
+    .map((mode) => `
+      <button class="special-row" type="button" data-path="${mode.rendered_path || ""}">
+        <strong>${label(mode.probe_id)}</strong>
+        <span class="status ${mode.meaningful && mode.counts_as_special_tool ? "good" : "warn"}">${label(mode.category || mode.style_family)} · ${mode.token_count ?? "—"} tokens</span>
+        <small>${escapeHtml(mode.description || "")}</small>
+      </button>
+    `)
+    .join("");
+  const notesHtml = notes
+    .map((note) => `
+      <div class="special-row note-row">
+        <strong>${escapeHtml(note.title)}</strong>
+        <span class="status warn">${escapeHtml(note.category)}</span>
+        <small>${escapeHtml(note.detail)}</small>
+        ${note.evidence ? `<small class="evidence-path">${escapeHtml(note.evidence)}</small>` : ""}
+      </div>
+    `)
+    .join("");
+  $("special-list").innerHTML = modeHtml + notesHtml;
+}
+
+function stringifyEvidence(item) {
+  if (item.snippet) return item.snippet;
+  if (item.observation) return item.observation;
+  if (item.artifact) return item.artifact;
+  return JSON.stringify(item, null, 2);
+}
+
+function renderClaims(group) {
+  const sections = group.models.map((model) => {
+    const claims = model.findings_packet?.claims || [];
+    if (!claims.length) {
+      return `<section class="packet-group"><h4>${model.model}</h4><p class="muted">No findings JSON packet found for this model.</p></section>`;
+    }
+    return `
+      <section class="packet-group">
+        <h4>${model.model}</h4>
+        ${claims
+          .map((claim, index) => `
+            <details class="claim" ${index === 0 ? "open" : ""}>
+              <summary>
+                <strong>${label(claim.evidence_class)} · ${claim.confidence || "confidence unknown"}</strong>
+                <p>${escapeHtml(claim.claim)}</p>
+              </summary>
+              <div class="claim-body">
+                ${(claim.evidence || []).map((item) => `<div class="evidence-item">${escapeHtml(stringifyEvidence(item))}</div>`).join("")}
+              </div>
+            </details>
+          `)
+          .join("")}
+      </section>
+    `;
+  });
+  $("claims").innerHTML = sections.join("");
+}
+
+function escapeHtml(text) {
+  return String(text)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+function renderAll() {
+  const group = selectedGroup();
+  const model = group.models[0];
+  renderPage();
+  renderModelList();
+  renderHeader(group);
+  renderExamples(model);
+  renderCases(model);
+  renderFeatures(model);
+  renderSpecialModes(model);
+  renderClaims(group);
+  renderViewMode();
+}
+
+function bindEvents() {
+  $("overview-link").addEventListener("click", () => {
+    state.page = "overview";
+    renderAll();
+  });
+
+  $("dialect-filter").addEventListener("click", (event) => {
+    const button = event.target.closest("[data-dialect]");
+    if (!button) return;
+    state.dialect = button.dataset.dialect;
+    for (const item of $("dialect-filter").querySelectorAll("[data-dialect]")) {
+      item.classList.toggle("active", item.dataset.dialect === state.dialect);
+    }
+    const visible = filteredModels();
+    if (visible.length && !visible.some((group) => group.id === state.group)) {
+      state.group = visible[0].id;
+      state.examplePath = chooseDefaultExample(visible[0].models[0]);
+      renderAll();
+      return;
+    }
+    renderModelList();
+  });
+
+  $("model-list").addEventListener("click", (event) => {
+    const button = event.target.closest("[data-group]");
+    if (!button) return;
+    state.page = "matrix";
+    state.group = button.dataset.group;
+    const model = selectedModel();
+    state.examplePath = chooseDefaultExample(model);
+    renderAll();
+  });
+
+  $("case-tabs").addEventListener("click", (event) => {
+    const button = event.target.closest("[data-case]");
+    if (!button) return;
+    state.caseId = button.dataset.case;
+    const model = selectedModel();
+    const path = model.cases[state.caseId]?.[model.support_variant]?.rendered_path;
+    if (path) state.examplePath = path;
+    renderAll();
+  });
+
+  document.querySelector(".view-tabs").addEventListener("click", (event) => {
+    const button = event.target.closest("[data-view]");
+    if (!button) return;
+    state.view = button.dataset.view;
+    renderViewMode();
+  });
+
+  $("special-list").addEventListener("click", (event) => {
+    const button = event.target.closest("[data-path]");
+    if (!button?.dataset.path) return;
+    state.examplePath = button.dataset.path;
+    renderOutput(selectedModel());
+  });
+
+  window.addEventListener("hashchange", () => {
+    state.page = location.hash === "#matrix" ? "matrix" : "overview";
+    renderAll();
+  });
+}
+
+function renderMarkdownSummary() {
+  const md = data.overview?.summary;
+  if (!md) return;
+  let titleRewritten = false;
+  const lines = md.split("\n");
+  const parts = [];
+  let paragraph = [];
+  let list = [];
+
+  const inline = (text) =>
+    escapeHtml(text)
+      .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+      .replace(/`([^`]+)`/g, "<code>$1</code>");
+
+  const flushParagraph = () => {
+    if (!paragraph.length) return;
+    parts.push(`<p>${inline(paragraph.join(" "))}</p>`);
+    paragraph = [];
+  };
+
+  const flushList = () => {
+    if (!list.length) return;
+    parts.push(`<ul>${list.map((item) => `<li>${inline(item)}</li>`).join("")}</ul>`);
+    list = [];
+  };
+
+  const isTableDivider = (line) => /^\|\s*[-:| ]+\s*\|$/.test(line);
+  const cells = (line) => line.split("|").slice(1, -1).map((cell) => inline(cell.trim()));
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index].trim();
+    if (!line) {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+
+    if (line.startsWith("|") && lines[index + 1] && isTableDivider(lines[index + 1].trim())) {
+      flushParagraph();
+      flushList();
+      const headers = cells(line).map((cell) => `<th>${cell}</th>`).join("");
+      index += 2;
+      const rows = [];
+      while (index < lines.length && lines[index].trim().startsWith("|")) {
+        rows.push(`<tr>${cells(lines[index].trim()).map((cell) => `<td>${cell}</td>`).join("")}</tr>`);
+        index += 1;
+      }
+      index -= 1;
+      parts.push(`<div class="table-wrap"><table><thead><tr>${headers}</tr></thead><tbody>${rows.join("")}</tbody></table></div>`);
+      continue;
+    }
+
+    const heading = line.match(/^(#{1,3})\s+(.+)$/);
+    if (heading) {
+      flushParagraph();
+      flushList();
+      const level = heading[1].length;
+      let text = heading[2];
+      if (level === 1 && !titleRewritten) {
+        text = "Tool Schema Rendering Atlas - Summary";
+        titleRewritten = true;
+      }
+      const tag = level === 1 ? "h2" : level === 2 ? "h3" : "h4";
+      parts.push(`<${tag}>${inline(text)}</${tag}>`);
+      continue;
+    }
+
+    const date = line.match(/^_(.+)_$/);
+    if (date) {
+      flushParagraph();
+      flushList();
+      parts.push(`<p class="summary-date">${inline(date[1])}</p>`);
+      continue;
+    }
+
+    const bullet = line.match(/^-\s+(.+)$/);
+    if (bullet) {
+      flushParagraph();
+      list.push(bullet[1]);
+      continue;
+    }
+
+    flushList();
+    paragraph.push(line);
+  }
+
+  flushParagraph();
+  flushList();
+  const html = parts.join("");
+  $("exec-summary").innerHTML = `<p class="eyebrow">Executive summary</p>${html}`;
+}
+
+renderMarkdownSummary();
+bindEvents();
+renderAll();

index.html

@@ -1,19 +1,186 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tool Schema Rendering Atlas</title>
+    <meta
+      name="description"
+      content="Model-centric report showing how JSON tool definitions are rendered into prompts."
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..800&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Fira+Code:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main class="app-shell">
+      <aside class="model-rail" aria-label="Models">
+        <div class="rail-head">
+          <p class="eyebrow">Tool Schema Rendering Atlas</p>
+        </div>
+
+        <button id="overview-link" class="overview-link" type="button">
+          <strong>Overview &amp; method</strong>
+          <span>What models see, and how this report was built</span>
+        </button>
+
+        <div class="legend" id="dialect-filter" aria-label="Dialect filter">
+          <button type="button" data-dialect="all" class="active">All</button>
+          <button type="button" data-dialect="typescript"><i class="dot typescript"></i>TypeScript</button>
+          <button type="button" data-dialect="xml"><i class="dot xml"></i>XML/tags</button>
+          <button type="button" data-dialect="json"><i class="dot json"></i>JSON</button>
+          <button type="button" data-dialect="custom-channel"><i class="dot custom-channel"></i>Custom</button>
+          <button type="button" data-dialect="message-json"><i class="dot message-json"></i>Message JSON</button>
+        </div>
+
+        <div id="model-list" class="model-list"></div>
+      </aside>
+
+      <section class="model-workspace">
+        <section id="overview-panel" class="overview-panel" hidden>
+          <div class="overview-hero">
+            <p class="eyebrow">What Do Models See?</p>
+            <h2>Tool schemas become prompt text.</h2>
+            <p>
+              This atlas compares what a model receives after a JSON tool definition has passed through tokenizer-aware chat templates, provider-style tool renderers, or model-supplied custom renderers.
+            </p>
+          </div>
+
+          <div class="method-diagram" aria-label="Methodology diagram">
+            <div class="method-step">
+              <span>1</span>
+              <strong>Tool definition</strong>
+              <p>Start from shared OpenAI-style JSON tool definitions covering required strings, nested arrays, enums, refs, nullable unions, and oneOf/allOf stress cases.</p>
+            </div>
+            <div class="method-arrow">→</div>
+            <div class="method-step">
+              <span>2</span>
+              <strong>Tokenizer + template</strong>
+              <p>Download the model tokenizer where available, inspect its chat template and tool-use conventions, then render through realistic tokenizer templates or model-supplied custom renderer code.</p>
+            </div>
+            <div class="method-arrow">→</div>
+            <div class="method-step">
+              <span>3</span>
+              <strong>Model-visible output</strong>
+              <p>Compare the rendered prompt text, feature survival, special modes, and copied evidence claims so each model’s tool dialect remains auditable.</p>
+            </div>
+          </div>
+
+          <div class="method-notes">
+            <section>
+              <p class="eyebrow">Reading The Report</p>
+              <h3>Start with a model, then compare the same input case across dialects.</h3>
+              <p>
+                The left rail groups models with identical sampled renderings, while the evidence section keeps each underlying packet visible. The right inspector records which schema features survived the template render.
+              </p>
+            </section>
+            <section>
+              <p class="eyebrow">Reading The Output</p>
+              <h3>The rendered prompt is shown whole.</h3>
+              <p>
+                Inline highlights call out tool names and schema-bearing keywords, but the report keeps the full rendered text visible so boilerplate, wrappers, and surrounding template instructions remain auditable.
+              </p>
+            </section>
+          </div>
+
+          <section class="exec-summary" id="exec-summary"></section>
+        </section>
+
+        <div id="matrix-view">
+          <header class="workspace-head">
+            <div>
+              <p class="eyebrow" id="active-family">Selected model</p>
+              <h2 id="active-model">Model</h2>
+              <p id="active-summary" class="summary-text"></p>
+            </div>
+            <div class="snapshot">
+              <div>
+                <span>Dialect</span>
+                <strong id="active-dialect">—</strong>
+              </div>
+              <div>
+                <span>Support path</span>
+                <strong id="active-path">—</strong>
+              </div>
+              <div>
+                <span>Coverage</span>
+                <strong id="active-coverage">—</strong>
+              </div>
+            </div>
+          </header>
+
+          <section class="studio">
+            <div class="prompt-panel">
+              <div class="panel-head">
+                <div>
+                  <h3 id="case-title">Same JSON tool schema, model-specific prompt dialect</h3>
+                </div>
+                <div class="case-picker">
+                  <span>Example tool definition</span>
+                  <div id="case-tabs" class="case-tabs" aria-label="Example tool definitions"></div>
+                </div>
+              </div>
+
+              <div class="view-tabs" role="tablist" aria-label="Transformation view">
+                <button id="input-tab" type="button" data-view="input" role="tab" aria-selected="false">
+                  Tool Definition
+                </button>
+                <button id="output-tab" type="button" class="active" data-view="output" role="tab" aria-selected="true">
+                  Model Visible Output
+                </button>
+                <div class="tab-tools">
+                </div>
+              </div>
+              <p class="render-caveat">
+                Template render evidence only. Hosted APIs or serving layers may normalize, reject, or rewrite tool schemas before the model receives them.
+              </p>
+
+              <pre id="rendered-output" class="code-pane rendered-code" tabindex="0"></pre>
+              <pre id="input-schema" class="code-pane input-code" tabindex="0" hidden></pre>
+
+              <div class="output-legend" aria-label="Inline token highlight legend">
+                <span><i class="swatch tool"></i>Tool names</span>
+                <span><i class="swatch schema"></i>Schema keywords</span>
+                <span><i class="swatch boilerplate"></i>Boilerplate text</span>
+              </div>
+            </div>
+
+            <aside class="inspector">
+              <div class="inspector-section">
+                <p class="eyebrow">Current transformation</p>
+                <p id="case-description" class="muted"></p>
+              </div>
+
+              <div class="inspector-section">
+                <p class="eyebrow">Feature survival</p>
+                <div id="feature-list" class="feature-list"></div>
+              </div>
+
+              <div class="inspector-section">
+                <p class="eyebrow">Special modes</p>
+                <div id="special-list" class="special-list"></div>
+              </div>
+            </aside>
+          </section>
+
+          <section class="evidence-packets">
+            <div class="panel-head">
+              <div>
+                <p class="eyebrow">Evidence packet</p>
+                <h3>Claims copied from each selected model’s findings JSON</h3>
+              </div>
+            </div>
+            <div id="claims" class="claims"></div>
+          </section>
+        </div>
+      </section>
+    </main>
+
+    <script src="./data.js"></script>
+    <script src="./app.js"></script>
+  </body>
 </html>

styles.css

@@ -0,0 +1,1076 @@
+/* ═══════════════════════════════════════════════════════════════
+   Tool Schema Rendering Atlas — Warm Editorial Theme
+   ═══════════════════════════════════════════════════════════════ */
+
+:root {
+  color-scheme: light;
+
+  /* ── Surface palette ──────────────────────────────────────── */
+  --ink:     #1a1d21;
+  --muted:   #6b7280;
+  --paper:   #faf8f5;
+  --panel:   #ffffff;
+  --surface: #f5f2ed;
+  --line:    #e2dfd8;
+  --soft:    #edeae4;
+
+  /* ── Dialect accent colors (rich & saturated for light) ──── */
+  --typescript:     #3b5fc0;
+  --xml:            #0a7558;
+  --json:           #a67612;
+  --custom-channel: #c43730;
+  --message-json:   #7c4dba;
+  --builtin:        #2d6f91;
+  --other:          #6b7280;
+
+  /* ── Tinted backgrounds for active states ─────────────────── */
+  --tint-ts:   rgba(59, 95, 192, 0.07);
+  --tint-xml:  rgba(10, 117, 88, 0.07);
+  --tint-json: rgba(166, 118, 18, 0.07);
+  --tint-cc:   rgba(196, 55, 48, 0.07);
+  --tint-mj:   rgba(124, 77, 186, 0.07);
+
+  --shadow: 0 12px 40px rgba(26, 29, 33, 0.06), 0 2px 8px rgba(26, 29, 33, 0.04);
+  --shadow-sm: 0 4px 14px rgba(26, 29, 33, 0.05);
+  --shadow-up: 0 -2px 12px rgba(26, 29, 33, 0.04);
+
+  --mono: "Fira Code", "SFMono-Regular", "Cascadia Code", "Liberation Mono", monospace;
+  --sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --serif: "Fraunces", "Georgia", serif;
+
+  font-family: var(--sans);
+  font-optical-sizing: auto;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  background: var(--paper);
+  color: var(--ink);
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Fine grain texture for a printed/paper feel */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E");
+  pointer-events: none;
+  z-index: 9999;
+}
+
+button, select { font: inherit; }
+code, pre { font-family: var(--mono); }
+
+/* ── Shell Layout ───────────────────────────────────────────── */
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 348px minmax(0, 1fr);
+  min-height: 100svh;
+}
+
+/* ── Sidebar Rail ───────────────────────────────────────────── */
+
+.model-rail {
+  background:
+    linear-gradient(180deg, #fdfcfa 0%, var(--paper) 100%);
+  border-right: 1px solid var(--line);
+  height: 100svh;
+  overflow: auto;
+  padding: 22px 20px;
+  position: sticky;
+  top: 0;
+}
+
+.rail-head { margin-bottom: 12px; }
+
+/* ── Overview Link Button ───────────────────────────────────── */
+
+.overview-link {
+  background: var(--ink);
+  border: 1px solid var(--ink);
+  border-radius: 10px;
+  color: #fff;
+  cursor: pointer;
+  display: grid;
+  gap: 4px;
+  margin-bottom: 14px;
+  min-height: 60px;
+  padding: 12px 14px;
+  text-align: left;
+  transition: box-shadow 200ms ease, transform 200ms ease;
+  width: 100%;
+}
+
+.overview-link:hover {
+  box-shadow: 0 8px 24px rgba(26, 29, 33, 0.18);
+  transform: translateY(-1px);
+}
+
+.overview-link:not(.active) {
+  background: var(--panel);
+  border-color: var(--line);
+  color: var(--ink);
+}
+
+.overview-link:not(.active):hover {
+  border-color: #c8c4bc;
+  box-shadow: var(--shadow-sm);
+}
+
+.overview-link strong {
+  font-size: 14px;
+  line-height: 1.25;
+}
+
+.overview-link span {
+  color: rgba(255, 255, 255, 0.62);
+  font-size: 12px;
+  font-weight: 620;
+  line-height: 1.35;
+}
+
+.overview-link:not(.active) span { color: var(--muted); }
+
+/* ── Shared Text Styles ─────────────────────────────────────── */
+
+.summary-text,
+.muted {
+  color: var(--muted);
+  line-height: 1.52;
+}
+
+.eyebrow {
+  color: #8c8a84;
+  font-family: var(--sans);
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  margin: 0 0 9px;
+  text-transform: uppercase;
+}
+
+select {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  color: var(--ink);
+  min-height: 42px;
+  padding: 0 12px;
+  width: 100%;
+}
+
+/* ── Dialect Filter Legend ────────────��──────────────────────── */
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 16px 0;
+}
+
+.legend button {
+  align-items: center;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 11px;
+  font-weight: 650;
+  gap: 5px;
+  min-height: 27px;
+  padding: 0 10px;
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
+}
+
+.legend button:hover {
+  border-color: #c8c4bc;
+  color: var(--ink);
+}
+
+.legend button.active {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(26, 29, 33, 0.15);
+}
+
+/* ── Dialect Dots ───────────────────────────────────────────── */
+
+.dot {
+  border-radius: 50%;
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+}
+
+.dot.typescript,     .model-card.typescript::before { background: var(--typescript); }
+.dot.xml,            .model-card.xml::before        { background: var(--xml); }
+.dot.json,           .model-card.json::before        { background: var(--json); }
+.dot.custom-channel, .model-card.custom-channel::before { background: var(--custom-channel); }
+.dot.message-json,   .model-card.message-json::before   { background: var(--message-json); }
+
+/* ── Model Card List ────────────────────────────────────────── */
+
+.model-list {
+  display: grid;
+  gap: 6px;
+}
+
+.model-card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  color: var(--ink);
+  cursor: pointer;
+  display: grid;
+  gap: 3px;
+  overflow: hidden;
+  min-height: 52px;
+  padding: 10px 12px 10px 17px;
+  position: relative;
+  text-align: left;
+  transition: background 160ms ease, transform 160ms ease, border-color 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
+}
+
+.model-card::before {
+  content: "";
+  inset: 0 auto 0 0;
+  position: absolute;
+  width: 4px;
+}
+
+.model-list:has(.model-card.active) .model-card:not(.active) { opacity: 0.55; }
+.model-list:has(.model-card.active) .model-card:not(.active):hover { opacity: 1; }
+
+.model-card:hover {
+  border-color: #c8c4bc;
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+/* ── Per-dialect active glow tints ──────────────────────────── */
+
+.model-card.active {
+  background: var(--tint-xml);
+  border-color: var(--xml);
+  box-shadow: 0 0 0 3px rgba(10, 117, 88, 0.08), var(--shadow-sm);
+}
+
+.model-card.typescript.active {
+  background: var(--tint-ts);
+  border-color: var(--typescript);
+  box-shadow: 0 0 0 3px rgba(59, 95, 192, 0.08), var(--shadow-sm);
+}
+
+.model-card.json.active {
+  background: var(--tint-json);
+  border-color: var(--json);
+  box-shadow: 0 0 0 3px rgba(166, 118, 18, 0.08), var(--shadow-sm);
+}
+
+.model-card.custom-channel.active {
+  background: var(--tint-cc);
+  border-color: var(--custom-channel);
+  box-shadow: 0 0 0 3px rgba(196, 55, 48, 0.08), var(--shadow-sm);
+}
+
+.model-card.message-json.active {
+  background: var(--tint-mj);
+  border-color: var(--message-json);
+  box-shadow: 0 0 0 3px rgba(124, 77, 186, 0.08), var(--shadow-sm);
+}
+
+.model-card strong {
+  font-size: 13.5px;
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.model-card span {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+/* ── Summary Bar ────────────────────────────────────────────── */
+
+.summary-text {
+  background: var(--surface);
+  border-left: 4px solid var(--custom-channel);
+  border-radius: 6px;
+  color: #4a4f57;
+  display: -webkit-box;
+  font-size: 14px;
+  font-weight: 560;
+  height: 72px;
+  line-clamp: 3;
+  line-height: 1.48;
+  margin: 0;
+  max-width: 780px;
+  overflow: hidden;
+  padding: 11px 14px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+/* ── Workspace ──────────────────────────────────────────────── */
+
+.model-workspace {
+  min-width: 0;
+  padding: 28px clamp(24px, 4vw, 48px) 58px;
+}
+
+.workspace-head {
+  align-items: end;
+  display: grid;
+  gap: 24px;
+  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.72fr);
+  margin-bottom: 24px;
+}
+
+/* ── Overview Panel ─────────────────────────────────────────── */
+
+.overview-panel { display: grid; gap: 24px; }
+.overview-panel[hidden] { display: none; }
+
+.overview-hero {
+  border-bottom: 1px solid var(--line);
+  padding: 26px 0 30px;
+}
+
+.overview-hero h2 { max-width: 880px; }
+
+.overview-hero p:not(.eyebrow) {
+  color: #4a4f57;
+  font-size: 19px;
+  font-weight: 480;
+  line-height: 1.52;
+  margin: 0;
+  max-width: 860px;
+}
+
+/* ── Method Diagram ─────────────────────────────────────────── */
+
+.method-diagram {
+  align-items: stretch;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
+}
+
+.method-step {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  display: grid;
+  gap: 9px;
+  min-height: 190px;
+  padding: 18px;
+  position: relative;
+}
+
+.method-step::before {
+  background: var(--xml);
+  border-radius: 10px 0 0 10px;
+  content: "";
+  inset: 0 auto 0 0;
+  position: absolute;
+  width: 4px;
+}
+
+.method-step span {
+  align-items: center;
+  background: var(--xml);
+  border-radius: 999px;
+  color: #fff;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 800;
+  height: 26px;
+  justify-content: center;
+  width: 26px;
+}
+
+.method-step strong {
+  font-family: var(--serif);
+  font-size: 19px;
+  font-weight: 700;
+}
+
+.method-step p,
+.method-notes p {
+  color: var(--muted);
+  line-height: 1.55;
+  margin: 0;
+}
+
+.method-arrow {
+  align-self: center;
+  color: #c0bdb5;
+  font-size: 24px;
+  font-weight: 850;
+  justify-self: center;
+}
+
+.method-notes {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.method-notes section {
+  border-top: 1px solid var(--line);
+  padding-top: 18px;
+}
+
+.method-notes h3 {
+  margin-bottom: 10px;
+  max-width: 560px;
+}
+
+/* ── Headings ───────────────────────────────────────────────── */
+
+h2 {
+  font-family: var(--serif);
+  font-size: clamp(36px, 5vw, 62px);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 0.96;
+  margin: 0 0 14px;
+  overflow-wrap: anywhere;
+}
+
+h3 {
+  font-family: var(--serif);
+  font-size: 20px;
+  font-weight: 650;
+  margin: 0;
+}
+
+/* ── Snapshot Cards ─────────────────────────────────────────── */
+
+.snapshot {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.snapshot div {
+  min-width: 0;
+  padding: 14px 16px;
+}
+
+.snapshot div + div {
+  border-left: 1px solid var(--line);
+}
+
+.snapshot span {
+  color: var(--muted);
+  display: block;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+}
+
+.snapshot strong {
+  color: var(--ink);
+  display: block;
+  font-size: 13px;
+  font-weight: 620;
+  line-height: 1.25;
+  text-transform: capitalize;
+}
+
+/* ── Studio Layout ──────────────────────────────────────────── */
+
+.studio {
+  align-items: start;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0, 1fr) 330px;
+}
+
+.prompt-panel,
+.inspector,
+.evidence-packets {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.panel-head {
+  align-items: end;
+  border-bottom: 1px solid var(--line);
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
+  padding: 16px 18px;
+}
+
+/* ── Case Picker ────────────────────────────────────────────── */
+
+.case-picker {
+  display: grid;
+  gap: 6px;
+  justify-items: end;
+}
+
+.case-picker > span {
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+/* ── View Tabs ──────────────────────────────────────────────── */
+
+.view-tabs {
+  align-items: end;
+  background: var(--surface);
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-height: 58px;
+  padding: 10px 18px 0;
+}
+
+.view-tabs button {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px 8px 0 0;
+  color: var(--muted);
+  cursor: pointer;
+  font-weight: 700;
+  min-height: 38px;
+  padding: 0 13px;
+  transition: color 120ms ease, background 120ms ease;
+}
+
+.view-tabs button:hover { color: var(--ink); }
+
+.view-tabs button.active {
+  background: var(--panel);
+  border-color: var(--line);
+  border-bottom-color: var(--panel);
+  color: var(--ink);
+}
+
+.tab-tools {
+  align-items: center;
+  display: flex;
+  flex: 1 1 420px;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+  min-height: 38px;
+  padding-bottom: 8px;
+}
+
+/* ── Render Caveat Banner ───────────────────────────────────── */
+
+.render-caveat {
+  background: #fef9ee;
+  border-bottom: 1px solid var(--line);
+  color: #7d5a15;
+  font-size: 11.5px;
+  font-weight: 620;
+  line-height: 1.5;
+  margin: 0;
+  padding: 7px 18px;
+}
+
+/* ── Empty Render State ─────────────────────────────────────── */
+
+.empty-render {
+  color: rgba(230, 240, 234, 0.65);
+  display: block;
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.55;
+  max-width: 600px;
+}
+
+.empty-render strong { color: #ffffff; }
+
+/* ── Code Panes ─────────────────────────────────────────────── */
+
+pre,
+.code-pane {
+  background: #111714;
+  border-radius: 0;
+  color: #d8ede0;
+  font-size: 12.5px;
+  line-height: 1.6;
+  margin: 0;
+  max-height: 68svh;
+  min-height: 520px;
+  overflow: auto;
+  padding: 20px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.input-code {
+  background: #17130f;
+  color: #e8dcc8;
+}
+
+/* ── Token Highlights ───────────────────────────────────────── */
+
+.tool-token {
+  background: rgba(10, 117, 88, 0.25);
+  border-radius: 3px;
+  color: #ffffff;
+  font-weight: 750;
+  padding: 0 3px;
+}
+
+.schema-token-output {
+  background: rgba(166, 118, 18, 0.2);
+  border-radius: 3px;
+  color: #ffe9b4;
+  font-weight: 680;
+  padding: 0 3px;
+}
+
+.boilerplate-token {
+  color: rgba(216, 237, 224, 0.36);
+}
+
+.schema-token {
+  color: #f0c75e;
+  font-weight: 750;
+}
+
+/* ── Inspector Panel ────────────────────────────────────────── */
+
+.inspector { overflow: hidden; }
+
+.inspector-section { padding: 16px 18px; }
+
+.inspector-section + .inspector-section {
+  border-top: 1px solid var(--line);
+}
+
+/* ── Case Tabs ──────────────────────────────────────────────── */
+
+.case-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  justify-content: flex-end;
+}
+
+.case-tabs button {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--ink);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 600;
+  min-height: 28px;
+  padding: 0 10px;
+  text-align: left;
+  text-transform: capitalize;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+
+.case-tabs button:hover {
+  border-color: #c8c4bc;
+}
+
+.case-tabs button.active {
+  background: rgba(10, 117, 88, 0.08);
+  border-color: rgba(10, 117, 88, 0.35);
+  color: #06614a;
+  font-weight: 700;
+}
+
+.case-tabs button.unsupported {
+  border-color: rgba(166, 118, 18, 0.35);
+  color: #7d5a15;
+}
+
+.case-tabs button.unsupported::after {
+  align-items: center;
+  background: #fef3d6;
+  border-radius: 50%;
+  color: #a67612;
+  content: "!";
+  display: inline-flex;
+  font-size: 10px;
+  font-weight: 900;
+  height: 14px;
+  justify-content: center;
+  margin-left: 5px;
+  width: 14px;
+}
+
+/* ── Feature / Special Lists ────────────────────────────────── */
+
+.feature-list,
+.special-list,
+.claims {
+  display: grid;
+  gap: 6px;
+}
+
+/* ── Output Legend ───────────────────────────────────────────── */
+
+.output-legend {
+  align-items: center;
+  background: var(--surface);
+  border-top: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  padding: 8px 18px;
+}
+
+.output-legend span {
+  align-items: center;
+  color: var(--muted);
+  display: flex;
+  font-size: 11px;
+  font-weight: 650;
+  gap: 7px;
+}
+
+.swatch {
+  border-radius: 999px;
+  display: inline-block;
+  height: 8px;
+  width: 20px;
+}
+
+.swatch.tool        { background: rgba(10, 117, 88, 0.3); }
+.swatch.schema      { background: rgba(166, 118, 18, 0.25); }
+.swatch.boilerplate { background: rgba(26, 29, 33, 0.12); }
+
+/* ── Feature / Special Rows ─────────────────────────────────── */
+
+.feature-row,
+.special-row {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  color: inherit;
+  cursor: default;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: minmax(104px, 0.5fr) minmax(0, 1fr);
+  padding: 8px 0;
+  text-align: left;
+  width: 100%;
+}
+
+.special-row { cursor: pointer; }
+.special-row.note-row { cursor: default; }
+
+.special-row small {
+  color: var(--muted);
+  font-size: 11px;
+  grid-column: 1 / -1;
+  line-height: 1.45;
+}
+
+.special-row .evidence-path {
+  font-family: var(--mono);
+  overflow-wrap: anywhere;
+}
+
+.feature-row:last-child,
+.special-row:last-child { border-bottom: 0; }
+
+.feature-row strong,
+.special-row strong {
+  font-size: 12.5px;
+  font-weight: 650;
+  text-transform: capitalize;
+}
+
+/* ── Status Badges ──────────────────────────────────────────── */
+
+.status {
+  border-radius: 999px;
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  line-height: 1.25;
+  min-height: 24px;
+  padding: 4px 8px;
+  overflow-wrap: anywhere;
+}
+
+.status.good {
+  background: #e6f6ed;
+  color: #0a7558;
+}
+
+.status.warn {
+  background: #fef3d6;
+  color: #7d5a15;
+}
+
+.status.na {
+  background: var(--surface);
+  color: #a3a09a;
+}
+
+/* ── Evidence Packets ───────────────────────────────────────── */
+
+.evidence-packets { margin-top: 18px; }
+.evidence-packets .panel-head { grid-template-columns: 1fr; }
+.claims { padding: 18px; }
+
+.packet-group { display: grid; gap: 8px; }
+
+.packet-group + .packet-group {
+  border-top: 1px solid var(--line);
+  margin-top: 12px;
+  padding-top: 18px;
+}
+
+.packet-group h4 {
+  font-size: 13px;
+  font-weight: 650;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.claim {
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  overflow: hidden;
+  transition: border-color 120ms ease;
+}
+
+.claim:hover {
+  border-color: #c8c4bc;
+}
+
+.claim summary {
+  align-items: center;
+  cursor: pointer;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 160px minmax(0, 1fr);
+  padding: 12px 14px;
+  transition: background 120ms ease;
+}
+
+.claim summary:hover { background: var(--surface); }
+
+.claim summary strong {
+  color: var(--muted);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.claim p {
+  line-height: 1.5;
+  margin: 0;
+}
+
+.claim-body {
+  background: var(--surface);
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+}
+
+.evidence-item {
+  background: #111714;
+  border-radius: 6px;
+  color: #d8ede0;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  line-height: 1.5;
+  padding: 10px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ── Executive Summary Section ───────────────────────────────── */
+
+.exec-summary {
+  border-top: 1px solid var(--line);
+  padding-top: 24px;
+}
+
+.exec-summary:empty { display: none; }
+
+.exec-summary h2 {
+  font-size: 28px;
+  margin: 28px 0 10px;
+}
+
+.exec-summary h3 {
+  font-size: 18px;
+  margin: 24px 0 8px;
+}
+
+.exec-summary h4 {
+  font-family: var(--sans);
+  font-size: 14px;
+  font-weight: 700;
+  margin: 18px 0 6px;
+}
+
+.exec-summary p {
+  color: #4a4f57;
+  line-height: 1.6;
+  margin: 0 0 8px;
+  max-width: 860px;
+}
+
+.exec-summary .summary-date {
+  color: var(--muted);
+  font-style: italic;
+}
+
+.exec-summary code {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  font-size: 0.88em;
+  padding: 1px 5px;
+}
+
+.exec-summary ul {
+  color: #4a4f57;
+  line-height: 1.6;
+  margin: 0 0 12px;
+  max-width: 860px;
+  padding-left: 20px;
+}
+
+.exec-summary li { margin-bottom: 4px; }
+
+.exec-summary .table-wrap {
+  margin: 16px 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.exec-summary table {
+  border-collapse: collapse;
+  font-size: 12.5px;
+  min-width: 700px;
+  width: 100%;
+}
+
+.exec-summary th {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  font-weight: 700;
+  padding: 8px 10px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.exec-summary td {
+  border: 1px solid var(--line);
+  padding: 7px 10px;
+  vertical-align: top;
+}
+
+.exec-summary tbody tr:hover {
+  background: rgba(10, 117, 88, 0.03);
+}
+
+/* ── Animations ─────────────────────────────────────────────── */
+
+@keyframes fadeSlideIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.workspace-head,
+.studio,
+.evidence-packets,
+.overview-hero,
+.method-diagram,
+.method-notes,
+.exec-summary {
+  animation: fadeSlideIn 400ms ease both;
+}
+
+.overview-hero       { animation-delay:  40ms; }
+.method-diagram      { animation-delay: 140ms; }
+.method-notes        { animation-delay: 240ms; }
+.exec-summary        { animation-delay: 340ms; }
+.workspace-head      { animation-delay:  40ms; }
+.studio              { animation-delay: 100ms; }
+.evidence-packets    { animation-delay: 180ms; }
+
+/* ── Responsive ─────────────────────────────────────────────── */
+
+@media (max-width: 1120px) {
+  .app-shell,
+  .workspace-head,
+  .studio,
+  .method-diagram,
+  .method-notes {
+    grid-template-columns: 1fr;
+  }
+
+  .method-arrow { transform: rotate(90deg); }
+
+  .model-rail {
+    height: auto;
+    position: relative;
+  }
+
+  .model-list {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+
+  pre,
+  .code-pane { max-height: none; }
+}
+
+@media (max-width: 680px) {
+  .model-rail,
+  .model-workspace { padding: 16px; }
+
+  h2 { font-size: 32px; }
+
+  .snapshot,
+  .panel-head,
+  .claim summary { grid-template-columns: 1fr; }
+
+  .case-tabs { justify-content: flex-start; }
+  .view-tabs { align-items: start; }
+
+  .tab-tools {
+    justify-content: flex-start;
+    visibility: visible !important;
+  }
+
+  .snapshot div + div {
+    border-left: 0;
+    border-top: 1px solid var(--line);
+  }
+}