Hugging Face's logo

Buckets:
evalstate
/
birch-html

Files
xet
evalstate/birch-html / results /publish /models /sonnet46 /artifacts /numeric-data.html
evalstate's picture
evalstate
download
raw
52.4 kB
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Rendering Checker Stability — 5-Week Eval</title>
 <style data-birch-system>/*
 Birch HTML Design System
 Opinionated single-option stylesheet for reliable LLM-generated artifacts.
 Model:
 1. Design tokens as CSS variables.
 2. Layout primitives as classes.
 3. Semantic components as classes with data-* variants.
*/
/* ==================== 1. TOKENS ==================== */
:root {
 color-scheme: light;
 /* Palette */
 --color-ivory: #FAF9F5;
 --color-slate: #141413;
 --color-clay: #D97757;
 --color-clay-dark: #B85C3E;
 --color-oat: #E3DACC;
 --color-olive: #788C5D;
 --color-rust: #B04A3F;
 --color-sky: #6A8CAF;
 --color-white: #FFFFFF;
 --color-gray-50: #F7F5EE;
 --color-gray-100: #F0EEE6;
 --color-gray-150: #E8E4DA;
 --color-gray-200: #DED9CD;
 --color-gray-300: #D1CFC5;
 --color-gray-500: #87867F;
 --color-gray-700: #3D3D3A;
 --color-gray-800: #242421;
 /* Semantic colors */
 --bg: var(--color-ivory);
 --surface: var(--color-white);
 --surface-tint: var(--color-gray-100);
 --surface-warm: var(--color-oat);
 --text: var(--color-slate);
 --text-muted: var(--color-gray-500);
 --text-soft: var(--color-gray-700);
 --muted: var(--text-muted);
 --border-color: var(--color-gray-300);
 --accent: var(--color-clay);
 --accent-strong: var(--color-clay-dark);
 --success: var(--color-olive);
 --warning: #C78E3F;
 --danger: var(--color-rust);
 --info: var(--color-sky);
 /* Typography */
 --font-serif: ui-serif, Georgia, "Times New Roman", serif;
 --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 --text-xs: 11px;
 --text-sm: 12px;
 --text-md: 14px;
 --text-base: 15px;
 --text-lg: 17px;
 --text-xl: 21px;
 --text-2xl: 26px;
 --text-3xl: 36px;
 --text-4xl: 44px;
 --leading-tight: 1.15;
 --leading-title: 1.25;
 --leading-body: 1.55;
 --leading-loose: 1.7;
 /* Spacing */
 --space-1: 4px;
 --space-2: 8px;
 --space-3: 12px;
 --space-4: 16px;
 --space-5: 24px;
 --space-6: 32px;
 --space-7: 48px;
 --space-8: 64px;
 --space-9: 96px;
 /* Shape */
 --radius-xs: 4px;
 --radius-sm: 8px;
 --radius-md: 12px;
 --radius-lg: 16px;
 --radius-xl: 20px;
 --radius-pill: 999px;
 --border: 1.5px solid var(--border-color);
 --border-thin: 1px solid var(--border-color);
 --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.06);
 --shadow-md: 0 4px 14px rgba(20, 20, 19, 0.08);
 --shadow-lg: 0 12px 28px rgba(20, 20, 19, 0.12);
 /* Motion */
 --ease: cubic-bezier(0.2, 0, 0, 1);
 --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 --dur-fast: 120ms;
 --dur: 180ms;
 --hover-y: -2px;
 /* Page sizing */
 --page-max: 1100px;
 --page-pad: 28px;
 --page-pad-block: 48px;
 /* Legacy aliases used by source examples */
 --ivory: var(--color-ivory);
 --slate: var(--color-slate);
 --clay: var(--color-clay);
 --clay-d: var(--color-clay-dark);
 --oat: var(--color-oat);
 --olive: var(--color-olive);
 --rust: var(--color-rust);
 --sky: var(--color-sky);
 --white: var(--color-white);
 --gray-50: var(--color-gray-50);
 --gray-100: var(--color-gray-100);
 --gray-150: var(--color-gray-150);
 --gray-200: var(--color-gray-200);
 --gray-300: var(--color-gray-300);
 --gray-500: var(--color-gray-500);
 --gray-700: var(--color-gray-700);
 --gray-800: var(--color-gray-800);
 --serif: var(--font-serif);
 --sans: var(--font-sans);
 --mono: var(--font-mono);
}
/* ==================== BASE ==================== */
*,
*::before,
*::after {
 box-sizing: border-box;
}
html {
 background: var(--bg);
 color: var(--text);
 font-family: var(--font-sans);
 -webkit-text-size-adjust: 100%;
}
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: var(--font-sans);
 font-size: var(--text-base);
 line-height: var(--leading-body);
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}
img,
svg {
 max-width: 100%;
}
a {
 color: inherit;
 text-decoration-color: rgba(217, 119, 87, 0.45);
 text-underline-offset: 3px;
}
a:hover {
 color: var(--accent);
}
h1,
h2,
h3,
p {
 margin-block: 0;
}
h1,
h2,
h3 {
 font-family: var(--font-serif);
 font-weight: 500;
 letter-spacing: -0.01em;
 line-height: var(--leading-title);
}
h1 {
 font-size: clamp(32px, 5vw, var(--text-4xl));
}
h2 {
 font-size: var(--text-2xl);
}
h3 {
 font-size: var(--text-xl);
}
code,
kbd,
pre {
 font-family: var(--font-mono);
}
code {
 font-size: 0.92em;
 white-space: normal;
 word-break: normal;
}
h1 code,
h2 code,
h3 code {
 overflow-wrap: anywhere;
 word-break: break-word;
}
button,
input,
textarea,
select {
 font: inherit;
}
button {
 cursor: pointer;
}
::selection {
 background: rgba(217, 119, 87, 0.24);
}
/* ==================== 2. LAYOUT PRIMITIVES ==================== */
.page {
 width: min(100% - (var(--page-pad) * 2), var(--page-max));
 margin-inline: auto;
 padding-block: var(--page-pad-block) var(--space-9);
}
.page[data-size="narrow"] {
 --page-max: 820px;
}
.page[data-size="wide"] {
 --page-max: 1280px;
}
.page[data-size="full"] {
 --page-max: 1440px;
}
.section {
 margin-block: var(--section-gap, var(--space-5));
}
.section[data-gap="lg"] {
 --section-gap: var(--space-6);
}
.section[data-gap="xl"] {
 --section-gap: var(--space-7);
}
.section:first-child {
 margin-block-start: 0;
}
.stack > .section {
 margin-block: 0;
}
.rule {
 border: 0;
 border-top: var(--border-thin);
 margin: var(--space-3) 0 var(--space-5);
}
.stack {
 display: flex;
 flex-direction: column;
 gap: var(--stack-gap, var(--space-4));
}
.stack[data-gap="xs"] { --stack-gap: var(--space-2); }
.stack[data-gap="sm"] { --stack-gap: var(--space-3); }
.stack[data-gap="md"] { --stack-gap: var(--space-4); }
.stack[data-gap="lg"] { --stack-gap: var(--space-6); }
.stack[data-gap="xl"] { --stack-gap: var(--space-8); }
.stack > :is(.button, .btn, .chip, .badge) {
 align-self: flex-start;
}
.cluster {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--cluster-gap, var(--space-3));
}
.cluster[data-align="start"] { align-items: flex-start; }
.cluster[data-align="end"] { align-items: flex-end; }
.cluster[data-justify="between"] { justify-content: space-between; }
.cluster[data-justify="end"] { justify-content: flex-end; }
.grid {
 display: grid;
 gap: var(--grid-gap, var(--space-5));
}
.grid[data-cols="2"] {
 grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid[data-cols="3"] {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid[data-cols="4"] {
 grid-template-columns: repeat(4, minmax(0, 1fr));
}
.auto-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 240px)), 1fr));
 gap: var(--grid-gap, var(--space-5));
}
.auto-grid > * {
 min-width: 0;
}
.split {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(280px, var(--split-side, 360px));
 gap: var(--split-gap, var(--space-6));
 align-items: start;
}
.split > * {
 min-width: 0;
}
.section-head {
 min-width: 0;
}
.section-rail {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(280px, var(--rail-width, 360px));
 column-gap: var(--rail-gap, var(--space-6));
 row-gap: var(--space-5);
 align-items: start;
}
.section-rail > .section-head {
 grid-column: 1 / -1;
}
.section-rail > .reference-panel,
.section-rail > aside {
 align-self: start;
}
.sidebar-layout {
 display: grid;
 grid-template-columns: var(--sidebar-width, 240px) minmax(0, 1fr);
 gap: var(--sidebar-gap, var(--space-7));
 align-items: start;
}
.sidebar-layout > :first-child,
.sticky {
 position: sticky;
 top: var(--sticky-top, var(--space-5));
}
.bleed {
 margin-inline: calc(var(--page-pad) * -1);
}
.scroll-x {
 overflow-x: auto;
 overscroll-behavior-inline: contain;
}
.center {
 display: grid;
 place-items: center;
}
.spacer {
 flex: 1;
}
@media (max-width: 860px) {
 :root {
 --page-pad: 20px;
 --page-pad-block: 40px;
 }
 .grid[data-cols],
 .split,
 .section-rail,
 .sidebar-layout {
 grid-template-columns: 1fr;
 }
 .sidebar-layout > :first-child,
 .sticky {
 position: static;
 }
}
/* ==================== TYPOGRAPHY UTILITIES ==================== */
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: var(--space-2);
 color: var(--accent);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.eyebrow::before {
 content: "";
 width: 24px;
 height: 1.5px;
 background: currentColor;
}
.lede {
 max-width: 720px;
 color: var(--text-soft);
 font-size: var(--text-lg);
 line-height: 1.6;
}
.muted {
 color: var(--text-muted);
}
.caption {
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
}
.stat-value {
 display: block;
 color: var(--text);
 font-family: var(--font-serif);
 font-size: clamp(30px, 3.2vw, 42px);
 font-variant-numeric: tabular-nums;
 font-weight: 550;
 letter-spacing: -0.025em;
 line-height: 1;
}
.stat-card {
 gap: var(--space-2);
}
.stat-card .caption {
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.stat-card .muted {
 max-width: 34ch;
 font-size: var(--text-sm);
}
.mono {
 font-family: var(--font-mono);
}
/* ==================== 3. SEMANTIC COMPONENTS ==================== */
.panel,
.card {
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-md);
}
.panel {
 padding: var(--panel-pad, var(--space-5));
}
.card {
 padding: var(--card-pad, var(--space-5));
 transition:
 transform var(--dur-fast) var(--ease),
 border-color var(--dur-fast) var(--ease),
 box-shadow var(--dur-fast) var(--ease),
 background-color var(--dur-fast) var(--ease);
}
.card[data-hover="lift"]:hover,
.card[data-clickable]:hover {
 transform: translateY(var(--hover-y));
 border-color: rgba(217, 119, 87, 0.55);
 box-shadow: var(--shadow-md);
}
.card[data-clickable] {
 cursor: pointer;
}
.card[data-variant="flat"] {
 background: transparent;
 border-color: transparent;
 box-shadow: none;
}
.card[data-variant="outlined"] {
 background: var(--surface);
 border: var(--border);
}
.card[data-variant="elevated"] {
 border-color: transparent;
 box-shadow: var(--shadow-md);
}
.card[data-variant="filled"],
.card[data-tone="oat"] {
 background: var(--surface-warm);
}
.card[data-tone],
.panel[data-tone],
.callout[data-tone] {
 background: var(--surface);
}
.card[data-tone="danger"],
.panel[data-tone="danger"],
.callout[data-tone="danger"] {
 border-color: rgba(176, 74, 63, 0.36);
}
.card[data-tone="warning"],
.panel[data-tone="warning"],
.callout[data-tone="warning"] {
 border-color: rgba(199, 142, 63, 0.38);
}
.card[data-tone="success"],
.panel[data-tone="success"],
.callout[data-tone="success"] {
 border-color: rgba(120, 140, 93, 0.38);
}
.card[data-tone="info"],
.panel[data-tone="info"],
.callout[data-tone="info"] {
 border-color: rgba(106, 140, 175, 0.36);
}
.card[data-accent] {
 position: relative;
 overflow: hidden;
}
.card[data-accent]::before {
 content: "";
 position: absolute;
 inset: 0 auto 0 0;
 width: 5px;
 background: var(--accent);
}
.card-head {
 display: flex;
 align-items: center;
 gap: var(--space-3);
 min-width: 0;
 max-width: 100%;
}
.card-head > :first-child {
 flex: 0 0 auto;
}
.card-titles {
 flex: 1 1 0;
 min-width: 0;
 max-width: 100%;
}
.card-title {
 max-width: 100%;
 margin: 0;
 font-family: var(--font-serif);
 font-size: var(--text-xl);
 font-weight: 550;
 line-height: var(--leading-title);
 overflow-wrap: anywhere;
}
.card-sub {
 margin: 2px 0 0;
 color: var(--text-muted);
 font-size: var(--text-sm);
 overflow-wrap: anywhere;
}
.toolbar {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: var(--space-4);
 padding: var(--space-4) var(--space-5);
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-md);
}
.toolbar[data-sticky] {
 position: sticky;
 top: 0;
 z-index: 10;
}
.chip,
.badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
 border-radius: var(--radius-pill);
 white-space: nowrap;
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 650;
 line-height: 1;
}
.chip {
 min-height: 24px;
 padding: 0 10px;
 color: var(--text-soft);
 background: var(--surface-tint);
 border: 1px solid transparent;
}
.badge {
 min-height: 22px;
 padding: 0 9px;
 color: var(--text-muted);
 background: var(--surface);
 border: var(--border-thin);
 text-transform: uppercase;
 letter-spacing: 0.06em;
}
.chip[data-tone="clay"],
.badge[data-tone="clay"] {
 color: var(--accent);
 background: rgba(217, 119, 87, 0.14);
}
.chip[data-tone="olive"],
.badge[data-tone="olive"],
.chip[data-tone="success"],
.badge[data-tone="success"] {
 color: var(--success);
 background: rgba(120, 140, 93, 0.15);
}
.chip[data-tone="warning"],
.badge[data-tone="warning"] {
 color: var(--warning);
 background: rgba(199, 142, 63, 0.16);
}
.chip[data-tone="rust"],
.badge[data-tone="rust"],
.chip[data-tone="danger"],
.badge[data-tone="danger"] {
 color: var(--danger);
 background: rgba(176, 74, 63, 0.13);
}
.chip[data-tone="sky"],
.badge[data-tone="sky"],
.chip[data-tone="info"],
.badge[data-tone="info"] {
 color: var(--info);
 background: rgba(106, 140, 175, 0.14);
}
.finding {
 border-left: 6px solid var(--border-color);
}
.finding[data-severity="blocker"],
.finding[data-severity="critical"],
.finding[data-severity="danger"],
.finding[data-tone="danger"] {
 border-left-color: var(--danger);
}
.finding[data-severity="high"],
.finding[data-severity="warning"],
.finding[data-tone="warning"] {
 border-left-color: var(--warning);
}
.finding[data-severity="medium"],
.finding[data-severity="info"],
.finding[data-tone="info"] {
 border-left-color: var(--info);
}
.finding[data-severity="low"],
.finding[data-severity="success"],
.finding[data-tone="success"] {
 border-left-color: var(--success);
}
.button,
.btn {
 appearance: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 36px;
 padding: 0 14px;
 border: 1.5px solid transparent;
 border-radius: var(--radius-sm);
 font-family: var(--font-sans);
 font-size: var(--text-md);
 font-weight: 650;
 line-height: 1;
 text-decoration: none;
 transition:
 transform var(--dur-fast) var(--ease),
 background-color var(--dur-fast) var(--ease),
 border-color var(--dur-fast) var(--ease),
 box-shadow var(--dur-fast) var(--ease);
}
.button:hover,
.btn:hover {
 transform: translateY(-1px);
}
.button[data-variant="primary"],
.btn-primary {
 color: var(--color-white);
 background: var(--color-slate);
}
.button[data-variant="primary"]:hover,
.btn-primary:hover {
 background: var(--color-gray-700);
}
.button[data-variant="secondary"],
.btn-secondary {
 color: var(--text);
 background: var(--surface-tint);
 border-color: var(--border-color);
}
.button[data-variant="ghost"],
.btn-ghost {
 color: var(--text-soft);
 background: transparent;
}
.button[data-variant="ghost"]:hover,
.btn-ghost:hover {
 color: var(--text);
 background: var(--surface-tint);
}
.button[data-variant="danger"],
.btn-danger {
 color: var(--color-white);
 background: var(--danger);
}
.input {
 width: 100%;
 min-height: 38px;
 padding: 0 12px;
 color: var(--text);
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-sm);
 outline: none;
}
.input:focus {
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.16);
}
.avatar {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: var(--avatar-size, 38px);
 height: var(--avatar-size, 38px);
 border-radius: 50%;
 color: var(--text-soft);
 background: var(--surface-warm);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 font-weight: 700;
 letter-spacing: 0.02em;
 flex: 0 0 auto;
}
.code-block {
 margin: 0;
 padding: var(--space-4) var(--space-5);
 overflow-x: auto;
 color: #E8E6DC;
 background: var(--color-slate);
 border-radius: var(--radius-md);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 line-height: var(--leading-loose);
}
.code-block[data-kind="command"],
.code-block[data-wrap="true"],
.command-block {
 max-width: 100%;
 min-width: 0;
 box-sizing: border-box;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 word-break: break-word;
 overflow-x: hidden;
}
.code-block[data-wrap="true"] code,
.code-block[data-kind="command"] code {
 display: block;
 max-width: 100%;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 word-break: break-word;
}
.copyable {
 position: relative;
}
.copyable > .code-block {
 padding-inline-end: 88px;
}
.copy-button {
 appearance: none;
 position: absolute;
 inset-block-start: var(--space-2);
 inset-inline-end: var(--space-2);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 26px;
 padding: 0 9px;
 border: 1px solid rgba(250, 249, 245, 0.18);
 border-radius: var(--radius-sm);
 color: var(--color-gray-100);
 background: rgba(255, 255, 255, 0.08);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 transition:
 background-color var(--dur-fast) var(--ease),
 border-color var(--dur-fast) var(--ease),
 transform var(--dur-fast) var(--ease);
}
.copy-button:hover {
 transform: translateY(-1px);
 border-color: rgba(250, 249, 245, 0.35);
 background: rgba(255, 255, 255, 0.14);
}
.copy-button[data-copied="true"] {
 color: var(--color-white);
 background: rgba(120, 140, 93, 0.55);
 border-color: rgba(120, 140, 93, 0.75);
}
.reference-panel {
 --panel-pad: var(--space-5);
}
.callout {
 padding: var(--space-5);
 color: var(--text-soft);
 background: var(--surface-tint);
 border: var(--border);
 border-inline-start: 4px solid var(--accent);
 border-radius: var(--radius-md);
}
.callout[data-tone="success"] {
 border-inline-start-color: var(--success);
 background: rgba(120, 140, 93, 0.10);
}
.callout[data-tone="warning"] {
 border-inline-start-color: var(--warning);
 background: rgba(199, 142, 63, 0.11);
}
.callout[data-tone="danger"] {
 border-inline-start-color: var(--danger);
 background: rgba(176, 74, 63, 0.10);
}
.callout[data-tone="info"] {
 border-inline-start-color: var(--info);
 background: rgba(106, 140, 175, 0.11);
}
.callout-label {
 display: block;
 margin-bottom: var(--space-2);
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 700;
 letter-spacing: 0.09em;
 text-transform: uppercase;
}
.callout > :last-child {
 margin-bottom: 0;
}
.checklist {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: var(--space-3);
}
.checklist li {
 display: block !important;
 position: relative !important;
 min-width: 0;
 padding-inline-start: calc(18px + var(--space-3));
 overflow-wrap: anywhere;
}
.checklist li::before {
 content: "✓";
 position: absolute !important;
 inset-block-start: 2px;
 inset-inline-start: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 color: var(--success);
 background: rgba(120, 140, 93, 0.12);
 font-family: var(--font-mono);
 font-size: 12px;
 font-weight: 700;
 line-height: 1;
}
.checklist code {
 white-space: normal;
 overflow-wrap: anywhere;
 word-break: break-word;
}
.plain-list {
 margin: 0;
 padding-inline-start: 1.15em;
 color: var(--text-soft);
}
.plain-list li {
 overflow-wrap: anywhere;
}
.plain-list li + li {
 margin-top: var(--space-2);
}
.plain-list li::marker {
 color: var(--text-muted);
}
.insight-list,
.takeaway-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: var(--space-3);
}
.insight-list li,
.takeaway-list li {
 position: relative;
 display: block;
 padding-inline-start: calc(10px + var(--space-3));
 color: var(--text-soft);
}
.insight-list li::before,
.takeaway-list li::before {
 content: "";
 position: absolute;
 inset-block-start: 0.65em;
 inset-inline-start: 0;
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--accent);
}
.insight-list li > *,
.takeaway-list li > * {
 min-width: 0;
}
.insight-list[data-tone="success"] li::before,
.takeaway-list[data-tone="success"] li::before {
 background: var(--success);
}
.insight-list[data-tone="info"] li::before,
.takeaway-list[data-tone="info"] li::before {
 background: var(--info);
}
.metric-list {
 --metric-label: 132px;
 --metric-value: 64px;
 display: grid;
 gap: var(--space-3);
}
.metric-row {
 display: grid;
 grid-template-columns: var(--metric-label) minmax(120px, 1fr) var(--metric-value);
 gap: var(--space-3);
 align-items: center;
}
.metric-row > :first-child {
 min-width: 0;
}
.metric-row > :last-child {
 justify-self: end;
 font-family: var(--font-mono);
 font-size: var(--text-sm);
}
.meter {
 height: 9px;
 overflow: hidden;
 border-radius: var(--radius-pill);
 background: var(--surface-tint);
}
.meter span {
 display: block;
 width: var(--value);
 height: 100%;
 background: var(--tone, var(--accent));
}
.flow-list {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: var(--space-3);
}
.flow-step {
 position: relative;
 display: grid;
 grid-template-columns: 42px minmax(0, 1fr);
 gap: var(--space-3);
 align-items: start;
 padding: var(--space-4);
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-md);
}
.flow-step > .flow-num {
 grid-column: 1;
}
.flow-step > :not(.flow-num) {
 grid-column: 2;
 min-width: 0;
}
.flow-step::after {
 content: "";
 position: absolute;
 inset-block-start: calc(100% + 1px);
 inset-inline-start: 36px;
 width: 1.5px;
 height: var(--space-3);
 background: var(--border-color);
}
.flow-step:last-child::after {
 display: none;
}
.flow-num {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 border-radius: var(--radius-pill);
 color: var(--text);
 background: var(--surface-warm);
 box-shadow: inset 0 0 0 1px rgba(20, 20, 19, 0.10);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 font-weight: 700;
}
.flow-title {
 margin: 0 0 var(--space-1);
 font-family: var(--font-serif);
 font-size: var(--text-xl);
 font-weight: 550;
 line-height: var(--leading-title);
}
.flow-detail {
 margin: 0;
 color: var(--text-soft);
}
.flow-branch {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--space-3);
}
.flow-branch .flow-step::after {
 display: none;
}
.flow-step[data-tone="success"] {
 border-color: rgba(120, 140, 93, 0.38);
 background: rgba(120, 140, 93, 0.08);
}
.flow-step[data-tone="warning"] {
 border-color: rgba(199, 142, 63, 0.42);
 background: rgba(199, 142, 63, 0.09);
}
@media (max-width: 620px) {
 .metric-row {
 grid-template-columns: 1fr max-content;
 }
 .metric-row .meter {
 grid-column: 1 / -1;
 order: 3;
 }
 .flow-branch {
 grid-template-columns: 1fr;
 }
}
/* ---------- Charts and numeric data ---------- */
.chart-panel {
 max-width: 100%;
 min-width: 0;
 overflow: hidden;
}
.chart-panel > * {
 min-width: 0;
}
.chart-panel svg,
svg.chart-svg {
 display: block;
 width: 100%;
 height: auto;
}
.chart-caption {
 color: var(--text-muted);
 font-size: var(--text-sm);
}
.numeric-table-wrap {
 overflow-x: auto;
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-md);
}
.numeric-table {
 width: 100%;
 min-width: 720px;
 border-collapse: collapse;
}
.numeric-table th,
.numeric-table td {
 padding: var(--space-3) var(--space-4);
 border-bottom: 1px solid var(--color-gray-200);
 vertical-align: middle;
}
.numeric-table th {
 color: var(--text-muted);
 background: var(--surface-tint);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 700;
 letter-spacing: 0.08em;
 text-align: left;
 text-transform: uppercase;
}
.numeric-table tr:last-child td {
 border-bottom: 0;
}
.numeric-table .metric,
.numeric-table .num {
 text-align: right;
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}
.numeric-table .entity,
.numeric-table .label-cell {
 font-weight: 650;
}
.numeric-table .note {
 color: var(--text-soft);
}
.numeric-table code {
 white-space: normal;
 overflow-wrap: anywhere;
 word-break: break-word;
}
.numeric-table .subtle {
 display: block;
 margin-top: 2px;
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 font-weight: 400;
}
@media (max-width: 620px) {
 .numeric-table {
 min-width: 0;
 }
 .numeric-table thead {
 display: none;
 }
 .numeric-table tbody,
 .numeric-table tr,
 .numeric-table td {
 display: block;
 }
 .numeric-table tr {
 padding: var(--space-3) var(--space-4);
 border-bottom: 1px solid var(--color-gray-200);
 }
 .numeric-table tr:last-child {
 border-bottom: 0;
 }
 .numeric-table td {
 padding: var(--space-1) 0;
 border-bottom: 0;
 }
 .numeric-table td[data-label] {
 display: flex;
 justify-content: space-between;
 gap: var(--space-4);
 }
 .numeric-table td[data-label]::before {
 content: attr(data-label);
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-xs);
 text-transform: uppercase;
 }
}
/* ---------- Diff ---------- */
.diff {
 overflow-x: auto;
 color: #E8E6DC;
 background: var(--color-slate);
 border-radius: var(--radius-md);
 font-family: var(--font-mono);
 font-size: 12.5px;
 line-height: var(--leading-loose);
}
.diff-row {
 display: grid;
 grid-template-columns: 48px 18px minmax(max-content, 1fr);
 align-items: baseline;
 min-width: max-content;
 padding-inline-end: var(--space-4);
 white-space: pre;
}
.diff-row .ln {
 padding-inline-end: 14px;
 color: var(--color-gray-500);
 text-align: right;
 user-select: none;
}
.diff-row .mark {
 color: var(--color-gray-500);
 text-align: center;
}
.diff-row .code {
 color: #E8E6DC;
}
.diff-row.ctx .code,
.diff-row[data-kind="ctx"] .code {
 color: #B8B6AC;
}
.diff-row.add,
.diff-row[data-kind="add"] {
 background: rgba(120, 140, 93, 0.24);
 box-shadow: inset 3px 0 0 rgba(120, 140, 93, 0.78);
}
.diff-row.add .mark,
.diff-row[data-kind="add"] .mark {
 color: #B9D394;
 font-weight: 800;
}
.diff-row.del,
.diff-row[data-kind="del"] {
 background: rgba(176, 74, 63, 0.24);
 box-shadow: inset 3px 0 0 rgba(176, 74, 63, 0.82);
}
.diff-row.del .mark,
.diff-row[data-kind="del"] .mark {
 color: #F19A8D;
 font-weight: 800;
}
.diff-row.hunk,
.diff-row[data-kind="hunk"] {
 background: rgba(255, 255, 255, 0.045);
}
.diff-row.hunk .code,
.diff-row[data-kind="hunk"] .code {
 color: var(--color-gray-500);
}
.diff[data-wrap="true"] {
 overflow-x: hidden;
}
.diff[data-wrap="true"] .diff-row {
 grid-template-columns: 42px 18px minmax(0, 1fr);
 min-width: 0;
 white-space: normal;
}
.diff[data-wrap="true"] .code {
 white-space: pre-wrap;
 overflow-wrap: anywhere;
}
/* ---------- Timeline ---------- */
.timeline {
 position: relative;
 display: grid;
 gap: 0;
 padding-inline-start: var(--space-6);
}
.timeline:is(ol, ul) {
 margin: 0;
 list-style: none;
}
.timeline::before {
 content: "";
 position: absolute;
 inset-block: 4px 4px;
 inset-inline-start: 9px;
 width: 1.5px;
 background: var(--border-color);
}
.timeline-item,
.tl-entry {
 position: relative;
 display: grid;
 grid-template-columns: minmax(84px, max-content) minmax(0, 1fr);
 gap: var(--space-4);
 padding-block: 0 var(--space-5);
}
.timeline-item:last-child,
.tl-entry:last-child {
 padding-block-end: 0;
}
.timeline-item::before,
.tl-entry::before {
 content: "";
 position: absolute;
 inset-block-start: 4px;
 inset-inline-start: calc(4.25px - var(--space-6));
 width: 11px;
 height: 11px;
 border: 2px solid var(--surface);
 border-radius: 50%;
 background: var(--accent);
 box-shadow: 0 0 0 1.5px var(--accent);
}
.timeline-item:not(:has(> .timeline-time, > .tl-time)),
.tl-entry:not(:has(> .timeline-time, > .tl-time)) {
 display: block;
}
.timeline-time,
.tl-time {
 color: var(--text-muted);
 font-family: var(--font-mono);
 font-size: var(--text-sm);
 white-space: nowrap;
}
.timeline-body,
.tl-body {
 min-width: 0;
 color: var(--text-soft);
}
.timeline-body strong,
.tl-body strong {
 color: var(--text);
}
@media (max-width: 620px) {
 .timeline-item,
 .tl-entry {
 grid-template-columns: 1fr;
 gap: var(--space-1);
 }
}
/* ---------- Flowchart ---------- */
.flowchart {
 display: block;
 width: 100%;
 height: auto;
}
svg.flow,
svg.flowchart {
 display: block;
 width: 100%;
 height: auto;
}
.flow text,
.flowchart text {
 fill: var(--text);
 font-family: var(--font-sans);
 font-size: 12px;
}
.flow .sub,
.flowchart .sub {
 fill: var(--text-muted);
 font-size: 10px;
}
.flow-edge,
.edge {
 fill: none;
 stroke: var(--text-muted);
 stroke-width: 1.5;
}
.flow-edge[data-kind="yes"],
.edge.yes {
 stroke: var(--success);
}
.flow-edge[data-kind="no"],
.edge.no {
 stroke: var(--danger);
 stroke-dasharray: 4 4;
}
/* SVG flow nodes */
.flow-node,
.flow .node {
 cursor: pointer;
 transition: transform var(--dur-fast) var(--ease);
}
.flow-node:hover,
.flow .node:hover {
 transform: translateY(-1px);
}
.flow-node rect,
.flow .node rect {
 fill: var(--surface);
 stroke: var(--border-color);
 stroke-width: 1.5;
 rx: 8;
}
.flow-node path,
.flow .node.gate path {
 fill: var(--surface);
 stroke: var(--border-color);
 stroke-width: 1.5;
}
.flow-node[data-shape="term"] rect,
.flow .node.term rect {
 fill: var(--surface-tint);
 rx: 22;
}
.flow-node[data-kind="ok"] rect,
.flow .node.ok rect {
 fill: rgba(120, 140, 93, 0.12);
 stroke: var(--success);
}
.flow-node[data-kind="bad"] rect,
.flow .node.bad rect {
 fill: rgba(176, 74, 63, 0.10);
 stroke: var(--danger);
}
.flow-node.active rect,
.flow-node.active path,
.flow .node.active rect,
.flow .node.active path {
 stroke: var(--accent);
 stroke-width: 2;
}
/* HTML flow nodes, for non-SVG diagrams */
div.flow-node {
 padding: var(--space-3) var(--space-4);
 background: var(--surface);
 border: var(--border);
 border-radius: var(--radius-sm);
 transition:
 transform var(--dur-fast) var(--ease),
 border-color var(--dur-fast) var(--ease),
 box-shadow var(--dur-fast) var(--ease);
}
div.flow-node:hover {
 transform: translateY(var(--hover-y));
 border-color: rgba(217, 119, 87, 0.55);
 box-shadow: var(--shadow-sm);
}
div.flow-node[data-shape="term"] {
 border-radius: var(--radius-pill);
 background: var(--surface-tint);
}
div.flow-node[data-kind="ok"] {
 border-color: var(--success);
 background: rgba(120, 140, 93, 0.12);
}
div.flow-node[data-kind="bad"] {
 border-color: var(--danger);
 background: rgba(176, 74, 63, 0.10);
}
@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;
 }
}
/* Responsive safety net for generated artifacts. */
p,
li {
 overflow-wrap: anywhere;
}
@media (max-width: 860px) {
 .split,
 .section-rail,
 .sidebar-layout {
 grid-template-columns: minmax(0, 1fr) !important;
 }
 .split > *,
 .section-rail > *,
 .sidebar-layout > *,
 .chart-panel {
 width: 100%;
 max-width: 100%;
 min-width: 0;
 }
}</style>
 <style>
 .chart-svg svg { width: 100%; height: auto; display: block; }
 .kpi-label { font-size: 0.78rem; }
 </style>
</head>
<body>
 <main class="page stack" data-gap="lg">
<header class="stack" data-gap="sm">
 <div class="eyebrow">Rendering Checker · Eval Report · 2026-05-18</div>
 <h1>Checker passes 97.7 % of renders; overflows down 95 %</h1>
 <p class="lede">Across three artifacts tracked weekly from 2026-04-20 through 2026-05-18,
 the rendering checker's average static pass rate climbed from 85.7 % to 97.7 % and
 total overflow events collapsed from 20 to 1. All three artifacts now exceed 96 %;
 <strong>timeline</strong> hit 99 % this week with zero overflows.
 Source: <code>evals/numeric-data/source.csv</code>.</p>
 </header>
<!-- KPI strip -->
 <section class="section stack" data-gap="md">
 <div class="section-head">
 <div>
 <span class="eyebrow">Latest week · 2026-05-18</span>
 <h2>Headline numbers</h2>
 </div>
 </div>
<div class="auto-grid" style="--grid-min: 160px">
 <div class="stat-card">
 <div class="stat-value">97.7 %</div>
 <div class="kpi-label caption">Avg pass rate (week 5)</div>
 </div>
 <div class="stat-card">
 <div class="stat-value">+12.0 pp</div>
 <div class="kpi-label caption">Gain vs. baseline (Apr 20)</div>
 </div>
 <div class="stat-card">
 <div class="stat-value">1</div>
 <div class="kpi-label caption">Overflow events (↓ from 20)</div>
 </div>
 <div class="stat-card">
 <div class="stat-value">4.37</div>
 <div class="kpi-label caption">Avg vision score / 5</div>
 </div>
 </div>
 </section>
<!-- Chart + ranking rail -->
 <section class="section stack" data-gap="md">
 <div class="section-head">
 <div>
 <span class="eyebrow">Trend · Apr 20 – May 18</span>
 <h2>Weekly pass rate by artifact</h2>
 </div>
 </div>
<div class="section-rail">
 <div class="stack" data-gap="md">
 <div class="panel chart-panel stack">
 <div class="chart-svg">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="446.15952pt" height="201.35952pt" viewBox="0 0 446.15952 201.35952" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <defs>
 <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>
 </defs>
 <g id="figure_1">
 <g id="patch_1">
 <path d="M 0 201.35952 L 446.15952 201.35952 L 446.15952 0 L 0 0 L 0 201.35952 z" style="fill: none"/>
 </g>
 <g id="axes_1">
 <g id="patch_2">
 <path d="M 48.320469 183.253114 L 443.27952 183.253114 L 443.27952 2.88 L 48.320469 2.88 L 48.320469 183.253114 z" style="fill: none"/>
 </g>
 <g id="matplotlib.axis_1">
 <g id="xtick_1"><g id="line2d_1"/>
 <g id="text_1"><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="66.273153" y="196.711786">Apr 20</text></g>
 </g>
 <g id="xtick_2"><g id="line2d_2"/>
 <g id="text_2"><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="156.036574" y="196.711786">Apr 27</text></g>
 </g>
 <g id="xtick_3"><g id="line2d_3"/>
 <g id="text_3"><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="245.799994" y="196.711786">May 4</text></g>
 </g>
 <g id="xtick_4"><g id="line2d_4"/>
 <g id="text_4"><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="335.563415" y="196.711786">May 11</text></g>
 </g>
 <g id="xtick_5"><g id="line2d_5"/>
 <g id="text_5"><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="425.326836" y="196.711786">May 18</text></g>
 </g>
 </g>
 <g id="matplotlib.axis_2">
 <g id="ytick_1">
 <g id="line2d_6"><path d="M 48.320469 167.568495 L 443.27952 167.568495" clip-path="url(#pclip1)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/></g>
 <g id="line2d_7"/>
 <g id="text_6"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="41.320469" y="170.987792">80%</text></g>
 </g>
 <g id="ytick_2">
 <g id="line2d_8"><path d="M 48.320469 128.356949 L 443.27952 128.356949" clip-path="url(#pclip1)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/></g>
 <g id="line2d_9"/>
 <g id="text_7"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="41.320469" y="131.776246">85%</text></g>
 </g>
 <g id="ytick_3">
 <g id="line2d_10"><path d="M 48.320469 89.145402 L 443.27952 89.145402" clip-path="url(#pclip1)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/></g>
 <g id="line2d_11"/>
 <g id="text_8"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="41.320469" y="92.564699">90%</text></g>
 </g>
 <g id="ytick_4">
 <g id="line2d_12"><path d="M 48.320469 49.933856 L 443.27952 49.933856" clip-path="url(#pclip1)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/></g>
 <g id="line2d_13"/>
 <g id="text_9"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="41.320469" y="53.353153">95%</text></g>
 </g>
 <g id="ytick_5">
 <g id="line2d_14"><path d="M 48.320469 10.722309 L 443.27952 10.722309" clip-path="url(#pclip1)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/></g>
 <g id="line2d_15"/>
 <g id="text_10"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="41.320469" y="14.141606">100%</text></g>
 </g>
 <g id="text_11">
 <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="9.718594" y="93.066557" transform="rotate(-90 9.718594 93.066557)">Pass rate (%)</text>
 </g>
 </g>
 <!-- design-system line -->
 <g id="line2d_16">
 <path d="M 66.273153 120.514639 L 156.036574 81.303093 L 245.799994 57.776165 L 335.563415 34.249237 L 425.326836 26.406928" clip-path="url(#pclip1)" style="fill: none; stroke: #d97757; stroke-width: 1.8; stroke-linecap: square"/>
 <defs><path id="mds" d="M 0 2 C 0.530406 2 1.03916 1.789267 1.414214 1.414214 C 1.789267 1.03916 2 0.530406 2 0 C 2 -0.530406 1.789267 -1.03916 1.414214 -1.414214 C 1.03916 -1.789267 0.530406 -2 0 -2 C -0.530406 -2 -1.03916 -1.789267 -1.414214 -1.414214 C -1.789267 -1.03916 -2 -0.530406 -2 0 C -2 0.530406 -1.789267 1.03916 -1.414214 1.414214 C -1.03916 1.789267 -0.530406 2 0 2 z" style="stroke: #d97757"/></defs>
 <g clip-path="url(#pclip1)">
 <use xlink:href="#mds" x="66.273153" y="120.514639" style="fill: #d97757; stroke: #d97757"/>
 <use xlink:href="#mds" x="156.036574" y="81.303093" style="fill: #d97757; stroke: #d97757"/>
 <use xlink:href="#mds" x="245.799994" y="57.776165" style="fill: #d97757; stroke: #d97757"/>
 <use xlink:href="#mds" x="335.563415" y="34.249237" style="fill: #d97757; stroke: #d97757"/>
 <use xlink:href="#mds" x="425.326836" y="26.406928" style="fill: #d97757; stroke: #d97757"/>
 </g>
 </g>
 <!-- component-variants line -->
 <g id="line2d_17">
 <path d="M 66.273153 151.883877 L 156.036574 112.67233 L 245.799994 81.303093 L 335.563415 57.776165 L 425.326836 42.091546" clip-path="url(#pclip1)" style="fill: none; stroke: #788c5d; stroke-width: 1.8; stroke-linecap: square"/>
 <defs><path id="mcv" d="M 0 2 C 0.530406 2 1.03916 1.789267 1.414214 1.414214 C 1.789267 1.03916 2 0.530406 2 0 C 2 -0.530406 1.789267 -1.03916 1.414214 -1.414214 C 1.03916 -1.789267 0.530406 -2 0 -2 C -0.530406 -2 -1.03916 -1.789267 -1.414214 -1.414214 C -1.789267 -1.03916 -2 -0.530406 -2 0 C -2 0.530406 -1.789267 1.03916 -1.414214 1.414214 C -1.03916 1.789267 -0.530406 2 0 2 z" style="stroke: #788c5d"/></defs>
 <g clip-path="url(#pclip1)">
 <use xlink:href="#mcv" x="66.273153" y="151.883877" style="fill: #788c5d; stroke: #788c5d"/>
 <use xlink:href="#mcv" x="156.036574" y="112.67233" style="fill: #788c5d; stroke: #788c5d"/>
 <use xlink:href="#mcv" x="245.799994" y="81.303093" style="fill: #788c5d; stroke: #788c5d"/>
 <use xlink:href="#mcv" x="335.563415" y="57.776165" style="fill: #788c5d; stroke: #788c5d"/>
 <use xlink:href="#mcv" x="425.326836" y="42.091546" style="fill: #788c5d; stroke: #788c5d"/>
 </g>
 </g>
 <!-- timeline line -->
 <g id="line2d_18">
 <path d="M 66.273153 96.987712 L 156.036574 65.618474 L 245.799994 42.091546 L 335.563415 26.406928 L 425.326836 18.564619" clip-path="url(#pclip1)" style="fill: none; stroke: #6a8caf; stroke-width: 1.8; stroke-linecap: square"/>
 <defs><path id="mtl" d="M 0 2 C 0.530406 2 1.03916 1.789267 1.414214 1.414214 C 1.789267 1.03916 2 0.530406 2 0 C 2 -0.530406 1.789267 -1.03916 1.414214 -1.414214 C 1.03916 -1.789267 0.530406 -2 0 -2 C -0.530406 -2 -1.03916 -1.789267 -1.414214 -1.414214 C -1.789267 -1.03916 -2 -0.530406 -2 0 C -2 0.530406 -1.789267 1.03916 -1.414214 1.414214 C -1.03916 1.789267 -0.530406 2 0 2 z" style="stroke: #6a8caf"/></defs>
 <g clip-path="url(#pclip1)">
 <use xlink:href="#mtl" x="66.273153" y="96.987712" style="fill: #6a8caf; stroke: #6a8caf"/>
 <use xlink:href="#mtl" x="156.036574" y="65.618474" style="fill: #6a8caf; stroke: #6a8caf"/>
 <use xlink:href="#mtl" x="245.799994" y="42.091546" style="fill: #6a8caf; stroke: #6a8caf"/>
 <use xlink:href="#mtl" x="335.563415" y="26.406928" style="fill: #6a8caf; stroke: #6a8caf"/>
 <use xlink:href="#mtl" x="425.326836" y="18.564619" style="fill: #6a8caf; stroke: #6a8caf"/>
 </g>
 </g>
 <g id="patch_3"><path d="M 48.320469 183.253114 L 48.320469 2.88" style="fill: none; stroke: #d1cfc5; stroke-linejoin: miter; stroke-linecap: square"/></g>
 <g id="patch_4"><path d="M 48.320469 183.253114 L 443.27952 183.253114" style="fill: none; stroke: #d1cfc5; stroke-linejoin: miter; stroke-linecap: square"/></g>
 <!-- legend -->
 <g id="legend_1">
 <g id="line2d_19"><path d="M 340.91952 148.104364 L 352.11952 148.104364" style="fill: none; stroke: #d97757; stroke-width: 1.8; stroke-linecap: square"/>
 <use xlink:href="#mds" x="346.51952" y="148.104364" style="fill: #d97757; stroke: #d97757"/>
 </g>
 <text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="355.71952" y="150.904364">design-system</text>
 <g id="line2d_20"><path d="M 340.91952 159.846864 L 352.11952 159.846864" style="fill: none; stroke: #788c5d; stroke-width: 1.8; stroke-linecap: square"/>
 <use xlink:href="#mcv" x="346.51952" y="159.846864" style="fill: #788c5d; stroke: #788c5d"/>
 </g>
 <text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="355.71952" y="162.646864">component-variants</text>
 <g id="line2d_21"><path d="M 340.91952 171.589364 L 352.11952 171.589364" style="fill: none; stroke: #6a8caf; stroke-width: 1.8; stroke-linecap: square"/>
 <use xlink:href="#mtl" x="346.51952" y="171.589364" style="fill: #6a8caf; stroke: #6a8caf"/>
 </g>
 <text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="355.71952" y="174.389364">timeline</text>
 </g>
 </g>
 </g>
 <defs>
 <clipPath id="pclip1"><rect x="48.320469" y="2.88" width="394.959051" height="180.373114"/></clipPath>
 </defs>
</svg>
 </div>
 <p class="chart-caption">Static pass rate (%) per artifact, weeks of Apr 20 – May 18 2026.
 Source: <code>evals/numeric-data/source.csv</code>, field <code>static_pass_rate</code>.</p>
 </div>
 </div>
<aside class="reference-panel stack" data-gap="sm">
 <span class="eyebrow">Latest-week ranking</span>
 <h3>Pass rate · May 18</h3>
 <div class="metric-list">
 <div class="metric-row">
 <span class="caption">timeline</span>
 <div class="meter"><span style="--value: 99%"></span></div>
 <code>0.99</code>
 </div>
 <div class="metric-row">
 <span class="caption">design-system</span>
 <div class="meter"><span style="--value: 98%"></span></div>
 <code>0.98</code>
 </div>
 <div class="metric-row">
 <span class="caption">component-variants</span>
 <div class="meter"><span style="--value: 96%"></span></div>
 <code>0.96</code>
 </div>
 </div>
<span class="eyebrow" style="margin-top: var(--space-3)">Vision score · May 18</span>
 <div class="metric-list">
 <div class="metric-row">
 <span class="caption">timeline</span>
 <div class="meter"><span style="--value: 92%"></span></div>
 <code>4.6 / 5</code>
 </div>
 <div class="metric-row">
 <span class="caption">design-system</span>
 <div class="meter"><span style="--value: 88%"></span></div>
 <code>4.4 / 5</code>
 </div>
 <div class="metric-row">
 <span class="caption">component-variants</span>
 <div class="meter"><span style="--value: 82%"></span></div>
 <code>4.1 / 5</code>
 </div>
 </div>
 </aside>
 </div>
 </section>
<!-- Exact values table -->
 <section class="section stack" data-gap="md">
 <div class="section-head">
 <div>
 <span class="eyebrow">Full data · source.csv</span>
 <h2>All weeks — pass rate, overflows &amp; vision score</h2>
 </div>
 </div>
<div class="numeric-table-wrap">
 <table class="numeric-table">
 <thead>
 <tr>
 <th>Week</th>
 <th>Artifact</th>
 <th class="metric">Pass rate</th>
 <th class="metric">Overflows</th>
 <th class="metric">Vision</th>
 <th>Notes</th>
 </tr>
 </thead>
 <tbody>
 <tr><td>Apr 20</td><td>design-system</td><td class="metric">0.86</td><td class="metric">7</td><td class="metric">3.1</td><td>baseline extraction</td></tr>
 <tr><td>Apr 27</td><td>design-system</td><td class="metric">0.91</td><td class="metric">5</td><td class="metric">3.4</td><td>spacing pass</td></tr>
 <tr><td>May 4</td><td>design-system</td><td class="metric">0.94</td><td class="metric">3</td><td class="metric">3.8</td><td>component cleanup</td></tr>
 <tr><td>May 11</td><td>design-system</td><td class="metric">0.97</td><td class="metric">1</td><td class="metric">4.2</td><td>copy/checklist fixes</td></tr>
 <tr><td>May 18</td><td>design-system</td><td class="metric">0.98</td><td class="metric">0</td><td class="metric">4.4</td><td>meter alignment fixed</td></tr>
 <tr><td>Apr 20</td><td>component-variants</td><td class="metric">0.82</td><td class="metric">9</td><td class="metric">2.8</td><td>first rewrite</td></tr>
 <tr><td>Apr 27</td><td>component-variants</td><td class="metric">0.87</td><td class="metric">6</td><td class="metric">3.1</td><td>density adjustment</td></tr>
 <tr><td>May 4</td><td>component-variants</td><td class="metric">0.91</td><td class="metric">4</td><td class="metric">3.5</td><td>variant cleanup</td></tr>
 <tr><td>May 11</td><td>component-variants</td><td class="metric">0.94</td><td class="metric">2</td><td class="metric">3.8</td><td>interactive pass</td></tr>
 <tr><td>May 18</td><td>component-variants</td><td class="metric">0.96</td><td class="metric">1</td><td class="metric">4.1</td><td>layout tightened</td></tr>
 <tr><td>Apr 20</td><td>timeline</td><td class="metric">0.89</td><td class="metric">4</td><td class="metric">3.2</td><td>initial page</td></tr>
 <tr><td>Apr 27</td><td>timeline</td><td class="metric">0.93</td><td class="metric">2</td><td class="metric">3.7</td><td>rail alignment</td></tr>
 <tr><td>May 4</td><td>timeline</td><td class="metric">0.96</td><td class="metric">1</td><td class="metric">4.0</td><td>copy blocks added</td></tr>
 <tr><td>May 11</td><td>timeline</td><td class="metric">0.98</td><td class="metric">0</td><td class="metric">4.4</td><td>section spacing pass</td></tr>
 <tr><td>May 18</td><td>timeline</td><td class="metric">0.99</td><td class="metric">0</td><td class="metric">4.6</td><td>stable</td></tr>
 </tbody>
 </table>
 </div>
<div class="numeric-table-wrap">
 <table class="numeric-table">
 <caption>Weekly aggregates (all three artifacts)</caption>
 <thead>
 <tr>
 <th>Week</th>
 <th class="metric">Avg pass rate</th>
 <th class="metric">Total overflows</th>
 <th class="metric">WoW Δ pass</th>
 </tr>
 </thead>
 <tbody>
 <tr><td>Apr 20</td><td class="metric">85.7 %</td><td class="metric">20</td><td class="metric">—</td></tr>
 <tr><td>Apr 27</td><td class="metric">90.3 %</td><td class="metric">13</td><td class="metric">+4.6 pp</td></tr>
 <tr><td>May 4</td><td class="metric">93.7 %</td><td class="metric">8</td><td class="metric">+3.4 pp</td></tr>
 <tr><td>May 11</td><td class="metric">96.3 %</td><td class="metric">3</td><td class="metric">+2.6 pp</td></tr>
 <tr><td>May 18</td><td class="metric">97.7 %</td><td class="metric">1</td><td class="metric">+1.4 pp</td></tr>
 </tbody>
 </table>
 </div>
 </section>
<!-- Key observations -->
 <section class="section stack" data-gap="md">
 <div class="section-head">
 <div>
 <span class="eyebrow">Analysis</span>
 <h2>Observations for adoption decision</h2>
 </div>
 </div>
 <ul class="insight-list">
 <li><div>All three artifacts crossed the 95 % pass-rate threshold by week 4 (May 11) and are at or above 96 % in the latest run, suggesting the checker has reached a stable operating range.</div></li>
 <li><div>Overflow events, the most severe failure mode tracked, dropped from 20 in week 1 to 1 in week 5 — a 95 % reduction. The sole remaining overflow is in component-variants, noted as "layout tightened" (still in active iteration).</div></li>
 <li><div>Week-over-week improvement is decelerating (+4.6 pp → +1.4 pp), consistent with approaching an asymptotic ceiling. Further gains likely require targeted fixes rather than broad passes.</div></li>
 <li><div>timeline (0.99 pass rate, 0 overflows, vision 4.6/5) appears production-ready. design-system (0.98, 0 overflows, vision 4.4) is close. component-variants (0.96, 1 overflow, vision 4.1) warrants one more iteration before full adoption.</div></li>
 </ul>
 </section>
<!-- Source & caveats -->
 <section class="section stack" data-gap="sm">
 <div class="section-head">
 <div>
 <span class="eyebrow">Source &amp; caveats</span>
 <h2>Data provenance</h2>
 </div>
 </div>
 <ul class="plain-list">
 <li>Source file: <code>evals/numeric-data/source.csv</code> — 15 rows, 3 artifacts, 5 weeks (2026-04-20 through 2026-05-18). All values read directly; no imputation.</li>
 <li><code>static_pass_rate</code> is the primary stability signal. <code>overflow_count</code> is a count of layout overflow events per run. <code>vision_score</code> is a 0–5 human-or-model rating; scale and rubric not defined in the source file.</li>
 <li>Weekly averages are arithmetic means across the three artifacts. "Avg pass rate gain" (+12 pp) is computed as the simple mean of per-artifact improvements from week 1 to week 5.</li>
 <li>Only three artifacts are tracked; generalizability to a broader artifact corpus is not verified from this file alone.</li>
 <li>Report generated 2026-05-24. Computed with Python 3 from the source CSV; no external libraries used for arithmetic.</li>
 </ul>
 </section>
</main>
</body>
</html>

Xet Storage Details

Size:
52.4 kB
·
Xet hash:
0ebed46456282f8ff8c7eb4e681ce88cc02e7ed8dfae608c6d89ec88974fc635

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.