Buckets:
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Candidate B Seed Promotion · Birch Benchmark</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; } | |
| .kpi-strip { --grid-min: 150px; } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="page stack" data-gap="lg"> | |
| <header class="stack" data-gap="sm"> | |
| <div class="eyebrow">Benchmark comparison · 2026-05-20</div> | |
| <h1>Promote Candidate B as next GEPA seed</h1> | |
| <p class="lede">Candidate B improves final score by +0.048 (0.9175 → 0.9655) and reduces checker warnings from 5 to 2, with an acceptable cost increase of $0.22 (+11.5%). Source: <code>evals/benchmark-comparison/source.json</code>.</p> | |
| </header> | |
| <!-- KPI cards --> | |
| <section class="section stack" data-gap="md"> | |
| <div class="section-head"> | |
| <div> | |
| <span class="eyebrow">Headline metrics</span> | |
| <h2>KPI comparison</h2> | |
| </div> | |
| </div> | |
| <div class="auto-grid kpi-strip"> | |
| <div class="stat-card"> | |
| <span class="stat-value">4/4</span> | |
| <span class="caption">Pass rate — both seeds</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-value">0.9655</span> | |
| <span class="caption">Final score · Candidate B</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-value">2</span> | |
| <span class="caption">Checker warnings · B vs 5</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-value">489 s</span> | |
| <span class="caption">Wall time · +77 s (+18.7%)</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-value">124.7k</span> | |
| <span class="caption">Total tokens · +8.7k (+7.5%)</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-value">$2.14</span> | |
| <span class="caption">Est. cost · +$0.22 (+11.5%)</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Component score breakdown --> | |
| <section class="section stack" data-gap="md"> | |
| <div class="section-head"> | |
| <div> | |
| <span class="eyebrow">Score decomposition</span> | |
| <h2>Component scores with deltas</h2> | |
| </div> | |
| </div> | |
| <div class="panel chart-panel stack"> | |
| <div class="chart-svg"> | |
| <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="359.75952pt" height="201.35952pt" viewBox="0 0 359.75952 201.35952" xmlns="http://www.w3.org/2000/svg" version="1.1"> | |
| <defs> | |
| <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style> | |
| </defs> | |
| <g id="figure_1"> | |
| <g id="patch_1"> | |
| <path d="M 0 201.35952 L 359.75952 201.35952 L 359.75952 0 L 0 0 L 0 201.35952 z" style="fill: none"/> | |
| </g> | |
| <g id="axes_1"> | |
| <g id="patch_2"> | |
| <path d="M 37.870938 182.769207 L 356.87952 182.769207 L 356.87952 2.88 L 37.870938 2.88 L 37.870938 182.769207 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="77.866519" y="196.607801">Generation</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="157.538992" y="196.607801">Checker</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="237.211465" y="196.607801">Hygiene</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="316.883938" y="196.607801">Final</text></g></g> | |
| </g> | |
| <g id="matplotlib.axis_2"> | |
| <g id="ytick_1"><g id="line2d_5"><path d="M 37.870938 182.769207 L 356.87952 182.769207" clip-path="url(#pc8b6868ad7)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_6"/><g id="text_5"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="30.870938" y="186.188504">0.0</text></g></g> | |
| <g id="ytick_2"><g id="line2d_7"><path d="M 37.870938 150.062079 L 356.87952 150.062079" clip-path="url(#pc8b6868ad7)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_8"/><g id="text_6"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="30.870938" y="153.481376">0.2</text></g></g> | |
| <g id="ytick_3"><g id="line2d_9"><path d="M 37.870938 117.35495 L 356.87952 117.35495" clip-path="url(#pc8b6868ad7)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_10"/><g id="text_7"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="30.870938" y="120.774247">0.4</text></g></g> | |
| <g id="ytick_4"><g id="line2d_11"><path d="M 37.870938 84.647822 L 356.87952 84.647822" clip-path="url(#pc8b6868ad7)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_12"/><g id="text_8"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="30.870938" y="88.067118">0.6</text></g></g> | |
| <g id="ytick_5"><g id="line2d_13"><path d="M 37.870938 51.940693 L 356.87952 51.940693" clip-path="url(#pc8b6868ad7)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_14"/><g id="text_9"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="30.870938" y="55.35999">0.8</text></g></g> | |
| <g id="ytick_6"><g id="line2d_15"><path d="M 37.870938 19.233564 L 356.87952 19.233564" clip-path="url(#pc8b6868ad7)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_16"/><g id="text_10"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="30.870938" y="22.652861">1.0</text></g></g> | |
| <g id="text_11"><text style="font-size: 10px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="10.478438" y="92.824604" transform="rotate(-90 10.478438 92.824604)">Score</text></g> | |
| </g> | |
| <g id="patch_3"><path d="M 37.870938 182.769207 L 37.870938 2.88" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_4"><path d="M 37.870938 182.769207 L 356.87952 182.769207" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_5"><path d="M 52.371328 182.769207 L 77.866519 182.769207 L 77.866519 19.233564 L 52.371328 19.233564 z" clip-path="url(#pc8b6868ad7)" style="fill: #d97757"/></g> | |
| <g id="patch_6"><path d="M 132.043801 182.769207 L 157.538992 182.769207 L 157.538992 43.763911 L 132.043801 43.763911 z" clip-path="url(#pc8b6868ad7)" style="fill: #d97757"/></g> | |
| <g id="patch_7"><path d="M 211.716274 182.769207 L 237.211465 182.769207 L 237.211465 19.233564 L 211.716274 19.233564 z" clip-path="url(#pc8b6868ad7)" style="fill: #d97757"/></g> | |
| <g id="patch_8"><path d="M 291.388747 182.769207 L 316.883938 182.769207 L 316.883938 32.725255 L 291.388747 32.725255 z" clip-path="url(#pc8b6868ad7)" style="fill: #d97757"/></g> | |
| <g id="patch_9"><path d="M 77.866519 182.769207 L 103.36171 182.769207 L 103.36171 19.233564 L 77.866519 19.233564 z" clip-path="url(#pc8b6868ad7)" style="fill: #788c5d"/></g> | |
| <g id="patch_10"><path d="M 157.538992 182.769207 L 183.034184 182.769207 L 183.034184 29.045703 L 157.538992 29.045703 z" clip-path="url(#pc8b6868ad7)" style="fill: #788c5d"/></g> | |
| <g id="patch_11"><path d="M 237.211465 182.769207 L 262.706657 182.769207 L 262.706657 20.868921 L 237.211465 20.868921 z" clip-path="url(#pc8b6868ad7)" style="fill: #788c5d"/></g> | |
| <g id="patch_12"><path d="M 316.883938 182.769207 L 342.37913 182.769207 L 342.37913 24.875544 L 316.883938 24.875544 z" clip-path="url(#pc8b6868ad7)" style="fill: #788c5d"/></g> | |
| <g id="text_12"><text style="font-weight: 700; font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="77.866519" y="17.271137">0.000</text></g> | |
| <g id="text_13"><text style="font-weight: 700; font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="157.538992" y="27.083275">+0.090</text></g> | |
| <g id="text_14"><text style="font-weight: 700; font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="237.211465" y="17.271137">−0.010</text></g> | |
| <g id="text_15"><text style="font-weight: 700; font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="316.883938" y="22.913116">+0.048</text></g> | |
| <g id="legend_1"> | |
| <g id="patch_13"><path d="M 285.94827 162.162958 L 297.14827 162.162958 L 297.14827 156.562958 L 285.94827 156.562958 z" style="fill: #d97757"/></g> | |
| <g id="text_16"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="300.74827" y="162.162958">Seed A</text></g> | |
| <g id="patch_14"><path d="M 285.94827 173.905458 L 297.14827 173.905458 L 297.14827 168.305458 L 285.94827 168.305458 z" style="fill: #788c5d"/></g> | |
| <g id="text_17"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="300.74827" y="173.905458">Candidate B</text></g> | |
| </g> | |
| </g> | |
| </g> | |
| <defs><clipPath id="pc8b6868ad7"><rect x="37.870938" y="2.88" width="319.008582" height="179.889207"/></clipPath></defs> | |
| </svg> | |
| </div> | |
| <div class="chart-caption">Component scores: Checker score drives nearly all of the +0.048 improvement (warnings fell from5 to2). Hygiene dipped by 0.01 (likely a minor compliance delta). Generation remained perfect at 1.0 for both seeds.</div> | |
| </div> | |
| <div class="numeric-table-wrap"> | |
| <table class="numeric-table"> | |
| <thead><tr><th>Component</th><th class="metric">Seed A</th><th class="metric">Candidate B</th><th class="metric">Δ</th></tr></thead> | |
| <tbody> | |
| <tr><td>Generation</td><td class="metric">1.000</td><td class="metric">1.000</td><td class="metric">0.000</td></tr> | |
| <tr><td>Checker</td><td class="metric">0.850</td><td class="metric">0.940</td><td class="metric">+0.090</td></tr> | |
| <tr><td>Hygiene</td><td class="metric">1.000</td><td class="metric">0.990</td><td class="metric">−0.010</td></tr> | |
| <tr><td><strong>Final</strong></td><td class="metric"><strong>0.9175</strong></td><td class="metric"><strong>0.9655</strong></td><td class="metric"><strong>+0.048</strong></td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- Per-eval comparison --> | |
| <section class="section-rail" data-gap="lg"> | |
| <div class="stack" data-gap="md"> | |
| <div class="section-head"> | |
| <div> | |
| <span class="eyebrow">Per-eval drill-down</span> | |
| <h2>Score by evaluation</h2> | |
| </div> | |
| </div> | |
| <div class="panel chart-panel stack"> | |
| <div class="chart-svg"> | |
| <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="431.75952pt" height="215.75952pt" viewBox="0 0 431.75952 215.75952" 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 215.75952 L 431.75952 215.75952 L 431.75952 0 L 0 0 L 0 215.75952 z" style="fill: none"/></g> | |
| <g id="axes_1"> | |
| <g id="patch_2"><path d="M 43.597188 197.169207 L 428.87952 197.169207 L 428.87952 2.88 L 43.597188 2.88 L 43.597188 197.169207 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="91.901816" y="211.007801">numeric-data</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="188.126174" y="211.007801">code-review</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="284.350533" y="211.007801">module-explainer</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="380.574892" y="211.007801">impl-plan</text></g></g> | |
| </g> | |
| <g id="matplotlib.axis_2"> | |
| <g id="ytick_1"><g id="line2d_5"><path d="M 43.597188 197.169208 L 428.87952 197.169208" clip-path="url(#p66ddff1c71)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_6"/><g id="text_5"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="200.588504">0.88</text></g></g> | |
| <g id="ytick_2"><g id="line2d_7"><path d="M 43.597188 167.27856 L 428.87952 167.27856" clip-path="url(#p66ddff1c71)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_8"/><g id="text_6"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="170.697857">0.90</text></g></g> | |
| <g id="ytick_3"><g id="line2d_9"><path d="M 43.597188 137.387913 L 428.87952 137.387913" clip-path="url(#p66ddff1c71)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_10"/><g id="text_7"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="140.80721">0.92</text></g></g> | |
| <g id="ytick_4"><g id="line2d_11"><path d="M 43.597188 107.497266 L 428.87952 107.497266" clip-path="url(#p66ddff1c71)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_12"/><g id="text_8"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="110.916562">0.94</text></g></g> | |
| <g id="ytick_5"><g id="line2d_13"><path d="M 43.597188 77.606618 L 428.87952 77.606618" clip-path="url(#p66ddff1c71)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_14"/><g id="text_9"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="81.025915">0.96</text></g></g> | |
| <g id="ytick_6"><g id="line2d_15"><path d="M 43.597188 47.715971 L 428.87952 47.715971" clip-path="url(#p66ddff1c71)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_16"/><g id="text_10"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="51.135268">0.98</text></g></g> | |
| <g id="ytick_7"><g id="line2d_17"><path d="M 43.597188 17.825324 L 428.87952 17.825324" clip-path="url(#p66ddff1c71)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_18"/><g id="text_11"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="21.244621">1.00</text></g></g> | |
| <g id="text_12"><text style="font-size: 10px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="10.478438" y="100.024604" transform="rotate(-90 10.478438 100.024604)">Score</text></g> | |
| </g> | |
| <g id="patch_3"><path d="M 43.597188 197.169208 L 43.597188 2.88" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_4"><path d="M 43.597188 197.169207 L 428.87952 197.169207" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_5"><path d="M 61.110021 1512.357689 L 91.901816 1512.357689 L 91.901816 122.442589 L 61.110021 122.442589 z" clip-path="url(#p66ddff1c71)" style="fill: #d97757"/></g> | |
| <g id="patch_6"><path d="M 157.33438 1512.357689 L 188.126174 1512.357689 L 188.126174 152.333237 L 157.33438 152.333237 z" clip-path="url(#p66ddff1c71)" style="fill: #d97757"/></g> | |
| <g id="patch_7"><path d="M 253.558738 1512.357689 L 284.350533 1512.357689 L 284.350533 129.915251 L 253.558738 129.915251 z" clip-path="url(#p66ddff1c71)" style="fill: #d97757"/></g> | |
| <g id="patch_8"><path d="M 349.783097 1512.357689 L 380.574892 1512.357689 L 380.574892 159.805898 L 349.783097 159.805898 z" clip-path="url(#p66ddff1c71)" style="fill: #d97757"/></g> | |
| <g id="patch_9"><path d="M 91.901816 1512.357689 L 122.69361 1512.357689 L 122.69361 62.661295 L 91.901816 62.661295 z" clip-path="url(#p66ddff1c71)" style="fill: #788c5d"/></g> | |
| <g id="patch_10"><path d="M 188.126174 1512.357689 L 218.917969 1512.357689 L 218.917969 85.07928 L 188.126174 85.07928 z" clip-path="url(#p66ddff1c71)" style="fill: #788c5d"/></g> | |
| <g id="patch_11"><path d="M 284.350533 1512.357689 L 315.142328 1512.357689 L 315.142328 101.519136 L 284.350533 101.519136 z" clip-path="url(#p66ddff1c71)" style="fill: #788c5d"/></g> | |
| <g id="patch_12"><path d="M 380.574892 1512.357689 L 411.366687 1512.357689 L 411.366687 28.28705 L 380.574892 28.28705 z" clip-path="url(#p66ddff1c71)" style="fill: #788c5d"/></g> | |
| <g id="text_13"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="76.505918" y="116.295242">0.930</text></g> | |
| <g id="text_14"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="172.730277" y="146.185889">0.910</text></g> | |
| <g id="text_15"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="268.954636" y="123.767904">0.925</text></g> | |
| <g id="text_16"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="365.178994" y="153.658551">0.905</text></g> | |
| <g id="text_17"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="107.297713" y="56.513948">0.970</text></g> | |
| <g id="text_18"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="203.522072" y="78.931933">0.955</text></g> | |
| <g id="text_19"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="299.746431" y="95.371789">0.944</text></g> | |
| <g id="text_20"><text style="font-size: 8px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="395.970789" y="22.139703">0.993</text></g> | |
| <g id="legend_1"> | |
| <g id="patch_13"><path d="M 353.515067 175.275067 L 365.415067 175.275067 L 365.415067 169.325067 L 353.515067 169.325067 z" style="fill: #d97757"/></g> | |
| <g id="text_21"><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="369.240067" y="175.275067">Seed A</text></g> | |
| <g id="patch_14"><path d="M 353.515067 187.751473 L 365.415067 187.751473 L 365.415067 181.801473 L 353.515067 181.801473 z" style="fill: #788c5d"/></g> | |
| <g id="text_22"><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="369.240067" y="187.751473">Candidate B</text></g> | |
| </g> | |
| </g> | |
| </g> | |
| <defs><clipPath id="p66ddff1c71"><rect x="43.597188" y="2.88" width="385.282332" height="194.289208"/></clipPath></defs> | |
| </svg> | |
| </div> | |
| <div class="chart-caption">All four evals improved. <code>implementation-plan</code> saw the largest gain (+0.088); <code>module-explainer</code> the smallest (+0.019).</div> | |
| </div> | |
| <div class="numeric-table-wrap"> | |
| <table class="numeric-table"> | |
| <thead><tr><th>Eval</th><th class="metric">Seed A</th><th class="metric">Candidate B</th><th class="metric">Δ</th><th class="metric">Warn Δ</th></tr></thead> | |
| <tbody> | |
| <tr><td>numeric-data</td><td class="metric">0.930</td><td class="metric">0.970</td><td class="metric">+0.040</td><td class="metric">2 → 1</td></tr> | |
| <tr><td>code-review</td><td class="metric">0.910</td><td class="metric">0.955</td><td class="metric">+0.045</td><td class="metric">1 → 0</td></tr> | |
| <tr><td>module-explainer</td><td class="metric">0.925</td><td class="metric">0.944</td><td class="metric">+0.019</td><td class="metric">1 → 1</td></tr> | |
| <tr><td>implementation-plan</td><td class="metric">0.905</td><td class="metric">0.993</td><td class="metric">+0.088</td><td class="metric">1 → 0</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <aside class="reference-panel"> | |
| <div class="stack" data-gap="sm"> | |
| <div class="eyebrow">Regressions observed</div> | |
| <ul class="plain-list"> | |
| <li>Wall time increased on every eval (+17–21 s each).</li> | |
| <li>Candidate B uses more SVG text in numeric-data (+19 s).</li> | |
| <li><code>module-explainer</code> mobile flow caption still dense (1 warning persists).</li> | |
| <li>Hygiene score dipped 0.01 — minor compliance artifact.</li> | |
| </ul> | |
| <div class="eyebrow">Improvements</div> | |
| <ul class="plain-list"> | |
| <li>Warnings eliminated from <code>code-review</code> and <code>implementation-plan</code>.</li> | |
| <li>Plan quality improved most (+0.088); likely better structure.</li> | |
| <li>Runtime path in module-explainer improved per regression note.</li> | |
| <li>Code-review still needs manual diff-wrapping inspection.</li> | |
| </ul> | |
| </div> | |
| </aside> | |
| </section> | |
| <!-- Warnings and Wall time --> | |
| <section class="section stack" data-gap="md"> | |
| <div class="section-head"> | |
| <div> | |
| <span class="eyebrow">Operational comparison</span> | |
| <h2>Warnings and wall time</h2> | |
| </div> | |
| </div> | |
| <div class="panel chart-panel stack"> | |
| <div class="chart-svg"> | |
| <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="503.75952pt" height="215.75952pt" viewBox="0 0 503.75952 215.75952" 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 215.75952 L 503.75952 215.75952 L 503.75952 0 L 0 0 L 0 215.75952 z" style="fill: none"/></g> | |
| <g id="axes_1"> | |
| <g id="patch_2"><path d="M 29.284375 198.620926 L 243.15327 198.620926 L 243.15327 2.88 L 29.284375 2.88 L 29.284375 198.620926 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: 7.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="56.098108" y="211.319754">numeric-data</text></g></g> | |
| <g id="xtick_2"><g id="line2d_2"/><g id="text_2"><text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="109.511918" y="211.319754">code-review</text></g></g> | |
| <g id="xtick_3"><g id="line2d_3"/><g id="text_3"><text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="162.925727" y="211.319754">module-explainer</text></g></g> | |
| <g id="xtick_4"><g id="line2d_4"/><g id="text_4"><text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="216.339537" y="211.319754">impl-plan</text></g></g> | |
| </g> | |
| <g id="matplotlib.axis_2"> | |
| <g id="ytick_1"><g id="line2d_5"><path d="M 29.284375 198.620926 L 243.15327 198.620926" clip-path="url(#p6a6301ffdc)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_6"/><g id="text_5"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="22.284375" y="202.040223">0</text></g></g> | |
| <g id="ytick_2"><g id="line2d_7"><path d="M 29.284375 123.335955 L 243.15327 123.335955" clip-path="url(#p6a6301ffdc)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_8"/><g id="text_6"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="22.284375" y="126.755251">1</text></g></g> | |
| <g id="ytick_3"><g id="line2d_9"><path d="M 29.284375 48.050983 L 243.15327 48.050983" clip-path="url(#p6a6301ffdc)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_10"/><g id="text_7"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="22.284375" y="51.47028">2</text></g></g> | |
| <g id="text_8"><text style="font-size: 10px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="10.478438" y="100.750463" transform="rotate(-90 10.478438 100.750463)">Warnings</text></g> | |
| </g> | |
| <g id="patch_3"><path d="M 29.284375 198.620926 L 29.284375 2.88" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_4"><path d="M 29.284375 198.620926 L 243.15327 198.620926" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_5"><path d="M 39.005688 198.620926 L 56.098108 198.620926 L 56.098108 48.050983 L 39.005688 48.050983 z" clip-path="url(#p6a6301ffdc)" style="fill: #b04a3f"/></g> | |
| <g id="patch_6"><path d="M 92.419498 198.620926 L 109.511918 198.620926 L 109.511918 123.335955 L 92.419498 123.335955 z" clip-path="url(#p6a6301ffdc)" style="fill: #b04a3f"/></g> | |
| <g id="patch_7"><path d="M 145.833308 198.620926 L 162.925727 198.620926 L 162.925727 123.335955 L 145.833308 123.335955 z" clip-path="url(#p6a6301ffdc)" style="fill: #b04a3f"/></g> | |
| <g id="patch_8"><path d="M 199.247118 198.620926 L 216.339537 198.620926 L 216.339537 123.335955 L 199.247118 123.335955 z" clip-path="url(#p6a6301ffdc)" style="fill: #b04a3f"/></g> | |
| <g id="patch_9"><path d="M 56.098108 198.620926 L 73.190527 198.620926 L 73.190527 123.335955 L 56.098108 123.335955 z" clip-path="url(#p6a6301ffdc)" style="fill: #788c5d"/></g> | |
| <g id="patch_10"><path d="M 109.511918 198.620926 L 126.604337 198.620926 L 126.604337 198.620926 L 109.511918 198.620926 z" clip-path="url(#p6a6301ffdc)" style="fill: #788c5d"/></g> | |
| <g id="patch_11"><path d="M 162.925727 198.620926 L 180.018147 198.620926 L 180.018147 123.335955 L 162.925727 123.335955 z" clip-path="url(#p6a6301ffdc)" style="fill: #788c5d"/></g> | |
| <g id="patch_12"><path d="M 216.339537 198.620926 L 233.431957 198.620926 L 233.431957 198.620926 L 216.339537 198.620926 z" clip-path="url(#p6a6301ffdc)" style="fill: #788c5d"/></g> | |
| <g id="legend_1"> | |
| <g id="patch_13"><path d="M 153.358207 14.166937 L 162.878208 14.166937 L 162.878208 9.406937 L 153.358207 9.406937 z" style="fill: #b04a3f"/></g> | |
| <g id="text_9"><text style="font-size: 6.8px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="165.938208" y="14.166937">Seed A (5 total)</text></g> | |
| <g id="patch_14"><path d="M 153.358207 24.148062 L 162.878208 24.148062 L 162.878208 19.388062 L 153.358207 19.388062 z" style="fill: #788c5d"/></g> | |
| <g id="text_10"><text style="font-size: 6.8px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="165.938208" y="24.148062">Candidate B (2 total)</text></g> | |
| </g> | |
| </g> | |
| <g id="axes_2"> | |
| <g id="patch_15"><path d="M 287.010625 198.620926 L 500.87952 198.620926 L 500.87952 2.88 L 287.010625 2.88 L 287.010625 198.620926 z" style="fill: none"/></g> | |
| <g id="matplotlib.axis_3"> | |
| <g id="xtick_5"><g id="line2d_11"/><g id="text_11"><text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="313.824358" y="211.319754">numeric-data</text></g></g> | |
| <g id="xtick_6"><g id="line2d_12"/><g id="text_12"><text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="367.238168" y="211.319754">code-review</text></g></g> | |
| <g id="xtick_7"><g id="line2d_13"/><g id="text_13"><text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="420.651977" y="211.319754">module-explainer</text></g></g> | |
| <g id="xtick_8"><g id="line2d_14"/><g id="text_14"><text style="font-size: 7.5px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="474.065787" y="211.319754">impl-plan</text></g></g> | |
| </g> | |
| <g id="matplotlib.axis_4"> | |
| <g id="ytick_4"><g id="line2d_15"><path d="M 287.010625 198.620926 L 500.87952 198.620926" clip-path="url(#p47d23c684d)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_16"/><g id="text_15"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="280.010625" y="202.040223">0</text></g></g> | |
| <g id="ytick_5"><g id="line2d_17"><path d="M 287.010625 170.375482 L 500.87952 170.375482" clip-path="url(#p47d23c684d)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_18"/><g id="text_16"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="280.010625" y="173.794779">20</text></g></g> | |
| <g id="ytick_6"><g id="line2d_19"><path d="M 287.010625 142.130038 L 500.87952 142.130038" clip-path="url(#p47d23c684d)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_20"/><g id="text_17"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="280.010625" y="145.549335">40</text></g></g> | |
| <g id="ytick_7"><g id="line2d_21"><path d="M 287.010625 113.884595 L 500.87952 113.884595" clip-path="url(#p47d23c684d)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_22"/><g id="text_18"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="280.010625" y="117.303891">60</text></g></g> | |
| <g id="ytick_8"><g id="line2d_23"><path d="M 287.010625 85.639151 L 500.87952 85.639151" clip-path="url(#p47d23c684d)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_24"/><g id="text_19"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="280.010625" y="89.058448">80</text></g></g> | |
| <g id="ytick_9"><g id="line2d_25"><path d="M 287.010625 57.393707 L 500.87952 57.393707" clip-path="url(#p47d23c684d)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_26"/><g id="text_20"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="280.010625" y="60.813004">100</text></g></g> | |
| <g id="ytick_10"><g id="line2d_27"><path d="M 287.010625 29.148263 L 500.87952 29.148263" clip-path="url(#p47d23c684d)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_28"/><g id="text_21"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="280.010625" y="32.56756">120</text></g></g> | |
| <g id="text_22"><text style="font-size: 10px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="256.752187" y="100.750463" transform="rotate(-90 256.752187 100.750463)">Wall time (s)</text></g> | |
| </g> | |
| <g id="patch_16"><path d="M 287.010625 198.620926 L 287.010625 2.88" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_17"><path d="M 287.010625 198.620926 L 500.87952 198.620926" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_18"><path d="M 296.731938 198.620926 L 313.824358 198.620926 L 313.824358 65.86734 L 296.731938 65.86734 z" clip-path="url(#p47d23c684d)" style="fill: #b04a3f"/></g> | |
| <g id="patch_19"><path d="M 350.145748 198.620926 L 367.238168 198.620926 L 367.238168 54.569162 L 350.145748 54.569162 z" clip-path="url(#p47d23c684d)" style="fill: #b04a3f"/></g> | |
| <g id="patch_20"><path d="M 403.559558 198.620926 L 420.651977 198.620926 L 420.651977 41.858713 L 403.559558 41.858713 z" clip-path="url(#p47d23c684d)" style="fill: #b04a3f"/></g> | |
| <g id="patch_21"><path d="M 456.973368 198.620926 L 474.065787 198.620926 L 474.065787 50.332346 L 456.973368 50.332346 z" clip-path="url(#p47d23c684d)" style="fill: #b04a3f"/></g> | |
| <g id="patch_22"><path d="M 313.824358 198.620926 L 330.916777 198.620926 L 330.916777 39.034168 L 313.824358 39.034168 z" clip-path="url(#p47d23c684d)" style="fill: #788c5d"/></g> | |
| <g id="patch_23"><path d="M 367.238168 198.620926 L 384.330587 198.620926 L 384.330587 27.735991 L 367.238168 27.735991 z" clip-path="url(#p47d23c684d)" style="fill: #788c5d"/></g> | |
| <g id="patch_24"><path d="M 420.651977 198.620926 L 437.744397 198.620926 L 437.744397 12.200996 L 420.651977 12.200996 z" clip-path="url(#p47d23c684d)" style="fill: #788c5d"/></g> | |
| <g id="patch_25"><path d="M 474.065787 198.620926 L 491.158207 198.620926 L 491.158207 24.911446 L 474.065787 24.911446 z" clip-path="url(#p47d23c684d)" style="fill: #788c5d"/></g> | |
| <g id="legend_2"> | |
| <g id="patch_26"><path d="M 293.130625 14.166937 L 302.650625 14.166937 L 302.650625 9.406937 L 293.130625 9.406937 z" style="fill: #b04a3f"/></g> | |
| <g id="text_23"><text style="font-size: 6.8px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="305.710625" y="14.166937">Seed A (412 s)</text></g> | |
| <g id="patch_27"><path d="M 293.130625 24.148062 L 302.650625 24.148062 L 302.650625 19.388062 L 293.130625 19.388062 z" style="fill: #788c5d"/></g> | |
| <g id="text_24"><text style="font-size: 6.8px; font-family: 'DejaVu Sans'; text-anchor: start; fill: #141413" x="305.710625" y="24.148062">Candidate B (489 s)</text></g> | |
| </g> | |
| </g> | |
| </g> | |
| <defs><clipPath id="p6a6301ffdc"><rect x="29.284375" y="2.88" width="213.868895" height="195.740926"/></clipPath><clipPath id="p47d23c684d"><rect x="287.010625" y="2.88" width="213.868895" height="195.740926"/></clipPath></defs> | |
| </svg> | |
| </div> | |
| <div class="chart-caption">Left: warnings per eval — Candidate B reaches 0 on two evals and halved <code>numeric-data</code>. Right: wall time — every eval is slower by 17–21 s.</div> | |
| </div> | |
| </section> | |
| <!-- Quality vs Cost tradeoff --> | |
| <section class="section stack" data-gap="md"> | |
| <div class="section-head"> | |
| <div> | |
| <span class="eyebrow">Primary tradeoff</span> | |
| <h2>Quality vs cost</h2> | |
| </div> | |
| </div> | |
| <div class="panel chart-panel stack"> | |
| <div class="chart-svg"> | |
| <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="359.75952pt" height="251.75952pt" viewBox="0 0 359.75952 251.75952" 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 251.75952 L 359.75952 251.75952 L 359.75952 0 L 0 0 L 0 251.75952 z" style="fill: none"/></g> | |
| <g id="axes_1"> | |
| <g id="patch_2"><path d="M 43.597188 219.491082 L 356.87952 219.491082 L 356.87952 2.88 L 43.597188 2.88 L 43.597188 219.491082 z" style="fill: none"/></g> | |
| <g id="matplotlib.axis_1"> | |
| <g id="xtick_1"><g id="line2d_1"><path d="M 69.704049 219.491082 L 69.704049 2.88" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_2"/><g id="text_1"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="69.704049" y="233.329676">1.8</text></g></g> | |
| <g id="xtick_2"><g id="line2d_3"><path d="M 121.917771 219.491082 L 121.917771 2.88" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_4"/><g id="text_2"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="121.917771" y="233.329676">1.9</text></g></g> | |
| <g id="xtick_3"><g id="line2d_5"><path d="M 174.131493 219.491082 L 174.131493 2.88" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_6"/><g id="text_3"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="174.131493" y="233.329676">2.0</text></g></g> | |
| <g id="xtick_4"><g id="line2d_7"><path d="M 226.345215 219.491082 L 226.345215 2.88" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_8"/><g id="text_4"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="226.345215" y="233.329676">2.1</text></g></g> | |
| <g id="xtick_5"><g id="line2d_9"><path d="M 278.558937 219.491082 L 278.558937 2.88" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_10"/><g id="text_5"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="278.558937" y="233.329676">2.2</text></g></g> | |
| <g id="xtick_6"><g id="line2d_11"><path d="M 330.772659 219.491082 L 330.772659 2.88" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_12"/><g id="text_6"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #87867f" x="330.772659" y="233.329676">2.3</text></g></g> | |
| <g id="text_7"><text style="font-size: 10px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="200.238354" y="246.799832">Estimated cost (USD)</text></g> | |
| </g> | |
| <g id="matplotlib.axis_2"> | |
| <g id="ytick_1"><g id="line2d_13"><path d="M 43.597188 204.654707 L 356.87952 204.654707" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_14"/><g id="text_8"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="208.074004">0.91</text></g></g> | |
| <g id="ytick_2"><g id="line2d_15"><path d="M 43.597188 174.981956 L 356.87952 174.981956" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_16"/><g id="text_9"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="178.401253">0.92</text></g></g> | |
| <g id="ytick_3"><g id="line2d_17"><path d="M 43.597188 145.309205 L 356.87952 145.309205" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_18"/><g id="text_10"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="148.728502">0.93</text></g></g> | |
| <g id="ytick_4"><g id="line2d_19"><path d="M 43.597188 115.636454 L 356.87952 115.636454" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_20"/><g id="text_11"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="119.055751">0.94</text></g></g> | |
| <g id="ytick_5"><g id="line2d_21"><path d="M 43.597188 85.963703 L 356.87952 85.963703" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_22"/><g id="text_12"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="89.383">0.95</text></g></g> | |
| <g id="ytick_6"><g id="line2d_23"><path d="M 43.597188 56.290952 L 356.87952 56.290952" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_24"/><g id="text_13"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="59.710249">0.96</text></g></g> | |
| <g id="ytick_7"><g id="line2d_25"><path d="M 43.597188 26.618201 L 356.87952 26.618201" clip-path="url(#pcc58fd3ae6)" style="fill: none; stroke: #ded9cd; stroke-width: 0.8"/></g><g id="line2d_26"/><g id="text_14"><text style="font-size: 9px; font-family: 'DejaVu Sans'; text-anchor: end; fill: #87867f" x="36.597188" y="30.037498">0.97</text></g></g> | |
| <g id="text_15"><text style="font-size: 10px; font-family: 'DejaVu Sans'; text-anchor: middle; fill: #3d3d3a" x="10.478438" y="111.185541" transform="rotate(-90 10.478438 111.185541)">Final score</text></g> | |
| </g> | |
| <g id="patch_3"><path d="M 43.597188 219.491083 L 43.597188 2.88" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_4"><path d="M 43.597188 219.491082 L 356.87952 219.491082" style="fill: none; stroke: #d1cfc5"/></g> | |
| <g id="patch_5"><path d="M 134.007896 181.26455 Q 210.718281 128.05756 245.828914 43.36725" style="fill: none; stroke: #87867f; stroke-width: 1.5"/><path d="M 242.280543 46.442809 L 245.828914 43.36725 L 246.160339 48.051282" style="fill: none; stroke: #87867f; stroke-width: 1.5"/></g> | |
| <g id="text_16"><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; fill: #3d3d3a" transform="translate(117.476218 197.760641)">Seed A</text><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; fill: #3d3d3a" transform="translate(102.62114 207.278782)">0.9175 $1.92</text></g> | |
| <g id="text_17"><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; fill: #3d3d3a" transform="translate(221.235977 22.750514)">Candidate B</text><text style="font-size: 8.5px; font-family: 'DejaVu Sans'; fill: #3d3d3a" transform="translate(217.491329 32.268654)">0.9655 $2.14</text></g> | |
| <g id="text_18"><text style="font-style: italic; font-size: 8px; font-family: 'DejaVu Sans'; fill: #87867f" transform="translate(174.992484 110.397554)">+0.048</text><text style="font-style: italic; font-size: 8px; font-family: 'DejaVu Sans'; fill: #87867f" transform="translate(174.992484 119.355804)">+$0.22</text></g> | |
| <g id="PathCollection_1"><defs><path id="C0_0_fa34ea0180" d="M 0 5.477226 C 1.452577 5.477226 2.845856 4.900111 3.872983 3.872983 C 4.900111 2.845856 5.477226 1.452577 5.477226 -0 C 5.477226 -1.452577 4.900111 -2.845856 3.872983 -3.872983 C 2.845856 -4.900111 1.452577 -5.477226 0 -5.477226 C -1.452577 -5.477226 -2.845856 -4.900111 -3.872983 -3.872983 C -4.900111 -2.845856 -5.477226 -1.452577 -5.477226 0 C -5.477226 1.452577 -4.900111 2.845856 -3.872983 3.872983 C -2.845856 4.900111 -1.452577 5.477226 0 5.477226 z"/></defs><g clip-path="url(#pcc58fd3ae6)"><use xlink:href="#C0_0_fa34ea0180" x="132.360515" y="182.400144" style="fill: #d97757; stroke: #ffffff; stroke-width: 0.8"/></g><g clip-path="url(#pcc58fd3ae6)"><use xlink:href="#C0_0_fa34ea0180" x="247.230704" y="39.970939" style="fill: #788c5d; stroke: #ffffff; stroke-width: 0.8"/></g></g> | |
| </g> | |
| </g> | |
| <defs><clipPath id="pcc58fd3ae6"><rect x="43.597188" y="2.88" width="313.282332" height="216.611083"/></clipPath></defs> | |
| </svg> | |
| </div> | |
| <div class="chart-caption">Quality/cost tradeoff: Candidate B sits further up and to the right — higher quality at higher cost. The arrow shows the net movement from Seed A. For GEPA seed selection, quality improvement (+5.2%) outweighs the cost delta (+11.5%).</div> | |
| </div> | |
| </section> | |
| <!-- Scoring formula & provenance --> | |
| <section class="section-rail" data-gap="lg"> | |
| <div class="stack" data-gap="md"> | |
| <div class="section-head"> | |
| <div> | |
| <span class="eyebrow">Methodology</span> | |
| <h2>Scoring formula and run provenance</h2> | |
| </div> | |
| </div> | |
| <div class="card stack" data-gap="sm"> | |
| <h3>Scoring formula</h3> | |
| <p>Final score = <code>0.30 · generation_score + 0.55 · checker_score + 0.15 · hygiene_score</code></p> | |
| <ul class="plain-list"> | |
| <li><strong>generation_score</strong> = generated_ok / total_evals (pass/fail rate)</li> | |
| <li><strong>checker_score</strong> = max(0, 1 − 0.20 · checker_failures − 0.03 · checker_warnings)</li> | |
| <li><strong>hygiene_score</strong> = average artifact compliance after unsupported-classes, external-asset, and missing-CSS penalties</li> | |
| </ul> | |
| </div> | |
| <div class="card stack" data-gap="sm"> | |
| <h3>Run provenance</h3> | |
| <ul class="plain-list"> | |
| <li><strong>Timestamp:</strong> 2026-05-20T18:40:00Z</li> | |
| <li><strong>Command:</strong> <code>python3 scripts/run_skill_evals.py --skill-dir birch-html --model codexresponses.gpt-5.5 --label skill-candidate-b-gpt55</code></li> | |
| <li><strong>Model:</strong> codexresponses.gpt-5.5 (same for both seeds)</li> | |
| <li><strong>Eval set:</strong> numeric-data, code-review, module-explainer, implementation-plan</li> | |
| <li><strong>Seed A report:</strong> <code>eval-runs/reports/skill-seed-gpt55/summary.json</code></li> | |
| <li><strong>Candidate B report:</strong> <code>eval-runs/reports/skill-candidate-b-gpt55/summary.json</code></li> | |
| <li><strong>Source file:</strong> <code>evals/benchmark-comparison/source.json</code></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <aside class="reference-panel"> | |
| <div class="stack" data-gap="sm"> | |
| <div class="eyebrow">Caveats</div> | |
| <ul class="plain-list"> | |
| <li>Provider token schemas differ; cached, reasoning, and effective tokens are not apples-to-apples. Token deltas (±7–8%) should be read as directional, not precise.</li> | |
| <li>Checker warnings are mechanical contract signals: they flag structural or rendering deviations but are not a complete human quality score.</li> | |
| <li>Wall time includes model latency and harness overhead; small differences (±20 s per eval observed) should be treated as noisy.</li> | |
| <li>Hygiene dip of 0.01 may reflect a single artifact deviating on a minor compliance check — not assessed manually.</li> | |
| <li>Candidate B’s <code>code-review</code> artifact still needs manual inspection for long diff wrapping before committing to seed promotion.</li> | |
| <li>One warning persists on <code>module-explainer</code> (mobile flow caption density) — likely a design constraint, not a regression.</li> | |
| </ul> | |
| </div> | |
| </aside> | |
| </section> | |
| <!-- Recommendation & next experiment --> | |
| <section class="section stack" data-gap="md"> | |
| <div class="section-head"> | |
| <div> | |
| <span class="eyebrow">Recommendation</span> | |
| <h2>Decision and next experiment</h2> | |
| </div> | |
| </div> | |
| <div class="card stack" data-gap="sm"> | |
| <h3>Decision: PROMOTE</h3> | |
| <p>Candidate B should be promoted as the next GEPA seed. The final score improvement of +0.048 (+5.2%) and warning reduction from 5 to 2 justify the cost increase of $0.22 and latency increase of 77 s. All four evals show score gains with no generation failures.</p> | |
| </div> | |
| <div class="flow-list"> | |
| <ol> | |
| <li class="flow-step"> | |
| <span class="flow-num">1</span> | |
| <div class="stack" data-gap="sm"> | |
| <h3 class="flow-title">Promote Candidate B for single-model GEPA run</h3> | |
| <p class="flow-detail">Run GEPA generation with the Candidate B skill seed on codexresponses.gpt-5.5. Validate the output artifacts against existing Seed A baselines.</p> | |
| </div> | |
| </li> | |
| <li class="flow-step"> | |
| <span class="flow-num">2</span> | |
| <div class="stack" data-gap="sm"> | |
| <h3 class="flow-title">Cross-model validation</h3> | |
| <p class="flow-detail">Rerun on Kimi and Gemini before broad model-suite validation. This ensures the seed quality is not specific to a single provider.</p> | |
| </div> | |
| </li> | |
| <li class="flow-step"> | |
| <span class="flow-num">3</span> | |
| <div class="stack" data-gap="sm"> | |
| <h3 class="flow-title">Manual inspection</h3> | |
| <p class="flow-detail">Inspect the code-review artifact for long diff wrapping before committing the candidate as the permanent seed. One warning on module-explainer mobile flow caption may also warrant a design pass.</p> | |
| </div> | |
| </li> | |
| </ol> | |
| </div> | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |
Xet Storage Details
- Size:
- 79 kB
- Xet hash:
- dab46c95a6f94e98da88cf711947299a986c20ebb1c123743245eb0c2a8e3b7c
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.