Buckets:
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Numeric-data stability analysis — rendering checker</title> | |
| <style data-birch-system> | |
| :root { | |
| color-scheme: light; | |
| --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; | |
| --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); | |
| --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; | |
| --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; | |
| --radius-xs: 4px; | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-pill: 999px; | |
| --border: 1.5px solid var(--border-color); | |
| --border-thin: 1px solid var(--border-color); | |
| --dur-fast: 120ms; | |
| --dur: 180ms; | |
| --hover-y: -2px; | |
| --page-max: 1100px; | |
| --page-pad: 28px; | |
| --page-pad-block: 48px; | |
| --panel-pad: var(--space-5); | |
| --card-pad: var(--space-5); | |
| } | |
| *, *::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-size: var(--text-base); | |
| line-height: 1.55; | |
| font-family: var(--font-sans); | |
| } | |
| h1, h2, h3 { | |
| margin: 0; | |
| font-family: var(--font-serif); | |
| line-height: 1.2; | |
| } | |
| h1 { font-size: clamp(28px, 4.8vw, var(--text-4xl)); } | |
| h2 { font-size: var(--text-2xl); } | |
| p { margin: 0; } | |
| code { font-family: var(--font-mono); } | |
| a { color: inherit; } | |
| .page { | |
| width: min(100% - (var(--page-pad) * 2), var(--page-max)); | |
| margin-inline: auto; | |
| padding-block: var(--page-pad-block) var(--space-9); | |
| } | |
| .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); } | |
| .section { | |
| margin-block: var(--section-gap, var(--space-5)); | |
| } | |
| .section-head .eyebrow { margin-block-end: var(--space-2); } | |
| .auto-grid { | |
| display: grid; | |
| gap: var(--space-5); | |
| grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 210px)), 1fr)); | |
| } | |
| .section-rail { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); | |
| gap: var(--space-6); | |
| align-items: start; | |
| } | |
| .section-rail > .section-head { | |
| grid-column: 1 / -1; | |
| } | |
| .eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| color: var(--accent); | |
| font-family: var(--font-mono); | |
| font-size: var(--text-xs); | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .lede { | |
| max-width: 72ch; | |
| color: var(--text-soft); | |
| font-size: var(--text-lg); | |
| } | |
| .caption { | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| font-size: var(--text-sm); | |
| } | |
| .panel, | |
| .card { | |
| background: var(--surface); | |
| border: var(--border); | |
| border-radius: var(--radius-md); | |
| padding: var(--panel-pad); | |
| } | |
| .stat-card { | |
| gap: 4px; | |
| } | |
| .stat-value { | |
| display: block; | |
| color: var(--text); | |
| font-family: var(--font-serif); | |
| font-size: clamp(28px, 3.2vw, 42px); | |
| font-variant-numeric: tabular-nums; | |
| line-height: 1; | |
| letter-spacing: -0.025em; | |
| font-weight: 550; | |
| } | |
| .metric-list { | |
| --metric-label: 132px; | |
| --metric-value: 150px; | |
| display: grid; | |
| gap: var(--space-3); | |
| } | |
| .metric-row { | |
| display: grid; | |
| grid-template-columns: var(--metric-label) minmax(140px, 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; | |
| min-width: var(--metric-value); | |
| font-size: var(--text-sm); | |
| font-family: var(--font-mono); | |
| color: var(--text-muted); | |
| white-space: nowrap; | |
| } | |
| .meter { | |
| height: 9px; | |
| border-radius: var(--radius-pill); | |
| background: var(--surface-tint); | |
| overflow: hidden; | |
| } | |
| .meter span { | |
| display: block; | |
| width: var(--value); | |
| height: 100%; | |
| background: var(--accent); | |
| } | |
| .chart-panel { max-width: 100%; min-width: 0; overflow: hidden; } | |
| .chart-panel svg, | |
| .chart-svg { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .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%; | |
| border-collapse: collapse; | |
| } | |
| .numeric-table th, | |
| .numeric-table td { | |
| padding: var(--space-3); | |
| border-bottom: 1px solid var(--color-gray-200); | |
| vertical-align: middle; | |
| } | |
| .numeric-table th { | |
| text-align: left; | |
| color: var(--text-muted); | |
| background: var(--surface-tint); | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .numeric-table .metric, | |
| .numeric-table .num { | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .callout { | |
| border-inline-start: 4px solid var(--info); | |
| background: color-mix(in srgb, var(--info) 12%, transparent); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-4); | |
| border: var(--border); | |
| } | |
| .callout-label { | |
| display: block; | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| font-size: var(--text-xs); | |
| text-transform: uppercase; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| margin-block-end: var(--space-2); | |
| } | |
| @media (max-width: 860px) { | |
| :root { | |
| --page-pad: 20px; | |
| --page-pad-block: 40px; | |
| } | |
| .section-rail { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 620px) { | |
| .metric-row { | |
| grid-template-columns: 1fr max-content; | |
| } | |
| .metric-row .meter { | |
| grid-column: 1 / -1; | |
| } | |
| .metric-row > :last-child { | |
| grid-column: 2; | |
| } | |
| .numeric-table th, | |
| .numeric-table td { | |
| padding: 10px 8px; | |
| font-size: 12px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="page stack" data-gap="lg"> | |
| <header class="stack" data-gap="sm"> | |
| <div class="eyebrow">Numeric-data stability check</div> | |
| <h1>Rendering checker trend is strong enough to advance toward adoption.</h1> | |
| <p class="lede">From <code>evals/numeric-data/source.csv</code>, pass rose from <strong>85.67%</strong> to <strong>97.67%</strong> over 4 prior weeks while overflow fell <strong>20 → 1</strong>. Latest week (2026-05-18): <strong>97.67%</strong> avg static pass and <strong>1</strong> overflow across three artifacts.</p> | |
| </header> | |
| <section class="section stack" data-gap="lg"> | |
| <div class="section-head"> | |
| <span class="eyebrow">Evidence strip</span> | |
| <h2>Week-over-week progress</h2> | |
| </div> | |
| <div class="auto-grid" style="--grid-min: 180px;"> | |
| <article class="card panel stat-card stack" data-gap="xs"> | |
| <div class="eyebrow">Latest weekly pass</div> | |
| <strong class="stat-value">97.67%</strong> | |
| <p class="caption">2026-05-18: mean across 3 artifacts</p> | |
| </article> | |
| <article class="card panel stat-card stack" data-gap="xs"> | |
| <div class="eyebrow">Latest overflow total</div> | |
| <strong class="stat-value">1</strong> | |
| <p class="caption">Last week: 3 → 1 (-2)</p> | |
| </article> | |
| <article class="card panel stat-card stack" data-gap="xs"> | |
| <div class="eyebrow">Pass delta vs prior week</div> | |
| <strong class="stat-value">+1.33 pts</strong> | |
| <p class="caption">2026-05-11 → 2026-05-18</p> | |
| </article> | |
| <article class="card panel stat-card stack" data-gap="xs"> | |
| <div class="eyebrow">Best vs worst this week</div> | |
| <strong class="stat-value">timeline • component-variants</strong> | |
| <p class="caption">99.0% vs 96.0%</p> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="section stack" data-gap="lg"> | |
| <div class="section-head"> | |
| <span class="eyebrow">Trend and exact values</span> | |
| <h2>Weekly pass-rate trajectory is monotonic and near target</h2> | |
| </div> | |
| <div class="section-rail"> | |
| <div class="stack" data-gap="lg"> | |
| <article class="panel chart-panel stack" data-gap="sm"> | |
| <svg class="chart-svg" viewBox="0 0 760 300" role="img" aria-label="Weekly average static pass rate across all artifacts"> | |
| <title>Average static pass by week</title> | |
| <desc>Line chart showing the weekly mean static pass over 2026-04-20 through 2026-05-18.</desc> | |
| <rect x="0" y="0" width="760" height="300" fill="var(--surface)" /> | |
| <line x1="64" y1="230" x2="732" y2="230" stroke="var(--border-color)" stroke-width="1" /> | |
| <line x1="64" y1="28" x2="64" y2="230" stroke="var(--border-color)" stroke-width="1" /> | |
| <line x1="64" y1="252.4" x2="732" y2="252.4" stroke="var(--border-color)" stroke-width="1" stroke-dasharray="4 6" /><line x1="64" y1="196.3" x2="732" y2="196.3" stroke="var(--border-color)" stroke-width="1" stroke-dasharray="4 6" /><line x1="64" y1="140.2" x2="732" y2="140.2" stroke="var(--border-color)" stroke-width="1" stroke-dasharray="4 6" /><line x1="64" y1="84.1" x2="732" y2="84.1" stroke="var(--border-color)" stroke-width="1" stroke-dasharray="4 6" /><line x1="64" y1="28.0" x2="732" y2="28.0" stroke="var(--border-color)" stroke-width="1" stroke-dasharray="4 6" /> | |
| <text x="54" y="256.4" text-anchor="end" fill="var(--text-soft)" font-size="11">80%</text><text x="54" y="200.3" text-anchor="end" fill="var(--text-soft)" font-size="11">85%</text><text x="54" y="144.2" text-anchor="end" fill="var(--text-soft)" font-size="11">90%</text><text x="54" y="88.1" text-anchor="end" fill="var(--text-soft)" font-size="11">95%</text><text x="54" y="32.0" text-anchor="end" fill="var(--text-soft)" font-size="11">100%</text> | |
| <path d="M 64.0 188.9 L 231.0 136.5 L 398.0 99.1 L 565.0 69.1 L 732.0 54.2" fill="none" stroke="var(--accent)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> | |
| <circle cx="64.0" cy="188.9" r="5.5" fill="var(--surface)" stroke="var(--accent)" stroke-width="3" /><circle cx="231.0" cy="136.5" r="5.5" fill="var(--surface)" stroke="var(--accent)" stroke-width="3" /><circle cx="398.0" cy="99.1" r="5.5" fill="var(--surface)" stroke="var(--accent)" stroke-width="3" /><circle cx="565.0" cy="69.1" r="5.5" fill="var(--surface)" stroke="var(--accent)" stroke-width="3" /><circle cx="732.0" cy="54.2" r="5.5" fill="var(--surface)" stroke="var(--accent)" stroke-width="3" /> | |
| <text x="64.0" y="180.9" text-anchor="middle" fill="var(--text)" font-size="11">85.67%</text><text x="231.0" y="128.5" text-anchor="middle" fill="var(--text)" font-size="11">90.33%</text><text x="398.0" y="91.1" text-anchor="middle" fill="var(--text)" font-size="11">93.67%</text><text x="565.0" y="61.1" text-anchor="middle" fill="var(--text)" font-size="11">96.33%</text><text x="732.0" y="46.2" text-anchor="middle" fill="var(--text)" font-size="11">97.67%</text> | |
| <text x="64.0" y="254" text-anchor="middle" fill="var(--text-muted)" font-size="11">Apr 20</text><text x="231.0" y="254" text-anchor="middle" fill="var(--text-muted)" font-size="11">Apr 27</text><text x="398.0" y="254" text-anchor="middle" fill="var(--text-muted)" font-size="11">May 04</text><text x="565.0" y="254" text-anchor="middle" fill="var(--text-muted)" font-size="11">May 11</text><text x="732.0" y="254" text-anchor="middle" fill="var(--text-muted)" font-size="11">May 18</text> | |
| </svg> | |
| <p class="chart-caption">Each point is the unweighted mean static pass for that week across design-system, component-variants, and timeline.</p> | |
| </article> | |
| <article class="panel stack" data-gap="sm"> | |
| <div class="section-head"> | |
| <span class="eyebrow">Exact numeric table</span> | |
| <h2>Weekly aggregates used in the chart</h2> | |
| </div> | |
| <div class="numeric-table-wrap"> | |
| <table class="numeric-table"> | |
| <thead> | |
| <tr> | |
| <th scope="col">Week</th> | |
| <th scope="col" class="metric">Avg static pass</th> | |
| <th scope="col" class="metric">Δ pass vs prior</th> | |
| <th scope="col" class="metric">Overflow total</th> | |
| <th scope="col" class="metric">Avg palette_close</th> | |
| <th scope="col" class="metric">Avg mean_rgb_delta</th> | |
| <th scope="col" class="metric">Avg vision_score</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr><th scope="row">2026-04-20</th><td class="metric num">85.6667%</td><td class="metric num">—</td><td class="metric num">20</td><td class="metric num">0.9033</td><td class="metric num">19.7000</td><td class="metric num">3.0333</td></tr><tr><th scope="row">2026-04-27</th><td class="metric num">90.3333%</td><td class="metric num">+4.67 pp</td><td class="metric num">13</td><td class="metric num">0.9333</td><td class="metric num">15.9667</td><td class="metric num">3.4000</td></tr><tr><th scope="row">2026-05-04</th><td class="metric num">93.6667%</td><td class="metric num">+3.33 pp</td><td class="metric num">8</td><td class="metric num">0.9533</td><td class="metric num">13.2667</td><td class="metric num">3.7667</td></tr><tr><th scope="row">2026-05-11</th><td class="metric num">96.3333%</td><td class="metric num">+2.67 pp</td><td class="metric num">3</td><td class="metric num">0.9700</td><td class="metric num">9.1667</td><td class="metric num">4.1333</td></tr><tr><th scope="row">2026-05-18</th><td class="metric num">97.6667%</td><td class="metric num">+1.33 pp</td><td class="metric num">1</td><td class="metric num">0.9767</td><td class="metric num">7.6667</td><td class="metric num">4.3667</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </article> | |
| </div> | |
| <aside class="panel stack" data-gap="sm"> | |
| <span class="eyebrow">Latest-week ranking</span> | |
| <h2>Artifact ranking with progress bars</h2> | |
| <div class="metric-list"> | |
| <div class="metric-row"><span class="caption">timeline</span><div class="meter"><span style="--value:99.0%"></span></div><code>99.0% · 0 overflows</code></div><div class="metric-row"><span class="caption">design-system</span><div class="meter"><span style="--value:98.0%"></span></div><code>98.0% · 0 overflows</code></div><div class="metric-row"><span class="caption">component-variants</span><div class="meter"><span style="--value:96.0%"></span></div><code>96.0% · 1 overflow</code></div> | |
| </div> | |
| <p class="caption">Best: <strong>timeline</strong> at 99.0% with 0 overflow. Worst: <strong>component-variants</strong> at 96.0% with 1 overflow.</p> | |
| </aside> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <article class="callout" role="note"> | |
| <span class="callout-label">Source / caveat</span> | |
| <p class="caption">Source-grounded on local file <code>evals/numeric-data/source.csv</code> with <strong>15 rows</strong> (3 artifacts × 5 weeks). No external validation or statistical intervals were applied, so conclusions are trend-level operational signals rather than a formal significance test.</p> | |
| </article> | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |
Xet Storage Details
- Size:
- 17.3 kB
- Xet hash:
- f0516b709f4d9d0bf8bd622c8e7b75dbc9350f155b8884f2b473c7f5f491fd36
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.