Release EgoSieve manifest inspector v0.1.0

README.md

@@ -1,10 +1,21 @@
 ---
 title: EgoSieve
-emoji: 🐠
-colorFrom: red
-colorTo: indigo
+emoji: 🎞️
+colorFrom: gray
+colorTo: yellow
 sdk: static
-pinned: false
+app_file: index.html
+models:
+  - itspublu/EgoSieve-S
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# EgoSieve manifest inspector
+
+Inspect a versioned EgoSieve JSONL manifest alongside an optional local video.
+The browser renders readiness curves, compiled segments, issue evidence, and
+recorded run metadata. Segment selections seek the local video, and the loaded
+manifest or a compact segment export can be downloaded for reuse.
+
+This is a dependency-free Static Space. Files are processed only in browser
+memory and are never uploaded. Model inference runs through the EgoSieve CLI;
+the Space is deliberately an inspector, not an inference service.

app.mjs

@@ -0,0 +1,914 @@
+import {
+  READINESS_LABELS,
+  aggregateIssues,
+  buildSegmentExport,
+  decisionFor,
+  formatDuration,
+  parseManifest,
+  summarizeManifest,
+} from "./manifest.mjs";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+const MAX_MANIFEST_BYTES = 32 * 1024 * 1024;
+const CHART = Object.freeze({ width: 1000, height: 360, left: 58, right: 20, top: 28, bottom: 45 });
+const COLORS = Object.freeze({ KEEP: "#d7ff35", REVIEW: "#ff5b26", REJECT: "#898b83" });
+
+const state = {
+  parsed: null,
+  manifestText: "",
+  manifestFileName: "",
+  manifestUrl: null,
+  videoUrl: null,
+  videoFileName: "",
+  videoDurationWarning: null,
+  selectedSegmentIndex: null,
+  routeFilter: "all",
+  toastTimer: null,
+};
+
+function byId(id) {
+  const element = document.getElementById(id);
+  if (!element) throw new Error(`Missing required element #${id}`);
+  return element;
+}
+
+function clear(element) {
+  element.replaceChildren();
+}
+
+function node(tagName, className = "", text = null) {
+  const element = document.createElement(tagName);
+  if (className) element.className = className;
+  if (text !== null) element.textContent = text;
+  return element;
+}
+
+function svgNode(tagName, attributes = {}) {
+  const element = document.createElementNS(SVG_NS, tagName);
+  for (const [name, value] of Object.entries(attributes)) {
+    element.setAttribute(name, String(value));
+  }
+  return element;
+}
+
+function safeFileName(value, fallback) {
+  const leaf = String(value || fallback).split(/[\\/]/u).pop() || fallback;
+  const safe = leaf.replace(/[^a-zA-Z0-9._-]+/gu, "-").replace(/^-+|-+$/gu, "");
+  return safe || fallback;
+}
+
+function displayPathLeaf(value) {
+  return String(value || "unknown source").split(/[\\/]/u).pop() || "unknown source";
+}
+
+function formatPercent(value, digits = 0) {
+  return typeof value === "number" && Number.isFinite(value)
+    ? `${(value * 100).toFixed(digits)}%`
+    : "—";
+}
+
+function formatTimecode(seconds) {
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds < 0) return "00:00.0";
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainder = seconds % 60;
+  const base = `${String(minutes).padStart(2, "0")}:${remainder.toFixed(1).padStart(4, "0")}`;
+  return hours > 0 ? `${hours}:${base}` : base;
+}
+
+function prettyIssue(name) {
+  return String(name).replaceAll("_", " ");
+}
+
+function routeClass(route) {
+  return `route-${route === "discard" ? "discard" : route}`;
+}
+
+function decisionRoute(segment) {
+  if (["keep", "review", "discard"].includes(segment.route)) return segment.route;
+  return { KEEP: "keep", REVIEW: "review", REJECT: "discard" }[decisionFor(segment)] ?? "review";
+}
+
+function showNotice(message, isError = false) {
+  const notice = byId("notice");
+  notice.textContent = message;
+  notice.classList.toggle("is-error", isError);
+  notice.hidden = false;
+}
+
+function hideNotice() {
+  byId("notice").hidden = true;
+}
+
+function showToast(message) {
+  const toast = byId("toast");
+  toast.textContent = message;
+  toast.hidden = false;
+  if (state.toastTimer !== null) window.clearTimeout(state.toastTimer);
+  state.toastTimer = window.setTimeout(() => {
+    toast.hidden = true;
+    state.toastTimer = null;
+  }, 2600);
+}
+
+async function copyText(text, successMessage) {
+  try {
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+    } else {
+      const helper = document.createElement("textarea");
+      helper.value = text;
+      helper.setAttribute("readonly", "");
+      helper.style.position = "fixed";
+      helper.style.opacity = "0";
+      document.body.append(helper);
+      helper.select();
+      const copied = document.execCommand("copy");
+      helper.remove();
+      if (!copied) throw new Error("copy command was refused");
+    }
+    showToast(successMessage);
+  } catch {
+    showToast("Copy was blocked. Select the text and copy it manually.");
+  }
+}
+
+function revokeManifestUrl() {
+  if (state.manifestUrl) URL.revokeObjectURL(state.manifestUrl);
+  state.manifestUrl = null;
+}
+
+function updateManifestDownload() {
+  revokeManifestUrl();
+  const link = byId("download-manifest");
+  if (!state.manifestText) {
+    link.removeAttribute("href");
+    return;
+  }
+  state.manifestUrl = URL.createObjectURL(
+    new Blob([state.manifestText], { type: "application/x-ndjson;charset=utf-8" }),
+  );
+  link.href = state.manifestUrl;
+  link.download = safeFileName(state.manifestFileName, "egosieve-manifest.jsonl");
+}
+
+function visibleSegments() {
+  if (!state.parsed) return [];
+  if (state.routeFilter === "all") return [...state.parsed.segments];
+  return state.parsed.segments.filter((segment) => decisionRoute(segment) === state.routeFilter);
+}
+
+function renderWarnings() {
+  const stack = byId("warning-stack");
+  clear(stack);
+  const warnings = [...(state.parsed?.warnings ?? [])];
+  if (state.videoDurationWarning) warnings.push(state.videoDurationWarning);
+  if (warnings.length === 0) {
+    stack.hidden = true;
+    return;
+  }
+  for (const warning of warnings) stack.append(node("p", "", `⚠ ${warning}`));
+  stack.hidden = false;
+}
+
+function checkVideoDuration() {
+  const video = byId("video");
+  const manifestDuration = state.parsed?.header.source.duration_s;
+  if (!state.videoUrl || !manifestDuration || !Number.isFinite(video.duration)) {
+    state.videoDurationWarning = null;
+    return;
+  }
+  const difference = Math.abs(video.duration - manifestDuration);
+  const tolerance = Math.max(0.5, manifestDuration * 0.01);
+  state.videoDurationWarning = difference > tolerance
+    ? `Local video duration (${formatDuration(video.duration)}) differs from the manifest (${formatDuration(manifestDuration)}). Verify that the files match.`
+    : null;
+}
+
+function readinessPoint(windowRecord, label) {
+  const value = windowRecord.readiness?.[label];
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function renderTimeline(parsed) {
+  const svg = byId("timeline");
+  clear(svg);
+  const title = svgNode("title", { id: "timeline-title" });
+  title.textContent = "Readiness probabilities over time";
+  const description = svgNode("desc", { id: "timeline-description" });
+  const evidenceWindows = parsed.windows.filter((windowRecord) =>
+    READINESS_LABELS.every((label) => readinessPoint(windowRecord, label) !== null),
+  );
+  description.textContent = evidenceWindows.length > 0
+    ? `${evidenceWindows.length} scored windows across ${formatDuration(parsed.header.source.duration_s)}.`
+    : "This manifest contains no window-level readiness probability maps.";
+  svg.append(title, description);
+
+  const chartWidth = CHART.width - CHART.left - CHART.right;
+  const chartHeight = CHART.height - CHART.top - CHART.bottom;
+  const duration = Math.max(parsed.header.source.duration_s, 0.001);
+  const x = (seconds) => CHART.left + (Math.max(0, Math.min(duration, seconds)) / duration) * chartWidth;
+  const y = (probability) => CHART.top + (1 - probability) * chartHeight;
+
+  for (const probability of [0, 0.25, 0.5, 0.75, 1]) {
+    svg.append(
+      svgNode("line", {
+        x1: CHART.left,
+        y1: y(probability),
+        x2: CHART.left + chartWidth,
+        y2: y(probability),
+        stroke: "rgba(239,238,230,.13)",
+        "stroke-width": 1,
+        "vector-effect": "non-scaling-stroke",
+      }),
+    );
+    const label = svgNode("text", { x: CHART.left - 12, y: y(probability) + 4, "text-anchor": "end" });
+    label.textContent = `${Math.round(probability * 100)}`;
+    svg.append(label);
+  }
+
+  const tickCount = duration > 900 ? 4 : 6;
+  for (let index = 0; index <= tickCount; index += 1) {
+    const seconds = (duration * index) / tickCount;
+    svg.append(
+      svgNode("line", {
+        x1: x(seconds),
+        y1: CHART.top,
+        x2: x(seconds),
+        y2: CHART.top + chartHeight,
+        stroke: "rgba(239,238,230,.075)",
+        "stroke-width": 1,
+        "vector-effect": "non-scaling-stroke",
+      }),
+    );
+    const label = svgNode("text", {
+      x: x(seconds),
+      y: CHART.top + chartHeight + 25,
+      "text-anchor": index === 0 ? "start" : index === tickCount ? "end" : "middle",
+    });
+    label.textContent = formatTimecode(seconds);
+    svg.append(label);
+  }
+
+  if (evidenceWindows.length === 0) {
+    const empty = svgNode("text", {
+      x: CHART.left + chartWidth / 2,
+      y: CHART.top + chartHeight / 2,
+      "text-anchor": "middle",
+    });
+    empty.textContent = "NO WINDOW PROBABILITY CURVES IN THIS MANIFEST";
+    svg.append(empty);
+  } else {
+    for (const label of [...READINESS_LABELS].reverse()) {
+      const coordinates = evidenceWindows.map((windowRecord) => ({
+        x: x((windowRecord.start_s + windowRecord.end_s) / 2),
+        y: y(readinessPoint(windowRecord, label)),
+      }));
+      const path = svgNode("path", {
+        d: coordinates.map((point, index) => `${index === 0 ? "M" : "L"}${point.x.toFixed(2)},${point.y.toFixed(2)}`).join(" "),
+        fill: "none",
+        stroke: COLORS[label],
+        "stroke-width": label === "KEEP" ? 3.5 : 2,
+        "stroke-linejoin": "round",
+        "stroke-linecap": "round",
+        opacity: label === "KEEP" ? 1 : 0.82,
+        "vector-effect": "non-scaling-stroke",
+      });
+      svg.append(path);
+      if (label === "KEEP") {
+        for (const point of coordinates) {
+          svg.append(
+            svgNode("circle", {
+              cx: point.x,
+              cy: point.y,
+              r: 3.5,
+              fill: COLORS.KEEP,
+              stroke: "#10110f",
+              "stroke-width": 1.5,
+              "vector-effect": "non-scaling-stroke",
+            }),
+          );
+        }
+      }
+    }
+  }
+
+  svg.append(
+    svgNode("line", {
+      id: "playhead-line",
+      x1: CHART.left,
+      y1: CHART.top,
+      x2: CHART.left,
+      y2: CHART.top + chartHeight,
+      stroke: "#efeee6",
+      "stroke-width": 1,
+      "stroke-dasharray": "4 4",
+      opacity: 0,
+      "vector-effect": "non-scaling-stroke",
+      "pointer-events": "none",
+    }),
+  );
+  byId("timeline-end").textContent = formatTimecode(duration);
+}
+
+function renderSegmentTrack(parsed) {
+  const track = byId("segment-track");
+  clear(track);
+  const duration = Math.max(parsed.header.source.duration_s, 0.001);
+  if (parsed.segments.length === 0) {
+    track.setAttribute("aria-label", "No compiled segments in this manifest");
+    return;
+  }
+  for (const segment of parsed.segments) {
+    const route = decisionRoute(segment);
+    const button = node("button", `track-segment ${routeClass(route)}`);
+    button.type = "button";
+    button.dataset.segmentIndex = String(segment.segment_index);
+    button.style.left = `${Math.max(0, Math.min(100, (segment.start_s / duration) * 100))}%`;
+    button.style.width = `${Math.max(0.2, Math.min(100, ((segment.end_s - segment.start_s) / duration) * 100))}%`;
+    button.title = `${decisionFor(segment)} · ${formatTimecode(segment.start_s)}–${formatTimecode(segment.end_s)}`;
+    button.setAttribute("aria-label", `Select ${decisionFor(segment)} segment ${segment.segment_index}, ${formatTimecode(segment.start_s)} to ${formatTimecode(segment.end_s)}`);
+    button.addEventListener("click", () => selectSegment(segment, true));
+    track.append(button);
+  }
+}
+
+function renderSegments() {
+  const list = byId("segment-list");
+  clear(list);
+  const segments = visibleSegments();
+  byId("download-segments").textContent = state.routeFilter === "all"
+    ? "Export all segments"
+    : `Export ${state.routeFilter === "discard" ? "reject" : state.routeFilter} segments`;
+  if (segments.length === 0) {
+    list.append(node("p", "empty-list", "No compiled segments match this route."));
+    return;
+  }
+  for (const segment of segments) {
+    const route = decisionRoute(segment);
+    const decision = decisionFor(segment);
+    const button = node("button", "segment-row");
+    button.type = "button";
+    button.dataset.segmentIndex = String(segment.segment_index);
+    button.setAttribute("aria-label", `Inspect ${decision} segment ${segment.segment_index} at ${formatTimecode(segment.start_s)}`);
+
+    button.append(node("span", "segment-row-index", String(segment.segment_index).padStart(2, "0")));
+    button.append(node("span", `segment-route ${routeClass(route)}`, decision));
+
+    const time = node("span", "segment-time");
+    time.append(
+      node("strong", "", `${formatTimecode(segment.start_s)} → ${formatTimecode(segment.end_s)}`),
+      node("small", "", `${formatDuration(segment.end_s - segment.start_s)} · ${segment.reason ?? "stable"}`),
+    );
+    button.append(time);
+
+    const confidence = segment.readiness?.[decision] ?? segment.mean_score;
+    const score = node("span", "segment-score");
+    score.append(node("strong", "", formatPercent(confidence)), node("small", "", "route confidence"));
+    button.append(score);
+
+    const reports = Array.isArray(segment.reported_issues) ? segment.reported_issues.length : 0;
+    button.append(node("span", "segment-issue-count", `${reports} SIGNAL${reports === 1 ? "" : "S"}`));
+    button.addEventListener("click", () => selectSegment(segment, true));
+    list.append(button);
+  }
+  updateSelectedClasses();
+}
+
+function renderIssues(parsed) {
+  const list = byId("issue-list");
+  clear(list);
+  const issues = aggregateIssues(parsed.segments.length > 0 ? parsed.segments : parsed.windows);
+  if (issues.length === 0) {
+    list.append(node("p", "empty-list", "No issue probabilities were recorded."));
+    return;
+  }
+  for (const issue of issues) {
+    const row = node("div", "issue-row");
+    const heading = node("div", "issue-row-head");
+    heading.append(
+      node("span", "issue-name", prettyIssue(issue.name)),
+      node("span", "issue-value", `${formatPercent(issue.max)} / ${formatPercent(issue.mean)}`),
+    );
+    const meter = node("div", "issue-meter");
+    meter.title = `Maximum ${formatPercent(issue.max, 1)}; mean ${formatPercent(issue.mean, 1)} across ${issue.samples} record${issue.samples === 1 ? "" : "s"}`;
+    const maximum = node("span");
+    maximum.style.width = `${Math.min(100, issue.max * 100)}%`;
+    const mean = node("i");
+    mean.style.left = `${Math.min(100, issue.mean * 100)}%`;
+    meter.append(maximum, mean);
+    row.append(heading, meter);
+    list.append(row);
+  }
+}
+
+function metadataValue(value) {
+  if (value === null || value === undefined || value === "") return "—";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+function renderMetadata(header) {
+  const source = header.source ?? {};
+  const model = header.model ?? {};
+  const sampling = header.sampling ?? {};
+  const policy = header.policy ?? {};
+  const geometry = source.display_width && source.display_height
+    ? `${source.display_width} × ${source.display_height}${source.rotation_degrees ? ` · ${source.rotation_degrees}° display rotation` : ""}`
+    : "—";
+  const metadata = [
+    ["Source file", displayPathLeaf(source.source_path)],
+    ["Source SHA-256", source.source_sha256 ?? "not recorded"],
+    ["Display geometry", geometry],
+    ["Codec / FPS", `${source.codec_name ?? "unknown"} / ${source.fps ? Number(source.fps).toFixed(3) : "unknown"}`],
+    ["Model", model.id ?? "not recorded"],
+    ["Resolved revision", model.revision ?? "not recorded"],
+    ["Processor revision", model.processor_revision ?? "not recorded"],
+    ["Generator", header.generator ?? "not recorded"],
+    ["Created", header.created_at ?? "not recorded"],
+    ["Window sampling", sampling.window_duration_s ? `${sampling.window_duration_s}s / stride ${sampling.stride_s}s / ${sampling.frames_per_window} frames` : "not recorded"],
+    ["Keep hysteresis", policy.enter_threshold !== undefined ? `enter ${policy.enter_threshold} / exit ${policy.exit_threshold}` : "not recorded"],
+    ["Uncertainty route", policy.uncertainty_threshold !== undefined ? `${policy.uncertainty_route ?? "review"} at ${policy.uncertainty_threshold}` : "not recorded"],
+  ];
+  const grid = byId("metadata-grid");
+  clear(grid);
+  for (const [label, value] of metadata) {
+    const item = node("div", "metadata-item");
+    item.append(node("span", "", label), node("strong", "", metadataValue(value)));
+    grid.append(item);
+  }
+  byId("raw-header").textContent = JSON.stringify(header, null, 2);
+}
+
+function renderSelected(segment) {
+  const panel = byId("selected-panel");
+  if (!segment) {
+    panel.hidden = true;
+    return;
+  }
+  const decision = decisionFor(segment);
+  const route = decisionRoute(segment);
+  panel.hidden = false;
+  byId("selected-title").textContent = `Segment ${String(segment.segment_index).padStart(2, "0")}`;
+  const routeLabel = byId("selected-route");
+  routeLabel.textContent = decision;
+  routeLabel.className = routeClass(route);
+  byId("selected-time").textContent = `${formatTimecode(segment.start_s)} → ${formatTimecode(segment.end_s)}`;
+  byId("selected-reason").textContent = `${formatDuration(segment.end_s - segment.start_s)} · ${segment.reason ?? "stable"}`;
+
+  const scores = byId("selected-scores");
+  clear(scores);
+  for (const label of READINESS_LABELS) {
+    const item = node("div");
+    item.append(node("dt", "", label), node("dd", "", formatPercent(segment.readiness?.[label], 1)));
+    scores.append(item);
+  }
+
+  const issues = byId("selected-issues");
+  clear(issues);
+  const ranked = Object.entries(segment.issues ?? {}).sort((left, right) => right[1] - left[1]);
+  if (ranked.length === 0) {
+    issues.append(node("span", "issue-chip", "No issue evidence recorded"));
+  } else {
+    for (const [name, probability] of ranked) {
+      issues.append(node("span", "issue-chip", `${prettyIssue(name)} ${formatPercent(probability)}`));
+    }
+  }
+}
+
+function updateSelectedClasses() {
+  for (const element of document.querySelectorAll("[data-segment-index]")) {
+    element.classList.toggle(
+      "is-selected",
+      Number(element.dataset.segmentIndex) === state.selectedSegmentIndex,
+    );
+  }
+}
+
+function selectSegment(segment, seekVideo) {
+  state.selectedSegmentIndex = segment.segment_index;
+  renderSelected(segment);
+  updateSelectedClasses();
+  if (seekVideo) seekTo(segment.start_s);
+}
+
+function seekTo(seconds) {
+  const video = byId("video");
+  if (!state.videoUrl) {
+    showToast(`Segment starts at ${formatTimecode(seconds)}. Open the matching video to seek.`);
+    return;
+  }
+  const target = Number.isFinite(video.duration)
+    ? Math.max(0, Math.min(seconds, Math.max(0, video.duration - 0.01)))
+    : Math.max(0, seconds);
+  video.currentTime = target;
+  byId("video-timecode").textContent = formatTimecode(target);
+  showToast(`Video set to ${formatTimecode(target)}.`);
+}
+
+function updatePlayhead(seconds) {
+  const line = document.getElementById("playhead-line");
+  if (!line || !state.parsed) return;
+  const duration = Math.max(state.parsed.header.source.duration_s, 0.001);
+  const chartWidth = CHART.width - CHART.left - CHART.right;
+  const position = CHART.left + (Math.max(0, Math.min(duration, seconds)) / duration) * chartWidth;
+  line.setAttribute("x1", String(position));
+  line.setAttribute("x2", String(position));
+  line.setAttribute("opacity", "0.7");
+}
+
+function renderWorkspace() {
+  const parsed = state.parsed;
+  if (!parsed) return;
+  const header = parsed.header;
+  const summary = summarizeManifest(parsed);
+  const source = header.source;
+  const model = header.model ?? {};
+  byId("identity-file").textContent = state.manifestFileName;
+  byId("identity-model").textContent = model.id
+    ? `${model.id} @ ${model.revision ?? model.requested_revision ?? "unresolved revision"}`
+    : "Model identity not recorded";
+  byId("metric-duration").textContent = formatDuration(summary.duration);
+  byId("metric-geometry").textContent = source.display_width && source.display_height
+    ? `${source.display_width} × ${source.display_height} · ${source.fps ? `${Number(source.fps).toFixed(2)} fps` : "fps unknown"}`
+    : "geometry not recorded";
+  byId("metric-windows").textContent = String(summary.windows).padStart(2, "0");
+  byId("metric-window-mix").textContent = `${summary.windowDecisions.KEEP} keep / ${summary.windowDecisions.REVIEW} review / ${summary.windowDecisions.REJECT} reject`;
+  byId("metric-segments").textContent = String(summary.segments).padStart(2, "0");
+  byId("metric-keep").textContent = formatDuration(summary.routedSeconds.KEEP);
+  byId("metric-review").textContent = `${formatDuration(summary.routedSeconds.REVIEW)} routed to review`;
+  checkVideoDuration();
+  renderWarnings();
+  renderTimeline(parsed);
+  renderSegmentTrack(parsed);
+  renderSegments();
+  renderIssues(parsed);
+  renderMetadata(header);
+  updateManifestDownload();
+  const selected = parsed.segments.find((segment) => segment.segment_index === state.selectedSegmentIndex)
+    ?? parsed.segments[0]
+    ?? null;
+  state.selectedSegmentIndex = selected?.segment_index ?? null;
+  renderSelected(selected);
+  updateSelectedClasses();
+  byId("workspace").hidden = false;
+}
+
+function acceptManifestText(text, fileName, isDemo = false) {
+  const parsed = parseManifest(text);
+  state.parsed = parsed;
+  state.manifestText = text.endsWith("\n") ? text : `${text}\n`;
+  state.manifestFileName = safeFileName(fileName, "egosieve-manifest.jsonl");
+  state.selectedSegmentIndex = null;
+  state.routeFilter = "all";
+  for (const button of document.querySelectorAll("[data-route]")) {
+    button.setAttribute("aria-pressed", button.dataset.route === "all" ? "true" : "false");
+  }
+  byId("manifest-file-name").textContent = state.manifestFileName;
+  renderWorkspace();
+  showNotice(
+    isDemo
+      ? "Illustrative evidence loaded. It demonstrates the inspector and is not a checkpoint result."
+      : `${parsed.windows.length} windows and ${parsed.segments.length} compiled segments loaded locally.`,
+  );
+  byId("workspace").scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+async function loadManifestFile(file) {
+  if (!file) return;
+  if (file.size > MAX_MANIFEST_BYTES) {
+    showNotice("That manifest is larger than 32 MB. Open a smaller EgoSieve JSONL file.", true);
+    return;
+  }
+  try {
+    acceptManifestText(await file.text(), file.name);
+  } catch (error) {
+    showNotice(error instanceof Error ? error.message : "The manifest could not be parsed.", true);
+  }
+}
+
+function loadVideoFile(file) {
+  if (!file) return;
+  if (file.type && !file.type.startsWith("video/")) {
+    showNotice("The optional media file must be a video supported by this browser.", true);
+    return;
+  }
+  if (state.videoUrl) URL.revokeObjectURL(state.videoUrl);
+  state.videoUrl = URL.createObjectURL(file);
+  state.videoFileName = file.name;
+  state.videoDurationWarning = null;
+  const video = byId("video");
+  video.src = state.videoUrl;
+  video.hidden = false;
+  video.load();
+  byId("video-empty").hidden = true;
+  byId("video-timecode").hidden = false;
+  byId("video-file-name").textContent = file.name;
+  byId("video-state").textContent = "LOCAL VIDEO";
+  byId("media-footnote").textContent = "Click any segment or timeline position to seek this local file.";
+  showToast(`${file.name} opened locally.`);
+}
+
+function resetWorkspace() {
+  state.parsed = null;
+  state.manifestText = "";
+  state.manifestFileName = "";
+  state.selectedSegmentIndex = null;
+  state.routeFilter = "all";
+  state.videoDurationWarning = null;
+  revokeManifestUrl();
+  if (state.videoUrl) URL.revokeObjectURL(state.videoUrl);
+  state.videoUrl = null;
+  state.videoFileName = "";
+  const video = byId("video");
+  video.pause();
+  video.removeAttribute("src");
+  video.load();
+  video.hidden = true;
+  byId("video-empty").hidden = false;
+  byId("video-timecode").hidden = true;
+  byId("video-state").textContent = "NO VIDEO";
+  byId("manifest-input").value = "";
+  byId("video-input").value = "";
+  byId("manifest-file-name").textContent = "Drop JSONL here or choose a file";
+  byId("video-file-name").textContent = "Drop video here or choose a file";
+  byId("media-footnote").textContent = "Segment selections still work without media; their timestamps remain inspectable.";
+  byId("workspace").hidden = true;
+  hideNotice();
+  showToast("Workspace cleared.");
+}
+
+function exportVisibleSegments() {
+  if (!state.parsed) return;
+  const selectedIndexes = new Set(visibleSegments().map((segment) => segment.segment_index));
+  const payload = JSON.stringify(buildSegmentExport(state.parsed, selectedIndexes), null, 2) + "\n";
+  const url = URL.createObjectURL(new Blob([payload], { type: "application/json;charset=utf-8" }));
+  const anchor = document.createElement("a");
+  const stem = safeFileName(state.manifestFileName, "egosieve-manifest").replace(/\.(jsonl|ndjson)$/iu, "");
+  anchor.href = url;
+  anchor.download = `${stem}.${state.routeFilter === "all" ? "segments" : state.routeFilter}.json`;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+  showToast(`${selectedIndexes.size} segment${selectedIndexes.size === 1 ? "" : "s"} exported.`);
+}
+
+function chartPosition(event) {
+  const svg = byId("timeline");
+  const bounds = svg.getBoundingClientRect();
+  const x = ((event.clientX - bounds.left) / Math.max(bounds.width, 1)) * CHART.width;
+  const duration = state.parsed?.header.source.duration_s ?? 0;
+  const fraction = (x - CHART.left) / (CHART.width - CHART.left - CHART.right);
+  return Math.max(0, Math.min(duration, fraction * duration));
+}
+
+function nearestWindow(seconds) {
+  if (!state.parsed || state.parsed.windows.length === 0) return null;
+  let nearest = null;
+  let nearestDistance = Infinity;
+  for (const windowRecord of state.parsed.windows) {
+    const midpoint = (windowRecord.start_s + windowRecord.end_s) / 2;
+    const distance = Math.abs(midpoint - seconds);
+    if (distance < nearestDistance) {
+      nearest = windowRecord;
+      nearestDistance = distance;
+    }
+  }
+  return nearest;
+}
+
+function handleChartPointer(event) {
+  if (!state.parsed) return;
+  const windowRecord = nearestWindow(chartPosition(event));
+  const tooltip = byId("chart-tooltip");
+  if (!windowRecord?.readiness) {
+    tooltip.hidden = true;
+    return;
+  }
+  const stageBounds = byId("timeline-stage").getBoundingClientRect();
+  tooltip.textContent = [
+    `${formatTimecode(windowRecord.start_s)} → ${formatTimecode(windowRecord.end_s)}`,
+    ...READINESS_LABELS.map((label) => `${label} ${formatPercent(windowRecord.readiness[label], 1)}`),
+    `UNCERTAINTY ${formatPercent(windowRecord.routing_uncertainty ?? windowRecord.uncertainty, 1)}`,
+  ].join("\n");
+  tooltip.style.whiteSpace = "pre-line";
+  tooltip.style.left = `${Math.min(stageBounds.width - 175, Math.max(8, event.clientX - stageBounds.left + 14))}px`;
+  tooltip.style.top = `${Math.max(8, event.clientY - stageBounds.top - 88)}px`;
+  tooltip.hidden = false;
+}
+
+function demoManifestText() {
+  const duration = 42;
+  const probabilities = [
+    [0.82, 0.13, 0.05],
+    [0.88, 0.09, 0.03],
+    [0.52, 0.41, 0.07],
+    [0.24, 0.63, 0.13],
+    [0.72, 0.23, 0.05],
+    [0.91, 0.07, 0.02],
+    [0.86, 0.1, 0.04],
+    [0.68, 0.28, 0.04],
+    [0.37, 0.55, 0.08],
+    [0.18, 0.32, 0.5],
+  ];
+  const issueNames = [
+    "acting_hand_not_visible",
+    "low_hand_activity",
+    "camera_instability",
+    "blur",
+    "exposure",
+    "scene_cut",
+    "duplicate_frames",
+  ];
+  const windows = probabilities.map((values, index) => {
+    const start = index * 4;
+    const end = Math.min(duration, start + 6);
+    const readiness = Object.fromEntries(READINESS_LABELS.map((label, labelIndex) => [label, values[labelIndex]]));
+    const issues = Object.fromEntries(issueNames.map((name, issueIndex) => [
+      name,
+      Math.min(0.92, 0.03 + (((index + 2) * (issueIndex + 3)) % 11) * 0.035),
+    ]));
+    if (index === 3) issues.blur = 0.68;
+    if (index === 8) issues.duplicate_frames = 0.57;
+    return {
+      record_type: "window",
+      schema_version: 1,
+      window_index: index,
+      start_s: start,
+      end_s: end,
+      source_start_s: start,
+      source_end_s: end,
+      timestamps_s: Array.from({ length: 12 }, (_, frame) => start + ((frame + 0.5) * (end - start)) / 12),
+      decision: READINESS_LABELS[values.indexOf(Math.max(...values))],
+      readiness,
+      score: readiness.KEEP,
+      uncertainty: 0.2 + index * 0.025,
+      routing_uncertainty: Math.max(0.2 + index * 0.025, readiness.REVIEW),
+      issues,
+      reported_issues: Object.entries(issues).filter(([, value]) => value >= 0.35).map(([name]) => name),
+      boundary: [],
+    };
+  });
+  const makeSegment = (segment_index, start_s, end_s, route, window_indices, readiness, issues, reported_issues = []) => ({
+    record_type: "segment",
+    schema_version: 1,
+    segment_index,
+    segment_id: `sha256:example-${segment_index}`,
+    start_s,
+    end_s,
+    source_start_s: start_s,
+    source_end_s: end_s,
+    duration_s: end_s - start_s,
+    route,
+    decision: { keep: "KEEP", review: "REVIEW", discard: "REJECT" }[route],
+    reason: route === "review" ? "uncertain" : "stable",
+    window_indices,
+    mean_score: readiness.KEEP,
+    min_score: Math.max(0, readiness.KEEP - 0.08),
+    max_score: Math.min(1, readiness.KEEP + 0.08),
+    readiness,
+    issues,
+    reported_issues,
+  });
+  const baseIssues = Object.fromEntries(issueNames.map((name) => [name, 0.12]));
+  const segments = [
+    makeSegment(0, 0, 10, "keep", [0, 1], { KEEP: 0.85, REVIEW: 0.11, REJECT: 0.04 }, { ...baseIssues, low_hand_activity: 0.08 }),
+    makeSegment(1, 10, 16, "review", [2, 3], { KEEP: 0.38, REVIEW: 0.52, REJECT: 0.1 }, { ...baseIssues, blur: 0.68, camera_instability: 0.41 }, ["blur", "camera_instability"]),
+    makeSegment(2, 16, 30, "keep", [4, 5, 6, 7], { KEEP: 0.79, REVIEW: 0.17, REJECT: 0.04 }, { ...baseIssues, exposure: 0.29 }),
+    makeSegment(3, 30, 36, "review", [7, 8], { KEEP: 0.39, REVIEW: 0.53, REJECT: 0.08 }, { ...baseIssues, duplicate_frames: 0.57 }, ["duplicate_frames"]),
+  ];
+  const header = {
+    record_type: "manifest",
+    schema: "egosieve.video-compilation",
+    schema_version: 1,
+    created_at: "2026-08-23T12:00:00Z",
+    generator: "egosieve static-inspector example",
+    example: "illustrative interface data; not a checkpoint result",
+    source: {
+      source_path: "example/assembly-pass.mp4",
+      source_sha256: "dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd",
+      source_size_bytes: 18420000,
+      duration_s: duration,
+      start_time_s: 0,
+      width: 1920,
+      height: 1080,
+      display_width: 1920,
+      display_height: 1080,
+      rotation_degrees: 0,
+      fps: 29.97,
+      frame_count: 1259,
+      codec_name: "h264",
+    },
+    model: {
+      id: "itspublu/EgoSieve-S",
+      revision: "illustrative-example",
+      requested_revision: "illustrative-example",
+      processor_revision: "illustrative-example",
+      readiness_labels: READINESS_LABELS,
+    },
+    counts: {
+      windows: windows.length,
+      unique_samples: 84,
+      segments: segments.length,
+      window_decisions: { KEEP: 7, REVIEW: 2, REJECT: 1 },
+      segment_decisions: { KEEP: 2, REVIEW: 2, REJECT: 0 },
+    },
+    sampling: {
+      window_duration_s: 6,
+      stride_s: 4,
+      frames_per_window: 12,
+      window_count: windows.length,
+      unique_sample_count: 84,
+    },
+    policy: {
+      enter_threshold: 0.7,
+      exit_threshold: 0.5,
+      merge_gap_s: 0.5,
+      min_duration_s: 1,
+      uncertainty_threshold: 0.5,
+      uncertainty_route: "review",
+      short_segment_route: "discard",
+      include_discard: false,
+    },
+    issue_labels: issueNames,
+    issue_reporting_thresholds: Object.fromEntries(issueNames.map((name) => [name, 0.35])),
+  };
+  return [header, ...windows, ...segments].map((record) => JSON.stringify(record)).join("\n") + "\n";
+}
+
+function configureDropZone(zoneId, handler) {
+  const zone = byId(zoneId);
+  for (const eventName of ["dragenter", "dragover"]) {
+    zone.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+      zone.classList.add("is-dragging");
+    });
+  }
+  for (const eventName of ["dragleave", "drop"]) {
+    zone.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      zone.classList.remove("is-dragging");
+    });
+  }
+  zone.addEventListener("drop", (event) => handler(event.dataTransfer.files?.[0] ?? null));
+}
+
+function init() {
+  byId("manifest-input").addEventListener("change", (event) => loadManifestFile(event.target.files?.[0]));
+  byId("video-input").addEventListener("change", (event) => loadVideoFile(event.target.files?.[0]));
+  configureDropZone("manifest-drop", loadManifestFile);
+  configureDropZone("video-drop", loadVideoFile);
+  byId("demo-button").addEventListener("click", () => {
+    try {
+      acceptManifestText(demoManifestText(), "illustrative.egosieve.jsonl", true);
+    } catch (error) {
+      showNotice(error instanceof Error ? error.message : "The example could not be loaded.", true);
+    }
+  });
+  byId("reset-button").addEventListener("click", resetWorkspace);
+  byId("copy-cli").addEventListener("click", () => copyText(byId("cli-command").textContent, "CLI command copied."));
+  byId("copy-segment").addEventListener("click", () => {
+    const segment = state.parsed?.segments.find((row) => row.segment_index === state.selectedSegmentIndex);
+    if (segment) copyText(JSON.stringify(segment, null, 2), "Segment JSON copied.");
+  });
+  byId("download-segments").addEventListener("click", exportVisibleSegments);
+
+  for (const button of document.querySelectorAll("[data-route]")) {
+    button.addEventListener("click", () => {
+      state.routeFilter = button.dataset.route;
+      for (const peer of document.querySelectorAll("[data-route]")) {
+        peer.setAttribute("aria-pressed", peer === button ? "true" : "false");
+      }
+      renderSegments();
+    });
+  }
+
+  const video = byId("video");
+  video.addEventListener("loadedmetadata", () => {
+    checkVideoDuration();
+    renderWarnings();
+  });
+  video.addEventListener("timeupdate", () => {
+    byId("video-timecode").textContent = formatTimecode(video.currentTime);
+    updatePlayhead(video.currentTime);
+  });
+  video.addEventListener("error", () => showNotice("This browser could not decode the selected video. The manifest remains available.", true));
+
+  const timeline = byId("timeline");
+  timeline.addEventListener("pointermove", handleChartPointer);
+  timeline.addEventListener("pointerleave", () => {
+    byId("chart-tooltip").hidden = true;
+  });
+  timeline.addEventListener("click", (event) => {
+    if (state.parsed) seekTo(chartPosition(event));
+  });
+
+  window.addEventListener("beforeunload", () => {
+    revokeManifestUrl();
+    if (state.videoUrl) URL.revokeObjectURL(state.videoUrl);
+  });
+}
+
+init();

index.html

@@ -1,19 +1,293 @@
 <!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">
+    <meta name="color-scheme" content="dark">
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self' blob:; script-src 'self'; style-src 'self'; img-src 'self' data: blob:; media-src 'self' blob:; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'"
+    >
+    <meta
+      name="description"
+      content="Inspect EgoSieve video-readiness manifests locally in your browser."
+    >
+    <title>EgoSieve — Manifest Inspector</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <a class="skip-link" href="#main">Skip to inspector</a>
+
+    <header class="masthead">
+      <a class="wordmark" href="#top" aria-label="EgoSieve home">
+        <span class="wordmark-mark" aria-hidden="true"><i></i><i></i><i></i></span>
+        <span>EGO/SIEVE</span>
+      </a>
+      <div class="masthead-status">
+        <span class="status-lamp" aria-hidden="true"></span>
+        LOCAL EVIDENCE CONSOLE
+      </div>
+      <a class="masthead-link" href="https://huggingface.co/itspublu/EgoSieve-S">MODEL CARD ↗</a>
+    </header>
+
+    <main id="main">
+      <section class="hero" id="top" aria-labelledby="hero-title">
+        <div class="hero-index" aria-hidden="true">INSPECTOR / 01</div>
+        <div class="hero-copy">
+          <p class="eyebrow"><span>VIDEO READINESS</span> / MANIFEST WORKBENCH</p>
+          <h1 id="hero-title">READ THE<br><em>USEFUL</em> SECONDS.</h1>
+          <p class="hero-deck">
+            Open an EgoSieve evidence manifest. Trace each routing decision, audit observable
+            failure signals, and jump straight to the corresponding moment in your local video.
+          </p>
+        </div>
+        <div class="hero-stamp" aria-label="Private by design">
+          <span>PRIVATE</span>
+          <strong>BY<br>DESIGN</strong>
+          <small>NO FILE TRANSFER</small>
+        </div>
+      </section>
+
+      <section class="load-bay" aria-labelledby="load-title">
+        <div class="section-heading">
+          <span class="section-number">01</span>
+          <div>
+            <p class="eyebrow">SOURCE MATERIAL</p>
+            <h2 id="load-title">Open evidence</h2>
+          </div>
+          <p class="section-note">Both files stay in this browser tab. The video is optional.</p>
+        </div>
+
+        <div class="file-grid">
+          <label class="file-bay manifest-bay" id="manifest-drop">
+            <input id="manifest-input" type="file" accept=".jsonl,.ndjson,application/x-ndjson,application/json">
+            <span class="file-number">A</span>
+            <span class="file-icon" aria-hidden="true">↳</span>
+            <strong>EgoSieve manifest</strong>
+            <span id="manifest-file-name">Drop JSONL here or choose a file</span>
+            <small>Required · schema v1 · maximum 32 MB</small>
+          </label>
+
+          <label class="file-bay video-bay" id="video-drop">
+            <input id="video-input" type="file" accept="video/*">
+            <span class="file-number">B</span>
+            <span class="file-icon" aria-hidden="true">▷</span>
+            <strong>Matching local video</strong>
+            <span id="video-file-name">Drop video here or choose a file</span>
+            <small>Optional · used only for playback and seeking</small>
+          </label>
+        </div>
+
+        <div class="load-actions">
+          <button class="button button-primary" id="demo-button" type="button">Load example evidence</button>
+          <button class="button button-quiet" id="reset-button" type="button">Reset workspace</button>
+          <div class="privacy-note">
+            <span aria-hidden="true">◉</span>
+            Processing is local. This page has no network connection.
+          </div>
+        </div>
+        <div class="notice" id="notice" role="status" aria-live="polite" hidden></div>
+      </section>
+
+      <section class="cli-band" aria-labelledby="cli-title">
+        <div class="cli-label">
+          <span class="section-number">02</span>
+          <div>
+            <p class="eyebrow">CREATE A MANIFEST</p>
+            <h2 id="cli-title">Inference runs in the CLI</h2>
+          </div>
+        </div>
+        <p>
+          This static inspector does not run the model. Scan a video on your machine, then open
+          the resulting JSONL here.
+        </p>
+        <div class="command-shell">
+          <span class="prompt" aria-hidden="true">$</span>
+          <code id="cli-command">egosieve scan INPUT_VIDEO --model itspublu/EgoSieve-S --revision 40f8549166c9c64f205e63c0836cd88f4208d112 --output OUTPUT.egosieve.jsonl</code>
+          <button class="copy-button" id="copy-cli" type="button" aria-label="Copy CLI command">COPY</button>
+        </div>
+      </section>
+
+      <section class="workspace" id="workspace" aria-labelledby="workspace-title" hidden>
+        <div class="section-heading workspace-heading">
+          <span class="section-number">03</span>
+          <div>
+            <p class="eyebrow">EVIDENCE LOADED</p>
+            <h2 id="workspace-title">Inspection desk</h2>
+          </div>
+          <div class="manifest-identity">
+            <strong id="identity-file">—</strong>
+            <span id="identity-model">—</span>
+          </div>
+        </div>
+
+        <div class="metric-grid" aria-label="Manifest summary">
+          <article class="metric-card metric-acid">
+            <span>Source duration</span>
+            <strong id="metric-duration">—</strong>
+            <small id="metric-geometry">—</small>
+          </article>
+          <article class="metric-card">
+            <span>Sampled windows</span>
+            <strong id="metric-windows">—</strong>
+            <small id="metric-window-mix">—</small>
+          </article>
+          <article class="metric-card">
+            <span>Compiled segments</span>
+            <strong id="metric-segments">—</strong>
+            <small>exclusive routed spans</small>
+          </article>
+          <article class="metric-card metric-orange">
+            <span>Keep time</span>
+            <strong id="metric-keep">—</strong>
+            <small id="metric-review">—</small>
+          </article>
+        </div>
+
+        <div class="warning-stack" id="warning-stack" aria-live="polite" hidden></div>
+
+        <div class="analysis-grid">
+          <article class="panel media-panel">
+            <div class="panel-heading">
+              <div>
+                <span class="panel-index">A / LOCAL MEDIA</span>
+                <h3>Source monitor</h3>
+              </div>
+              <span class="panel-state" id="video-state">NO VIDEO</span>
+            </div>
+            <div class="video-stage" id="video-stage">
+              <video
+                id="video"
+                controls
+                preload="metadata"
+                playsinline
+                aria-label="Local video matched to the manifest"
+                hidden
+              ></video>
+              <div class="video-empty" id="video-empty">
+                <span aria-hidden="true">B</span>
+                <strong>Video is optional</strong>
+                <p>Open the matching local file above to enable timecode seeking.</p>
+              </div>
+              <div class="video-timecode" id="video-timecode" hidden>00:00.0</div>
+            </div>
+            <p class="media-footnote" id="media-footnote">
+              Segment selections still work without media; their timestamps remain inspectable.
+            </p>
+          </article>
+
+          <article class="panel timeline-panel">
+            <div class="panel-heading">
+              <div>
+                <span class="panel-index">B / MODEL OUTPUT</span>
+                <h3>Readiness trace</h3>
+              </div>
+              <div class="legend" aria-label="Readiness legend">
+                <span class="legend-keep">KEEP</span>
+                <span class="legend-review">REVIEW</span>
+                <span class="legend-reject">REJECT</span>
+              </div>
+            </div>
+            <div class="timeline-stage" id="timeline-stage">
+              <svg
+                id="timeline"
+                viewBox="0 0 1000 360"
+                role="img"
+                aria-labelledby="timeline-title timeline-description"
+                preserveAspectRatio="none"
+              >
+                <title id="timeline-title">Readiness probabilities over time</title>
+                <desc id="timeline-description">Load a manifest to view the readiness trace.</desc>
+              </svg>
+              <div class="chart-tooltip" id="chart-tooltip" role="status" hidden></div>
+            </div>
+            <div class="segment-track" id="segment-track" aria-label="Clickable compiled segment timeline"></div>
+            <div class="timeline-axis">
+              <span>00:00</span>
+              <span id="timeline-end">END</span>
+            </div>
+          </article>
+        </div>
+
+        <div class="evidence-grid">
+          <article class="panel segments-panel">
+            <div class="panel-heading">
+              <div>
+                <span class="panel-index">C / ROUTING</span>
+                <h3>Compiled segments</h3>
+              </div>
+              <div class="route-filters" aria-label="Filter segments">
+                <button type="button" data-route="all" aria-pressed="true">ALL</button>
+                <button type="button" data-route="keep" aria-pressed="false">KEEP</button>
+                <button type="button" data-route="review" aria-pressed="false">REVIEW</button>
+                <button type="button" data-route="discard" aria-pressed="false">REJECT</button>
+              </div>
+            </div>
+            <div class="segment-list" id="segment-list"></div>
+          </article>
+
+          <aside class="panel issue-panel" aria-labelledby="issues-title">
+            <div class="panel-heading">
+              <div>
+                <span class="panel-index">D / OBSERVABLE SIGNALS</span>
+                <h3 id="issues-title">Issue evidence</h3>
+              </div>
+              <span class="panel-state">MAX / MEAN</span>
+            </div>
+            <p class="issue-deck">Probabilities are model evidence, not verified ground truth.</p>
+            <div class="issue-list" id="issue-list"></div>
+          </aside>
+        </div>
+
+        <article class="panel selected-panel" id="selected-panel" hidden>
+          <div class="panel-heading">
+            <div>
+              <span class="panel-index">SELECTED EVIDENCE</span>
+              <h3 id="selected-title">Segment</h3>
+            </div>
+            <button class="copy-button dark" id="copy-segment" type="button">COPY JSON</button>
+          </div>
+          <div class="selected-grid">
+            <div class="selected-decision">
+              <span id="selected-route">KEEP</span>
+              <strong id="selected-time">00:00.0 → 00:06.0</strong>
+              <small id="selected-reason">stable</small>
+            </div>
+            <dl class="selected-scores" id="selected-scores"></dl>
+            <div class="selected-issues" id="selected-issues"></div>
+          </div>
+        </article>
+
+        <details class="metadata-drawer">
+          <summary>
+            <span><b>04</b> Run identity &amp; recorded policy</span>
+            <small>inspect raw header</small>
+          </summary>
+          <div class="metadata-grid" id="metadata-grid"></div>
+          <pre id="raw-header" tabindex="0" aria-label="Raw manifest header"></pre>
+        </details>
+
+        <div class="export-dock">
+          <div>
+            <p class="eyebrow">TAKE THE EVIDENCE WITH YOU</p>
+            <h3>Download. Diff. Reuse.</h3>
+            <p>The original JSONL stays untouched; the segment export is a compact JSON selection.</p>
+          </div>
+          <div class="export-actions">
+            <a class="button button-primary" id="download-manifest" download>Download manifest</a>
+            <button class="button button-quiet light" id="download-segments" type="button">Export visible segments</button>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <span>EGO/SIEVE · MANIFEST INSPECTOR</span>
+      <span>STATIC / LOCAL / REPRODUCIBLE</span>
+    </footer>
+
+    <div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
+    <noscript>This inspector requires JavaScript to parse local JSONL files.</noscript>
+    <script type="module" src="app.mjs"></script>
+  </body>
 </html>

manifest.mjs

@@ -0,0 +1,302 @@
+export const MANIFEST_SCHEMA = "egosieve.video-compilation";
+export const MANIFEST_VERSION = 1;
+export const READINESS_LABELS = Object.freeze(["KEEP", "REVIEW", "REJECT"]);
+export const ROUTE_TO_DECISION = Object.freeze({
+  keep: "KEEP",
+  review: "REVIEW",
+  discard: "REJECT",
+});
+
+export class ManifestValidationError extends Error {
+  constructor(message, line = null) {
+    super(line === null ? message : `Line ${line}: ${message}`);
+    this.name = "ManifestValidationError";
+    this.line = line;
+  }
+}
+
+function isObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+function finiteNumber(value, name, line, { min = -Infinity, max = Infinity } = {}) {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new ManifestValidationError(`${name} must be a finite number`, line);
+  }
+  if (value < min || value > max) {
+    throw new ManifestValidationError(`${name} must be between ${min} and ${max}`, line);
+  }
+  return value;
+}
+
+function validateInterval(record, line) {
+  const start = finiteNumber(record.start_s, "start_s", line, { min: 0 });
+  const end = finiteNumber(record.end_s, "end_s", line, { min: 0 });
+  if (end <= start) {
+    throw new ManifestValidationError("end_s must be greater than start_s", line);
+  }
+}
+
+function validateProbabilityMap(value, name, line, warnings, requireReadiness = false) {
+  if (!isObject(value)) {
+    throw new ManifestValidationError(`${name} must be an object`, line);
+  }
+  if (requireReadiness) {
+    for (const label of READINESS_LABELS) {
+      if (!Object.hasOwn(value, label)) {
+        throw new ManifestValidationError(`${name} is missing ${label}`, line);
+      }
+    }
+  }
+  const entries = Object.entries(value);
+  for (const [key, probability] of entries) {
+    finiteNumber(probability, `${name}.${key}`, line, { min: 0, max: 1 });
+  }
+  if (requireReadiness) {
+    const total = READINESS_LABELS.reduce((sum, label) => sum + value[label], 0);
+    if (Math.abs(total - 1) > 0.02) {
+      warnings.push(`Line ${line}: readiness probabilities sum to ${total.toFixed(3)}, not 1.`);
+    }
+  }
+}
+
+function validateHeader(header, line) {
+  if (!isObject(header)) {
+    throw new ManifestValidationError("the first non-empty line must be an object", line);
+  }
+  if (header.record_type !== "manifest") {
+    throw new ManifestValidationError("the first record must have record_type \"manifest\"", line);
+  }
+  if (header.schema !== MANIFEST_SCHEMA) {
+    throw new ManifestValidationError(`unsupported schema ${JSON.stringify(header.schema)}`, line);
+  }
+  if (header.schema_version !== MANIFEST_VERSION) {
+    throw new ManifestValidationError(
+      `unsupported schema version ${JSON.stringify(header.schema_version)}; expected ${MANIFEST_VERSION}`,
+      line,
+    );
+  }
+  if (!isObject(header.source)) {
+    throw new ManifestValidationError("manifest.source must be an object", line);
+  }
+  finiteNumber(header.source.duration_s, "source.duration_s", line, { min: 0 });
+}
+
+function validateWindow(record, line, warnings) {
+  if (!Number.isInteger(record.window_index) || record.window_index < 0) {
+    throw new ManifestValidationError("window_index must be a non-negative integer", line);
+  }
+  validateInterval(record, line);
+  if (record.decision !== undefined && !READINESS_LABELS.includes(record.decision)) {
+    throw new ManifestValidationError("window decision must be KEEP, REVIEW, or REJECT", line);
+  }
+  if (record.readiness !== undefined) {
+    validateProbabilityMap(record.readiness, "readiness", line, warnings, true);
+  }
+  if (record.issues !== undefined) {
+    validateProbabilityMap(record.issues, "issues", line, warnings);
+  }
+  if (record.boundary !== undefined && !Array.isArray(record.boundary)) {
+    throw new ManifestValidationError("boundary must be an array", line);
+  }
+}
+
+function validateSegment(record, line, warnings) {
+  if (!Number.isInteger(record.segment_index) || record.segment_index < 0) {
+    throw new ManifestValidationError("segment_index must be a non-negative integer", line);
+  }
+  validateInterval(record, line);
+  if (!Object.hasOwn(ROUTE_TO_DECISION, record.route)) {
+    throw new ManifestValidationError("segment route must be keep, review, or discard", line);
+  }
+  if (record.decision !== undefined && !READINESS_LABELS.includes(record.decision)) {
+    throw new ManifestValidationError("segment decision must be KEEP, REVIEW, or REJECT", line);
+  }
+  if (record.readiness !== undefined) {
+    validateProbabilityMap(record.readiness, "readiness", line, warnings, true);
+  }
+  if (record.issues !== undefined) {
+    validateProbabilityMap(record.issues, "issues", line, warnings);
+  }
+  if (!Array.isArray(record.window_indices) || record.window_indices.length === 0) {
+    throw new ManifestValidationError("segment.window_indices must be a non-empty array", line);
+  }
+}
+
+function declaredCount(header, key) {
+  const value = header.counts?.[key];
+  return Number.isInteger(value) && value >= 0 ? value : null;
+}
+
+/** Parse and validate an EgoSieve v1 JSONL manifest without mutating it. */
+export function parseManifest(text) {
+  if (typeof text !== "string" || text.trim() === "") {
+    throw new ManifestValidationError("manifest is empty");
+  }
+  const records = [];
+  const sourceLines = [];
+  for (const [offset, rawLine] of text.split(/\r?\n/u).entries()) {
+    if (rawLine.trim() === "") continue;
+    const line = offset + 1;
+    let record;
+    try {
+      record = JSON.parse(rawLine);
+    } catch (error) {
+      throw new ManifestValidationError(`invalid JSON (${error.message})`, line);
+    }
+    if (!isObject(record)) {
+      throw new ManifestValidationError("record must be a JSON object", line);
+    }
+    records.push(record);
+    sourceLines.push(line);
+  }
+  if (records.length === 0) {
+    throw new ManifestValidationError("manifest is empty");
+  }
+
+  const header = records[0];
+  validateHeader(header, sourceLines[0]);
+  const windows = [];
+  const segments = [];
+  const warnings = [];
+  const windowIndexes = new Set();
+  const segmentIndexes = new Set();
+
+  for (let index = 1; index < records.length; index += 1) {
+    const record = records[index];
+    const line = sourceLines[index];
+    if (record.schema_version !== MANIFEST_VERSION) {
+      throw new ManifestValidationError("record schema_version does not match the header", line);
+    }
+    if (record.record_type === "window") {
+      validateWindow(record, line, warnings);
+      if (windowIndexes.has(record.window_index)) {
+        throw new ManifestValidationError(`duplicate window_index ${record.window_index}`, line);
+      }
+      windowIndexes.add(record.window_index);
+      windows.push(record);
+    } else if (record.record_type === "segment") {
+      validateSegment(record, line, warnings);
+      if (segmentIndexes.has(record.segment_index)) {
+        throw new ManifestValidationError(`duplicate segment_index ${record.segment_index}`, line);
+      }
+      segmentIndexes.add(record.segment_index);
+      segments.push(record);
+    } else {
+      throw new ManifestValidationError(`unknown record_type ${JSON.stringify(record.record_type)}`, line);
+    }
+  }
+
+  windows.sort((left, right) => left.start_s - right.start_s || left.window_index - right.window_index);
+  segments.sort((left, right) => left.start_s - right.start_s || left.segment_index - right.segment_index);
+
+  const declaredWindows = declaredCount(header, "windows");
+  if (declaredWindows !== null && declaredWindows !== windows.length) {
+    warnings.push(`Header declares ${declaredWindows} windows; ${windows.length} were found.`);
+  }
+  const declaredSegments = declaredCount(header, "segments");
+  if (declaredSegments !== null && declaredSegments !== segments.length) {
+    warnings.push(`Header declares ${declaredSegments} segments; ${segments.length} were found.`);
+  }
+  const maxEnd = Math.max(0, ...windows.map((row) => row.end_s), ...segments.map((row) => row.end_s));
+  if (maxEnd > header.source.duration_s + 0.05) {
+    warnings.push(`Evidence extends to ${maxEnd.toFixed(2)}s, beyond the declared source duration.`);
+  }
+  for (const segment of segments) {
+    const unknown = segment.window_indices.filter((value) => !windowIndexes.has(value));
+    if (unknown.length > 0) {
+      warnings.push(`Segment ${segment.segment_index} references missing window indexes: ${unknown.join(", ")}.`);
+    }
+  }
+
+  return Object.freeze({
+    records: Object.freeze(records),
+    header,
+    windows: Object.freeze(windows),
+    segments: Object.freeze(segments),
+    warnings: Object.freeze(warnings),
+  });
+}
+
+export function decisionFor(record) {
+  return record.decision ?? ROUTE_TO_DECISION[record.route] ?? "REVIEW";
+}
+
+export function aggregateIssues(records) {
+  const buckets = new Map();
+  for (const record of records) {
+    if (!isObject(record.issues)) continue;
+    for (const [name, probability] of Object.entries(record.issues)) {
+      if (typeof probability !== "number" || !Number.isFinite(probability)) continue;
+      const bucket = buckets.get(name) ?? { name, max: 0, sum: 0, count: 0, reports: 0 };
+      bucket.max = Math.max(bucket.max, probability);
+      bucket.sum += probability;
+      bucket.count += 1;
+      if (record.reported_issues?.includes(name)) bucket.reports += 1;
+      buckets.set(name, bucket);
+    }
+  }
+  return [...buckets.values()]
+    .map((bucket) => ({
+      name: bucket.name,
+      max: bucket.max,
+      mean: bucket.sum / bucket.count,
+      reports: bucket.reports,
+      samples: bucket.count,
+    }))
+    .sort((left, right) => right.max - left.max || left.name.localeCompare(right.name));
+}
+
+export function summarizeManifest(parsed) {
+  const duration = parsed.header.source.duration_s;
+  const windowDecisions = Object.fromEntries(READINESS_LABELS.map((label) => [label, 0]));
+  for (const window of parsed.windows) {
+    const decision = decisionFor(window);
+    if (Object.hasOwn(windowDecisions, decision)) windowDecisions[decision] += 1;
+  }
+  const routedSeconds = Object.fromEntries(READINESS_LABELS.map((label) => [label, 0]));
+  for (const segment of parsed.segments) {
+    const decision = decisionFor(segment);
+    if (Object.hasOwn(routedSeconds, decision)) {
+      routedSeconds[decision] += segment.end_s - segment.start_s;
+    }
+  }
+  return {
+    duration,
+    windows: parsed.windows.length,
+    segments: parsed.segments.length,
+    windowDecisions,
+    routedSeconds,
+    issues: aggregateIssues(parsed.segments.length > 0 ? parsed.segments : parsed.windows),
+  };
+}
+
+export function formatDuration(seconds) {
+  if (typeof seconds !== "number" || !Number.isFinite(seconds) || seconds < 0) return "—";
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainder = seconds % 60;
+  if (hours > 0) {
+    return `${hours}:${String(minutes).padStart(2, "0")}:${remainder.toFixed(1).padStart(4, "0")}`;
+  }
+  return `${minutes}:${remainder.toFixed(1).padStart(4, "0")}`;
+}
+
+export function buildSegmentExport(parsed, selectedIndexes = null) {
+  const selected = selectedIndexes === null
+    ? parsed.segments
+    : parsed.segments.filter((segment) => selectedIndexes.has(segment.segment_index));
+  return {
+    schema: "egosieve.segment-selection/v1",
+    exported_at: new Date().toISOString(),
+    source: parsed.header.source,
+    model: parsed.header.model ?? null,
+    manifest: {
+      schema: parsed.header.schema,
+      schema_version: parsed.header.schema_version,
+      created_at: parsed.header.created_at ?? null,
+      generator: parsed.header.generator ?? null,
+    },
+    segments: selected,
+  };
+}

manifest.test.mjs

@@ -0,0 +1,150 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  ManifestValidationError,
+  aggregateIssues,
+  buildSegmentExport,
+  decisionFor,
+  formatDuration,
+  parseManifest,
+  summarizeManifest,
+} from "./manifest.mjs";
+
+function fixture(overrides = {}) {
+  const header = {
+    record_type: "manifest",
+    schema: "egosieve.video-compilation",
+    schema_version: 1,
+    created_at: "2026-08-23T12:00:00Z",
+    generator: "egosieve test",
+    source: {
+      source_path: "source.mp4",
+      source_sha256: "f".repeat(64),
+      duration_s: 12,
+      display_width: 1280,
+      display_height: 720,
+      fps: 30,
+    },
+    model: { id: "example/EgoSieve-S", revision: "a".repeat(40) },
+    counts: { windows: 2, segments: 2 },
+    ...overrides,
+  };
+  const windows = [
+    {
+      record_type: "window",
+      schema_version: 1,
+      window_index: 0,
+      start_s: 0,
+      end_s: 6,
+      decision: "KEEP",
+      readiness: { KEEP: 0.8, REVIEW: 0.15, REJECT: 0.05 },
+      issues: { blur: 0.1, exposure: 0.2 },
+      reported_issues: [],
+      boundary: [],
+    },
+    {
+      record_type: "window",
+      schema_version: 1,
+      window_index: 1,
+      start_s: 6,
+      end_s: 12,
+      decision: "REVIEW",
+      readiness: { KEEP: 0.25, REVIEW: 0.65, REJECT: 0.1 },
+      issues: { blur: 0.7, exposure: 0.3 },
+      reported_issues: ["blur"],
+      boundary: [],
+    },
+  ];
+  const segments = [
+    {
+      record_type: "segment",
+      schema_version: 1,
+      segment_index: 0,
+      start_s: 0,
+      end_s: 6,
+      route: "keep",
+      decision: "KEEP",
+      reason: "stable",
+      window_indices: [0],
+      readiness: { KEEP: 0.8, REVIEW: 0.15, REJECT: 0.05 },
+      issues: { blur: 0.1, exposure: 0.2 },
+      reported_issues: [],
+    },
+    {
+      record_type: "segment",
+      schema_version: 1,
+      segment_index: 1,
+      start_s: 6,
+      end_s: 12,
+      route: "review",
+      decision: "REVIEW",
+      reason: "uncertain",
+      window_indices: [1],
+      readiness: { KEEP: 0.25, REVIEW: 0.65, REJECT: 0.1 },
+      issues: { blur: 0.7, exposure: 0.3 },
+      reported_issues: ["blur"],
+    },
+  ];
+  return [header, ...windows, ...segments].map((record) => JSON.stringify(record)).join("\n");
+}
+
+test("parses a versioned manifest and preserves sorted evidence", () => {
+  const parsed = parseManifest(fixture());
+  assert.equal(parsed.header.schema_version, 1);
+  assert.deepEqual(parsed.windows.map((row) => row.window_index), [0, 1]);
+  assert.deepEqual(parsed.segments.map((row) => row.segment_index), [0, 1]);
+  assert.deepEqual(parsed.warnings, []);
+});
+
+test("summarizes routing and issue evidence", () => {
+  const summary = summarizeManifest(parseManifest(fixture()));
+  assert.deepEqual(summary.windowDecisions, { KEEP: 1, REVIEW: 1, REJECT: 0 });
+  assert.deepEqual(summary.routedSeconds, { KEEP: 6, REVIEW: 6, REJECT: 0 });
+  assert.equal(summary.issues[0].name, "blur");
+  assert.equal(summary.issues[0].max, 0.7);
+  assert.ok(Math.abs(summary.issues[0].mean - 0.4) < 1e-12);
+});
+
+test("rejects malformed JSON, schemas, intervals, and probabilities", () => {
+  assert.throws(() => parseManifest("{oops"), /Line 1: invalid JSON/u);
+  assert.throws(
+    () => parseManifest(fixture({ schema: "unknown" })),
+    (error) => error instanceof ManifestValidationError && /unsupported schema/u.test(error.message),
+  );
+  assert.throws(
+    () => parseManifest(fixture().replace('"end_s":6', '"end_s":0')),
+    /end_s must be greater/u,
+  );
+  assert.throws(
+    () => parseManifest(fixture().replace('"blur":0.1', '"blur":1.1')),
+    /issues\.blur must be between/u,
+  );
+});
+
+test("reports count and reference mismatches without hiding the evidence", () => {
+  const text = fixture({ counts: { windows: 8, segments: 9 } }).replace(
+    '"window_indices":[1]',
+    '"window_indices":[1,99]',
+  );
+  const parsed = parseManifest(text);
+  assert.equal(parsed.warnings.length, 3);
+  assert.match(parsed.warnings[0], /declares 8 windows/u);
+  assert.match(parsed.warnings[2], /missing window indexes: 99/u);
+});
+
+test("exports only selected segments with source and model identity", () => {
+  const parsed = parseManifest(fixture());
+  const exported = buildSegmentExport(parsed, new Set([1]));
+  assert.equal(exported.schema, "egosieve.segment-selection/v1");
+  assert.equal(exported.source.source_sha256, "f".repeat(64));
+  assert.equal(exported.model.revision, "a".repeat(40));
+  assert.deepEqual(exported.segments.map((row) => row.segment_index), [1]);
+});
+
+test("formatters and route fallback remain deterministic", () => {
+  assert.equal(formatDuration(65.25), "1:05.3");
+  assert.equal(formatDuration(3661.2), "1:01:01.2");
+  assert.equal(decisionFor({ route: "discard" }), "REJECT");
+  assert.deepEqual(aggregateIssues([]), []);
+});

styles.css

@@ -0,0 +1,1667 @@
+:root {
+  --ink: #10110f;
+  --ink-soft: #191a17;
+  --ink-raised: #22231f;
+  --paper: #efeee6;
+  --paper-dim: #c2c1b8;
+  --grid: rgba(239, 238, 230, 0.075);
+  --acid: #d7ff35;
+  --acid-dark: #8cae00;
+  --orange: #ff5b26;
+  --red: #ff3158;
+  --steel: #898b83;
+  --line: rgba(239, 238, 230, 0.22);
+  --display: "Franklin Gothic Medium", "Avenir Next Condensed", "DIN Condensed", Impact, sans-serif;
+  --mono: "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, monospace;
+  --shadow: 10px 10px 0 rgba(0, 0, 0, 0.26);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-width: 320px;
+  margin: 0;
+  color: var(--paper);
+  background:
+    linear-gradient(var(--grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
+    var(--ink);
+  background-size: 32px 32px;
+  font-family: var(--mono);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+summary:focus-visible,
+[tabindex="0"]:focus-visible {
+  outline: 3px solid var(--acid);
+  outline-offset: 4px;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 12px;
+  left: 12px;
+  padding: 10px 14px;
+  color: var(--ink);
+  background: var(--acid);
+  transform: translateY(-160%);
+  transition: transform 140ms ease;
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.masthead,
+main,
+footer {
+  width: min(100% - 48px, 1500px);
+  margin-inline: auto;
+}
+
+.masthead {
+  min-height: 72px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  border-bottom: 1px solid var(--line);
+  font-size: 11px;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.wordmark,
+.masthead-link {
+  color: var(--paper);
+  text-decoration: none;
+}
+
+.wordmark {
+  display: inline-flex;
+  gap: 12px;
+  align-items: center;
+  width: max-content;
+  font-family: var(--display);
+  font-size: 18px;
+  letter-spacing: -0.03em;
+}
+
+.wordmark-mark {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2px;
+  transform: skewX(-12deg);
+}
+
+.wordmark-mark i {
+  background: var(--paper);
+}
+
+.wordmark-mark i:nth-child(2) {
+  background: var(--acid);
+}
+
+.wordmark-mark i:nth-child(3) {
+  height: 55%;
+  align-self: end;
+  background: var(--orange);
+}
+
+.masthead-status {
+  display: flex;
+  gap: 9px;
+  align-items: center;
+  color: var(--paper-dim);
+}
+
+.status-lamp {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--acid);
+  box-shadow: 0 0 0 4px rgba(215, 255, 53, 0.1);
+}
+
+.masthead-link {
+  justify-self: end;
+  padding-block: 4px;
+  border-bottom: 1px solid transparent;
+}
+
+.masthead-link:hover {
+  border-color: var(--orange);
+  color: var(--orange);
+}
+
+.hero {
+  position: relative;
+  min-height: 650px;
+  padding: clamp(84px, 10vw, 148px) 0 72px;
+  display: grid;
+  grid-template-columns: 70px minmax(0, 1fr) 180px;
+  gap: clamp(24px, 4vw, 72px);
+  align-items: end;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: "";
+  position: absolute;
+  inset: 60px 7% auto auto;
+  width: clamp(210px, 35vw, 510px);
+  aspect-ratio: 1;
+  border: 1px solid rgba(215, 255, 53, 0.3);
+  border-radius: 50%;
+  box-shadow:
+    0 0 0 48px rgba(215, 255, 53, 0.018),
+    0 0 0 96px rgba(215, 255, 53, 0.012);
+  pointer-events: none;
+}
+
+.hero-index {
+  align-self: center;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  color: var(--steel);
+  font-size: 10px;
+  letter-spacing: 0.25em;
+}
+
+.eyebrow {
+  margin: 0;
+  color: var(--paper-dim);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.eyebrow span {
+  color: var(--orange);
+}
+
+.hero h1 {
+  max-width: 1100px;
+  margin: 20px 0 38px;
+  font-family: var(--display);
+  font-size: clamp(66px, 10.5vw, 166px);
+  font-weight: 900;
+  font-stretch: condensed;
+  letter-spacing: -0.065em;
+  line-height: 0.78;
+  text-transform: uppercase;
+}
+
+.hero h1 em {
+  position: relative;
+  z-index: 1;
+  color: var(--ink);
+  font-style: normal;
+  -webkit-text-stroke: 2px var(--acid);
+  text-shadow: 7px 7px 0 var(--orange);
+}
+
+.hero-deck {
+  max-width: 720px;
+  margin: 0 0 0 clamp(0px, 7vw, 110px);
+  padding-left: 24px;
+  border-left: 4px solid var(--acid);
+  color: var(--paper-dim);
+  font-size: clamp(14px, 1.4vw, 18px);
+}
+
+.hero-stamp {
+  position: relative;
+  z-index: 1;
+  width: 156px;
+  padding: 18px;
+  border: 1px solid var(--paper);
+  background: var(--ink);
+  transform: rotate(3deg);
+  box-shadow: 6px 6px 0 var(--orange);
+}
+
+.hero-stamp span,
+.hero-stamp small {
+  display: block;
+  color: var(--acid);
+  font-size: 8px;
+  letter-spacing: 0.19em;
+}
+
+.hero-stamp strong {
+  display: block;
+  margin: 8px 0;
+  font-family: var(--display);
+  font-size: 31px;
+  line-height: 0.84;
+  letter-spacing: -0.04em;
+}
+
+.load-bay,
+.cli-band,
+.workspace {
+  scroll-margin-top: 18px;
+}
+
+.load-bay {
+  margin-bottom: 80px;
+  padding: clamp(28px, 4vw, 54px);
+  color: var(--ink);
+  background: var(--paper);
+  box-shadow: var(--shadow);
+}
+
+.section-heading {
+  display: grid;
+  grid-template-columns: 62px 1fr minmax(200px, 430px);
+  gap: 20px;
+  align-items: end;
+  margin-bottom: 35px;
+}
+
+.section-number {
+  color: var(--orange);
+  font-family: var(--display);
+  font-size: 44px;
+  line-height: 0.9;
+}
+
+.section-heading h2,
+.cli-label h2,
+.workspace h2,
+.panel h3,
+.export-dock h3 {
+  margin: 2px 0 0;
+  font-family: var(--display);
+  font-weight: 900;
+  letter-spacing: -0.035em;
+  line-height: 0.95;
+  text-transform: uppercase;
+}
+
+.section-heading h2,
+.cli-label h2,
+.workspace h2 {
+  font-size: clamp(34px, 4vw, 58px);
+}
+
+.section-note {
+  justify-self: end;
+  max-width: 430px;
+  margin: 0;
+  color: #56574f;
+  font-size: 12px;
+}
+
+.file-grid {
+  display: grid;
+  grid-template-columns: 1.45fr 1fr;
+  gap: 16px;
+}
+
+.file-bay {
+  position: relative;
+  min-height: 235px;
+  padding: 30px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1fr auto auto auto;
+  column-gap: 28px;
+  border: 2px solid var(--ink);
+  cursor: pointer;
+  overflow: hidden;
+  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
+}
+
+.file-bay:hover,
+.file-bay:focus-within,
+.file-bay.is-dragging {
+  transform: translate(-4px, -4px);
+  box-shadow: 8px 8px 0 var(--ink);
+}
+
+.manifest-bay:hover,
+.manifest-bay:focus-within,
+.manifest-bay.is-dragging {
+  background: var(--acid);
+}
+
+.video-bay {
+  color: var(--paper);
+  background: var(--ink);
+}
+
+.video-bay:hover,
+.video-bay:focus-within,
+.video-bay.is-dragging {
+  color: var(--ink);
+  background: var(--orange);
+}
+
+.file-bay input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.file-number {
+  position: absolute;
+  top: 15px;
+  right: 18px;
+  font-family: var(--display);
+  font-size: 72px;
+  line-height: 1;
+  opacity: 0.11;
+}
+
+.file-icon {
+  grid-row: 1 / 5;
+  align-self: center;
+  font-family: var(--display);
+  font-size: 68px;
+  line-height: 1;
+}
+
+.file-bay strong {
+  align-self: end;
+  font-family: var(--display);
+  font-size: clamp(24px, 2.6vw, 39px);
+  line-height: 0.95;
+  letter-spacing: -0.04em;
+  text-transform: uppercase;
+}
+
+.file-bay > span:not(.file-number, .file-icon) {
+  margin-top: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-bay small {
+  margin-top: 6px;
+  opacity: 0.65;
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.load-actions {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  margin-top: 22px;
+}
+
+.button {
+  min-height: 46px;
+  padding: 13px 19px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--ink);
+  border-radius: 0;
+  color: var(--ink);
+  background: transparent;
+  font-family: var(--display);
+  font-size: 15px;
+  font-weight: 900;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  text-decoration: none;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: transform 130ms ease, box-shadow 130ms ease, color 130ms ease, background 130ms ease;
+}
+
+.button:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 4px 4px 0 currentColor;
+}
+
+.button-primary {
+  color: var(--ink);
+  border-color: var(--orange);
+  background: var(--orange);
+}
+
+.button-quiet:hover {
+  color: var(--paper);
+  background: var(--ink);
+  box-shadow: 4px 4px 0 var(--orange);
+}
+
+.privacy-note {
+  margin-left: auto;
+  color: #5d5e56;
+  font-size: 11px;
+}
+
+.privacy-note span {
+  margin-right: 6px;
+  color: var(--acid-dark);
+}
+
+.notice {
+  margin-top: 22px;
+  padding: 13px 16px;
+  border-left: 5px solid var(--orange);
+  color: var(--paper);
+  background: var(--ink);
+  font-size: 12px;
+}
+
+.notice.is-error {
+  border-color: var(--red);
+}
+
+.cli-band {
+  margin: 0 0 105px;
+  padding: 32px 0;
+  display: grid;
+  grid-template-columns: minmax(270px, 0.8fr) minmax(260px, 0.7fr) minmax(430px, 1.5fr);
+  gap: clamp(28px, 4vw, 64px);
+  align-items: center;
+  border-block: 1px solid var(--line);
+}
+
+.cli-label {
+  display: grid;
+  grid-template-columns: 55px 1fr;
+  gap: 14px;
+  align-items: end;
+}
+
+.cli-label h2 {
+  font-size: 30px;
+}
+
+.cli-band > p {
+  margin: 0;
+  color: var(--paper-dim);
+  font-size: 11px;
+}
+
+.command-shell {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 14px 14px 14px 18px;
+  border: 1px solid var(--line);
+  background: var(--ink-soft);
+  box-shadow: 5px 5px 0 rgba(255, 91, 38, 0.25);
+}
+
+.prompt {
+  color: var(--acid);
+  font-weight: 700;
+}
+
+.command-shell code {
+  overflow-x: auto;
+  color: var(--paper);
+  font-size: 11px;
+  scrollbar-width: thin;
+  white-space: nowrap;
+}
+
+.copy-button {
+  min-width: 58px;
+  padding: 8px 10px;
+  border: 1px solid var(--acid);
+  border-radius: 0;
+  color: var(--acid);
+  background: transparent;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+}
+
+.copy-button:hover {
+  color: var(--ink);
+  background: var(--acid);
+}
+
+.copy-button.dark {
+  border-color: var(--ink);
+  color: var(--ink);
+}
+
+.copy-button.dark:hover {
+  color: var(--paper);
+  background: var(--ink);
+}
+
+.workspace {
+  padding-bottom: 100px;
+}
+
+.workspace-heading {
+  grid-template-columns: 62px 1fr minmax(200px, 460px);
+}
+
+.manifest-identity {
+  justify-self: end;
+  min-width: 0;
+  text-align: right;
+}
+
+.manifest-identity strong,
+.manifest-identity span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.manifest-identity strong {
+  color: var(--acid);
+  font-size: 12px;
+}
+
+.manifest-identity span {
+  margin-top: 4px;
+  color: var(--paper-dim);
+  font-size: 10px;
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+}
+
+.metric-card {
+  min-height: 160px;
+  padding: 23px;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  background: rgba(16, 17, 15, 0.76);
+}
+
+.metric-card > span,
+.metric-card small {
+  color: var(--paper-dim);
+  font-size: 9px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.metric-card strong {
+  margin: auto 0 7px;
+  font-family: var(--display);
+  font-size: clamp(37px, 4.2vw, 66px);
+  letter-spacing: -0.05em;
+  line-height: 0.8;
+}
+
+.metric-acid strong {
+  color: var(--acid);
+}
+
+.metric-orange strong {
+  color: var(--orange);
+}
+
+.warning-stack {
+  margin-top: 16px;
+  padding: 13px 16px;
+  border-left: 5px solid #ffcf35;
+  color: #ffe49a;
+  background: rgba(255, 207, 53, 0.08);
+  font-size: 11px;
+}
+
+.warning-stack p {
+  margin: 3px 0;
+}
+
+.analysis-grid,
+.evidence-grid {
+  display: grid;
+  gap: 18px;
+  margin-top: 18px;
+}
+
+.analysis-grid {
+  grid-template-columns: minmax(320px, 0.8fr) minmax(500px, 1.4fr);
+}
+
+.evidence-grid {
+  grid-template-columns: minmax(540px, 1.45fr) minmax(300px, 0.7fr);
+}
+
+.panel {
+  min-width: 0;
+  border: 1px solid var(--line);
+  background: rgba(25, 26, 23, 0.95);
+}
+
+.panel-heading {
+  min-height: 77px;
+  padding: 18px 20px;
+  display: flex;
+  gap: 18px;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--line);
+}
+
+.panel-index,
+.panel-state {
+  color: var(--steel);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+}
+
+.panel h3 {
+  font-size: 25px;
+}
+
+.panel-state {
+  padding: 5px 7px;
+  border: 1px solid rgba(239, 238, 230, 0.2);
+}
+
+.video-stage {
+  position: relative;
+  min-height: 410px;
+  display: grid;
+  place-items: center;
+  background:
+    radial-gradient(circle at center, rgba(215, 255, 53, 0.08), transparent 44%),
+    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 4px),
+    #090a09;
+  overflow: hidden;
+}
+
+.video-stage::before,
+.video-stage::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  width: 26px;
+  height: 26px;
+  border-color: var(--acid);
+  pointer-events: none;
+}
+
+.video-stage::before {
+  top: 15px;
+  left: 15px;
+  border-top: 1px solid;
+  border-left: 1px solid;
+}
+
+.video-stage::after {
+  right: 15px;
+  bottom: 15px;
+  border-right: 1px solid;
+  border-bottom: 1px solid;
+}
+
+.video-stage video {
+  width: 100%;
+  max-height: 540px;
+  background: #000;
+}
+
+.video-empty {
+  max-width: 280px;
+  padding: 45px 28px;
+  text-align: center;
+}
+
+.video-empty > span {
+  display: block;
+  color: var(--acid);
+  font-family: var(--display);
+  font-size: 70px;
+  line-height: 1;
+  opacity: 0.35;
+}
+
+.video-empty strong {
+  display: block;
+  margin: 5px 0 8px;
+  font-family: var(--display);
+  font-size: 24px;
+  text-transform: uppercase;
+}
+
+.video-empty p,
+.media-footnote,
+.issue-deck {
+  color: var(--paper-dim);
+  font-size: 10px;
+}
+
+.video-timecode {
+  position: absolute;
+  z-index: 2;
+  right: 15px;
+  bottom: 14px;
+  padding: 5px 8px;
+  color: var(--acid);
+  background: rgba(0, 0, 0, 0.8);
+  font-size: 10px;
+  pointer-events: none;
+}
+
+.media-footnote {
+  margin: 0;
+  padding: 13px 20px;
+  border-top: 1px solid var(--line);
+}
+
+.legend {
+  display: flex;
+  gap: 14px;
+  font-size: 8px;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+}
+
+.legend span::before {
+  content: "";
+  width: 14px;
+  height: 3px;
+  display: inline-block;
+  margin-right: 5px;
+  vertical-align: middle;
+  background: currentColor;
+}
+
+.legend-keep {
+  color: var(--acid);
+}
+
+.legend-review {
+  color: var(--orange);
+}
+
+.legend-reject {
+  color: var(--steel);
+}
+
+.timeline-stage {
+  position: relative;
+  min-height: 410px;
+  background:
+    linear-gradient(rgba(239, 238, 230, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(239, 238, 230, 0.035) 1px, transparent 1px),
+    #121310;
+  background-size: 34px 34px;
+}
+
+#timeline {
+  width: 100%;
+  height: 410px;
+  display: block;
+  cursor: crosshair;
+}
+
+#timeline text {
+  fill: var(--steel);
+  font-family: var(--mono);
+  font-size: 11px;
+}
+
+.chart-tooltip {
+  position: absolute;
+  z-index: 4;
+  min-width: 155px;
+  padding: 10px 12px;
+  border: 1px solid var(--acid);
+  color: var(--paper);
+  background: rgba(9, 10, 9, 0.96);
+  box-shadow: 4px 4px 0 rgba(215, 255, 53, 0.18);
+  font-size: 9px;
+  line-height: 1.65;
+  pointer-events: none;
+}
+
+.segment-track {
+  position: relative;
+  height: 36px;
+  margin: 0 20px;
+  background: #0b0c0a;
+  border: 1px solid var(--line);
+}
+
+.track-segment {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  min-width: 2px;
+  padding: 0;
+  border: 0;
+  border-right: 1px solid var(--ink);
+  cursor: pointer;
+  transition: filter 120ms ease, transform 120ms ease;
+}
+
+.track-segment:hover,
+.track-segment.is-selected {
+  z-index: 2;
+  filter: brightness(1.45);
+  transform: scaleY(1.2);
+}
+
+.track-segment.route-keep {
+  background: var(--acid);
+}
+
+.track-segment.route-review {
+  background: var(--orange);
+}
+
+.track-segment.route-discard {
+  background: var(--steel);
+}
+
+.timeline-axis {
+  padding: 7px 20px 16px;
+  display: flex;
+  justify-content: space-between;
+  color: var(--steel);
+  font-size: 8px;
+}
+
+.route-filters {
+  display: flex;
+  gap: 5px;
+}
+
+.route-filters button {
+  padding: 6px 8px;
+  border: 1px solid var(--line);
+  color: var(--paper-dim);
+  background: transparent;
+  font-size: 8px;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+}
+
+.route-filters button:hover,
+.route-filters button[aria-pressed="true"] {
+  color: var(--ink);
+  border-color: var(--acid);
+  background: var(--acid);
+}
+
+.segment-list {
+  max-height: 680px;
+  overflow-y: auto;
+  scrollbar-color: var(--steel) var(--ink);
+}
+
+.segment-row {
+  width: 100%;
+  min-height: 92px;
+  padding: 17px 20px;
+  display: grid;
+  grid-template-columns: 54px 92px minmax(160px, 1fr) minmax(120px, 0.7fr) auto;
+  gap: 14px;
+  align-items: center;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  color: var(--paper);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: color 130ms ease, background 130ms ease;
+}
+
+.segment-row:hover,
+.segment-row.is-selected {
+  color: var(--ink);
+  background: var(--paper);
+}
+
+.segment-row.is-selected {
+  box-shadow: inset 5px 0 var(--orange);
+}
+
+.segment-row-index {
+  color: var(--steel);
+  font-family: var(--display);
+  font-size: 28px;
+}
+
+.segment-route {
+  width: max-content;
+  padding: 4px 7px;
+  color: var(--ink);
+  font-size: 9px;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+}
+
+.segment-route.route-keep {
+  background: var(--acid);
+}
+
+.segment-route.route-review {
+  background: var(--orange);
+}
+
+.segment-route.route-discard {
+  color: var(--paper);
+  background: var(--steel);
+}
+
+.segment-time strong,
+.segment-time small,
+.segment-score strong,
+.segment-score small {
+  display: block;
+}
+
+.segment-time strong {
+  font-size: 12px;
+}
+
+.segment-time small,
+.segment-score small {
+  margin-top: 3px;
+  color: var(--steel);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.segment-row:hover small,
+.segment-row.is-selected small {
+  color: #686961;
+}
+
+.segment-score {
+  text-align: right;
+}
+
+.segment-score strong {
+  font-family: var(--display);
+  font-size: 24px;
+}
+
+.segment-issue-count {
+  color: var(--orange);
+  font-size: 9px;
+  white-space: nowrap;
+}
+
+.empty-list {
+  padding: 42px 20px;
+  color: var(--paper-dim);
+  text-align: center;
+  font-size: 11px;
+}
+
+.issue-deck {
+  margin: 18px 20px 4px;
+}
+
+.issue-list {
+  padding: 8px 20px 24px;
+}
+
+.issue-row {
+  padding: 13px 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.issue-row-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: baseline;
+}
+
+.issue-name {
+  overflow: hidden;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.issue-value {
+  color: var(--orange);
+  font-size: 9px;
+}
+
+.issue-meter {
+  position: relative;
+  height: 5px;
+  margin-top: 8px;
+  background: rgba(239, 238, 230, 0.1);
+}
+
+.issue-meter span {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: var(--orange);
+}
+
+.issue-meter i {
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  width: 1px;
+  background: var(--paper);
+}
+
+.selected-panel {
+  margin-top: 18px;
+  color: var(--ink);
+  border-color: var(--paper);
+  background: var(--paper);
+  box-shadow: 8px 8px 0 var(--orange);
+}
+
+.selected-panel .panel-heading {
+  border-color: rgba(16, 17, 15, 0.25);
+}
+
+.selected-panel .panel-index {
+  color: #616259;
+}
+
+.selected-grid {
+  display: grid;
+  grid-template-columns: minmax(230px, 0.7fr) minmax(280px, 1fr) minmax(240px, 1fr);
+  gap: 30px;
+  padding: 26px;
+}
+
+.selected-decision > span {
+  display: block;
+  width: max-content;
+  margin-bottom: 18px;
+  padding: 5px 9px;
+  color: var(--ink);
+  background: var(--acid);
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+}
+
+.selected-decision > span.route-review {
+  background: var(--orange);
+}
+
+.selected-decision > span.route-discard {
+  color: var(--paper);
+  background: var(--steel);
+}
+
+.selected-decision strong,
+.selected-decision small {
+  display: block;
+}
+
+.selected-decision strong {
+  font-family: var(--display);
+  font-size: 28px;
+  line-height: 1;
+}
+
+.selected-decision small {
+  margin-top: 7px;
+  color: #62635b;
+  font-size: 9px;
+  text-transform: uppercase;
+}
+
+.selected-scores {
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.selected-scores div {
+  min-width: 0;
+  padding: 13px;
+  border: 1px solid rgba(16, 17, 15, 0.25);
+}
+
+.selected-scores dt {
+  overflow: hidden;
+  color: #62635b;
+  font-size: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selected-scores dd {
+  margin: 8px 0 0;
+  font-family: var(--display);
+  font-size: 25px;
+}
+
+.selected-issues {
+  align-self: start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.issue-chip {
+  padding: 5px 7px;
+  border: 1px solid rgba(16, 17, 15, 0.35);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.metadata-drawer {
+  margin-top: 55px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.metadata-drawer summary {
+  padding: 24px 2px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  list-style: none;
+  cursor: pointer;
+  font-family: var(--display);
+  font-size: 20px;
+  text-transform: uppercase;
+}
+
+.metadata-drawer summary::-webkit-details-marker {
+  display: none;
+}
+
+.metadata-drawer summary::after {
+  content: "+";
+  margin-left: 20px;
+  color: var(--acid);
+  font-family: var(--mono);
+  font-size: 26px;
+}
+
+.metadata-drawer[open] summary::after {
+  content: "−";
+}
+
+.metadata-drawer summary b {
+  margin-right: 16px;
+  color: var(--orange);
+}
+
+.metadata-drawer summary small {
+  margin-left: auto;
+  color: var(--steel);
+  font-family: var(--mono);
+  font-size: 8px;
+  letter-spacing: 0.1em;
+}
+
+.metadata-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-top: 1px solid var(--line);
+  border-left: 1px solid var(--line);
+}
+
+.metadata-item {
+  min-height: 100px;
+  padding: 16px;
+  border-right: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.metadata-item span,
+.metadata-item strong {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.metadata-item span {
+  color: var(--steel);
+  font-size: 8px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.metadata-item strong {
+  margin-top: 11px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+#raw-header {
+  max-height: 400px;
+  margin: 0;
+  padding: 22px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-top: 0;
+  color: var(--acid);
+  background: #090a09;
+  font: 10px/1.7 var(--mono);
+  white-space: pre-wrap;
+}
+
+.export-dock {
+  margin-top: 55px;
+  padding: clamp(25px, 4vw, 48px);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 40px;
+  align-items: center;
+  color: var(--ink);
+  background: var(--acid);
+  box-shadow: 9px 9px 0 var(--orange);
+}
+
+.export-dock h3 {
+  margin-top: 7px;
+  font-size: clamp(33px, 5vw, 67px);
+}
+
+.export-dock .eyebrow,
+.export-dock p {
+  color: #34362b;
+}
+
+.export-dock p:last-child {
+  max-width: 680px;
+  margin-bottom: 0;
+  font-size: 10px;
+}
+
+.export-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.export-actions .button-primary {
+  color: var(--paper);
+  border-color: var(--ink);
+  background: var(--ink);
+}
+
+.button-quiet.light:hover {
+  color: var(--paper);
+  background: var(--ink);
+  box-shadow: 4px 4px 0 var(--orange);
+}
+
+footer {
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid var(--line);
+  color: var(--steel);
+  font-size: 8px;
+  letter-spacing: 0.16em;
+}
+
+.toast {
+  position: fixed;
+  z-index: 90;
+  right: 24px;
+  bottom: 24px;
+  max-width: min(380px, calc(100vw - 48px));
+  padding: 13px 16px;
+  color: var(--ink);
+  background: var(--acid);
+  box-shadow: 5px 5px 0 var(--orange);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+noscript {
+  position: fixed;
+  inset: auto 20px 20px;
+  z-index: 100;
+  padding: 18px;
+  color: var(--ink);
+  background: var(--orange);
+}
+
+@media (max-width: 1120px) {
+  .hero {
+    grid-template-columns: 45px minmax(0, 1fr) 140px;
+  }
+
+  .hero-stamp {
+    width: 135px;
+  }
+
+  .cli-band {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .command-shell {
+    grid-column: 1 / -1;
+  }
+
+  .analysis-grid,
+  .evidence-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .video-stage {
+    min-height: 350px;
+  }
+
+  .selected-grid {
+    grid-template-columns: 0.7fr 1.3fr;
+  }
+
+  .selected-issues {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 800px) {
+  .masthead,
+  main,
+  footer {
+    width: min(100% - 28px, 1500px);
+  }
+
+  .masthead {
+    grid-template-columns: 1fr auto;
+  }
+
+  .masthead-status {
+    display: none;
+  }
+
+  .hero {
+    min-height: 560px;
+    padding-top: 85px;
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+
+  .hero-index {
+    display: none;
+  }
+
+  .hero-stamp {
+    position: absolute;
+    right: 9px;
+    bottom: 45px;
+    width: 115px;
+  }
+
+  .hero-stamp strong {
+    font-size: 23px;
+  }
+
+  .hero-deck {
+    max-width: calc(100% - 125px);
+    margin-left: 0;
+  }
+
+  .section-heading,
+  .workspace-heading {
+    grid-template-columns: 50px 1fr;
+  }
+
+  .section-note,
+  .manifest-identity {
+    grid-column: 2;
+    justify-self: start;
+    text-align: left;
+  }
+
+  .file-grid,
+  .metric-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .file-grid {
+    gap: 10px;
+  }
+
+  .file-bay {
+    min-height: 260px;
+    padding: 23px;
+    grid-template-columns: 1fr;
+  }
+
+  .file-icon {
+    grid-row: auto;
+    font-size: 50px;
+  }
+
+  .file-bay > span:not(.file-number, .file-icon) {
+    white-space: normal;
+  }
+
+  .load-actions {
+    flex-wrap: wrap;
+  }
+
+  .privacy-note {
+    width: 100%;
+    margin: 5px 0 0;
+  }
+
+  .cli-band {
+    grid-template-columns: 1fr;
+    gap: 22px;
+  }
+
+  .command-shell {
+    grid-column: auto;
+  }
+
+  .segment-row {
+    grid-template-columns: 44px 80px 1fr auto;
+  }
+
+  .segment-score {
+    display: none;
+  }
+
+  .metadata-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .export-dock {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .masthead-link {
+    font-size: 0;
+  }
+
+  .masthead-link::after {
+    content: "HF ↗";
+    font-size: 10px;
+  }
+
+  .hero {
+    min-height: 520px;
+    padding-top: 70px;
+  }
+
+  .hero h1 {
+    font-size: clamp(52px, 18vw, 88px);
+  }
+
+  .hero-deck {
+    max-width: 100%;
+    margin-right: 95px;
+    font-size: 12px;
+  }
+
+  .hero-stamp {
+    right: 5px;
+    bottom: 28px;
+    width: 94px;
+    padding: 12px;
+  }
+
+  .load-bay {
+    padding: 22px 16px;
+  }
+
+  .section-heading,
+  .workspace-heading {
+    grid-template-columns: 40px 1fr;
+  }
+
+  .section-number {
+    font-size: 34px;
+  }
+
+  .file-grid,
+  .metric-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .file-bay {
+    min-height: 200px;
+  }
+
+  .button {
+    width: 100%;
+  }
+
+  .load-actions .button {
+    flex: 1 1 100%;
+  }
+
+  .command-shell {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .command-shell .copy-button {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  .panel-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .timeline-panel .panel-heading,
+  .segments-panel .panel-heading {
+    min-height: 108px;
+  }
+
+  .legend,
+  .route-filters {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .video-stage,
+  .timeline-stage,
+  #timeline {
+    min-height: 300px;
+    height: 300px;
+  }
+
+  .segment-row {
+    grid-template-columns: 38px 74px 1fr;
+    gap: 9px;
+    padding-inline: 13px;
+  }
+
+  .segment-issue-count {
+    display: none;
+  }
+
+  .selected-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .selected-issues {
+    grid-column: auto;
+  }
+
+  .metadata-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .metadata-drawer summary small {
+    display: none;
+  }
+
+  .export-actions {
+    flex-direction: column;
+  }
+
+  footer {
+    flex-direction: column;
+    justify-content: center;
+    gap: 6px;
+    align-items: flex-start;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .status-lamp,
+  .segment-route,
+  .track-segment,
+  .issue-meter span,
+  .issue-meter i {
+    forced-color-adjust: none;
+  }
+}