Download
+Start with the public, editable Gloss v1 deck.
+ Get the .pptx ↓ +
-
- Generative Layout & OOXML Scoring System
+Supporting measurement for the Gloss challenge
Can your model make PowerPoint—or only pictures of it?
Twenty adversarial slides. Native tables, live charts, multilingual type, masters, groups, fields, and unforgiving geometry. Every published result is labeled exactly: grading-verified artifact score; generation-attested.
@@ -34,9 +34,9 @@
Can your model make PowerPoint—or only pictures o Read the API contract
+
-
+ Gloss measurement stack
+Hosted checker stack
- 01Quarantine
- 02LibreOffice render @@ -44,7 +44,7 @@
- 04Weighted checklist
Can your model make PowerPoint—or only pictures o
No screenshots. No traces. One final .pptx.
The fidelity board
Loading verified runs…
-
+
+ `;
+}
+
function frameIntro(t) {
- const p = ease(t / 1.5);
- const opacity = fadeInOut(t, 0, 2, 0.35);
- const offset = 40 * (1 - p);
+ const p = ease(t / 1.25);
+ const opacity = fadeInOut(t, 0, 3.2, 0.3);
return baseSvg(`
-
- ${mono("OPEN POWERPOINT BENCHMARK", 72, 112, { fill: colors.orange })}
- ${svgText("Gloss", 72, 480, { size: 230, weight: 780 })}
-
+ ${mono("GLOSS / AN OPEN ACID TEST", 72, 108, { fill: colors.orange })}
+ ${svgText("Make the deck.", 72, 430, { size: 116, weight: 780 })}
+ ${svgText("Not a screenshot.", 72, 552, { size: 116, weight: 780, fill: colors.blue })}
+
`);
}
-function frameTwoLayers(t) {
- const local = t - 2;
- const opacity = fadeInOut(t, 2, 9.2, 0.35);
- const rows = summary.paths.map((path, index) => ({
- label: path.label.toUpperCase(),
- value: path.mean_metrics.local_fidelity_percent,
- color: path.path_id.startsWith("native-") ? colors.blue : colors.orange,
- y: 430 + index * 130,
- }));
- const rowMarkup = rows.map((row, index) => {
- const stagger = ease((local - index * 0.32) / 3.4);
- const barWidth = row.value / 100 * 720 * stagger;
- const score = (row.value * stagger).toFixed(2);
- return `
- ${mono(row.label, 78, row.y - 28, { fill: colors.muted, size: 19 })}
-
- ${mono("GLOSS / FROZEN COMPARATIVE V1", 78, 90, { fill: colors.orange })}
- ${svgText("Local artifact", 78, 220, { size: 100, weight: 760 })}
- ${svgText("fidelity.", 78, 320, { size: 100, weight: 760 })}
- ${rowMarkup}
- ${mono(summary.disclosure.verification_label.toUpperCase(), 78, 1002, { fill: colors.muted, size: 17 })}
+ ${mono("THE CHALLENGE IS THE PRESENTATION", 64, 78, { fill: colors.orange })}
+ ${svgText("20 slides.", 64, 182, { size: 78, weight: 780 })}
+ ${svgText("No easy outs.", 64, 260, { size: 78, weight: 780, fill: colors.blue })}
+
+ ${slideFrame(slides.cover, 64, 360, 500, 281, { index: "01" })}
+ ${slideFrame(slides.composite, 518, 558, 500, 281, { index: "13", label: "COMPOSITE STRESS" })}
+ ${slideFrame(slides.final, 64, 754, 500, 281, { index: "20", label: "FINAL TORTURE" })}
+
+ ${mono("CHARTS · TABLES · FIELDS · MASTERS · RTL · GROUPS", 1014, 1025, { anchor: "end", size: 15, fill: colors.muted })}
`);
}
-function frameTwist(t) {
- const local = t - 9.2;
- const opacity = fadeInOut(t, 9.2, 11, 0.2);
- const p = ease(local / 1.2);
- const gap = (nativeGap * p).toFixed(2);
+function frameNative(t) {
+ const local = t - 8;
+ const opacity = fadeInOut(t, 8, 12.4, 0.3);
+ const p = ease(local / 1.4);
+ const list = ["LIVE CHART", "NATIVE TABLE", "EDITABLE TEXT", "REAL CONNECTIONS"];
return baseSvg(`
-
+ ${svgText("Everything", 64, 700, { size: 86, weight: 780 })}
+ ${svgText("stays editable.", 64, 786, { size: 86, weight: 780, fill: colors.blue })}
+ ${list.map((item, index) => `${mono(`0${index + 1}`, 70 + (index % 2) * 465, 890 + Math.floor(index / 2) * 76, { fill: colors.orange })}${svgText(item, 120 + (index % 2) * 465, 891 + Math.floor(index / 2) * 76, { size: 24, weight: 720 })}`).join("")}
+
- `, colors.ink);
+ `);
}
-function frameMethods(t) {
- const local = t - 11;
- const opacity = fadeInOut(t, 11, 18.2, 0.3);
- const rows = summary.paths.map((path, index) => {
- const y = 400 + index * 135;
- const p = ease((local - index * 0.22) / 3.5);
- const visual = path.mean_metrics.mean_visual_ssim_percent;
- const native = path.mean_metrics.native_weighted_pass_percent;
- return `
- ${mono(path.label.toUpperCase(), 76, y - 22, { fill: colors.muted, size: 18 })}
-
- ${mono("ORANGE = VISUAL SSIM · BLUE = NATIVE PASS", 76, 82, { fill: colors.blue })}
- ${svgText("Pixels cluster.", 76, 202, { size: 88, weight: 760 })}
- ${svgText("Structure splits.", 76, 292, { size: 88, weight: 760 })}
- ${rows}
- ${mono(`${summary.totals.runs} RUNS · ${summary.totals.slides} GRADED SLIDES · THREE PUBLIC SEEDS`, 76, 1020, { fill: colors.muted, size: 17 })}
+ ${mono("THE CHECKER IS THE SUPPORT LAYER", 70, 92, { fill: colors.orange })}
+ ${svgText("Move two things.", 70, 226, { size: 86, weight: 780 })}
+ ${svgText("See two things.", 70, 312, { size: 86, weight: 780, fill: colors.blue })}
+
+ ${mono("2 native objects changed:", 110, 632, { size: 23, fill: colors.acid })}
+ ${mono("Slide 02 · Agenda · position", 110, 708, { size: 21, fill: "#cdd4df" })}
+ ${mono("Slide 12 · Document Fields · position", 110, 766, { size: 21, fill: "#cdd4df" })}
+
+ ${mono("MEASUREMENT MADE EASY · THE DECK REMAINS THE POINT", 70, 978, { fill: colors.muted, size: 16 })}
+
+ `);
+}
+
+function frameAcid(t) {
+ const local = t - 15.8;
+ const opacity = fadeInOut(t, 15.8, 18.4, 0.25);
+ const p = ease(local / 1.1);
+ return baseSvg(`
+
+ ${mono("REMEMBER ACID?", 74, 96, { fill: colors.orange })}
+ ${svgText("One hostile", 74, 342, { size: 112, weight: 780 })}
+ ${svgText("public artifact.", 74, 454, { size: 112, weight: 780, fill: colors.blue })}
+
`);
}
function frameEnd(t) {
- const local = t - 18.2;
+ const local = t - 18.4;
const p = ease(local / 1.1);
const opacity = clamp(local / 0.25);
return baseSvg(`
-
- ${mono("OPEN TECHNICAL PREVIEW", 74, 92, { fill: colors.proof })}
- ${svgText("Gloss", 72, 388, { size: 230, weight: 790, fill: colors.paper })}
-
+ ${mono("ACID FOR PRESENTATION DECKS MADE BY AI", 74, 94, { fill: colors.acid })}
+ ${svgText("Gloss", 70, 380, { size: 232, weight: 790, fill: colors.paper })}
+
`, colors.ink);
}
function renderFrame(time) {
- if (time < 2) return frameIntro(time);
- if (time < 9.2) return frameTwoLayers(time);
- if (time < 11) return frameTwist(time);
- if (time < 18.2) return frameMethods(time);
+ if (time < 3.2) return frameIntro(time);
+ if (time < 8) return frameDeck(time);
+ if (time < 12.4) return frameNative(time);
+ if (time < 15.8) return frameCheck(time);
+ if (time < 18.4) return frameAcid(time);
return frameEnd(time);
}
function run(command, args, options = {}) {
const result = spawnSync(command, args, { encoding: "utf8", ...options });
- if (result.status !== 0) {
- throw new Error(`${command} failed\n${result.stderr || result.stdout}`);
- }
+ if (result.status !== 0) throw new Error(`${command} failed\n${result.stderr || result.stdout}`);
return result;
}
@@ -259,8 +287,8 @@ try {
"-crf", "18",
"-pix_fmt", "yuv420p",
"-movflags", "+faststart",
- "-metadata", "title=Gloss — Generative Layout & OOXML Scoring System",
- "-metadata", `comment=Rendered from ${summary.cohort.scoring_cohort_id}`,
+ "-metadata", "title=Gloss — Make the deck, not a screenshot",
+ "-metadata", "comment=Rendered from the public Gloss v1 presentation challenge",
"-an",
outputPath,
]);
diff --git a/launch/verify-launch.mjs b/launch/verify-launch.mjs
index 3dc1558..255e418 100644
--- a/launch/verify-launch.mjs
+++ b/launch/verify-launch.mjs
@@ -29,6 +29,10 @@ const robots = readFileSync(join(site, "robots.txt"), "utf8");
const sitemap = readFileSync(join(site, "sitemap.xml"), "utf8");
const siteScript = readFileSync(join(site, "site.js"), "utf8");
const videoRenderer = readFileSync(join(root, "launch/render-video.mjs"), "utf8");
+const launchPost = readFileSync(join(root, "launch/launch-post.md"), "utf8");
+const goldDeckPath = join(root, "gloss-v1/benchmark/deck/gold/gloss-v1-gold.pptx");
+const masterPromptPath = join(root, "gloss-v1/benchmark/prompts/DESIGNER_BRIEF.md");
+const exportDir = join(root, "gloss-v1/benchmark/deck/exports");
function assert(condition, message) {
if (!condition) throw new Error(message);
@@ -54,6 +58,10 @@ const requirementCounts = requirements.requirements.reduce((counts, requirement)
}, {});
assert(evidence.status === "technical_preview", "Launch evidence must remain labeled technical_preview");
+assert(
+ evidence.product_retronym === "Generative Layout & Object Structure Standard",
+ "Gloss retronym drifted",
+);
assert(evidence.operator_evidence.release_evidence_claimed === 0, "Preview must not claim release evidence");
assert(evidence.candidate_checks.total === index.entries.length, "Candidate-check count drifted from fixture index");
assert(evidence.candidate_checks.visual_render === visual, "Visual-check count drifted from fixture index");
@@ -78,8 +86,6 @@ assert(
for (const method of evidence.verification_methods) {
assert(method.count === methodCounts[method.id], `Verification method ${method.id} drifted from fixture index`);
- const htmlLabel = method.public_label.replaceAll("&", "&");
- assert(html.includes(`${htmlLabel}`) && html.includes(`${method.count}`), `Homepage method count is missing for ${method.id}`);
}
const sourcePaths = new Map([
@@ -95,22 +101,40 @@ for (const source of evidence.sources) {
}
const requiredCopy = [
- "A screenshot is not a",
- "Open technical preview",
- "0 official model results",
- "The repository is the product",
- "Working harness. Unfrozen benchmark.",
- "Four public baselines. Zero model claims.",
- "Inspect every deck and report",
+ "Make the deck.",
+ "Not a screenshot.",
+ "Gloss is ACID for presentation decks made by AI.",
+ "Move two things.",
+ "Twenty ways to fake a slide.",
+ "One exact prompt.",
+ "Native presentations, everywhere.",
+ "This deck may become training data.",
+ "Gloss lives on GitHub",
];
for (const copy of requiredCopy) assert(html.includes(copy), `Homepage is missing required copy: ${copy}`);
assert(!/official leaderboard[^<]{0,80}(live|launched|ready)/i.test(html), "Homepage overclaims official leaderboard readiness");
assert(html.includes("https://github.com/aronchick/gloss"), "Homepage must lead to GitHub");
assert(html.includes(''), "Homepage canonical URL is missing");
assert(html.includes('"codeRepository": "https://github.com/aronchick/gloss"'), "Homepage structured data must lead to GitHub");
-assert(siteScript.includes('fetch("/evidence/comparative-v1-summary.json")'), "Homepage chart must load the frozen comparative summary");
-assert(videoRenderer.includes("gloss-v1/benchmark/comparative-v1/summary.json"), "Launch video must load the frozen comparative summary");
-assert(!videoRenderer.includes("site/evidence/preview-v1.json"), "Launch video must not source comparative claims from preview evidence");
+assert(siteScript.includes("inspectorContent"), "Homepage native-object inspector is missing");
+assert(siteScript.includes("IntersectionObserver"), "Homepage slide navigation observer is missing");
+assert(!siteScript.includes("comparative-v1-summary.json"), "Homepage must not lead with comparative scoring data");
+assert(videoRenderer.includes("THE CHALLENGE IS THE PRESENTATION"), "Launch film must lead with the presentation challenge");
+assert(videoRenderer.includes("THE CHECKER IS THE SUPPORT LAYER"), "Launch film must keep measurement in a supporting role");
+assert(videoRenderer.includes("slide-13.png"), "Launch film must use the real composite-stress slide");
+assert(!videoRenderer.includes("comparative-v1/summary.json"), "Launch film must not be driven by comparative scores");
+assert(launchPost.includes("Make the deck. Not a screenshot."), "Launch post is missing the presentation-first message");
+assert(launchPost.includes("The deck is the challenge."), "Launch post must state the product hierarchy");
+assert(existsSync(goldDeckPath), "Downloadable Gloss v1 deck is missing");
+assert(existsSync(masterPromptPath), "Exact master prompt is missing");
+assert(html.includes("gloss-v1-gold.pptx"), "Homepage deck download is missing");
+assert(html.includes("prompts/DESIGNER_BRIEF.md"), "Homepage exact-prompt link is missing");
+for (let slide = 1; slide <= 20; slide += 1) {
+ const number = String(slide).padStart(2, "0");
+ assert(existsSync(join(exportDir, `slide-${number}.png`)), `Reference render ${number} is missing`);
+ assert(html.includes(`deck/exports/slide-${number}.png`), `Homepage image ${number} is missing`);
+ assert(html.includes(`canonical/slide-${number}.md`), `Homepage instructions ${number} are missing`);
+}
assert(robots.includes("Allow: /") && robots.includes("Sitemap: https://gloss.tools/sitemap.xml"), "robots.txt must expose the public site map");
assert(sitemap.includes("https://gloss.tools/ "), "sitemap.xml must contain the production homepage");
for (const header of [
@@ -136,7 +160,7 @@ assert(statSync(posterPath).size > 20_000, "Launch poster is missing or unexpect
const probe = spawnSync("ffprobe", [
"-v", "error",
- "-show_entries", "stream=codec_type,width,height,avg_frame_rate:format=duration",
+ "-show_entries", "stream=codec_type,width,height,avg_frame_rate:format=duration:format_tags=title,comment",
"-of", "json",
videoPath,
], { encoding: "utf8" });
@@ -148,5 +172,6 @@ assert(video?.width === 1080 && video?.height === 1080, "Launch video must be 10
assert(video?.avg_frame_rate === "30/1", "Launch video must be 30 fps");
assert(Math.abs(Number(metadata.format.duration) - 21) < 0.05, "Launch video must be 21 seconds");
assert(!audio, "Launch video must be silent and contain no audio stream");
+assert(metadata.format.tags?.title === "Gloss — Make the deck, not a screenshot", "Launch video title metadata drifted");
process.stdout.write(`Launch verification: PASS\n- evidence: ${evidence.evidence_id}\n- candidate checks: ${index.entries.length}\n- positive controls: ${positivePassed}/${report.results.length}\n- mutants detected: ${mutantsDetected}/${report.results.length}\n- site assets: present\n- video: 1080x1080, 30 fps, 21 seconds, silent\n`);
diff --git a/site/evidence/preview-v1.json b/site/evidence/preview-v1.json
index cd8798d..ff0c31e 100644
--- a/site/evidence/preview-v1.json
+++ b/site/evidence/preview-v1.json
@@ -2,7 +2,7 @@
"schema_version": "1.0",
"evidence_id": "gloss-technical-preview-2026-07-22",
"product_name": "Gloss",
- "product_retronym": "Generative Layout & OOXML Scoring System",
+ "product_retronym": "Generative Layout & Object Structure Standard",
"protocol_id": "gloss-v1",
"status": "technical_preview",
"status_label": "Technical preview — not an official leaderboard",
@@ -106,7 +106,7 @@
},
{
"path": "gloss-v1/benchmark/requirements/prompt-requirements.json",
- "sha256": "58195dc3db2489a60a79786e27ab2392ad2f617f11d4ca619247389ac9124367"
+ "sha256": "ef238f041afe52e913a66694a335b3959064c23ec1100c703365a314dbd7b37e"
}
]
}
diff --git a/site/index.html b/site/index.html
index 93321f7..ac15596 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1,52 +1,52 @@
-
+
-
+
-
+
-
-
-
+
+
+
- Gloss — a screenshot is not a PowerPoint
+ Gloss — make the deck, not a screenshot
- Skip to content
+ Skip to the challenge
+
-
+
Gloss
@@ -54,233 +54,259 @@
@@ -114,20 +114,20 @@
- A score with receipts.
Bring the final deck.
Organizations receive an API key from a benchmark maintainer, register immutable model and revision keys, then precommit a campaign. Each upload carries only its campaign_id plus generation attestation; tier, variant, benchmark, and cohort cannot be overridden.
+
+
diff --git a/launch/README.md b/launch/README.md
index db197d9..b8c6b35 100644
--- a/launch/README.md
+++ b/launch/README.md
@@ -1,15 +1,19 @@
-# Gloss launch assets
+# Gloss launch surface
-The launch page and film are static, repository-owned, and derived from committed evidence.
+The launch page is static, repository-owned, and centered on the public 20-slide
+challenge deck. Every slide image links to its exact instructions, and the primary
+calls to action download the native deck, open the single master prompt, or join
+the GitHub project.
## Evidence
-`site/evidence/preview-v1.json` records candidate-harness counts.
-`gloss-v1/benchmark/comparative-v1/summary.json` records the frozen
-generation-path scores used by the central chart and film. Its public copy at
-`site/evidence/comparative-v1-summary.json` must remain semantically identical.
+`site/evidence/preview-v1.json` records candidate-harness counts for the
+supporting measurement layer. The launch film is presentation-first: it uses
+real Gloss v1 slide renders, the two-object checker example, the ACID lineage,
+and the GitHub call to action. It does not lead with comparative scores.
-Verify the evidence, local links, caveats, and media metadata:
+Verify the deck, all twenty renders and prompt links, supporting evidence, local
+assets, claims, and media metadata:
```bash
node launch/verify-launch.mjs
diff --git a/launch/launch-post.md b/launch/launch-post.md
index 0d8c7fa..b408394 100644
--- a/launch/launch-post.md
+++ b/launch/launch-post.md
@@ -2,35 +2,45 @@
## Primary post
-A screenshot is not a PowerPoint.
+Make the deck. Not a screenshot.
-Gloss is an open benchmark for generated decks that need to look right **and** be built right: native shapes, charts, tables, layouts, text, assets, and OOXML relationships.
+Gloss is one deliberately complicated 20-slide presentation that AI struggles
+to make natively. Editable text. Live charts. Real tables. Masters, layouts,
+fields, connectors, RTL type, rotation, groups, and off-canvas bleed.
-The technical preview now includes a frozen comparative bundle: 12 editable decks, 240 canonically rendered slides, and every artifact and report on GitHub. Native generation paths scored 67.68% local fidelity; visual-first paths scored 62.32%.
+Remember Acid1, Acid2, and Acid3? Gloss is ACID for presentation decks made by
+AI: one hostile public artifact, visible failures, and a community that can fix
+them.
-Those are reproducible repository workflows, not model rankings. Every report is self-reported and carries no model attribution.
+Download the native deck. Move two objects. `gloss check edited.pptx` reports
+exactly two findings. Then give the exact prompt, reference images, and approved
+assets to your presentation-generating AI and see whether it can make the real
+thing.
-That work is public. Break a case, tighten an assertion, or challenge the evidence:
+The deck is the challenge. The checker and deeper measurement tools are the
+support layer. PowerPoint is first; Google Slides and Keynote are part of the
+mission.
https://gloss.tools
https://github.com/aronchick/gloss
## Short version
-A screenshot is not a PowerPoint.
+Make the deck. Not a screenshot.
-Gloss checks whether generated decks look right and are built right — all the way down to native OOXML.
+Gloss is a deliberately complicated 20-slide presentation that AI struggles to
+make natively. It is ACID for presentation decks made by AI.
-12 decks. 240 graded slides. A visible 7.37-point native-structure gap. No invented model leaderboard. The decks, reports, evidence, and unfinished release gates are public.
+Download the deck. Copy the exact prompt. Build the next hard case with us.
Build it with us: https://gloss.tools
## Video alt text
-Square, silent launch film on a clean light background. It introduces Gloss, then animates local artifact-fidelity bars for four deterministic generation paths. A dark title card reveals a 7.37-point native-structure advantage for native construction. A second chart pairs visual SSIM in orange with native weighted pass rate in blue, showing similar pixels but different PowerPoint structure. The end card reads “Gloss — Generative Layout & OOXML Scoring System,” “12 decks / 240 slides,” and “gloss.tools.” The film labels every result as a repository-owned workflow baseline with no model attribution.
+Square, silent launch film with an editorial cream, navy, cobalt, orange, and acid-green palette. It opens with “Make the deck. Not a screenshot,” then shows three real slides from the twenty-slide Gloss challenge inside presentation-editor frames. A native object is selected on the composite stress slide, followed by a terminal where moving two objects produces exactly two findings. The film connects Gloss to Acid1, Acid2, and Acid3, then ends with “Gloss — Generative Layout & Object Structure Standard,” gloss.tools, and the GitHub repository.
## Posting note
Attach `site/media/gloss-launch.mp4`. If a platform strips video metadata or
-recompresses the file, keep the public post copy unchanged; the source evidence
-remains `gloss-v1/benchmark/comparative-v1/summary.json`.
+recompresses the file, keep the public post copy unchanged. The renderer and
+every reference slide remain committed in the repository.
diff --git a/launch/render-video.mjs b/launch/render-video.mjs
index 2dd0dd3..a71b519 100644
--- a/launch/render-video.mjs
+++ b/launch/render-video.mjs
@@ -1,23 +1,16 @@
#!/usr/bin/env node
-import { copyFileSync, existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { copyFileSync, existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
-import { dirname, join, resolve } from "node:path";
+import { dirname, extname, join, resolve } from "node:path";
import { spawnSync } from "node:child_process";
import { fileURLToPath } from "node:url";
const launchDir = dirname(fileURLToPath(import.meta.url));
const root = resolve(launchDir, "..");
-const summaryPath = join(root, "gloss-v1/benchmark/comparative-v1/summary.json");
const outputPath = join(root, "site/media/gloss-launch.mp4");
const posterPath = join(root, "site/media/gloss-launch-poster.png");
-const summary = JSON.parse(readFileSync(summaryPath, "utf8"));
-const nativePaths = summary.paths.filter((path) => path.path_id.startsWith("native-"));
-const visualPaths = summary.paths.filter((path) => path.path_id.startsWith("visual-"));
-const mean = (paths, metric) => paths.reduce((total, path) => total + path.mean_metrics[metric], 0) / paths.length;
-const nativePass = mean(nativePaths, "native_weighted_pass_percent");
-const visualPass = mean(visualPaths, "native_weighted_pass_percent");
-const nativeGap = nativePass - visualPass;
+const exportsDir = join(root, "gloss-v1/benchmark/deck/exports");
const width = 1080;
const height = 1080;
@@ -25,16 +18,16 @@ const fps = 30;
const duration = 21;
const frameCount = fps * duration;
const colors = {
- canvas: "#f4f6fa",
- paper: "#ffffff",
- ink: "#171a22",
- muted: "#68717f",
- rule: "#c9ced8",
- orange: "#d35230",
- orangeSoft: "#f7ded5",
+ canvas: "#f2efe8",
+ paper: "#fffdf8",
+ ink: "#111923",
+ muted: "#66707b",
+ rule: "#c6c2b8",
+ orange: "#e45b35",
+ orangeSoft: "#f9ded4",
blue: "#2859d6",
blueSoft: "#dfe8ff",
- proof: "#b7f36b",
+ acid: "#c8ff63",
};
function commandExists(command) {
@@ -42,9 +35,7 @@ function commandExists(command) {
}
function requireCommand(command) {
- if (!commandExists(command)) {
- throw new Error(`${command} is required to render the launch video`);
- }
+ if (!commandExists(command)) throw new Error(`${command} is required to render the launch video`);
}
function clamp(value, min = 0, max = 1) {
@@ -56,7 +47,7 @@ function ease(value) {
return 1 - (1 - t) ** 3;
}
-function fadeInOut(t, start, end, edge = 0.4) {
+function fadeInOut(t, start, end, edge = 0.35) {
return clamp((t - start) / edge) * clamp((end - t) / edge);
}
@@ -85,9 +76,9 @@ function svgText(text, x, y, options = {}) {
function mono(text, x, y, options = {}) {
return svgText(text, x, y, {
family: "SFMono-Regular, Consolas, Liberation Mono, monospace",
- size: 22,
+ size: 19,
weight: 700,
- spacing: 1.5,
+ spacing: 1.2,
...options,
});
}
@@ -99,133 +90,170 @@ function baseSvg(body, background = colors.canvas) {
`;
}
+function imageData(path) {
+ const mime = extname(path) === ".png" ? "image/png" : "image/jpeg";
+ return `data:${mime};base64,${readFileSync(path).toString("base64")}`;
+}
+
+const slides = {
+ cover: imageData(join(exportsDir, "slide-01.png")),
+ composite: imageData(join(exportsDir, "slide-13.png")),
+ final: imageData(join(exportsDir, "slide-20.png")),
+};
+
+function slideFrame(href, x, y, w, h, options = {}) {
+ const { active = false, label = "NATIVE SLIDE", index = "01" } = options;
+ const handle = 12;
+ const selection = active
+ ? `curl https://your-gloss-host/v1/submissions \
-H "Authorization: Bearer $GLOSS_API_KEY" \
-F 'metadata=@submission.json;type=application/json' \
-F 'file=@model-output.pptx'
- Make the deck.
+
- Open technical preview
-A screenshot is not a PowerPoint.
-Gloss is a deliberately difficult presentation deck for AI to render and build as a real, editable PowerPoint. Its open measurement tools show whether the result looks right and is built right.
+An open ACID test for AI-made presentations
+Make the deck.
Not a screenshot.
+ Gloss is a deliberately complicated 20-slide presentation that AI struggles to recreate as a real, editable artifact. The deck is the challenge. The checker makes every native miss easy to see.
-Generative Layout & OOXML Scoring System · Apache-2.0
+Remember Acid1, Acid2, and Acid3? Gloss is ACID for presentation decks made by AI.
-
-
-
-
-
- submission.pptx
+
+
-
-
-
-
-
-
-
-
+
-
- Evidence bundle
- Public JSON
- Open the receipts ↗
-
-
+
-
+
-
+ 
+
-
+
108 visual checks inspect what reaches the canvas.
-
-
- PowerPoint package
- 61% inside the file
+
+
Gloss artifact X-raycanvas ↔ package
- Candidate checks
- 280
- 108 visual · 172 inside-file
-
-
- Positive controls
- 280/280
- passed
-
-
- Single-fault mutations
- 280/280
- detected
+
+
+
+
+
Looks right is not enough.
+ Text stays text. Charts stay charts. Masters still master. +
+ Move two things.
+
- The smallest useful experiment
+Move two things.
See two things.
+ Download the native deck, move one object on each of two slides, and run the checker. Gloss reports those two native objects—not a score, not a dashboard, not a wall of release metadata.
- Release state
- Preview
- 0 official model results
+
+
-
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+ Edit
+Move one object on one slide and another object elsewhere.
+ Keep everything native. +Check
+One changed object becomes one clear finding.
+uv run gloss check edited.pptx
+ gloss check
+ uv run gloss check edited.pptx2 native objects changed:
Slide 02 · placeholder “Agenda” · changed: position
Slide 12 · placeholder “Document Fields” · changed: position
+
+ Slide 02 · placeholder “Agenda” · changed: position
Slide 12 · placeholder “Document Fields” · changed: position
+
+
-
-
- Frozen comparative v1
-Four public baselines. Zero model claims.
-
- Twenty ways to fake a slide.
+ Twelve editable decks, 240 graded slides, and three seeds per path. These are deterministic repository workflows built to expose the difference between visual similarity and native PowerPoint structure.
- +The artifact is the benchmark
+Twenty ways to fake a slide.
Twenty ways Gloss notices.
Every slide pairs a visible composition with a native behavior underneath. Open the image to see the target. Open the instructions to see exactly what the presentation must understand.
-
-
-
-
- Loading frozen baseline scores…
-
- local artifact score; self-reported
- cohort
-
-
+
- loading
+
+
-
- The 21-second version
-The native gap, in 21 seconds.
-The film is rendered from the frozen comparative summary above. These are repository-owned workflow baselines, not model scores.
-
-
-
+
-
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- One file. Two truths.
-Visual fidelity is necessary. Native structure is non-negotiable.
-A generated deck can match the reference image and still collapse the moment someone edits a chart, applies a layout, changes a theme, or reads the file with another tool. Gloss grades both layers.
-Remember Acid1 and Acid2? Gloss is ACID for AI-made presentation decks.
- Read the open scoring contract -
-
+
+
-
-
Rendered pixels108
- The artifact twistinside the .pptx
- Object structure101
- Layouts & masters25
- Package safety22
- Text semantics20
- Asset hashes4
- Candidate checks by method. Counts come from preview-v1.json.
+
+ One exact prompt.
+
+ Now give it to an AI
+One exact prompt.
Nothing hidden.
+ The complete 20-slide brief is assembled in one copyable file. Give it to any presentation-generating AI with the reference images, approved assets, and fonts. Ask for a native, editable presentation. Do not give it the gold deck.
+DESIGNER_BRIEF.md20 slides · public
+ # Gloss v1 — Canonical Deck Authoring Brief
+
+Build a real, editable presentation.
+
+You MUST create the masters and layouts
+before building slides.
+
+Native objects required:
+ charts · tables · fields · connectors
+ groups · placeholders · pictures
+
+Reference images are supplementary.
+The natural-language requirements win.
-
+
-
-
-
- The repository is the product
-Find a weak assumption. Open a patch.
-No waitlist and no private benchmark committee. Cases, assertions, evidence, and release gates are inspectable on GitHub.
-
-
- CASE
-
-
+ Break the corpus
-Add the slide construct your generator gets wrong: charts, tables, masters, fields, typography, geometry, or package relationships.
- Propose a benchmark case ↗ - - - CODE -Make the grader stricter
-Reproduce a false positive or false negative, then improve the assertion with a focused fixture and test.
- Report a grader gap ↗ - - - PROOF -Challenge the evidence
-Question a provenance record, mutation operator, scoring assumption, or release gate. Every public claim should survive review.
- Challenge a claim ↗ - -
+
+ The principle is bigger than one file type
+Native presentations, everywhere.
+
+
Gloss is about native presentations across PowerPoint, Google Slides, and Keynote. A chart should remain a chart. Text should remain text. Layout behavior should survive the next person editing the deck.
+V1 is honestly PPTX-first. OOXML is a published standard with an inspectable package and object structure, so independent local checking is possible today. The same artifact-first contract should extend to other presentation systems as reliable adapters mature.
+ Help define the next adapter →
-
- Truth before leaderboard
-Working harness. Unfrozen benchmark.
-Gloss is ready for public collaboration, not official model ranking. The release validator fails closed until independent evidence and frozen artifacts exist.
-
-
-
-
-
-
+
+
+
-
+
Candidate corpus validates
passing280 schema-valid checks and 381 traceable prompt clauses.
Mutation operators execute
passing280 controls pass; 280 generated single-fault mutations are detected.
Independent evidence
openAssertion provenance and evidence remain incomplete for 280 candidate checks.
Comparative bundle
passing12 local runs, 240 slides, exact artifact hashes, and a one-command verifier are frozen.
Official release
openIndependent prompt convergence, reviewer approvals, and signed release indexes remain open.
+
Public today, harder tomorrow
+This deck may become training data. Good.
+Gloss v1 is a shared conformance target, not a permanent secret exam. Future generations need automated challenge creation, delayed disclosure, rotating prompts, and held-back decks that measure generalization. We are publishing the starting point so the community can build that system in the open.
-
- Reproduce it locally
-Trust the command, not the claim.
+Gloss lives on GitHub
+Find the next thing AI fakes.
+Propose a hard presentation behavior, reproduce a checker gap, challenge the evidence, or improve the prompt. The useful work happens in issues and pull requests.
-
-
-
+ Open Gloss on GitHub ↗
diff --git a/site/media/gloss-launch-poster.png b/site/media/gloss-launch-poster.png
index 0742ee9..09bab27 100644
Binary files a/site/media/gloss-launch-poster.png and b/site/media/gloss-launch-poster.png differ
diff --git a/site/media/gloss-launch.mp4 b/site/media/gloss-launch.mp4
index acc936a..ee312eb 100644
Binary files a/site/media/gloss-launch.mp4 and b/site/media/gloss-launch.mp4 differ
diff --git a/site/site.css b/site/site.css
index 33f29b4..8b3b26d 100644
--- a/site/site.css
+++ b/site/site.css
@@ -1,416 +1,230 @@
:root {
- --canvas: #f4f6fa;
+ --ink: #111923;
+ --ink-soft: #1b2634;
--paper: #ffffff;
- --ink: #171a22;
- --muted: #626a79;
- --rule: #c9ced8;
- --orange: #d35230;
- --orange-soft: #f7ded5;
- --package: #2859d6;
- --package-soft: #dfe8ff;
- --proof: #b7f36b;
- --display: "Aptos Display", "Arial Narrow", "Segoe UI", sans-serif;
- --body: "Aptos", "Segoe UI", Helvetica, Arial, sans-serif;
+ --canvas: #e8eaee;
+ --canvas-deep: #d9dce2;
+ --muted: #5f6875;
+ --rule: #c7cbd2;
+ --coral: #e8634a;
+ --teal: #2aacb8;
+ --gold: #d4a843;
+ --blue: #456ff2;
+ --shell: min(94rem, calc(100vw - 3rem));
+ --display: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
+ --body: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
--mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
- --shell: min(92rem, calc(100vw - 3rem));
}
* { box-sizing: border-box; }
-html { scroll-behavior: smooth; }
-body {
- margin: 0;
- background: var(--canvas);
- color: var(--ink);
- font: 400 17px/1.55 var(--body);
- -webkit-font-smoothing: antialiased;
-}
-button, input { font: inherit; }
+html { scroll-behavior: smooth; scroll-padding-top: 8rem; }
+body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 17px/1.58 var(--body); }
+body::before { content: ""; position: fixed; z-index: 100; inset: 0 auto 0 0; width: .38rem; background: var(--coral); }
+img { max-width: 100%; }
a { color: inherit; }
-svg { display: block; }
-[hidden] { display: none !important; }
+button, input { font: inherit; }
+button:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
-.skip-link {
- position: fixed;
- z-index: 100;
- top: 1rem;
- left: 1rem;
- padding: .75rem 1rem;
- background: var(--ink);
- color: white;
- transform: translateY(-200%);
-}
+.skip-link { position: fixed; z-index: 1000; top: .75rem; left: 1rem; padding: .7rem 1rem; background: var(--paper); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
-:focus-visible { outline: 3px solid var(--package); outline-offset: 4px; }
-.site-header {
- position: relative;
- z-index: 10;
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 2rem;
- width: var(--shell);
- margin: 0 auto;
- min-height: 5rem;
- border-bottom: 1px solid var(--rule);
-}
-.wordmark {
- display: inline-flex;
- align-items: center;
- gap: .7rem;
- color: var(--ink);
- font: 750 1.35rem/1 var(--display);
- letter-spacing: -.045em;
- text-decoration: none;
-}
-.wordmark-icon {
- position: relative;
- display: inline-block;
- width: 1.8rem;
- height: 1.55rem;
- border: 2px solid var(--ink);
- background: var(--paper);
-}
-.wordmark-icon i { position: absolute; width: 3px; background: var(--ink); bottom: 3px; }
-.wordmark-icon i:nth-child(1) { left: 4px; height: 6px; }
-.wordmark-icon i:nth-child(2) { left: 10px; height: 10px; }
-.wordmark-icon i:nth-child(3) { left: 16px; height: 14px; background: var(--orange); }
-.site-header nav { display: flex; align-items: center; gap: 1.8rem; font: 650 .77rem/1 var(--mono); }
+.site-header { position: relative; z-index: 30; display: flex; width: var(--shell); min-height: 5.2rem; margin: 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ink); }
+.wordmark { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font: 750 1.05rem var(--display); letter-spacing: -.015em; text-decoration: none; }
+.wordmark svg { width: 1.65rem; height: 1.65rem; }
+.wordmark svg path:first-child { fill: var(--coral); stroke: none; }
+.wordmark svg path:last-child { fill: none; stroke: white; stroke-width: 1.7; }
+.site-header nav { display: flex; align-items: center; gap: 1.8rem; font: 650 .72rem var(--mono); }
.site-header nav > a { text-decoration: none; }
-.site-header nav > a:not(.nav-cta) { color: #4e5664; }
-.site-header nav > a:not(.nav-cta):hover { color: var(--package); }
-.nav-cta {
- display: inline-flex;
- align-items: center;
- gap: .45rem;
- padding: .7rem .8rem;
- border: 1px solid var(--ink);
- background: var(--ink);
- color: white;
-}
-.nav-cta svg, .button svg { width: 1.05rem; fill: currentColor; }
-
-.hero {
- display: grid;
- grid-template-columns: minmax(0, 1.08fr) minmax(26rem, .92fr);
- align-items: center;
- gap: clamp(3rem, 7vw, 8rem);
- width: var(--shell);
- margin: 0 auto;
- padding: clamp(5rem, 9vw, 9rem) 0 clamp(4rem, 7vw, 7rem);
-}
-.hero-copy { max-width: 48rem; }
-.eyebrow {
- display: flex;
- align-items: center;
- gap: .55rem;
- margin: 0 0 1.25rem;
- color: #505866;
- font: 700 .72rem/1.3 var(--mono);
- letter-spacing: .055em;
- text-transform: uppercase;
-}
-.status-dot { width: .58rem; height: .58rem; border-radius: 50%; background: var(--proof); box-shadow: 0 0 0 3px #dfffb5; }
-h1, h2, h3 { margin-top: 0; font-family: var(--display); letter-spacing: -.055em; }
-h1 {
- max-width: 10ch;
- margin-bottom: 1.8rem;
- font-size: clamp(4.3rem, 7.4vw, 8.5rem);
- font-weight: 780;
- line-height: .86;
-}
-h1 span { display: inline-block; color: var(--orange); }
-.lede { max-width: 39rem; margin: 0; color: #454d5b; font-size: clamp(1.08rem, 1.5vw, 1.36rem); line-height: 1.5; }
-.lede strong { color: var(--ink); font-weight: 700; }
-.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.4rem; }
-.button {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: .55rem;
- min-height: 3.3rem;
- padding: 0 1.15rem;
- border: 1px solid var(--ink);
- font: 700 .77rem/1 var(--mono);
- text-decoration: none;
- transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
-}
-.button:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
-.button-primary { background: var(--ink); color: white; }
-.button-secondary { background: transparent; }
-.hero-note { margin: 1.25rem 0 0; color: #6c7380; font: .68rem/1.5 var(--mono); }
-
-.xray { border: 1px solid var(--ink); background: var(--paper); box-shadow: 14px 14px 0 var(--ink); }
-.xray-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.2rem; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); background: #e9ecf2; }
-.xray-tabs { display: flex; gap: .35rem; }
-.xray-tab {
- padding: .57rem .72rem;
- border: 1px solid transparent;
- background: transparent;
- color: #565e6b;
- font: 700 .66rem/1 var(--mono);
- cursor: pointer;
-}
-.xray-tab.is-active { border-color: var(--ink); background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
-.xray-file { color: #68717f; font: .65rem var(--mono); }
-.xray-stage { min-height: 34rem; padding: 2rem; background-image: linear-gradient(#e3e6ec 1px, transparent 1px), linear-gradient(90deg, #e3e6ec 1px, transparent 1px); background-size: 18px 18px; }
-.xray-view { animation: reveal 360ms cubic-bezier(.2,.8,.2,1); }
-@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
-.canvas-view { display: grid; grid-template-rows: 1fr auto; min-height: 30rem; }
-.slide-art {
- position: relative;
- width: 100%;
- aspect-ratio: 16 / 9;
- overflow: hidden;
- align-self: center;
- padding: 8% 8%;
- background: var(--ink);
- color: white;
- box-shadow: 0 10px 24px rgb(23 26 34 / .2);
-}
-.slide-art::after { content: ""; position: absolute; width: 9rem; height: 9rem; right: -3.5rem; top: -3.5rem; border: 1.7rem solid var(--orange); transform: rotate(14deg); }
-.slide-kicker { color: #b9c2d4; font: 700 .52rem var(--mono); letter-spacing: .12em; }
-.slide-title { margin-top: 6%; font: 760 clamp(1.35rem, 3vw, 2.3rem)/.92 var(--display); letter-spacing: -.04em; }
-.slide-rule { width: 42%; height: 4px; margin-top: 7%; background: var(--orange); }
-.slide-chart { position: absolute; display: flex; align-items: flex-end; gap: 4%; width: 33%; height: 35%; right: 8%; bottom: 14%; border-bottom: 1px solid #798296; }
-.slide-chart i { width: 17%; height: var(--h); background: #f4f6fa; }
-.slide-chart i:last-child { background: var(--orange); }
-.slide-caption { position: absolute; right: 8%; bottom: 7%; color: #aab3c3; font: .48rem var(--mono); }
-.xray-caption { margin: 1.2rem 0 0; color: #626a77; font: .72rem/1.4 var(--mono); }
-.xray-caption b { color: var(--ink); }
-.package-view { min-height: 30rem; background: var(--paper); border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--package); }
-.package-head { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--ink); font: .7rem var(--mono); }
-.package-head strong { color: var(--package); }
-.package-tree { margin: 0; padding: 1rem 0; list-style: none; font: .72rem/1.4 var(--mono); }
-.package-tree li { display: grid; grid-template-columns: 1rem 1fr auto; gap: .45rem; min-height: 2.35rem; align-items: center; padding: .2rem 1rem; border-bottom: 1px solid #e6e8ed; }
-.package-tree em { color: #777f8c; font-style: normal; }
-.package-tree .tree-depth-1 { padding-left: 2rem; }
-.package-tree .tree-depth-2 { padding-left: 3rem; }
-.package-tree .is-hot { background: var(--package-soft); color: #153a97; }
-.package-tree .is-hot em { color: #4263ad; }
-.tree-toggle, .file-icon { color: var(--package); }
-.package-view .xray-caption { padding: 0 1rem 1rem; }
-.xray-foot { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-top: 1px solid var(--rule); color: #626a77; font: .61rem var(--mono); }
-
-.proof-band { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }
-.proof-cell { display: flex; min-height: 10.5rem; flex-direction: column; justify-content: space-between; padding: 1.25rem; border-right: 1px solid var(--rule); text-decoration: none; }
-.proof-cell:last-child { border-right: 0; }
-.proof-label { color: #646c79; font: 700 .63rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
-.proof-cell strong { font: 760 clamp(2.1rem, 3.7vw, 4rem)/1 var(--display); letter-spacing: -.05em; }
-.proof-cell > span:last-child { color: #636b78; font: .68rem var(--mono); }
-.proof-lead { background: var(--ink); color: white; }
-.proof-lead .proof-label, .proof-lead > span:last-child { color: #bfc6d3; }
-.proof-lead:hover { background: var(--package); }
-.proof-warning { background: var(--orange-soft); }
-.proof-warning strong { color: #a53920; }
-
-.section-shell { width: var(--shell); margin: 0 auto; }
-.section-heading { max-width: 52rem; }
-.section-heading h2, .method h2, .status h2, .reproduce h2 {
- margin-bottom: 1.5rem;
- font-size: clamp(3.3rem, 6.2vw, 7.2rem);
- font-weight: 760;
- line-height: .92;
-}
-.section-heading > p:last-child, .method-copy > p:not(.eyebrow):not(.acid-origin), .status-intro > p:last-child { max-width: 43rem; color: #59616e; font-size: 1.08rem; }
-
-.comparison { padding: clamp(7rem, 11vw, 11rem) 0 0; }
-.comparison-intro {
- display: grid;
- grid-template-columns: 1.15fr .85fr;
- gap: clamp(3rem, 8vw, 9rem);
- align-items: end;
-}
-.comparison-intro h2 {
- max-width: 13ch;
- margin-bottom: 0;
- font-size: clamp(3.3rem, 6.2vw, 7.2rem);
- font-weight: 760;
- line-height: .92;
-}
-.comparison-copy > p { margin: 0; color: #59616e; font-size: 1.08rem; }
-.comparison-copy > div { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; margin-top: 1.5rem; }
-.comparison-copy .text-link { margin-top: 0; }
-.comparison-panel {
- overflow-x: auto;
- margin-top: 4rem;
- border: 1px solid var(--ink);
- background: var(--ink);
- color: white;
- box-shadow: 14px 14px 0 var(--package);
-}
-.comparison-toolbar,
-.comparison-foot {
- display: flex;
- min-width: 52rem;
- align-items: center;
- justify-content: space-between;
- gap: 1rem;
- min-height: 3.2rem;
- padding: 0 1rem;
- color: #aeb6c5;
- font: .64rem var(--mono);
-}
-.comparison-toolbar { border-bottom: 1px solid #464e5d; }
-.comparison-foot { border-top: 1px solid #464e5d; }
-.comparison-foot code { color: var(--proof); font: inherit; }
-.comparison-dots { display: flex; gap: .35rem; }
-.comparison-dots i { width: .62rem; height: .62rem; border: 1px solid #828b99; border-radius: 50%; }
-.comparison-dots i:first-child { border-color: var(--orange); background: var(--orange); }
-.comparison-chart { min-width: 52rem; }
-.comparison-chart > p { margin: 0; padding: 2rem 1rem; color: #b9c1cd; font: .72rem var(--mono); }
-.comparison-row {
- display: grid;
- grid-template-columns: minmax(13rem, 1.15fr) repeat(3, 1fr);
- min-height: 7.5rem;
- border-bottom: 1px solid #3b4350;
-}
-.comparison-row:last-child { border-bottom: 0; }
-.comparison-row > * { display: flex; min-width: 0; padding: 1rem; border-right: 1px solid #3b4350; }
-.comparison-row > *:last-child { border-right: 0; }
-.comparison-row-head {
- min-height: 2.8rem;
- color: #939cab;
- font: .59rem var(--mono);
- letter-spacing: .05em;
- text-transform: uppercase;
-}
-.comparison-row-head > * { align-items: center; }
-.comparison-identity { flex-direction: column; justify-content: center; border-left: .28rem solid var(--package); }
-.comparison-row-visual .comparison-identity { border-left-color: var(--orange); }
-.comparison-identity strong { font: 750 1.2rem/1.05 var(--display); }
-.comparison-identity span { margin-top: .45rem; color: #8f98a6; font: .61rem var(--mono); }
-.comparison-metric { flex-direction: column; justify-content: center; }
-.comparison-metric strong { font: 760 clamp(2rem, 3.1vw, 3.7rem)/1 var(--display); letter-spacing: -.045em; }
-.comparison-metric sup { margin-left: .15rem; color: #8e98a8; font: 600 .72rem var(--mono); vertical-align: super; }
-.comparison-track { display: block; width: 100%; height: .35rem; margin-top: .8rem; background: #3d4552; }
-.comparison-track i { display: block; width: calc(var(--score) * 1%); height: 100%; background: var(--package); }
-.comparison-row-visual .comparison-track i { background: var(--orange); }
-
-.launch-film { padding: clamp(7rem, 12vw, 13rem) 0; }
-.film-frame { width: min(68rem, 100%); margin: 4rem auto 0; padding: 1rem; border: 1px solid var(--ink); background: var(--paper); box-shadow: 14px 14px 0 var(--orange); }
-.film-frame video { display: block; width: 100%; aspect-ratio: 1; background: var(--ink); }
-.film-meta { display: flex; flex-wrap: wrap; gap: 1.3rem; padding: 1rem .25rem 0; color: #656d7a; font: .65rem var(--mono); }
-.film-meta a { margin-left: auto; color: var(--package); }
-
-.method { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(4rem, 9vw, 10rem); align-items: start; padding: 2rem 0 clamp(8rem, 13vw, 14rem); }
-.method h2 { font-size: clamp(3.2rem, 5.4vw, 6rem); }
-.acid-origin { max-width: 36rem; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--ink); font: 650 1.15rem/1.35 var(--display); }
-.acid-origin a { color: var(--package); text-decoration-thickness: 1px; text-underline-offset: .2em; }
-.text-link { display: inline-flex; gap: .5rem; margin-top: 1rem; color: var(--package); font: 700 .75rem var(--mono); text-underline-offset: .25rem; }
-.method-list { padding-top: .8rem; }
-.method-row { display: grid; grid-template-columns: 10rem 1fr 2.6rem; gap: 1rem; align-items: center; min-height: 3.5rem; border-bottom: 1px solid var(--rule); font: .72rem var(--mono); }
-.method-row i { height: .75rem; width: calc(var(--value) / 108 * 100%); background: var(--package); }
-.method-row b { text-align: right; }
-.method-row-visual i { background: var(--orange); }
-.method-divider { display: flex; justify-content: space-between; gap: 1rem; padding: 1.6rem 0 .6rem; color: var(--package); font: 750 .65rem var(--mono); text-transform: uppercase; }
-.method-divider em { color: #747c89; font-style: normal; text-transform: none; }
-.method-list > p { color: #777f8b; font: .63rem/1.5 var(--mono); }
-
-.collaborate { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--ink); color: white; }
-.collaborate-inner { padding: clamp(7rem, 11vw, 12rem) 0; }
-.collaborate .eyebrow { color: var(--proof); }
-.collaborate .section-heading > p:last-child { color: #b8c0ce; }
-.contribution-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; border-top: 1px solid #565e6c; border-left: 1px solid #565e6c; }
-.contribution-card { display: flex; min-height: 25rem; flex-direction: column; padding: 1.5rem; border-right: 1px solid #565e6c; border-bottom: 1px solid #565e6c; text-decoration: none; transition: background 150ms ease, color 150ms ease; }
-.contribution-card:hover { background: var(--proof); color: var(--ink); }
-.card-index { color: #9ba4b2; font: .67rem var(--mono); }
-.contribution-card:hover .card-index { color: #40501f; }
-.contribution-card h3 { max-width: 10ch; margin: 3.5rem 0 1.2rem; font-size: 2.3rem; line-height: .98; }
-.contribution-card p { color: #afb7c4; }
-.contribution-card:hover p { color: #36411e; }
-.card-action { margin-top: auto; color: var(--proof); font: 700 .69rem var(--mono); }
-.contribution-card:hover .card-action { color: var(--ink); }
-.repo-paths { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 2rem; gap: .75rem; }
-.repo-paths a { padding: .85rem; border: 1px solid #4b5360; color: #dce1ea; font: .62rem var(--mono); text-decoration: none; }
-.repo-paths a:hover { border-color: var(--proof); color: var(--proof); }
-.repo-paths span { color: #777f8d; }
-
-.status { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(4rem, 9vw, 10rem); padding: clamp(8rem, 13vw, 14rem) 0; }
-.status h2 { font-size: clamp(3.2rem, 5.4vw, 6.2rem); }
-.gate-list { border-top: 1px solid var(--ink); }
-.gate { display: grid; grid-template-columns: 2rem 1fr auto; gap: 1rem; align-items: start; padding: 1.35rem 0; border-bottom: 1px solid var(--rule); }
-.gate-icon { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border: 1px solid var(--ink); font: 700 .7rem var(--mono); }
-.gate strong { font-size: 1rem; }
-.gate p { margin: .25rem 0 0; color: #69717e; font-size: .88rem; }
-.gate em { padding: .26rem .45rem; border: 1px solid currentColor; font: 700 .6rem var(--mono); font-style: normal; text-transform: uppercase; }
-.gate-pass .gate-icon, .gate-pass em { color: #38601d; background: #ddf7bd; }
-.gate-open .gate-icon, .gate-open em { color: #99412b; background: var(--orange-soft); }
-
-.reproduce { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 9vw, 10rem); align-items: start; padding-bottom: clamp(8rem, 13vw, 14rem); }
-.reproduce h2 { font-size: clamp(3.2rem, 5vw, 5.8rem); }
-.command-block { min-width: 0; border: 1px solid var(--ink); background: var(--ink); color: white; box-shadow: 10px 10px 0 var(--package); }
-.command-head { display: flex; justify-content: space-between; align-items: center; min-height: 2.9rem; padding: 0 .9rem; border-bottom: 1px solid #424957; color: #aeb6c5; font: .65rem var(--mono); }
-.command-head button { border: 1px solid #656d7a; padding: .35rem .55rem; background: transparent; color: white; font: .62rem var(--mono); cursor: pointer; }
-.command-block pre { overflow-x: auto; margin: 0; padding: 1.4rem; color: #e7ebf2; font: .73rem/1.85 var(--mono); }
-.command-block pre code::first-line { color: var(--proof); }
-.command-block > p { min-height: 1.2rem; margin: 0; padding: 0 1.4rem 1rem; color: var(--proof); font: .61rem var(--mono); }
-
-.final-cta { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; padding: clamp(4rem, 7vw, 7rem) max(1.5rem, calc((100vw - min(92rem, calc(100vw - 3rem))) / 2)); border-top: 1px solid var(--ink); background: var(--orange); color: white; }
-.final-cta .eyebrow { color: #ffe3da; }
-.final-cta h2 { max-width: 14ch; margin: 0; font-size: clamp(2.4rem, 5vw, 5rem); line-height: .95; }
-.final-cta .button-primary { background: white; color: var(--ink); }
-.final-mark { position: relative; display: grid; width: clamp(5rem, 9vw, 8rem); aspect-ratio: 1; place-items: center; border: 2px solid white; font: 800 clamp(2.5rem, 5vw, 4.5rem) var(--display); }
-.final-mark i { position: absolute; right: 10%; bottom: 10%; width: 6%; background: white; }
-.final-mark i:nth-of-type(1) { height: 18%; right: 25%; }
-.final-mark i:nth-of-type(2) { height: 28%; right: 15%; }
-.final-mark i:nth-of-type(3) { height: 40%; right: 5%; background: var(--ink); }
-
-.site-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; width: var(--shell); min-height: 6.5rem; margin: 0 auto; color: #656d79; font: .62rem var(--mono); }
-.site-footer p { margin: 0; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
+.site-header nav > a:not(.github-link):hover { text-decoration: underline; text-underline-offset: .35rem; }
+.github-link { display: inline-flex; min-height: 2.55rem; align-items: center; gap: .55rem; padding: 0 .9rem; background: var(--ink); color: white; }
+.github-link svg { width: 1rem; fill: currentColor; }
+
+.hero { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(3rem, 7vw, 8rem); width: var(--shell); min-height: calc(100vh - 5.2rem); margin: 0 auto; padding: clamp(5rem, 9vw, 9rem) 0 clamp(6rem, 10vw, 10rem); align-items: center; }
+.hero-copy { max-width: 42rem; }
+.overline { margin: 0 0 1.2rem; color: var(--coral); font: 750 .67rem var(--mono); letter-spacing: .055em; text-transform: uppercase; }
+h1, h2, h3 { font-family: var(--display); letter-spacing: -.045em; }
+h1 { max-width: 9ch; margin: 0; font-size: clamp(4.3rem, 7.1vw, 8rem); font-weight: 800; line-height: .84; }
+h1 em { color: var(--coral); font-style: normal; }
+.hero-lede { max-width: 39rem; margin: 2rem 0 0; color: #424b57; font-size: clamp(1.08rem, 1.45vw, 1.35rem); line-height: 1.48; }
+.hero-actions, .prompt-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 2.1rem; }
+.button { display: inline-flex; min-height: 3.45rem; align-items: center; justify-content: center; gap: 1rem; padding: 0 1.25rem; border: 1px solid var(--ink); font: 750 .72rem var(--mono); text-decoration: none; transition: transform 120ms ease, box-shadow 120ms ease; }
+.button:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
+.button.primary { background: var(--ink); color: white; }
+.button.secondary { background: transparent; }
+.button.light { border-color: white; background: white; color: var(--ink); }
+.acid-line { max-width: 38rem; margin: 2.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule); color: #48515d; font-size: .86rem; }
+.acid-line a { color: var(--ink); text-underline-offset: .2rem; }
+
+.editor { min-width: 0; border: 1px solid var(--ink); background: var(--paper); box-shadow: 16px 16px 0 var(--ink); }
+.editor-bar { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 2.9rem; align-items: center; gap: 1rem; padding: 0 .8rem; border-bottom: 1px solid #424b57; background: var(--ink); color: #c3c9d1; font: .62rem var(--mono); }
+.editor-bar > span:nth-child(2) { color: white; }
+.editor-bar > span:last-child { justify-self: end; }
+.window-dots { display: flex; gap: .35rem; }
+.window-dots i { display: block; width: .58rem; height: .58rem; border: 1px solid #7c8591; border-radius: 50%; }
+.window-dots i:first-child { border-color: var(--coral); background: var(--coral); }
+.editor-body { display: grid; grid-template-columns: 1fr 11rem; min-height: 31rem; }
+.editor-canvas { display: grid; place-items: center; min-width: 0; padding: clamp(1rem, 2.5vw, 2.5rem); background: #cfd3da; }
+.slide-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ink); box-shadow: 0 .8rem 2rem rgb(31 41 53 / 18%); }
+.slide-wrap > img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.selection { --x: 39.2%; --y: 6.2%; --w: 22%; --h: 12%; position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px solid var(--blue); pointer-events: none; transition: left 260ms ease, top 260ms ease, width 260ms ease, height 260ms ease; }
+.selection i { position: absolute; width: .55rem; height: .55rem; border: 1px solid var(--blue); background: white; }
+.selection i:nth-child(1) { left: -.35rem; top: -.35rem; }
+.selection i:nth-child(2) { right: -.35rem; top: -.35rem; }
+.selection i:nth-child(3) { left: -.35rem; bottom: -.35rem; }
+.selection i:nth-child(4) { right: -.35rem; bottom: -.35rem; }
+.editor[data-inspector="art"] .selection { --x: 41%; --y: 5%; --w: 54%; --h: 70%; }
+.editor[data-inspector="footer"] .selection { --x: 0%; --y: 92%; --w: 100%; --h: 8%; }
+.object-panel { display: flex; min-width: 0; flex-direction: column; padding: 1.1rem; border-left: 1px solid var(--rule); background: #f8f9fb; }
+.panel-label { color: #737c88; font: .55rem var(--mono); text-transform: uppercase; }
+.object-panel > strong { margin-top: 1.2rem; font: 750 1.2rem/1.05 var(--display); }
+.object-panel > p { margin: .55rem 0 0; color: #5d6672; font-size: .7rem; line-height: 1.45; }
+.object-panel dl { margin: 1.4rem 0 0; border-top: 1px solid var(--rule); }
+.object-panel dl div { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); font: .55rem var(--mono); }
+.object-panel dt { color: #737c88; }
+.object-panel dd { margin: 0; color: var(--ink); }
+.object-tabs { display: grid; gap: .35rem; margin-top: auto; }
+.object-tabs button { min-height: 2.1rem; border: 1px solid var(--rule); background: white; color: var(--ink); font: .58rem var(--mono); text-align: left; cursor: pointer; }
+.object-tabs button.is-active { border-color: var(--blue); color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
+
+.statement { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: baseline; padding: 3.8rem max(1.5rem, calc((100vw - min(94rem, calc(100vw - 3rem))) / 2)); background: var(--coral); color: white; }
+.statement p { margin: 0; font: .72rem var(--mono); text-transform: uppercase; }
+.statement strong { font: 750 clamp(2.1rem, 4vw, 4.6rem)/.98 var(--display); letter-spacing: -.035em; }
+
+.quickstart { width: var(--shell); margin: 0 auto; padding: clamp(7rem, 12vw, 13rem) 0; }
+.section-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 10vw, 11rem); align-items: end; }
+.section-intro .overline { grid-column: 1 / -1; margin-bottom: -1.5rem; }
+h2 { margin: 0; font-size: clamp(3.5rem, 6.3vw, 7rem); font-weight: 780; line-height: .9; }
+.section-intro > p:last-child, .deck-head > p, .prompt-copy > p:not(.overline), .format-copy p, .future p, .contribute p { margin: 0; color: #4e5763; font-size: 1.05rem; }
+.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4rem; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
+.steps article { display: flex; min-height: 17rem; flex-direction: column; padding: 1.3rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }
+.steps article > span { font: .62rem var(--mono); }
+.steps h3 { margin: 2.7rem 0 .6rem; font-size: 2.1rem; line-height: 1; }
+.steps p { margin: 0; color: #5d6672; font-size: .9rem; }
+.steps a, .steps small, .steps code { margin-top: auto; color: var(--ink); font: .63rem var(--mono); }
+.steps code { overflow-x: auto; display: block; padding: .7rem; background: var(--canvas); white-space: nowrap; }
+.terminal { margin: 2rem 0 0 auto; width: min(57rem, 100%); border: 1px solid var(--ink); background: var(--ink); color: #e9edf2; box-shadow: 10px 10px 0 var(--teal); }
+.terminal-head { display: flex; min-height: 2.8rem; align-items: center; justify-content: space-between; padding: 0 .9rem; border-bottom: 1px solid #45505d; color: #adb5c0; font: .61rem var(--mono); }
+.terminal-head button { border: 1px solid #65707d; padding: .3rem .55rem; background: transparent; color: white; font: .58rem var(--mono); cursor: pointer; }
+.terminal pre { overflow-x: auto; margin: 0; padding: 1.2rem 1.4rem; border-bottom: 1px solid #45505d; color: white; font: .76rem/1.6 var(--mono); }
+.terminal-output { padding: 1.2rem 1.4rem; color: #cfd5dd; font: .68rem/1.85 var(--mono); }
+.terminal-output span { color: #aee97e; }
+.terminal > p { min-height: 1rem; margin: 0; padding: 0 1.4rem .8rem; color: #aee97e; font: .58rem var(--mono); }
+
+.deck { padding: clamp(7rem, 11vw, 12rem) 0 0; border-top: 1px solid var(--ink); background: #f8f9fb; }
+.deck-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 9vw, 10rem); width: var(--shell); margin: 0 auto; align-items: end; }
+.deck-head h2 { max-width: 13ch; font-size: clamp(3.4rem, 5.7vw, 6.4rem); }
+.slide-index { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 11rem 1fr; width: var(--shell); min-height: 4rem; margin: 5rem auto 0; align-items: center; border: 1px solid var(--ink); background: var(--ink); color: white; }
+.slide-index > span { padding: 0 1rem; color: #aeb6c1; font: .63rem var(--mono); }
+.slide-index > span b { color: white; }
+.slide-index > div { display: flex; overflow-x: auto; height: 100%; border-left: 1px solid #4c5663; }
+.slide-index a { display: grid; flex: 0 0 2.55rem; place-items: center; color: #8d97a4; font: .57rem var(--mono); text-decoration: none; }
+.slide-index a:hover, .slide-index a.is-active { background: var(--coral); color: white; }
+.slide-list { margin-top: 3rem; }
+.slide-case { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .5fr); gap: clamp(2rem, 6vw, 7rem); width: var(--shell); margin: 0 auto; padding: clamp(4rem, 8vw, 8rem) 0; border-top: 1px solid var(--rule); align-items: start; }
+.slide-case:nth-child(even) { grid-template-columns: minmax(18rem, .5fr) minmax(0, 1.5fr); }
+.slide-case:nth-child(even) .slide-image { grid-column: 2; }
+.slide-case:nth-child(even) .slide-copy { grid-column: 1; grid-row: 1; }
+.slide-image { display: block; border: 1px solid #707885; background: var(--ink); box-shadow: 12px 12px 0 var(--canvas-deep); transition: transform 160ms ease, box-shadow 160ms ease; }
+.slide-image:hover { transform: translate(-3px, -3px); box-shadow: 16px 16px 0 var(--teal); }
+.slide-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
+.slide-copy { position: sticky; top: 7rem; padding-top: .25rem; }
+.slide-number { color: var(--coral); font: .62rem var(--mono); text-transform: uppercase; }
+.slide-copy h3 { margin: 1.4rem 0 1.2rem; font-size: clamp(2.2rem, 3.4vw, 4rem); line-height: .92; }
+.slide-copy > p { margin: 0; color: #505965; }
+.slide-copy h4 { margin: 2rem 0 .5rem; font: 750 .61rem var(--mono); letter-spacing: .045em; text-transform: uppercase; }
+.slide-copy a { display: inline-block; margin-top: 2rem; color: var(--ink); font: 700 .65rem var(--mono); text-underline-offset: .3rem; }
+
+.prompt { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 9vw, 10rem); align-items: center; padding: clamp(8rem, 13vw, 14rem) max(1.5rem, calc((100vw - min(94rem, calc(100vw - 3rem))) / 2)); background: var(--teal); }
+.prompt-copy h2 { max-width: 10ch; }
+.prompt-copy > p:not(.overline) { max-width: 39rem; margin-top: 2rem; color: #15383c; }
+.prompt .overline { color: #15383c; }
+.prompt-actions .text-link { font: 700 .65rem var(--mono); text-underline-offset: .3rem; }
+.prompt-file { min-width: 0; border: 1px solid var(--ink); background: var(--ink); color: #e8edf3; box-shadow: 14px 14px 0 #13737c; }
+.file-head { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; padding: 0 1rem; border-bottom: 1px solid #46515e; color: #aab3be; font: .61rem var(--mono); }
+.prompt-file pre { overflow-x: auto; margin: 0; padding: clamp(1.4rem, 3vw, 2.5rem); font: clamp(.65rem, 1vw, .78rem)/1.9 var(--mono); }
+
+.formats { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 10vw, 11rem); width: var(--shell); margin: 0 auto; padding: clamp(8rem, 13vw, 14rem) 0; }
+.formats h2 { max-width: 10ch; font-size: clamp(3.7rem, 6vw, 6.8rem); }
+.format-copy { padding-top: 2rem; border-top: 1px solid var(--ink); }
+.format-copy p + p { margin-top: 1.5rem; }
+.format-copy a { display: inline-block; margin-top: 1.8rem; font: 700 .68rem var(--mono); text-underline-offset: .3rem; }
+
+.future { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(3rem, 10vw, 11rem); align-items: center; padding: clamp(7rem, 11vw, 11rem) max(1.5rem, calc((100vw - min(94rem, calc(100vw - 3rem))) / 2)); background: var(--gold); }
+.future-mark { font: 800 clamp(5rem, 13vw, 14rem)/.8 var(--display); letter-spacing: -.08em; white-space: nowrap; }
+.future-mark span { color: white; }
+.future h2 { max-width: 12ch; font-size: clamp(3.4rem, 5.5vw, 6rem); }
+.future p:last-child { max-width: 49rem; margin-top: 1.8rem; color: #40381d; }
+.future .overline { color: #5d4c0f; }
+
+.contribute { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 9vw, 10rem); align-items: start; padding: clamp(8rem, 13vw, 14rem) max(1.5rem, calc((100vw - min(94rem, calc(100vw - 3rem))) / 2)); background: var(--ink); color: white; }
+.contribute h2 { max-width: 10ch; font-size: clamp(3.7rem, 6vw, 6.8rem); }
+.contribute p:last-child { max-width: 35rem; margin-top: 1.7rem; color: #aeb7c3; }
+.contribution-links { border-top: 1px solid #505a67; }
+.contribution-links a { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: center; min-height: 8rem; border-bottom: 1px solid #505a67; color: white; text-decoration: none; transition: background 140ms ease, color 140ms ease; }
+.contribution-links a:hover { padding: 0 1rem; background: var(--coral); }
+.contribution-links span, .contribution-links em { color: #858f9c; font: .6rem var(--mono); font-style: normal; }
+.contribution-links a:hover span, .contribution-links a:hover em { color: white; }
+.contribution-links strong { font: 750 clamp(1.5rem, 2.3vw, 2.5rem) var(--display); }
+
+.final-cta { display: flex; min-height: 26rem; align-items: center; justify-content: space-between; gap: 3rem; padding: 4rem max(1.5rem, calc((100vw - min(94rem, calc(100vw - 3rem))) / 2)); background: var(--coral); color: white; }
+.final-cta .overline { color: #ffe4de; }
+.final-cta h2 { font-size: clamp(3.5rem, 7vw, 7.5rem); }
+
+.site-footer { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; width: var(--shell); min-height: 7rem; margin: 0 auto; color: #626b77; font: .6rem var(--mono); }
+.site-footer p { margin: 0; text-align: center; text-transform: uppercase; }
.site-footer > div { display: flex; gap: 1rem; }
-.site-footer > div a { text-underline-offset: .2rem; }
+.site-footer a { text-underline-offset: .25rem; }
-@media (max-width: 1000px) {
- .site-header nav > a:not(.nav-cta) { display: none; }
+@media (max-width: 1100px) {
.hero { grid-template-columns: 1fr; }
.hero-copy { max-width: 52rem; }
- .xray { width: min(42rem, calc(100% - 1rem)); margin: 0 auto; }
- .proof-band { grid-template-columns: repeat(2, 1fr); }
- .proof-cell { border-bottom: 1px solid var(--rule); }
- .proof-lead { grid-column: 1 / -1; }
- .comparison-intro, .method, .status, .reproduce { grid-template-columns: 1fr; }
- .method-copy, .status-intro, .reproduce > div:first-child { max-width: 48rem; }
- .contribution-grid { grid-template-columns: 1fr; }
- .contribution-card { min-height: 18rem; }
- .repo-paths { grid-template-columns: repeat(2, 1fr); }
+ .editor { width: min(58rem, calc(100% - 1rem)); margin: 0 auto; }
+ .section-intro, .deck-head, .prompt, .formats, .future, .contribute { grid-template-columns: 1fr; }
+ .section-intro .overline { margin-bottom: 0; }
+ .section-intro > p:last-child, .deck-head > p { max-width: 48rem; }
+ .prompt-file { width: min(58rem, 100%); }
+ .future-mark { font-size: clamp(5rem, 22vw, 13rem); }
+ .contribute > div:first-child { max-width: 52rem; }
}
-@media (max-width: 640px) {
+@media (max-width: 800px) {
:root { --shell: calc(100vw - 2rem); }
- body { font-size: 16px; }
- .site-header { min-height: 4.4rem; }
- .nav-cta span { display: none; }
- .hero { padding-top: 4rem; }
- h1 { font-size: clamp(3.8rem, 18vw, 5.5rem); }
- .hero-actions .button { width: 100%; }
- .xray { width: calc(100% - .6rem); box-shadow: 8px 8px 0 var(--ink); }
- .xray-stage { min-height: 28rem; padding: .8rem; }
- .canvas-view, .package-view { min-height: 26rem; }
- .xray-file { display: none; }
- .package-tree { font-size: .62rem; }
- .package-tree em { display: none; }
- .package-tree li { grid-template-columns: 1rem 1fr; }
- .proof-band { grid-template-columns: 1fr; }
- .proof-lead { grid-column: auto; }
- .proof-cell { min-height: 8.5rem; }
- .section-heading h2, .method h2, .status h2, .reproduce h2 { font-size: clamp(3rem, 15vw, 4.5rem); }
- .comparison-panel { box-shadow: 8px 8px 0 var(--package); }
- .film-frame { padding: .5rem; box-shadow: 8px 8px 0 var(--orange); }
- .film-meta a { width: 100%; margin: 0; }
- .method-row { grid-template-columns: 8rem 1fr 2rem; gap: .55rem; font-size: .62rem; }
- .repo-paths { grid-template-columns: 1fr; }
- .gate { grid-template-columns: 1.6rem 1fr; }
- .gate > em { grid-column: 2; justify-self: start; }
- .command-block { box-shadow: 7px 7px 0 var(--package); }
- .final-cta { grid-template-columns: 1fr; }
- .final-mark { width: 5rem; }
- .final-cta .button { width: 100%; }
- .site-footer { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
+ body::before { width: .25rem; }
+ .site-header { min-height: 4.5rem; }
+ .site-header nav > a:not(.github-link) { display: none; }
+ .hero { min-height: auto; padding-top: 4rem; }
+ h1 { font-size: clamp(4rem, 19vw, 6.5rem); }
+ .editor { width: calc(100% - .5rem); box-shadow: 8px 8px 0 var(--ink); }
+ .editor-body { grid-template-columns: 1fr; min-height: 0; }
+ .editor-canvas { padding: 1rem; }
+ .object-panel { min-height: 12rem; border-top: 1px solid var(--rule); border-left: 0; }
+ .object-tabs { grid-template-columns: repeat(3, 1fr); margin-top: 1rem; }
+ .statement { grid-template-columns: 1fr; gap: 1rem; }
+ .steps { grid-template-columns: 1fr; }
+ .steps article { min-height: 13rem; }
+ .slide-index { grid-template-columns: 7rem 1fr; }
+ .slide-case, .slide-case:nth-child(even) { grid-template-columns: 1fr; gap: 2rem; }
+ .slide-case:nth-child(even) .slide-image, .slide-case:nth-child(even) .slide-copy { grid-column: 1; grid-row: auto; }
+ .slide-copy { position: static; max-width: 42rem; }
+ .prompt, .future, .contribute { padding-right: 1rem; padding-left: 1rem; }
+ .final-cta { align-items: flex-start; flex-direction: column; justify-content: center; }
+ .site-footer { grid-template-columns: 1fr; gap: .8rem; padding: 2rem 0; }
.site-footer p { text-align: left; }
}
+@media (max-width: 520px) {
+ .hero-actions .button, .prompt-actions .button, .final-cta .button { width: 100%; }
+ .editor-bar { grid-template-columns: 1fr auto; }
+ .editor-bar .window-dots { display: none; }
+ .terminal { box-shadow: 6px 6px 0 var(--teal); }
+ .slide-index > span { padding: 0 .6rem; }
+ .slide-case { padding: 3.5rem 0; }
+ .slide-image { box-shadow: 7px 7px 0 var(--canvas-deep); }
+ .contribution-links a { grid-template-columns: 2rem 1fr; }
+ .contribution-links em { grid-column: 2; margin-top: -1.5rem; }
+}
+
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
- *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+ *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
diff --git a/site/site.js b/site/site.js
index 1a331d6..10124ba 100644
--- a/site/site.js
+++ b/site/site.js
@@ -1,165 +1,90 @@
-const xray = document.querySelector(".xray");
-const xrayButtons = [...document.querySelectorAll("[data-xray-target]")];
-const xrayPanels = [...document.querySelectorAll("[data-xray-panel]")];
-let xrayTimer;
+const inspector = document.querySelector("[data-inspector]");
+const inspectorButtons = [...document.querySelectorAll("[data-inspect]")];
+const objectName = document.querySelector("[data-object-name]");
+const objectDetail = document.querySelector("[data-object-detail]");
+const objectType = document.querySelector("[data-object-type]");
+
+const inspectorContent = {
+ title: {
+ name: "Title placeholder",
+ detail: "Editable text · inherited from the Title Slide layout",
+ type: "Placeholder",
+ },
+ art: {
+ name: "Image + three shapes",
+ detail: "Independent objects · crop · z-order · transparency · shadow",
+ type: "Picture / shapes",
+ },
+ footer: {
+ name: "Master footer",
+ detail: "Slide number field · rule · repeated GLOSS label",
+ type: "Master objects",
+ },
+};
-function showXrayLayer(layer, { userInitiated = false } = {}) {
- if (!xray) return;
- xray.dataset.xray = layer;
- for (const button of xrayButtons) {
- const active = button.dataset.xrayTarget === layer;
+function inspectObject(name) {
+ const content = inspectorContent[name];
+ if (!inspector || !content) return;
+ inspector.dataset.inspector = name;
+ if (objectName) objectName.textContent = content.name;
+ if (objectDetail) objectDetail.textContent = content.detail;
+ if (objectType) objectType.textContent = content.type;
+ for (const button of inspectorButtons) {
+ const active = button.dataset.inspect === name;
button.classList.toggle("is-active", active);
button.setAttribute("aria-pressed", String(active));
}
- for (const panel of xrayPanels) {
- panel.hidden = panel.dataset.xrayPanel !== layer;
- }
- if (userInitiated) window.clearTimeout(xrayTimer);
-}
-
-for (const button of xrayButtons) {
- button.addEventListener("click", () => showXrayLayer(button.dataset.xrayTarget, { userInitiated: true }));
-}
-
-const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-if (!reducedMotion) {
- xrayTimer = window.setTimeout(() => showXrayLayer("package"), 1500);
}
-const evidenceBindings = {
- "candidate-checks": (data) => data.candidate_checks.total,
- "visual-checks": (data) => data.candidate_checks.visual_render,
- "inside-file-checks": (data) => data.candidate_checks.inside_file,
- "inside-file-percent": (data) => data.candidate_checks.inside_file_percent,
- "positive-passed": (data) => data.operator_evidence.positive_controls_passed,
- "positive-total": (data) => data.operator_evidence.positive_controls,
- "mutants-detected": (data) => data.operator_evidence.single_fault_mutations_detected,
- "mutants-total": (data) => data.operator_evidence.single_fault_mutations,
-};
-
-fetch("/evidence/preview-v1.json")
- .then((response) => {
- if (!response.ok) throw new Error(`Evidence request failed: ${response.status}`);
- return response.json();
- })
- .then((data) => {
- document.documentElement.dataset.evidenceId = data.evidence_id;
- for (const [key, readValue] of Object.entries(evidenceBindings)) {
- for (const node of document.querySelectorAll(`[data-evidence="${key}"]`)) {
- node.textContent = String(readValue(data));
- }
- }
- })
- .catch(() => {
- document.documentElement.dataset.evidenceId = "fallback-copy";
- });
-
-const comparativeChart = document.querySelector("[data-comparative-chart]");
-const comparativeMetrics = [
- ["local_fidelity_percent", "Local fidelity"],
- ["mean_visual_ssim_percent", "Visual SSIM"],
- ["native_weighted_pass_percent", "Native pass"],
-];
-
-function comparativeCell(value, label) {
- const cell = document.createElement("div");
- cell.className = "comparison-metric";
- cell.setAttribute("aria-label", `${label}: ${value.toFixed(2)} percent`);
-
- const number = document.createElement("strong");
- number.textContent = value.toFixed(2);
- const percent = document.createElement("sup");
- percent.textContent = "%";
- number.append(percent);
-
- const track = document.createElement("span");
- track.className = "comparison-track";
- const bar = document.createElement("i");
- bar.style.setProperty("--score", String(value));
- track.append(bar);
- cell.append(number, track);
- return cell;
-}
-
-function renderComparative(data) {
- if (!comparativeChart) return;
- comparativeChart.replaceChildren();
-
- const header = document.createElement("div");
- header.className = "comparison-row comparison-row-head";
- const pathHeading = document.createElement("span");
- pathHeading.textContent = "Generation path";
- header.append(pathHeading);
- for (const [, label] of comparativeMetrics) {
- const metricHeading = document.createElement("span");
- metricHeading.textContent = label;
- header.append(metricHeading);
- }
- comparativeChart.append(header);
-
- for (const path of data.paths) {
- const row = document.createElement("div");
- row.className = `comparison-row comparison-row-${path.path_id.split("-")[0]}`;
-
- const identity = document.createElement("div");
- identity.className = "comparison-identity";
- const label = document.createElement("strong");
- label.textContent = path.label;
- const runCount = document.createElement("span");
- runCount.textContent = `${path.runs.length} seeded runs`;
- identity.append(label, runCount);
- row.append(identity);
-
- for (const [key, metricLabel] of comparativeMetrics) {
- row.append(comparativeCell(path.mean_metrics[key], metricLabel));
- }
- comparativeChart.append(row);
- }
-
- for (const node of document.querySelectorAll("[data-comparative-label]")) {
- node.textContent = data.disclosure.verification_label;
- }
- const cohort = data.cohort.scoring_cohort_id.replace("sha256:", "");
- for (const node of document.querySelectorAll("[data-cohort-short]")) {
- node.textContent = cohort.slice(0, 12);
- node.setAttribute("title", data.cohort.scoring_cohort_id);
- }
- for (const node of document.querySelectorAll("[data-comparative-runs]")) {
- node.textContent = String(data.totals.runs);
- }
- for (const node of document.querySelectorAll("[data-comparative-slides]")) {
- node.textContent = String(data.totals.slides);
- }
+for (const button of inspectorButtons) {
+ button.addEventListener("click", () => inspectObject(button.dataset.inspect));
}
-fetch("/evidence/comparative-v1-summary.json")
- .then((response) => {
- if (!response.ok) throw new Error(`Comparative summary request failed: ${response.status}`);
- return response.json();
- })
- .then(renderComparative)
- .catch(() => {
- if (comparativeChart) {
- comparativeChart.textContent = "Comparative summary unavailable. Open the public JSON evidence.";
- }
- });
-
-const copyButton = document.querySelector("[data-copy-command]");
+const copyButton = document.querySelector("[data-copy-check]");
const copyStatus = document.querySelector("[data-copy-status]");
-const command = document.querySelector(".command-block code");
+const checkCommand = "uv run gloss check edited.pptx";
-if (copyButton && command) {
+if (copyButton) {
copyButton.addEventListener("click", async () => {
try {
- await navigator.clipboard.writeText(command.textContent.trim());
+ await navigator.clipboard.writeText(checkCommand);
copyButton.textContent = "Copied";
- if (copyStatus) copyStatus.textContent = "Commands copied to clipboard.";
+ if (copyStatus) copyStatus.textContent = "Command copied to clipboard.";
window.setTimeout(() => {
- copyButton.textContent = "Copy";
+ copyButton.textContent = "Copy command";
if (copyStatus) copyStatus.textContent = "";
}, 1800);
} catch {
- if (copyStatus) copyStatus.textContent = "Select the commands and copy them manually.";
+ if (copyStatus) copyStatus.textContent = "Select the command and copy it manually.";
}
});
}
+
+const slideCases = [...document.querySelectorAll("[data-slide]")];
+const slideLinks = [...document.querySelectorAll("[data-slide-link]")];
+const currentSlide = document.querySelector("[data-current-slide]");
+
+function setCurrentSlide(number) {
+ if (currentSlide) currentSlide.textContent = number;
+ for (const link of slideLinks) {
+ const active = link.dataset.slideLink === number;
+ link.classList.toggle("is-active", active);
+ if (active) link.setAttribute("aria-current", "true");
+ else link.removeAttribute("aria-current");
+ }
+}
+
+if ("IntersectionObserver" in window) {
+ const ratios = new Map();
+ const observer = new IntersectionObserver(
+ (entries) => {
+ for (const entry of entries) {
+ ratios.set(entry.target, entry.isIntersecting ? entry.intersectionRatio : 0);
+ }
+ const visible = [...ratios.entries()].sort((a, b) => b[1] - a[1])[0];
+ if (visible && visible[1] > 0) setCurrentSlide(visible[0].dataset.slide);
+ },
+ { rootMargin: "-18% 0px -52% 0px", threshold: [0, 0.1, 0.25, 0.5, 0.75] },
+ );
+ for (const slide of slideCases) observer.observe(slide);
+}
Terminal
- git clone https://github.com/aronchick/gloss.git
-cd gloss
-./gloss-v1/benchmark/comparative-v1/reproduce.sh
+ 01Propose a test caseNew issue ↗
+ 02Report a checker gapNew issue ↗
+ 03Send a pull requestOpen PRs ↗
-
- Join on GitHub
+ Gloss is built in public
-Make generated decks worth editing.
-A screenshot is not a presentation