evalstate's picture
download
raw
67.6 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Rendering checker — 5-week stability review</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; }
.numeric-table code, .numeric-table .note { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.reference-panel .metric-row { --metric-value: 52px; }
</style>
</head>
<body>
<main class="page stack" data-gap="lg">
<header class="stack" data-gap="sm">
<div class="eyebrow">Eval run numeric-data</div>
<h1>Rendering checker is stable enough to adopt</h1>
<p class="lede">After five weeks all three artifacts exceed 0.95 pass rate, total overflows dropped from 20 to 1, and the average week-over-week improvement is +0.013.</p>
</header>
<section class="section stack" data-gap="lg">
<div class="auto-grid" style="--grid-min: 160px">
<div class="card stat-card">
<div class="caption">Latest avg pass rate</div>
<div class="stat-value">0.977</div>
<div class="chip">Week of 2026-05-18</div>
</div>
<div class="card stat-card">
<div class="caption">Total overflows</div>
<div class="stat-value">1</div>
<div class="chip">Down from 20 at baseline</div>
</div>
<div class="card stat-card">
<div class="caption">Week-over-week change</div>
<div class="stat-value">+0.013</div>
<div class="chip">Avg across 3 artifacts</div>
</div>
<div class="card stat-card">
<div class="caption">Best artifact</div>
<div class="stat-value">0.99</div>
<div class="chip">timeline</div>
</div>
</div>
<div class="section-rail">
<div class="stack" data-gap="lg">
<div class="panel chart-panel stack">
<span class="eyebrow">Trend</span>
<div class="chart-svg">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="398.66375pt" height="220.96425pt" viewBox="0 0 398.66375 220.96425" 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 220.96425
L 398.66375 220.96425
L 398.66375 0
L 0 0
z
" style="fill: #ffffff"/>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 49.82375 201.406125
L 395.78375 201.406125
L 395.78375 23.998125
L 49.82375 23.998125
z
" style="fill: #ffffff"/>
</g>
<g id="matplotlib.axis_1">
<g id="xtick_1">
<g id="line2d_1"/>
<g id="text_1">
<!-- 04-20 -->
<g transform="translate(51.020298 216.004562) scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-30" d="M 2034 4250
Q 1547 4250 1301 3770
Q 1056 3291 1056 2328
Q 1056 1369 1301 889
Q 1547 409 2034 409
Q 2525 409 2770 889
Q 3016 1369 3016 2328
Q 3016 3291 2770 3770
Q 2525 4250 2034 4250
z
M 2034 4750
Q 2819 4750 3233 4129
Q 3647 3509 3647 2328
Q 3647 1150 3233 529
Q 2819 -91 2034 -91
Q 1250 -91 836 529
Q 422 1150 422 2328
Q 422 3509 836 4129
Q 1250 4750 2034 4750
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-34" d="M 2419 4116
L 825 1625
L 2419 1625
L 2419 4116
z
M 2253 4666
L 3047 4666
L 3047 1625
L 3713 1625
L 3713 1100
L 3047 1100
L 3047 0
L 2419 0
L 2419 1100
L 313 1100
L 313 1709
L 2253 4666
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-2d" d="M 313 2009
L 1997 2009
L 1997 1497
L 313 1497
L 313 2009
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-32" d="M 1228 531
L 3431 531
L 3431 0
L 469 0
L 469 531
Q 828 903 1448 1529
Q 2069 2156 2228 2338
Q 2531 2678 2651 2914
Q 2772 3150 2772 3378
Q 2772 3750 2511 3984
Q 2250 4219 1831 4219
Q 1534 4219 1204 4116
Q 875 4013 500 3803
L 500 4441
Q 881 4594 1212 4672
Q 1544 4750 1819 4750
Q 2544 4750 2975 4387
Q 3406 4025 3406 3419
Q 3406 3131 3298 2873
Q 3191 2616 2906 2266
Q 2828 2175 2409 1742
Q 1991 1309 1228 531
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-30"/>
<use xlink:href="#DejaVuSans-34" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-2d" transform="translate(127.246094 0)"/>
<use xlink:href="#DejaVuSans-32" transform="translate(163.330078 0)"/>
<use xlink:href="#DejaVuSans-30" transform="translate(226.953125 0)"/>
</g>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2"/>
<g id="text_2">
<!-- 04-27 -->
<g transform="translate(129.647571 216.004562) scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-37" d="M 525 4666
L 3525 4666
L 3525 4397
L 1831 0
L 1172 0
L 2766 4134
L 525 4134
L 525 4666
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-30"/>
<use xlink:href="#DejaVuSans-34" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-2d" transform="translate(127.246094 0)"/>
<use xlink:href="#DejaVuSans-32" transform="translate(163.330078 0)"/>
<use xlink:href="#DejaVuSans-37" transform="translate(226.953125 0)"/>
</g>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3"/>
<g id="text_3">
<!-- 05-04 -->
<g transform="translate(208.274844 216.004562) scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-35" d="M 691 4666
L 3169 4666
L 3169 4134
L 1269 4134
L 1269 2991
Q 1406 3038 1543 3061
Q 1681 3084 1819 3084
Q 2600 3084 3056 2656
Q 3513 2228 3513 1497
Q 3513 744 3044 326
Q 2575 -91 1722 -91
Q 1428 -91 1123 -41
Q 819 9 494 109
L 494 744
Q 775 591 1075 516
Q 1375 441 1709 441
Q 2250 441 2565 725
Q 2881 1009 2881 1497
Q 2881 1984 2565 2268
Q 2250 2553 1709 2553
Q 1456 2553 1204 2497
Q 953 2441 691 2322
L 691 4666
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-30"/>
<use xlink:href="#DejaVuSans-35" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-2d" transform="translate(127.246094 0)"/>
<use xlink:href="#DejaVuSans-30" transform="translate(163.330078 0)"/>
<use xlink:href="#DejaVuSans-34" transform="translate(226.953125 0)"/>
</g>
</g>
</g>
<g id="xtick_4">
<g id="line2d_4"/>
<g id="text_4">
<!-- 05-11 -->
<g transform="translate(286.902116 216.004562) scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-31" d="M 794 531
L 1825 531
L 1825 4091
L 703 3866
L 703 4441
L 1819 4666
L 2450 4666
L 2450 531
L 3481 531
L 3481 0
L 794 0
L 794 531
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-30"/>
<use xlink:href="#DejaVuSans-35" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-2d" transform="translate(127.246094 0)"/>
<use xlink:href="#DejaVuSans-31" transform="translate(163.330078 0)"/>
<use xlink:href="#DejaVuSans-31" transform="translate(226.953125 0)"/>
</g>
</g>
</g>
<g id="xtick_5">
<g id="line2d_5"/>
<g id="text_5">
<!-- 05-18 -->
<g transform="translate(365.529389 216.004562) scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-38" d="M 2034 2216
Q 1584 2216 1326 1975
Q 1069 1734 1069 1313
Q 1069 891 1326 650
Q 1584 409 2034 409
Q 2484 409 2743 651
Q 3003 894 3003 1313
Q 3003 1734 2745 1975
Q 2488 2216 2034 2216
z
M 1403 2484
Q 997 2584 770 2862
Q 544 3141 544 3541
Q 544 4100 942 4425
Q 1341 4750 2034 4750
Q 2731 4750 3128 4425
Q 3525 4100 3525 3541
Q 3525 3141 3298 2862
Q 3072 2584 2669 2484
Q 3125 2378 3379 2068
Q 3634 1759 3634 1313
Q 3634 634 3220 271
Q 2806 -91 2034 -91
Q 1263 -91 848 271
Q 434 634 434 1313
Q 434 1759 690 2068
Q 947 2378 1403 2484
z
M 1172 3481
Q 1172 3119 1398 2916
Q 1625 2713 2034 2713
Q 2441 2713 2670 2916
Q 2900 3119 2900 3481
Q 2900 3844 2670 4047
Q 2441 4250 2034 4250
Q 1625 4250 1398 4047
Q 1172 3844 1172 3481
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-30"/>
<use xlink:href="#DejaVuSans-35" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-2d" transform="translate(127.246094 0)"/>
<use xlink:href="#DejaVuSans-31" transform="translate(163.330078 0)"/>
<use xlink:href="#DejaVuSans-38" transform="translate(226.953125 0)"/>
</g>
</g>
</g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1">
<g id="line2d_6">
<path d="M 49.82375 186.622125
L 395.78375 186.622125
" clip-path="url(#p8fa39842ce)" style="fill: none; stroke: #b0b0b0; stroke-width: 0.8; stroke-linecap: square"/>
</g>
<g id="line2d_7"/>
<g id="text_6">
<!-- 0.80 -->
<g transform="translate(20.558125 190.421344) scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-2e" d="M 684 794
L 1344 794
L 1344 0
L 684 0
L 684 794
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-30"/>
<use xlink:href="#DejaVuSans-2e" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-38" transform="translate(95.410156 0)"/>
<use xlink:href="#DejaVuSans-30" transform="translate(159.033203 0)"/>
</g>
</g>
</g>
<g id="ytick_2">
<g id="line2d_8">
<path d="M 49.82375 149.662125
L 395.78375 149.662125
" clip-path="url(#p8fa39842ce)" style="fill: none; stroke: #b0b0b0; stroke-width: 0.8; stroke-linecap: square"/>
</g>
<g id="line2d_9"/>
<g id="text_7">
<!-- 0.85 -->
<g transform="translate(20.558125 153.461344) scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-30"/>
<use xlink:href="#DejaVuSans-2e" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-38" transform="translate(95.410156 0)"/>
<use xlink:href="#DejaVuSans-35" transform="translate(159.033203 0)"/>
</g>
</g>
</g>
<g id="ytick_3">
<g id="line2d_10">
<path d="M 49.82375 112.702125
L 395.78375 112.702125
" clip-path="url(#p8fa39842ce)" style="fill: none; stroke: #b0b0b0; stroke-width: 0.8; stroke-linecap: square"/>
</g>
<g id="line2d_11"/>
<g id="text_8">
<!-- 0.90 -->
<g transform="translate(20.558125 116.501344) scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-39" d="M 703 97
L 703 672
Q 941 559 1184 500
Q 1428 441 1663 441
Q 2288 441 2617 861
Q 2947 1281 2994 2138
Q 2813 1869 2534 1725
Q 2256 1581 1919 1581
Q 1219 1581 811 2004
Q 403 2428 403 3163
Q 403 3881 828 4315
Q 1253 4750 1959 4750
Q 2769 4750 3195 4129
Q 3622 3509 3622 2328
Q 3622 1225 3098 567
Q 2575 -91 1691 -91
Q 1453 -91 1209 -44
Q 966 3 703 97
z
M 1959 2075
Q 2384 2075 2632 2365
Q 2881 2656 2881 3163
Q 2881 3666 2632 3958
Q 2384 4250 1959 4250
Q 1534 4250 1286 3958
Q 1038 3666 1038 3163
Q 1038 2656 1286 2365
Q 1534 2075 1959 2075
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-30"/>
<use xlink:href="#DejaVuSans-2e" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-39" transform="translate(95.410156 0)"/>
<use xlink:href="#DejaVuSans-30" transform="translate(159.033203 0)"/>
</g>
</g>
</g>
<g id="ytick_4">
<g id="line2d_12">
<path d="M 49.82375 75.742125
L 395.78375 75.742125
" clip-path="url(#p8fa39842ce)" style="fill: none; stroke: #b0b0b0; stroke-width: 0.8; stroke-linecap: square"/>
</g>
<g id="line2d_13"/>
<g id="text_9">
<!-- 0.95 -->
<g transform="translate(20.558125 79.541344) scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-30"/>
<use xlink:href="#DejaVuSans-2e" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-39" transform="translate(95.410156 0)"/>
<use xlink:href="#DejaVuSans-35" transform="translate(159.033203 0)"/>
</g>
</g>
</g>
<g id="ytick_5">
<g id="line2d_14">
<path d="M 49.82375 38.782125
L 395.78375 38.782125
" clip-path="url(#p8fa39842ce)" style="fill: none; stroke: #b0b0b0; stroke-width: 0.8; stroke-linecap: square"/>
</g>
<g id="line2d_15"/>
<g id="text_10">
<!-- 1.00 -->
<g transform="translate(20.558125 42.581344) scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-31"/>
<use xlink:href="#DejaVuSans-2e" transform="translate(63.623047 0)"/>
<use xlink:href="#DejaVuSans-30" transform="translate(95.410156 0)"/>
<use xlink:href="#DejaVuSans-30" transform="translate(159.033203 0)"/>
</g>
</g>
</g>
<g id="text_11">
<!-- Static pass rate -->
<g transform="translate(10.478438 151.781031) rotate(-90) scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-53" d="M 3425 4513
L 3425 3897
Q 3066 4069 2747 4153
Q 2428 4238 2131 4238
Q 1616 4238 1336 4038
Q 1056 3838 1056 3469
Q 1056 3159 1242 3001
Q 1428 2844 1947 2747
L 2328 2669
Q 3034 2534 3370 2195
Q 3706 1856 3706 1288
Q 3706 609 3251 259
Q 2797 -91 1919 -91
Q 1588 -91 1214 -16
Q 841 59 441 206
L 441 856
Q 825 641 1194 531
Q 1563 422 1919 422
Q 2459 422 2753 634
Q 3047 847 3047 1241
Q 3047 1584 2836 1778
Q 2625 1972 2144 2069
L 1759 2144
Q 1053 2284 737 2584
Q 422 2884 422 3419
Q 422 4038 858 4394
Q 1294 4750 2059 4750
Q 2388 4750 2728 4690
Q 3069 4631 3425 4513
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-74" d="M 1172 4494
L 1172 3500
L 2356 3500
L 2356 3053
L 1172 3053
L 1172 1153
Q 1172 725 1289 603
Q 1406 481 1766 481
L 2356 481
L 2356 0
L 1766 0
Q 1100 0 847 248
Q 594 497 594 1153
L 594 3053
L 172 3053
L 172 3500
L 594 3500
L 594 4494
L 1172 4494
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-61" d="M 2194 1759
Q 1497 1759 1228 1600
Q 959 1441 959 1056
Q 959 750 1161 570
Q 1363 391 1709 391
Q 2188 391 2477 730
Q 2766 1069 2766 1631
L 2766 1759
L 2194 1759
z
M 3341 1997
L 3341 0
L 2766 0
L 2766 531
Q 2569 213 2275 61
Q 1981 -91 1556 -91
Q 1019 -91 701 211
Q 384 513 384 1019
Q 384 1609 779 1909
Q 1175 2209 1959 2209
L 2766 2209
L 2766 2266
Q 2766 2663 2505 2880
Q 2244 3097 1772 3097
Q 1472 3097 1187 3025
Q 903 2953 641 2809
L 641 3341
Q 956 3463 1253 3523
Q 1550 3584 1831 3584
Q 2591 3584 2966 3190
Q 3341 2797 3341 1997
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-69" d="M 603 3500
L 1178 3500
L 1178 0
L 603 0
L 603 3500
z
M 603 4863
L 1178 4863
L 1178 4134
L 603 4134
L 603 4863
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-63" d="M 3122 3366
L 3122 2828
Q 2878 2963 2633 3030
Q 2388 3097 2138 3097
Q 1578 3097 1268 2742
Q 959 2388 959 1747
Q 959 1106 1268 751
Q 1578 397 2138 397
Q 2388 397 2633 464
Q 2878 531 3122 666
L 3122 134
Q 2881 22 2623 -34
Q 2366 -91 2075 -91
Q 1284 -91 818 406
Q 353 903 353 1747
Q 353 2603 823 3093
Q 1294 3584 2113 3584
Q 2378 3584 2631 3529
Q 2884 3475 3122 3366
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-20" transform="scale(0.015625)"/>
<path id="DejaVuSans-70" d="M 1159 525
L 1159 -1331
L 581 -1331
L 581 3500
L 1159 3500
L 1159 2969
Q 1341 3281 1617 3432
Q 1894 3584 2278 3584
Q 2916 3584 3314 3078
Q 3713 2572 3713 1747
Q 3713 922 3314 415
Q 2916 -91 2278 -91
Q 1894 -91 1617 61
Q 1341 213 1159 525
z
M 3116 1747
Q 3116 2381 2855 2742
Q 2594 3103 2138 3103
Q 1681 3103 1420 2742
Q 1159 2381 1159 1747
Q 1159 1113 1420 752
Q 1681 391 2138 391
Q 2594 391 2855 752
Q 3116 1113 3116 1747
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-73" d="M 2834 3397
L 2834 2853
Q 2591 2978 2328 3040
Q 2066 3103 1784 3103
Q 1356 3103 1142 2972
Q 928 2841 928 2578
Q 928 2378 1081 2264
Q 1234 2150 1697 2047
L 1894 2003
Q 2506 1872 2764 1633
Q 3022 1394 3022 966
Q 3022 478 2636 193
Q 2250 -91 1575 -91
Q 1294 -91 989 -36
Q 684 19 347 128
L 347 722
Q 666 556 975 473
Q 1284 391 1588 391
Q 1994 391 2212 530
Q 2431 669 2431 922
Q 2431 1156 2273 1281
Q 2116 1406 1581 1522
L 1381 1569
Q 847 1681 609 1914
Q 372 2147 372 2553
Q 372 3047 722 3315
Q 1072 3584 1716 3584
Q 2034 3584 2315 3537
Q 2597 3491 2834 3397
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-72" d="M 2631 2963
Q 2534 3019 2420 3045
Q 2306 3072 2169 3072
Q 1681 3072 1420 2755
Q 1159 2438 1159 1844
L 1159 0
L 581 0
L 581 3500
L 1159 3500
L 1159 2956
Q 1341 3275 1631 3429
Q 1922 3584 2338 3584
Q 2397 3584 2469 3576
Q 2541 3569 2628 3553
L 2631 2963
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-65" d="M 3597 1894
L 3597 1613
L 953 1613
Q 991 1019 1311 708
Q 1631 397 2203 397
Q 2534 397 2845 478
Q 3156 559 3463 722
L 3463 178
Q 3153 47 2828 -22
Q 2503 -91 2169 -91
Q 1331 -91 842 396
Q 353 884 353 1716
Q 353 2575 817 3079
Q 1281 3584 2069 3584
Q 2775 3584 3186 3129
Q 3597 2675 3597 1894
z
M 3022 2063
Q 3016 2534 2758 2815
Q 2500 3097 2075 3097
Q 1594 3097 1305 2825
Q 1016 2553 972 2059
L 3022 2063
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-53"/>
<use xlink:href="#DejaVuSans-74" transform="translate(63.476562 0)"/>
<use xlink:href="#DejaVuSans-61" transform="translate(102.685547 0)"/>
<use xlink:href="#DejaVuSans-74" transform="translate(163.964844 0)"/>
<use xlink:href="#DejaVuSans-69" transform="translate(203.173828 0)"/>
<use xlink:href="#DejaVuSans-63" transform="translate(230.957031 0)"/>
<use xlink:href="#DejaVuSans-20" transform="translate(285.9375 0)"/>
<use xlink:href="#DejaVuSans-70" transform="translate(317.724609 0)"/>
<use xlink:href="#DejaVuSans-61" transform="translate(381.201172 0)"/>
<use xlink:href="#DejaVuSans-73" transform="translate(442.480469 0)"/>
<use xlink:href="#DejaVuSans-73" transform="translate(494.580078 0)"/>
<use xlink:href="#DejaVuSans-20" transform="translate(546.679688 0)"/>
<use xlink:href="#DejaVuSans-72" transform="translate(578.466797 0)"/>
<use xlink:href="#DejaVuSans-61" transform="translate(619.580078 0)"/>
<use xlink:href="#DejaVuSans-74" transform="translate(680.859375 0)"/>
<use xlink:href="#DejaVuSans-65" transform="translate(720.068359 0)"/>
</g>
</g>
</g>
<g id="patch_3">
<path d="M 49.82375 201.406125
L 49.82375 23.998125
" style="fill: none; stroke: #d1cfc5; stroke-width: 0.8; stroke-linejoin: miter; stroke-linecap: square"/>
</g>
<g id="patch_4">
<path d="M 49.82375 201.406125
L 395.78375 201.406125
" style="fill: none; stroke: #d1cfc5; stroke-width: 0.8; stroke-linejoin: miter; stroke-linecap: square"/>
</g>
<g id="line2d_16">
<path d="M 65.549205 142.270125
L 144.176477 105.310125
L 222.80375 83.134125
L 301.431023 60.958125
L 380.058295 53.566125
" clip-path="url(#p8fa39842ce)" style="fill: none; stroke: #d97757; stroke-width: 2; stroke-linecap: square"/>
<defs>
<path id="m71cca2fd34" d="M 0 2.5
C 0.663008 2.5 1.29895 2.236584 1.767767 1.767767
C 2.236584 1.29895 2.5 0.663008 2.5 0
C 2.5 -0.663008 2.236584 -1.29895 1.767767 -1.767767
C 1.29895 -2.236584 0.663008 -2.5 0 -2.5
C -0.663008 -2.5 -1.29895 -2.236584 -1.767767 -1.767767
C -2.236584 -1.29895 -2.5 -0.663008 -2.5 0
C -2.5 0.663008 -2.236584 1.29895 -1.767767 1.767767
C -1.29895 2.236584 -0.663008 2.5 0 2.5
z
" style="stroke: #d97757"/>
</defs>
<g clip-path="url(#p8fa39842ce)">
<use xlink:href="#m71cca2fd34" x="65.549205" y="142.270125" style="fill: #d97757; stroke: #d97757"/>
<use xlink:href="#m71cca2fd34" x="144.176477" y="105.310125" style="fill: #d97757; stroke: #d97757"/>
<use xlink:href="#m71cca2fd34" x="222.80375" y="83.134125" style="fill: #d97757; stroke: #d97757"/>
<use xlink:href="#m71cca2fd34" x="301.431023" y="60.958125" style="fill: #d97757; stroke: #d97757"/>
<use xlink:href="#m71cca2fd34" x="380.058295" y="53.566125" style="fill: #d97757; stroke: #d97757"/>
</g>
</g>
<g id="line2d_17">
<path d="M 65.549205 171.838125
L 144.176477 134.878125
L 222.80375 105.310125
L 301.431023 83.134125
L 380.058295 68.350125
" clip-path="url(#p8fa39842ce)" style="fill: none; stroke: #788c5d; stroke-width: 2; stroke-linecap: square"/>
<defs>
<path id="mb28a5dc951" d="M 0 2.5
C 0.663008 2.5 1.29895 2.236584 1.767767 1.767767
C 2.236584 1.29895 2.5 0.663008 2.5 0
C 2.5 -0.663008 2.236584 -1.29895 1.767767 -1.767767
C 1.29895 -2.236584 0.663008 -2.5 0 -2.5
C -0.663008 -2.5 -1.29895 -2.236584 -1.767767 -1.767767
C -2.236584 -1.29895 -2.5 -0.663008 -2.5 0
C -2.5 0.663008 -2.236584 1.29895 -1.767767 1.767767
C -1.29895 2.236584 -0.663008 2.5 0 2.5
z
" style="stroke: #788c5d"/>
</defs>
<g clip-path="url(#p8fa39842ce)">
<use xlink:href="#mb28a5dc951" x="65.549205" y="171.838125" style="fill: #788c5d; stroke: #788c5d"/>
<use xlink:href="#mb28a5dc951" x="144.176477" y="134.878125" style="fill: #788c5d; stroke: #788c5d"/>
<use xlink:href="#mb28a5dc951" x="222.80375" y="105.310125" style="fill: #788c5d; stroke: #788c5d"/>
<use xlink:href="#mb28a5dc951" x="301.431023" y="83.134125" style="fill: #788c5d; stroke: #788c5d"/>
<use xlink:href="#mb28a5dc951" x="380.058295" y="68.350125" style="fill: #788c5d; stroke: #788c5d"/>
</g>
</g>
<g id="line2d_18">
<path d="M 65.549205 120.094125
L 144.176477 90.526125
L 222.80375 68.350125
L 301.431023 53.566125
L 380.058295 46.174125
" clip-path="url(#p8fa39842ce)" style="fill: none; stroke: #6a8caf; stroke-width: 2; stroke-linecap: square"/>
<defs>
<path id="m4a3f220a12" d="M 0 2.5
C 0.663008 2.5 1.29895 2.236584 1.767767 1.767767
C 2.236584 1.29895 2.5 0.663008 2.5 0
C 2.5 -0.663008 2.236584 -1.29895 1.767767 -1.767767
C 1.29895 -2.236584 0.663008 -2.5 0 -2.5
C -0.663008 -2.5 -1.29895 -2.236584 -1.767767 -1.767767
C -2.236584 -1.29895 -2.5 -0.663008 -2.5 0
C -2.5 0.663008 -2.236584 1.29895 -1.767767 1.767767
C -1.29895 2.236584 -0.663008 2.5 0 2.5
z
" style="stroke: #6a8caf"/>
</defs>
<g clip-path="url(#p8fa39842ce)">
<use xlink:href="#m4a3f220a12" x="65.549205" y="120.094125" style="fill: #6a8caf; stroke: #6a8caf"/>
<use xlink:href="#m4a3f220a12" x="144.176477" y="90.526125" style="fill: #6a8caf; stroke: #6a8caf"/>
<use xlink:href="#m4a3f220a12" x="222.80375" y="68.350125" style="fill: #6a8caf; stroke: #6a8caf"/>
<use xlink:href="#m4a3f220a12" x="301.431023" y="53.566125" style="fill: #6a8caf; stroke: #6a8caf"/>
<use xlink:href="#m4a3f220a12" x="380.058295" y="46.174125" style="fill: #6a8caf; stroke: #6a8caf"/>
</g>
</g>
<g id="text_12">
<!-- Weekly pass-rate trend -->
<g style="fill: #141413" transform="translate(153.257188 11.998125) scale(0.12 -0.12)">
<defs>
<path id="DejaVuSans-57" d="M 213 4666
L 850 4666
L 1831 722
L 2809 4666
L 3519 4666
L 4500 722
L 5478 4666
L 6119 4666
L 4947 0
L 4153 0
L 3169 4050
L 2175 0
L 1381 0
L 213 4666
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-6b" d="M 581 4863
L 1159 4863
L 1159 1991
L 2875 3500
L 3609 3500
L 1753 1863
L 3688 0
L 2938 0
L 1159 1709
L 1159 0
L 581 0
L 581 4863
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-6c" d="M 603 4863
L 1178 4863
L 1178 0
L 603 0
L 603 4863
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-79" d="M 2059 -325
Q 1816 -950 1584 -1140
Q 1353 -1331 966 -1331
L 506 -1331
L 506 -850
L 844 -850
Q 1081 -850 1212 -737
Q 1344 -625 1503 -206
L 1606 56
L 191 3500
L 800 3500
L 1894 763
L 2988 3500
L 3597 3500
L 2059 -325
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-6e" d="M 3513 2113
L 3513 0
L 2938 0
L 2938 2094
Q 2938 2591 2744 2837
Q 2550 3084 2163 3084
Q 1697 3084 1428 2787
Q 1159 2491 1159 1978
L 1159 0
L 581 0
L 581 3500
L 1159 3500
L 1159 2956
Q 1366 3272 1645 3428
Q 1925 3584 2291 3584
Q 2894 3584 3203 3211
Q 3513 2838 3513 2113
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-64" d="M 2906 2969
L 2906 4863
L 3481 4863
L 3481 0
L 2906 0
L 2906 525
Q 2725 213 2448 61
Q 2172 -91 1784 -91
Q 1150 -91 751 415
Q 353 922 353 1747
Q 353 2572 751 3078
Q 1150 3584 1784 3584
Q 2172 3584 2448 3432
Q 2725 3281 2906 2969
z
M 947 1747
Q 947 1113 1208 752
Q 1469 391 1925 391
Q 2381 391 2643 752
Q 2906 1113 2906 1747
Q 2906 2381 2643 2742
Q 2381 3103 1925 3103
Q 1469 3103 1208 2742
Q 947 2381 947 1747
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-57"/>
<use xlink:href="#DejaVuSans-65" transform="translate(93.001953 0)"/>
<use xlink:href="#DejaVuSans-65" transform="translate(154.525391 0)"/>
<use xlink:href="#DejaVuSans-6b" transform="translate(216.048828 0)"/>
<use xlink:href="#DejaVuSans-6c" transform="translate(273.958984 0)"/>
<use xlink:href="#DejaVuSans-79" transform="translate(301.742188 0)"/>
<use xlink:href="#DejaVuSans-20" transform="translate(360.921875 0)"/>
<use xlink:href="#DejaVuSans-70" transform="translate(392.708984 0)"/>
<use xlink:href="#DejaVuSans-61" transform="translate(456.185547 0)"/>
<use xlink:href="#DejaVuSans-73" transform="translate(517.464844 0)"/>
<use xlink:href="#DejaVuSans-73" transform="translate(569.564453 0)"/>
<use xlink:href="#DejaVuSans-2d" transform="translate(621.664062 0)"/>
<use xlink:href="#DejaVuSans-72" transform="translate(657.748047 0)"/>
<use xlink:href="#DejaVuSans-61" transform="translate(698.861328 0)"/>
<use xlink:href="#DejaVuSans-74" transform="translate(760.140625 0)"/>
<use xlink:href="#DejaVuSans-65" transform="translate(799.349609 0)"/>
<use xlink:href="#DejaVuSans-20" transform="translate(860.873047 0)"/>
<use xlink:href="#DejaVuSans-74" transform="translate(892.660156 0)"/>
<use xlink:href="#DejaVuSans-72" transform="translate(931.869141 0)"/>
<use xlink:href="#DejaVuSans-65" transform="translate(970.732422 0)"/>
<use xlink:href="#DejaVuSans-6e" transform="translate(1032.255859 0)"/>
<use xlink:href="#DejaVuSans-64" transform="translate(1095.634766 0)"/>
</g>
</g>
<g id="legend_1">
<g id="line2d_19">
<path d="M 280.779219 161.863781
L 287.079219 161.863781
L 293.379219 161.863781
" style="fill: none; stroke: #d97757; stroke-width: 2; stroke-linecap: square"/>
<g>
<use xlink:href="#m71cca2fd34" x="287.079219" y="161.863781" style="fill: #d97757; stroke: #d97757"/>
</g>
</g>
<g id="text_13">
<!-- design system -->
<g style="fill: #141413" transform="translate(297.429219 165.013781) scale(0.09 -0.09)">
<defs>
<path id="DejaVuSans-67" d="M 2906 1791
Q 2906 2416 2648 2759
Q 2391 3103 1925 3103
Q 1463 3103 1205 2759
Q 947 2416 947 1791
Q 947 1169 1205 825
Q 1463 481 1925 481
Q 2391 481 2648 825
Q 2906 1169 2906 1791
z
M 3481 434
Q 3481 -459 3084 -895
Q 2688 -1331 1869 -1331
Q 1566 -1331 1297 -1286
Q 1028 -1241 775 -1147
L 775 -588
Q 1028 -725 1275 -790
Q 1522 -856 1778 -856
Q 2344 -856 2625 -561
Q 2906 -266 2906 331
L 2906 616
Q 2728 306 2450 153
Q 2172 0 1784 0
Q 1141 0 747 490
Q 353 981 353 1791
Q 353 2603 747 3093
Q 1141 3584 1784 3584
Q 2172 3584 2450 3431
Q 2728 3278 2906 2969
L 2906 3500
L 3481 3500
L 3481 434
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-6d" d="M 3328 2828
Q 3544 3216 3844 3400
Q 4144 3584 4550 3584
Q 5097 3584 5394 3201
Q 5691 2819 5691 2113
L 5691 0
L 5113 0
L 5113 2094
Q 5113 2597 4934 2840
Q 4756 3084 4391 3084
Q 3944 3084 3684 2787
Q 3425 2491 3425 1978
L 3425 0
L 2847 0
L 2847 2094
Q 2847 2600 2669 2842
Q 2491 3084 2119 3084
Q 1678 3084 1418 2786
Q 1159 2488 1159 1978
L 1159 0
L 581 0
L 581 3500
L 1159 3500
L 1159 2956
Q 1356 3278 1631 3431
Q 1906 3584 2284 3584
Q 2666 3584 2933 3390
Q 3200 3197 3328 2828
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-64"/>
<use xlink:href="#DejaVuSans-65" transform="translate(63.476562 0)"/>
<use xlink:href="#DejaVuSans-73" transform="translate(125 0)"/>
<use xlink:href="#DejaVuSans-69" transform="translate(177.099609 0)"/>
<use xlink:href="#DejaVuSans-67" transform="translate(204.882812 0)"/>
<use xlink:href="#DejaVuSans-6e" transform="translate(268.359375 0)"/>
<use xlink:href="#DejaVuSans-20" transform="translate(331.738281 0)"/>
<use xlink:href="#DejaVuSans-73" transform="translate(363.525391 0)"/>
<use xlink:href="#DejaVuSans-79" transform="translate(415.625 0)"/>
<use xlink:href="#DejaVuSans-73" transform="translate(474.804688 0)"/>
<use xlink:href="#DejaVuSans-74" transform="translate(526.904297 0)"/>
<use xlink:href="#DejaVuSans-65" transform="translate(566.113281 0)"/>
<use xlink:href="#DejaVuSans-6d" transform="translate(627.636719 0)"/>
</g>
</g>
<g id="line2d_20">
<path d="M 280.779219 175.074094
L 287.079219 175.074094
L 293.379219 175.074094
" style="fill: none; stroke: #788c5d; stroke-width: 2; stroke-linecap: square"/>
<g>
<use xlink:href="#mb28a5dc951" x="287.079219" y="175.074094" style="fill: #788c5d; stroke: #788c5d"/>
</g>
</g>
<g id="text_14">
<!-- component variants -->
<g style="fill: #141413" transform="translate(297.429219 178.224094) scale(0.09 -0.09)">
<defs>
<path id="DejaVuSans-6f" d="M 1959 3097
Q 1497 3097 1228 2736
Q 959 2375 959 1747
Q 959 1119 1226 758
Q 1494 397 1959 397
Q 2419 397 2687 759
Q 2956 1122 2956 1747
Q 2956 2369 2687 2733
Q 2419 3097 1959 3097
z
M 1959 3584
Q 2709 3584 3137 3096
Q 3566 2609 3566 1747
Q 3566 888 3137 398
Q 2709 -91 1959 -91
Q 1206 -91 779 398
Q 353 888 353 1747
Q 353 2609 779 3096
Q 1206 3584 1959 3584
z
" transform="scale(0.015625)"/>
<path id="DejaVuSans-76" d="M 191 3500
L 800 3500
L 1894 563
L 2988 3500
L 3597 3500
L 2284 0
L 1503 0
L 191 3500
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-63"/>
<use xlink:href="#DejaVuSans-6f" transform="translate(54.980469 0)"/>
<use xlink:href="#DejaVuSans-6d" transform="translate(116.162109 0)"/>
<use xlink:href="#DejaVuSans-70" transform="translate(213.574219 0)"/>
<use xlink:href="#DejaVuSans-6f" transform="translate(277.050781 0)"/>
<use xlink:href="#DejaVuSans-6e" transform="translate(338.232422 0)"/>
<use xlink:href="#DejaVuSans-65" transform="translate(401.611328 0)"/>
<use xlink:href="#DejaVuSans-6e" transform="translate(463.134766 0)"/>
<use xlink:href="#DejaVuSans-74" transform="translate(526.513672 0)"/>
<use xlink:href="#DejaVuSans-20" transform="translate(565.722656 0)"/>
<use xlink:href="#DejaVuSans-76" transform="translate(597.509766 0)"/>
<use xlink:href="#DejaVuSans-61" transform="translate(656.689453 0)"/>
<use xlink:href="#DejaVuSans-72" transform="translate(717.96875 0)"/>
<use xlink:href="#DejaVuSans-69" transform="translate(759.082031 0)"/>
<use xlink:href="#DejaVuSans-61" transform="translate(786.865234 0)"/>
<use xlink:href="#DejaVuSans-6e" transform="translate(848.144531 0)"/>
<use xlink:href="#DejaVuSans-74" transform="translate(911.523438 0)"/>
<use xlink:href="#DejaVuSans-73" transform="translate(950.732422 0)"/>
</g>
</g>
<g id="line2d_21">
<path d="M 280.779219 188.284406
L 287.079219 188.284406
L 293.379219 188.284406
" style="fill: none; stroke: #6a8caf; stroke-width: 2; stroke-linecap: square"/>
<g>
<use xlink:href="#m4a3f220a12" x="287.079219" y="188.284406" style="fill: #6a8caf; stroke: #6a8caf"/>
</g>
</g>
<g id="text_15">
<!-- timeline -->
<g style="fill: #141413" transform="translate(297.429219 191.434406) scale(0.09 -0.09)">
<use xlink:href="#DejaVuSans-74"/>
<use xlink:href="#DejaVuSans-69" transform="translate(39.208984 0)"/>
<use xlink:href="#DejaVuSans-6d" transform="translate(66.992188 0)"/>
<use xlink:href="#DejaVuSans-65" transform="translate(164.404297 0)"/>
<use xlink:href="#DejaVuSans-6c" transform="translate(225.927734 0)"/>
<use xlink:href="#DejaVuSans-69" transform="translate(253.710938 0)"/>
<use xlink:href="#DejaVuSans-6e" transform="translate(281.494141 0)"/>
<use xlink:href="#DejaVuSans-65" transform="translate(344.873047 0)"/>
</g>
</g>
</g>
</g>
</g>
<defs>
<clipPath id="p8fa39842ce">
<rect x="49.82375" y="23.998125" width="345.96" height="177.408"/>
</clipPath>
</defs>
</svg>
</div>
<p class="chart-caption">Weekly static pass rates for each artifact. Source: <code>evals/numeric-data/source.csv</code>.</p>
</div>
<div class="numeric-table-wrap">
<table class="numeric-table">
<thead>
<tr>
<th>Week</th>
<th class="metric">Design-system</th>
<th class="metric">Component-variants</th>
<th class="metric">Timeline</th>
</tr>
</thead>
<tbody>
<tr>
<td>2026-04-20</td>
<td class="metric">0.86</td>
<td class="metric">0.82</td>
<td class="metric">0.89</td>
</tr><tr>
<td>2026-04-27</td>
<td class="metric">0.91</td>
<td class="metric">0.87</td>
<td class="metric">0.93</td>
</tr><tr>
<td>2026-05-04</td>
<td class="metric">0.94</td>
<td class="metric">0.91</td>
<td class="metric">0.96</td>
</tr><tr>
<td>2026-05-11</td>
<td class="metric">0.97</td>
<td class="metric">0.94</td>
<td class="metric">0.98</td>
</tr><tr>
<td>2026-05-18</td>
<td class="metric">0.98</td>
<td class="metric">0.96</td>
<td class="metric">0.99</td>
</tr>
</tbody>
</table>
</div>
</div>
<aside class="reference-panel stack" data-gap="lg">
<div class="panel stack" data-gap="md">
<span class="eyebrow">Ranking</span>
<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>
</div>
<div class="panel stack" data-gap="sm">
<span class="eyebrow">Source / Caveat</span>
<p class="caption">Data from <code>evals/numeric-data/source.csv</code> (15 rows, 3 artifacts × 5 weeks). Scores are observed static pass rates from the new rendering checker; they do not include runtime or interaction coverage.</p>
</div>
</aside>
</div>
</section>
</main>
</body>
</html>

Xet Storage Details

Size:
67.6 kB
·
Xet hash:
60e8bf308a6b8cf6e70de22ac5d6684e5ea8e381ebe7002938ba038e9b6425a8

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