Buckets:
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Render checker — numeric health report</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 ; | |
| position: relative ; | |
| min-width: 0; | |
| padding-inline-start: calc(18px + var(--space-3)); | |
| overflow-wrap: anywhere; | |
| } | |
| .checklist li::before { | |
| content: "✓"; | |
| position: absolute ; | |
| 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 ; | |
| transition-duration: 0.01ms ; | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| } | |
| } | |
| /* 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) ; | |
| } | |
| .split > *, | |
| .section-rail > *, | |
| .sidebar-layout > *, | |
| .chart-panel { | |
| width: 100%; | |
| max-width: 100%; | |
| min-width: 0; | |
| } | |
| }</style> | |
| <style> | |
| .chart-svg svg { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| .metric-row .meter { flex: 1; } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="page stack" data-gap="lg"> | |
| <header class="stack" data-gap="sm"> | |
| <div class="eyebrow">Numeric health report</div> | |
| <h1>Render checker converging fast—97.7% pass rate, 1 overflow across all artifacts</h1> | |
| <p class="lede">Over five weeks the overall static pass rate rose 12 percentage points, overflow count collapsed from 20 to 1, and two of three artifacts hit zero overflows. The trend suggests the new rendering checker is stabilising at a high bar.</p> | |
| </header> | |
| <section class="section stack" data-gap="lg"> | |
| <div class="auto-grid" style="--grid-min: 160px"> | |
| <div class="panel stat-card"> | |
| <div class="stat-value">97.7%</div> | |
| <div class="caption">Latest avg pass rate<br /><span style="color: var(--success)">+1.3pp WoW</span></div> | |
| </div> | |
| <div class="panel stat-card"> | |
| <div class="stat-value">1</div> | |
| <div class="caption">Total overflows<br /><span style="color: var(--success)">−2 from last week</span></div> | |
| </div> | |
| <div class="panel stat-card"> | |
| <div class="stat-value">+12pp</div> | |
| <div class="caption">5-week improvement<br />from 85.7% baseline</div> | |
| </div> | |
| <div class="panel stat-card"> | |
| <div class="stat-value">2 of 3</div> | |
| <div class="caption">Artifacts at zero overflow<br />design-system · timeline</div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section section-rail stack" data-gap="lg"> | |
| <div class="stack" data-gap="lg"> | |
| <div class="section-head"> | |
| <div> | |
| <span class="eyebrow">Latest week · 2026-05-18</span> | |
| <h2>Artifact ranking by static pass rate</h2> | |
| </div> | |
| </div> | |
| <div class="panel"> | |
| <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> | |
| <aside class="reference-panel stack" data-gap="sm"> | |
| <div class="section-head"> | |
| <h3>Latest numbers</h3> | |
| </div> | |
| <div class="numeric-table-wrap"> | |
| <table class="numeric-table"> | |
| <thead> | |
| <tr><th>Artifact</th><th class="metric">Vision</th><th class="metric">RGB Δ</th><th class="metric">Overflows</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td>timeline</td><td class="metric">4.6</td><td class="metric">5.4</td><td class="metric">0</td></tr> | |
| <tr><td>design-system</td><td class="metric">4.4</td><td class="metric">6.7</td><td class="metric">0</td></tr> | |
| <tr><td>component-variants</td><td class="metric">4.1</td><td class="metric">10.9</td><td class="metric">1</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <p class="caption">Vision score 1–5; mean RGB delta lower is better. Source: <code>evals/numeric-data/source.csv</code>.</p> | |
| </aside> | |
| </section> | |
| <section class="section stack" data-gap="lg"> | |
| <div class="panel chart-panel stack"> | |
| <div class="section-head"> | |
| <div> | |
| <span class="eyebrow">Weekly trend</span> | |
| <h2>Pass rate and overflow count across five weeks</h2> | |
| </div> | |
| </div> | |
| <div class="chart-svg"> | |
| <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="431.75952pt" height="345.35952pt" viewBox="0 0 431.75952 345.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 345.35952 | |
| L 431.75952 345.35952 | |
| L 431.75952 0 | |
| L 0 0 | |
| L 0 345.35952 | |
| z | |
| " style="fill: none"/> | |
| </g> | |
| <g id="axes_1"> | |
| <g id="patch_2"> | |
| <path d="M 35.610156 153.969208 | |
| L 428.87952 153.969208 | |
| L 428.87952 18.757969 | |
| L 35.610156 18.757969 | |
| L 35.610156 153.969208 | |
| 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: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="53.486036" y="167.807801" transform="rotate(-0 53.486036 167.807801)">04-20</text> | |
| </g> | |
| </g> | |
| <g id="xtick_2"> | |
| <g id="line2d_2"/> | |
| <g id="text_2"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="142.865437" y="167.807801" transform="rotate(-0 142.865437 167.807801)">04-27</text> | |
| </g> | |
| </g> | |
| <g id="xtick_3"> | |
| <g id="line2d_3"/> | |
| <g id="text_3"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="232.244838" y="167.807801" transform="rotate(-0 232.244838 167.807801)">05-04</text> | |
| </g> | |
| </g> | |
| <g id="xtick_4"> | |
| <g id="line2d_4"/> | |
| <g id="text_4"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="321.624239" y="167.807801" transform="rotate(-0 321.624239 167.807801)">05-11</text> | |
| </g> | |
| </g> | |
| <g id="xtick_5"> | |
| <g id="line2d_5"/> | |
| <g id="text_5"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="411.00364" y="167.807801" transform="rotate(-0 411.00364 167.807801)">05-18</text> | |
| </g> | |
| </g> | |
| </g> | |
| <g id="matplotlib.axis_2"> | |
| <g id="ytick_1"> | |
| <g id="line2d_6"> | |
| <path d="M 35.610156 153.969208 | |
| L 428.87952 153.969208 | |
| " clip-path="url(#p5a32508309)" 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="28.610156" y="157.388504" transform="rotate(-0 28.610156 157.388504)">80%</text> | |
| </g> | |
| </g> | |
| <g id="ytick_2"> | |
| <g id="line2d_8"> | |
| <path d="M 35.610156 123.239381 | |
| L 428.87952 123.239381 | |
| " clip-path="url(#p5a32508309)" 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="28.610156" y="126.658677" transform="rotate(-0 28.610156 126.658677)">85%</text> | |
| </g> | |
| </g> | |
| <g id="ytick_3"> | |
| <g id="line2d_10"> | |
| <path d="M 35.610156 92.509554 | |
| L 428.87952 92.509554 | |
| " clip-path="url(#p5a32508309)" 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="28.610156" y="95.92885" transform="rotate(-0 28.610156 95.92885)">90%</text> | |
| </g> | |
| </g> | |
| <g id="ytick_4"> | |
| <g id="line2d_12"> | |
| <path d="M 35.610156 61.779727 | |
| L 428.87952 61.779727 | |
| " clip-path="url(#p5a32508309)" 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="28.610156" y="65.199023" transform="rotate(-0 28.610156 65.199023)">95%</text> | |
| </g> | |
| </g> | |
| <g id="ytick_5"> | |
| <g id="line2d_14"> | |
| <path d="M 35.610156 31.0499 | |
| L 428.87952 31.0499 | |
| " clip-path="url(#p5a32508309)" 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="28.610156" y="34.469196" transform="rotate(-0 28.610156 34.469196)">100%</text> | |
| </g> | |
| </g> | |
| </g> | |
| <g id="patch_3"> | |
| <path d="M 35.610156 153.969208 | |
| L 35.610156 18.757969 | |
| " style="fill: none; stroke: #d1cfc5; stroke-linejoin: miter; stroke-linecap: square"/> | |
| </g> | |
| <g id="patch_4"> | |
| <path d="M 35.610156 153.969208 | |
| L 428.87952 153.969208 | |
| " style="fill: none; stroke: #d1cfc5; stroke-linejoin: miter; stroke-linecap: square"/> | |
| </g> | |
| <g id="text_11"> | |
| <text style="font-size: 13px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #141413" x="232.244838" y="12.757969" transform="rotate(-0 232.244838 12.757969)">Static pass rate by week</text> | |
| </g> | |
| <g id="line2d_16"> | |
| <path d="M 53.486036 141.677277 | |
| L 142.865437 110.94745 | |
| L 232.244838 86.363588 | |
| L 321.624239 67.925692 | |
| L 411.00364 55.633761 | |
| " clip-path="url(#p5a32508309)" style="fill: none; stroke: #d97757; stroke-width: 1.6; stroke-linecap: square"/> | |
| <defs> | |
| <path id="m8dbc9710f7" 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(#p5a32508309)"> | |
| <use xlink:href="#m8dbc9710f7" x="53.486036" y="141.677277" style="fill: #d97757; stroke: #d97757"/> | |
| <use xlink:href="#m8dbc9710f7" x="142.865437" y="110.94745" style="fill: #d97757; stroke: #d97757"/> | |
| <use xlink:href="#m8dbc9710f7" x="232.244838" y="86.363588" style="fill: #d97757; stroke: #d97757"/> | |
| <use xlink:href="#m8dbc9710f7" x="321.624239" y="67.925692" style="fill: #d97757; stroke: #d97757"/> | |
| <use xlink:href="#m8dbc9710f7" x="411.00364" y="55.633761" style="fill: #d97757; stroke: #d97757"/> | |
| </g> | |
| </g> | |
| <g id="line2d_17"> | |
| <path d="M 53.486036 117.093415 | |
| L 142.865437 86.363588 | |
| L 232.244838 67.925692 | |
| L 321.624239 49.487796 | |
| L 411.00364 43.34183 | |
| " clip-path="url(#p5a32508309)" style="fill: none; stroke: #788c5d; stroke-width: 1.6; stroke-linecap: square"/> | |
| <defs> | |
| <path id="md5e6cfc610" 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(#p5a32508309)"> | |
| <use xlink:href="#md5e6cfc610" x="53.486036" y="117.093415" style="fill: #788c5d; stroke: #788c5d"/> | |
| <use xlink:href="#md5e6cfc610" x="142.865437" y="86.363588" style="fill: #788c5d; stroke: #788c5d"/> | |
| <use xlink:href="#md5e6cfc610" x="232.244838" y="67.925692" style="fill: #788c5d; stroke: #788c5d"/> | |
| <use xlink:href="#md5e6cfc610" x="321.624239" y="49.487796" style="fill: #788c5d; stroke: #788c5d"/> | |
| <use xlink:href="#md5e6cfc610" x="411.00364" y="43.34183" style="fill: #788c5d; stroke: #788c5d"/> | |
| </g> | |
| </g> | |
| <g id="line2d_18"> | |
| <path d="M 53.486036 98.655519 | |
| L 142.865437 74.071657 | |
| L 232.244838 55.633761 | |
| L 321.624239 43.34183 | |
| L 411.00364 37.195865 | |
| " clip-path="url(#p5a32508309)" style="fill: none; stroke: #6a8caf; stroke-width: 1.6; stroke-linecap: square"/> | |
| <defs> | |
| <path id="me8ac5c5266" 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(#p5a32508309)"> | |
| <use xlink:href="#me8ac5c5266" x="53.486036" y="98.655519" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| <use xlink:href="#me8ac5c5266" x="142.865437" y="74.071657" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| <use xlink:href="#me8ac5c5266" x="232.244838" y="55.633761" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| <use xlink:href="#me8ac5c5266" x="321.624239" y="43.34183" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| <use xlink:href="#me8ac5c5266" x="411.00364" y="37.195865" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| </g> | |
| </g> | |
| <g id="line2d_19"> | |
| <path d="M 53.486036 119.14207 | |
| L 142.865437 90.460898 | |
| L 232.244838 69.974347 | |
| L 321.624239 53.585106 | |
| L 411.00364 45.390485 | |
| " clip-path="url(#p5a32508309)" style="fill: none; stroke-dasharray: 7.4,3.2; stroke-dashoffset: 0; stroke: #141413; stroke-width: 2"/> | |
| <defs> | |
| <path id="ma77e037691" d="M -0 2.828427 | |
| L 2.828427 0 | |
| L 0 -2.828427 | |
| L -2.828427 -0 | |
| z | |
| " style="stroke: #141413; stroke-linejoin: miter"/> | |
| </defs> | |
| <g clip-path="url(#p5a32508309)"> | |
| <use xlink:href="#ma77e037691" x="53.486036" y="119.14207" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| <use xlink:href="#ma77e037691" x="142.865437" y="90.460898" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| <use xlink:href="#ma77e037691" x="232.244838" y="69.974347" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| <use xlink:href="#ma77e037691" x="321.624239" y="53.585106" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| <use xlink:href="#ma77e037691" x="411.00364" y="45.390485" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| </g> | |
| </g> | |
| <g id="legend_1"> | |
| <g id="line2d_20"> | |
| <path d="M 262.372489 132.025848 | |
| L 267.622489 132.025848 | |
| L 272.872489 132.025848 | |
| " style="fill: none; stroke: #d97757; stroke-width: 1.6; stroke-linecap: square"/> | |
| <g> | |
| <use xlink:href="#m8dbc9710f7" x="267.622489" y="132.025848" style="fill: #d97757; stroke: #d97757"/> | |
| </g> | |
| </g> | |
| <g id="text_12"> | |
| <text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="276.247489" y="134.650848" transform="rotate(-0 276.247489 134.650848)">component-variants</text> | |
| </g> | |
| <g id="line2d_21"> | |
| <path d="M 262.372489 143.034442 | |
| L 267.622489 143.034442 | |
| L 272.872489 143.034442 | |
| " style="fill: none; stroke: #788c5d; stroke-width: 1.6; stroke-linecap: square"/> | |
| <g> | |
| <use xlink:href="#md5e6cfc610" x="267.622489" y="143.034442" style="fill: #788c5d; stroke: #788c5d"/> | |
| </g> | |
| </g> | |
| <g id="text_13"> | |
| <text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="276.247489" y="145.659442" transform="rotate(-0 276.247489 145.659442)">design-system</text> | |
| </g> | |
| <g id="line2d_22"> | |
| <path d="M 366.584989 132.025848 | |
| L 371.834989 132.025848 | |
| L 377.084989 132.025848 | |
| " style="fill: none; stroke: #6a8caf; stroke-width: 1.6; stroke-linecap: square"/> | |
| <g> | |
| <use xlink:href="#me8ac5c5266" x="371.834989" y="132.025848" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| </g> | |
| </g> | |
| <g id="text_14"> | |
| <text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="380.459989" y="134.650848" transform="rotate(-0 380.459989 134.650848)">timeline</text> | |
| </g> | |
| <g id="line2d_23"> | |
| <path d="M 366.584989 143.034442 | |
| L 371.834989 143.034442 | |
| L 377.084989 143.034442 | |
| " style="fill: none; stroke-dasharray: 7.4,3.2; stroke-dashoffset: 0; stroke: #141413; stroke-width: 2"/> | |
| <g> | |
| <use xlink:href="#ma77e037691" x="371.834989" y="143.034442" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| </g> | |
| </g> | |
| <g id="text_15"> | |
| <text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="380.459989" y="145.659442" transform="rotate(-0 380.459989 145.659442)">overall avg</text> | |
| </g> | |
| </g> | |
| </g> | |
| <g id="axes_2"> | |
| <g id="patch_5"> | |
| <path d="M 35.610156 326.769208 | |
| L 428.87952 326.769208 | |
| L 428.87952 191.557969 | |
| L 35.610156 191.557969 | |
| L 35.610156 326.769208 | |
| z | |
| " style="fill: none"/> | |
| </g> | |
| <g id="matplotlib.axis_3"> | |
| <g id="xtick_6"> | |
| <g id="line2d_24"/> | |
| <g id="text_16"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="53.486036" y="340.607801" transform="rotate(-0 53.486036 340.607801)">04-20</text> | |
| </g> | |
| </g> | |
| <g id="xtick_7"> | |
| <g id="line2d_25"/> | |
| <g id="text_17"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="142.865437" y="340.607801" transform="rotate(-0 142.865437 340.607801)">04-27</text> | |
| </g> | |
| </g> | |
| <g id="xtick_8"> | |
| <g id="line2d_26"/> | |
| <g id="text_18"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="232.244838" y="340.607801" transform="rotate(-0 232.244838 340.607801)">05-04</text> | |
| </g> | |
| </g> | |
| <g id="xtick_9"> | |
| <g id="line2d_27"/> | |
| <g id="text_19"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="321.624239" y="340.607801" transform="rotate(-0 321.624239 340.607801)">05-11</text> | |
| </g> | |
| </g> | |
| <g id="xtick_10"> | |
| <g id="line2d_28"/> | |
| <g id="text_20"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="411.00364" y="340.607801" transform="rotate(-0 411.00364 340.607801)">05-18</text> | |
| </g> | |
| </g> | |
| </g> | |
| <g id="matplotlib.axis_4"> | |
| <g id="ytick_6"> | |
| <g id="line2d_29"> | |
| <path d="M 35.610156 323.62476 | |
| L 428.87952 323.62476 | |
| " clip-path="url(#p8482622766)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/> | |
| </g> | |
| <g id="line2d_30"/> | |
| <g id="text_21"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="28.610156" y="327.044057" transform="rotate(-0 28.610156 327.044057)">0</text> | |
| </g> | |
| </g> | |
| <g id="ytick_7"> | |
| <g id="line2d_31"> | |
| <path d="M 35.610156 292.180286 | |
| L 428.87952 292.180286 | |
| " clip-path="url(#p8482622766)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/> | |
| </g> | |
| <g id="line2d_32"/> | |
| <g id="text_22"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="28.610156" y="295.599583" transform="rotate(-0 28.610156 295.599583)">5</text> | |
| </g> | |
| </g> | |
| <g id="ytick_8"> | |
| <g id="line2d_33"> | |
| <path d="M 35.610156 260.735812 | |
| L 428.87952 260.735812 | |
| " clip-path="url(#p8482622766)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/> | |
| </g> | |
| <g id="line2d_34"/> | |
| <g id="text_23"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="28.610156" y="264.155109" transform="rotate(-0 28.610156 264.155109)">10</text> | |
| </g> | |
| </g> | |
| <g id="ytick_9"> | |
| <g id="line2d_35"> | |
| <path d="M 35.610156 229.291338 | |
| L 428.87952 229.291338 | |
| " clip-path="url(#p8482622766)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/> | |
| </g> | |
| <g id="line2d_36"/> | |
| <g id="text_24"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="28.610156" y="232.710635" transform="rotate(-0 28.610156 232.710635)">15</text> | |
| </g> | |
| </g> | |
| <g id="ytick_10"> | |
| <g id="line2d_37"> | |
| <path d="M 35.610156 197.846864 | |
| L 428.87952 197.846864 | |
| " clip-path="url(#p8482622766)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8; stroke-linecap: square"/> | |
| </g> | |
| <g id="line2d_38"/> | |
| <g id="text_25"> | |
| <text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="28.610156" y="201.26616" transform="rotate(-0 28.610156 201.26616)">20</text> | |
| </g> | |
| </g> | |
| </g> | |
| <g id="patch_6"> | |
| <path d="M 35.610156 326.769208 | |
| L 35.610156 191.557969 | |
| " style="fill: none; stroke: #d1cfc5; stroke-linejoin: miter; stroke-linecap: square"/> | |
| </g> | |
| <g id="patch_7"> | |
| <path d="M 35.610156 326.769208 | |
| L 428.87952 326.769208 | |
| " style="fill: none; stroke: #d1cfc5; stroke-linejoin: miter; stroke-linecap: square"/> | |
| </g> | |
| <g id="text_26"> | |
| <text style="font-size: 13px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #141413" x="232.244838" y="185.557969" transform="rotate(-0 232.244838 185.557969)">Overflow count by week</text> | |
| </g> | |
| <g id="line2d_39"> | |
| <path d="M 53.486036 267.024707 | |
| L 142.865437 285.891391 | |
| L 232.244838 298.469181 | |
| L 321.624239 311.04697 | |
| L 411.00364 317.335865 | |
| " clip-path="url(#p8482622766)" style="fill: none; stroke: #d97757; stroke-width: 1.6; stroke-linecap: square"/> | |
| <g clip-path="url(#p8482622766)"> | |
| <use xlink:href="#m8dbc9710f7" x="53.486036" y="267.024707" style="fill: #d97757; stroke: #d97757"/> | |
| <use xlink:href="#m8dbc9710f7" x="142.865437" y="285.891391" style="fill: #d97757; stroke: #d97757"/> | |
| <use xlink:href="#m8dbc9710f7" x="232.244838" y="298.469181" style="fill: #d97757; stroke: #d97757"/> | |
| <use xlink:href="#m8dbc9710f7" x="321.624239" y="311.04697" style="fill: #d97757; stroke: #d97757"/> | |
| <use xlink:href="#m8dbc9710f7" x="411.00364" y="317.335865" style="fill: #d97757; stroke: #d97757"/> | |
| </g> | |
| </g> | |
| <g id="line2d_40"> | |
| <path d="M 53.486036 279.602496 | |
| L 142.865437 292.180286 | |
| L 232.244838 304.758076 | |
| L 321.624239 317.335865 | |
| L 411.00364 323.62476 | |
| " clip-path="url(#p8482622766)" style="fill: none; stroke: #788c5d; stroke-width: 1.6; stroke-linecap: square"/> | |
| <g clip-path="url(#p8482622766)"> | |
| <use xlink:href="#md5e6cfc610" x="53.486036" y="279.602496" style="fill: #788c5d; stroke: #788c5d"/> | |
| <use xlink:href="#md5e6cfc610" x="142.865437" y="292.180286" style="fill: #788c5d; stroke: #788c5d"/> | |
| <use xlink:href="#md5e6cfc610" x="232.244838" y="304.758076" style="fill: #788c5d; stroke: #788c5d"/> | |
| <use xlink:href="#md5e6cfc610" x="321.624239" y="317.335865" style="fill: #788c5d; stroke: #788c5d"/> | |
| <use xlink:href="#md5e6cfc610" x="411.00364" y="323.62476" style="fill: #788c5d; stroke: #788c5d"/> | |
| </g> | |
| </g> | |
| <g id="line2d_41"> | |
| <path d="M 53.486036 298.469181 | |
| L 142.865437 311.04697 | |
| L 232.244838 317.335865 | |
| L 321.624239 323.62476 | |
| L 411.00364 323.62476 | |
| " clip-path="url(#p8482622766)" style="fill: none; stroke: #6a8caf; stroke-width: 1.6; stroke-linecap: square"/> | |
| <g clip-path="url(#p8482622766)"> | |
| <use xlink:href="#me8ac5c5266" x="53.486036" y="298.469181" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| <use xlink:href="#me8ac5c5266" x="142.865437" y="311.04697" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| <use xlink:href="#me8ac5c5266" x="232.244838" y="317.335865" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| <use xlink:href="#me8ac5c5266" x="321.624239" y="323.62476" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| <use xlink:href="#me8ac5c5266" x="411.00364" y="323.62476" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| </g> | |
| </g> | |
| <g id="line2d_42"> | |
| <path d="M 53.486036 197.846864 | |
| L 142.865437 241.869127 | |
| L 232.244838 273.313601 | |
| L 321.624239 304.758076 | |
| L 411.00364 317.335865 | |
| " clip-path="url(#p8482622766)" style="fill: none; stroke-dasharray: 7.4,3.2; stroke-dashoffset: 0; stroke: #141413; stroke-width: 2"/> | |
| <g clip-path="url(#p8482622766)"> | |
| <use xlink:href="#ma77e037691" x="53.486036" y="197.846864" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| <use xlink:href="#ma77e037691" x="142.865437" y="241.869127" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| <use xlink:href="#ma77e037691" x="232.244838" y="273.313601" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| <use xlink:href="#ma77e037691" x="321.624239" y="304.758076" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| <use xlink:href="#ma77e037691" x="411.00364" y="317.335865" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| </g> | |
| </g> | |
| <g id="legend_2"> | |
| <g id="line2d_43"> | |
| <path d="M 273.562723 201.381797 | |
| L 278.812723 201.381797 | |
| L 284.062723 201.381797 | |
| " style="fill: none; stroke: #d97757; stroke-width: 1.6; stroke-linecap: square"/> | |
| <g> | |
| <use xlink:href="#m8dbc9710f7" x="278.812723" y="201.381797" style="fill: #d97757; stroke: #d97757"/> | |
| </g> | |
| </g> | |
| <g id="text_27"> | |
| <text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="287.437723" y="204.006797" transform="rotate(-0 287.437723 204.006797)">component-variants</text> | |
| </g> | |
| <g id="line2d_44"> | |
| <path d="M 273.562723 212.390391 | |
| L 278.812723 212.390391 | |
| L 284.062723 212.390391 | |
| " style="fill: none; stroke: #788c5d; stroke-width: 1.6; stroke-linecap: square"/> | |
| <g> | |
| <use xlink:href="#md5e6cfc610" x="278.812723" y="212.390391" style="fill: #788c5d; stroke: #788c5d"/> | |
| </g> | |
| </g> | |
| <g id="text_28"> | |
| <text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="287.437723" y="215.015391" transform="rotate(-0 287.437723 215.015391)">design-system</text> | |
| </g> | |
| <g id="line2d_45"> | |
| <path d="M 377.775223 201.381797 | |
| L 383.025223 201.381797 | |
| L 388.275223 201.381797 | |
| " style="fill: none; stroke: #6a8caf; stroke-width: 1.6; stroke-linecap: square"/> | |
| <g> | |
| <use xlink:href="#me8ac5c5266" x="383.025223" y="201.381797" style="fill: #6a8caf; stroke: #6a8caf"/> | |
| </g> | |
| </g> | |
| <g id="text_29"> | |
| <text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="391.650223" y="204.006797" transform="rotate(-0 391.650223 204.006797)">timeline</text> | |
| </g> | |
| <g id="line2d_46"> | |
| <path d="M 377.775223 212.390391 | |
| L 383.025223 212.390391 | |
| L 388.275223 212.390391 | |
| " style="fill: none; stroke-dasharray: 7.4,3.2; stroke-dashoffset: 0; stroke: #141413; stroke-width: 2"/> | |
| <g> | |
| <use xlink:href="#ma77e037691" x="383.025223" y="212.390391" style="fill: #141413; stroke: #141413; stroke-linejoin: miter"/> | |
| </g> | |
| </g> | |
| <g id="text_30"> | |
| <text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="391.650223" y="215.015391" transform="rotate(-0 391.650223 215.015391)">total</text> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| <defs> | |
| <clipPath id="p5a32508309"> | |
| <rect x="35.610156" y="18.757969" width="393.269364" height="135.211239"/> | |
| </clipPath> | |
| <clipPath id="p8482622766"> | |
| <rect x="35.610156" y="191.557969" width="393.269364" height="135.211239"/> | |
| </clipPath> | |
| </defs> | |
| </svg> | |
| </div> | |
| <div class="section-rail stack" data-gap="lg"> | |
| <div class="stack" data-gap="sm"> | |
| <div class="section-head"> | |
| <h3>Weekly averages (all artifacts)</h3> | |
| </div> | |
| <div class="numeric-table-wrap"> | |
| <table class="numeric-table"> | |
| <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>04-20</td><td class="metric">0.857</td><td class="metric">20</td><td class="metric">—</td></tr> | |
| <tr><td>04-27</td><td class="metric">0.903</td><td class="metric">13</td><td class="metric">+0.047</td></tr> | |
| <tr><td>05-04</td><td class="metric">0.937</td><td class="metric">8</td><td class="metric">+0.033</td></tr> | |
| <tr><td>05-11</td><td class="metric">0.963</td><td class="metric">3</td><td class="metric">+0.027</td></tr> | |
| <tr><td>05-18</td><td class="metric">0.977</td><td class="metric">1</td><td class="metric">+0.013</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <p class="caption">Overall pass rate rose 12pp from baseline; overflows dropped 95% (20→1). Gains are still positive but decelerating as ceilings are approached.</p> | |
| </div> | |
| <aside class="reference-panel stack" data-gap="sm"> | |
| <div class="section-head"> | |
| <h3>Per-artifact detail (latest)</h3> | |
| </div> | |
| <div class="numeric-table-wrap"> | |
| <table class="numeric-table"> | |
| <thead> | |
| <tr><th>Artifact</th><th class="metric">Palette close</th><th class="metric">RGB delta</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td>timeline</td><td class="metric">0.99</td><td class="metric">5.4</td></tr> | |
| <tr><td>design-system</td><td class="metric">0.98</td><td class="metric">6.7</td></tr> | |
| <tr><td>component-variants</td><td class="metric">0.96</td><td class="metric">10.9</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <p class="caption">Palette closeness and mean RGB delta provide orthogonal quality signals beyond pass/fail. All three artifacts show strong colour fidelity.</p> | |
| </aside> | |
| </div> | |
| <p class="chart-caption">Source: <code>evals/numeric-data/source.csv</code> (15 rows, 5 weeks × 3 artifacts). Chart generated with Matplotlib via <code>skill/scripts/birch_mpl.py</code>.</p> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <div class="panel stack" data-gap="sm"> | |
| <div class="section-head"> | |
| <h2>Caveats</h2> | |
| </div> | |
| <ul class="plain-list"> | |
| <li>Dataset covers 5 weekly snapshots for 3 artifacts; confidence grows with more weeks of data at the ceiling.</li> | |
| <li>Component-variants is the only artifact still producing overflows (1 in latest week). Its pass rate (0.96) is the lowest, suggesting a longer tail to close.</li> | |
| <li>Palette closeness and RGB delta provide supplementary fidelity metrics but do not directly gate adoption decisions.</li> | |
| <li>All numbers computed directly from <code>evals/numeric-data/source.csv</code> using local Python; no external data sources used.</li> | |
| </ul> | |
| </div> | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |
Xet Storage Details
- Size:
- 62.5 kB
- Xet hash:
- a93a245a8895104c6e4606ce9c1f42c70a72e3c14d1d0426d62210d08ed867f1
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.